.#{$steps-prefix-cls} {
  font-size: 0;

  &-item {
    position: relative;

    .#{$steps-prefix-cls}-tail {
      position: absolute;
      background: $steps-tail-bg;
    }

    .#{$steps-prefix-cls}-step {
      white-space: nowrap;
    }

    .#{$steps-prefix-cls}-head,
    .#{$steps-prefix-cls}-main {
      position: relative;
      display: inline-block;
      vertical-align: top;
    }

    .#{$steps-prefix-cls}-head {
      background: $steps-main-bg;

      &__inner {
        width: $steps-head-size;
        height: $steps-head-size;
        font-size: $steps-head-font-size;
        line-height: $steps-head-size - $steps-tail-size*2;
        text-align: center;
        border: $steps-head-border-width solid $steps-head-border-color;
        border-radius: 100%;

        .#{$steps-prefix-cls}--sm & {
          width: $steps-sm-head-size;
          height: $steps-sm-head-size;
          line-height: $steps-sm-head-size - $steps-tail-size*2;
        }
      }
    }

    .#{$steps-prefix-cls}-main {
      &__title {
        font-size: $steps-main-title-font-size;
        line-height: $steps-head-size;
        background: $steps-main-bg;

        .#{$steps-prefix-cls}--sm & {
          font-size: $steps-sm-main-title-font-size;
          line-height: $steps-sm-head-size;
        }
      }

      &__description {
        font-size: $steps-main-description-font-size;
      }
    }

    &:last-child {
      .#{$steps-prefix-cls}-tail {
        display: none;
      }
    }

    //step status
    //----------------------------

    //finish
    &--status-finish {
      @include steps-item-status($steps-finish-head-border-color, $steps-finish-head-icon-color, $steps-finish-title-color, $steps-finish-description-color);

      .#{$steps-prefix-cls}-tail {
        height: $steps-finish-tail-size;
        background-color: $steps-finish-tail-bg;
      }
    }

    //process
    &--status-process {
      @include steps-item-status($steps-process-head-border-color, $steps-process-head-icon-color, $steps-process-title-color, $steps-process-description-color);

      .#{$steps-prefix-cls}-head {
        &__inner {
          background-color: $steps-process-head-bg;
        }
      }
    }

    //wait
    &--status-wait {
      @include steps-item-status($steps-wait-head-border-color, $steps-wait-head-icon-color, $steps-wait-title-color, $steps-wait-description-color);
    }

    //error
    &--status-error {
      @include steps-item-status($steps-error-head-border-color, $steps-error-head-icon-color, $steps-error-title-color, $steps-error-description-color);
    }

    // 自定义图标
    &--status-process.#{$steps-prefix-cls}-custom,
    &--status-wait.#{$steps-prefix-cls}-custom {
      .#{$steps-prefix-cls}-head__inner {
        background: transparent;
        border-color: transparent;
        .#{$icon-prefix} {
          font-size: 36px;
          color: $gray-light-45;
        }
      }
    }

    &--status-process.#{$steps-prefix-cls}-custom {
      .#{$steps-prefix-cls}-head__inner {
        .#{$icon-prefix} {
          color: $gray-light-85;
        }
      }
    }
  }

  &--horizontal {
    display: flex;
    justify-content: space-between;

    .#{$steps-prefix-cls}-item {
      flex: auto;
      overflow: hidden;

      .#{$steps-prefix-cls}-tail {
        display: none;
      }

      .#{$steps-prefix-cls}-head {
        padding-right: 14px;
      }

      .#{$steps-prefix-cls}-main {
        &__title {
          position: relative;
          display: inline-block;
          padding-right: $steps-horizontal-item-space;

          &::after {
            position: absolute;
            top: $steps-head-size / 2;
            left: 100%;
            display: block;
            width: 9999px;
            height: $steps-tail-size;
            content: "";
            background: $steps-tail-bg;
          }
        }

        &__description {
          max-width: $steps-horizontal-item-width;
          white-space: normal;
        }
      }

      &:last-child {
        flex: none;
        width: auto;

        .#{$steps-prefix-cls}-main {
          &__title {
            &::after {
              display: none;
            }
          }
        }
      }

      &:not(:first-child) {
        .#{$steps-prefix-cls}-head {
          padding-left: $steps-horizontal-item-space;
        }
      }

      &--status-finish {
        .#{$steps-prefix-cls}-main {
          &__title {
            &::after {
              background-color: $steps-finish-tail-bg;
            }
          }
        }
      }
    }

    &.#{$steps-prefix-cls}--sm {
      .#{$steps-prefix-cls}-head {
        padding-right: 8px;
      }
      .#{$steps-prefix-cls}-main {
        &__title {
          &::after {
            top: $steps-sm-head-size / 2;
          }
        }
      }
    }
  }

  &--vertical {
    .#{$steps-prefix-cls}-item {
      min-height: 70px;

      .#{$steps-prefix-cls}-tail {
        top: $steps-head-size + $steps-vertical-item-space * 2;
        left: $steps-head-size / 2;
        width: $steps-tail-size;
        height: calc(100% - #{$steps-head-size} - #{$steps-vertical-item-space} * 2);
      }

      .#{$steps-prefix-cls}-head {
        padding: $steps-vertical-item-space $steps-vertical-item-space $steps-vertical-item-space 0;
      }

      .#{$steps-prefix-cls}-main {
        &__title {
          padding: $steps-vertical-item-space 0 0 0;
        }
      }

      &--status-finish {
        .#{$steps-prefix-cls}-tail {
          width: $steps-finish-tail-size;
        }
      }
    }

    &.#{$steps-prefix-cls}--sm {
      .#{$steps-prefix-cls}-tail {
        top: $steps-sm-head-size + $steps-vertical-item-space * 2;
        left: $steps-sm-head-size / 2;
        height: calc(100% - #{$steps-sm-head-size} - #{$steps-vertical-item-space} * 2);
      }
    }
  }

  &--label-vertical {
    .#{$steps-prefix-cls}-item {
      overflow: visible;

      .#{$steps-prefix-cls}-step {
        display: inline-block;
        width: $steps-horizontal-item-width;
        text-align: center;
        white-space: pre-wrap;
      }

      .#{$steps-prefix-cls}-head {
        padding-right: 0;
        padding-left: 0;
        border-right: $steps-label-vertical-item-space solid #fff;
        border-left: $steps-label-vertical-item-space solid #fff;

        &__inner {
          width: $step-label-vertical-head-size;
          height: $step-label-vertical-head-size;
          border: 0;
        }
      }

      .#{$steps-prefix-cls}-icon {
        display: none;
      }

      .#{$steps-prefix-cls}-main {
        display: block;

        &__title {
          padding-right: 0;
          margin-top: 8px;
          margin-bottom: 4px;
          line-height: inherit;

          &::after {
            display: none;
          }
        }
      }

      .#{$steps-prefix-cls}-tail {
        position: absolute;
        top: $step-label-vertical-head-size / 2;
        left: $steps-horizontal-item-width / 2 + $step-label-vertical-head-size / 2;
        display: block;
        width: calc(100% - #{$step-label-vertical-head-size} - #{$steps-label-vertical-item-space});
        height: $steps-label-vertica-tail-size;
      }

      &:not(:first-child) {
        .#{$steps-prefix-cls}-head {
          padding-left: 0;
        }
      }

      &--status-finish,
      &--status-process {
        .#{$steps-prefix-cls}-head__inner {
          background-color: $brand-primary;
        }
      }

      &--status-wait {
        .#{$steps-prefix-cls}-head__inner {
          background-color: $gray-light-25;
        }
      }

      &--status-error {
        .#{$steps-prefix-cls}-head__inner {
          background-color: $brand-danger;
        }
      }
    }
  }
}