/*
 * A modal prompt. Rendered `open` by the server it flows inline as plain content, so it works
 * without JavaScript; shown with showModal() it becomes a centred card over a dimmed page.
 *
 * <dialog class="dialog" open aria-labelledby="…">
 *   <h3 class="dialog__title">…</h3>
 *   …
 *   <form method="dialog" class="dialog__close"><button class="btn btn--ghost">…</button></form>
 * </dialog>
 */
@layer components {
  [data-theme] {
    .dialog {
      position: static;
      width: auto;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;

      &[open] {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
      }

      &:modal {
        position: fixed;
        width: calc(100% - 2 * var(--space-4));
        max-width: 28rem;
        max-height: calc(100dvh - 2 * var(--space-4));
        margin: auto;
        padding: var(--space-5);
        overflow: auto;
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-card);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
        color: var(--color-text);
      }

      &::backdrop {
        background: var(--color-overlay);
      }

      /* Inline there is nothing to dismiss, and closing would hide the form. */
      &:not(:modal) .dialog__title,
      &:not(:modal) .dialog__close {
        display: none;
      }
    }

    .dialog__title {
      font-size: var(--title-3);
      text-align: center;
    }

    @media (min-width: 40rem) {
      .dialog:modal {
        padding: var(--space-6);
      }
    }
  }
}