.modal { 
    --br: .4rem; 
    --p: 2rem; 
    --backdrop-clr: rgba(0,0,0,.45); 
    
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 2rem; background-color: var(--backdrop-clr); display: none; justify-content: center; align-items: center; transition: opacity var(--ts-duration) ease-in-out; z-index: 1090; 

    .modal-dialog { display: flex; flex-direction: column; border-radius: var(--br); width: 100%; height: auto; max-height: 80vh; transform: translateY(5rem); transition: transform var(--ts-25) ease; background-color: #fff; overflow: hidden; 
        .modal-dialog__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); background-color: #fff; font-family: inherit; 
            .modal-title { font-size: 2rem; margin: 0; } 
        }    
        .modal-dialog__body { background-color: #fff; padding: var(--p); overflow-y: auto; overflow-x: hidden; }
        .modal-dialog__footer { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--p); z-index: 2; margin-top: auto; }
    }
    
    &.show { display: flex; opacity: 1; pointer-events: all; 
        .modal-dialog { transform: translateY(0); }
    }

    /* Modal variations */
    &.modal--small .modal-dialog { max-width: 60rem; max-height: 60rem; }
    &.modal--large .modal-dialog { max-width: 100rem; max-height: 60rem; }

    &.modal--search { pointer-events: none;
        .modal-dialog { max-height: 100%; pointer-events: all; }
        .modal-dialog__header { padding-bottom: 0; background: var(--clr-porcelain); }
        .modal-dialog__body { flex-grow: 1; background: var(--clr-porcelain); display: flex; flex-direction: column; overflow: hidden;
            .wux-search-form { display: flex; flex-direction: column; flex-grow: 1; height: 100%;
                .wux-search-form__input { margin-bottom: 2rem; }
                [type="search"] { padding-left: 4rem!important; }
                .wux-search-form__results { display: none;
                    .meili-search-results { display: flex; flex-direction: column; overflow-y: auto; padding: 0; }
                    .meili-search-results-footer { background: transparent; padding: 2rem 0 0 0; border: none; }

                    .is-active.shows-results & { display: flex; }
                }
                .wux-search-form__history { display: none;
                    .searches { flex-grow: 1; overflow-y: auto; padding: 0;}

                    .is-active.shows-history & { display: flex; }
                }
                .wux-search-form__results, .wux-search-form__history { position: static; flex-direction: column; flex-grow: 1; overflow-y: hidden; background: transparent; box-shadow: none; }
            
            }
        }
    }
}

@media (max-width: 575.98px) {
    .modal.modal--fullscreen { padding: 0;
        .modal-dialog { height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
        .container { padding-inline: 0; height: 100%; }
    }
}

@media (min-width: 768px) {
    .modal {
        &.modal--search .modal-dialog__body .wux-search-form .wux-search-form__results .meili-search-results { max-height: 60dvh; }
    }
}

@media (min-width: 992px) {
    .modal { --p: 3.2rem; }
}