Form ProgressBLK

/* -- 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; }

  }

}