/* The video sequence exploration (templates/design-system/explorations/video-sequence.php, scripts/video-sequence.js).
   Scaffolding: structure and token slots only, to be tuned. */

video-sequence {
	display: block;
	padding: var(--space);

	.stage {
		position: relative;
		overflow: clip;
	}

	/* Two players stacked; the one playing is on top and hides the other. isolation keeps that stacking inside the player, so the cover after it always paints over both. */
	video-player {
		position: relative;
		isolation: isolate;

		iframe {
			position: absolute;
			inset: 0;

			&[data-on-top] {
				z-index: 1;
			}
		}
	}

	sequence-cover {
		position: absolute;
		inset: 0;
		pointer-events: none;

		> * {
			position: absolute;
			visibility: hidden;
		}
	}

	.bars {
		inset: 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}

	.bar {
		/* A hair of overlap so no seam shows between bars. */
		margin-inline-end: -1px;
		background-color: var(--art-circle);
		background-image: var(--grain);
	}

	/* Paper and band are oversized so they still cover the frame while tilted. */
	.paper,
	.band {
		inset: -25%;
		background-image: var(--grain);
	}

	.paper {
		background-color: var(--art-slab-2);
	}

	.chalk {
		inset: 0;
		overflow: clip;

		canvas {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	/* Where the chalk line ends (drawChalk() draws to the same spot). */
	.dot {
		left: 84%;
		top: 32%;
		width: 12%;
		aspect-ratio: 1;
		translate: -50% -50%;
		border-radius: 50%;
		background-color: var(--art-circle);
		background-image: var(--grain);
	}

	.card {
		inset: 0;
		display: grid;
		place-content: center;
		text-align: center;

		p {
			margin: 0;
		}
	}

	.now-playing {
		margin-top: var(--space);
	}

	.part-list {
		display: flex;
		gap: var(--space-small);
		margin: var(--space-small) 0 0;
		padding: 0;
		list-style: none;

		li {
			flex: var(--part-length) 1 0;
			min-width: 0;
		}

		button {
			position: relative;
			display: grid;
			width: 100%;
			padding: var(--control-padding);
			text-align: start;
			overflow: clip;

			&[aria-current] {
				outline: 2px solid currentColor;
			}
		}

		.part-progress {
			position: absolute;
			inset: auto 0 0;
			height: 3px;
			background-color: currentColor;
			transform: scaleX(0);
			transform-origin: 0 50%;
		}

		@media (width < 700px) {
			flex-direction: column;
		}
	}
}

sequence-controls {
	display: grid;
	gap: var(--space);

	.swipe-picker {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-small) var(--space);
	}

	.actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-small);
	}
}

.sequence-parts {
	display: grid;
	gap: var(--space);

	.part-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space);

		label {
			display: grid;
		}
	}

	button {
		justify-self: start;
	}
}