@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/step/scss/variable';
@import '~@alifd/next/lib/step/scss/mixin';
@import './variables.scss';
.#{$css-prefix}step {
  // 1. 设置通用样式
  /* 正在进行 */
  > .#{$css-prefix}step-item-process {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-content {
        color: $color-text1-2;
      }
    }
  }
  /* 已完成的 */
  > .#{$css-prefix}step-item-finish {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-title {
        color: $b-desgin-step-circle-finished-font-color;
      }
    }
  }
  /* 未完成的 */
  > .#{$css-prefix}step-item-wait {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-title {
        opacity: 0.87;
        color: $b-design-step-wait-font-color;
      }
    }
    .#{$css-prefix}step-item-container {
      .#{$css-prefix}step-item-node-circle {
        border-color: $b-design-step-round-circle-color;
        color: $b-design-step-wait-font-color;
      }
    }
    .#{$css-prefix}step-item-tail-underlay {
      .#{$css-prefix}step-item-tail-overlay {
        background: $b-design-step-circle-wait-underline-color;
      }
    }
  }
}

// 2. 设置 basic 2 circle 模式
.#{$css-prefix}step-circle {
  // 不同尺寸行高调整
  &.#{$css-prefix}small {
    &.#{$css-prefix}step-horizontal {
      overflow: visible;
      .#{$css-prefix}step-item-container {
        margin-top: 6px;
        margin-bottom: 6px;
      }
      .#{$css-prefix}step-item-title {
        max-width: $s-15;
      }
    }
  }

  &.#{$css-prefix}medium {
    &.#{$css-prefix}step-horizontal {
      overflow: visible;
      .#{$css-prefix}step-item-container {
        margin-top: 2px;
        margin-bottom: 2px;
      }
      .#{$css-prefix}step-item-title {
        max-width: 90px;
      }
    }
  }

  // container符号
  .#{$css-prefix}step-item-container {
    .#{$css-prefix}step-item-node-circle {
      border-width: $b-design-step-circle-border-width;
      .#{$css-prefix}icon::before {
        font-weight: bold;
      }
    }
  }

  &.#{$css-prefix}step-horizontal {
    &.#{$css-prefix}step-label-horizontal {
      .#{$css-prefix}step-item-wait,
      .#{$css-prefix}step-item-process,
      .#{$css-prefix}step-item-finish {
        .#{$css-prefix}step-item-body {
          .#{$css-prefix}step-item-title {
            height: $s-6;
            line-height: $s-6;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 6px;
            margin-bottom: 6px;
          }
        }
      }

      &.#{$css-prefix}step-horizontal {
        &.#{$css-prefix}step-label-horizontal {
          .#{$css-prefix}step-item-process,
          .#{$css-prefix}step-item-finish,
          .#{$css-prefix}step-item-wait {
            .#{$css-prefix}step-item-tail {
              top: 18px !important; // 这里优先级始终低于element.style 只能important
            }
          }
        }
      }

      // body文字样式
      .#{$css-prefix}step-item-process {
        .#{$css-prefix}step-item-title {
          font-weight: bold;
        }
        .#{$css-prefix}step-item-tail-underlay {
          .#{$css-prefix}step-item-tail-overlay {
            background: $b-design-step-circle-wait-underline-color;
          }
        }
      }
    }
  }

  // 禁用模式
  .#{$css-prefix}step-item-disabled {
    // container
    .#{$css-prefix}step-item-container {
      .#{$css-prefix}step-item-node-circle {
        border-color: $b-design-step-disabled-color;
        color: $b-design-step-disabled-color;
      }
    }
    &.#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-container {
        .#{$css-prefix}step-item-node-circle {
          background: $b-design-step-disabled-circle-color;
          border-color: $b-design-step-disabled-circle-color;
          .#{$css-prefix}icon::before {
            color: $b-design-step-disabled-color;
          }
        }
      }
    }
  }

  // 错误模式
  .#{$css-prefix}step-error {
    .#{$css-prefix}step-item-node-circle {
      display: none;
    }
    .#{$css-prefix}step-item-container::before {
      content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="控件" stroke="none" stroke-width="1" fill="rgba(200,39,39)" fill-rule="evenodd"><g id="Icon-/-Filled-/-Status-/-Warning-/-20" transform="translate(-1.000000, -1.000000)"><path d="M10,1.25 C14.8324916,1.25 18.75,5.16750844 18.75,10 C18.75,14.8324916 14.8324916,18.75 10,18.75 C5.16750844,18.75 1.25,14.8324916 1.25,10 C1.25,5.16750844 5.16750844,1.25 10,1.25 Z M10,13.75 C9.65482203,13.75 9.375,14.029822 9.375,14.375 C9.375,14.720178 9.65482203,15 10,15 C10.345178,15 10.625,14.720178 10.625,14.375 C10.625,14.029822 10.345178,13.75 10,13.75 Z M10,5 C9.6794776,5 9.41530802,5.24127512 9.37920483,5.5521118 L9.375,5.625 L9.375,11.875 C9.375,12.220178 9.65482203,12.5 10,12.5 C10.3205224,12.5 10.584692,12.2587249 10.6207952,11.9478882 L10.625,11.875 L10.625,5.625 C10.625,5.27982203 10.345178,5 10,5 Z" id="形状"></path></g></g></svg>');
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      position: absolute;
      width: $b-design-step-small-size;
      height: $b-design-step-small-size;
    }
  }

  // 自定义符号模式，圆圈不显示
  &.#{$css-prefix}medium {
    &.#{$css-prefix}step-label-vertical {
      .#{$css-prefix}step-self-icon {
        .#{$css-prefix}step-item-container {
          left: $s-1;
        }
        &.#{$css-prefix}step-item {
          .#{$css-prefix}step-item-body {
            left: -$s-5;
          }
        }
      }
    }
  }

  .#{$css-prefix}step-item {
    &.#{$css-prefix}step-self-icon {
      .#{$css-prefix}step-item-container {
        .#{$css-prefix}step-item-node-circle {
          background: transparent;
          border-width: 0px;
        }
      }

      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          max-width: $s-25;
        }
      }

      // 正在进行的图标变成蓝色
      &.#{$css-prefix}step-item-process {
        .#{$css-prefix}icon::before {
          color: $b-design-step-active-color;
        }
      }
    }
  }

  // process显示百分号svg样式
  .#{$css-prefix}progress-circle-show-info {
    .#{$css-prefix}progress-circle-container {
      overflow: visible;
      .#{$css-prefix}progress-circle-overlay {
        fill: none;
        fill-opacity: 0.5;
      }
    }
    &.#{$css-prefix}step-item-progress {
      .#{$css-prefix}progress-circle-text {
        color: #fff;
      }
    }
  }

  // 隐藏最后的尾巴
  &.#{$css-prefix}step-horizontal {
    .#{$css-prefix}step-item-last {
      .#{$css-prefix}step-item-tail {
        .#{$css-prefix}step-item-tail-underlay {
          opacity: 0;
        }
      }
    }
  }
}

