@import "../../styles/themes/variable.scss";

$class-prefix-step: #{$xh-prefix}-step;
$class-prefix-steps: #{$xh-prefix}-steps;

#{$class-prefix-step} {
  --line-to-next-color: #e5e5e5;
  --icon-color: #e5e5e5;
  #{$class-prefix-step}-prefix {
    font-size: 28px;
    width: 64px;
    text-align: right;
    margin-right: 24px;
    color: var(--font-color);
    flex-shrink: 0;
  }
  #{$class-prefix-step}-indicator {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      z-index: 0;
      background-color: var(--line-to-next-color);
    }
    &.dashed::after {
      background-image: linear-gradient(to right, var(--line-to-next-color) 50%, transparent 0%);
      background-position: center;
      background-repeat: repeat-x;
      background-size: 10px 1px;
      background-color: initial;
    }
    #{$class-prefix-step}-icon-container {
      position: absolute;
      z-index: 1;
      color: var(--icon-color);
    }
  }

  &:last-child {
    #{$class-prefix-step}-indicator::after {
      display: none;
    }
  }
  &-status-finish {
    --line-to-next-color: var(--color-primary);
  }

  &-status-wait {
    --icon-color: #e5e5e5;
    #{$class-prefix-step}-title {
      color: var(--font-color-tertiary);
    }
  }
  &-status-process {
    --icon-color: var(--color-primary);
    #{$class-prefix-step}-title {
      color: var(--color-primary);
    }
  }
  &-status-finish {
    --icon-color: var(--color-primary);
  }
  &-status-error {
    --icon-color: var(--color-warning);
    #{$class-prefix-step}-title {
      color: var(--color-warning);
    }
  }
}

#{$class-prefix-steps} {
  --indicator-margin-right: 0;
  --icon-size: 18px;

  width: 100%;
  box-sizing: border-box;

  &-horizontal {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;

    #{$class-prefix-step} {
      flex: 1;

      #{$class-prefix-step}-indicator {
        width: 100%;
        height: 24px;
        &::after {
          left: 50%;
          top: 50%;
          height: 1px;
          transform: translateY(-50%);
          width: 100%;
        }
        #{$class-prefix-step}-icon-container {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          &.fancy {
            .xh-step-icon-dot {
              width: 20px;
              height: 20px;
              background-color: #f65f04;
              border: 10px solid #fcdfcc;
              box-sizing: content-box;
            }
          }
        }
      }
    }

    #{$class-prefix-step}-content {
      text-align: center;
      font-size: 18px;
      padding: 2px 8px 0;
      #{$class-prefix-step}-title {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      #{$class-prefix-step}-description {
        margin-top: 4px;
        color: var(--font-color-tertiary);
        font-size: 24px;
      }
    }
  }

  &-vertical {
    padding: 8px 16px;

    #{$class-prefix-step} {
      display: flex;
      align-items: stretch;


      #{$class-prefix-step}-indicator {
        flex: none;
        min-width: 28PX;
        margin-right: 5px;
        display: flex;
        justify-content: center;
        &.dashed::after {
          background-image: linear-gradient(to bottom, var(--line-to-next-color) 50%, transparent 0%);
          background-position: center;
          background-repeat: repeat-y;
          background-size: 1px 10px;
          background-color: initial;
        }

        &::after {
          left: 50%;
          top: 21px;
          width: 1PX;
          transform: translateX(-50%);
          height: 100%;
        }
        #{$class-prefix-step}-icon-container {
          top: calc(28px * 1.5 / 2);
          left: 50%;
          transform: translate(-50%, -50%);
          &.fancy {
            .xh-step-icon-dot {
              width: 20px;
              height: 20px;
              background-color: #f65f04;
              border: 10px solid #fcdfcc;
              box-sizing: content-box;
            }
          }
        }
      }

      &:last-child {
        #{$class-prefix-step}-content {
          padding-bottom: 0;
        }
      }
      #{$class-prefix-step}-content {
        flex: auto;
        padding-bottom: 32px;
        #{$class-prefix-step}-title {
          font-size: var(--title-font-size);
          line-height: 1.5;
          font-size: 28px;
        }
        #{$class-prefix-step}-description {
          padding-top: 4px;
          font-size: 24px;
          color: var(--font-color-tertiary);
        }
      }
    }
  }
}

#{$class-prefix-step}-icon-container {
  font-size: var(--icon-size);
}

#{$class-prefix-step}-icon-dot {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  border-radius: 50%;
}