<script lang="ts">
	export let frame: number;
	export let fps: number;
</script>

<div class="scale">
	<div class="labels">
		<div>Video Late</div>
		<div>Audio Late</div>
	</div>
	<div class="indicator"></div>
	<div class="ticks">
		{#each Array.from({ length: fps }, (_, i) => i) as i}
			<div class="tick"></div>
		{/each}
	</div>
	<div class="axis"></div>
</div>

<style>
	.scale {
		position: relative;
	}

	.labels {
		position: absolute;
		top: -3vw;
		width: 100%;
		display: flex;
		font-size: 2vw;
	}

	.labels > div {
		flex-grow: 1;
		text-align: center;
	}

	.axis {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);

		width: 100%;
		background: white;
		height: 2px;
	}

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

	.tick {
		width: 2px;
		height: 3vh;
		background: white;
	}
</style>
