@stepsPrefixCls: fxm-steps;
@errorTailCls: error-tail;
@defaultIconSize: 22 * @hd;
@smallIconSize: 18 * @hd;
@stepDescriptionMaxWidth: 100 * @hd;
@iconPrefixCls: am;

// 对应 4 种状态的颜色变量，用在自定义函数 .step-item-status(@status) 上
@process-icon-color: @brand-primary;
@process-title-color: @color-text-base;
@process-description-color: @process-title-color;
@process-tail-color: @border-color-base;

@wait-icon-color: @color-icon-base;
@wait-title-color: @color-text-base;
@wait-description-color: @wait-title-color;
@wait-tail-color: @border-color-base;

@finish-icon-color: @brand-primary;
@finish-title-color: @color-text-base;
@finish-description-color: @finish-title-color;
@finish-tail-color: @process-icon-color;

@error-icon-color: @brand-error;
@error-title-color: @error-icon-color;
@error-description-color: @error-icon-color;
@error-tail-color: @process-tail-color;

.fxm-steps {
  font-size: 0;
  width: 100%;
  line-height: @line-height-paragraph;
  display: flex;

  &,
  * {
    box-sizing: border-box;
  }
}

.fxm-steps-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  flex: 1;
  overflow: hidden;

  &:last-child {
    flex: none;
  }

  &:last-child &-tail,
  &:last-child &-title:after {
    display: none;
  }

  &-icon,
  &-content {
    display: inline-block;
    vertical-align: top;
  }

  &-icon {
    border: 1 * @hd solid @color-text-placeholder;
    width: @defaultIconSize;
    height: @defaultIconSize;
    line-height: @defaultIconSize;
    border-radius: @defaultIconSize;
    text-align: center;
    font-size: @font-size-base;
    margin-right: @h-spacing-md;
    transition: background-color .3s, border-color .3s;

    > .fxm-steps-icon {
      line-height: 1;
      top: -1 * @hd;
      color: @brand-primary;
      position: relative;

      .fxm-icon {
        font-size: @font-size-caption-sm;
        position: relative;
        float: left;
      }
    }
  }

  &-tail {
    position: absolute;
    left: 0;
    width: 100%;
    top: 12 * @hd;
    padding: 0 10 * @hd;
    &:after {
      content: '';
      display: inline-block;
      background: @border-color-base;
      height: 1 * @hd;
      border-radius: 1 * @hd;
      width: 100%;
      transition: background .3s;
      position: relative;
      left: -2 * @hd;
    }
  }
  &-content {
    margin-top: 3 * @hd;
  }
  &-title {
    font-size: @font-size-caption;
    margin-bottom: 4 * @hd;
    color: @color-text-base;
    font-weight: bold;
    display: inline-block;
    padding-right: 10 * @hd;
    position: relative;
  }
  &-description {
    font-size: @font-size-subhead;
    color: @color-text-placeholder;
  }
  .step-item-status(wait);
  .step-item-status(progress);
  &-process &-icon {
    background: @brand-primary;
    > .fxm-steps-icon {
      color: @color-text-base-inverse;
    }
  }
  .step-item-status(finish);
  .step-item-status(error);

  &.fxm-steps-next-error .fxm-steps-item-title:after {
    background: @brand-error;
  }

  &.error-tail .fxm-steps-item-tail:after {
    background-color: @brand-error;
  }
}

.fxm-steps-horizontal:not(.fxm-steps-label-vertical) {
  .fxm-steps-item {
    margin-right: 10 * @hd;
    &:last-child {
      margin-right: 0;
    }
    &-tail {
      display: none;
    }
    &-description {
      max-width: @stepDescriptionMaxWidth;
    }
  }
}


.fxm-steps-item-custom {
  .fxm-steps-item-icon {
    background: none;
    border: 0;
    width: auto;
    height: auto;
    > .fxm-steps-icon {
      font-size: @defaultIconSize;
      top: 1 * @hd;
      width: @defaultIconSize;
      height: @defaultIconSize;
    }
  }
  &.fxm-steps-item-process {
    .fxm-steps-item-icon > .fxm-steps-icon {
      color: @brand-primary;
    }
  }
}


.fxm-steps-small {
  .fxm-steps-item-icon {
    width: @smallIconSize;
    height: @smallIconSize;
    line-height: @smallIconSize;
    text-align: center;
    border-radius: @smallIconSize;
    font-size: @font-size-base;
    margin-right: @h-spacing-md;
    > .fxm-steps-icon {
      font-size: @font-size-caption-sm;
      transform: scale(.75);
      top: -2 * @hd;
    }
  }
  .fxm-steps-item-content {
    margin-top: 0;
  }
  .fxm-steps-item-title {
    font-size: @font-size-caption;
    margin-bottom: @v-spacing-xs;
    color: @color-text-base;
    font-weight: bold;
  }
  .fxm-steps-item-description {
    font-size: @font-size-caption-sm;
    color: @color-text-placeholder;
  }
  .fxm-steps-item-tail {
    top: 8 * @hd;
    padding: 0 8 * @hd;
    &:after {
      height: 1 * @hd;
      border-radius: 1 * @hd;
      width: 100%;
      left: 0;
    }
  }

  .fxm-steps-item-custom .fxm-steps-item-icon {
    background: none;
    > .fxm-steps-icon {
      font-size: @smallIconSize;
      top: -2 * @hd;
      transform: none;
    }
  }
}


