.nav--main {
	text-align: center;
	color: $dark;
	border-top: rem(3px) solid $light;
	position: relative;
	z-index: 100;
	background: white;

	@include query-above($lap) {
		transform: none !important;
	}

	.menu-item:hover > a,
	.page_item:hover > a {
		color: $accent;
	}

	li.hover {
		> a {
			color: $accent;
		}
	}

	li:hover, li.hover {
		> .sub-menu, > .children {
			display: block;
		}
	}

	& > .menu-item-has-children:hover > a,
	& > .page_item_has_children:hover > a,
	& > .menu-item-has-children.hover > a,
	& > .page_item_has_children.hover > a {
		position: relative;

		&:before {
			content: "";
			position: absolute;
			z-index: 9999;
			top: 100%;
			left: 50%;
			width: rem(10px);
			height: rem(10px);
			margin-top: rem(-5px);
			transform: rotate(45deg);
			background: white;
			border-left: 1px solid $borders;
			border-top: 1px solid $borders;
		}
	}
}

.button-toggle {
	background: none;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding-left: rem(20px);
	padding-right: rem(20px);

	z-index: 20;

	.nav--is-open & {
		background-color: white !important;
	}

	.button-icon {
		font-size: rem(20px);
	}

	@include query-above($lap) {
		display: none;
	}


	&:focus {
		outline: 1px dotted $gray;

		.nav-icon {
			&, &:before, &:after {
				background-color: $accent;
			}
		}
	}

	.nav--is-open &:focus .nav-icon {
		background: transparent;
	}
}

.button-toggle--search {
	left: auto;
	right: rem(12px);
	top: rem(12px);
	height: auto;

	border: 1px solid $borders;
	border-radius: 50%;

	padding: rem(4px) rem(10px);

	.button-icon {
		font-size: rem(16px);
	}
}

.nav-icon {
	position: relative;
	top: 2px;
	right: inherit;
	display: block;
	width: 20px;
	height: 3px;

	background: $dark;

	border-radius: 2.5rem;
	transition: all .3s;

	&:after, &:before {
		display: block;
		content: "";
		height: 3px;
		width: 100%;
		background: $dark;
		position: absolute;
		z-index: -1;
		transition: all .3s;
	}

	&:after {
		top: -7px;
	}

	&:before {
		top: 7px;
	}

	.nav--is-open & {
		background:transparent;

		&:after{
			transform: rotate(45deg);
			top: 0;
		}

		&:before{
			transform: rotate(-45deg);
			top: 0;
		}
	}
}

.main-navigation, .nav--main {
	top: 0;
	// @include admin-bar();
}

@include query-below($lap) {

	.main-navigation {
		text-align: left;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 110;
		width: 100%;
		height: rem(60px);
		border-bottom: 1px solid $borders;
		background: white;

		.is--ancient-android .nav--is-open &{
			left: 70%;
		}

		.admin-bar & {
			position: absolute;
			top: 46px;
		}

		&.fixed {
			position: fixed;
			top: 0;
		}
	}

	.nav--main {
		position: fixed;
		right: 100%;
		left: auto;
		bottom: 0;

		width: 70%;
		display: none;
		padding: 0 rem(40px) 0 rem(30px);

		border-top: 0;
		border-right: 1px solid $borders;

		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		.menu-item--home {
			display: none !important;
		}

		.is--ancient-android .nav--is-open &{
			left: 0 !important;
			right: auto !important;
		}

		li, ul > li {
			text-align: left;
			display: block;
			width: 100%;
			overflow: hidden;

			> a {
				display: block;
				padding: rem(20px) 0;
			}

			&, > a {
				&:before {
					display: none;
				}
			}

			ul {
				background: white;
				display: block;

				@include query-above($lap) {
					padding-left: 2em;
				}
			}
		}

		li {
			border-bottom: 1px solid $borders;
		}

		.sub-menu, .children {
			padding-left: rem(12px);
			padding-bottom: rem(10px);
			min-width: 0;

			a {
				padding: rem(10px) 0;
			}

			li:first-child > a {
				padding-top: 0;
			}
		}

		a {
			padding-right: rem(40px) !important;
			display: inline-block !important;
			width: auto;
		}

		.sub-menu, .children {
			display: none;
		}

		ul ul ul {
			padding-left: 0;
		}


		ul ul ul ul {
			padding-left: 0;
		}
	}

	.nav--toolbar--left_wrapper, .nav--toolbar--right_wrapper {
		line-height: normal;

		ul > li {
			width: auto;
			display: inline-block;

			&.menu-item a {
				padding-left: 0;
				padding-right: rem(20px);
			}

			a:before {
				display: inline-block;
			}
		}

	}

	.nav--toolbar--right_wrapper ul{
		float: none;
	}

	ul.nav--dropdown {
		margin-left: 0;
	}
}

@include query-above($lap) {
	li.nav--toolbar--left_wrapper,
	li.nav--toolbar--right_wrapper,
	li.nav-dropdown_wrapper {
		display: none;
	}
}


.nav--main {

	.sub-menu, .children {
		@extend %sub-menu;
		color: $dark;
		background: white;


		@include query-above($lap) {
			text-align: center;
			font-size: rem(12px);
			border: 1px solid $borders;
			padding: rhythm(1/2) rhythm(1);

			.menu-item, .page_item {
				border-bottom: 1px solid $borders;
			}
		}

		> .menu-item-has-children > a:after,
		> .page_item_has_children > a:after {
			border-top-color: transparent;
			border-left-color: currentColor;
			border-width: rem(3px) rem(4px);
			right: 0;
			top: 50%;
			margin-top: rem(-4px);
		}

		li:last-child {
			border-bottom: 0;
		}
	}

	.menu-item, .page_item {
		position: relative;

		&:hover,
		&.hover {
			z-index: 10;
		}
	}

	a {
		@extend %delta;

		@include query-above($lap) {
			display: inline-block;
			padding: rhythm(1) rhythm(1.5);
		}
	}

	.menu-item-has-children > a,
	.page_item_has_children > a {
		@extend %dropdown-arrow;
	}
}


// When there is no main menu selected, a default menu drops in
// the actual menu ( <ul/> ) is inside a wrapper div.nav.nav--main
div.nav.nav--main > ul {
	display: none;
	opacity: 0;

	transition: .2s linear opacity;

	&.is--visible {
		display: block;
		opacity: 1;
	}
}