// 3. 设置basic3 dot点线形式
.#{$css-prefix}step-dot {
  // 不同模式下的文字颜色状态
  .#{$css-prefix}step-item-wait {
    .#{$css-prefix}step-item-title,
    .#{$css-prefix}step-item-content {
      color: $b-design-step-wait-font-color;
    }
  }

  .#{$css-prefix}step-item-finish {
    .#{$css-prefix}step-item-body {
      .#{$css-prefix}step-item-title {
        color: $b-design-step-active-color;
      }
      .#{$css-prefix}step-item-content {
        color: $color-text1-3;
      }
    }
  }

  .#{$css-prefix}step-item-process {
    .#{$css-prefix}step-item-body {
      .#{$css-prefix}step-item-title {
        color: $b-design-step-active-color;
      }
      .#{$css-prefix}step-item-content {
        color: $color-text1-5;
        font-weight: bold;
      }
    }
  }

  /* 水平模式 */
  &.#{$css-prefix}step-horizontal {
    display: flex;
    flex-direction: row;

    /* 三种状态平分 */
    .#{$css-prefix}step-item-process,
    .#{$css-prefix}step-item-finish {
      .#{$css-prefix}step-item-tail-overlay {
        background: $color-brand1-6;
      }
      flex: 1;
    }

    .#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-tail-overlay {
        background: $b-design-step-circle-wait-underline-color;
      }
      flex: 1;
    }

    // container
    .#{$css-prefix}step-item-container {
      padding: 0;
      width: 0;
      .#{$css-prefix}step-item-node-dot {
        display: none;
      }
    }

    // body
    .#{$css-prefix}step-item-wait,
    .#{$css-prefix}step-item-process,
    .#{$css-prefix}step-item-finish {
      .#{$css-prefix}step-item-body {
        left: 0;
        bottom: $s-6;
        .#{$css-prefix}step-item-title,
        .#{$css-prefix}step-item-content {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .#{$css-prefix}step-item-title {
          font-weight: normal;
          font-size: $b-design-step-item-dot-title-font-size;
          height: $b-design-step-item-dot-title-max-height;
          line-height: $b-design-step-item-dot-title-max-height;
        }
        .#{$css-prefix}step-item-content {
          margin-top: $b-design-step-item-dot-content-margin-t;
          font-size: $b-design-step-item-dot-content-font-size;
          height: $b-design-step-item-dot-content-max-height; // content固定高度
          line-height: $b-design-step-item-dot-content-max-height;
        }
      }
      // tail
      .#{$css-prefix}step-item-tail {
        width: 100%;
        padding-right: 2px;
        .#{$css-prefix}step-item-tail-underlay {
          height: 1px;
          top: 50px;
          .#{$css-prefix}step-item-tail-overlay {
            height: 2px;
          }
        }
      }
    }
  }

  // 禁用模式
  .#{$css-prefix}step-item-disabled {
    .#{$css-prefix}step-item-tail-underlay {
      .#{$css-prefix}step-item-tail-overlay {
        background: $b-design-step-disabled-circle-color;
      }
    }
    .#{$css-prefix}step-item-content {
      font-weight: normal;
    }
  }

  // 错误模式
  .#{$css-prefix}step-error {
    .#{$css-prefix}step-item-body {
      margin-left: $s-6;
    }
    .#{$css-prefix}step-item-content::before {
      content: url('data:image/svg+xml; utf8, <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="控件" stroke="none" stroke-width="1" fill="rgba(200,39,39)" fill-rule="evenodd"><g id="Icon-/-Filled-/-Status-/-Warning-/-20" transform="translate(-1.000000, -1.000000)"><path d="M10,1.25 C14.8324916,1.25 18.75,5.16750844 18.75,10 C18.75,14.8324916 14.8324916,18.75 10,18.75 C5.16750844,18.75 1.25,14.8324916 1.25,10 C1.25,5.16750844 5.16750844,1.25 10,1.25 Z M10,13.75 C9.65482203,13.75 9.375,14.029822 9.375,14.375 C9.375,14.720178 9.65482203,15 10,15 C10.345178,15 10.625,14.720178 10.625,14.375 C10.625,14.029822 10.345178,13.75 10,13.75 Z M10,5 C9.6794776,5 9.41530802,5.24127512 9.37920483,5.5521118 L9.375,5.625 L9.375,11.875 C9.375,12.220178 9.65482203,12.5 10,12.5 C10.3205224,12.5 10.584692,12.2587249 10.6207952,11.9478882 L10.625,11.875 L10.625,5.625 C10.625,5.27982203 10.345178,5 10,5 Z" id="形状"></path></g></g></svg>');
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      position: absolute;
      left: -$s-6;
    }
    &.#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-tail-overlay {
        background: $b-design-step-circle-wait-underline-color;
      }
    }
  }
}