.fxm-steps-vertical {
  display: block;
  .fxm-steps-item {
    display: block;
    overflow: visible;
    &-icon {
      float: left;
      &-inner {
        margin-right: 16 * @hd;
      }
    }
    &-content {
      min-height: 48 * @hd;
      overflow: hidden;
      display: block;
    }
    &-title {
      line-height: 26 * @hd;
      &:after {
        display: none;
      }
    }
    &-description {
      padding-bottom: 12 * @hd;
    }
    &-tail {
      position: absolute;
      left: 13 * @hd;
      top: 0;
      height: 100%;
      width: 1 * @hd;
      padding: 30 * @hd 0 4 * @hd 0;
      &:after {
        height: 100%;
        width: 1 * @hd;
      }
    }
  }

  &.fxm-steps-small {
    .fxm-steps-item-tail {
      position: absolute;
      left: 9 * @hd;
      top: 0;
      padding: 22 * @hd 0 4 * @hd 0;
    }
    .fxm-steps-item-title {
      line-height: 18 * @hd;
    }
  }
}

.fxm-steps-label-vertical {
  .fxm-steps-item {
    overflow: visible;
    &-tail {
      padding: 0 24 * @hd;
      margin-left: 48 * @hd;
    }
    &-content {
      display: block;
      text-align: center;
      margin-top: 8 * @hd;
      width: @stepDescriptionMaxWidth;
    }
    &-icon {
      display: inline-block;
      margin-left: 36 * @hd;
    }
    &-title {
      padding-right: 0;
      &:after {
        display: none;
      }
    }
  }
}


.step-item-status(@status) {
  @icon-color: "@{status}-icon-color";
  @title-color: "@{status}-title-color";
  @description-color: "@{status}-description-color";
  @tail-color: "@{status}-tail-color";
  &-@{status} &-icon {
    border-color: @icon-color;
    background-color: @fill-base;
    > .fxm-steps-icon {
      color: @icon-color;
      .fxm-steps-icon-dot {
        background: @icon-color;
      }
    }
  }
  &-@{status} &-title {
    color: @title-color;
    &:after {
      background-color: @tail-color;
    }
  }
  &-@{status} &-description {
    color: @description-color;
  }
  &-@{status} &-tail:after {
    background-color: @tail-color;
  }
}

// // wait
// .step-item-status-wait() {
//   @icon-color: "wait-icon-color";
//   @title-color: "wait-title-color";
//   @description-color: "wait-description-color";
//   @tail-color: "wait-tail-color";
//   &-wait &-icon {
//     border-color: @icon-color;
//     background-color: @fill-base;
//     > .fxm-steps-icon {
//       color: @icon-color;
//       .fxm-steps-icon-dot {
//         background: @icon-color;
//       }
//     }
//   }
//   &-wait &-title {
//     color: @title-color;
//     &:after {
//       background-color: @tail-color;
//     }
//   }
//   &-wait &-description {
//     color: @description-color;
//   }
//   &-wait &-tail:after {
//     background-color: @tail-color;
//   }
// }

// // process
// .step-item-status-process() {
//   @icon-color: "process-icon-color";
//   @title-color: "process-title-color";
//   @description-color: "process-description-color";
//   @tail-color: "process-tail-color";
//   &-process &-icon {
//     border-color: @icon-color;
//     background-color: @fill-base;
//     > .fxm-steps-icon {
//       color: @icon-color;
//       .fxm-steps-icon-dot {
//         background: @icon-color;
//       }
//     }
//   }
//   &-process &-title {
//     color: @title-color;
//     &:after {
//       background-color: @tail-color;
//     }
//   }
//   &-process &-description {
//     color: @description-color;
//   }
//   &-process &-tail:after {
//     background-color: @tail-color;
//   }
// }
// // finish
// .step-item-status-finish() {
//   @icon-color: "finish-icon-color";
//   @title-color: "finish-title-color";
//   @description-color: "finish-description-color";
//   @tail-color: "finish-tail-color";
//   &-finish &-icon {
//     border-color: @icon-color;
//     background-color: @fill-base;
//     > .fxm-steps-icon {
//       color: @icon-color;
//       .fxm-steps-icon-dot {
//         background: @icon-color;
//       }
//     }
//   }
//   &-finish &-title {
//     color: @title-color;
//     &:after {
//       background-color: @tail-color;
//     }
//   }
//   &-finish &-description {
//     color: @description-color;
//   }
//   &-finish &-tail:after {
//     background-color: @tail-color;
//   }
// }
// // error
// .step-item-status-error() {
//   @icon-color: "error-icon-color";
//   @title-color: "error-title-color";
//   @description-color: "error-description-color";
//   @tail-color: "error-tail-color";
//   &-error &-icon {
//     border-color: @icon-color;
//     background-color: @fill-base;
//     > .fxm-steps-icon {
//       color: @icon-color;
//       .fxm-steps-icon-dot {
//         background: @icon-color;
//       }
//     }
//   }
//   &-error &-title {
//     color: @title-color;
//     &:after {
//       background-color: @tail-color;
//     }
//   }
//   &-error &-description {
//     color: @description-color;
//   }
//   &-error &-tail:after {
//     background-color: @tail-color;
//   }
// }