.render-steps {
  &.el-steps--simple {
    background: #fff;
    padding: 0;
  }
  & .el-step__icon {
    width: auto !important;
    height: auto !important;
    &.is-text {
      border: none;
    }
  }
  & .el-step {
    background: #fff;
    &.is-horizontal {
      & .el-step__line {
        background: #ebeef2;
        top: 9px;
        left: 45px;
        right: 10px;
        height: 1px;
      }
    }
    &.is-simple {
      display: flex;
      align-items: center;
      & .el-step__arrow {
        &:after,
        &:before {
          background: unset;
        }
        &:before {
          width: 100%;
          border-top: 1px solid #ddd;
          top: 10px;
          right: 20px;
          transform: scaleY(0.4);
        }
      }
      & .el-step__title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 13px;
        font-style: normal;
      }
    }

    & .el-step__title {
      background: #fff;
      z-index: 9;
      padding: 0 20px 0 10px;
    }
    & .el-step__head {
      padding-right: 0px;
    }
    & .el-step__head,
    & .el-step__title {
      &.is-process {
        color: $--color-primary;

        & .is-text {
          & .icon-text {
            font-family: PingFangSC, PingFang SC;

            font-weight: 500;
            font-size: 10px;
            color: #ffffff;
            font-style: normal;
            background: $--color-primary;
            padding: 2px 5px;
            border-radius: 8px;
            border: unset;
          }
        }
      }
    }
  }
}
.icon-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  font-style: normal;
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #fff;
}

.el-step__title {
  &.is-success {
    color: $--color-primary-success;
    background: #fff;
    z-index: 8;
    padding: 0 20px 0 0;
  }
}
