// ┌──────────┐
// │ Sliders │
// └─────────┘
//  ↳ http: //esri.github.io/calcite-web/documentation/components/#sliders
//  ↳ components → _sliders.md

// variables
$range-border: 1px solid transparent;
$track-bgcolor: $Calcite_Gray_350;
$track-height: 2px;
$track-hover-bgcolor: $Calcite_Gray_400;
$track-active-bgcolor: $Calcite_Gray_450;
// $track-progress-bgcolor: $Brand_Blue_200;
$thumb-height: 18px;
$thumb-width: 18px;
$thumb-border: 2px solid;
$thumb-border-color: $Calcite_Gray_450;
$thumb-border-hover-color: $Brand_Blue_200;
$thumb-shadow-hover: 0 0 4px 1px rgba($Calcite_Gray_350, 0.9);
$thumb-shadow-active: 0 0 4px 1px rgba($Calcite_Blue_250, 0.9);
$thumb-bg-default: $white;
$thumb-bg-hover: $Brand_Blue_200;
$thumb-bg-active: $Calcite_Blue_a250;

// mixins
@mixin range-style {
  border: $range-border;
  background-color: transparent;
  box-shadow: none;
  margin-top: 0;
  padding: 0;
  z-index: 1;
  cursor: pointer;
  @include transition(all 0.25s ease);
}
@mixin track-style {
  width: 100%;
  height: $track-height;
  border-radius: 0;
  z-index: 2;
  background-color: $track-bgcolor;
  @include transition(all 0.25s ease);
}
@mixin thumb-style {
  height: $thumb-height;
  width: $thumb-width;
  border-radius: 50px;
  margin-top: -8px;
  cursor: pointer;
  background-color: $thumb-bg-default;
  border: $thumb-border;
  border-color: $thumb-border-color;
  z-index: 3;
  -webkit-appearance: none;
  @include transition(all 0.25s ease);
}
// direct hover over thumb
@mixin thumb-hover-style {
  background-color: $thumb-bg-hover;
  border-color: $thumb-border-hover-color;
  box-shadow: $thumb-shadow-hover;
}
// direct focus on thumb
@mixin thumb-focus-style {
  background-color:  $thumb-bg-active;
  border-color: $thumb-border-hover-color;
  box-shadow: $thumb-shadow-active;
}
// range hovered and hovering over thumb
@mixin range-hover-thumb-style {
  background-color: $thumb-bg-default;
  border-color: $thumb-border-hover-color;
  box-shadow: $thumb-shadow-hover;
}
// range focused but not hovering over thumb
@mixin range-focus-thumb-style {
  background-color: $thumb-bg-hover;
  border-color: $thumb-border-hover-color;
  outline: none;
  box-shadow: $thumb-shadow-active;
}
// range focused while thumb is focused but not hovered
@mixin range-focus-thumb-hover-style {
  background-color: $thumb-bg-active;
  border-color: $thumb-border-hover-color;
}
// range focused while thumb is focused and hovered
@mixin thumb-focus-hover-style {
  background-color: $thumb-bg-active;
  border-color: $thumb-border-hover-color;
  box-shadow: $thumb-shadow-active;
}

@if $include-sliders == true {
  // base range styles
  input[type="range"] {
    @include transition(all 0.25s ease);
    @include range-style;
    &:hover {
      // webkit
      &::-webkit-slider-runnable-track { background-color: $track-hover-bgcolor; }
      &::-webkit-slider-thumb { @include range-hover-thumb-style; }
      // ff
      &::-moz-range-track { background-color: $track-hover-bgcolor; }
      &::-moz-range-thumb { @include range-hover-thumb-style; }
      // ie
      &::-ms-fill-upper { background-color: $track-hover-bgcolor }
      &::-ms-fill-lower { background-color: $track-hover-bgcolor }
      &::-ms-thumb { @include range-hover-thumb-style; }
    }
    &:focus, &:active {
      // webkit
      &::-webkit-slider-runnable-track { background-color: $track-hover-bgcolor; }
      &::-webkit-slider-thumb { @include range-focus-thumb-style; }
      &::-webkit-slider-thumb:hover { @include range-focus-thumb-hover-style; }
      // ff
      &::-moz-range-track { background-color: $track-hover-bgcolor; }
      &::-moz-range-thumb { @include range-focus-thumb-style; }
      &::-moz-range-thumb:hover { @include range-focus-thumb-hover-style; }
      // ie
      &::-ms-fill-upper { background-color: $track-hover-bgcolor }
      &::-ms-fill-lower { background-color: $track-hover-bgcolor }
      &::-ms-thumb { @include range-focus-thumb-style; }
      &::-ms-thumb:hover { @include range-focus-thumb-hover-style; }
    }
  }

  // webkit styles
  input[type="range"]::-webkit-slider-runnable-track { @include track-style; }
  input[type="range"]::-webkit-slider-thumb {
    @include thumb-style;
    &:hover { @include thumb-hover-style; }
    &:focus, &:active {
      @include thumb-focus-style;
      &:hover { @include thumb-focus-hover-style; }
    }
  }
  // make tap target larger on touch devices
  @supports (-webkit-overflow-scrolling: touch) {
    input[type="range"]::-webkit-slider-thumb {
      height: 20px;
      width: 20px;
      margin-top: -9px;
    }
  }
  // ff styles
  input[type="range"]::-moz-range-track { @include track-style; }
  input[type="range"]::-moz-range-thumb {
    @include thumb-style;
    height: 14px;
    width: 14px;
    &:hover { @include thumb-hover-style; }
    &:focus, &:active {
      @include thumb-focus-style;
      &:hover { @include thumb-focus-hover-style; }
    }
  }

  // ie styles
  input[type="range"]::-ms-fill-upper { background-color: $track-bgcolor; }
  input[type="range"]::-ms-fill-lower { background-color: $track-bgcolor; }
  input[type="range"]::-ms-track {
    @include track-style;
    height: $track-height;
    border: 0px solid transparent;
    color: transparent;
  }

  input[type="range"]::-ms-thumb {
    @include thumb-style;
    height: 14px;
    width: 14px;
    margin-top: 0px;
    &:hover { @include thumb-hover-style; }
    &:focus, &:active {
      @include thumb-focus-style;
      &:hover { @include thumb-focus-hover-style; }
    }
  }
  // don't include progress for now
  // input[type="range"]::-moz-range-progress { background-color: $track-progress-bgcolor; }
  // input[type="range"]::-ms-fill-lower { background-color: $track-progress-bgcolor; }
}


