@if map-get($pluginVars, enabled) {
	@at-root #{$namespace} {

		#main-navigation {
			position: fixed;
			z-index: 1;
			top: 0;
			bottom: 0;
			left: 0;
			background: map-gets($vars, navigation, background);
			width: map-gets($vars, navigation, width);
			padding-top: map-gets($vars, topOffset) + lui_rem(1.5em);
			box-sizing: border-box;

			border: none;

			// Text and links coloring
			&, a {
				color: lighten(map-gets($vars, navigation, background), 35);
			}
		}

		#main-navigation .mobile-toggle {
			position: relative;
			display: none;
			padding: #{map-gets($vars, navigation, mobile-toggle, vertical-padding)} lui_rem(luiTheme(reference, breakpoints, mobile, spacing));
			background-color: map-gets($vars, navigation, mobile-toggle, background);
			color: map-gets($vars, navigation, mobile-toggle, color);
			font-size: map-gets($vars, navigation, mobile-toggle, font-size);
			font-weight: map-gets($vars, navigation, mobile-toggle, font-weight);

			text-decoration: none;

			@include lui_make_icon("south arrow", right);

			&:after {
				position: absolute;
				right: luiTheme(reference, breakpoints, mobile, spacing);
				font-size: map-gets($vars, navigation, mobile-toggle, arrow-size);
			}

			&:hover {
				background-color: lighten(map-gets($vars, navigation, mobile-toggle, background), 5);
			}
			&:active {
				background-color: darken(map-gets($vars, navigation, mobile-toggle, background), 5);
			}
		}

		// Menu item
		#main-navigation a.item {
			text-align: center;
			transition-property: background-color, color;
			transition-duration: 150ms;
			transition-timing-function: ease-out;
			overflow: hidden;
			width: map-gets($vars, navigation, width);
			box-sizing: border-box;
			padding-left: 0;
			padding-right: 0;

			&:before {
				margin-left: 0;
			}

			// Hover and active states
			&:hover, &:active {
				background: darken(map-gets($vars, navigation, background), 1);
				color: #FFF;
			}

			&.active {
				background: luiPalette(primary, color);
				color: luiPalette(primary, text);
			}
			// Item icon
			> i.icon {
				position: relative;
				font-size: map-gets($vars, navigation, iconSize);
				display: block;
				margin-bottom: 0.5em;
			}

			// Item title
			> span.item-name {
				font-size: map-gets($vars, navigation, fontSize);
				font-weight: map-gets($vars, navigation, fontWeight);
			}

			// Updates / Todo styling
			span.item-updates {
				display: none;

				position: absolute;
				top: map-gets($vars, navigation, iconSize) + 0.15em;
				right: 1em;
			}
			&.has-updates span.item-updates {
				display: block;
			}
		}

		#main-navigation.with-navigation-arrow a.item {
			&:after {
				right: -#{lui_rem(1)};
				opacity: 1;
				transition-property: right, opacity;
				transition-duration: 200ms;
				transition-delay: 150ms;
				transition-timing-function: ease-out;
			}

			&.active {
				&:after {
					@include lui_points_towards(left, map-gets($vars, appBackground), lui_rem(0.75));
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		// Mobile version
		@include lui_screens_smaller_than(tablet) {
			#main-header {
				left: 0;
				padding-top: 1em;
			}
			#main-navigation {
				background: transparent;
				position: relative !important;
				left: 0; right: 0; bottom: auto;
				z-index: 100;
				width: 100%;
				height: auto;
				padding-top: map-gets($vars, topOffset);

				.mobile-toggle {
					display: block;
				}

				a.item {
					width: 100%;
					opacity: 1;
					background-color: map-gets($vars, appBackground);
					color: luiTheme(element, typography, body, color);
					border-bottom: 1px solid luiTheme(element, divider, color);

					&:before,
					&:after {
						display: none !important;
					}

					&:not(.active):hover {
						background-color: transparentize(luiPalette(primary, color), 0.75);
						color: luiTheme(element, typography, body, color);
					}
					&:not(.active):active {
						background-color: transparentize(luiPalette(primary, color), 0.5);
					}

					&.active {
						background-color: transparentize(luiPalette(primary, color), 0.75);
					}
				}

				a.item span.item-name,
				a.item i.icon {
					display: inline-block;
					vertical-align: middle;
				}
				a.item i.icon {
					margin-bottom: 0;
					margin-right: lui_rem(0.5);
				}
				a.item.has-updates span.item-updates {
					display: inline-block;
					position: relative;
					float: none;
					top: auto; left: auto; right: auto;
				}

				// Dropped state
				.item { display: none; }
				&.dropped {
					height: 100vh;
					overflow-x: hidden;
					overflow-y: auto;
					background-color: map-gets($vars, appBackground);

					a.item {
						display: block;
					}
				}
			}
		}
	}
}