@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(steps) {
  --xzx-steps-color-primary: var(--xzx-color-primary);
  --xzx-steps-color-primary-light: var(--xzx-color-primary-light);
  --xzx-steps-icon-size: var(--xzx-text-sm);
  --xzx-steps-icon-box-size: 22px;
  --xzx-steps-icon-box-line-height: 22px;
  --xzx-steps-line-margin-size: 8px;
  --xzx-steps-content-min-height: 32px;
  --xzx-steps-color-active: var(--xzx-gray-4);
  --xzx-steps-line-active: var(--xzx-gray-4);
  --xzx-steps-text-color-active: var(--xzx-text-gray-3);
  --xzx-steps-simple-dot-size: 8px;

  display: flex;

  @include when(horizontal) {
    justify-content: space-between;
    @include b(step) {
      flex-direction: column;
      align-items: center;

      @include e('inner') {
        position: absolute;
        width: calc(
          100% - var(--xzx-steps-icon-box-size) -
            (var(--xzx-steps-line-margin-size) * 2)
        );
        height: 1px;
        left: calc(
          50% + var(--xzx-steps-icon-box-size) / 2 +
            var(--xzx-steps-line-margin-size)
        );
        top: calc((var(--xzx-steps-icon-box-size) - 1px) / 2);
      }

      @include e(content) {
        text-align: center;
      }

      @include e(icon) {
        align-items: center;
      }
    }
  }

  @include when(vertical) {
    flex-direction: column;
    @include b(step) {
      flex-direction: row;
      @include e('inner') {
        position: absolute;
        width: 1px;
        height: calc(
          100% - var(--xzx-steps-icon-box-size) -
            (var(--xzx-steps-line-margin-size) * 2)
        );
        top: calc(
          var(--xzx-steps-icon-box-size) + var(--xzx-steps-line-margin-size)
        );
        left: calc((var(--xzx-steps-icon-box-size) - 1px) / 2);
      }
      @include e(icon) {
        margin-right: 8px;
        justify-content: center;
      }
      @include e(title) {
        margin-top: 0;
      }
      @include e(content) {
        margin-bottom: 8px;
      }
    }
  }
}

@include b(step) {
  display: flex;
  width: 100%;
  position: relative;

  &:last-child {
    @include e(inner) {
      &::before {
        display: none;
      }
    }
  }

  @include when(simple) {
    --xzx-steps-line-margin-size: 4px;
    --xzx-steps-content-min-height: 16px;
    @include e(icon) {
      background-color: unset;
    }
  }

  @include e(icon) {
    width: var(--xzx-steps-icon-box-size);
    height: var(--xzx-steps-icon-box-size);
    font-size: var(--xzx-steps-icon-size);
    background-color: var(--xzx-steps-color-active);
    display: flex;
    flex-shrink: 0;
    border-radius: var(--xzx-br-circle);
    color: var(--xzx-steps-text-color-active);
    font-weight: var(--xzx-text-w-b);
    justify-content: center;
    align-items: center;

    @include e(dot) {
      width: var(--xzx-steps-simple-dot-size);
      height: var(--xzx-steps-simple-dot-size);
      border-radius: var(--xzx-br-circle);
      border: 1px solid var(--xzx-steps-text-color-active);
      box-sizing: border-box;
      flex-shrink: 0;
    }

    @include when(custom) {
      --xzx-steps-icon-size: var(--xzx-text-md);
      background-color: unset;
    }

    @include e('inner') {
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--xzx-steps-line-active);
        z-index: 1;
      }
    }
  }

  @include e(title) {
    font-size: var(--xzx-text-sm);
    line-height: var(--xzx-text-lh-sm);
    margin-top: var(--xzx-steps-line-margin-size);
    color: var(--xzx-steps-text-color-active);
  }

  @include e(extra) {
    font-size: var(--xzx-text-mini);
    line-height: var(--xzx-text-mini);
    margin-top: calc(var(--xzx-steps-line-margin-size) / 2);
    color: var(--xzx-text-gray-3);
    min-height: var(--xzx-steps-content-min-height);
  }

  @include when(process) {
    --xzx-steps-color-active: var(--xzx-steps-color-primary);
    --xzx-steps-text-color-active: var(--xzx-steps-color-primary);
    @include e(icon) {
      color: var(--xzx-white-1);
      @include when(custom) {
        color: var(--xzx-steps-color-primary);
      }
    }
    @include e(dot) {
      background-color: var(--xzx-steps-color-primary);
    }
    @include e(title) {
      font-weight: var(--xzx-text-w-sb);
    }
  }

  @include when(finish) {
    --xzx-steps-color-active: var(--xzx-steps-color-primary-light);
    --xzx-steps-line-active: var(--xzx-steps-color-primary);
    --xzx-steps-text-color-active: var(--xzx-steps-color-primary);
    @include e(title) {
      color: var(--xzx-text-gray-1);
    }
  }

  @include when(error) {
    --xzx-steps-color-primary-light: var(--xzx-error-1);
    --xzx-steps-color-primary: var(--xzx-color-danger);
    --xzx-steps-color-active: var(--xzx-steps-color-primary-light);
    --xzx-steps-text-color-active: var(--xzx-steps-color-primary);
    @include e(title) {
      font-weight: var(--xzx-text-w-sb);
    }
    @include e(dot) {
      background-color: var(--xzx-steps-color-primary);
    }
  }

  @include e(wrapper) {
    display: flex;
  }
}