$slider-track-height: 4px !default;
$slider-button-size: 20px !default;
$slider-track-radius: div($slider-track-height, 2) !default;

$slider-background: $spliter-gray !default;

$slider-scale-font-size:10px !default;
$slider-scale-color: $gray!default;

// slider theme colors
$slider-colors: (
  'brand': $brand
) !default;

$slider-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $slider-colors
) !default;

.mx{
    &-slider-wrapper{
        box-sizing: border-box;
        
        @include disabled();

        .mx-slider{
            display: flex;
            flex-direction: column;
            justify-content: center;
    
            height: $slider-button-size;

            cursor: pointer;
    
            &-track{
                position: relative;
                height: $slider-track-height;
                border-radius: $slider-track-radius;
                background-color: $slider-background;
                cursor: pointer;
    
                .mx-slider-bar{
                    position: relative;
                    width: 100%;
                    height: 100%;
    
                    border-radius: inherit;
    
                    transition: all $duration $time-function;
    
                    @each $name, $color in $slider-theme-colors {
                        &--#{$name}{
                            background-color: $color;
                        }
                    }
    
                    .mx-slider-button{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate3d(50%,-50%,0);
                        cursor: grab;
    
                        @include circle($slider-button-size);
    
                        @each $name, $color in $slider-theme-colors {
                            &--#{$name}{
                                background-color: $color;
                            }
                        }
                    }
                }
            }
        }
    
        .mx-slider-scale-wrapper{
            position:relative;
            margin-top: 3px;
            font-size: $slider-scale-font-size;
            height: $slider-scale-font-size;
            color: $slider-scale-color;
        }
    }
}