.yc-progress {
  position: relative;
  line-height: 1;
  font-size: 12px;
  // steps
  .yc-progress-steps-wrapper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    .yc-progress-steps {
      width: 100%;
      display: flex;
      gap: 3px;
      .yc-progress-steps-item {
        position: relative;
        flex: 1;
        flex-shrink: 0;
        height: 100%;
      }
    }
  }
  // line
  .yc-progress-line-wrapper {
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    .yc-progress-line {
      overflow: hidden;
      position: relative;
      width: 100%;
      border-radius: 100px;
      .yc-progress-line-bar {
        position: relative;
        height: 100%;
        border-radius: 100px;
        transition:
          width 0.6s cubic-bezier(0.34, 0.69, 0.1, 1),
          background 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
      }
    }
    .yc-progress-line-text {
      min-width: 32px;
    }
  }
  // circle
  .yc-progress-circle-wrapper {
    position: relative;
    text-align: center;
    line-height: 1;
    display: inline-block;
    vertical-align: text-bottom;
    .yc-progress-circle-svg {
      transform: rotate(-90deg);
      .yc-progress-circle-bar {
        transition:
          stroke-dashoffset 0.6s cubic-bezier(0, 0, 1, 1) 0s,
          stroke 0.6s cubic-bezier(0, 0, 1, 1);
      }
    }
    .yc-progress-circle-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--color-text-3);
    }
  }
  // 通用
  .yc-progress-steps-item {
    background-color: var(--color-fill-3);
  }
  .yc-progress-line {
    background-color: var(--color-fill-3);
  }
  .yc-progress-circle-bg {
    stroke: var(--color-fill-3);
  }
  .yc-progress-steps-text,
  .yc-progress-line-text,
  .yc-progress-circle-text {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-text-2);
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
// type
.yc-progress-type-line,
.yc-progress-type-steps {
  display: inline-block;
  max-width: 100%;
  width: 100%;
}
// size
@size: {
  @small: {
    line-text-size: 12px;
    circle-text-size: 12px;
    icon-size: null;
  };
  @medium: {
    line-text-size: 12px;
    circle-text-size: 14px;
    icon-size: null;
  };
  @large: {
    line-text-size: 16px;
    circle-text-size: 16px;
    icon-size: 14px;
  };
};
each(@size, .(@size,@name){
  @key:replace(~"@{name}", "@", "");
  .yc-progress-size-@{key} {
    .yc-progress-line-text {
      font-size: @size[line-text-size];
    }
    .yc-progress-circle-text {
      font-size: @size[circle-text-size];
      
      & when not (@size[icon-size] = null) {
        .yc-icon {
          font-size: @size[icon-size];
        }
      }
    }
    // 处理step size为small的情况
    & when(@key = small){
      &:not(.yc-progress-type-line){
        width: auto;
      }
      .yc-progress-steps-wrapper {
        .yc-progress-steps {
          .yc-progress-steps-item {
            width: 2px;
            flex: unset ;
          }
        }
      }
    }
  }
});
// status
@status: {
  @normal: {
    color: rgb(var(--primary-6));
    mini-bg-color: var(--color-primary-light-3);
  };
  @success: {
    color: rgb(var(--success-6));
    mini-bg-color: var(--color-success-light-3);
  };
  @warning: {
    color: rgb(var(--warning-6));
    mini-bg-color: var(--color-warning-light-3);
  };
  @danger: {
    color: rgb(var(--danger-6));
    mini-bg-color: var(--color-danger-light-3);
  };
};

each(@status, .(@value,@name){
  @key: replace(~"@{name}", "@", "");
  .yc-progress-status-@{key} {
    .yc-progress-steps-item-active,
    .yc-progress-line-bar {
      background-color: @value[color];
    }
    .yc-progress-circle-bar {
      stroke: @value[color];
    }
    &.yc-progress-size-mini {
      .yc-progress-circle-bg {
        stroke: @value[mini-bg-color];
      }
    }
  }
});
