/* ============================================
   .scrollbar-plump — shared plump scrollbar utility
   Lifted out of the original .select-next-panel
   JS-driven scrollbar so any scrollable surface on
   the site can opt into the same look. Pure CSS via
   Firefox `scrollbar-*` properties + Webkit
   `::-webkit-scrollbar*` pseudo-elements; no JS for
   the basic case. The .select-next-panel keeps its
   JS-driven overlay because it needs guaranteed
   button-free rendering on the user's Chromium build —
   the CSS-only variant accepts that the native
   end-buttons may still show on some Chromium versions
   even with display: none, and that's a fair trade for
   a one-line opt-in everywhere else.
   ============================================ */

/* Firefox — built-in thin scrollbar with custom thumb / track colours.
   Catalog code-sample <pre> blocks (.uikit-snippet pre) also auto-pick up
   the plump look so they don't fall back to the OS default scrollbar. */
.scrollbar-plump,
.uikit-snippet pre {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(var(--color-primary-rgb), 0.45)
        rgba(255, 255, 255, 0.04);
}

/* Webkit / Blink — full custom rendering */
.scrollbar-plump::-webkit-scrollbar,
.uikit-snippet pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-plump::-webkit-scrollbar-track,
.uikit-snippet pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-full);
}

.scrollbar-plump::-webkit-scrollbar-thumb,
.uikit-snippet pre::-webkit-scrollbar-thumb {
    /* The 2 px transparent border + background-clip: padding-box trick
       gives the thumb visual breathing room inside the track without
       a separate inner element. */
    background-color: rgba(var(--color-primary-rgb), 0.45);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.15s ease;
}

.scrollbar-plump::-webkit-scrollbar-thumb:hover,
.uikit-snippet pre::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--color-primary-rgb), 0.7);
}

.scrollbar-plump::-webkit-scrollbar-thumb:active,
.uikit-snippet pre::-webkit-scrollbar-thumb:active {
    background-color: rgba(var(--color-primary-rgb), 0.85);
}

/* Hide the end buttons in Chromium / Safari. Some Chromium builds
   still render them despite display: none — that's a known quirk;
   the JS-driven overlay in .select-next-panel is the strict-no-buttons
   variant for cases where it must be perfect. */
.scrollbar-plump::-webkit-scrollbar-button,
.uikit-snippet pre::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.scrollbar-plump::-webkit-scrollbar-corner,
.uikit-snippet pre::-webkit-scrollbar-corner {
    background: transparent;
}