@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &range{
    &--wrapper{
      @include var-height();
      position:relative;
      min-width:2rem;
      touch-action: pan-y;
      @include disabled;
    }
    &--mask,&--value,&--min-value{
      //@include divider($--color-primary);
      position:absolute;
      content:'';
      height:1px;
      left:0;
      width:0;
      z-index:2;
      top:0;
      background:$--color-divider;
      margin: auto 0;
      bottom:0;
      border-top-left-radius:20px;
      border-bottom-left-radius:20px;
    }
    &--mask{
      z-index:0;
      width:100%;
      border-radius:20px;
    }
    &--value{
      background:$--color-primary;
    }
    &--inner{
      margin-right:0.7rem;
      position: relative;
      height: 100%;
    }
    &--button{
      border:0;
      height:0.7rem;
      width:0.7rem;
      border-radius:50%;
      background:#fff;
      box-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.4);
      position:absolute;
      top:50%;
      left:0;
      margin:-0.35rem 0;
      z-index:100;
      outline: none;
      span{
        position:absolute;
        left:50%;
        bottom:100%;
        background:rgba(0,0,0,0.6);
        color:#fff;
        padding:0.1rem;
        line-height:100%;
        border-radius:0.06rem;
        margin-bottom:0.16rem;
        transform:translateX(-50%);
        min-width:0.4rem;
        text-align:center;
        &:before{
          content:'';
          position:absolute;
          border:0.08rem solid transparent;
          border-top-color:rgba(0,0,0,0.6);
          left:50%;
          top:100%;
          margin-left:-0.08rem;
        }
      }
    }
  }
}