/* Editor timeline styling. */

@import 'globals';

$tl-pad: 4px;                // Timeline slide default padding.
$tl-slide-cont-width: 200px; // Timeline slide "box" width.
$tl-index-cont-width: 0.15;  // Relative slide index container width.
$tl-thumb-cont-width: 1 - $tl-index-cont-width;

#timeline {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	margin: {
		top: $s1;
	}
	padding: {
		top: 5px;
		bottom: 5px;
		left: 0;
		right: 0;
	}
	overflow: {
		x: scroll;
		y: hidden;
	}
	width: 100%;
}

.tl-slide-cont {
	display: flex;
	flex-direction: row;

	margin: 5px;
	padding: 0;
	min: {
		width: $tl-slide-cont-width;
		height: 9/16
				*$tl-thumb-cont-width
				*($tl-slide-cont-width + 2*$tl-pad);
	}
	max: {
		width: $tl-slide-cont-width;
		height: 9/16
				*$tl-thumb-cont-width
				*($tl-slide-cont-width + 2*$tl-pad);
	}
	background-color: $white;
	color: $secondary;
	border: 1px solid $gray-1;

	/* Remove some margins from the first and last slide containers. */
	&:first-child {
		margin-left: 0;
	}
	&:last-child {
		margin-right: 0;
	}

	/* Special style classes. */
	&:hover {
		background-color: $secondary;
		color: $white;
	}
	&.disabled {
		background-color: $gray-1;
	}
	&.selected {
		background-color: $teal;
		color: $white;
	}
	&.error {
		background-color: $red;
		color: $white;
	}

	.tl-slide-index-cont {
		flex: 0 0 $tl-index-cont-width*100%;
		height: 100%;

		margin: 0;
		padding: $tl-pad {
			right: 0;
		}
		text-align: center;
	}

	.tl-slide-thumb-cont {
		flex: 0 0 $tl-thumb-cont-width*100%;
		height: 100%;

		margin: 0;
		padding: 0 {
			/*
			*  Overwrite .preview-16x9-fit alignment padding.
			*/
			top: calc(
				0.5625*#{$tl-thumb-cont-width}*(100% + 2*#{$tl-pad})
			) !important;
		}

		> iframe {
			pointer-events: none;
			border: 1px solid $gray-1;

			/*
			*  Overwrite .preview padding and sizing.
			*/
			left: 4px !important;
			width: calc(100% - 8px) !important;
			height: calc(100% - 8px) !important;
		}
	}
}