@use '../variables.scss' as var;
@use '../utils/mediaQueries.scss' as media;
@use '../placeholder/list.scss' as placeList;

@mixin SnMenu($bp: l, $menu-class: '.SnMenu') {
    #{$menu-class} {
        @media print {
            display: none;
        }

        @include media.from($bp) {
            display: flex;
        }
    }

    // Layout general en mobile
    #{$menu-class} {
        li ul {
            display: none;
            // opacity: 0;
            // max-height: 0;
            // overflow: hidden;
        }
    }

    // Layout general en Desktop
    #{$menu-class} {
        li {
            @include media.from($bp) {
                position: relative;
            }
        }

        li ul {
            @include media.from($bp) {
                position: absolute;
                z-index: 400
            }
        }

        li {
            @include media.from($bp) {
                &:hover {
                    &>ul {
                        display: block;
                        // opacity: 1;
                        // max-height: 1000px;
                        // overflow: visible;
                    }
                }
            }
        }

        &>li>ul>li ul {
            @include media.from($bp) {
                right: 100%;
                top: 0;
            }
        }
    }

    // Mostrar los submenus en mobil
    // Agregar la calse desde javascript
    #{$menu-class} {
        .is-show {
            display: block;
            // max-height: 1000px;
        }
    }


    // ------------------------
    // MENU STYLES
    #{$menu-class} {
        @extend %SnList;

        li ul {
            @extend %SnList;
        }
    }

    #{$menu-class} {
        a {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .toggle {
                display: block;
                padding: 0 8px;
            }
        }
    }

    // TOGGLE MENU IN MOBILE
    #{$menu-class}-toggle {
        @include media.from($bp) {
            display: none
        }

        @media print {
            display: none;
        }

        cursor: pointer;
    }
}