/* <ad-dialog>: inline content before enhancement, a modal with a scrim after. */
ad-dialog {
  display: block;
}

/* Without JavaScript the trigger has nothing to do, so it is not shown. */
ad-dialog:not([data-enhanced]) > [data-dialog-open] {
  display: none;
}

ad-dialog:not([data-enhanced]) > dialog[open] {
  position: static;
  inline-size: auto;
  max-inline-size: var(--measure);
  margin: 0;
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  color: var(--text);
}

ad-dialog[data-enhanced] > dialog {
  inline-size: min(100% - 2 * var(--gutter), 36rem);
  max-block-size: min(100% - 2 * var(--gutter), 90svh);
  margin: auto;
  padding: var(--space-l);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  overscroll-behavior: contain;
}

ad-dialog[data-enhanced] > dialog::backdrop {
  background: oklch(10% 0.02 190 / 0.6);
  backdrop-filter: blur(3px);
}

ad-dialog > dialog > * + * {
  margin-block-start: var(--space-s);
}

ad-dialog > dialog h2,
ad-dialog > dialog h3 {
  margin-inline-end: var(--space-xl);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
}

@media (prefers-reduced-motion: no-preference) {
  ad-dialog[data-enhanced] > dialog[open] {
    animation: dialog-in var(--duration-base) var(--ease-out);
  }

  ad-dialog[data-enhanced] > dialog[open]::backdrop {
    animation: backdrop-in var(--duration-base) var(--ease-out);
  }

  @keyframes dialog-in {
    from {
      translate: 0 1rem;
      scale: 0.98;
    }
  }

  @keyframes backdrop-in {
    from {
      opacity: 0;
    }
  }
}