[data-modal-transition][hidden] {
  display: none;
}

[data-modal-transition] {
  --modal-transition-duration: 240ms;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-transition-duration) ease;
}

[data-modal-transition].modal-is-open {
  opacity: 1;
  pointer-events: auto;
}

[data-modal-transition-backdrop] {
  opacity: 0;
  transition: opacity var(--modal-transition-duration) ease;
}

[data-modal-transition] [data-modal-transition-backdrop] {
  position: fixed;
  top: calc(0px - env(safe-area-inset-top, 0px));
  right: calc(0px - env(safe-area-inset-right, 0px));
  bottom: calc(0px - env(safe-area-inset-bottom, 0px));
  left: calc(0px - env(safe-area-inset-left, 0px));
}

[data-modal-transition].modal-is-open [data-modal-transition-backdrop] {
  opacity: 1;
}

[data-modal-transition-panel] {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity var(--modal-transition-duration) ease,
    transform var(--modal-transition-duration) cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: opacity, transform;
}

[data-modal-transition].modal-is-open [data-modal-transition-panel] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-modal-transition],
  [data-modal-transition-backdrop],
  [data-modal-transition-panel] {
    transition: none;
  }

  [data-modal-transition-panel] {
    transform: none;
  }
}