.dialog {
  background-color: var(--color-surface);
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  inline-size: var(--size-full);
  margin: auto;
  max-inline-size: calc(100% - var(--size-8));
  padding: 0;

  /* Opened as a popover rather than with showModal(), so popovertarget can
     open and close it with no script at all. The UA gives popovers their own
     scroll box, which would clip a combobox's dropdown inside the dialog. */
  overflow: visible;

  &::backdrop {
    backdrop-filter: var(--blur-xs);
  }

  /* Setup transition */
  transition-behavior: allow-discrete;
  transition-duration: var(--time-200);
  transition-property: display, overlay, opacity, transform;
  transition-timing-function: var(--ease-out-3);

  &::backdrop {
    transition-behavior: allow-discrete;
    transition-duration: var(--time-150);
    transition-property: display, overlay, opacity;
    transition-timing-function: var(--ease-out-3);
  }

  /* Exit stage to */
  & { opacity: 0; transform: var(--dialog-from, var(--scale-95)); }
  &::backdrop { opacity: 0; }

  /* On stage */
  &:popover-open { opacity: 1; transform: var(--scale-100); }
  &:popover-open::backdrop { opacity: 1; }

  /* Enter stage from */
  @starting-style {
    &:popover-open { opacity: 0; transform: var(--dialog-from, var(--scale-95)); }
    &:popover-open::backdrop { opacity: 0; }
  }

  @supports (-webkit-hyphens: none) {
    transition-behavior: normal;
  }

  /* On phones it takes the whole screen. A sheet sized to its content jumps
     around as the keyboard opens and the combobox grows; a full screen doesn't.
     It fades rather than slides: the popover focuses its autofocus field the
     moment it opens, and iOS scrolls the page to wherever that field is mid-slide
     — off the bottom of the screen — leaving it out of view once it lands. */
  @media (width < 40rem) {
    --dialog-from: none;

    block-size: var(--size-full);
    border-radius: 0;
    box-shadow: none;
    inset: 0;
    margin: 0;
    max-block-size: none;
    max-inline-size: none;
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
  }

  @media (prefers-reduced-motion: reduce) {
    --dialog-from: none;
  }

  @media (width >= 40rem) {
    max-inline-size: var(--dialog-size, var(--max-i-sm));
  }
}

.dialog__content {
  padding: var(--size-4);
}