// 4. 设置 rounded bar圆形进度条模式
.#{$css-prefix}step-arrow {
  // 默认高度medium 36px
  &.#{$css-prefix}medium {
    .#{$css-prefix}step-item {
      height: $b-design-step-medium-arrow-height;
      .#{$css-prefix}step-item-container {
        height: $b-design-step-medium-arrow-height;
        .#{$css-prefix}step-item-title {
          height: $b-design-step-medium-arrow-height;
          line-height: $b-design-step-medium-arrow-height;
        }
      }
    }
  }

  &.#{$css-prefix}small {
    .#{$css-prefix}step-item {
      height: $b-design-step-small-arrow-height;
      .#{$css-prefix}step-item-container {
        height: $b-design-step-small-arrow-height;
        .#{$css-prefix}step-item-title {
          height: $b-design-step-small-arrow-height;
          line-height: $b-design-step-small-arrow-height;
        }
      }
    }
  }

  .#{$css-prefix}step-item::after {
    border-top: $b-design-step-medium-arrow-border solid transparent;
    border-bottom: $b-design-step-medium-arrow-border solid transparent;
    border-left: $b-design-step-medium-arrow-border solid transparent;
  }
  /* 第一个li的左外边距和左半圆 */
  .#{$css-prefix}step-item-first {
    margin-left: $b-design-step-round-medium-margin;
  }
  .#{$css-prefix}step-item-finish::before,
  .#{$css-prefix}step-item-first::before {
    border: $b-design-step-round-medium-margin solid
      $b-design-step-round-finished-color;
    border-radius: $b-design-step-round-left-half-round-border;
  }
  /* 正在进行的li的左外边距和左半圆 */
  .#{$css-prefix}step-item-process {
    background: $b-design-step-round-process-color;
  }
  .#{$css-prefix}step-item-process::before {
    border: $b-design-step-round-medium-margin solid $color-brand1-4;
    border-radius: $b-design-step-round-left-half-round-border;
  }
  .#{$css-prefix}step-item {
    &.#{$css-prefix}step-item-process::after {
      border: $b-design-step-round-medium-margin solid $color-brand1-6;
      border-radius: $b-design-step-round-right-half-round-border;
    }
  }
  /* 最后一个右半圆 */
  .#{$css-prefix}step-item-last {
    background-color: $b-design-step-round-wait-color;
    margin-right: $b-design-step-round-medium-margin;
  }
  .#{$css-prefix}step-item-last::after {
    border: $b-design-step-round-medium-margin solid
      $b-design-step-round-wait-color;
    border-radius: $b-design-step-round-right-half-round-border;
  }
  /* 其他已完成和未完成的调整 */
  .#{$css-prefix}step-item-finish::after {
    border: $b-design-step-round-medium-margin solid
      $b-design-step-round-finished-color;
    z-index: 0;
  }

  /* 未完成的颜色调整 */
  .#{$css-prefix}step-item-wait {
    background-color: $b-design-step-round-wait-color;
    .#{$css-prefix}step-item-title {
      color: $b-design-step-wait-font-color;
    }
  }
  .#{$css-prefix}step-item-wait::before {
    border: $b-design-step-round-medium-margin solid
      $b-design-step-round-wait-color;
    z-index: 0;
  }
  .#{$css-prefix}step-item-wait::after {
    border-color: $b-design-step-round-wait-color;
  }

  // 禁用模式下颜色调整
  .#{$css-prefix}step-item-disabled {
    &.#{$css-prefix}step-item-finish {
      background: $b-design-step-round-finished-color;
      .#{$css-prefix}step-item-title {
        color: $b-design-step-active-color;
      }
    }
    &.#{$css-prefix}step-item-finish::before {
      border: $b-design-step-medium-arrow-border solid
        $b-design-step-round-finished-color;
    }

    &.#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-title {
        color: #fff;
      }
    }

    &.#{$css-prefix}step-item-wait {
      background: $b-design-step-round-disabled-color;
      .#{$css-prefix}step-item-title {
        color: $b-design-step-arrow-disabled-font-color;
      }
      &.#{$css-prefix}step-item-wait::before,
      &.#{$css-prefix}step-item-wait::after {
        border-color: $b-design-step-round-disabled-color;
      }
    }
  }

  // error状态下颜色调整
  .#{$css-prefix}step-error {
    background: $b-design-step-round-error-color;
    .#{$css-prefix}step-item-title {
      color: $b-design-step-error-color;
    }
    &.#{$css-prefix}step-error::before,
    &.#{$css-prefix}step-error::after {
      border-color: $b-design-step-round-error-color;
    }
  }

  // 设置小图标
  .#{$css-prefix}step-item-wait,
  .#{$css-prefix}step-item-process {
    .#{$css-prefix}step-item-container {
      display: flex;
      justify-content: center;
      .#{$css-prefix}step-item-title {
        position: absolute;
        overflow: visible;
        left: 40%;
        width: fit-content;
      }
      .#{$css-prefix}step-item-title::before {
        content: '';
        position: absolute;
        top: 14px;
        left: -$s-4;
        width: $s-2;
        height: $s-2;
        border-radius: 50%;
        border: 1px solid $b-design-step-round-circle-color;
      }
    }
  }

  &.#{$css-prefix}small {
    .#{$css-prefix}step-item-wait,
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-container {
        .#{$css-prefix}step-item-title::before {
          top: 10px;
        }
      }
    }
  }

  .#{$css-prefix}step-item-process {
    .#{$css-prefix}step-item-container .#{$css-prefix}step-item-title::before {
      border-color: #fff;
      background-color: #fff;
    }
  }
  .#{$css-prefix}step-error {
    .#{$css-prefix}step-item-container .#{$css-prefix}step-item-title::before {
      border-color: $b-design-step-error-color;
      background-color: $b-design-step-error-color;
    }
  }
  .#{$css-prefix}step-item-disabled {
    &.#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-container
        .#{$css-prefix}step-item-title::before {
        border-color: $b-design-step-disabled-color;
        background-color: transparent;
      }
    }
  }

  .#{$css-prefix}step-item-finish {
    .#{$css-prefix}step-item-container {
      display: flex;
      justify-content: center;
      .#{$css-prefix}step-item-title {
        position: absolute;
        overflow: visible;
        left: 40%;
        width: fit-content;
      }
      .#{$css-prefix}step-item-title::before {
        content: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="18、✅-Steps-步骤条-*-（原：Progress-indicator-进度）" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Steps-步骤条" transform="translate(-194.000000, -2877.000000)" fill="rgba(126,163,255)"><g id="步骤-2-/-2备份" transform="translate(114.000000, 2867.000000)"><g id="Progress-indicator-/-item-/-02-step-/-complete-/-_light" transform="translate(80.000000, 6.000000)"><g id="Icon-/-Check-/-16-/-fill-/-_light" transform="translate(0.000000, 4.000000)"><path d="M8,0 C12.4363636,0 16,3.56363636 16,8 C16,12.4363636 12.3636364,16 8,16 C3.63636364,16 0,12.3636364 0,8 C0,3.63636364 3.63636364,0 8,0 Z M11.781728,5.64644661 C11.5864658,5.45118446 11.2698833,5.45118446 11.0746212,5.64644661 L11.0746212,5.64644661 L7.1835,9.537 L5.35355339,7.70710678 C5.15829124,7.51184464 4.84170876,7.51184464 4.64644661,7.70710678 C4.45118446,7.90236893 4.45118446,8.21895142 4.64644661,8.41421356 L4.64644661,8.41421356 L6.76776695,10.5355339 C6.78278712,10.5505541 6.79852515,10.5644188 6.81487062,10.5771282 L6.81487062,10.5771282 L6.83198052,10.5961941 C7.02724266,10.7914562 7.34382515,10.7914562 7.5390873,10.5961941 L7.5390873,10.5961941 L11.781728,6.35355339 C11.9769901,6.15829124 11.9769901,5.84170876 11.781728,5.64644661 Z" id="Fill"></path></g></g></g></g></g></svg>');
        position: absolute;
        top: 3px;
        left: -$s-5;
      }
    }
  }
}

