/*
 * The plugin's dialogs (the option guide, src/Blocks/OptionGuide.php): a `radius.panel` panel over the `scrim`, entering
 * as the overlay role does (`motion.slow`), as the quick view's dialog does. The head holds the title and an icon
 * button to close, styled in the theme as the icon-button role; the body scrolls inside the panel. The dialog has no
 * padding of its own, so a click on it is a click on the backdrop, which closes it.
 */
.lanternwp-dialog {
  box-sizing: border-box;
  inline-size: min(48rem, 100% - 2 * var(--wp--preset--spacing--30));
  max-inline-size: none;
  max-block-size: calc(100dvh - 2 * var(--wp--preset--spacing--30));
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--wp--custom--radius--panel);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  transition:
    opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--easing),
    translate var(--wp--custom--motion--slow) var(--wp--custom--motion--easing);

  @starting-style {
    opacity: 0;
    translate: 0 var(--wp--preset--spacing--40);
  }

  &::backdrop {
    background: var(--wp--custom--color--scrim);
    transition: opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--easing);

    @starting-style {
      opacity: 0;
    }
  }
}

.lanternwp-dialog__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20)
    var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
}

.lanternwp-dialog__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
}

.lanternwp-dialog__close {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--wp--custom--size--icon-button);
  block-size: var(--wp--custom--size--icon-button);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;

  & svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
}

.lanternwp-dialog__body {
  padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);

  & > :first-child {
    margin-block-start: 0;
  }

  & > :last-child {
    margin-block-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lanternwp-dialog,
  .lanternwp-dialog::backdrop {
    transition: none;
  }
}

/*
 * While a modal dialog is open (these, the quick view's), the page under it keeps its place: the wheel or a swipe on
 * the backdrop does not scroll it. No reserved scrollbar room (scrollbar-gutter): where the scrollbar is hidden, the
 * room narrows the page and the page, taller, loses its place.
 */
:root:has(dialog:modal) {
  overflow: hidden;
}