#{$prefix}-menu-wrapper {
    max-width: 55%;
    flex: 0 0 55%;
    display: flex;
    align-items: center;

    button#menu-icon {
        display: none;
    }

    @include media(mb) {
        max-width: 35%;
        flex: 0 0 35%;

        > nav {
            display: none;
        }

        button#menu-icon {
            display: block;
        }
    }

    /* sub menu */

    nav,
    div#primary-menu {
        > ul {
            >li {
                position: relative;
                .sub-menu,
                .children {
                    position: absolute;
                    background-color: #fff;
                    list-style: none;
                    margin: 0;
                    padding: 20px 0;
                    width: 200px;
                    transition: all .3s;
                    box-shadow: 0 0 10px #00000014;
                    top: 100%;
                    opacity: 0;
                    visibility: hidden;
                    z-index: -1;

                    li {
                        a {
                            color: #000;
                            display: block;
                            padding: 5px 20px;
                            transition: all .3s;
                            margin-bottom: 9px;
                            line-height: 20px;
                            font-size: 14px;
                            &:hover {
                                background-color: #eee;
                                color: $color-primary;
                            }
                            
                        }

                        &:last-child a {
                            margin-bottom: 0;
                        }
                    }

                    .sub-menu,
                    ul.children {
                        left: 100%;
                        top: 0;
                        opacity: 0;
                        visibility: hidden;
                        z-index: -1;
                   }
                }

                
                &:hover ,
               &:focus-within {
                    >.sub-menu {
                        top: 100%;
                        opacity: 1;
                        visibility: visible;
                        z-index: 99;
                    }
                    
                }

                .sub-menu,
                ul.children {
                    li {
                        position: relative;
                        &:hover {
                            >.sub-menu,
                            ul.children {
                                top: 0;
                                opacity: 1;
                                visibility: visible;
                                z-index: 99;
                            } 
                        }
                    }
                }

                &.current-menu-item {
                    a {
                        color: $color-primary;
                    }
                }

                &.menu-item-has-children {
                   > a {
                        display: flex;
                        align-items: center;
                        
                        &:after {
                            content: "\f107";
                            font-family: 'Font Awesome 5 Free';
                            font-weight: 600;
                            margin-left: 8px;
                            top: 3px;
                            position: relative;
                        }
                    }
                    
                }
                
            }
        }
    }

}