.#{$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 {
        width: $steps-head-size;
        height: $steps-head-size;
        font-size: $steps-head-font-size;
        // line-height: calc(#{$steps-head-size} - 2);
        line-height: $steps-head-size;
        text-align: center;
        border: $border-width-sm solid $gray-12;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &.inner_icon{
          background: $brand-primary;
        }
        .steps-icon{
          font-size: 0.24rem;
          &.iconCls{
            color: $white
          }
        }
      }
    }

    .#{$steps-prefix-cls}-main {
      &__title {
        font-size: $steps-main-title-font-size;
        font-weight: 500;
        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;
      }
      .steps-step{
        .steps-main{
          .steps-main__title{
            color:$gray-10;
          }
        }
      }
    }

    //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-11,$gray-11,$gray-11,$gray-11);
      .steps-step{
        .steps-main{
          .steps-main__title{
            color:$gray-11;
          }
        }
      }
      .steps-step{
        .steps-head{
          .steps-head__inner{
            &.inner_icon{
              background:rgba(0,0,0,1);
              opacity:0.15;
              border: none
            }
          }
        }
      }
    }

    //error
    &--status-error {
      @include steps-item-status($brand-danger,$brand-danger,$brand-danger,$brand-danger);
      .steps-step{
        .steps-main{
          .steps-main__descripition{
            color: $brand-danger;
            border: none
          }
        }
      } 
      .steps-step{
        .steps-head{
          .steps-head__inner{
            &.inner_icon{
              background: $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: 1.1rem;
        width: calc(100% - #{$steps-head-size*2});
        height: 0.02rem;
      }

      .#{$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;
        }

        &__descripition {
          font-size: .28rem;
          color:$gray-11;
          max-width: $steps-main-description-width;
        }
      }

      &:last-child {
        width: auto;
      }

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

  // 垂直步骤
  &--vertical{
    .#{$steps-prefix-cls}-item {
      .#{$steps-prefix-cls}-tail {
        top: .45rem;
        left: .16rem;
        width: 0.02rem!important;
        height: calc(100% - .52rem);
      }

      .#{$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);
        }
        &__descripition {
          font-size: .28rem;
          color:$gray-11;
          padding: 8px 0;
        }
      }

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