// @import "../_utils.scss";
// @import "./icon.scss";
// @import "./message.scss";
.#{$progress-prefix-cls} {
  display: inline-block;
  width: 100%;
  font-size: 0;
  position: relative;

  &-vertical {
    position: relative;
    height: $progress-vertical-height;
    height: -moz-calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: calc(100% - 20px);
    width: auto;
    margin: $progress-vertical-margin;
  }

  &-outer {
    display: inline-block;
    width: 100%;
    margin-right: $progress-outer-margin-right;
    padding-right: $progress-outer-padding-right;

    .#{$progress-prefix-cls}-show-info & {
      padding-right: $progress-outer-show-info-padding-right;
      margin-right: $progress-outer-show-info-margin-right;
    }
  }

  &-vertical &-outer {
    height: 100%;
    width: auto;
  }

  &-inner {
    display: inline-block;
    width: 100%;
    background-color: $progress-inner-background-color;

    @include theme-background-color($__progress-underpainting_background-color);
    border-radius: $progress-inner-border-radius;
    vertical-align: middle;
    overflow: hidden;
  }

  &-vertical &-inner {
    height: 100%;
    width: auto;

    & > *,
    &::after {
      display: inline-block;
      vertical-align: bottom;
    }

    &::after {
      content: "";
      height: 100%;
    }
  }

  &-vertical &-text {
    position: absolute;
    left: $progress-vertical-text-left;
    bottom: $progress-vertical-text-bottom;
    width: $progress-vertical-text-width;
    margin-left: $progress-vertical-text-margin-left;
    text-align: center;
  }

  &-bg {
    // border-radius: $progress-inner-border-radius;
    background-color: $info-color;

    @include theme-background-color($__progress-info_background-color);
    transition: all $transition-time linear;
    position: relative;
  }

  &-text {
    display: inline-block;
    margin-left: $progress-text-margin-left;
    text-align: left;
    vertical-align: middle;
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
    font-size: $progress-text-font-size;
    color: $progress-text-color;

    @include theme-font-color($__progress-text_background-color);
    line-height: $progress-textline-height;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-line-height();
    }

    .iconfont {
      font-size: $font-size-base;
    }
  }

  &-active {
    .#{$progress-prefix-cls}-bg:before {
      content: "";
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: $progress-active-background;

      @include theme-background-color($__progress-active-before_background-color);
      border-radius: $progress-active-border-radius;
      animation: h-progress-active 2s $ease-in-out infinite;
    }
  }

  &-wrong {
    .#{$progress-prefix-cls}-bg {
      background-color: $error-color;

      @include theme-background-color($__progress-wrong_background-color);
    }
    .#{$progress-prefix-cls}-text {
      color: $error-color;

      @include theme-color($__progress-wrong_icon-color);
    }
  }

  &-success {
    .#{$progress-prefix-cls}-bg {
      background-color: $success-color;

      @include theme-background-color($__progress-success_background-color);
    }
    .#{$progress-prefix-cls}-text {
      color: $success-color;

      @include theme-color($__progress-success_icon-color);
    }
  }
}

@keyframes h-progress-active {
  0% {
    opacity: 0.3;
    width: 0;
  }

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