@use '../../internals/Box/styles/index' as box;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;

//
// Steps
// --------------------------------------------------
.rs-steps {
  --rs-steps-icon-size: 1.875rem;
  --rs-steps-icon-font-size: var(--rs-font-size-md);
  --rs-steps-title-font-size: var(--rs-font-size-md);
  --rs-steps-title-line-height: calc(30 / 16);
  --rs-steps-title-min-height: 1rem;
  --rs-steps-item-spacing: calc(var(--rs-spacing) * 10);
  --rs-steps-description-margin-top: calc(var(--rs-spacing) * 3);
  --rs-steps-description-font-size: var(--rs-font-size-sm);
  --rs-steps-description-line-height: var(--rs-line-height-md);

  // Small
  &[data-size='small'] {
    --rs-steps-icon-size: 1.5rem;
    --rs-steps-icon-font-size: var(--rs-font-size-sm);
    --rs-steps-item-spacing: calc(var(--rs-spacing) * 8.5);
    --rs-steps-title-font-size: var(--rs-font-size-sm);
    --rs-steps-title-line-height: calc(24 / 14);
    --rs-steps-description-font-size: var(--rs-font-size-xs);
    --rs-steps-description-line-height: var(--rs-line-height-sm);
  }

  min-height: var(--rs-steps-icon-size);

  // Item content
  // --------------------------
  .rs-steps-item-content {
    color: var(--rs-text-secondary);
    display: inline-block;
    // Change static to relative, Make `z-index` more than Tail line
    position: relative;
    width: 100%;
  }

  .rs-steps-item[data-status='process'] .rs-steps-item-content {
    color: var(--rs-text-primary);
  }

  .rs-steps-item[data-status='error'] .rs-steps-item-content {
    color: var(--rs-text-error);
  }

  // Item title
  .rs-steps-item-title {
    position: relative;
    font-size: var(--rs-steps-title-font-size);
    line-height: var(--rs-steps-title-line-height);
    min-height: var(--rs-steps-title-min-height);
    padding-inline-end: calc(var(--rs-spacing) * 2.5);

    display: inline-block;

    &:empty {
      padding-inline-end: 0;
    }
  }

  // Item description
  .rs-steps-item-description {
    margin-top: var(--rs-steps-description-margin-top);
    font-size: var(--rs-steps-description-font-size);
    line-height: var(--rs-steps-description-line-height);
  }
}

// Item
// --------------------------
.rs-steps-item {
  padding-inline-start: var(--rs-steps-item-spacing);
  position: relative;
  overflow: hidden;
}

// Item icon
.rs-steps-item-icon-wrapper {
  width: var(--rs-steps-icon-size);
  height: var(--rs-steps-icon-size);
  font-size: var(--rs-steps-icon-font-size);
  color: var(--rs-text-secondary);
  text-align: center;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--rs-steps-border);
  border-radius: var(--rs-radius-full);

  // Finish status show check mark.
  .rs-steps-item:where([data-status='finish']) & {
    border-color: var(--rs-steps-state-finish);
    color: var(--rs-steps-state-finish);
  }

  // Error status show X mark.
  .rs-steps-item:where([data-status='error']) & {
    border-color: var(--rs-steps-state-error);
    color: var(--rs-steps-state-error);
  }

  .rs-steps-item:where([data-status='process']) & {
    border-color: var(--rs-steps-state-process);
    background-color: var(--rs-steps-state-process);
    color: var(--rs-text-inverse);

    .rs-icon,
    svg {
      color: var(--rs-steps-icon-state-process);
    }
  }

  .rs-steps-item[data-custom-icon='true'] & {
    border: none;
    background: none;
  }

  // Icon content
  > .rs-steps-item-icon {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;

    .rs-icon {
      font-size: var(--rs-font-size-md);
      vertical-align: middle;
    }
  }
}

.rs-steps-item-tail,
.rs-steps-item-title::after {
  position: absolute;
  border-color: var(--rs-steps-border);

  .rs-steps-item:where([data-status='process']) & {
    border-color: var(--rs-steps-border);
  }

  .rs-steps-item:where([data-status='finish']) & {
    border-color: var(--rs-steps-state-finish);
  }

  .rs-steps-item[data-next-error='true'] & {
    border-color: var(--rs-steps-border-state-error);
  }
}

// Horizontal
.rs-steps[data-direction='horizontal'] {
  display: flex;
  justify-content: space-between;

  .rs-steps-item {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: var(--rs-steps-icon-size);

    // The last node is self-adaptive width.
    &:last-child {
      flex-grow: 0;
      flex-shrink: 0;

      // The last item hidden tail line
      .rs-steps-item-title::after {
        display: none;
      }
    }

    // There is a 10px spacing between each item.
    &:not(:first-child) {
      padding-inline-start: calc(var(--rs-steps-icon-size) + var(--rs-spacing) * 5);

      .rs-steps-item-icon-wrapper {
        inset-inline-start: calc(var(--rs-spacing) * 2.5);
      }
    }
  }

  .rs-steps-item-title {
    &::after {
      content: '';
      top: calc(var(--rs-steps-icon-size) / 2);
      inset-inline-start: 100%;
      width: 9999px;
      border-top-width: 1px;
      border-top-style: solid;
    }
  }
}

// Vertical
.rs-steps[data-direction='vertical'] {
  .rs-steps-item {
    padding-bottom: calc(var(--rs-spacing) * 5);

    // There is a 10px spacing between each item.
    &:not(:first-child) {
      margin-top: calc(var(--rs-spacing) * 2.5);
    }

    &:last-child .rs-steps-item-tail {
      display: none;
    }
  }

  .rs-steps-item-tail {
    top: var(--rs-steps-item-spacing);
    bottom: 0;
    inset-inline-start: calc(var(--rs-steps-icon-size) / 2);
    border-left-width: 1px;
    border-left-style: solid;
  }
}