xshop/resources/views/segments/menu/SarvMenu/SarvMenu.scss

#sarv-toggle {
    display: none;
}

.SarvMenu {

    top: -150px;
    transition: 400ms;
    background: var(--sarv-bg);
    color: var(--sarv-color);

    a {
        color: var(--sarv-color);
    }

    .omg-search {
    }

    .mobile-search {
        position: relative;
        top: -1rem;
        display: none;
    }

    .form-control {
        margin-top: 1rem;
        padding: 0;

        input {
            border: 0;
            background: #dddddd00;
            width: calc(100% - 35px);
            outline: none;
            padding: .35rem 1rem;
            margin-bottom: -5px;
            position: relative;
            top: -5px;
        }

        i {
            font-size: 25px;
            margin: 5px;
        }
    }

    .sarv-row {
        position: relative;
        display: grid;
        grid-template-columns: 2fr 20fr 8fr;
        grid-gap: 1rem;

        img {
            max-width: 100%;
        }


        .sarv-btn-container {
            display: grid;
            grid-gap: .5rem;
            grid-template-columns: 5fr 2fr;
            padding: 1rem 0;
        }

        .btn {
            font-size: 15px;
            border-color: var(--sarv-color);
        }

        nav {
            > ul {
                display: flex;
                align-items: center;
                justify-content: start;
                flex-direction: row;
                padding: 0;
                margin: 0;
                list-style: none;

                > li {
                    transition: 400ms;
                    padding: 1rem 1rem .5rem 1rem;
                    border-bottom: 2px transparent solid;
                }
            }

        }

        .sub-menu {
            padding-bottom: 1rem;
            position: absolute;
            background: var(--sarv-bg);
            top: 90%;
            left: 0;
            right: 0;
            z-index: 99;
            column-count: 4;
            border-radius: var(--xshop-border-radius);
            font-size: 14px;
            max-height: 0;
            transition: 500ms;
            transition-delay: .3s;
            opacity: 0;

            ul {
                padding: 0 1rem;
                list-style: none;

                ul {
                    li {
                        padding: .25rem .5rem;
                        position: relative;

                        &:before {
                            position: absolute;
                            inset-inline-start: -.4rem;
                            content: '\EA63';
                            font-family: "remixicon" !important;
                        }
                    }
                }
            }
        }

        li:hover {
            border-bottom-color: var(--sarv-color);

            .sub-menu {
                max-height: 90vh;
                opacity: 1;
                z-index: 999;
            }
        }
    }

    &.fixed {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 555;

        .no-view {
            display: none;
        }

        .mobile-search {
            display: none !important;
        }
    }
}


#sarv-responsive-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    top: 0;
    background: #0d0d0d44;
    backdrop-filter: blur(7px);
    display: none;
    align-items: end;

    nav {
        max-height: 60vh;
        overflow-y: auto;
        width: 100%;
        background: var(--sarv-bg);
        color: var(--sarv-color);

        ul {
            list-style: none;
            padding: 0 !important;
            margin: 0 !important;

            ul{
                background: #00000022;
            }

            li {
                border-top: 1px solid var(--sarv-color);

                a {
                    padding: 1rem;
                    display: block;
                    color: var(--sarv-color);
                }

                i{
                    font-size: 35px;
                    position: relative;
                    top: 5px;
                }
            }
        }
    }

}

/*-1000px width*/
@media (max-width: 1000px) {
    #sarv-toggle {
        display: block;
    }
    .SarvMenu {

        .mobile-search {
            display: block;
        }

        nav, .omg-search, .float-end {
            display: none;
        }

        .sarv-row {
            grid-template-columns: 2fr 1fr 5fr;

            img {
                height: 60px;
            }

            .btn {
                padding: 3px;
            }
        }

        .sarv-btn-container {
            grid-template-columns: 5fr 3fr 2fr !important;
        }
    }

    //#sarv-responsive-menu {
    //    display: flex;
    //}

}

/*-450px width*/
@media (max-width: 450px) {
    .SarvMenu {
        a span {
            display: none;
        }

        .sarv-btn-container {
            grid-template-columns: 3fr 3fr 3fr !important;
        }

        .btn {
            border-color: transparent !important;
        }
    }


}