.ht-base-steps {
  .ant-steps-item-title:after {
    top: 50%;
  }

  .ivu-poptip.ht-base-poptip {
    display: flex;
  }

  .ht-base-poptip {
    .ivu-poptip-popper {
      top: -54px !important;
      left: -69px !important;
    }

    .ivu-poptip-body-content {
      color: #666;
    }

    .ant-steps-icon-dot {
      left: 1px;
    }
  }

  .ant-steps-item-wait {
    .ht-base-poptip {
      .ivu-poptip-popper {
        left: -70px !important;
      }
    }
  }

  .ant-steps-item-icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    .ant-steps-icon{
      font-size: 14px;
    }
  }

  .ant-steps-item-title {
    font-size: 14px;
    line-height: 24px;
  }

  .ant-steps-item-description {
    font-size: 12px;
    line-height: 16px;
  }

  .ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title {
    color: #999;
  }

  .ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-description {
    color: @disabled-color;
  }

  .ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title {
    color: #333;
  }

  .ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-description {
    color: #666;
  }

  .ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title {
    color: #999;
  }

  .ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-description {
    color:@disabled-color;
  }

  .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
    line-height: 24px;
  }

  .ant-steps-icon .ant-steps-icon-dot {
    width: 8px;
    height: 8px;
  }

  .ant-steps-item-process .ant-steps-icon .ant-steps-icon-dot {
    width: 12px;
    height: 12px;
    left: -1px;
  }
  .ant-steps-item-wait .ant-steps-item-icon{
    background: transparent;
    border-color: @border-color-base;
  }
  .ant-steps-item-finish .ant-steps-item-icon{
    background: transparent;
    border-color: @primary-color;
  }
  .ant-steps-item-error .ant-steps-item-icon{
    background: transparent;
    border-color: @error-color;
    &>.ant-steps-icon{
      color: @error-color;
    }
  }
  .ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title{
    color: @error-color;
  }
  .ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-description{
    color: @error-color;
  }
  .iconfont{
    font-size: 24px;
  }

  &.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
    max-width: 200px;
  }

  &.ant-steps-vertical .ant-steps-item-description {
    padding-bottom: 32px;
    line-height: normal;
  }

  &.ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail {
    left: 12px;
    padding: 30px 0 6px;
  }

  &.ant-steps-small .ant-steps-item-icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }

  &.ant-steps-vertical .ant-steps-item-content {
    min-height: 72px;
  }

  &.ant-steps-vertical.ant-steps-small > .ant-steps-item > .ant-steps-item-tail {
    left: 11px;
  }

  &.ant-steps-dot .ant-steps-item-icon {
    //height: 0px;
    //width: 0px;
  }
  &.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot{
    left: 0px;
  }
  &.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
    margin-right: 10px;
  }

  &.ant-steps-dot{
    .ant-steps-item-finish .ant-steps-item-icon{
      background: @primary-color;
    }
    .ant-steps-item-wait .ant-steps-item-icon{
      background: @disabled-color;
    }
  }
  &.ht-base-steps-indicator.ant-steps-small{
    .ant-steps-item-icon {
      border-color: transparent;
      background: #ffffff;
      line-height: 24px;
      font-size: 14px;
    }
  }
  &.ht-base-steps-indicator {
    .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
      line-height: 28px;
    }

    .ant-steps-item {
      height: 40px;
    }

    .ant-steps-item-finish {
      background: #f0faff;

      .ant-steps-icon {
        color: @primary-color;
      }
    }

    .ant-steps-item-process {
      background: @primary-color;

      .ant-steps-item-icon {
        .ant-steps-icon {
          color: #fff;
        }
      }

    }

    .ant-steps-item-wait {
      background: @background-color-base ;

      .ant-steps-item-icon {
        border-color: transparent;
      }
    }

    .ant-steps-item:nth-child(1):before {
      display: none;
    }

    .ant-steps-item:last-child:after {
      display: none;
    }

    .ant-steps-item:before {
      content: '';
      height: 100%;
      border-top: 20px solid #f0faff;
      border-bottom: 20px solid #f0faff;
      border-left: 8px solid #fff;
      position: absolute;
      left: -8px;
      top: 0;
      z-index: 999;
    }

    .ant-steps-item:after {
      content: '';
      height: 100%;
      border-top: 20px solid #fff;
      border-bottom: 20px solid #fff;
      border-left: 8px solid #f0faff;
      position: absolute;
      right: -8px;
      top: 0;
      z-index: 999;
    }

    .ant-steps-item-process:after {
      border-color: transparent transparent transparent @primary-color;
    }

    .ant-steps-item-wait:after {
      border-color: transparent transparent transparent #f5f5f5;
    }

    .ant-steps-item-process:before {
      border-top-color: @primary-color;
      border-bottom-color: @primary-color;
      border-left-color: transparent;
    }

    .ant-steps-item-wait:before {
      border-top-color: @background-color-base ;
      border-bottom-color: @background-color-base ;
      border-left-color: transparent;
    }

    .ant-steps-item-title {
      line-height: 40px;
      font-size: 12px;
    }

    .ant-steps-item-finish {
      .ant-steps-item-content {
        .ant-steps-item-title {
          color: @primary-color;
        }
      }
    }

    .ant-steps-item-process {
      .ant-steps-item-content {
        .ant-steps-item-title {
          color: #fff;
        }
      }
    }

    .ant-steps-item-title:after {
      display: none;
    }

    .ant-steps-item {
      width: 25%;
      overflow: visible;
      line-height: 40px;
      padding-left: 10px;
    }

    .ant-steps-item:first-child {
      //padding-left: 14px;
    }
    .ant-steps-item:last-child{
      flex: 1;
    }

    .ant-steps-item-icon {
      vertical-align: middle;
      line-height: normal;
    }

    .ant-steps-item-content {
      width: 166px;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ant-steps-item-description {
      display: none;
    }
  }
}





.ht-base-steps.ant-steps-small {
  .ant-steps-item-finish .ant-steps-item-icon {
    //background: #228ef8;
  }
  .ant-steps-item-icon .ant-steps-icon{
    font-size: 12px;
  }
  &.ant-steps-vertical .ant-steps-item-title{
    line-height: 24px;
  }
}


.ant-steps-dot .ant-steps-item-process {
  .ant-steps-item-content {
    margin-top: 8px;
  }

  .ht-base-poptip {
    .ivu-poptip-popper {
      left: -77px !important;
    }
  }
}

.ht-base-steps-indicator.ant-steps-small {
  .ant-steps-item-finish {
    .ant-steps-item-icon {
      background: @primary-color;

      .ant-steps-icon {
        color: #fff;
      }
    }
  }

  .ant-steps-item-process {
    .ant-steps-item-icon {
      background: #fff;

      .ant-steps-icon {
        color: @primary-color;
      }
    }
  }
}
.ant-steps-label-horizontal{
  &.ht-base-steps.ht-base-steps-indicator .ant-steps-item-title{
    font-size: 14px;
  }
}