/* Shared scrollbar for every scroll area of the app: 5px, translucent, visible only while the pointer
   is over the scrolling area. A component can tune it with --scrollbar-size, --scrollbar-thumb and
   --scrollbar-thumb-hover, or hide it with its own ::-webkit-scrollbar { display: none } rule
   (more specific rules win over these universal ones). Chrome ignores these pseudo-elements on
   elements that set scrollbar-width or scrollbar-color. */
:root {
    --scrollbar-size: 5px;
    --scrollbar-thumb: color-mix(in srgb, var(--text-3) 28%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--text-3) 45%, transparent);
}
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--scrollbar-size); }
:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
/* Над самой полосой браузер снимает :hover с области, поэтому полоса под курсором задаётся отдельно. */
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    :hover { scrollbar-color: var(--scrollbar-thumb) transparent; }
}