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

  &-item {
    position: relative;

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

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

    .#{$steps-prefix-cls}-head {
      &__inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: $steps-head-size;
        height: $steps-head-size;
        line-height: $steps-head-size;
        font-size: $steps-head-font-size;
        border: $border-width solid $gray-12;
        border-radius: 50%;
      }
    }

    .#{$steps-prefix-cls}-main {
      &__title {
        font-size: $steps-main-title-font-size;
        font-weight: 700;
        line-height: $steps-head-size;
        white-space: nowrap;
      }

      &__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(
        $brand-primary,
        $brand-primary,
        $gray-10,
        $gray-10
      );

      .#{$steps-prefix-cls}-tail {
        height: $border-width;
        background-color: $brand-primary;
      }
    }

    //process
    &--status-process {
      @include steps-item-status(transparent, $white, $gray-9, $gray-9);

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

    //wait
    &--status-wait {
      @include steps-item-status($gray-12, $gray-9, $gray-11, $gray-11);
    }

    //error
    &--status-error {
      @include steps-item-status(
        $brand-danger,
        $brand-danger,
        $brand-danger,
        $brand-danger
      );
    }
  }

  // 水平步骤
  &--horizontal {
    display: flex;
    justify-content: space-between;

    .#{$steps-prefix-cls}-item {
      display: inline-block;
      width: 100%;

      .#{$steps-prefix-cls}-tail {
        top: $steps-head-size/2;
        left: $steps-head-size/2 + $steps-main-description-width/2;
        width: calc(100% - #{$steps-head-size});
        height: $border-width-sm;
      }

      .#{$steps-prefix-cls}-step {
        display: inline-block;
        width: $steps-main-description-width;
        text-align: center;
      }

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

        &__title {
          display: inline-block;
          padding-right: 0;
          margin-top: nth($steps-main-title-margin-y, 1);
          margin-bottom: nth($steps-main-title-margin-y, 2);
          line-height: inherit;
        }

        &__description {
          max-width: $steps-main-description-width;
        }
      }

      &:last-child {
        width: auto;
      }

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

  // 垂直步骤
  &--vertical {
    .#{$steps-prefix-cls}-item {
      .#{$steps-prefix-cls}-tail {
        top: $steps-head-size;
        left: $steps-head-size/2;
        width: $border-width-sm;
        height: calc(100% - #{$steps-head-size});
      }

      .#{$steps-prefix-cls}-head {
        float: left;
        margin-right: $steps-head-margin-x;
      }

      .#{$steps-prefix-cls}-main {
        display: block;
        min-height: $steps-main-description-width;
        overflow: hidden;
        .#{$steps-prefix-cls}-title {
          margin-bottom: nth($steps-main-title-margin-y, 2);
        }
      }

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