@use "../scrollbar" as sb;

//
@property --determinant { syntax: "<number>"; initial-value: 0; inherits: true; };
@property --thumb-size { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
@property --clamped-size { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
@property --max-offset { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };

//
@layer components {

    //
    :host {
        & { --scrollbar-color: oklch(from --c2-on-surface(var(--scrollbar-tone-shift, 0.0), var(--current, #111)) l c h / 0.8); };
        & { display: block; container-type: size !important; contain: strict !important; position: fixed !important; border-radius: 0.25rem; overflow: hidden; }
        &, * {
            interpolate-size: allow-keywords;
            transition-behavior: allow-discrete;
            overflow: hidden !important;
            scrollbar-width: none !important;
            scrollbar-color: transparent transparent !important;
            scrollbar-gutter: auto !important;
            background-color: transparent;
            pointer-events: none;
            box-sizing: border-box;
            border: none 0px transparent;
            outline: none 0px transparent;
            padding: 0px;
            margin: 0px;
            font-size: 0rem;
            line-height: 0;
            color: transparent;
        }

        //
        //:where(.ui-scrollbar),
        .ui-scrollbar[axis="x"] .ui-thumb { @include sb.with-timeline("ux-scrollbox-x"); };
        .ui-scrollbar[axis="y"] .ui-thumb { @include sb.with-timeline("ux-scrollbox-y"); };

        //
        .ui-scrollbar {
            & {
                background-color: transparent !important;
                background: transparent !important;
                background-image: none !important;
            }

            .ui-thumb {
                border-radius: 0.25rem;
            }
        }

        @include sb.scrollbox();
        @include sb.scroll-tm-2-axis();
        @include sb.axis-scrollbar(".ui-scrollbar", "inline", ".ui-thumb", "ux-scrollbox");
        @include sb.axis-scrollbar(".ui-scrollbar", "block" , ".ui-thumb", "ux-scrollbox");
    }
}