// Essential Superfish
.sf-menu {
    &, * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        position: relative;
        display: inline;

        &:hover > ul, &.sfHover > ul {
            display: block;
        }
    }

    ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;

        ul { // Nested UL
            top: 0;
            left: 100%;
        }
    }

    a {
        display: block;
        position: relative;
    }

    a:hover {
        text-decoration: none;
    }
    
    @media (min-width: $screen-md) {
        .mobile-nav-arrow {
            &:before {
                display: none !important;
            }
        }
    }
}

// #departments {
//     display: block !important;
// }

// Freshop Logo
a.department-more-link
,.nav-logo {
    display: none !important;
}

@media (min-width: $screen-md) {
    .page-wrap {
        overflow: hidden;
    }

    .sf-menu.main-menu {
        position: relative;
        margin-bottom:0px;

        // First Level Menu Items
        > li {
            margin: 0 15px 0 15px;
            display: inline-block;
            vertical-align: top;
            position: static;
            -webkit-transition: 0.3s;
                    transition: 0.3s;

            &.current-menu-item,
            &.current-page-parent,
            &.current-page-ancestor {
                overflow: visible;

                > a {
                    color: $main-menu-active-color !important;
                }
            }

            > a {
                padding: $main-menu-root-md-padding;
                line-height: 40px;
                font-size: $main-menu-root-md-font-size;
                color: $main-menu-root-link-color;
                font-weight: $main-menu-root-font-weight;
                text-transform: $main-menu-root-text-transform;
                text-decoration: none;

                &:first-child {
                    padding-left: 0;
                }

                &:hover {
                    color: $main-menu-root-link-hover-color;
                }
            }

            &.sfHover {
                > a {
                    color: $main-menu-root-link-hover-color;
                }
            }

            @media (min-width: $screen-lg) {
                > a {
                    font-size: $main-menu-root-lg-font-size;
                    padding: $main-menu-root-lg-padding;
                }
            }

            &:hover
            , &.sf-hover {
                &:after {
                    display: block !important;
                }
            }
        }

        > li:last-child {
            > a {
                padding-right: 20px;

                &:after {
                    display: none;
                }
            }
        }

        > li {
            &:hover
            , &.sf-hover
            , &.current_page_item {
                > ul {
                    display: block;
                }
            }
        }

        // Left image
        .menu-splash-image {
            position: absolute;
            right: 0px;
            width: 289px;
            height: 198px;
            background-size: 100%;
            background-position: top left;
            background-repeat: no-repeat;
            top: 0;
        }
    }

    @if($menu-menu-type == 'regular'){
        #departments {
            //display: block !important;
        }

        .sf-menu.main-menu {
            position: relative;

            > li:not(.nav-shopping):not(.sf-mega){
                position: relative;
            }

            > li:not(.sf-mega) > ul:not(.sf-mega) {
                display: none;
                white-space: nowrap;
                text-align: center;
                position: absolute;
                z-index: 40;
                margin-left: -20px;
                min-width: 200px;
                background-color: #{$bg-white};
                @include box-shadow( #{$box_shadow} );
                border-radius: 0 0 4px 4px;
                border-top: 6px solid $main-menu-root-link-hover-color;
               
                > li {
                    width: auto;
                    line-height: 40px;
                }

                > li {
                    display: block;
                    position: static;

                    // Second Level Menu Links
                    > a {
                        color: $menu-submenu-link-color !important;
                        text-decoration: none;
                        display: block;
                        padding: 0px 9px 0px 9px;

                        &:hover,
                        &:focus,
                        &:active {
                            background: $menu-submenu-hover-bg;
                        }
                    }
                }
            }

            > li {
                margin: 0 8px 0 8px;

                @media (min-width: $screen-lg-min) {
                    margin: $menu-li-mg-lg;
                }

                &.menu-item-has-children {
                    > a {
                        padding-right: 22px !important;

                        span {
                            &:before {
                                display: block !important;
                                position: absolute;
                                right: 20px;
                                font-size: 15px;
                                top: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    .sf-menu.main-menu.root-menu-only > li > ul,
    li.sf-mega > ul,
    ul.sf-mega {
        background-color: #{$bg-white};
        @include box-shadow( #{$box_shadow} );
        border-radius: 0 0 4px 4px;
        @include column-gap($padding_vert);
        border-top: 6px solid $main-menu-root-link-hover-color;
        vertical-align:top;
        display: none;
        width: 100%;
        position: absolute;
        top: auto;
        padding: $padding_vert $padding_vert 0 $padding_vert;
        @include column-count(3);      
        min-height: 200px;
        text-align: left;

        // Third Level Menu Item
        li {
            display: block;
            position: static;
            padding: 5px;
           /* padding-bottom: 10px;*/
            min-width: 140px;

            -webkit-column-break-inside: avoid; /* Chrome, Safari */
            page-break-inside: avoid;           /* Theoretically FF 20+ */
            break-inside: avoid-column;

            // Third+ Level Menu Links
            a {
                font-family: $font-family-base;
                font-size: 15px;
                padding: 0px;
                color: $main-menu-root-link-color;
                text-decoration: none !important;
            }

            &:hover > a
            , &.sf-hover > a {
                color: $main-menu-root-link-hover-color;
            }
        }

        // Fourth+ level menu
        li ul {
            display: none !important; // SKIN HIDES THIS LEVEL AND DEEPER
        }
    }
}

// @media (min-width: 1300px) {
//     // Main Menu styles
//     .sf-menu.main-menu {

//         // Second Level Menu
//         > li > ul {

//             > li:first-child {
//                 > ul {
//                     left: auto;
//                 }
//             }
//         }
//     }
// } 

.sf-menu.main-menu {
    > li.menu-item-has-children {
        > a {
            span {
                &:before {
                    right: 0px !important;
                }
            }
        }
    }
}