/* Scrollbars for the page, sidebar, drawers, dialogs, and horizontal data tables. */
:root {
    --pg-scroll-thumb: hsl(var(--muted-foreground) / .48);
    --pg-scroll-thumb-hover: hsl(var(--primary) / .72);
    --pg-scroll-thumb-active: hsl(var(--primary) / .9);
}

.dark {
    --pg-scroll-thumb: hsl(var(--muted-foreground) / .62);
    --pg-scroll-thumb-hover: hsl(var(--primary) / .82);
}

html,
body,
body * {
    scrollbar-width: thin;
    scrollbar-color: var(--pg-scroll-thumb) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--pg-scroll-thumb);
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
    background: var(--pg-scroll-thumb-hover);
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
body *::-webkit-scrollbar-thumb:active {
    background: var(--pg-scroll-thumb-active);
    background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
    background: transparent;
}

/* The navigation has an older, more specific scrollbar rule. Keep it aligned. */
body .shell .section-nav {
    scrollbar-color: var(--pg-scroll-thumb) transparent;
}

body .shell .section-nav::-webkit-scrollbar { width: 10px; }
body .shell .section-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--pg-scroll-thumb);
    background-clip: padding-box;
}
body .shell .section-nav::-webkit-scrollbar-thumb:hover {
    background: var(--pg-scroll-thumb-hover);
    background-clip: padding-box;
}

@media (pointer: coarse), (forced-colors: active) {
    html, body, body * { scrollbar-width: auto; scrollbar-color: auto; }
}