@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/slider';

$msk-slider--hover-color: #{tk.$msk--color-bg-action-primary-hover};
$msk-slider--active-color: #{tk.$msk--color-bg-action-primary-active};

@mixin msk-slider {
    @include slider.slider;

    .#{$prefix}--slider {
        --#{$prefix}-border-disabled: #{v.$msk--input-disabled-border-color};
    }

    .#{$prefix}--text-input.#{$prefix}--slider-text-input {
        @include m.msk-input-default;
    }

    .#{$prefix}--slider__range-label,
    .#{$prefix}--slider-text-input {
        font-family: v.$msk--global-font-family;
    }

    .#{$prefix}--slider__track {
        background-color: c.$msk--cool-gray-30;
        height: m.msk-rem(4px);
    }

    .#{$prefix}--slider__thumb,
    .#{$prefix}--slider__filled-track {
        background-color: tk.$msk--color-bg-action-primary;
    }

    .#{$prefix}--slider__thumb {
        height: m.msk-rem(24px);
        width: m.msk-rem(24px);

        &:focus {
            background-color: $msk-slider--hover-color;
            box-shadow: inset 0 0 0 2px $msk-slider--hover-color,
                inset 0 0 0 3px c.$msk--gray-10;

            ~ .cds--slider__filled-track {
                background-color: $msk-slider--hover-color;
            }
        }

        &:active {
            background-color: $msk-slider--active-color;
            box-shadow: inset 0 0 0 2px $msk-slider--active-color;
        }
    }

    .#{$prefix}--slider__filled-track {
        height: m.msk-rem(4px);
    }
}