/* Wizard steps of the design system (/design-system#steps), in px like the status scale so a wide screen does not swell them. */
.ds-steps {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-steps__step {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;

  /* A step never shrinks below its dot and name; only the bar gives up room. */
  &:has(.ds-steps__bar) { flex: 1 1 0; }
  &.is-done { color: var(--ds-text-secondary); }
  &[aria-current="step"] { color: var(--ds-text); }
}

.ds-steps__bar {
  flex: 1 1 1rem;
  min-inline-size: 1rem;
  block-size: 2px;
  border-radius: 1px;
  background: var(--ds-border);

  :is(.is-done, [aria-current="step"]) > & { background: var(--ds-cta); }
}

.ds-steps__dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--ds-hover);
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;

  .is-done > & { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
  [aria-current="step"] > & { background: var(--ds-cta); color: var(--ds-on-cta); }
}

/* On a phone only the current step keeps its name on screen; the others still read out. */
@media (max-width: 40rem) {
  .ds-steps__step:not([aria-current="step"]) .ds-steps__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}