/* A quiet entrance and exit, while the native dialog keeps focus contained. */
#content-dialog {
  opacity: 0;
  transform: translateY(10px) scale(.99);
  transform-origin: 50% 45%;
  transition: opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}

#content-dialog::backdrop {
  opacity: 0;
  transition: opacity 360ms ease;
}

#content-dialog.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#content-dialog.is-visible::backdrop {
  opacity: 1;
}

#content-dialog.is-closing {
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition-duration: 240ms;
  transition-timing-function: ease-in;
}

#content-dialog.is-closing::backdrop {
  transition-duration: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  #content-dialog,
  #content-dialog::backdrop {
    opacity: 1;
    transform: none;
    transition: none;
  }
}