@mixin progress-circle-size($progress-circle-svg-width,$progress-circle-svg-height,$progress-circle-border-width, $progress-circle-text-font-size, $progress-circle-icon-font-size, $progress-circle-percent-font-size, $progress-circle-perimeter){
  svg{
    width: $progress-circle-svg-width;
    height: $progress-circle-svg-height;
  }
  .progress-circle__bg,
  .progress-circle__bar{
    stroke-width: $progress-circle-border-width;
  }
  .progress-circle__bar{
    stroke-dasharray:0 $progress-circle-perimeter;
  }
  .progress-circle__text{
    font-size: $progress-circle-text-font-size;
    .aid{
      font-size: $progress-circle-icon-font-size;
    }
  }
}

@keyframes progress-active {
  0% {
    width: 0;
    opacity: .1;
  }

  20% {
    width: 0;
    opacity: .5;
  }

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

//
//progress-bar
//

.#{$progress-prefix-cls} {
  flex: auto;
  overflow: hidden; // force rounded corners by cropping it
  font-size: .24rem;
  line-height: $progress-height;
  text-align: center;
  background-color: #F1F4F9;
  border-radius: $progress-height;

  &-outer {
    display: flex;
    align-items: center;
  }

  &-bar {
    position: relative;
    height: $progress-height;
    line-height: $progress-height;
    color: #FFF;
    background-color: $brand-primary;
    border-radius: $progress-height;

    .progress--active &::before{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      background: #fff;
      border-radius: $progress-height;
      opacity: 0;
      animation: progress-active 2.4s cubic-bezier(.23,1,.32,1) infinite
    }
  }

  &-text {
    height: .4rem;
    margin-left: .2rem;
    font-size: .24rem;
    line-height: .4rem;
    text-align: left;
    white-space: nowrap;

    .aid{
      font-size: .4rem;
    }
  }

  &--sm {

    .progress-bar {
      height: 0.12rem;
      line-height: 0.12rem;
    }

    &.progress-text {
      .aid {
        font-size: .2rem;
      }
    }
  }

  &--lg {

    .progress-bar {
      height: 0.4rem;
      line-height: 0.4rem;
    }

    &.progress-text {
      .aid {
        font-size: .6rem;
      }
    }
  }
}



//
//progress-circle
//

.#{$progress-prefix-cls}-circle {
  position: relative;
  display: inline-block;
  &__text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .#{$progress-prefix-cls}-circle__text,
  .aid {
    display: inline-block;
  }

  svg{
    display: block;
    transform: rotate(-90deg);
  }

  &__bg{
    stroke: #f4f4f4;
  }

  &__bar{
    border-radius: 50%;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin:round;
  }
  //default size
  @include progress-circle-size(1.6rem, 1.6rem, 0.08rem, 0.32rem, .6rem, .4rem, 3.1415926 * (2 * 72));

  //progress-circle size
  &--sm{
    @include progress-circle-size(0.8rem, 0.8rem, 0.04rem, 0.24rem, .24rem, .24rem, 3.1415926 * (2 * 18));
  }

  &--lg{
    @include progress-circle-size(4rem, 4rem, 0.4rem ,0.96rem, .96rem, .48rem, 3.1415926 * (2 * 80));
  }

  &.progress-circle--primary {
    .progress-circle__bar {
      stroke: #0b82ff;
    }

    .#{$progress-prefix-cls}-circle__text,
    .aid {
      color: #0b82ff;
    }
  }

  &.progress-circle--danger {
    .progress-circle__bar {
      stroke: #ff3f3b;
    }

    .#{$progress-prefix-cls}-circle__text,
    .aid {
      color: #ff3f3b;
    }
  }

  &.progress-circle--success {
    .progress-circle__bar {
      stroke: #79c95b;
    }

    .#{$progress-prefix-cls}-circle__text,
    .aid {
      color: #79c95b;
    }
  }
}