@import "../common/variables";
@import '../common/vars';

.@{css-prefix} {

  &-slider {
    font-size: .7rem;
    position: relative;
    width: 100%;
    height: 60rpx;
  }

  &-slider .value {
    position: absolute;
    font-size: .6rem;
    top: 60rpx;
  }

  &-slider .slider-line-touch {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60rpx;
    background-color: transparent;
  }

  &-slider .slider-line-background {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4rpx;
    background-color: #BBB
  }

  &-slider .slider-buffer-line {
    position: absolute;
    left: 0;
    width: 0;
    height: 4rpx;
    background-color: #BBB
  }


  &-slider .slider-line {
    position: absolute;
    left: 0;
    width: 0;
    height: 4rpx;
    background-color: @theme-color;
  }

  &-slider .slider-bar-wrap1 {
    position: absolute;
    height: 56rpx;
    width: 56rpx;
  }

  &-slider .slider-bar-wrap2 {
    position: absolute;
    height: 56rpx;
    width: 56rpx;
  }

  &-slider .slider {
    position: absolute;
    width: 60rpx;
    height: 60rpx;
    background-color: white;
    box-shadow: 0px 6rpx 26rpx 0px #ccc;
    border-radius: 50%;
    z-index: 2;
  }

  &-slider .tooltip {
    position: absolute;
    top: -40rpx;
    left: 0px;
    width: 60rpx;
    height: 60rpx;
    text-align: center;
    color: @theme-color;
  }

  &-slider .slider-scale-line {
    position: absolute;
    width: 2rpx;
    background-color: gray;
    height: 8rpx;
  }

  &-slider .slider-key-line-scale {
    position: absolute;
    width: 2rpx;
    background-color: gray;
    height: 16rpx;
  }

  &-slider .slider-key-line-scale-number {

    position: absolute;
    width: 200rpx;
    top: 36rpx;
    text-align: center;
    height: 20rpx;
  }

  &-slider .slider-scale-line-wrap {
    position: absolute;
  }
}