:root :where(.search-modal) {
    pointer-events: none;
    border: none;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    max-width: unset;
    padding: 0;
}

:root :where(.admin-bar .search-modal) {
    top: 32px;
}

:root :where(.search-modal[open]) {
    background-color: rgba(255, 255, 255, 0.95);
    pointer-events: inherit;
    animation: show-search-modal 0.25s ease normal;
    padding: 0;
    padding-block: 2rem;
}

:root .search-modal[open]::backdrop {
    background-color: transparent;
}

.search-modal :where(.region) {
    max-width: 75rem;
    border-bottom: 2px solid var(--color-brand-dark-blue);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-modal :where(.search-label) {
    color: var(--color-brand-dark-blue);
    margin-bottom: 1rem;
}

.search-modal :where(.ais-SearchBox-form) {
    display: flex;
    align-items: center;
}

.search-modal :where(.ais-SearchBox-input) {
    width: 100%;
    padding: 0.25rem 0.5rem;
    background-color: #efefef;
    border: none;
    color: var(--color-brand-dark-blue);
    font-size: 2.8rem;
}

.search-modal :where(.ais-SearchBox-input::placeholder) {
    font-style: italic;
}

.search-modal :where(.ais-SearchBox-input:focus) {
    outline: none;
}

.search-modal :where(.region:has(.ais-SearchBox-input:focus-visible)) {
    outline: solid 2px var(--color-brand-dark-blue);
    border-bottom: none;
}

.search-modal :where(.ais-SearchBox-submit, .ais-SearchBox-reset) {
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
    background: none;
}

:root :where(.search-modal.hide) {
    animation: hide-search-modal 0.25s ease normal;
}

:root :where(.search-modal.hide::backdrop) {
    animation: hide-search-modal 0.25s ease normal;
}


@keyframes show-search-modal {
    from {
        top: -100%;
    }
    to {
        top: 0;
    }
}

@keyframes hide-search-modal {
    from {
        top: 0;
    }
    to {
        top: -100%;
    }
}

@keyframes show-search-modal-mobile {
    from {
        top: -100%;
    }
    to {
        top: 15rem;
    }
}

@keyframes hide-search-modal-mobile {
    from {
        top: 15rem;
    }
    to {
        top: -100%;
    }
}

@media screen and (width <= 75em) {
    .search-modal :where(.region) {
        max-width: 90dvw;
    }

    :root :where(.search-modal[open]) {
        animation: show-search-modal-mobile 0.25s ease normal;
    }

    :root :where(.hide-search-modal-mobile.hide) {
        animation: hide-search-modal 0.25s ease normal;
    }

    :root :where(.hide-search-modal-mobile.hide::backdrop) {
        animation: hide-search-modal 0.25s ease normal;
    }
}