@import '../common/style/index.less';

// 颜色
@progress-default-track-color: #e7e7e7;
@progress-default: #0052d9;
@progress-success: #078d5c;
@progress-error: #e34d59;
@progress-warning: #ed7b2f;
@progress-inner-bg-color-active: #fff;
// 尺寸
@progress-stroke-width: 8rpx;
@progress-stroke-width-8: @progress-stroke-width * 8;

// 字体
@progress-font-size: 32rpx;
@progress-text-color: rgba(0, 0, 0, 0.9);
@progress-text-height: 48rpx;

// 间距
@progress-info-spacer: 16rpx;
@progress-inner-border-radius: 100rpx;

.@{prefix}-progress {
  &__inner {
    display: flex;
    align-items: center;
    min-height: @progress-stroke-width-8;
  }

  &__bar {
    position: relative;
    flex: 1;
    height: @progress-stroke-width;
    background: @progress-default-track-color;

    &-percent {
      position: absolute;
      top: 0;
      height: 100%;
      background: @progress-default;
      transition: all 0.3s ease-out;
      border-radius: inherit;
    }
  }

  &__label {
    display: inline-block;
    width: 84rpx;
    text-align: right;
    margin-left: 32rpx;
    font-size: @progress-font-size;
    color: @progress-text-color;
    line-height: @progress-text-height;
  }
}

//进度条状态
.@{prefix}-progress--status--active {
  .@{prefix}-progress {
    &__bar {
      &-percent {
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 1;
          content: '';
          animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
          background: @progress-inner-bg-color-active;
          opacity: 0.2;
        }
      }
    }
  }
}

.@{prefix}-progress--status--success {
  .@{prefix}-progress {
    &__bar {
      &-percent {
        background: @progress-success;
      }
    }
  }
}

.@{prefix}-progress--status--warning {
  .@{prefix}-progress {
    &__bar {
      &-percent {
        background: @progress-warning;
      }
    }
    &__label {
      color: @progress-warning;
    }
  }
}

.@{prefix}-progress--status--error {
  .@{prefix}-progress {
    &__bar {
      &-percent {
        background: @progress-error;
      }
    }
    &__label {
      color: @progress-error;
    }
  }
}

@keyframes progress-active-animation {
  0% {
    width: 0;
    opacity: 0.1;
  }

  35% {
    width: 50%;
    opacity: 0.4;
  }

  100% {
    width: 100%;
    opacity: 0;
  }
}