@use 'sass:string';
@use '@style/theme/index.scss' as *;
@use '@components/progress/style/token.scss' as *;

$progress-prefix-cls: string.unquote('#{$prefix}-progress');

.#{$progress-prefix-cls} {
  position: relative;
  font-size: $progress-line-size-default-font-size;
  line-height: 1;

  &-type-line,
  &-type-steps {
    display: inline-block;
    width: 100%;
    max-width: 100%;
  }

  &-type-line {
    &.#{$progress-prefix-cls}-size-mini {
      width: auto;
    }
  }

  &-line,
  &-steps {
    &-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 100%;
      height: 100%;
    }

    &-text {
      flex-grow: 1;
      flex-shrink: 0;
      min-width: $progress-line-size-text-width;
      margin-left: $progress-line-margin-text-left;
      color: $progress-line-color-text;
      font-size: $progress-line-size-default-font-size;
      white-space: nowrap;
      text-align: right;

      .#{$prefix}-icon {
        margin-left: $progress-line-margin-icon-left;
        font-size: $progress-line-size-default-icon-size;
      }
    }
  }

  // type == line
  &-line {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    background-color: $progress-line-color-line-bg;
    border-radius: 100px;

    &-bar {
      position: relative;
      max-width: 100%;
      height: 100%;
      background-color: $progress-line-color-inner-bg;
      border-radius: 100px;
      transition:
        width 0.6s $transition-timing-function-standard,
        background 0.3s $transition-timing-function-standard;

      &-buffer {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        height: 100%;
        background-color: $progress-line-color-buffer-bg;
        border-radius: 0 100px 100px 0;
        transition:
          width 0.6s $transition-timing-function-standard,
          background-color 0.6s $transition-timing-function-standard;
      }

      &-animate::after {
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent 25%,
          rgb(255 255 255 / 50%) 50%,
          transparent 75%
        );
        background-size: 400% 100%;
        border-radius: inherit;
        animation: #{$prefix}-progress-loading 1.5s $transition-timing-function-standard infinite;
        content: '';
      }
    }

    &-text {
      .#{$prefix}-icon {
        color: $progress-line-color-icon_normal;
      }
    }
  }

  &-type-steps {
    // size small
    &.#{$progress-prefix-cls}-size-small {
      width: auto;
    }

    &.#{$progress-prefix-cls}-size-small .#{$progress-prefix-cls}-steps-item {
      flex: unset;
      width: $progress-steps-size-small-steps-item-width;
      border-radius: $progress-steps-size-small-steps-item-width;

      &:not(:last-of-type) {
        margin-right: $progress-steps-margin-steps-item-right_small;
      }
    }
  }

  &-steps {
    display: flex;
    width: 100%;

    &-text {
      min-width: unset;
      margin-left: $progress-steps-margin-text-left;

      .#{$prefix}-icon {
        color: $progress-line-color-icon_normal;
      }
    }

    &-item {
      position: relative;
      display: inline-block;
      flex: 1;
      height: 100%;
      background-color: $progress-steps-color-item-bg;

      &:not(:last-of-type) {
        margin-right: $progress-steps-margin-steps-item-right;
      }

      &:last-of-type {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
      }

      &:first-of-type {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
      }

      &-active {
        background-color: $progress-steps-color-item-bg_normal;
      }
    }
  }

  &-status-warning {
    .#{$progress-prefix-cls}-line-bar {
      background-color: $progress-line-color-inner-bg_warning;
    }

    .#{$progress-prefix-cls}-steps-item-active {
      background-color: $progress-steps-color-item-bg_warning;
    }

    .#{$progress-prefix-cls}-line-text .#{$prefix}-icon,
    .#{$progress-prefix-cls}-steps-text .#{$prefix}-icon {
      color: $progress-line-color-icon_warning;
    }
  }

  &-status-success {
    .#{$progress-prefix-cls}-line-bar {
      background-color: $progress-line-color-inner-bg_success;
    }

    .#{$progress-prefix-cls}-steps-item-active {
      background-color: $progress-steps-color-item-bg_success;
    }

    .#{$progress-prefix-cls}-line-text .#{$prefix}-icon,
    .#{$progress-prefix-cls}-steps-text .#{$prefix}-icon {
      color: $progress-line-color-icon_success;
    }
  }

  &-status-danger {
    .#{$progress-prefix-cls}-line-bar {
      background-color: $progress-line-color-inner-bg_error;
    }

    .#{$progress-prefix-cls}-steps-item-active {
      background-color: $progress-steps-color-item-bg_error;
    }

    .#{$progress-prefix-cls}-line-text .#{$prefix}-icon,
    .#{$progress-prefix-cls}-steps-text .#{$prefix}-icon {
      color: $progress-line-color-icon_error;
    }
  }

  // size
  &-size-small {
    .#{$progress-prefix-cls}-line-text {
      margin-left: $progress-line-size-small-margin-text-left;
      font-size: $progress-line-size-small-font-size;
    }

    .#{$progress-prefix-cls}-line-text .#{$prefix}-icon {
      font-size: $progress-line-size-small-icon-size;
    }
  }

  &-size-large {
    .#{$progress-prefix-cls}-line-text {
      margin-left: $progress-line-size-large-margin-text-left;
      font-size: $progress-line-size-large-font-size;
    }

    .#{$progress-prefix-cls}-line-text .#{$prefix}-icon {
      font-size: $progress-line-size-large-icon-size;
    }
  }
}

