@use 'accessibility.mixins' as a11y;

@mixin eui-scrollbars( $size: 10px, $foreground-color: var(--eui-c-secondary-surface), $background-color: var(--eui-c-secondary-surface-light), $border-radius: 5rem, $state: active ) {
    
    &::-webkit-scrollbar {
        display: inherit;
        height: $size;      // horizontal scroll
        width: $size;       // vertical scroll
        @if ($state == active) {
            background-color: $background-color;
        }
        @else {
            background-color: transparent;
        }
    }

    // This is the scrolling bar
    &::-webkit-scrollbar-thumb {
        @if ($state == active) {
            background-color: $foreground-color;
            border-radius: $border-radius;
            // Uses the border instead of width to make it grow when on hover
            background-clip: padding-box;   // make the border work
            border: 2px solid transparent;

            &:hover {
                background-color: var(--eui-c-secondary-surface-dark);
                border: 0;
                cursor: grab;
            }
        }
        @else {
            background-color: transparent;
        }
    }

    // Apply focus and keyboard focus to scrollbar thumb when the scrollable container is focused
    &:focus::-webkit-scrollbar-thumb {
        @if ($state == active) {
            @include a11y.eui-accessible-focus-pseudo;
        }
    }

    &:focus-visible::-webkit-scrollbar-thumb {
        @if ($state == active) {
            @include a11y.eui-accessible-focus-pseudo;
        }
    }

    // This is the scroll container
    &::-webkit-scrollbar-track {
        @if ($state == active) {
            background-color: $background-color;
            border-radius: 0;
        }
        @else {
            background-color: transparent;
        }
    }

    // Firefox only CSS-specific extension - Attention those properties overrides :webkit pseudos!
    @-moz-document url-prefix() {
        scrollbar-color: var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);
        // scrollbar-gutter: stable;
        scrollbar-width: auto;
    }

    // Firefox focus state for scrollbar
    &:focus,
    &:focus-visible {
        @-moz-document url-prefix() {
            scrollbar-color: var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light);
        }
    }
}
@mixin eui-scrollbars-inactive($size: 8px) {
    &::-webkit-scrollbar {
        background-color: transparent;
        display: inherit;
        height: $size;      // horizontal scroll
        width: $size;       // vertical scroll
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

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


// @mixin eui-ng-scrollbar() {
//     --scrollbar-thickness: 10 !important;
//     --scrollbar-hover-thickness: var(--scrollbar-thickness) !important;
//     --scrollbar-border-radius: 5rem !important;
// }
