/**
 * CSS Carousel Controls Module features that Turbopack's CSS parser rejects
 * when bundled via app.css. Served as a static stylesheet instead.
 * Applies to elements with class "carousel".
 */
.carousel {
	--anchor-name: attr(data-anchor-name type(<custom-ident>), --carousel);
	anchor-name: var(--anchor-name);
	scroll-marker-group: after;
}

@supports (position-anchor: var(--anchor-name)) {
	.carousel::-webkit-scrollbar {
		display: none;
	}

	.carousel {
		scrollbar-width: none;
	}

	.carousel::scroll-button(*) {
		cursor: pointer;
		position: absolute;
		position-anchor: var(--anchor-name);
		top: anchor(center);
		z-index: 1;
		display: block;
		aspect-ratio: 1;
		width: 1.5lh;
		margin-inline: 0.5lh;
		translate: 0 -50%;
		background-color: currentColor;
	}

	.carousel::scroll-button(left) {
		content: '' / 'Scroll left';
		left: anchor(left);
		mask: url('https://ic0n.dev/io5/IoChevronBackCircleSharp') center / cover;
	}

	.carousel::scroll-button(right) {
		content: '' / 'Scroll right';
		right: anchor(right);
		mask: url('https://ic0n.dev/io5/IoChevronForwardCircleSharp') center / cover;
	}
}

.carousel::scroll-marker-group {
	position: absolute;
	position-anchor: var(--anchor-name);
	top: calc(anchor(bottom) + 1rem);
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 0.5ch;
}

.carousel > *::scroll-marker {
	content: '';
	display: block;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 9999px;
	background-color: color-mix(in oklab, var(--color-foreground, currentColor) 25%, transparent);
}

.carousel > *::scroll-marker:target-current {
	width: 2ch;
	opacity: 1;
	background-color: var(--color-foreground, currentColor);
}