// type == circle
.#{$progress-prefix-cls} {
  &-type-circle {
    display: inline-block;
  }

  &-circle {
    &-wrapper {
      position: relative;
      display: inline-block;
      line-height: 1;
      text-align: center;
      vertical-align: text-bottom;
    }

    &-svg {
      transform: rotate(-90deg);
    }

    &-text {
      position: absolute;
      top: 50%;
      left: 50%;
      color: $progress-circle-color-text;
      font-size: $progress-circle-size-default-font-size;
      transform: translate(-50%, -50%);

      .#{$prefix}-icon {
        color: $progress-line-color-icon_normal;
        font-size: $progress-circle-size-default-icon-size;
      }
    }

    &-bg {
      stroke: $progress-circle-color-mask-stroke;
    }

    &-bar {
      transition:
        stroke-dashoffset 0.6s $transition-timing-function-standard 0s,
        stroke 0.6s $transition-timing-function-standard;
      stroke: $progress-circle-color-path-stroke;
    }
  }

  &-size-mini {
    .#{$progress-prefix-cls}-circle-bg {
      stroke: $progress-circle-size-mini-color-mask-stroke;
    }

    .#{$progress-prefix-cls}-circle-bar {
      stroke: $progress-circle-color-path-stroke;
    }

    &.#{$progress-prefix-cls}-status-warning {
      .#{$progress-prefix-cls}-circle-bg {
        stroke: $progress-circle-size-mini-color-mask-stroke_warning;
      }
    }

    &.#{$progress-prefix-cls}-status-danger {
      .#{$progress-prefix-cls}-circle-bg {
        stroke: $progress-circle-size-mini-color-mask-stroke_error;
      }
    }

    &.#{$progress-prefix-cls}-status-success {
      .#{$progress-prefix-cls}-circle-bg {
        stroke: $progress-circle-size-mini-color-mask-stroke_success;
      }
    }

    .#{$progress-prefix-cls}-circle-wrapper .#{$prefix}-icon-check {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .#{$progress-prefix-cls}-circle-text {
      position: static;
      top: unset;
      left: unset;
      transform: unset;
    }
  }

  &-size-small {
    .#{$progress-prefix-cls}-circle-text {
      font-size: $progress-circle-size-small-font-size;

      .#{$prefix}-icon {
        font-size: $progress-circle-size-small-icon-size;
      }
    }
  }

  &-size-large {
    .#{$progress-prefix-cls}-circle-text {
      font-size: $progress-circle-size-large-font-size;

      .#{$prefix}-icon {
        font-size: $progress-circle-size-large-icon-size;
      }
    }
  }

  &-status-warning {
    .#{$progress-prefix-cls}-circle-bar {
      stroke: $progress-circle-color-path-stroke_warning;
    }

    .#{$prefix}-icon {
      color: $progress-circle-color-icon_warning;
    }
  }

  &-status-success {
    .#{$progress-prefix-cls}-circle-bar {
      stroke: $progress-circle-color-path-stroke_success;
    }

    .#{$prefix}-icon {
      color: $progress-circle-color-icon_success;
    }
  }

  &-status-danger {
    .#{$progress-prefix-cls}-circle-bar {
      stroke: $progress-circle-color-path-stroke_error;
    }

    .#{$prefix}-icon {
      color: $progress-circle-color-icon_error;
    }
  }
}

@keyframes #{$prefix}-progress-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}