// 5. 禁用模式通用
.#{$css-prefix}step-item-disabled {
  // body
  &.#{$css-prefix}step-item {
    .#{$css-prefix}step-item-body {
      .#{$css-prefix}step-item-title,
      .#{$css-prefix}step-item-content {
        color: $b-design-step-disabled-color;
      }
    }
  }
}

// 6. 错误模式通用
.#{$css-prefix}step-error {
  // body
  &.#{$css-prefix}step-item {
    .#{$css-prefix}step-item-body {
      .#{$css-prefix}step-item-title,
      .#{$css-prefix}step-item-content {
        color: $b-design-step-error-color;
      }
    }
  }
}

// 7. 垂直模式通用
.#{$css-prefix}step-vertical {
  &.#{$css-prefix}step-dot,
  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-wait,
    .#{$css-prefix}step-item-finish,
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          line-height: $s-6;
        }
      }
    }
  }

  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-wait,
    .#{$css-prefix}step-item-finish,
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-body {
        margin-top: $s-1;
      }
    }
  }

  .#{$css-prefix}step-item-node {
    .#{$css-prefix}step-item-node-dot {
      width: $b-design-step-dot-vertical-size;
      height: $b-design-step-dot-vertical-size;
    }
  }

  &.#{$css-prefix}step-dot,
  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-finish {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          font-weight: normal;
          color: $b-desgin-step-circle-finished-font-color;
        }
        .#{$css-prefix}step-item-node-dot {
          background-color: $b-design-step-active-color;
          border-color: $b-design-step-active-color;
        }
        .#{$css-prefix}step-item-tail-overlay {
          background: $b-design-step-active-color;
        }
      }
    }
  }

  .#{$css-prefix}step-item-process {
    .#{$css-prefix}step-item-node-dot {
      background-color: $b-design-step-active-color;
      border-color: $b-design-step-active-color;
    }
    .#{$css-prefix}step-item-title {
      color: $b-desgin-step-circle-finished-font-color;
    }
    .#{$css-prefix}step-item-tail-overlay {
      background: $b-design-step-circle-wait-underline-color;
    }
  }

  &.#{$css-prefix}step-dot,
  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          font-weight: normal;
        }
        .#{$css-prefix}step-item-node-dot {
          border-color: $color-text1-2;
        }
        .#{$css-prefix}step-item-tail-overlay {
          background: $b-design-step-circle-wait-underline-color;
        }
      }
    }

    /* 线条颜色 */
    .#{$css-prefix}step-item-tail-overlay {
      background: $color-fill1-3;
    }

    // 文字大小设置
    .#{$css-prefix}step-item {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          font-size: $b-design-step-item-dot-content-font-size;
          margin-top: 0px;
        }
      }
    }
  }

  // disabled状态
  .#{$css-prefix}step-item-disabled {
    &.#{$css-prefix}step-item-finish,
    &.#{$css-prefix}step-item-process,
    &.#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-node-dot {
        background-color: transparent;
        border-color: $color-text1-1;
      }
    }
    .#{$css-prefix}step-item-title {
      font-weight: normal;
      color: $color-text1-1;
    }
  }

  // error状态
  .#{$css-prefix}step-error {
    .#{$css-prefix}step-item-node {
      .#{$css-prefix}step-item-node-dot {
        background-color: $b-design-step-error-color;
        border-color: $b-design-step-error-color;
      }
    }
    .#{$css-prefix}step-item-content::before {
      display: none;
    }
  }
}

