@import "../node_modules/delite/css/includes";

@d-slider-size: 200px;
@d-slider-halo-size: 16px;

@d-slider-bar-color: @progress-bg;
@d-slider-bar-thickness: 8px;
@d-slider-bar-border-width: 1px;
@d-slider-bar-border-style: inset;
@d-slider-bar-border-color: @btn-default-border;
@d-slider-bar-border-radius: @border-radius-base;

@d-slider-handle-size: 20px;
@d-slider-handle-color: @progress-bg;
@d-slider-handle-thickness: 20px;
@d-slider-handle-border-width: 1px;
@d-slider-handle-border-style: outset;
@d-slider-handle-border-color: @gray-light;
@d-slider-handle-border-radius: @border-radius-large;


//
// d-slider
//
.d-slider {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding: @d-slider-halo-size;
  .user-select(none);
  .box-sizing(border-box);
  .tap-highlight-color(rgba(255, 255, 255, 0));

  touch-action: none;   // note: could use pan-x or pan-y depending on this.vertical

  input {
    display: none;
  }

  //
  // d-slider-bar
  //
  & .d-slider-bar {
    border: @d-slider-bar-border-width @d-slider-bar-border-style @d-slider-bar-border-color;
    border-radius: @d-slider-bar-border-radius;
    padding: 0;
    margin: 0;
    background-clip: content-box;
    background-color: @d-slider-bar-color;
  }
  //
  // d-slider-container
  // this is the bar below the slider handle(s)
  //
  & .d-slider-container {
    .box-sizing(border-box);
    position: relative;
    height: 100%;
    width: 100%;
    box-shadow: 0 0.1em 0.2em 0.1em rgba(0, 0, 0, 0.1) inset;
  }

  //
  // d-slider-progress-bar
  // this is the bar that start from min, up to the slider handle
  // when the slider has 2 values, this is the bar between both values
  //
  & .d-slider-progress-bar {
    .box-sizing(content-box);
    border-width: 0;
    background-color: lighten(#000000, 60%);
  }

  &.d-disabled {
    cursor: default;
    .box-shadow(none);
  }
  &.d-disabled .d-slider-container {
    .box-shadow(none);
    border-color: lighten(@d-slider-bar-color, 20%);
  }
  &.d-disabled .d-slider-progress-bar {
    background: none;
  }
  &.d-disabled .d-slider-handle {
    &, &:hover, &:focus, &:active, &.active {
      border-color: lighten(@d-slider-handle-border-color, 20%);
      .box-shadow(none);
      background-color: @d-slider-handle-color;
    }
  }
}

.d-slider-container > * {
  position: absolute;
}

//
// d-slider-handle
//
.d-slider-handle {
  .user-select(none);
  position: absolute;
  .box-sizing(border-box);
  border: @d-slider-handle-border-width @d-slider-handle-border-style @d-slider-handle-border-color;
  border-radius: @d-slider-handle-border-radius;
  padding: 0;
  margin: 0;
  background-clip: content-box;
  background-color: @d-slider-handle-color;
  z-index: 1;
  &, &:active, &.active {
    &:focus {
      outline: thin dotted;
      outline-offset: -3px;
    }
  }
  &:hover, &:focus {
    color: @btn-default-color;
    text-decoration: none;
  }
  &:focus + .d-slider-handle {
    z-index: 0; // Move down the second handle if the first is focused
  }
  &:active, &.active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
  }
}

// =========================================
// rules below only affect size/position
// to handle horizontal/vertical/flip
// =========================================

//
// horizontal slider
//
.d-slider-h {
  width: @d-slider-size;
  .d-slider-container {
    min-width: (@d-slider-handle-size * 4);
    height: @d-slider-bar-thickness;
  }
  .d-slider-container > * {
    left: 0; // children are positioned with either top or bottom
  }
  .d-slider-progress-bar {
    height: 100%;
    top: 0;
  }
  .d-slider-handle {
    top: -(@d-slider-bar-border-width + @d-slider-handle-size / 2 - @d-slider-bar-thickness / 2);
    width: @d-slider-handle-thickness;
    height: @d-slider-handle-size;
  }
}

//
// vertical slider
//
.d-slider-v {
  height: @d-slider-size;
  .d-slider-container {
    min-height: (@d-slider-handle-size * 4);
    width: @d-slider-bar-thickness;
  }
  .d-slider-container > * {
    top: 0; // children are positioned with either left or right
  }
  .d-slider-progress-bar {
    width: 100%;
    left: 0;
    display: block;
  }
  .d-slider-handle {
    left: -(@d-slider-bar-border-width + @d-slider-handle-size / 2 - @d-slider-bar-thickness / 2);
    width: @d-slider-handle-size;
    height: @d-slider-handle-thickness;
  }
}

.d-slider-h-htl .d-slider-handle-max,
.d-slider-h-lth .d-slider-handle-min {
  left: -(@d-slider-handle-thickness / 2);
}

.d-slider-h-htl .d-slider-handle-min,
.d-slider-h-lth .d-slider-handle-max {
  right: -(@d-slider-handle-thickness / 2);
}

.d-slider-v-lth .d-slider-handle-max,
.d-slider-v-htl .d-slider-handle-min {
  bottom: -(@d-slider-handle-thickness / 2);
}

.d-slider-v-lth .d-slider-handle-min,
.d-slider-v-htl .d-slider-handle-max {
  top: -(@d-slider-handle-thickness / 2);
}