/* stylelint-disable selector-pseudo-class-no-unknown */

@use '../common/tokens';
@use './scrollbar-tokens';

@mixin _scrollbar-state($state, $color) {
    &.kbq-#{$state} {
        &::-webkit-scrollbar-thumb,
        ::-webkit-scrollbar-thumb {
            background-color: $color;
        }
    }

    &::-webkit-scrollbar-thumb:#{$state},
    ::-webkit-scrollbar-thumb:#{$state} {
        background-color: $color;
    }
}

@mixin _kbq-scrollbar() {
    // For Firefox compatibility
    @supports not selector(::-webkit-scrollbar) {
        /* stylelint-disable-next-line no-invalid-position-declaration */
        scrollbar-width: auto;
    }

    // webkit
    &::-webkit-scrollbar,
    ::-webkit-scrollbar {
        cursor: default;

        &:vertical {
            width: var(--kbq-scrollbar-size-track-dimension);
        }

        &:horizontal {
            height: var(--kbq-scrollbar-size-track-dimension);
        }
    }

    &::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
        width: var(--kbq-scrollbar-size-thumb-width);
        border-style: solid;
        border-width: tokens.kbq-css-half-difference(scrollbar-size-track-dimension, scrollbar-size-thumb-width);

        border-radius: var(--kbq-scrollbar-size-thumb-border-radius);

        // these props are used to set the user-friendly thumb for long content.
        &:vertical {
            min-height: var(--kbq-scrollbar-size-thumb-min-size);
        }

        &:horizontal {
            min-width: var(--kbq-scrollbar-size-thumb-min-size);
        }
    }

    &::-webkit-scrollbar-button,
    ::-webkit-scrollbar-button {
        display: none;
    }
}

@mixin kbq-scrollbar-theme() {
    .kbq-scrollbar {
        @include _kbq-scrollbar();

        // For Firefox compatibility
        @supports not selector(::-webkit-scrollbar) {
            scrollbar-color: var(--kbq-scrollbar-thumb-default-background) transparent;
        }

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

        &::-webkit-scrollbar-thumb,
        ::-webkit-scrollbar-thumb {
            border-color: transparent;
            // https://stackoverflow.com/a/16829330/6386666
            background-clip: content-box;
            background-color: var(--kbq-scrollbar-thumb-default-background);
        }

        @include _scrollbar-state(hover, var(--kbq-scrollbar-thumb-hover-background));
        @include _scrollbar-state(disabled, var(--kbq-scrollbar-thumb-disabled-background));
        @include _scrollbar-state(active, var(--kbq-scrollbar-thumb-active-background));
    }
}