@import 'mixin';
@import 'variable';

$class-prefix: h;
$sizes: small, medium, large;

@include blink(#{$class-prefix}-step-blink, 0.8, 1);

.#{$class-prefix}-step {
  @extend %disable-scrollbar;
  justify-content: center;

  &--scroll {
    justify-content: flex-start;
  }

  // fix wechat miniprogram style temporarily
  &--wechat {
    &-dot {
      max-height: 116rpx;
    }
    &-circle {
      max-height: 140rpx;
    }
    &-arrow {
      max-height: 54rpx;
    }
  }

  &-container {
    @include flex(row, center);

    &--scroll {
      justify-content: flex-start;
    }

    &--ver {
      flex-direction: column;
    }
  }

  &-item {
    $cur: &;
    position: relative;
    display: flex;
    flex-direction: column;

    &-indicator {
      @include flex(row, center, center);
      &--current {
        margin-left: -2rpx;
        .h-step-item-horn--right {
          border-top-color: #e6e6e6;
          border-left-color: #e6e6e6;
        }
      }
    }

    &-node {
      position: relative;
      width: 12rpx;
      height: 12rpx;
      border-radius: 6rpx;
      background-color: var(--color-brand-3, #FF6A00);
      box-sizing: border-box;
      @extend %ellipsis;

      &--percent {
        margin-top: 0;
        margin-bottom: 0;
        border: none;
        background-color: var(--color-white);
      }
      &--current {
        width: 16rpx;
        height: 16rpx;
        border-radius: 8rpx;
      }
    }

    &-body {
      display: flex;
      flex-direction: column;
      margin-top: -6rpx;
      margin-left: 22rpx;
      width: 200rpx;
      text-align: center;
    }

    &-title {
      display: inline;
      color: var(--color-black, #000000);
      font-size: var(--p-caption-font-size, 24rpx);
      @extend %ellipsis;
      line-height: 1;
      &--current {
        font-size: var(--p-title-font-size, 32rpx);
        color: var(--color-brand-3, #FF6A00);
        font-weight: 500;
      }
    }

    &--process &-title {
      color: var(--step-title-process-color);
    }

    &--process &-title--current {
      font-size: var(--p-title-font-size, 32rpx);
      color: var(--color-brand-3, #FF6A00);
      font-weight: 500;
    }
     
    &--wait &-title {
      color: var(--color-text1-2, #999999);
    }

    &-content {
      display: inline;
      margin-top: 8rpx;
      @extend %ellipsis;
      line-height: 1;
    }

    &-horn {
      border: 0 solid transparent;
      height: 45rpx !important;
      border-top-width: var(--step-horn-line-width);
      border-left-width: var(--step-horn-line-width);
      border-top-color: var(--step-active-color);
      border-left-color: var(--step-active-color);

      &--hide {
        visibility: hidden;
      }
      &--withcontent {
        height: 104rpx !important;
      }
      &--withcontent-notinall {
        height: 85rpx !important;
      }
    }

    &--process &-horn--right,
    &--wait &-horn {
      border-top-color: var(--step-wait-line-color);
      border-left-color: var(--step-wait-line-color);
    }

    // for circle
    &--process &-node {
      background-color: var(--step-active-color);
      border: none;
      color: var(--step-circle-process-font-color);

      &--percent {
        background-color: var(--color-white);
      }
    }

    &--wait &-node {
      background-color: var(--color-text1-1, #B5B6B8);
      @include hairlineBorderColor(var(--step-dot-wait-border-color));
      color: var(--step-circle-finish-font-color);
    }

    &--finish &-node {
      background-color: var(--color-brand-3, #FF6A00);
      @include hairlineBorderColor(var(--step-active-color));
    }

    &--dot#{$cur}--process &-node,
    &--circle#{$cur}--process &-node {
      animation: #{$class-prefix}-step-blink var(--motion-time-2) var(--motion-type-ease);
      transition: all var(--motion-time-1) var(--motion-type-linear);
    }

    // circle 特殊样式
    &--circle &-node {
      @include flex(row, center);
      width: var(--step-circle-size);
      height: var(--step-circle-size);
      font-size: var(--step-circle-inner-font-size);
    }

    // arrow 特殊样式
    &--arrow {
      margin-right: 2rpx;
    }

    &--arrow &-horn {
      flex: none;
      position: absolute;
      top: 0;

      &--left {
        left: 0;
        z-index: var(--elevation-1);
        border-width: calc(var(--step-arrow-size) / 2);
        border-style: solid;
        border-color: var(--step-arrow-finish-bg-color);
        border-left-color: transparent;
        background-color: #fff;
      }

      &--right {
        right: calc(-1 * var(--step-arrow-size));
        z-index: calc(var(--elevation-1) + 1);
        border-width: calc(var(--step-arrow-size) / 2);
        border-style: solid;
        border-color: transparent;
        border-left-color: var(--step-active-color);
      }
    }

    &-process &-horn {
      &--right {
        border-color: var(--step-active-color);
      }
    }

    #{$cur}--arrow#{$cur}--finish &-node {
      background-color: var(--step-arrow-finish-bg-color);
    }

    #{$cur}--arrow#{$cur}--finish &-horn--left {
      border-color: var(--step-arrow-finish-bg-color);
      border-left-color: transparent;
    }

    #{$cur}--arrow#{$cur}--finish &-horn--right {
      border-left-color: var(--step-arrow-finish-bg-color);
    }

    #{$cur}--arrow#{$cur}--process &-horn--left {
      border-color: var(--step-active-color);
      border-left-color: transparent;
    }

    #{$cur}--arrow#{$cur}--process &-horn--right {
      border-left-color: var(--step-active-color);
    }

    #{$cur}--arrow#{$cur}--wait &-node {
      background-color: var(--step-arrow-wait-color);
    }

    #{$cur}--arrow#{$cur}--wait &-horn--left {
      border-color: var(--step-arrow-wait-color);
      border-left-color: transparent;
    }

    #{$cur}--arrow#{$cur}--wait &-horn--right {
      border-left-color: var(--step-arrow-wait-color);
    }

    #{$cur}--arrow#{$cur}--first &-node {
      margin-left: 0;
    }

    // vertical (dot)
    &--ver {
      flex-direction: row;
      width: 100%;
    }

    &--ver &-indicator {
      flex-direction: column;
      justify-content: flex-start;
    }

    &--ver &-horn--hide,
    &--ver &-horn--left {
      display: none;
    }

    &--ver &-body {
      flex: 1;
      width: auto;
      margin-top: -6rpx;
    }

    &--ver &-title {
      line-height: 1;
    }

    &--ver &-content {
      padding: 0;
    }

    &--ver &-title,
    &--ver &-content {
      text-align: left;
    }

    // ver & circle
    &--ver#{$cur}--circle &-title {
      margin-top: calc((var(--step-circle-size) - var(--step-title-font-size)) / 2 + var(--step-spacing));
    }

    &--ver#{$cur}--circle#{$cur}--first &-title {
      margin-top: calc((var(--step-circle-size) - var(--step-title-font-size)) / 2);
    }

    &--ver#{$cur}--first &-title,
    &--ver#{$cur}--first &-node {
      margin-top: 0;
    }

    // disabled
    &--disabled#{$cur}--circle &-node,
    &--disabled#{$cur}--dot &-node {
      //border-color: var(--step-node-disabled-border-color);
      @include hairlineBorderColor(var(--step-node-disabled-border-color));
      border-style: solid;
      background-color: var(--color-fill1-4);
      border-color: var(--color-fill1-4);
      color: var(--step-disabled-font-color);
    }

    &--disabled#{$cur}--arrow &-node {
      background-color: var(--step-arrow-disabled-bg-color);
      color: var(--step-disabled-font-color);
    }

    &--pre-disabled#{$cur}--circle &-horn--left,
    &--pre-disabled#{$cur}--dot &-horn--left,
    &--disabled#{$cur}--circle &-horn--right,
    &--disabled#{$cur}--dot &-horn--right {
      border-color: var(--step-horn-disabled-color);
    }

    &--disabled#{$cur}--arrow &-horn--right {
      border-left-color: var(--step-arrow-disabled-bg-color);
    }

    &--disabled#{$cur}--arrow &-horn--left {
      border-color: var(--step-arrow-disabled-bg-color);
      border-left-color: transparent;
    }

    &--disabled &-title,
    &--disabled &-content {
      color: var(--step-disabled-font-color);
      border-color: var(--step-disabled-font-color);
    }

    &--disabled &-node {
      @include hairlineBorderColor(var(--step-disabled-font-color));
    }

    &-addon {
      margin-right: var(--step-spacing);
      margin-top: var(--step-spacing);
      max-width: 375rpx;

      &--first {
        margin-top: 0;
      }
    }
  }
}

.popup-content {
  .h-step {
    &-item {
      &-title {
        color: var(--color-text1-4, #111111);
        font-size: var(--p-body-2-font-size, 28rpx);
        line-height: 1;
        font-weight: 500;
        &--current {
          font-size: var(--p-body-2-font-size, 28rpx);
          color: var(--color-brand-3, #FF6A00);
        }
      }
    }
  }
  .h-step-item--wait .h-step-item-title {
    color: var(--color-text1-2, #999999);
  }
}