//
// SLIDER
//

.slider {
  @include border-radius($slider-border-radius);
  @include background($slider-background);
  @include transform(translate3d(0,($slider-knob-height*0.5),0));
  @include touch-action(none);

  overflow: visible;

  margin-bottom: $slider-knob-height;
  margin-left: ($slider-knob-width*0.5);
  margin-right: ($slider-knob-width*0.5);

  border: px-to-rem(1) solid $slider-border-color;
}

// Extended touch area
.slider:before {
  content: "";
  height: $slider-knob-height;
  position: absolute;
  top: -($slider-knob-height*0.5) + ($slider-height*0.5);
  left:  -($slider-knob-width*0.5);
  padding-right:  ($slider-knob-width);
  display: block;
  width: 100%;
}

// Progress Indicator
.slider > div {
  @include border-radius($slider-border-radius);
  @include background($slider-active-area);
  @include pointer-none();

  height: $slider-height;
  line-height: $slider-knob-height;
  position: relative;
}

// Knob
.slider > div:after {
  @include border-radius($slider-knob-border-radius);
  @include box-shadow(0 0 px-to-rem(3) $slider-shadow);
  @include background($slider-knob-background);
  @include pointer-none();

  position: absolute;
  display: block;
  text-align: center;
  content: "";

  border: px-to-rem(1) solid $slider-knob-border-color;

  height: $slider-knob-height;
  width: $slider-knob-width;

  color: $slider-font-color;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:normal;

  top: -($slider-knob-height*0.5) + ($slider-height*0.5) - px-to-rem(1);
  right: -1*$slider-knob-width*0.5;
}

.slider.percent > div:after {
  content: ""attr(data-percent);
}

.slider.value > div:after {
  content: ""attr(data-value);
}

// Fix for IE [BUG #7814]
.root.win .slider > div:after {
  line-height: calc(unquote("#{$slider-knob-height} - 0px"));
}

// Triggering CSS anti-aliasing on Android devices [BUG #7847]
.root.android .slider:not(.value):not(.percent) > div:after {
  content:".";
  color:rgba(0,0,0,0);
}