.#{$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;
        @include bg-gradient(nth($steps-finish-tail-bg,1),nth($steps-finish-tail-bg,2));
      }
    }

    //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{
          @include bg-gradient(nth($steps-process-head-bg,1),nth($steps-process-head-bg,2));
        }
      }

      .#{$steps-prefix-cls}-main{
        &__title{
         font-weight: 500;
         color: $gray-dark;
        }
      }
    }

    //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);
      .#{$steps-prefix-cls}-head__inner {
        background: $gray-lightest-10
      }
    }

    //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);
    }

  }

  &--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: $steps-horizontal-item-space/2;
      }

      .#{$steps-prefix-cls}-main{

        &__title {
          position: relative;
          display: inline-block;
          padding-right: $steps-horizontal-item-space/2;

          &::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/2;
        }
      }

      &--status-finish {
        .#{$steps-prefix-cls}-main{
          &__title {
            &::after {
              @include bg-gradient(nth($steps-finish-tail-bg,1),nth($steps-finish-tail-bg,2));
            }
          }
        }
      }
    }

    &.#{$steps-prefix-cls}--sm {
      .#{$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-top: $steps-vertical-item-space;
        }
      }

      &--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;
      }

      .#{$steps-prefix-cls}-head{
        padding-right: $steps-horizontal-item-space;
      }

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

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

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

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

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

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