@mixin linear-progress-base {
  display: flex;
  align-items: center;
  color: $component-default-color;
}

@mixin ne-linear-progress {
  .#{$prefix}-linear-progress {
    @include linear-progress-base;
    &-bg {
      position: relative;
      flex: 1 1 auto;
      height: $progress-bar-height;
      border-radius: $progress-bar-height;
      background-color: $progress-default-bg;
    }
    &-color-primary {
      .#{$prefix}-linear-progress-path {
        background-color: $primary-color;
      }
    }
    &-color-success {
      .#{$prefix}-linear-progress-path {
        background-color: $success-color;
      }
    }
    &-color-warning {
      .#{$prefix}-linear-progress-path {
        background-color: $warning-color;
      }
    }
    &-color-info {
      .#{$prefix}-linear-progress-path {
        background-color: $info-color;
      }
    }
    &-color-error {
      .#{$prefix}-linear-progress-path {
        background-color: $error-color;
      }
    }
    &-path {
      width: 100%;
      height: 100%;
      border-radius: $progress-bar-height;
      transform-origin: left;
      transition: transform $animation-duration-base ease-out;
    }
    &-info {
      flex: 0 0 60px;
      padding: 0 4px;
      text-align: right;
    }
    &-indicator {
      position: absolute;
      z-index: 1;
      text-align: center;
      transition: all $animation-duration-base ease-out;
    }
  }
}