.#{$lib-name}-progress {
  display: flex;
  align-items: center;
  .progress-bar {
    flex: 1;
    background: $background-color-disabled;
    .progress-percentage {
      position: relative;
      height: 100%;
      background: $primary-color;
      transition: width $transition-time, background $transition-time;
      &.success {
        background: $success-color;
      }
      &.exception {
        background: $error-color;
      }
      .progress-inner {
        position: absolute;
        z-index: 1;
        right: 10px;
        height: 100%;
        display: flex;
        align-items: center;
        .inner-text {
          font-size: 14px;
          color: $title-color-dark;
        }
      }
    }
  }
  .progress-right {
    padding-left: 8px;
    width: 50px;
    .right-text {
      font-size: 14px;
      color: $sub-text-color-light;
    }
    .success {
      font-size: 14px;
      color: $success-color;
    }
    .exception {
      font-size: 14px;
      color: $error-color;
    }
  }
  .progress-ring {
    position: relative;
    .progress-background {
      stroke: $background-color-disabled;
      fill: transparent;
    }
    .progress-percentage {
      stroke: $primary-color;
      fill: transparent;
      transition: stroke $transition-time, stroke-dashoffset $transition-time;
      &.success {
        stroke: $success-color;
      }
      &.exception {
        stroke: $error-color;
      }
    }
    .progress-center {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      .progress-inner {
        font-size: 16px;
        color: $content-color-light;
        .success {
          font-size: 16px;
          color: $success-color;
        }
        .exception {
          font-size: 16px;
          color: $error-color;
        }
      }
    }
  }
}