.cg-navigation:not(.cg-nav-mobile) {
    /* search popup modal */
    dialog.cg-search-form-container {
        position: fixed;
        width: 100vw;
        height: var(--wp--custom--nav-search-popup-height, 140px);
        padding: 0 2rem;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        left: 0;
        right: 0;
        bottom: auto;
        border: var(--wp--custom--nav-submenu-border-style, none);
        box-shadow: var(--wp--custom--nav-submenu-box-shadow, none);
        transition: all 0.4s ease-in-out;

        &[is-hidden="false"] {
            max-height: var(--wp--custom--nav-search-popup-height, 140px);
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        form {
            margin: 0 auto;
            width: 100%;
            max-width: 1024px;
            height: fit-content;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            gap: 2rem;
        }

        input.cg-block-search__input {
            padding: 0.5rem 1rem;
        }
    }
}