// Font-awsome arrow icons
$nav-down: '\f107';
$nav-right: '\f105';

$dropdown-bg: $accent1;
$dropdown-color: contrasted($accent1);
$dropdown-bg-hover: $accent2;
$dropdown-color-hover: contrasted($accent2);
$menu-block-bg: $accent2;

// Styles
div#primary-navigation {
    /* =Desktop Navigation Styles
    -------------------------------------------------------------- */
    /* =Initial Desktop Styles, Dropdowns are controled lower
    /* =All paddings & borders applied to the a tag will descend
    /* =to lower a tags.
    -------------------------------------------------------------- */
    > ul {
        text-align: center;
        font-size: 0;
        > li {
            display: inline-block;
            font-size: 17px;
            a {
                padding: 8px 15px;
                color: $base;
                text-decoration: none;
            }
            &.current-menu-item > a,
            &.current-menu-parent > a,
            &.current-menu-ancestor > a,
            > a:hover, &:hover > a {
                color: $accent2;
            }
        }
        .sub-menu {
            text-align: left;
            box-shadow: 0px 12px 46px -3px rgba(#000000, 0.5);
        }
    }
    /* =Mobile Navigation Styles
    -------------------------------------------------------------- */
    @include bp($nav-breakpoint) {
        ul {
            max-width: 300px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            font-size: 1rem;
            background-color: #1c1c1c;
            @include bp(500px) {
                width: 100%;
                max-width: 100%;
            }
            li {
                border-bottom: 1px solid #252525;
                a {
                    text-align: center;
                    padding: 5px 16px;
                    @include bp(500px) {
                        width: 100%;
                        max-width: 100%;
                        text-align: left;
                        padding: 10px 0 10px 50px;
                    }
                }
                &.current-menu-item > a,
                &.current-menu-parent > a,
                &.current-menu-ancestor > a,
                > a:hover, &:hover > a {
                    color: $accent11;
                }
                &:last-child {
                    border-bottom: none;
                }
            }
            /* =Reset desktop drop down centering
            -------------------------------------------------------------- */
            .sub-menu {
                box-shadow: none;
                a {
                    padding: 5px 16px;
                }
            }
        }
    }
    // Hamburger Icon
    a#primary-navigation-toggle {
        color: #000;
        padding: 6px 20px;
        font-size: 24px;
        text-align: center;
        i {
            font-size: 29px;
        }
        // "Menu" block
        span {
            background: $menu-block-bg;
            color: contrasted($menu-block-bg);
            vertical-align: text-top;
            &:hover {
                background: $accent3;
            }
        }
    }
    // Desktop Level 1
    // Mobile Level 2
    ul ul {
        text-align: left;
        background: $dropdown-bg;
        a {
            color: $dropdown-color;
            padding: 10px 20px;
        }
        li:hover > a {
            color: $dropdown-color-hover;
            background: $dropdown-bg-hover;
        }
        li.current-menu-item,
        li.current-menu-parent,
        li.current-menu-ancestor {
           a {
                color: $dropdown-color;
                background: darken($dropdown-bg, 2%);
                &:hover {
                    color: $dropdown-color-hover;
                    background: darken($dropdown-bg-hover, 3%);
                }
            } 
        }
    }
    // Desktop Level 2
    // Mobile Level 3
    ul ul ul {
        background: darken($dropdown-bg, 4%);
        a {
            color: $dropdown-color;
        }
        li:hover > a {
            color: $dropdown-color-hover;
            background: darken($dropdown-bg-hover, 5%);
        }
        li.current-menu-item, li.current-menu-parent, li.current-menu-ancestor {
           a {
                color: $dropdown-color;
                background: darken($dropdown-bg, 20%);
                &:hover {
                    color: $dropdown-color-hover;
                    background: darken($dropdown-bg-hover, 25%);
                }
            } 
        }
    }
    // Desktop Level 3
    // Mobile Level 4
    ul ul ul ul {
        background: darken($dropdown-bg, 25%);
        a {
            color: $dropdown-color;
            &:hover {
                color: $dropdown-color-hover;
                background: darken($dropdown-bg-hover, 30%);
            }
        }
        li.current-menu-item, li.current-menu-parent, li.current-menu-ancestor {
           a {
                color: $dropdown-color;
                background: darken($dropdown-bg, 30%);
                &:hover {
                    color: $dropdown-color-hover;
                    background: darken($dropdown-bg-hover, 35%);
                }
            } 
        }
    }
}
/* =Navigation Icons ** Do Not Modify **
-------------------------------------------------------------- */
div#primary-navigation li.menu-item-has-children > a:after {
    content: $nav-down;
}
div#primary-navigation li li.menu-item-has-children > a:after {
    content: $nav-right;
}
@include bp($nav-breakpoint) {
    div#primary-navigation li li.menu-item-has-children > a:after {
        content: $nav-down;
    }
}