/*
 * Casey scrollbars
 *
 * Desktop scroll areas share one quiet visual treatment. Touch-first devices
 * keep their native overlay scrollbars and platform interaction behaviour.
 */

@media (any-hover: hover) and (any-pointer: fine) {
    :where(*) {
        scrollbar-width: thin;
        scrollbar-color: var(--casey-scrollbar-thumb) transparent;
    }

    @supports selector(::-webkit-scrollbar) {
        :where(*) {
            scrollbar-width: auto;
            scrollbar-color: auto;
        }

        :where(*)::-webkit-scrollbar {
            width: var(--casey-scrollbar-size);
            height: var(--casey-scrollbar-size);
        }

        :where(*)::-webkit-scrollbar-track,
        :where(*)::-webkit-scrollbar-corner {
            background: transparent;
        }

        :where(*)::-webkit-scrollbar-thumb {
            min-width: 2rem;
            min-height: 2rem;
            border: 2px solid transparent;
            border-radius: 999px;
            background: var(--casey-scrollbar-thumb) padding-box;
        }

        :where(*)::-webkit-scrollbar-thumb:hover {
            background: var(--casey-scrollbar-thumb-hover) padding-box;
        }

        :where(*)::-webkit-scrollbar-thumb:active {
            background: var(--casey-scrollbar-thumb-active) padding-box;
        }

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

    :where(.casey-project-column-scroll) {
        --casey-project-stack-scrollbar-gutter: 10px;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    :where(.casey-project-column-scroll.casey-project-column-scroll-active) {
        scrollbar-color: var(--casey-scrollbar-thumb) transparent;
    }

    @supports selector(::-webkit-scrollbar) {
        :where(.casey-project-column-scroll)::-webkit-scrollbar-thumb {
            background: transparent;
        }

        :where(.casey-project-column-scroll.casey-project-column-scroll-active)::-webkit-scrollbar-thumb {
            background: var(--casey-scrollbar-thumb) padding-box;
        }
    }
}

@media (max-width: 720px) {
    .casey-primary-nav {
        scrollbar-width: none;
    }

    .casey-primary-nav::-webkit-scrollbar {
        display: none;
    }
}