@import '../../../base/style.less';
@popupPrefix: fatSlider;

.@{popupPrefix}.Slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  .icon-left{
    margin-right: @horizontalMargin;
    text-align: right;
  }

  .icon-right {
    margin-left: @horizontalMargin;
    font-weight: 500;
  }

  .slider-bar {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    // width: var(--fatslider-width-size);
    height: var(--fatslider-height-size);
    background: transparent;
    .slider-bar-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 0.02rem;
      background: var(--fatslider-bg-color);
      transform: translate(-50%, -50%);
    }
    .progress {
      position: relative;
      top: 50%;
      left: 0;
      z-index: 10;
      box-sizing: border-box;
      width: 0;
      height: 0.02rem;
      background-color: var(--color-icon-default);
      transform: translate(0%, -50%);
      .progress-inner{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
      }
      .ball {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 20;
        width: var(--sliderball-width-size);
        height: var(--sliderball-height-size);
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        transform: translate(50%, -50%);
      }
    }
    

    &.slider-bar-bar {
      position: relative;
      flex: 1;
      box-sizing: border-box;
      height: var(--fatslider-height-size);
      margin: auto;
      padding: 0.03rem;
      background: var(--fatslider-bg-color);
      border-radius: var(--fatslider-border-radius);
      .slider-bar-inner{
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% - 0.28rem);
        height: 100%;
        background: transparent;
        transform: translate(-50%, -50%);
      }
      .progress {
        box-sizing: border-box;
        min-width: var(--fatslider-progress-height-size);
        height: var(--fatslider-progress-height-size);
        overflow: hidden;
        background-color: var(--fatslider-highight-color);
        border-radius: var(--fatslider-border-radius);
        .progress-inner{
          position: relative;
          height: 100%;
        }
        .ball {
          position: absolute;
          top: 50%;
          right: 0;
          z-index: 20;
          box-sizing: border-box;
          box-shadow: var(--sliderball-shadow);
          background-color: var(--sliderball-color);
          border: var(--fatBall-border-size);
          width: var(--fatBall-width-size);
          height: var(--fatBall-height-size);
          border-radius: 50%;
          transform: translate(0%, -50%);
        }
      }
      
    }
  }
}