.#{$progress-prefix-cls} {
  display: flex;
  align-items: center;
  line-height: 1;

  &__bar {
    width: 100%;
    background-color: $gray-5;
    border-radius: $progress-height;
  }

  &__finished {
    position: relative;
    height: $progress-height;
    background-color: $brand-primary;
    border-radius: $progress-height;
  }

  &__text {
    height: $progress-text-icon-font-size;
    margin-left: $progress-text-margin-x;
    font-size: $progress-text-font-size;
    line-height: $progress-text-icon-font-size;
    text-align: left;
    white-space: nowrap;
  }

  &--success {
    .#{$progress-prefix-cls}__finished {
      background-color: $brand-success;
    }
    .#{$progress-prefix-cls}__text {
      font-size: $progress-text-icon-font-size;
      color: $brand-success;
      @extend %aid-icon;
      &::before {
        content: "\F27A";
      }
    }
  }

  &--danger {
    .#{$progress-prefix-cls}__finished {
      background-color: $brand-danger;
    }
    .#{$progress-prefix-cls}__text {
      font-size: $progress-text-icon-font-size;
      color: $brand-danger;
      @extend %aid-icon;
      &::before {
        content: "\F2B0";
      }
    }
  }
}