@import '../../sass/_custom-variables/libs';

$slider-line-height: .75rem !default;
$slider-border-radius: 6.1875rem !default;
$slider-horizontal-width: 100% !default;

// DUMMY
@mixin slider_background-image ($v...) {}
@mixin slider_box-sizing ($v...) {}
@mixin slider_box-shadow ($v...) {}
@mixin slider_border-radius ($value) { border-radius: $value; }
@function slider_border-radius($value) { @return $value; }

// Imports
@import "~bootstrap-slider/src/sass/variables";
@import "mixins";
@import "~bootstrap-slider/src/sass/rules";

.slider {
  user-select: none;
}

.slider .tooltip {
  transition: opacity .2s;
  line-height: 1;

  &.top,
  &.bottom {
    transform: translateX(-50%);

    @include feature-rtl {
      transform: translateX(50%);
    }
  }

  &.left,
  &.right {
    transform: translateY(-50%);
  }

  &.in {
    opacity: 1;
  }

  &.top {
    margin-top: -($slider-line-height * 2.2) - .125rem;
  }

  &.right {
    margin-left: .5rem;
  }

  &.left {
    margin-right: .5rem;
  }

  .tooltip-inner {
    padding-top: .375rem;
    padding-bottom: .375rem;
  }
}

.slider-handle {
  background: #fff;
  transition: transform .2s;
  transform-origin: center;

  &:active {
    transform: scale(1.4, 1.4);
  }
}

// Horizontal track
.slider.slider-horizontal .slider-track {
  margin-top: -.0625rem;
  height: .125rem;
}

// Vertical track
.slider.slider-vertical .slider-track {
  margin-left: .125rem;
  width: .125rem;
}

// Reversed slider
.slider-reversed .slider-selection {
  background: transparent !important;
}

// Disabled
//

.slider-disabled .slider-track {
  opacity: .3;
  cursor: not-allowed;
}

.slider-disabled .slider-handle {
  box-shadow: 0 0 0 1px rgba(0,0,0,.07);
  cursor: not-allowed;
  transform: none;
}

// Horizontal labels
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
  padding-top: .25rem;
}

@include feature-rtl(false) {
  .slider.slider-vertical {
    .slider-track {
      margin-left: 0;
      margin-right: .125rem;
    }
  }
}

@if $enable-light-style {
  .light-style {
    @import '../../sass/_appwork/include';

    .slider-handle {
      box-shadow: 0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow;
    }

    .slider-track {
      background: $gray-200;
    }

    .slider-tick-label-container .slider-tick-label {
      color: $text-muted;
      font-size: $small-font-size;
    }

    @each $color, $value in $theme-colors {
      @if $color != primary {
        .slider-#{$color} {
          @include bs-slider-variant($value);
        }
      }
    }
  }
}

@if $enable-material-style {
  .material-style {
    @import '../../sass/_appwork/include-material';

    .slider-handle {
      box-shadow: 0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow;
    }

    .slider-track {
      background: $gray-200;
    }

    .slider-tick-label-container .slider-tick-label {
      color: $text-muted;
      font-size: $small-font-size;
    }

    @each $color, $value in $theme-colors {
      @if $color != primary {
        .slider-#{$color} {
          @include material-bs-slider-variant($value);
        }
      }
    }
  }
}

@if $enable-dark-style {
  .dark-style {
    @import '../../sass/_appwork/include-dark';

    .slider-handle {
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), $floating-component-shadow;
    }

    .slider-track {
      background: $gray-200;
    }

    .slider-tick-label-container .slider-tick-label {
      color: $text-muted;
      font-size: $small-font-size;
    }

    @each $color, $value in $theme-colors {
      @if $color !=primary {
        .slider-#{$color} {
          @include bs-slider-variant(if($color=='dark'and $dark-style, $white, $value));
        }
      }
    }
  }
}
