.primary-nav {

    .js-filter-hide {
        display: none !important;
    }

    .js-filter-show {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-bottom: 0;
    }

    //menu layout changes when user types in search input
    .js-list-active {
        ul {
            // padding-left: 1rem !important;
            display: flex !important;
            flex-direction: column;

            .nav-hidden-container {
                display: flex !important;
                height: unset !important;
                flex-direction: column;
            }

            .nav-show-more {
                display: none !important;
            }

            ul {
                // padding-left: 1rem !important;
                display: flex !important;
                height: unset !important;
            }
        }

        // ul::before {
        //     content: none !important;
        // }

        // li.active:not(open)::before {
        //     content: none !important;
        // }

        a {
            // padding-left: 0.625rem; //10px

            // i,
            // svg {
            //     display: none;
            // }
        }

        .nav-item {
            a {
                // padding-left: 0.625rem; //10px 0.625rem

                // i,
                // svg {
                //     display: none;
                // }
            }
        }

        .collapse-sign {
            display: none;
        }

        .nav-title {
            //margin-top: 1rem;
            color: var(--bs-link-color);
            //background: var(--bs-link-color);
            font-weight: 600;
        }
    }

}


.nav-filter-msg {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 2rem;
    color: var(--bs-white) !important;


    &:hover {
        background: var(--bs-danger) !important;

        i {
            width: 0.84375rem; //13.5px
        }
    }
}

#searchInput {
    border-style: dashed;
    font-size: 0.875rem;
    line-height: 1.5rem;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.07);

    --bs-secondary-color: var(--input-placeholder-color);

    &:focus {
        background-color: rgba(var(--bs-primary-rgb), 0.03);
    }
}

#js-nav-menu:has(li:not(.js-filter-hide))+.no-results-msg {
    display: none;
}

// why not just move it to the area where the slider is? makes more sense... 
// .set-nav-fixed.set-header-fixed,
// .set-nav-fixed.set-nav-full {
//     .app-menu-filter-container {
//         position: relative;
//         z-index: 10;

//         &::before {
//             content: "";
//             position: absolute;
//             bottom: -5px;
//             left: 0;
//             right: 0;
//             height: 5px;
//             z-index: 11;
//             background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%);
//         }
//     }
// }