dialog {
  transition: all 0.3s ease-out allow-discrete;
  transform: translateY(-100%);
  visibility: hidden;
  opacity: 0;
  outline: none;
  border: none;
}

dialog[open] {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

dialog::backdrop {
  transition: all 0.3s ease-out allow-discrete;
  background: #00000066;
  backdrop-filter: blur(20px);
  opacity: 0;
}

dialog[open]::backdrop {
  opacity: 1;
}

dialog:focus {
  outline: none;
}

dialog:focus-visible {
  outline: none !important;
}