@import "mixins/mixins";

@include b(steps) {
  display: flex;

  @include m(simple) {
    padding: 13px 8%;
    border-radius: 4px;
    background: $--background-color-base;
  }

  @include m(horizontal) {
    white-space: nowrap;
  }

  @include m(vertical) {
    height: 100%;
    flex-flow: column;
  }
}
.el-steps--whole {
  .el-step__head.is-wait {
    color: $--color-primary-light-7;
    border-color: $--color-primary-light-7;
  }
  .el-step__line {
    background-color: $--color-primary-light-7;
  }
  .el-step__title.is-wait {
    color: $--color-primary-light-7;
  }
  .el-step__description.is-wait {
    color: $--color-primary-light-7;
  }
  .el-step__head.is-success {
    color: $--color-primary;
    border-color: $--color-primary;
  }
  .el-step__title.is-success {
    color: $--color-primary;
  }
  .el-step__title.is-process {
    color: $--color-primary;
  }
  .el-step__description.is-process {
    color: $--color-primary;
  }
  .el-step__head.is-process {
    color: #FFF;
    border-color: $--color-primary;
  }
  .el-step__head.is-process {
    .el-step__icon {
      background-color: $--color-primary;
    }
  }
}
.el-steps{
  margin-bottom:20px;
}