#g-navigation {
    background: $navigation-background;
    color: $navigation-text-color;
    text-align: center;
    position: relative;
    z-index: 2;

    .g-container {
        position: relative;
    }

    a {
        color: lighten($navigation-background, 40%);

        &:hover {
            color: $navigation-text-color;
        }
    }

    .g-social {
        a {
            background: darken($navigation-background, 6%);
            border: none;
            text-decoration: none;
            color: $navigation-text-color;
            transition: background 0.2s;

            &:hover {
                background: lighten($navigation-background, 6%);
            }
        }
    }

    .g-main-nav {
        margin: -($content-padding + $content-margin);
        @include main-nav-colors($navigation-background, $navigation-text-color, $main-background, $main-text-color);

        .g-toplevel {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            -webkit-justify-content: center;
        }
    }

    @include main-nav-indicators($navigation-background, $navigation-text-color);

    .search {
        input {
            color: $main-text-color;
        }
    }
}

.g-main-nav {
    .g-standard {
        .g-dropdown {
            @extend %dropdown-column;
        }
    }

    .g-toplevel {
        font-weight: $font-weight-medium;

        > li {

            > .g-menu-item-container {
                text-decoration: none;
                padding: 1.2rem $content-padding;
            }

            > .g-menu-item-container {
                > .g-menu-item-content {
                    line-height: normal;
                }
            }
        }

        i {
            opacity: 0.6;
        }
    }

    .g-dropdown {
        text-align: left;

        .dir-rtl & {
            text-align: right;
        }
    }

    .g-sublevel {
        > li {
            > .g-menu-item-container {
                padding: ($content-padding + $content-margin)/2 1rem;
            }
        }
    }
}

// Hide on Mobile Menu Breakpoint
@if $menu-hide-on-mobile == 1 {
    @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {
        [data-g-mobile-target] {
            display: none;
            visibility: hidden;
            pointer-events: none;
        }
    }
}

#g-navigation, #g-header {
    .align-left {
        .g-toplevel {
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
        }
    }

    .align-right {
        .g-toplevel {
            justify-content: flex-end;
            -webkit-justify-content: flex-end;
        }
    }
}

// Subtitle
.g-menu-item-subtitle {
    opacity: 0.7;
}

// Nav Overlay
.g-nav-overlay, .g-menu-overlay {
    background: $navigation-overlay;
}

@media print {
    #g-navigation {
        background: #fff !important;
        color: #000 !important;
    }
}
