/* Shared scrollbar presentation for the app's browser-based pages. */
:root {
    --app-scrollbar-thumb: #7b93b8;
    --app-scrollbar-thumb-hover: #1d4ed8;
}

/* Keep native touch scrolling and high-contrast system scrollbars intact. */
@media (hover: hover) and (pointer: fine) {
    :where(html, body, body *) {
        scrollbar-width: thin;
        scrollbar-color: var(--app-scrollbar-thumb) transparent;
    }

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

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

    ::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: var(--app-scrollbar-thumb);
        background-clip: padding-box;
    }

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

@media (forced-colors: active) {
    :where(html, body, body *) {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
}