// 8. 设置medium时候的样式
.#{$css-prefix}medium {
  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-node-placeholder,
    .#{$css-prefix}step-item-node-circle {
      width: $b-design-step-medium-icon-size;
      height: $b-design-step-medium-icon-size;
      line-height: $b-design-step-medium-icon-line-height;
      font-size: $b-design-step-medium-icon-font-size;
    }
    .#{$css-prefix}step-item-container {
      .#{$css-prefix}step-item-node-placeholder {
        .#{$css-prefix}progress-circle-show-info {
          width: $b-design-step-medium-icon-size;
          height: $b-design-step-medium-icon-size;
          line-height: $b-design-step-medium-icon-line-height;
          font-size: $b-design-step-medium-icon-font-size;
        }
      }
    }
    .#{$css-prefix}step-error .#{$css-prefix}step-item-container::before {
      width: $b-design-step-medium-icon-size;
      height: $b-design-step-medium-icon-size;
    }

    .#{$css-prefix}step-item-node-circle .#{$css-prefix}icon::before {
      width: $b-design-step-medium-icon-line-height;
      font-size: $b-design-step-medium-icon-line-height;
      font-weight: normal;
    }

    .#{$css-prefix}progress-circle-show-info::before {
      position: absolute;
      width: $b-design-step-medium-circle-percent-size;
      height: $b-design-step-medium-circle-percent-size;
      top: $b-design-step-medium-circle-percent-top;
      right: $b-design-step-medium-circle-percent-top;
      content: ' ';
      border-radius: calc(#{$b-design-step-medium-circle-percent-size}/ 2);
      background-color: $b-design-step-active-color;
    }
  }
}

