.modals-layer {
    position: fixed;
    inset: 0;
    z-index: var(--dialog-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.modals-layer > * {
    pointer-events: auto;
}

.modals-backdrop {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
}

.modals-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

.dxSafari .modals-backdrop,
.dxFirefox .modals-backdrop {
    backdrop-filter: none;
    background: rgba(21, 30, 44, 0.5);
}

.dxChrome .modals-backdrop {
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.5);
}

@keyframes modal-close-out {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: scale(0.88) translateY(-20px);
        filter: blur(10px);
    }
}

.modal-closing {
    animation: modal-close-out 280ms cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes modal-expand-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
}

::view-transition-group(modal-expand) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

::view-transition-old(modal-expand) {
    display: none;
}

::view-transition-new(modal-expand) {
    animation: modal-expand-in 220ms cubic-bezier(0, 0, 0.2, 1) both;
}

::view-transition-group(morph) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(morph) {
    width: var(--from-w, auto);
    height: var(--from-h, auto);
    transform-origin: var(--origin-x, top) var(--origin-y, left);
    animation: morph-out 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

::view-transition-new(morph) {
    width: var(--to-w, auto);
    height: var(--to-h, auto);
    transform-origin: var(--origin-x, top) var(--origin-y, left);
    animation: morph-in 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes morph-out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(calc(var(--to-w-px) / var(--from-w-px)), calc(var(--to-h-px) / var(--from-h-px)));
        opacity: 0;
    }
}

@keyframes morph-in {
    from {
        transform: scale(calc(var(--from-w-px) / var(--to-w-px)), calc(var(--from-h-px) / var(--to-h-px)));
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

::view-transition-group(modal-dialog) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(modal-dialog),
::view-transition-new(modal-dialog) {
    mix-blend-mode: plus-lighter;
}