/* Styles for src/components/wizard-steps.js and nothing else. */

.wizard-steps { display: flex; gap: var(--s-3); list-style: none; padding: 0; margin: 0 0 var(--s-3); flex-wrap: wrap; }
.wizard-steps__step { display: flex; align-items: center; gap: 4px; color: var(--c-text-gray); margin: 0; }
.wizard-steps__num {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  border: 1px solid var(--c-button-border);
  background: var(--c-window);
}
.wizard-steps__step--current { color: var(--c-text); font-weight: 600; }
.wizard-steps__step--current .wizard-steps__num { background: var(--c-highlight); color: var(--c-highlight-text); border-color: var(--c-highlight); }
.wizard-steps__step--done { color: var(--c-success); }
.wizard-steps__step--done .wizard-steps__num { color: var(--c-success); }