.dialog-root {
    display: contents;
}

.dialog-root button * {
    pointer-events: NONE;
}

.dialog-root button {
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.dialog-root dialog {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100dvh;
}

.dialog-root dialog::backdrop {
    background-color: var(--backdrop, rgba(0, 0, 0, 0.1));
    cursor: pointer;
}


dialog {
  transition: all var(--animation-duration, 0.3s) ease-out, display var(--animation-duration, 0.3s) allow-discrete, overlay var(--animation-duration, 0.3s) allow-discrete;
}


dialog[data-animation-in="Scale In Bottom"][open] {
  translate: 0 0;
  scale: 1;
  @starting-style { translate: 0 10vh; scale: 0.9; }
} 
    /* Exit */
dialog[data-animation-out="Scale Out Bottom"]:not([open]) {
      translate: 0 10vh;
      scale: 0.9;
}

dialog[data-animation-in="Scale In Top"][open] {
  translate: 0 0;
  scale: 1;
  @starting-style { translate: 0 -10vh; scale: 0.9; }
} 
    /* Exit */
dialog[data-animation-out="Scale Out Top"]:not([open]) {
      translate: 0 -10vh;
      scale: 0.9;
}

dialog[data-animation-in="Scale In Left"][open] {
  translate: 0 0;
  scale: 1;
  @starting-style { translate: -10vh 0; scale: 0.9; }
} 
    /* Exit */
dialog[data-animation-out="Scale Out Left"]:not([open]) {
      translate: -10vh 0;
      scale: 0.9;
}

dialog[data-animation-in="Scale In Right"][open] {
  translate: 0 0;
  scale: 1;
  @starting-style { translate: 10vh 0; scale: 0.9; }
} 
    /* Exit */
dialog[data-animation-out="Scale Out Right"]:not([open]) {
      translate: 10vh 0;
      scale: 0.9;
}

dialog[data-animation-in="Fade In"][open] {
    opacity: 1;
    @starting-style { opacity: 0; }
} 

    /* Exit */
dialog[data-animation-out="Fade Out"]:not([open]) {
    opacity: 0;
}

dialog[data-animation-in="Blur In"][open] {
    opacity: 1;
    filter: blur(0px);
  @starting-style { opacity: 0; filter: blur(100px); }
} 
    /* Exit */
dialog[data-animation-out="Blur Out"]:not([open]) {
    opacity: 0; 
    filter: blur(100px);
}