@layer components {
  .stepper {
    --step-roundel-size: 26px;
    --step-roundel-half-size: calc(var(--step-roundel-size) / 2);
    counter-reset: steps;
    position: relative;
  }

  .stepper ol {
    display: flex;
    justify-content: left;
    gap: 2rem;
    position: relative;
    flex-wrap: wrap;
  }

  .stepper li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    counter-increment: steps;
  }

  .stepper li::before {
    content: counter(steps);
    display: grid;
    place-content: center;
    width: var(--step-roundel-size);
    height: var(--step-roundel-size);
    margin: 0 auto;
    background: var(--color-brand-primary);
    color: var(--color-content-on-dark);
    font-size: var(--text-sm);
    font-weight: 400;
  }

  .stepper li[aria-current="step"] ~ li::before {
    background: var(--color-surface-dark-high);
    color: var(--color-content-on-dark);
  }

  .stepper li[aria-current="step"] ~ li .stepper__step-text {
    color: var(--color-content-on-light-faded);
  }

  .stepper__step-link {
    color: var(--color-brand-primary);
    display: inline-block;
    text-decoration: underline;
    text-transform: none;
    margin-top: 0;

    &:hover {
      text-decoration: none;
    }
  }

  .stepper__step-text {
    display: inline-block;
    text-decoration: none;
    color: var(--color-brand-primary);
    text-transform: none;
    margin-top: 0;
  }
}