// Slider
// --------------------------------------------------

.ui-slider {
  .progress();
  margin-bottom: 20px;
  position: relative;
}

.ui-slider-handle {
  background-color: mix(@brand-secondary, black, 85%);
  border-radius: 50%;
  cursor: pointer;
  height: 18px;
  margin-left: -9px;
  position: absolute;
  top: -3px;
  width: 18px;
  z-index: 2;
  .transition(background .25s);
  
  &[style*='100'] {
    margin-left: -15px;
  }
  &:hover,
  &:focus {
    background-color: mix(@brand-secondary, white, 80%);
    outline: none;
  }
  &:active {
    background-color: mix(@brand-secondary, black, 85%);
  }
}

.ui-slider-range {
  background-color: @brand-secondary;
  border-radius: 30px 0 0 30px;
  display: block;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.ui-slider-segment {
  background-color: mix(desaturate(@brand-primary, 15%), white, 20%);
  border-radius: 50%;
  float: left;
  height: 6px;
  margin: 3px -6px 0 0;
  width: 6px;
}

.ui-slider-value {
  float: right;
  font-size: floor(@component-font-size-base * 0.867); // ~13px
  margin-top: @progress-height;
  
  &.first {
    clear: left;
    float: left;
  }
}