@import (reference) "./variable.less";

@collapsePrefix: ant-slider;

.@{collapsePrefix} {
  user-select: none;
  width: 100%;

  &-track {
    position: relative;
    width: 100%;
    height: 56*@rpx;
    background-color: @COLOR_CARD;

    &-number {
      height: 97*@rpx;
    }

    &-touch-area {
      position: absolute;
      left: 28*@rpx;
      top: 0*@rpx;
      right: 25*@rpx;
      height: 100%;
    }

    &-fill {
      position: absolute;
      left: 0*@rpx;
      top: 25*@rpx;
      right: 0*@rpx;
      height: 6*@rpx;

      &-background {
        position: absolute;
        background-color: @COLOR_GREY_CARD;
        width: 100%;
        height: 100%;
        border-radius: 3*@rpx;
      }

      &-front {
        position: absolute;
        height: 100%;
        border-radius: 3*@rpx;
        background-color: @COLOR_BRAND1;
      }
    }
  }

  &-handler {
    position: absolute;
    left: 0;
    transform: translate(-50%, -50%);
    top: 3*@rpx;

    &-block {
      width: 56*@rpx;
      height: 56*@rpx;
      background: #FFFFFF;
      box-shadow: 0 4*@rpx 10*@rpx 0 rgba(0, 0, 0, 0.12);
      border-radius: 56*@rpx;
      text-align: center;
      line-height: 56*@rpx;
      color: @COLOR_BRAND1;
    }

    &-icon-default {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &-line1 {
        position: absolute;
        width: 4*@rpx;
        height: 16*@rpx;
        background-color: @COLOR_BRAND1;
        border-radius: 2*@rpx;
        top: 20*@rpx;
        left: 16*@rpx;
      }

      &-line2 {
        position: absolute;
        width: 4*@rpx;
        height: 24*@rpx;
        background-color: @COLOR_BRAND1;
        border-radius: 2*@rpx;
        top: 16*@rpx;
        right: 26*@rpx;
      }

      &-line3 {
        position: absolute;
        width: 4*@rpx;
        height: 16*@rpx;
        background-color: @COLOR_BRAND1;
        border-radius: 2*@rpx;
        top: 20*@rpx;
        right: 16*@rpx;
      }
    }

    &-icon-from-props {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      line-height: 100%;

      &-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &-tick {
    position: absolute;
    width: 16*@rpx;
    height: 16*@rpx;
    border-radius: 16*@rpx;
    top: 3 * @rpx;
    transform: translate(-50%, -50%);

    &-front {
      background-color: @COLOR_BRAND1;
    }

    &-back {
      background-color: @COLOR_GREY_CARD;
    }

    &-number {
      position: absolute;
      color: @COLOR_TEXT_PRIMARY;
      font-size: 24*@rpx;
      transform: translateX(-50%);
      top: 44*@rpx;
      left: 8*@rpx;
      text-align: center;
      line-height: 33*@rpx;
      height: 33*@rpx;
    }

  }
}