@use "sass:list";

// Bulma variables - compatible with v0.9.x and v1.x
// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
// v1.x: CSS variables (--bulma-*) will be used if defined
// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)

// Colors
$primary: var(--bulma-primary, #00d1b2);
$white: var(--bulma-white, #fff);
$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
$grey-light: var(--bulma-grey-light, #b5b5b5);
$grey: var(--bulma-grey, #7a7a7a);
$radius: var(--bulma-radius, 4px);

// Sizes - Sass variables for calculations
$size-small: 0.75rem;
$size-normal: 1rem;
$size-medium: 1.25rem;
$size-large: 1.5rem;

// Color map for variations
$colors: (
    "primary": ($primary, $white),
    "link": (var(--bulma-link, #485fc7), $white),
    "info": (var(--bulma-info, #3e8ed0), $white),
    "success": (var(--bulma-success, #48c78e), $white),
    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
    "danger": (var(--bulma-danger, #f14668), $white)
);

$slider-radius: $radius !default;
$slider-track-background: $grey-lighter !default;
$slider-track-radius: $radius !default;
$slider-track-border: 0px solid $grey !default;
$slider-track-shadow: 0px 0px 0px $grey !default;
$slider-thumb-background: $white !default;
$slider-thumb-radius: $radius !default;
$slider-thumb-border: 1px solid $grey-light !default;
$slider-thumb-shadow: none !default;
$slider-thumb-to-track-ratio: 2 !default;
$slider-output-width: 3rem !default;
$slider-output-background: $primary !default;
$slider-output-radius: $radius !default;

@mixin slider-size($size) {
    $track-height: calc($size / $slider-thumb-to-track-ratio);
    $thumb-size: $size;

    &::-webkit-slider-runnable-track {
        height: $track-height;
    }

    &::-moz-range-track {
        height: $track-height;
    }

    &::-ms-track {
        height: $track-height;
    }

    &::-webkit-slider-thumb {
        height: $thumb-size;
        width: $thumb-size;
        margin-top: calc(($track-height - $thumb-size) / 2);
    }

    &::-moz-range-thumb {
        height: $thumb-size;
        width: $thumb-size;
    }

    &::-ms-thumb {
        height: $thumb-size;
        width: $thumb-size;
        margin-top: 0;
    }
}

.bbr-slider-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 0.5rem;

    &.is-vertical {
        flex-direction: row;
        width: auto;
        height: 200px;
        padding-top: 0;
        padding-left: 0;
    }
}

.bbr-slider-track-wrapper {
    position: relative;
    width: 100%;

    &.is-vertical {
        width: auto;
        height: 100%;
    }
}

.bbr-slider-output {
    position: absolute;
    bottom: 100%;
    display: inline-block;
    width: $slider-output-width;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    text-align: center;
    color: $white;
    background-color: $slider-output-background;
    border-radius: $slider-output-radius;
    pointer-events: none;

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: $slider-output-background transparent transparent transparent;
    }

    // Vertical mode - position to the right of slider
    &.is-vertical {
        bottom: auto;
        left: 1.25rem;

        &::after {
            top: 50%;
            left: -10px;
            margin-top: -5px;
            margin-left: 0;
            border-color: transparent $slider-output-background transparent transparent;
        }
    }

    // Bottom mode - position below the slider (horizontal only)
    &.is-bottom {
        bottom: auto;
        top: 100%;

        &::after {
            top: auto;
            bottom: 100%;
            border-color: transparent transparent $slider-output-background;
        }
    }

    // Color variations for output
    @each $name, $pair in $colors {
        $color: list.nth($pair, 1);
        $color-invert: list.nth($pair, 2);

        &.is-#{$name} {
            background-color: $color;
            color: $color-invert;

            &::after {
                border-color: $color transparent transparent transparent;
            }

            &.is-vertical::after {
                border-color: transparent $color transparent transparent;
            }

            &.is-bottom::after {
                border-color: transparent transparent $color;
            }
        }
    }
}

.bbr-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: $grey;
}

input[type="range"].slider.bbr-slider {
    --progress-percent: 0%;
    --slider-progress-color: transparent;

    appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;

    // Track styles
    &::-webkit-slider-runnable-track {
        box-sizing: border-box;
        width: 100%;
        height: 0.5rem;
        background: linear-gradient(
            to right,
            var(--slider-progress-color) var(--progress-percent),
            $slider-track-background var(--progress-percent)
        );
        border: $slider-track-border;
        border-radius: $slider-track-radius;
        box-shadow: $slider-track-shadow;
    }

    &::-moz-range-track {
        box-sizing: border-box;
        width: 100%;
        height: 0.5rem;
        background: $slider-track-background;
        border: $slider-track-border;
        border-radius: $slider-track-radius;
        box-shadow: $slider-track-shadow;
    }

    &::-moz-range-progress {
        height: 0.5rem;
        background: var(--slider-progress-color);
        border-radius: $slider-track-radius;
    }

    &::-ms-track {
        box-sizing: border-box;
        width: 100%;
        height: 0.5rem;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    &::-ms-fill-lower {
        background: var(--slider-progress-color);
        border-radius: $slider-track-radius;
    }

    &::-ms-fill-upper {
        background: $slider-track-background;
        border-radius: $slider-track-radius;
    }

    // Thumb styles
    &::-webkit-slider-thumb {
        appearance: none;
        width: 1rem;
        height: 1rem;
        margin-top: -0.25rem;
        background: $slider-thumb-background;
        border: $slider-thumb-border;
        border-radius: $slider-thumb-radius;
        box-shadow: $slider-thumb-shadow;
        transition: transform 0.2s ease;

        &:hover {
            transform: scale(1.1);
        }
    }

    &::-moz-range-thumb {
        width: 1rem;
        height: 1rem;
        background: $slider-thumb-background;
        border: $slider-thumb-border;
        border-radius: $slider-thumb-radius;
        box-shadow: $slider-thumb-shadow;
        transition: transform 0.2s ease;

        &:hover {
            transform: scale(1.1);
        }
    }

    &::-ms-thumb {
        width: 1rem;
        height: 1rem;
        background: $slider-thumb-background;
        border: $slider-thumb-border;
        border-radius: $slider-thumb-radius;
        box-shadow: $slider-thumb-shadow;
    }

    // Focus state
    &:focus {
        outline: none;

        &::-webkit-slider-thumb {
            border-color: $primary;
            box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
        }

        &::-moz-range-thumb {
            border-color: $primary;
            box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
        }
    }

    // Disabled state
    &:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    // Circle style
    &.is-circle {
        &::-webkit-slider-thumb {
            border-radius: 50%;
        }

        &::-moz-range-thumb {
            border-radius: 50%;
        }

        &::-ms-thumb {
            border-radius: 50%;
        }
    }

    // Size variations
    &.is-small {
        @include slider-size($size-small);
    }

    &.is-medium {
        @include slider-size($size-medium);
    }

    &.is-large {
        @include slider-size($size-large);
    }

    // Progress fill enabled when showProgress prop is true
    &.has-output-tooltip {
        --slider-progress-color: #{$primary};
    }

    // Color variations
    @each $name, $pair in $colors {
        $color: list.nth($pair, 1);

        &.has-output-tooltip.is-#{$name} {
            --slider-progress-color: #{$color};
        }

        &.is-#{$name} {
            &:focus {
                &::-webkit-slider-thumb {
                    border-color: $color;
                    box-shadow: 0 0 0 0.125em rgba($color, 0.25);
                }

                &::-moz-range-thumb {
                    border-color: $color;
                    box-shadow: 0 0 0 0.125em rgba($color, 0.25);
                }
            }
        }
    }

    // Vertical mode
    &.is-vertical {
        writing-mode: vertical-lr;
        direction: rtl;
        width: 0.5rem;
        height: 100%;
        min-height: 100px;

        &::-webkit-slider-runnable-track {
            width: 0.5rem;
            height: 100%;
            background: linear-gradient(
                to top,
                var(--slider-progress-color) var(--progress-percent),
                $slider-track-background var(--progress-percent)
            );
        }

        &::-webkit-slider-thumb {
            margin-top: 0;
            margin-left: -0.25rem;
        }

    }
}