@layer components {
  .rs-stepper {
    --rs-stepper-marker-size: var(--rs-unit-x8);
    display: grid;
    gap: var(--rs-unit-x4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rs-step;
  }

  .rs-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--rs-stepper-marker-size) 1fr;
    gap: var(--rs-unit-x3);
    counter-increment: rs-step;
  }

  .rs-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block-start: var(--rs-stepper-marker-size);
    inset-block-end: calc(var(--rs-unit-x4) * -1);
    inset-inline-start: calc(var(--rs-stepper-marker-size) / 2 - 0.5px);
    inline-size: 1px;
    background: var(--rs-color-border-neutral-faded);
  }

  .rs-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: var(--rs-stepper-marker-size);
    block-size: var(--rs-stepper-marker-size);
    border-radius: var(--rs-radius-circular);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--rs-color-border-neutral-faded);
    color: var(--rs-color-foreground-neutral-faded);
    font-weight: var(--rs-font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .rs-step__marker::before {
    content: counter(rs-step);
  }

  .rs-step[aria-current="step"] .rs-step__marker,
  .rs-step[data-state="complete"] .rs-step__marker {
    background: var(--rs-color-background-primary);
    box-shadow: none;
    color: var(--rs-color-on-background-primary);
  }

  .rs-step[data-state="complete"] .rs-step__marker::before {
    content: "";
    inline-size: var(--rs-unit-x5);
    block-size: var(--rs-unit-x5);
    background: currentcolor;
    mask: var(--rs-icon-check) center / contain no-repeat;
  }
}