/* =========================
   GLOBAL BASIS
========================= */

* {
	scrollbar-width: thin;                 /* Firefox / spec */
}

div:has(table),
div[class*="wrapper"] > div,
div[class*="wrapper"]:not(.content-wrapper) {
	scrollbar-gutter: stable;              /* layout stabiel */
}

/* alles behalve root: verborgen */
*:not(html, body) {
	scrollbar-color: transparent transparent;
}

/* root scrollbars */
html,
body {
	scrollbar-color: transparent var(--color_darkest);
}

/* hover zichtbaar */
html:hover,
body:hover,
div:hover {
	scrollbar-color: var(--color_text) var(--color_darkest);
}
.zp-page *:hover {
	scrollbar-color: var(--color_text) #a5a3cb10!important;
}

/* =========================
   WEBKIT / CHROMIUM
========================= */

/* algemene maat */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

/* default track */
*:not(html, body)::-webkit-scrollbar-track {
	background: transparent;
}

/* root track */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
	background: var(--color_darkest);
}

/* thumb basis */
::-webkit-scrollbar-thumb {
	background-color: transparent;
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* thumb hover zichtbaar */
html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
div:hover::-webkit-scrollbar-thumb {
	background-color: var(--color_text);
}