@use "sass:string";

//
@mixin anchor($name: "ux-scrollbox") { & { anchor-name: --#{$name}; } }
@mixin anchor-bind($name: "ux-scrollbox") {
    & {
        position-area: span-all !important;
        position-visibility: always !important;
        position: absolute !important;
        inline-size: anchor-size(inline, 100%) !important;
        block-size: anchor-size(block, 100%) !important;
        inset-inline-start: anchor(start, 0px) !important;
        inset-block-start: anchor(start, 0px) !important;
        inset-inline-end: anchor(end, 0px) !important;
        inset-block-end: anchor(end, 0px) !important;
        min-inline-size: 0px;
        min-block-size: 0px;
        max-inline-size: none;
        max-block-size: none;
        overflow: hidden !important;
        pointer-events: none !important;
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
        scrollbar-gutter: auto !important;
        z-index: 99 !important;
    }
}

//
@mixin scroll-tm($source: "", $name: "ux-scrollbox", $axis: "block") {
    & #{$source} { scroll-timeline-axis :   #{$axis}; }
    & #{$source} { scroll-timeline-name : --#{$name}; }
    &                   { timeline-scope: --#{$name}; }
}

//
@mixin scroll-tm-2-axis($source: "", $name: "ux-scrollbox") {
    & #{$source} { scroll-timeline-axis : inline, block; }
    & #{$source} { scroll-timeline-name : --#{$name}-x, --#{$name}-y; }
    &                   { timeline-scope: --#{$name}-x, --#{$name}-y; }
}

//
@mixin view-tm($source: "", $name: "ux-viewbox", $axis: "block") {
    & #{$source} { view-timeline-axis :   #{$axis}; }
    & #{$source} { view-timeline-name : --#{$name}; }
    &                 { timeline-scope: --#{$name}; }
}

//
@function lerp($a, $b, $i: "var(--percent, 0)") { @return calc(#{$a} * #{$i} + #{$b} * (1 - #{$i})); }
@function starts-with ($string, $prefix) { @return string.slice($string, 1, string.length($prefix)) == $prefix; }
@function strip-prefix($string, $prefix) { @if   starts-with($string, $prefix) { @return string.slice($string, string.length($prefix) + 1); }; @return $string; }

//
@mixin with-timeline($timeline: "ux-scrollbox", $name: "percent-coef", $prop: "percent") {
    $is-custom: starts-with($prop, "var("); $strip-prop: strip-prefix($prop, "--");
    /* WHY: Sass 1.104+ if(sass($cond): …). Do not wrap the whole if() in sass() — that leaked as a property name. */
    $css-prop: if(sass($is-custom): $prop; else: "--#{$strip-prop}");
    & {
        animation-name: #{$name};
        animation-timeline: --#{$timeline};
        animation-duration: 1ms;
        animation-direction: alternate;
        animation-fill-mode: both;
        animation-timing-function: linear;
    }}

//
@mixin inner-property($name: "percent-coef", $prop: "percent") {
    $is-custom: starts-with($prop, "--"); $strip-prop: strip-prefix($prop, "--");
    /* WHY: Sass 1.104+ if(sass($cond): …). Do not wrap the whole if() in sass() — that leaked as a property name. */
    $css-prop: if(sass($is-custom): $prop; else: "--#{$strip-prop}");
    @at-root {
        @if $is-custom { @property --#{$strip-prop} { initial-value: 0; syntax: "<number>"; inherits: true; } }
        @keyframes #{$name} { from { #{$css-prop}: 0.0; }; to { #{$css-prop}: 1.0; }}
    }}

//
$counter: 0;
@mixin timeline-interpol-coef($property: "percent", $timeline: "ux-scrollbox", $name: "percent-coef-A" + $counter) {
    @include inner-property($name, $property);
    @include with-timeline($timeline, $name);
    $counter: $counter+1;
}

//
@position-try --just-block { inset-block-end: 0px; }
@position-try --just-inline { inset-inline-end: 0px; }

//
@include  inner-property("percent-coef-x", "percent-x");
@include  inner-property("percent-coef-y", "percent-y");

// TODO: use CSS if() for hiding these scrollbar
@mixin axis-scrollbar($selector, $fit: "inline", $thumb: ".thumb", $timeline-name: "ux-scrollbox") {
    $cqf: 100cqi; @if $fit == 'block' { $cqf: 100cqb; };
    $inv: block ; @if $fit == 'block' { $inv: inline; };
    $axe: x;    ; @if $fit == 'block' { $axe: y; };

    //
    & :is(#{$selector}[axis="#{$axe}"]) {
        & { #{$inv}-size: 0.5rem; #{$fit}-size: calc(#{$cqf} - 1rem);
            @if $fit == 'block' {
                grid-column: scrollbar-x !important;
                grid-row: content-h !important;
            } @else {
                grid-column: content-w !important;
                grid-row: scrollbar-y !important;
            }

            /*inset-#{$fit}-end  : auto;
            inset-#{$inv}-start: auto;
            inset-#{$fit}-start: 0.5rem;
            inset-#{$inv}-end  : 1px;*/
            --content-size: calc(#{$cqf} * 1); //--scroll-size: calc(var(--content-size, 0) / var(--scroll-coef, 1));
            --clamped-size: calc(#{$cqf} - 1rem); --max-size: min(100%, var(--clamped-size, #{$cqf}));
            --scroll-coef: clamp(0, calc(var(--content-size, 0.0001px) / var(--scroll-size, 0.0001px)), 1); //! new CSS calc feature
            --determinant: clamp(0, round(up, calc(1 - (var(--scroll-coef, 1) + 0.001)), 1), 1);
            //inset-#{$fit}-start: calc(anchor(--ux-scrollbox start, 0px) + 0.5rem);
            //inset-#{$inv}-end  : calc(anchor(--ux-scrollbox end  , 0px) +    1px);
            //position-try-fallbacks: --just-inline, --just-block;
            //@include timeline-interpol-coef("--percent-#{$axe}", "#{$timeline-name}-#{$axe}");

            pointer-events: none !important;
            pointer-events: if(style(--determinant: 0): none; else: auto) !important;

            //! new CSS if feature
            visibility: collapse !important;
            visibility: if(style(--determinant: 0): collapse; else: visible) !important;
            @include timeline-interpol-coef("--percent-#{$axe}", "#{$timeline-name}-#{$axe}");
        }

        //
        & :where(#{$thumb})
        {
            #{$inv}-size: 100%; #{$fit}-size: min(calc(var(--max-size, 100%) * var(--scroll-coef, 1)), var(--max-size, 100%));
            --thumb-size: calc(var(--clamped-size, #{$cqf}) * var(--scroll-coef, 0));
            --max-offset: calc(var(--clamped-size, #{$cqf}) - var(--thumb-size, 0));
            @if $fit == block
                { translate: 0px calc(var(--max-offset, 0) * var(--percent-y, 0))     0px; } @else
                { translate:     calc(var(--max-offset, 0) * var(--percent-x, 0)) 0px 0px; }
        }
    }
}

// TODO: use CSS if() for hiding these scrollbar
@mixin scrollbar ($selector: ".ui-scrollbar", $anchor: "ux-scrollbox", $thumb: ".ui-thumb") { :where(#{$selector}) {
    & { --fit-unit: calc((var(--content-size, 1) * 1px - 1rem) / var(--content-size, 1)); };
    & { --scroll-coef: 0; }
    & { //
        pointer-events: none;
        touch-action: none;
        user-select: none;

        //
        background-color: transparent !important;
        position-anchor: --#{$anchor};
        container-type: normal;
        writing-mode: horizontal-tb !important;
        line-height: 0px;
        visibility: collapse;
        box-sizing: border-box;
        direction: ltr !important;
        //overflow: hidden;
        position: relative;
        //position: fixed;
        display: block flow;
        z-index: 9999;
        inset: 0px;
    }

    //
    & :where(#{$thumb}) {
        background-color: oklch(from var(--scrollbar-color, #101010F0) l c h / 0.6) !important;
        position-anchor: --#{$anchor};
        pointer-events: auto;
        border-radius: 0.25rem;
        touch-action: none;
        writing-mode: horizontal-tb !important;
        user-select: none;
        line-height: 0px;
        box-sizing: border-box;
        visibility: auto;
        direction: ltr !important;
        position: relative;
        overflow: hidden;
        display: block flow;
    }
}}

//
@mixin scrollbox($timeline: "ux-scrollbox") {
    & {
        content-visibility: visible !important;
        container-type: size;
        //contain: layout;
        isolation: isolate;
        overflow: hidden;
        position: static;
        scrollbar-color: transparent transparent !important;
        scrollbar-width: none !important;
        scrollbar-gutter: auto !important;
        pointer-events: none !important;
        z-index: 1;

        //
        display: grid !important;
        grid-template-columns: [content-w] minmax(0px, 1fr) [scrollbar-y] minmax(0px, max-content) !important;
        grid-template-rows: [content-h] minmax(0px, 1fr) [scrollbar-x] minmax(0px, max-content) !important;
        //position: relative;
        //position: fixed !important;
    }

    //
    &, & * {
        interpolate-size: allow-keywords;
        transition-behavior: allow-discrete;
    }

    //
    @include scroll-tm-2-axis("", $timeline);
    @include anchor($timeline);
    @include scrollbar();
    @include anchor-bind();
}

// Scrollbar mixins - veela-independent fallbacks
// (scrollbar / custom-scrollbar / hide-scrollbar: core/_mixins.scss)

@mixin scrollbox {
    overflow: auto;
    overscroll-behavior: contain;
}

@mixin scroll-tm-2-axis {
    overflow: auto;
    scroll-behavior: smooth;
}

@mixin axis-scrollbar($selector, $axis, $thumb-selector, $timeline-name) {
    // Simplified scrollbar axis handling
    #{$selector}[axis="#{$axis}"] {
        @if $axis == "x" or $axis == "inline" {
            overflow-x: auto;
            overflow-y: hidden;
        } @else {
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
}

@mixin with-timeline($name) {
    // Scroll timeline support (progressive enhancement)
    @supports (animation-timeline: scroll()) {
        animation-timeline: scroll();
    }
}