/* ==========================================================================
   Project-wide scrollbars: a slim floating pill on a clear track, neutral at
   rest and turning into the area's accent gradient on hover. Loaded by the
   admin, seller and customer panels, every store theme (themeone head), the
   maintenance page and changelog.html.

   The accent follows wherever the page is: the panel accent (--dr-accent),
   else the store brand (--t1-brand), else indigo. Areas that hide their
   scrollbar (carousels, tab strips) or style their own (the dark panel
   sidebars in admin-theme.css) keep doing so: their rules are more specific.

   Chrome stops using ::-webkit-scrollbar styling on any element that has
   scrollbar-width / scrollbar-color, so those two are set for Firefox only.
   ========================================================================== */
:root {
	--sb-accent: var(--dr-accent, var(--t1-brand, #4F46E5));
	--sb-thumb: rgba(100, 116, 139, .34);
	--sb-thumb-hover-a: var(--sb-accent);
	--sb-thumb-hover-b: color-mix(in srgb, var(--sb-accent) 55%, #fff);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: transparent;
}
/* The 3px transparent border + padding-box clip makes the pill float off the edge. */
::-webkit-scrollbar-thumb {
	min-height: 40px;
	min-width: 40px;
	border: 3px solid transparent;
	border-radius: 999px;
	background: var(--sb-thumb);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	border-width: 2px;
	background: linear-gradient(180deg, var(--sb-thumb-hover-a) 0%, var(--sb-thumb-hover-b) 100%);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:horizontal:hover {
	background: linear-gradient(90deg, var(--sb-thumb-hover-a) 0%, var(--sb-thumb-hover-b) 100%);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
	background: var(--sb-accent);
	background-clip: padding-box;
}
::-webkit-scrollbar-button {
	display: none;
}

/* Small inner scroll areas (dropdowns, modals, tables, editors) get a slimmer pill. */
:where(.dropdown-menu, .modal-body, .select2-results__options, .dataTables_scrollBody, .table-responsive, textarea, .offcanvas-body)::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--sb-thumb) transparent;
	}
	*:hover {
		scrollbar-color: var(--sb-accent) transparent;
	}
}