// 9. 设置small时候的样式
.#{$css-prefix}small {
  &.#{$css-prefix}step-circle {
    .#{$css-prefix}step-item-node-circle {
      line-height: $b-design-step-small-icon-line-height;
    }
    .#{$css-prefix}step-item-wait,
    .#{$css-prefix}step-item-finish,
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          font-size: $b-design-step-small-title-font-size;
        }
        .#{$css-prefix}step-item-content {
          font-size: $b-design-step-small-content-font-size;
        }
      }
    }
    .#{$css-prefix}step-item-node-circle .#{$css-prefix}icon::before {
      width: $b-design-step-small-icon-line-height;
      font-size: $b-design-step-small-icon-line-height;
      font-weight: normal;
    }
    .#{$css-prefix}progress-circle-show-info::before {
      position: absolute;
      width: $b-design-step-small-circle-percent-size;
      height: $b-design-step-small-circle-percent-size;
      top: $b-design-step-small-circle-percent-top;
      right: $b-design-step-small-circle-percent-top;
      content: ' ';
      border-radius: calc(#{$b-design-step-small-circle-percent-size}/ 2);
      background-color: $b-design-step-active-color;
    }
  }

  &.#{$css-prefix}step-dot {
    .#{$css-prefix}step-item-finish,
    .#{$css-prefix}step-item-process,
    .#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-body {
        .#{$css-prefix}step-item-title {
          font-size: $b-design-step-small-content-font-size;
        }
        .#{$css-prefix}step-item-content {
          font-size: $b-design-step-small-title-font-size;
        }
      }
      .#{$css-prefix}step-item-tail .#{$css-prefix}step-item-tail-underlay {
        top: $s-10;
      }
      .#{$css-prefix}step-error .#{$css-prefix}step-item-content::before {
        top: $s-6;
      }
    }
  }

  &.#{$css-prefix}step-arrow .#{$css-prefix}step-item {
    height: $b-design-step-small-arrow-height;
    &.#{$css-prefix}step-item::after {
      right: -14px;
    }
    /* 第一个li的左外边距和左半圆 */
    &.#{$css-prefix}step-item-first::before {
      border-width: $b-design-step-round-small-margin;
      border-radius: $b-design-step-round-left-half-round-border-small;
    }
    /* 正在进行的li的左外边距和左半圆 */
    &.#{$css-prefix}step-item-process::before {
      border-width: $b-design-step-round-small-margin;
      border-radius: $b-design-step-round-left-half-round-border-small;
    }
    &.#{$css-prefix}step-item-process::after {
      border-width: $b-design-step-round-small-margin;
      border-radius: $b-design-step-round-right-half-round-border-small;
    }
    /* 最后一个右半圆 */
    &.#{$css-prefix}step-item-last {
      margin-right: $b-design-step-round-small-margin;
    }
    &.#{$css-prefix}step-item-last::after {
      border-width: $b-design-step-round-small-margin;
      border-radius: $b-design-step-round-right-half-round-border-small;
    }
    /* 其他已完成和未完成的调整 */
    &.#{$css-prefix}step-item-finish::after {
      border-width: $b-design-step-round-small-margin;
    }

    /* 未完成的颜色调整 */
    &.#{$css-prefix}step-item-wait::before {
      border-width: $b-design-step-round-small-margin;
    }

    // 禁用模式下颜色调整
    &.#{$css-prefix}step-item-disabled {
      &.#{$css-prefix}step-item-finish::before {
        border-width: $b-design-step-small-arrow-border;
      }
    }
  }
}