/* Site-wide scrollbar: slim, rounded, theme-aware, brand purple on hover.
   Components with their own scrollbar rules still override this. */

:root {
	--zb-scroll-thumb: rgba(15, 23, 42, 0.22);
	--zb-scroll-thumb-hover: rgba(99, 102, 241, 0.75);
}

[data-bs-theme="dark"] {
	--zb-scroll-thumb: rgba(226, 232, 240, 0.24);
	--zb-scroll-thumb-hover: rgba(129, 140, 248, 0.8);
}

/* Chromium, Edge, Safari. The transparent border plus padding-box clip keeps
   the visible thumb narrower than the gutter, so it floats off the edge. */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--zb-scroll-thumb);
	background-clip: padding-box;
	border: 3px solid transparent;
	border-radius: 999px;
	min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--zb-scroll-thumb-hover);
}

::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

/* Firefox only. Chromium 121+ would let these standard properties replace the
   ::-webkit-scrollbar styling above, so they are gated to browsers without it. */
@supports not selector(::-webkit-scrollbar) {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--zb-scroll-thumb) transparent;
	}
}