/* Shared scrollbar treatment for the website, admission portal and admin panel. */
:root {
    --ui-scroll-thumb: #82aa9b;
    --ui-scroll-thumb-hover: #397b64;
    --ui-scroll-thumb-active: #176247;
    --ui-scroll-track: #edf4f1;
}

html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track);
}

body.admin-body {
    --ui-scroll-thumb: #6b9d8b;
    --ui-scroll-thumb-hover: var(--admin-primary, #087f5b);
    --ui-scroll-thumb-active: #075f45;
    --ui-scroll-track: #eaf1ee;
}

body.portal-body {
    --ui-scroll-thumb: #7fae9d;
    --ui-scroll-thumb-hover: var(--p-green, #087f5b);
    --ui-scroll-thumb-active: #075f45;
    --ui-scroll-track: #edf5f2;
}

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

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

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: transparent;
}

html::-webkit-scrollbar-track {
    background: var(--ui-scroll-track);
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--ui-scroll-thumb);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ui-scroll-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--ui-scroll-thumb-active);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

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

/* Compact horizontal scrollers used by tables, tabs, editors and mobile steps. */
:is(
    .responsive-table,
    .subject-table-wrap,
    .filter-tabs,
    .settings-nav,
    .rich-editor__toolbar,
    .form-steps,
    .facility-gallery,
    .subject-strip,
    .notice-stat-grid,
    .home-notice-marquee__viewport
) {
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track);
}

:is(
    .responsive-table,
    .subject-table-wrap,
    .filter-tabs,
    .settings-nav,
    .rich-editor__toolbar,
    .form-steps,
    .facility-gallery,
    .subject-strip,
    .notice-stat-grid,
    .home-notice-marquee__viewport
)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:is(
    .responsive-table,
    .subject-table-wrap,
    .filter-tabs,
    .settings-nav,
    .rich-editor__toolbar,
    .form-steps,
    .facility-gallery,
    .subject-strip,
    .notice-stat-grid,
    .home-notice-marquee__viewport
)::-webkit-scrollbar-track {
    border-radius: 999px;
    background: var(--ui-scroll-track);
}

:is(
    .responsive-table,
    .subject-table-wrap,
    .filter-tabs,
    .settings-nav,
    .rich-editor__toolbar,
    .form-steps,
    .facility-gallery,
    .subject-strip,
    .notice-stat-grid,
    .home-notice-marquee__viewport
)::-webkit-scrollbar-thumb {
    min-width: 54px;
    border: 2px solid transparent;
    background: var(--ui-scroll-thumb);
    background-clip: padding-box;
}

/* The dark admin navigation needs a quiet light thumb instead of a green rail. */
.admin-sidebar .admin-nav {
    scrollbar-color: rgba(255, 255, 255, .4) transparent;
    overscroll-behavior-y: contain;
}

.admin-sidebar .admin-nav::-webkit-scrollbar {
    width: 7px;
}

.admin-sidebar .admin-nav::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar .admin-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background: rgba(255, 255, 255, .34);
    background-clip: padding-box;
}

.admin-sidebar .admin-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .62);
    background-clip: padding-box;
}

/* Keep editor and textarea rails inside their rounded form controls. */
:is(textarea, .rich-editor__source) {
    scrollbar-gutter: stable;
}

:is(textarea, .rich-editor__source)::-webkit-scrollbar {
    width: 9px;
}

:is(textarea, .rich-editor__source)::-webkit-scrollbar-track {
    margin-block: 5px;
}

@media (max-width: 700px) {
    html {
        scrollbar-gutter: auto;
    }

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

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