/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';
@progress-prefix-cls: ~'@{kd-prefix}-progress';

.@{progress-prefix-cls} {
  .progress;
  line-height: 1;
  font-size: 0;
  vertical-align: top;

  &-show-info {
    font-size: @progress-line-text-font-size;
  }

  &-type-line {
    width: 100%;
    color: @progress-line-font-color;

    .@{progress-prefix-cls}-special-text {
      margin-top: @progress-line-text-margin-top;
      line-height: 24px;
    }
  }

  &-type-circle {
    color: @progress-circle-font-color;

    .@{progress-prefix-cls}-special-text {
      margin-top: @progress-circle-text-margin-top;
      padding: 0;
      line-height: 24px;
    }
  }

  &-outer {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    font-size: 0;

    .@{progress-prefix-cls}-show-info:not(.@{progress-prefix-cls}-position-bottom) & {
      margin-right: calc(-1 * @progress-line-text-font-size * 2 - 8px);
      padding-right: calc(@progress-line-text-font-size * 2 + 8px);
    }
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    font-size: 0;
    border-radius: @progress-border-radius;
    background-color: @progress-remaining-color;
  }

  &-success-bg,
  &-bg {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border-radius: @progress-border-radius;
    background-color: @progress-default-color;
    height: @progress-line-stroke-width;
    // -------------------------UPDATE-------------------
    transition: all @transition-duration @progress-transition-fn;
    // -------------------------UPDATE-------------------
  }

  &-success-bg {
    position: absolute;
    top: 0;
    left: 0;
    background-color: @progress-success-color;
  }

  &-text {
    display: inline-block;
    box-sizing: border-box;
    width: calc(@progress-line-text-font-size*2);
    margin-left: @progress-line-text-margin-left;
    // font-size: @progress-line-text-font-size;
    // line-height: 1;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    word-break: normal;
  }

  &-special-text {
    font-size: @progress-line-special-text-font-size;
    text-align: center;
    overflow: hidden;
    padding-right: calc(@progress-line-text-font-size*2 + 8px);

    .@{progress-prefix-cls}-position-bottom & {
      padding-right: 0;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-bg {
      background-color: @progress-success-color;
    }

    .@{progress-prefix-cls}-text,
    .@{progress-prefix-cls}-special-text {
      color: @progress-success-color;
    }

    .@{progress-prefix-cls}-text {
      font-size: 0;
    }
    .@{progress-prefix-cls}-icon {
      font-size: @progress-line-icon-font-size;
      color: @progress-success-color;
    }

    .@{progress-prefix-cls}-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
      .@{progress-prefix-cls}-circle-path {
        stroke: @progress-success-color;
      }
    }
  }

  &-status-failure {
    .@{progress-prefix-cls}-bg {
      background-color: @progress-failure-color;
    }

    .@{progress-prefix-cls}-text,
    .@{progress-prefix-cls}-special-text {
      color: @progress-failure-color;
    }

    .@{progress-prefix-cls}-text {
      font-size: 0;
    }
    .@{progress-prefix-cls}-icon {
      font-size: @progress-line-icon-font-size;
      color: @progress-failure-color;
    }

    .@{progress-prefix-cls}-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
      .@{progress-prefix-cls}-circle-path {
        stroke: @progress-failure-color;
      }
    }
  }

  &-circle-box {
    position: relative;

    .@{progress-prefix-cls}-circle-trail {
      stroke: @progress-remaining-color;
    }

    .@{progress-prefix-cls}-circle-path {
      transition: stroke-dasharray @transition-duration @progress-transition-fn,
        stroke-dashoffset @transition-duration @progress-transition-fn;
    }

    .@{progress-prefix-cls}-text {
      position: absolute;
      width: auto;
      text-align: center;
      font-size: @progress-circle-text-font-size;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      &-percent,
      &-unit {
        display: inline-block;
        vertical-align: top;
      }

      &-percent {
        line-height: @progress-circle-percent-line-height;
      }

      &-unit {
        line-height: @progress-circle-unit-line-height;
        font-size: @progress-circle-unit-font-size;
        margin-top: @progress-circle-unit-margin-top;
      }
    }

    .@{progress-prefix-cls}-icon {
      font-size: @progress-circle-icon-font-size;
    }
  }

  &-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
    .@{progress-prefix-cls}-circle-path {
      stroke: @progress-default-color;
      transition: stroke-dasharray @transition-duration @progress-transition-fn,
        stroke-dashoffset @transition-duration @progress-transition-fn;
    }
  }
}

.@{progress-prefix-cls}-rtl {
  direction: rtl;
  &.@{progress-prefix-cls}-show-info & .@{progress-prefix-cls}-position-bottom {
    .@{progress-prefix-cls}-outer {
      margin-left: calc(-1 * @progress-line-text-font-size * 2 - 8px);
      margin-right: 0;
      padding-right: 0;
      padding-left: calc(@progress-line-text-font-size * 2 + 8px);
    }
  }
  // .@{progress-prefix-cls}-inner {
  //   // transform: rotateY(180deg);
  // }
  .@{progress-prefix-cls}-text {
    margin-right: @progress-line-text-margin-left;
    margin-left: 0;
    text-align: right;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  // .@{progress-prefix-cls}-circle {
  //   transform: rotateY(180deg);
  // }
}
/*! rtl:end:ignore */