// 1. Neutral
// 2. Mobile (+see Base theme for mobile nav)
// 3. Desktop
// 		a. Top Nav
//		b. Side nav

.header{
	background-color:$highlight-color;
	position:relative;
	z-index: 100;
}
.logo{
	line-height: 1;
	text-align: center;
	a, a:visited{
		color:white;
	}
}
.sign-in{
	margin-right: 10px;
}
.nav{
	.top-nav &{
		@extend %vcenter;
	}
	@include cf;
	>li{
			line-height: 2;
			&:last-child{
				margin-right: 0px;
			}
			>a, >div >a{
				color:white;
				font-size:15px;
				font-weight:normal;
			}
		}
}

.has-dropdown .user-menu .dropdown-menu{
  left: auto;
  right: 10px;
}
.has-dropdown .notifications-menu .dropdown-menu{
  left: auto;
  right: 10px;
}
.newsletter-dismiss{
	line-height: 30px !important;
}

// ------------------------------------ Top Nav Layout ------------------------------------ //

.top-nav{
	.header{
		height: 60px;
		padding: 0 20px;
		margin-bottom:$grid-margin;
		@include cf;
		@include small{
			padding: 0 10px;
		}
		.primary-nav{
			float:left;
			z-index: 20;
			position: relative;
		}
		.logo{
			@extend %vcenter;
			position:absolute;
			display:block;
			text-align:center;
			color:white;
			@include small{
				font-size: 18px;
				a{
					position: static;
				}
			}
			@include medium-large{
				font-size:24px;
			}
			left: 0px;
			right: 0px;
		}
		.logo-image{
			line-height: 1;
			a{
				display:inline-block;
				background: no-repeat center center;
				font: 0/0 a;
				text-shadow: none;
				color: transparent;
			}
		}
		.secondary-nav{
			z-index: 20;
			position: relative;
			float:right;
			.submit{
				// background:$red;
				// display:block;
				// padding:0px 10px;
			}
		}
		.header-submodule{
	  	display: inline-block;
	    margin-right: 20px;
		  &:last-child{
	  	  margin-right: 0px;
	  	}
		}
	}
	.pages-menu{
		a{
			font-weight: normal;
			margin-right: 20px;
			&:last-child{
				margin: 0;
			}
		}	
	}
}
// ------------------------------------ Side Nav Layout ------------------------------------ //

$nav-width: 250px;

.side-nav{
  .inner-wrapper{
		@include medium-large{
	    margin-left: $nav-width;
	    padding-top: 10px;
    }
	}
	.header{
		@include medium-large{
			width: $nav-width;
			position: fixed;
			top: 0px;
			bottom: 0px;
			left: 0px;
			height: 100%;
			overflow-y: auto;
			padding-bottom: 30px;
		}
		.logo{
			text-align: left;
			&.logo-image{
				text-align: center;
				a{
					margin: 0 auto;
				}
			}
			@include medium-large{
				margin-bottom: 30px;
			}
		}
		.header-submodule{
			margin-bottom: 30px;
		}
		.primary-nav{
			display: flex;
			flex-direction: column;
		}
		.search{
			order: 1;
		}
		.categories-menu{
			order: 2;
		}
		.menu-label{
			display: block;
		}
		.menu-description{
			// display: block;
			display: none;
			font-weight: normal;
		}
		.account-link{
			display: block;
			font-weight: bold;
		}

		.account-link{
			margin: 10px 0;
		}
	}
	.tagline{
		margin-top: 10px;
	}
	.pages-menu{
		order: 2;
		a{
			display: block;
			margin-bottom: 10px;
			&:last-child{
				margin: 0;
			}
		}	
	}
}