/**
 * Premium global scrollbar — public site only.
 *
 * Applies a thin, minimal scrollbar that integrates with the Gloskin palette.
 * Admin (/wp-admin) never receives this stylesheet. Nested sliders and
 * carousels that already define their own scrollbar state are unaffected
 * because these selectors have lower specificity than component overrides.
 *
 * Progressive styling:
 *   - Firefox: scrollbar-width + scrollbar-color (native support)
 *   - WebKit/Blink: ::-webkit-scrollbar-* pseudo-elements
 *
 * No layout shift: width is thin enough (5 px) that it overlays on modern
 * browsers and does not alter box-model dimensions.
 *
 * @package GloskinSiteCore
 */

/* ── Firefox ─────────────────────────────────────────────────── */
body.gloskin-ui1 {
	scrollbar-width: thin;
	scrollbar-color: color-mix( in srgb, var(--gloskin-brand-champagne) 52%, var(--gloskin-brand-border) )
	                 transparent;
}

/* ── WebKit / Blink ──────────────────────────────────────────── */

/* Track */
body.gloskin-ui1 ::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

body.gloskin-ui1 ::-webkit-scrollbar-track {
	background: transparent;
}

/* Thumb — base state */
body.gloskin-ui1 ::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: color-mix( in srgb, var(--gloskin-brand-champagne) 40%, var(--gloskin-brand-border) );
	transition: background 200ms ease;
}

/* Thumb — hover/active state */
body.gloskin-ui1 ::-webkit-scrollbar-thumb:hover,
body.gloskin-ui1 ::-webkit-scrollbar-thumb:active {
	background: color-mix( in srgb, var(--gloskin-brand-champagne) 65%, var(--gloskin-brand-charcoal) );
}

/* Corner — where horizontal and vertical tracks meet */
body.gloskin-ui1 ::-webkit-scrollbar-corner {
	background: transparent;
}

/* Suppress horizontal scrollbar on body — the page must never scroll
 * horizontally; wide tables/blocks own their own overflow containers. */
body.gloskin-ui1 {
	overflow-x: hidden;
}