@keyframes slide-in {
    from {
        margin-left: 100%;
        margin-right: -100%;
    }
    to {
        margin-left: 0;
        margin-right: 0;
    }
}

@keyframes slide-out {
    from {
        margin-left: 0;
        margin-right: 0;
    }
    to {
        margin-left: 100%;
        margin-right: -100%;
    }
}

.modal-stack .modal-stackable.slide-out {
    animation: slide-out 500ms ease-in;
}

.modal-stack .modal-stackable {
    animation: slide-in 500ms ease-out;
}

.modal-stack .modal-stackable .modal-stackable-wrapper {
    transition: margin-left 500ms, margin-right 500ms;
}

.modal-stack *.modal-stackable:last-of-type .modal-stackable-wrapper {
    margin-left: 7.5rem;
    margin-right: 0;
    z-index: 1030;
}

.modal-stack *.modal-stackable .modal-stackable-wrapper, .modal-stack .modal-stackable.has-modal-child > .modal-stackable-wrapper {
    margin-left: 0;
    margin-right: 7.5rem;
    z-index: 1025;
}

.modal-stack *.modal-stackable:last-of-type:not(.has-modal-child)::before {
    background-color: rgba(0, 0, 0, 0.4);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1; 
}