/* Animation for popover fade-in, and slide-down */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    translate: 0 -1em;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* Animation for backdrop fade-in */
@keyframes backdropFadeIn {
  from {
    background-color: rgb(0 0 0 / 0);
  }
  to {
    background-color: rgb(0 0 0 / .5);
  }
}
/* Add backdrop in case reduced-motion is requested */
dialog::backdrop {
  background-color: rgb(0 0 0 / .5);
}
/* Apply both animations */
@media (prefers-reduced-motion: no-preference) { /* Be nice to others */
  dialog {
      animation: dialogFadeIn 250ms ease-in forwards;
      &::backdrop {
        animation: backdropFadeIn 250ms ease-in forwards;
    }
  }
}