@import "../variate.less";


.@{elNamespace}-steps{
  .@{elNamespace}-step{
    &__title{
      font-size: 14px;
      line-height: 22px;
      margin: 8px 0 4px 0;
      &.is-success{
        color: @primary;
      }
      &.is-process, &.is-error{
        font-weight: 500;
        color: #333;
      }
    }
    &__icon{
      // background: none;
      &.is-text{
        border: 1px solid;
      }
      &.is-icon{
        width: 24px;
      }
    }
    &__head{
      &.is-success{
        color: @primary;
        border-color: @primary;
        .@{elNamespace}-step__line{
          background-color: @primary;
        }
      }
      &.is-process{
        .@{elNamespace}-step__icon.is-text{
          color: #fff;
          background: @primary;
          border-color: @primary;
        }
      }
      &.is-error{
        .@{elNamespace}-step__icon.is-text{
          color: #fff;
          background: @danger;
          border-color: @danger;
        }
      }
    }
    &__line{
      background-color: var(~'--@{elNamespace}-border-color');
      &-inner{
        border-color: rgba(0, 0, 0, 0);
      }
    }
    &.is-horizontal{
      .@{elNamespace}-step__line{
        height: 1px!important;
        margin-left: 56px!important;
      }
      .@{elNamespace}-step__icon{
        margin: 0 16px;
      }
    }
    &.is-vertical{
      .@{elNamespace}-step__line{
        width: 1px!important;
      }
    }
    &.is-simple{
      .@{elNamespace}-step__head{
        &.is-process{
          .@{elNamespace}-step__icon.is-text{
            background: none;
          }
        }
      }
    }
    &__description{
      &.is-success, &.is-process, &.is-wait, &.is-error{
        color: var(~'--@{elNamespace}-text-color-secondary');
      }
    }
  }
}