breadcrumb-the-shire/web/css/components/app-dialog.css

/**
 * app-dialog.css
 * Base dialog styles shared by all dialog variants (confirm, bookmark, session-warning).
 * Handles footer layout, button sizing, header close button, and mobile fallback.
 * Variant-specific styles live in their own component files (app-confirm-dialog.css, etc.).
 */
@layer components {
  /* ── Size tiers ────────────────────────────────────────────────────────
   * Fixed-width tiers so every dialog of the same purpose feels consistent.
   * Apply one of these classes to the <article> inside <dialog>.
   *   sm (24rem) — simple prompts, confirmations, alerts
   *   md (32rem) — form dialogs with 1-3 fields, pickers
   *   lg (40rem) — complex forms, multi-section dialogs
   * min() ensures graceful shrink on narrow viewports.
   * ──────────────────────────────────────────────────────────────────── */
  dialog > article.app-dialog-sm { width: min(24rem, calc(100vw - 2rem)); }
  dialog > article.app-dialog-md { width: min(32rem, calc(100vw - 2rem)); }
  dialog > article.app-dialog-lg { width: min(40rem, calc(100vw - 2rem)); }

  /* ── Footer layout ───────────────────────────────────────────────────── */
  dialog > article > footer,
  dialog > article form > footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* ── Footer buttons: auto-width, no margin ───────────────────────────── */
  dialog > article > footer [role="button"],
  dialog > article > footer button,
  dialog > article form > footer [role="button"],
  dialog > article form > footer button {
    width: auto;
    margin: 0;
  }

  /* ── Header: title flush, close button positioned ────────────────────── */
  dialog > article > header > * {
    margin-bottom: 0;
  }

  dialog > article > header .close,
  dialog > article > header :is(a, button)[rel="prev"] {
    margin: 0;
    margin-left: var(--app-spacing);
    padding: 0;
    float: right;
  }

  /* ── Close icon ──────────────────────────────────────────────────────── */
  dialog > article .close,
  dialog > article :is(a, button)[rel="prev"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    width: 2rem;
    height: 2rem;
    margin-top: calc(var(--app-spacing) * -0.5);
    margin-bottom: var(--app-spacing);
    margin-left: auto;
    border: none;
    border-radius: var(--app-border-radius);
    background-image: var(--app-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
    transition:
      opacity var(--app-transition),
      background var(--app-transition);
  }

  dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
  dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
  }

  dialog > article .close:hover,
  dialog > article :is(a, button)[rel="prev"]:hover {
    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
  }

  dialog > article .close:focus-visible,
  dialog > article :is(a, button)[rel="prev"]:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
    opacity: 1;
  }

  /* ── Mobile: stack buttons vertically ────────────────────────────────── */
  @media (max-width: 576px) {
    dialog > article > footer,
    dialog > article form > footer {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    dialog > article > footer button,
    dialog > article form > footer button {
      width: 100%;
    }
  }
}