@progress-prefix-cls: ant-progress;

.@{progress-prefix-cls} {
  &-line-wrap,
  &-circle-wrap {
    display: inline-block;
  }
  &-line-wrap {
    width: 100%;
    font-size: 12px;
    position: relative;
  }
  &-line-outer {
    margin-right: 45px;
  }
  &-line-wrap-full {
    .@{progress-prefix-cls}-line-outer {
      margin-right: 0;
    }
  }
  &-line-inner {
    display: inline-block;
    width: 100%;
    background-color: #E9E9E9;
    border-radius: 100px;
  }
  &-line-bg {
    border-radius: 100px;
    background-color: @primary-color;
    transition: all 0.3s linear 0s;
    position: relative;
  }
  &-line-text {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    text-align: left;
    font-size: 1em;
    margin-left: 10px;

    .anticon {
      font-size: 12px;
    }
  }
  &-line-wrap.status-active {
    .@{progress-prefix-cls}-line-bg:before {
      content: "";
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 10px;
      animation: progress-active 2s ease infinite;
    }
  }
  &-line-wrap.status-exception {
    .@{progress-prefix-cls}-line-bg {
      background-color: @error-color;
    }
    .@{progress-prefix-cls}-line-text {
      color: @error-color;
    }
  }
  &-line-wrap.status-success {
    .@{progress-prefix-cls}-line-bg {
      background-color: @success-color;
    }
    .@{progress-prefix-cls}-line-text {
      color: @success-color;
    }
  }

  &-circle-inner {
    position: relative;
    line-height: 1;
  }
  &-circle-text {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    .anticon {
      font-size: 14 / 12em;
    }
  }
  &-circle-wrap.status-exception {
    .@{progress-prefix-cls}-circle-text {
      color: @error-color;
    }
  }
  &-circle-wrap.status-success {
    .@{progress-prefix-cls}-circle-text {
      color: @success-color;
    }
  }
}

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