@mixin circular-progress-base {
  display: inline-block;
  position: relative;
}

@mixin ne-circular-progress {
  .#{$prefix}-circular-progress {
    @include circular-progress-base;
    &-trail {
      stroke: $progress-default-bg;
      transform-origin: center center;
    }
    &-color-primary {
      .#{$prefix}-circular-progress-path {
        stroke: $primary-color;
      }
    }
    &-color-success {
      .#{$prefix}-circular-progress-path {
        stroke: $success-color;
      }
    }
    &-color-warning {
      .#{$prefix}-circular-progress-path {
        stroke: $warning-color;
      }
    }
    &-color-info {
      .#{$prefix}-circular-progress-path {
        stroke: $info-color;
      }
    }
    &-color-error {
      .#{$prefix}-circular-progress-path {
        stroke: $error-color;
      }
    }
    &-path {
      transform-origin: center center;
      transition: all $animation-duration-base ease-out;
      stroke: $primary-color;
      stroke-linecap: round;
    }
    &-info {
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
    }
  }
}