// 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-up{
	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;
}

.user-menu{
	.avatar{
		height: 20px;
		width: 20px;
		display: inline-block;
		vertical-align: middle;
		margin-top: -3px;
		margin-right: 3px;
	}
	.user-menu-username{
		vertical-align: middle;
	}
}
// ------------------------------------ Top Nav Layout ------------------------------------ //

.top-nav{
	.header{
		height: 60px;
		padding: 0 20px;
		margin-bottom:$grid-margin;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		@include small{
			padding: 0 10px;
		}
		.header-submodule{
			flex-shrink: 0;
	    margin-right: 20px;
		  &:last-of-type{
	  	  margin-right: 0px;
	  	}
		}
		.primary-nav, .secondary-nav, .logo{
			flex-basis: 0;
			flex-grow: 1;
		}
		.primary-nav{
			order: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.secondary-nav{
			// background: rebeccapurple;
			order: 3;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.logo{
			// background: pink;
			text-align:center;
			color:white;
			order: 2;
			.logo-text{
				@include small{
					font-size: 18px;
					a{
						position: static;
					}
				}
				@include medium-large{
					font-size:24px;
				}
			}
		}
		.logo-image{
			line-height: 1;
			a{
				display:inline-block;
				background: no-repeat center center;
				font: 0/0 a;
				text-shadow: none;
				color: transparent;
			}
		}
	}
}
// ------------------------------------ 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;
			display: flex;
			flex-direction:column;
			justify-content: space-between;
		}
		.logo{
			text-align: left;
			&.logo-image{
				text-align: center;
				a{
					margin: 0 auto;
				}
			}
			@include medium-large{
				margin-bottom: 15px;
			}
		}
		// .header-module{
		// 	margin-bottom: 15px;
		// 	&:last-of-type{
		// 		margin-bottom: 0px;
		// 	}
		// }
		.primary-nav{
			flex-grow: 2;
			display: flex;
			flex-direction: column;
			margin-bottom: 15px;
			.header-submodule{
				margin-bottom: 20px;
			}
		}
		.secondary-nav{
			.header-submodule{
				margin-bottom: 10px;
				&:last-of-type{
					margin-bottom: 0;
				}
			}
		}
		.search{
			order: 1;
		}
		.categories-menu-wrapper{
			order: 2;
		}
		.menu-label{
			display: block;
		}
		.menu-description{
			// display: block;
			display: none;
			font-weight: normal;
		}
		.signin-signup{
			text-align: center;
		}
		.account-link{
		}
	}
	.tagline{
		margin-top: 10px;
	}
	.menu{
	}
	.menu.menu-expanded{
	}
}

// ---------------------------------------- Mobile ---------------------------------------- //

@include small{
	.header{
		display: flex;
		align-items: center;
		justify-content: center;
	}
}