dialog.modal-widget-animated[open] {
    animation: 200ms ease-out 0s 1 normal forwards  running  dialog_opactity_transition;
}

dialog.modal-widget-animated[open] > * {
    animation: 200ms ease-out 0s 1 normal forwards  running  transfrom_content_transition;
    transform: translateY(20px);
}

dialog.modal-widget-animated[open]::backdrop {
    animation: 200ms ease-out 0s 1 normal forwards  running  backdrop_transition;
}

@keyframes backdrop_transition {
    0% {
        backdrop-filter: blur(0px);
        opacity: 0;
    }
    100% {
        backdrop-filter: blur(12px);
        opacity: 1;
    }
}

@keyframes dialog_opactity_transition {
    0%, 99% {
        overflow: initial;
    }
    100% {
        overflow: hidden;
    }
}

@keyframes transfrom_content_transition {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}