@import "mixins.scss";
@import "colors.scss";
#content {
	display: grid;
}
#player {
	background-color: $darkBackground;
	display: grid;
	grid-template-areas: "Head ControlPanel" "ViewPort ControlPanel" "Timeline Timeline";
	grid-template-rows: 50px calc(100dvh - 350px - 20px) 300px;
	grid-template-columns: 1fr auto;
	max-height: calc(100dvh - 20px);
}

#viewport {
	grid-area: ViewPort;
	border: 1px solid $lightBackground;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	overflow: hidden;

	video {
		width: 100%;
		height: auto;
		image-rendering: smooth;
	}
}

#timeline {
	grid-area: Timeline;
	border: 1px solid $lightBackground;
	$labelWidth: 100px;

	#tracklist {
		display: flex;
		flex-direction: column;
		overflow: auto;
		width: 100%;
		gap: 1px;
	}

	#playhead {
		display: grid;
		width: 100%;
		position: relative;
		grid-template-columns: $labelWidth 1fr;
		grid-template-areas: "Label Input";
		input {
			grid-area: Input;
			width: 100%;
		}

		.indicator {
			width: 1px;
			background-color: $secondaryAccentLight;
			height: 100%;
			position: absolute;
			pointer-events: none;
		}
	}

	.track {
		display: grid;
		min-height: 30px;
		background-color: $lightBackground;
		grid-template-columns: $labelWidth 1fr;
		/* overflow: hidden; */
		/* margin-left: 100px; */

		.label {
			width: 100px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 0;
			top: 0px;
			background-color: $featureBackround;
		}
		.clips {
			display: block;
			position: relative;
			padding: 0px 2px;
		}
	}

	.clip {
		position: absolute;
		display: block;
		height: 30px;
		top: auto;
		flex-grow: 0;
		flex-shrink: 0;
		background-color: $mainAccentDark;
		overflow: hidden;
	}
}