/*
 * Branded scrollbars (Spec 32 FR-32-26).
 *
 * Every scroller, and the page's own bar, takes its colours from the theme snapshot
 * (settings.custom.scrollbar.thumb, .thumbOnDark and .track). A block that needs its own look sets
 * --sgs-scrollbar-thumb or --sgs-scrollbar-track in its scoped style. The thumb on each ground reaches
 * 2:1 (scripts/check-snapshot-scrollbar-tokens.py).
 *
 * `scrollbar-color` is declared on :where(*) so a scope's override reaches its descendants, which a
 * single declaration on :root would not (a var() on :root resolves at the root). The width stays `auto`.
 * Where `scrollbar-color` or `scrollbar-width` is not `auto`, Chrome 121+ ignores ::-webkit-scrollbar
 * parts on that element, so a block that draws its own webkit parts resets `scrollbar-color` to `auto`
 * on itself and a hidden bar keeps `scrollbar-width: none`.
 */

:root,
.sgs-on-light {
	--sgs-scrollbar-thumb: var(--wp--custom--scrollbar--thumb, var(--wp--preset--color--primary, #1f7a7a));
	--sgs-scrollbar-track: var(--wp--custom--scrollbar--track, transparent);
}

.sgs-on-dark {
	--sgs-scrollbar-thumb: var(--wp--custom--scrollbar--thumb-on-dark, var(--wp--preset--color--accent, #f59e0b));
}

:root,
:where(*) {
	scrollbar-color: var(--sgs-scrollbar-thumb) var(--sgs-scrollbar-track);
}

/* The browser's own bar, for a scroller that opts out (the shop filter sheet; a slider with no bar colour set). */
:where(.sgs-scrollbar-native),
:where(.sgs-scrollbar-native *) {
	scrollbar-color: auto;
}

/*
 * The page's own bar keeps whatever arrows the visitor's platform draws, recoloured only. Every inner
 * scroller (menus, sliders, cart, pop-ups, rails, tables) is a slim rounded thumb with no arrow buttons.
 * Chromium and WebKit draw that only through the ::-webkit-scrollbar parts, which they ignore on an
 * element whose scrollbar-color is set, so inside body the colour moves onto the parts and
 * scrollbar-color returns to auto. Firefox has no such parts and draws no arrows: it keeps the
 * scrollbar-color above. An opted-out scroller (.sgs-scrollbar-native) and a hidden bar
 * (scrollbar-width: none) are left alone.
 */
@supports selector(::-webkit-scrollbar) {
	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *)) {
		scrollbar-color: auto;
	}

	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *))::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		background: transparent;
	}

	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *))::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;
	}

	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *))::-webkit-scrollbar-track,
	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *))::-webkit-scrollbar-corner {
		background: var(--sgs-scrollbar-track);
	}

	:where(body *:not(.sgs-scrollbar-native, .sgs-scrollbar-native *))::-webkit-scrollbar-thumb {
		background-clip: padding-box;
		background-color: var(--sgs-scrollbar-thumb);
		border: 2px solid transparent;
		border-radius: 999px;
	}
}

/*
 * Overlay scrollbar (assets/js/sgs-overlay-scroll.js). The script adds `.sgs-overlay-scroll` once it has mounted, which hides
 * the native bar on that scroller only and draws a thumb over the end edge that takes no layout width; without script the slim
 * bar above stays. A scope overrides --sgs-overlay-scroll-width (visible thumb), --sgs-overlay-scroll-hit (pointer area) and
 * --sgs-overlay-scroll-inset (gap from the edge); the colour is --sgs-scrollbar-thumb. The thumb's height and position are
 * custom properties the script sets at run time.
 */
.sgs-overlay-scroll.sgs-overlay-scroll {
	scrollbar-width: none;
	scrollbar-gutter: auto;
}

.sgs-overlay-scroll.sgs-overlay-scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

:where(.sgs-overlay-scroll--relative) {
	position: relative;
}

:where(.sgs-overlay-scroll__thumb) {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 2;
	box-sizing: border-box;
	width: var(--sgs-overlay-scroll-hit, 8px);
	height: var(--sgs-overlay-scroll-h, 0);
	transform: translate3d(0, var(--sgs-overlay-scroll-y, 0), 0);
	opacity: 0;
	pointer-events: none;
	cursor: default;
	touch-action: none;
	transition: opacity 200ms ease;
}

:where(.sgs-overlay-scroll__thumb)::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--sgs-overlay-scroll-inset, 2px);
	width: var(--sgs-overlay-scroll-width, 4px);
	border-radius: 999px;
	background: var(--sgs-scrollbar-thumb);
}

:where(.sgs-overlay-scroll__thumb[hidden]) {
	display: none;
}

:where(.sgs-overlay-scroll__thumb.is-visible) {
	opacity: 1;
	pointer-events: auto;
}

:where(.sgs-overlay-scroll__thumb:hover, .sgs-overlay-scroll__thumb.is-dragging)::before {
	width: calc(var(--sgs-overlay-scroll-width, 4px) + 2px);
}

@media (prefers-reduced-motion: reduce) {
	:where(.sgs-overlay-scroll__thumb) {
		transition: none;
	}
}