@import '../style/var';

.van-step {
  position: relative;
  flex: 1;
  color: @step-text-color;
  font-size: @step-font-size;



  &__circle {
    display: block;
    width: @step-circle-size;
    height: @step-circle-size;
    background-color: @step-circle-color;
    border-radius: 50%;
  }

  &__line {
    position: absolute;
    background-color: @step-line-color;
    transition: background-color @animation-duration-base;
  }

  &--horizontal {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    &:first-child {
      .van-step__title {
        margin-left: 0;
        transform: none;
      }
    }

    &:last-child {
      // position: absolute;
      // right: 1px;
      // width: auto;

      .van-step__title {
        margin-left: 0;
        transform: none;
      }

      .van-step__circle-container {
        // right: -9px;
        // left: auto;
      }
    }

    .van-step__circle-container {
      position: absolute;
      top: calc(100% + 10px);
      left: -@padding-xs;
      z-index: 1;
      padding: 0 @padding-xs;
      background-color: @steps-background-color;
      transform: translateY(-50%);
    }

    .van-step__title {
      display: inline-block;
      // margin-left: 3px;
      font-size: @step-horizontal-title-font-size;
      // transform: translateX(-50%);
      word-break: break-all;

      @media (max-width: 321px) {
        font-size: calc(var(--step-horizontal-title-font-size) - 1px);
      }
    }

    .van-step__line {
      top: calc(100% + 10px);
      left: 0;
      width: 100%;
      height: 1px;
    }

    .van-step__icon {
      display: block;
      font-size: @step-icon-size;
    }

    .van-step--process {
      color: @step-process-text-color;
    }
  }

  &--vertical {
    display: block;
    float: none;
    padding: 10px 10px 10px 0;
    line-height: @line-height-sm;

    &:not(:last-child)::after {
      border-bottom-width: 1px;
    }

    .van-step__circle-container {
      position: absolute;
      top: 19px;
      left: -15px;
      z-index: 1;
      font-size: @step-icon-size;
      line-height: 1;
      transform: translate(-50%, -50%);
    }

    .van-step__line {
      top: 28px;
      // bottom: 30px;
      left: -15px;
      width: 1px;
      height: calc(100% - 18px);
    }

    .van-step__icon {
      display: block;
      font-size: @step-icon-size;
    }
  }

  &:last-child {
    .van-step__line {
      width: 0;
    }
  }

  &--disabled {
    color: @step-disabled-color !important;

    .van-step__icon {
      color: @step-disabled-color !important;
    }
  }

  &--process {
    color: @step-finish-text-color;
  }

  &--finish {
    color: @step-finish-text-color;

    .van-step__circle,
    .van-step__line {
      background-color: @step-finish-line-color;
    }
  }

  &__icon {
    transition: color @animation-duration-base;

    &--active,
    &--process,
    &--finish {
      color: @step-active-color;
    }

    &--error {
      color: #F24957;
    }
  }

  // &__title {
  //   transition: color @animation-duration-base;

  //   &--active,
  //   &--process,
  //   &--finish {
  //     color: @step-active-color;
  //   }

  //   &--error {
  //     color: #F24957;
  //   }
  // }
}