// 1. Input styling inspired by https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/.
//
//    Note that while we’re repeating code here, that’s necessary as you can’t comma-separate these types of selectors.
//    Browsers will drop the entire selector if they do not understand a part of it. (CSS Tricks)
//
// 2. While the lower portion of the track is styled through the `::-moz-range-progress` pseudo-element in Firefox,
//    linear gradients must be used in Webkit-based browsers as no such element is available in Webkit:
//
//    a) the first linear gradient marks the lower part of the track,
//    b) the second linear gradient replaces the default track background (please mind the different heights).
//
//    Actual color stop position in the a) gradient is set programmatically by JS and obtained through a custom property.
//
//    The linear-gradient approach is expected to be deleted in the future in favor of a standardized property similar
//    to the approach of Firefox.

@use 'sass:math';
@use '../../tools/form-fields' as form-fields-tools;
@use '../../tools/svg';
@use 'theme';
@use 'tools';

$_field-name: 'UNSTABLE_Slider';

.UNSTABLE_Slider {
    @include form-fields-tools.box-field-root();
}

.UNSTABLE_Slider__label {
    @include form-fields-tools.box-field-label();
}

.UNSTABLE_Slider__label--hidden {
    @include form-fields-tools.label-hidden();
}

.UNSTABLE_Slider__input {
    appearance: none;
    width: 100%;
    height: theme.$thumb-height;
    background: transparent;
    cursor: pointer;

    @media (hover: hover) {
        &:hover {
            --slider-track-background: #{theme.$track-background-hover};
            --slider-track-lower-background: #{theme.$track-lower-background-hover};
            --slider-thumb-border-color: #{theme.$thumb-border-color-state-hover};
            --slider-thumb-background-color: #{theme.$thumb-background-color-state-hover};
            --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-hover};
        }
    }

    &:active {
        --slider-track-background: #{theme.$track-background-active};
        --slider-track-lower-background: #{theme.$track-lower-background-active};
        --slider-thumb-border-color: #{theme.$thumb-border-color-state-active};
        --slider-thumb-background-color: #{theme.$thumb-background-color-state-active};
        --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-active};
    }

    &:focus {
        outline: none;
    }

    // Webkit, 1.
    &::-webkit-slider-runnable-track {
        @include tools.track();

        // 2., 3.
        background-image: linear-gradient(
                to right,
                var(--slider-track-lower-background, #{theme.$track-lower-background}) var(--slider-position, 0%),
                transparent var(--slider-position, 0%)
            ),
            linear-gradient(
                to bottom,
                var(--slider-track-background, #{theme.$track-background}) theme.$track-height,
                transparent theme.$track-height
            );
    }

    &::-webkit-slider-thumb {
        @include tools.thumb();

        appearance: none;
        margin-top: math.ceil(math.div(theme.$track-height, 2)) - math.div(theme.$thumb-height, 2);
    }

    &:active::-webkit-slider-thumb {
        @include tools.thumb-active();
    }

    &:focus-visible::-webkit-slider-thumb {
        @include tools.thumb-focus();
    }

    // Firefox, 1.
    &::-moz-range-track {
        @include tools.track();

        background-color: var(--slider-track-background, #{theme.$track-background}); // 2.
    }

    &::-moz-range-progress {
        height: theme.$track-height;
        border-radius: theme.$track-border-radius;
        background-color: var(--slider-track-lower-background, #{theme.$track-lower-background}); // 3.
    }

    &::-moz-range-thumb {
        @include tools.thumb();
    }

    &:active::-moz-range-thumb {
        @include tools.thumb-active();
    }

    &:focus-visible::-moz-range-thumb {
        @include tools.thumb-focus();
    }
}

.UNSTABLE_Slider--fluid {
    @include form-fields-tools.box-field-fluid();
}

.UNSTABLE_Slider__validationText,
.UNSTABLE_Slider > [data-spirit-element='validation_text'] {
    @include form-fields-tools.validation-text();
}

.UNSTABLE_Slider__helperText {
    @include form-fields-tools.helper-text();
}

@include form-fields-tools.input-field-validation-states($_field-name);

.UNSTABLE_Slider--disabled > .UNSTABLE_Slider__label {
    @include form-fields-tools.label-disabled();
}

.UNSTABLE_Slider .UNSTABLE_Slider__input:disabled,
:is(.UNSTABLE_Slider--disabled, .UNSTABLE_Slider.is-disabled) .UNSTABLE_Slider__input {
    --slider-track-background: #{theme.$track-background-disabled};
    --slider-track-lower-background: #{theme.$track-lower-background-disabled};
    --slider-thumb-border-width: #{theme.$thumb-border-width-state-disabled};
    --slider-thumb-border-color: #{theme.$thumb-border-color-state-disabled};
    --slider-thumb-background-color: #{theme.$thumb-background-color-state-disabled};
    --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-disabled)};
    --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-disabled};

    @include form-fields-tools.input-disabled();

    // Webkit, 1.
    &::-webkit-slider-thumb {
        @include form-fields-tools.input-disabled();
    }

    // Firefox, 1.
    &::-moz-range-thumb {
        @include form-fields-tools.input-disabled();
    }
}

:is(.UNSTABLE_Slider--disabled, .UNSTABLE_Slider.is-disabled)
    > :is(.UNSTABLE_Slider__validationText, [data-spirit-element='validation_text']) {
    @include form-fields-tools.validation-text-disabled();
}

:is(.UNSTABLE_Slider--disabled, .UNSTABLE_Slider.is-disabled) > :is(.UNSTABLE_Slider__helperText) {
    @include form-fields-tools.helper-text-disabled();
}
