// MAIN CONTAINER

.video-row {
	--content-height: 50px;

	display: flex;
	align-items: center;
	padding: calc( var(--spacing-base) * 2 ) var(--spacing-base); // 16px | 8px
	background-color: var(--jp-white);
	gap: calc( var(--spacing-base) * 2 ); // 16px
	cursor: pointer;

	&:hover, &.pressed {
		background-color: var(--jp-gray-0);
	}

	&:focus {
		outline: 1px solid black;
	}
}

// CHECKBOX

.checkbox-wrapper-small {
	height: var(--content-height);
	align-self: flex-start;
	display: flex;
	align-items: center;
}

// DATA CONTAINER

.video-data-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc( var(--spacing-base) * 2 ); // 16px
	border: none;
	min-width: 0; // Allows flex to be smaller than the content
	flex: 1;

	&.small {
		flex-direction: column;
		align-items: normal;
	}
}


// TITLE / POSTER SECTION

.info-wrapper {
	display: flex;
	align-items: center;
	gap: calc( var(--spacing-base) * 3 ); // 24px
	min-width: 0; // Allows flex to be smaller than the content
	position: relative;
	height: var(--content-height);

	&.small {
		cursor: pointer;
	}
}

.poster {
	width: 90px;
	height: 50px;
	object-fit: cover;
	border-radius: var(--jp-border-radius);
}

.title-wrapper {
	width: 100%;
	overflow: hidden;

	.title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.label {
		opacity: 0;
		position: absolute;
		top: -10px;
		background: var(--jp-yellow-20);
		padding: 0px var(--spacing-base); // 0 | 8px
		font-size: var(--font-body-extra-small);
		border-radius: 4px;
		line-height: 20px;
		transition: opacity .5s;
		white-space: nowrap;
	}

	&:hover > .label {
		opacity: 1;
	}
}

// METADATA SECTION

.meta-wrapper {
	width: fit-content;

	&.small {
		width: 100%;
	}
}

.stats {
	display: flex;
	align-items: center;
	gap: calc( var(--spacing-base) * 3 ); // 24px

	& > * {
		flex: 1;
		min-width: 50px;
	}

	& > .upload {
		min-width: 166px;
		width: fit-content;
		white-space: nowrap;
	}

	&.small {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: var(--spacing-base); // 8px
		gap: 0;

		& > * {
			display: flex;
			width: 100%;
			margin-bottom: var(--spacing-base); // 8px

			& > * {
				flex: 1;
			}
		}
	}
}

.actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: calc( var(--spacing-base) * 3 ); // 24px
	margin-right: calc( var(--spacing-base) * 3 ); // 24px
}

// STORYBOOK

.storybook-wrapper {
	width: 90vw;
	max-width: 1000px;
}
