.cg-navigation {
    /* base search popup styling */
    .cg-block-navigation__search {
        input.cg-block-search__input {
            ::-webkit-search-decoration,
            ::-webkit-search-cancel-button,
            ::-webkit-search-results-button,
            ::-webkit-search-results-decoration {
                -webkit-appearance: none;
            }
        }

        button.cg-search-button {
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            color: inherit;

            &:not(.text)::before {
                display: inline-block;
                width: var(--wp--custom--nav-search-popup-button-width, 1.75rem);
                height: var(--wp--custom--nav-search-popup-button-height, 1.75rem);
                margin: 0;
                padding: 0;
                background: var(--wp--custom--nav-search-popup-button-icon, url('../../images/icon-search-big.svg'));
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                content: "";
            }

            &.cg-close-search-button:not(.text)::before,
            &[aria-expanded='true']:not(.text)::before {
                background-image: var(--wp--custom--nav-search-popup-button-close-icon, url('../../images/icon-search-close.svg'));
            }
        }

        button.cg-close-search-button {
            position: fixed;
            top: 0;
            left: 100%;
        }
    }
}