.modal-base-enter-active .modal-document,.modal-base-leave-active .modal-document{transition:transform .3s,opacity .3s}.modal-base-enter-active .modal-bg-wrapper,.modal-base-leave-active .modal-bg-wrapper{transition:background-color .3s}.modal-right .modal-document{--translate-from:100%}.modal-left .modal-document{--translate-from:-100%}.modal-base-enter-from .modal-document,.modal-base-leave-to .modal-document{opacity:0;transform:translate(var(--translate-from))}.modal-base-enter-to .modal-document{opacity:1;transform:translate(0)}.modal-base-enter-from .modal-bg-wrapper,.modal-base-leave-to .modal-bg-wrapper{background-color:rgb(var(--c-neutrals-20))}@supports (color:color-mix(in lab,red,red)){.modal-base-enter-from .modal-bg-wrapper,.modal-base-leave-to .modal-bg-wrapper{background-color:color-mix(in oklab,rgb(var(--c-neutrals-20)) 0%,transparent)}}.modal-base-enter-to .modal-bg-wrapper,.modal-base-leave-from .modal-bg-wrapper{background-color:rgb(var(--c-neutrals-20))}@supports (color:color-mix(in lab,red,red)){.modal-base-enter-to .modal-bg-wrapper,.modal-base-leave-from .modal-bg-wrapper{background-color:color-mix(in oklab,rgb(var(--c-neutrals-20)) 80%,transparent)}}