@import 'variables';

.u-slider-time {
  position: relative;
  display: inline-block;
  background-color: @color-gray;
  border-radius: 3px;
  height: @slider-size;
  width: 100%;
  cursor: pointer;

  .value {
    position: absolute;
    background-color: @color-blue;
    border-radius: 3px;
    top: 0;
    height: 100%;
  }

  .handle {
    position: absolute;
    width: @slider-size;
    height: @slider-size;

    &:after {
      position: relative;
      display: block;
      content: '';
      top: -@slider-fix/2;
      left: -(@slider-size+@slider-fix)/2;
      width: @slider-size + @slider-fix;
      height: @slider-size + @slider-fix;
      background-color: #fff;
      border: 3px solid @color-blue;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}