/* -- Form Progress (website · Account & States) ---------------------------
   Shows the current stage and remaining steps of a form - a bar with the step names, numbered steps, segments or one compact line. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-form-progress, .mk-form-progress *, .mk-form-progress ::before, .mk-form-progress ::after) { box-sizing: border-box; }

  .mk-form-progress { container: mk-form-progress / inline-size; display: grid; gap: 0.75rem; width: 100%; max-width: 40rem; }
  .mk-form-progress-status { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & strong { font-weight: 600; }
    & span { color: var(--muted-foreground); }
  }
  .mk-form-progress progress { width: 100%; height: 0.375rem; }
  .mk-form-progress-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & li { display: flex; align-items: center; gap: 0.5rem; }
    & li[data-done] { color: var(--foreground); }
    & li[aria-current] { color: var(--foreground); font-weight: 600; }
  }
  .mk-form-progress-dot { display: none; }

  .mk-form-progress[data-variant="numbered"] {
    & .mk-form-progress-steps li { position: relative; flex-direction: column; gap: 0.5rem; text-align: center; }
    & .mk-form-progress-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background: var(--border); }
    & .mk-form-progress-steps li[data-done]::after { background: var(--primary); }
    & .mk-form-progress-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--border); border-radius: 50%; background: var(--background); font-size: 0.8125rem; font-weight: 600; }
    & .mk-form-progress-dot svg { width: 0.875rem; height: 0.875rem; }
    & [data-done] .mk-form-progress-dot { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    & [aria-current] .mk-form-progress-dot { border-color: var(--primary); color: var(--primary); }
  }

  .mk-form-progress[data-variant="segments"] .mk-form-progress-steps {
    gap: 0.375rem;
    & li { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    & li::before { content: ""; height: 0.375rem; border-radius: 999px; background: var(--muted); }
    & li:is([data-done], [aria-current])::before { background: var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-form-progress[data-variant="segments"] .mk-form-progress-steps li:is([data-done], [aria-current])::before { background: Highlight; }
    .mk-form-progress[data-variant="numbered"] [data-done] .mk-form-progress-dot { background: Highlight; }
  }
}