%link-parent-indicator {
	border: 1px solid lighten($navigation-background, 6%);
	background: darken($navigation-background, 4%);
	&:hover {
		background: darken($navigation-background, 8%);
	}
}

#g-navigation {
    background: $navigation-background;
    color: $navigation-text-color;
    position: relative;
    z-index: 10001;

    &.g-navigation-light {
	    color: $navigation-background;
	    background: $navigation-text-color;    
	    .g-offsidebar-toggle {
	    	color: fadeout($navigation-background, 20%);
	    }	
	    .g-social a {
            background: $navigation-background;
            color: $navigation-text-color;	    	
	    }
    }

    // Container
    .g-container {
    	position: relative;

        .g-block {
            > .g-content {
                margin: $content-margin 0;
                padding: 0.5rem ($content-margin + $content-padding);
            }
        }

        .g-block:first-child {
            > .g-content {
                margin-left: $content-margin + $content-padding;
                padding-left: 0;
            }
        }

        .g-block:last-child {
            > .g-content {
                margin-right: $content-margin + $content-padding;
                padding-right: 0;
            }
        }
    }

	// OffSidebar Toggle
	.g-offsidebar-toggle {
        position: relative;
		padding-top: 0;
        font-size: 2rem;
        line-height: 2rem;
        height: 32px;
        color: $navigation-text-color;
        @include breakpoint(mobile-only) {
        	display: none;
        }
	}
	.g-offsidebar-toggle-icon {
		cursor: pointer;
	}

	// Menu Styling
	.g-main-nav {
		margin: 0;
		font-family: get-font-family($font-family-title);
		.g-toplevel {

			> li {
				margin: 0 0.5rem;
				@include breakpoint(tablet-range) {
					margin: 0 0.2rem;
				}
				> .g-menu-item-container {
					color: $navigation-text-color;
					padding: 0;
					.g-menu-parent-indicator {
						&:after {
							content: "\f107";
							opacity: 0.75;
						}
					}
					i {
						opacity: 1;
					}
				}
				&:hover, &.active {
					> .g-menu-item-container {
						color: fadeout($navigation-text-color, 35%);
						> .g-selected {
							color: fadeout($navigation-text-color, 35%);
						}
					}
				}
			}
		}

		.g-dropdown {
			background: $base-background;
			border: 1px solid $rule-color;
			border-radius: $border-radius + 1;
			> .g-dropdown-column {
				border: 1px solid transparent;
			}
			a {
				color: $base-text-color;
				&:hover {
					color: $accent-color-1;
				}
			}
			.g-dropdown-column {
				position: relative;
			}
			.g-dropdown {
				margin-left: 20px;
			}
		}

		.g-sublevel {
			> li {
				> .g-menu-item-container {
					font-weight: $font-weight-regular;
					color: $base-text-color;
					border-bottom: 1px solid $rule-color;
					> .g-selected {
						color: $base-text-color;
						border-bottom: 1px solid $rule-color;
					}
				}
				&:last-child {
					> .g-menu-item-container {
						border-bottom: 0 !important;
						> .g-selected {
							border-bottom: 0 !important;
						}
					}
				}

				&:hover, &.active {
					> .g-menu-item-container {
						color: $accent-color-1;
						border-bottom: 1px solid darken($rule-color, 15%);
						> .g-selected {
							color: $accent-color-1;
							border-bottom: 1px solid darken($rule-color, 15%);
						}
					}
				}
				&.g-menu-item-type-particle {
					> .g-menu-item-container {
						border: 0;
					}
					&:hover, &.active {
						> .g-menu-item-container {
							border: 0;
						}
					}
				}

				&.g-menu-item-type-particle {
					&:hover {
						> .g-menu-item-container {
							background: inherit;
						}
					}
				}
			}
		}
	}
	.g-menu-block {
		@include breakpoint(mobile-only) {
			display: none;
		}
	}
	.g-menu-item-subtitle {
		text-transform: lowercase;
		font-size: 0.85rem;
		font-weight: bold;
		opacity: 0.8;
		padding-top: 0;
	}

    // Social
    .g-social {
        line-height: 2rem;

        a {
            color: $navigation-background;
            background: $navigation-text-color;
            width: 1.6rem;
            height: 1.6rem;
            line-height: 1.8rem;
            font-size: 1.1rem;
            vertical-align: bottom;
            &:hover {
                background: $accent-color-1;
            }
        }
		@include breakpoint(mobile-only) {
			text-align: center !important;
		}
    }
}

.g-offcanvas-toggle {
	display: none;
	@include breakpoint(mobile-only) {
		display: block;
	}
}

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