@defaultColor: #ddd;
@errorColor: #f5222d;
@finishColor: #108ee9;
@ckeckedColor: #108ee9;
@warningColor: #ffe58f;
@line: .fe-step-header-line;
@icon: .fe-step-header-icon;
@title: .fe-step-main-title;
@desc: .fe-step-main-description;
.fe-step {
  flex-grow: 1;
  // width: 10%;
  // flex-basis: 30%;
  .fe-step-header {
    position: relative;
    text-align: center;
    @{icon} {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: @defaultColor;
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    @{line} {
      width: 100%;
      height: 1px;
      position: absolute;
      background-color: @defaultColor;
      top: 5px;
    }
  }
  @{title} {
    padding: 12px 0 0;
    font-size: 12px;
    color: #333333;
    line-height: 19px;
  }
  @{desc} {
    padding: 6px 12px 0px 0;
    font-size: 12px;
    color: #999999;
  }
}
.fe-step:last-child {
  @{line} {
    display: none;
  }
}
.fe-step.is-finish @{icon},
.fe-step.is-finish @{line} {
  background-color: @finishColor;
}
.fe-step.is-active @{icon} {
  background-color: @finishColor;
}

.fe-step.is-last @{line} {
  background-color: @defaultColor;
}

//水平步骤条
.fe-step.is-horizontal {
  width: 10%;
  @{title} {
    padding: 12px 0 0;
    font-size: 12px;
    color: #333333;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @{desc} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
//垂直步骤条

.fe-step.is-vertical {
  display: flex;
  padding-top: 5px;
  &:last-child {
    flex-grow: 0;
  }
  .fe-step-main {
    padding-left: 16px;
    width: 100%;
  }
  @{icon} {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  @{line} {
    left: 10px;
    top: 10px;
    width: 1px;
    height: 100%;
  }
  @{title} {
    padding: 0;
    font-size: 15px;
    line-height: 21px;
  }
  @{desc} {
    font-size: 13px;
    color: #999999;
    letter-spacing: 0;
    line-height: 19px;
  }
}
//默认小图标
.fe-step.is-vertical.is-wait {
  @{icon} {
    transform: scale(10/24);
  }
}
//自定义垂直颜色
.fe-step.is-vertical.is-error @{icon} {
  background-color: @errorColor!important;
}
.fe-step.is-vertical.is-error @{title} {
  color: @errorColor!important;
}
.fe-step.is-vertical.is-warning @{icon} {
  background-color: @warningColor!important;
}
.fe-step.is-vertical.is-warning @{title} {
  color: @warningColor!important;
}
.fe-step.is-vertical.is-checked @{icon} {
  background-color: @ckeckedColor;
}
.fe-step.is-vertical.is-checked @{title} {
  color: @ckeckedColor;
}
.fe-step.is-vertical.is-finish @{title} {
  color: @ckeckedColor;
}
.fe-step.is-vertical.is-active @{title} {
  color: @ckeckedColor;
}
//居中
.is-center {
  text-align: center;
  @{line} {
    margin: 0 0 0 50%;
  }
  @{icon} {
    margin: 0 0 0 50%;
  }
}