.navds-stepper {
  --__axc-stepper-circle-size: 1.75rem;
  --__axc-stepper-border-width: 2px;
  --__axc-stepper-line-length: 1rem;

  color: var(--ax-text-accent);
  font-weight: var(--ax-font-weight-bold);
  line-height: 1;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.navds-stepper__item {
  display: grid;
  grid-template-rows:
    [line-1] auto [step-start] var(--__axc-stepper-circle-size)
    [line-2 step-end] auto;
  grid-template-columns: var(--__axc-stepper-circle-size) auto;
  justify-items: flex-start;
  gap: var(--ax-spacing-2);
}

.navds-stepper__line {
  background-color: var(--ax-border-accent);
  width: var(--__axc-stepper-border-width);
  height: 100%;
  min-height: var(--__axc-stepper-line-length);
  justify-self: center;
  grid-column: 1;

  .navds-stepper__item--non-interactive & {
    background-color: var(--ax-border-neutral-strong);
  }
}

/* Line before non-interactive step */
.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
  .navds-stepper__line--2 {
    background-color: var(--ax-border-neutral-strong);
  }
}

.navds-stepper__line--1 {
  grid-row: line-1;
  display: none;
}

.navds-stepper__line--2 {
  grid-row: line-2;

  /* Hide last line under item */
  .navds-stepper__item:last-of-type & {
    display: none;
  }
}

.navds-stepper__step {
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
  gap: var(--ax-spacing-2);
  justify-content: flex-start;
  cursor: pointer;
  padding: var(--__axc-stepper-border-width);
  margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
    var(--__axc-stepper-circle-size);

  &:focus-visible {
    outline: 2px solid var(--ax-border-focus);
    outline-offset: 4px;

    /* Isolate item to make outline show above line--2 */
    isolation: isolate;
  }

  /* Remove last item bottom margin */
  .navds-stepper__item:last-child & {
    margin-bottom: 0;
  }

  &:is(button) {
    appearance: none;
    border: none;
    background-color: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
  }
}

.navds-stepper__circle {
  grid-column: circle;
  display: inline-grid;
  place-items: center;
  width: var(--__axc-stepper-circle-size);
  height: var(--__axc-stepper-circle-size);
  border: var(--__axc-stepper-border-width) solid currentColor;
  border-radius: var(--ax-border-radius-full);
  line-height: 1;
}

.navds-stepper__circle--success {
  background: none;
  font-size: var(--__axc-stepper-circle-size);
}

.navds-stepper__step[data-interactive="true"] {
  color: var(--ax-text-accent);
  border-radius: var(--ax-border-radius-medium);
  text-decoration: none;

  & .navds-stepper__content {
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.05em;
  }

  &:hover,
  &:active {
    & .navds-stepper__content {
      text-decoration-thickness: 0.111em;
    }
  }

  &:hover {
    & .navds-stepper__circle {
      color: var(--ax-text-accent-strong);
    }
  }

  & .navds-stepper__circle {
    color: var(--ax-text-accent);
    border-color: var(--ax-border-accent-strong);
  }

  &[data-active="true"] {
    & .navds-stepper__content {
      color: var(--ax-text-accent-strong);
      text-decoration: none;
    }

    & .navds-stepper__circle {
      color: var(--ax-text-accent-contrast);
      background-color: var(--ax-bg-accent-strong-pressed);
      border-color: var(--ax-bg-accent-strong-pressed);
    }
  }

  &[data-active="false"] {
    &:hover {
      & .navds-stepper__circle {
        background-color: var(--ax-bg-accent-moderate-hoverA);
        border-color: var(--ax-border-accent-strong);
      }
    }
  }
}

.navds-stepper__step[data-interactive="false"] {
  color: var(--ax-text-neutral);
  cursor: default;

  & .navds-stepper__circle {
    color: var(--ax-text-neutral);
    border-color: var(--ax-border-neutral-strong);
  }

  &[data-active="true"] {
    & .navds-stepper__content {
      color: var(--ax-text-neutral-strong);
    }

    & .navds-stepper__circle {
      color: var(--ax-text-neutral-contrast);
      background-color: var(--ax-bg-neutral-strong-pressed);
      border-color: var(--ax-bg-neutral-strong-pressed);
    }
  }
}

.navds-stepper__content {
  min-width: fit-content;
  line-height: 1.5;
  grid-column: content;
  padding-top: 0.035rem;
}

/* Horizontal */
.navds-stepper[data-orientation="horizontal"] {
  display: flex;
  align-items: flex-start;
  text-align: center;

  & .navds-stepper__line {
    height: var(--__axc-stepper-border-width);
    width: 100%;
    min-height: auto;
    grid-row: 1;
    display: block;
    align-self: center;
  }

  & .navds-stepper__line--1 {
    grid-column: line-1;
  }

  & .navds-stepper__line--2 {
    grid-column: line-2;
  }

  & .navds-stepper__item {
    flex: 1 1 100%;
    grid-template-columns:
      [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
      [line-2-start] auto [step-end] 1fr [line-2-end];
    grid-template-rows: var(--__axc-stepper-circle-size) auto;

    &:first-of-type .navds-stepper__line--1,
    &:last-of-type .navds-stepper__line--2 {
      visibility: hidden;
    }
  }

  & .navds-stepper__step {
    grid-row: 1 / -1;
    grid-column: step;
    display: grid;
    grid-template-rows: [circle] var(--__axc-stepper-circle-size) [content] auto;
    grid-template-columns:
      [content-start] auto [circle] var(--__axc-stepper-circle-size)
      [content-end] auto;
    place-items: center center;
    margin-bottom: 0;
  }

  & .navds-stepper__circle {
    grid-row: circle;
    grid-column: 2;
  }

  & .navds-stepper__content {
    grid-row: content;
    grid-column: 1 / -1;
    max-width: 24ch;
  }
}

@media (forced-colors: active) {
  .navds-stepper__circle.navds-stepper__circle {
    border: 0;
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }

  .navds-stepper__line.navds-stepper__line {
    background-color: ButtonText;
  }

  .navds-stepper__step[data-active="true"][data-interactive] {
    .navds-stepper__circle {
      forced-color-adjust: none;
      background-color: highlight;
      color: highlighttext;
    }
  }
}
