.main-navigation {
	clear: both;
	display: block;
	padding: 1em 0;

	& > div {
		float: right;
	}

	&.toggled ul {
		display: block;
	}

	ul {
		clear: both;
		list-style: none;
		margin: 0;
		padding-left: 0;
		text-align: left;

		ul {
			float: left;
			position: absolute;
			left: -999em;
			z-index: 99999;
			-webkit-transition: opacity 0.5s ease-in-out;
			-moz-transition:    opacity 0.5s ease-in-out;
			transition:         opacity 0.5s ease-in-out;

			li {
				clear: both;
				float: none;
			}

			a {
				display: block;
				font-size: 30px;
				line-height: 1.25;
				padding: 1.5rem 1rem 0;
				width: 100%;
			}
		}

		li.toggled-on > ul {
			left: inherit;
			right: 0;
			width: 100vw;
			opacity: 1;
		}
	}

	li {
		float: left;

		&.menu-item-has-children > a,
		&.page_item_has_children > a {
			padding-right: .25rem;
		}
	}

	a {
		display: inline-block;
		padding: .5em;
	}

	.current_page_item > a,
	.current-menu-item > a,
	.current_page_ancestor > a,
	.current-menu-ancestor > a {
		text-decoration: underline;
	}

	@at-root .main-navigation > div > ul > li.menu-item-has-children.toggled-on > a {
		text-decoration: underline;
	}

	@at-root .main-navigation > div > ul > li.page_item_has_children.toggled-on > a {
		text-decoration: underline;
	}

	.dropdown-toggle {
		background: transparent;
		border: none;
		padding: .25rem 0;



		&:focus,
		&:hover {
			outline: none;
		}
	}

	.icon {
		position: relative;
		top: .25rem;
		padding: .25rem;
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		border-radius: 50%;
		transition: all 0.25s ease-in-out;
	}

	/**
	 * Colors
	 */
	a,
	.dropdown-toggle {
		color: $color__background-body;

		.white & {
			color: $color__theme-link;
		}

		.black & {
			color: $color__background-body;
		}
	}

	.dropdown-toggle:focus .icon,
	.dropdown-toggle:hover .icon {
		background-color: $color__background-body;
		color: $color__theme-link;

		.white & {
			background-color: $color__theme-link;
			color: $color__background-body;
		}

		.black & {
			color: $color__theme-link;
		}
	}

	ul ul {
		background: $color__theme-link;
		a {
			color: $color__background-body;
		}

		.white & {
			background: $color__background-body;
			a {
				color: $color__theme-link;
			}
		}

		.grey & {
			background: $color__theme-secondary;
			a {
				color: $color__background-body;
			}
		}

		.black & {
			background: $color__theme-link;
			a {
				color: $color__background-body;
			}
		}
	}
}

/* Hide more link unless we need it. */
#more-menu {

	display: none;

	&.visible {
		display: inline-block;
	}

	.dropdown-toggle {
		display: inline-block;
	}

	.icon {
		vertical-align: text-bottom;
		margin-left: .25rem;
	}

	.sub-menu,
	.children {

		& > li {
			clear: both;
			float: none;
		}

		a {
			position: relative;
			z-index: 1;
		}

		.dropdown-toggle {
			display: none;
		}

		.children {
			box-shadow: none;
			right: inherit;
			left: 0;
			padding-left: 1rem;
			position: relative;
			top: inherit;
		}
	}
}

/* Small menu. */
.menu-toggle {
	display: none;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	#more-menu .sub-menu .sub-menu {
		padding-left: .5rem;
	}

	.main-navigation {

		li {
			float: left;
			position: relative;
		}

		ul li.toggled-on > ul {
			left: inherit;
			width: inherit;
		}

		.dropdown-toggle {
			display: inline-block;
		}

		ul ul {

			ul {
				left: auto;
				opacity: 1;
				padding-left: .5rem;
				position: relative;
			}

			.dropdown-toggle {
				display: none;
			}

			li {
				float: left;
				clear: inherit;
				min-width: 200px;

				&:last-of-type > a {
					padding-bottom: .5rem;
				}
			}

			a {
				font-size: 1rem;
				padding: .5rem .5rem 0;
				width: auto;
			}

			.dropdown-toggle {
				float: right;
				margin-left: -30px;
				padding: .5rem;
			}
		}

		/**
		 * Colors
		 */
		a,
		.dropdown-toggle {
			color: $color__background-body;
		}

		ul ul {
			background: $color__background-body;
			a,
			.dropdown-toggle {
				color: $color__theme-primary;
			}

			.white & {
				background: $color__theme-link;
				a,
				.dropdown-toggle {
					color: $color__background-body;
				}
			}

			.grey & {
				background: $color__background-body;
				a,
				.dropdown-toggle {
					color: $color__theme-secondary;
				}
			}

			.black & {
				background: $color__background-body;
				a,
				.dropdown-toggle {
					color: $color__theme-link;
				}
			}
		}
	}
}
