// Self-contained two-head timeline styling (a parent stylesheet doesn't cascade into a child component,
// so this styles the component's own internals and opts pointer-events back in). Reads as a thin bar with
// the exported span highlighted between a START and an END head — same visual language as ReplayScrubBar.

$white: #f8f5e6;
$accent: #ffd584; // amber span fill, distinct from the white playback bar elsewhere

.gif-timeline {
	width: 100%;
	height: 26px;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: blank-hand;
	pointer-events: all;

	.bar {
		position: relative;
		width: 100%;
		height: 12px;
		background-color: rgba($white, 0.18);
		border: 2px solid rgba($white, 0.5);

		// The exported span between the two heads.
		.region {
			position: absolute;
			top: 0;
			height: 100%;
			background-color: rgba($accent, 0.85);
		}
	}

	// Square scrub heads. The two are tinted slightly differently so it's obvious which is which.
	.head {
		position: absolute;
		width: 10px;
		height: 24px;
		margin-left: -5px;
		background-color: $white;
		border: 2px solid rgba($white, 0.5);
		image-rendering: pixelated;

		&:hover {
			border-color: $white;
			box-shadow: 0 0 10px 1px rgba($white, 0.7);
		}

		&.end {
			background-color: $accent;
		}
	}

	&:hover .bar {
		border-color: $white;
	}
}