/* Use native scrolling with a quiet, transparent scrollbar in both layouts. */
@media (forced-colors: none) {
    :root {
        --scrollbar-thumb: #a1a1aa;
        --scrollbar-thumb-hover: #71717a;
        --scrollbar-thumb-active: #52525b;
    }

    :root.dark {
        --scrollbar-thumb: #585858;
        --scrollbar-thumb-hover: #777;
        --scrollbar-thumb-active: #999;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }

    /* Chromium uses the pseudo-elements for precise sizing and no arrows. */
    @supports selector(::-webkit-scrollbar) {
        * {
            scrollbar-width: auto;
            scrollbar-color: auto;
        }

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

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

        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 999px;
            min-height: 32px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

        ::-webkit-scrollbar-thumb:active {
            background: var(--scrollbar-thumb-active);
        }

        ::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }
    }
}