.nut-step {
  position: relative;
  display: flex;

  &-last {
    .nut-step-line {
      display: none;
    }
  }

  &-head {
    position: relative;
    display: flex;
    align-items: center;
    height: $steps-base-head-height;
    position: relative;
    z-index: 1;

    &-text {
      height: $steps-base-head-text-size;
      width: $steps-base-head-text-size;
      background-color: $steps-base-head-background-color;
      color: $steps-base-head-color;
      font-size: $steps-base-head-size;
    }

    &-icon {
      height: $steps-base-head-icon-size;
      width: $steps-base-head-icon-size;
      background-color: $steps-base-head-background-color;

      .nut-icon {
        color: white;
      }
    }

    &-dot {
      height: $steps-base-head-dot-size;
      width: $steps-base-head-dot-size;
      background-color: $steps-base-head-dot-background-color;
    }

    &-dot,
    &-icon,
    &-text {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-sizing: border-box;
      border: $steps-base-head-border;
    }
  }

  &-line {
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    &-inner {
      display: flex;
      flex: 1;
      height: $steps-base-line-height;
      background: $steps-base-line-background;
    }
  }

  &-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: $steps-base-head-height;
  }

  &-line,
  &-title {
    background-color: #ffffff;
  }

  &-title {
    position: relative;
    z-index: 1;
  }

  &-title {
    height: 14px;
    line-height: 14px;
    font-size: $steps-base-title-font-size;
    color: $steps-base-title-color;
    overflow: hidden;
    white-space: nowrap;
  }

  &-description {
    height: 16px;
    line-height: 16px;
    margin-top: $steps-base-description-margin-top;
    font-size: $steps-base-description-font-size;
    color: $steps-base-description-color;
    overflow: hidden;
  }

  // 流程状态-当前
  &.nut-step-process {
    .nut-step-head-icon,
    .nut-step-head-text,
    .nut-step-head-dot {
      background-color: $steps-process-head-background-color;
    }

    .nut-step-head-text {
      color: $steps-process-color;
    }
  }

  // 流程状态-等待
  &.nut-step-wait {
    .nut-step-head-icon {
      .nut-icon {
        color: $steps-wait-icon-color;
      }
    }
  }

  // 流程状态-完成
  &.nut-step-finish {
    .nut-step-head-icon {
      .nut-icon {
        color: $steps-finish-icon-color;
      }
    }
  }

  // 强化业务属性展示
  &.nut-step-business {
    .nut-step-head-text {
      color: $steps-business-head-text-color;
    }

    .nut-step-title {
      color: $steps-business-title-color;
    }

    .nut-step-description {
      color: $steps-business-description-color;
    }

    .nut-step-head-dot {
      background-color: $steps-business-head-dot-background-color;
    }

    .nut-step-head-icon,
    .nut-step-head-text {
      background-color: $steps-business-head-background-color;
    }

    .nut-step-head-icon {
      .nut-icon {
        color: $steps-business-head-icon-color;
      }
    }
  }
}