/* Old-school scrollbars: visible track, chunky rounded thumb, stepper arrows.
 *
 * Overrides the Spruha template's global rule (assets/css/style.css:13843), which set a
 * 2px hairline with a dead `transition` — WebKit scrollbar pseudo-elements do not
 * animate, and it was declared on the track while the colour changed on the thumb. This
 * file loads after the template, so a bare ::-webkit-scrollbar wins on cascade order
 * without having to out-specify anything.
 *
 * WebKit/Blink only, deliberately. Firefox exposes only `scrollbar-width` and
 * `scrollbar-color` — it cannot render stepper arrows at all — so it gets a tinted
 * native scrollbar at the bottom of this file and that is the whole story there.
 *
 * The arrows are inline SVG data URIs because ::-webkit-scrollbar-button draws no glyph
 * of its own; without a background image it is a blank square.
 */

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #eef1f7;
}

/* The transparent border plus background-clip is what gives the thumb its inset margin —
 * the track shows through the border, so the thumb reads as floating inside the gutter
 * rather than filling it. min-height stops it collapsing to a dot on a long page, which
 * is both the classic behaviour and the difference between grabbable and not. */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-bg-color, #003366);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #002347;
}

::-webkit-scrollbar-thumb:active {
    background-color: #001a35;
}

/* ── Stepper arrows ────────────────────────────────────────────────────────
 * A button only exists once it has a size; the default is 0. */
::-webkit-scrollbar-button {
    background-color: #eef1f7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    display: block;
}

::-webkit-scrollbar-button:vertical {
    height: 14px;
    width: 14px;
}

::-webkit-scrollbar-button:horizontal {
    height: 14px;
    width: 14px;
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2.5 L9 7.5 L1 7.5 Z' fill='%23003366'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 7.5 L1 2.5 L9 2.5 Z' fill='%23003366'/></svg>");
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.5 5 L7.5 1 L7.5 9 Z' fill='%23003366'/></svg>");
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M7.5 5 L2.5 1 L2.5 9 Z' fill='%23003366'/></svg>");
}

::-webkit-scrollbar-button:hover {
    background-color: #dde3ee;
}

/* WebKit reserves FOUR button slots per bar — one pair at each end, so a "double button"
 * arrangement is possible. Styling the generic selector fills all four and you get two
 * arrows stacked at each end pointing opposite ways. These are the inner ones. */
::-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;
}

/* Where a vertical and a horizontal bar meet. */
::-webkit-scrollbar-corner {
    background: #eef1f7;
}

/* The template ships a dark theme; keep the bars legible if it is ever switched on. */
.dark-theme ::-webkit-scrollbar-track,
.dark-theme ::-webkit-scrollbar-button,
.dark-theme ::-webkit-scrollbar-corner {
    background-color: #1c2436;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background-color: #5a6b8c;
}

/* Firefox: no arrows are possible, so it just gets the colours. */
@supports (scrollbar-color: auto) {
    * {
        scrollbar-color: var(--primary-bg-color, #003366) #eef1f7;
    }
}