/**
 * 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 {
  /* ── 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: block;
    width: 1rem;
    height: 1rem;
    margin-top: calc(var(--app-spacing) * -1);
    margin-bottom: var(--app-spacing);
    margin-left: auto;
    border: none;
    background-image: var(--app-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
    transition: opacity 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;
  }

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