/* Application-wide scrollbar style, modelled on the DevExpress scroll viewer
   (.dxbl-scroll-viewer in the theme): transparent track, no arrow buttons, 6px hit
   area, a square-cornered 3px thumb that widens to the full 6px on hover.
   DevExpress grids/list boxes hide native scrollbars and draw their own, so this
   only reaches plain overflow containers, the page itself and third-party widgets.

   Selectors are unqualified (specificity 0,0,1) on purpose: any existing
   ".something::-webkit-scrollbar" rule (sidebar, .xtree, left panel) still wins. */

:root {
    --terra-scrollbar-size: 6px;
    --terra-scrollbar-thumb: rgba(33, 37, 41, 0.35);
    --terra-scrollbar-thumb-hover: rgba(33, 37, 41, 0.55);
}

/* Chromium / Edge / Safari */
::-webkit-scrollbar {
    width: var(--terra-scrollbar-size);
    height: var(--terra-scrollbar-size);
    background: transparent;
}

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

/* No arrow buttons. Chromium draws them for every button variant unless each one is
   collapsed, so size them to zero as well as hiding them. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:double-button,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* The thumb is inset with a transparent border so it reads as a 3px bar hugging the
   right (vertical) or bottom (horizontal) edge, like DevExpress's flex-end thumb. */
::-webkit-scrollbar-thumb {
    background-color: var(--terra-scrollbar-thumb);
    background-clip: padding-box;
    border: 0 solid transparent;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:vertical {
    border-left-width: 3px;
    min-height: 32px;
}

::-webkit-scrollbar-thumb:horizontal {
    border-top-width: 3px;
    min-width: 32px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: var(--terra-scrollbar-thumb-hover);
    border-width: 0;
}

/* Firefox. Guarded because Chromium 121+ drops every ::-webkit-scrollbar rule on an
   element that has scrollbar-width/scrollbar-color set, which would lose the hover. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--terra-scrollbar-thumb) transparent;
    }
}