/* Prevent scrolling while dialog is open */
body.overflow-hidden {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

/* Add animations */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

dialog[open] {
  animation: fade-in 200ms ease-out forwards;
}

dialog[closing] {
  animation: fade-out 200ms ease-in forwards;
}

dialog::backdrop {
  animation: fade-in 200ms ease-out forwards;
}