/* CSS Overflow Level 5 carousel controls.
   Kept out of src/app.css so Lightning CSS / Turbopack does not warn on
   ::scroll-button, ::scroll-marker, and :target-current. */

@supports (position-anchor: var(--anchor-name)) {
	.carousel-scroll-buttons::scroll-button(*) {
		cursor: pointer;
		position: absolute;
		position-anchor: var(--anchor-name);
		z-index: 1;
		display: block;
		aspect-ratio: 1;
		width: 1.5lh;
		margin-inline: -100%;
		background-color: currentColor;
	}

	.carousel-scroll-buttons::scroll-button(left) {
		content: '' / 'Scroll left';
		position-area: center start;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm62.63 304L296 374.63 177.37 256 296 137.37 318.63 160l-96 96z'/%3E%3C/svg%3E")
			center / cover;
	}

	.carousel-scroll-buttons::scroll-button(right) {
		content: '' / 'Scroll right';
		position-area: center end;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm-40 326.63L193.37 352l96-96-96-96L216 137.37 334.63 256z'/%3E%3C/svg%3E")
			center / cover;
	}
}

.carousel-scroll-marker {
	scroll-marker-group: after;
}

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

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