.cts-step-status {
  display: flex;
  justify-content: space-between;
  @include padding-style();

  // 步骤状态长度样式
  &.cts-step-status-4 {
    .step-item {
      .item-status {
        &::after {
          width: 150px;
          right: -150px;
        }
      }
    }
  }
  &.cts-step-status-3 {
    .step-item {
      .item-status {
        &::after {
          width: 248px;
          right: -248px;
        }
      }
    }
  }
  &.cts-step-status-2 {
    .step-item {
      .item-status {
        &::after {
          width: 248px;
          right: -248px;
        }
      }
    }
  }

  .step-item {
    text-align: center;
    width: 100px;

    // 步骤已完成
    &.success {
      .item-status {
        background-color: $theme;
        .done-img {
          width: 30px;
        }
      }
      .item-text {
        color: $theme;
      }
    }

    // 步骤进行中
    &.process {
      .item-status {
        &::before {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          content: "";
          position: absolute;
          border: 8px solid $theme;
          box-sizing: border-box;
        }
      }
      .item-text {
        color: $theme;
      }
    }

    // 步骤等待中
    &.wait {
      .item-status {
        background-color: $theme-sub2;
      }
      .item-text {
      }
    }

    &:last-child {
      .item-status {
        &::after {
          display: none;
        }
      }
    }

    .item-status {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        // width: 150px;
        height: 8px;
        background-color: $theme-sub2;
        // right: -150px;
      }

      .item-status-text {
        color: $theme-sub1;
        font-size: $font-size-30;
      }
    }
    .item-text {
      color: $theme-sub1;
      font-size: $font-size-24;
      margin-top: 8px;
    }
  }
}