/* Scrollbars for the console demo.

   Hand-written, like console.js — generate-console-demo.py links this file but
   never writes it.

   The dumps are the real app, and the app never dressed its scrollbars: in the
   product they sit at the edge of the browser's own chrome and nobody looks at
   them. Framed inside the marketing hero they become the one piece of bare
   operating system in an otherwise composed picture, and on Windows that is a
   light grey bar against a near-black interface.

   Every colour below is one the interface already uses, read out of its own
   stylesheet: the track is the page background, the thumb is the fill the app
   gives an input, and the hover state is its border colour. Nothing new is
   introduced, so the bar reads as part of the product rather than as decoration
   applied to it. */

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

/* Transparent rather than filled: the page shows through, so there is no
   gutter drawn down the side of the interface. */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /* dark-input — the same fill as a form field */
    background-color: #253341;
    border-radius: 999px;
    /* A transparent border clipped to the padding box insets the bar from the
       edge. Without it the thumb touches the window frame and reads as part
       of it rather than as something floating over the page. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    /* dark-border — the app's own next step up in lightness */
    background-color: #38444d;
}

/* Firefox has no pseudo-elements for this and takes the standard properties
   instead. They are guarded because Chrome, given either of them, ignores
   everything above — and the inset and the radius are only available there. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #253341 transparent;
    }
}