// 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

	&.disabled {
		color: var( --jp-gray-10 );
	}

	&:not(.disabled) {
		cursor: pointer;
	}

	&:hover:not(.disabled),
	&:focus-within:not(.disabled),
	&.pressed:not(.disabled) {
		background-color: var( --jp-gray-0 );

		.stats:not(.mobile-stats) {
			opacity: 0;
			width: 0;
			height: 0;
		}

		.actions {
			opacity: 1;
			width: unset;
			height: unset;
		}
	}

	&:focus,
	&:focus-within {
		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 );
	width: 100%;

	&.small {
		cursor: pointer;
	}
}

.poster {
	--width: 90px;
	--height: 50px;

	max-width: var( --width );
	min-width: var( --width );
	max-height: var( --height );
	min-height: var( --height );
	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
	width: 0;
	height: 0;
	opacity: 0;
}

.mobile-actions {
	display: flex;
	justify-content: space-between;
}

// STORYBOOK

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