/* scss/Organisms/_Navigation.scss */


header.header, footer.footer, header.header__desktop {
	width: 100%;
	@include box-shadow(0px, 1px, 4px);
	height: 60px;
	background: rgba(255,255,255,1); /* Default white background color for header bar. change this value to customize your header background color. */
	transition: all ease-in-out .5s;

	.header-wrap, .footer-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		padding: 0;
		transition: all ease-in-out .5s;
		height: 100%;


		.logo {
			padding: 0;
			margin: 0;
			max-width: 30%;

			&__item {
				padding: 0 !important;
				margin: 0;
			}
		}


		.logo-block {
			padding-left: 1.5rem; /* change to relative padding needed for logo alignment */

			img {
			    max-height: 60px;
			    height: 100%;
			    max-width: 100%;
			    width: 100%;
			}
		}
	}


		&__mobile {
			width: 100%;
			max-width: 500px;

			 .header-wrap  {
				padding: 0;

				> nav.nav {

					&__primary {
						margin-left: 0;

						> ul {
							> li {
								line-height: 1;
								padding: 0;

								&.user-avatar {
									padding: 0;

									> a, > button {
										cursor: pointer;

										> span.icon {
											 img {
												max-height: 40px;
											}
										}
									}
								}

								&.has-children {
									padding-left: 0.75em;
									padding-right: 0.75em;

									> .sub-nav-dropdown, .sub-nav-dropdown, > ul {
										> span {
											color: $icon-color;
											font-size: 1.1rem;

											&.label {
												font-size: 1.2rem;
												margin-right: .5em;
											}
										}
									}
								}
							}
						}
					} /* End mobile primary menu */


					&__toolbar {
						> ul {
							height: 60px;

							> li {
								border: none;
								padding: 0;

								> a, > button {
									padding-left: 0.75em;
									padding-right: 0.75em;
									cursor: pointer;
								}

								&.has-children, .sub-nav-dropdown {
									.sub-nav-dropdown, > .sub-nav-dropdown, > ul {
										> span {
											&.label {
												font-size: 1.3rem;
											}
										}
									}
								}

							}
						}
					} /* End mobile toolbar menu */
				}
			}
		}


}



header.header {
	&.fixed, &--fixed {  /* should be used with a <div class="header-spacer"> element */
		position: fixed;
		z-index: 5000; /* Adjust to meet z-index needs */
		top: 0;
		left: 0;
		width: 100vw;
	}


	&__desktop {

		.header-wrap {


			 @include tablet {
				nav.nav__primary,
				nav.nav__toolbar {
					display: none;
				}

				.mobile-navigation__toggle {
					display: flex;
				}
			} /* tablet media query */


			 @include mobile {
				nav.nav__primary,
				nav.nav__toolbar {
					display: none;
				}

				.mobile-navigation__toggle {
					display: flex;
				}
			} /* Mobile media query */

			/* Desktop Media Query for Navigation Bar */
			 @include desktop {

				nav.nav__primary,
				nav.nav__toolbar {
					display: flex;
				}

				.mobile-navigation__toggle {
					display: none;
				}


			}	/* Desktop Media Query */


		}
	}
}


.header-spacer {
	position: relative;
	top: 0;
	height: 60px; /* adjust value to height of header navigation */
	display: block;
}

.mobile-navigation__toggle {
	margin-left: auto;
	height: 100%;

		> button, > a {
			appearance: none;
			-webkit-appearance: none;
			border: none;
			padding: 0 2rem;
			background: rgba(255,255,255,1);
			border-radius: 0;
			cursor: pointer;

			&:hover, &:active {
			    @include linear-gradient(to right, rgba($primary-color, 0) 0%, rgba($tertiary-color, 0) 50%, rgba($secondary-color, 0) 100%);
			}
		}
}



nav.nav {
	> ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		min-height: 60px;
    	height: 100%;


		> li {
			display: flex;
			align-items: center;
			flex-direction: row;
			flex-wrap: nowrap;
			cursor: pointer;
			line-height: 1;
			transition: all 0.5s ease-in-out;
			@include linear-gradient(to right, rgba($primary-color, 0) 0%, rgba($tertiary-color, 0) 50%, rgba($secondary-color, 0) 100%);


	     	> a, > button {
				text-decoration: none;
				font-weight: 700;
				text-align: center;
				appearance: none;
				-webkit-appearance: none;
				border: none;
				background: none;
				padding: 0;
				cursor: pointer;


				> span.icon {
					margin: 0 auto;
					text-align: center;

					> img {
						max-height: 20px;
						width: 100%;
					}
				}


				> span.label {
					margin: 0 auto;
					text-align: center;
					color: $tertiary-color-2;
					font-size: 0.7rem;
				}

			}

		}


	}


		&__primary {
			margin-left: 1em;

			> ul {
				height: 60px;

				> li {
					cursor: pointer;
					transition: all 0.5s ease-in-out;
			        height: 100%;


					> a, > button {
						display: flex;
    					flex-direction: column;
    					height: 100%;
    					width: 100%;
    					justify-content: center;
						padding-left: 2em;
					    padding-right: 2em;
					    transition: all 0.5s ease-in-out;
					    @include borderRadius(0px);
					    @include linear-gradient(to right, rgba($primary-color, 0.0) 0%, rgba($tertiary-color, 0.0) 50%, rgba($secondary-color, 0.0) 100%);
					    cursor: pointer;


					    &:hover, &.active {
							@include linear-gradient(to right, rgba($primary-color, 0.2) 0%, rgba($tertiary-color, 0.2) 50%, rgba($secondary-color, 0.2) 100%);
							transition: all 0.5s ease-in-out;
						}
					}
				}
			}
		}

		&__toolbar {
			margin-left: auto;

			> ul {
			    height: 60px;
		        display: flex;

				> li {
					height: 100%;
					cursor: pointer;
					transition: all 0.5s ease-in-out;
			        border-left: 1px solid rgba($tertiary-color-2, 0.1);



					> a, > button {
						appearance: none;
						-webkit-appearance: none;
						border: none;
						background: none;
						padding: 0;
						padding-left: 1.5em;
					    padding-right: 1.5em;
					    width: 100%;
					    height: 100%;
					    @include borderRadius(0px);
					    cursor: pointer;


						> span {
							 > img {
								min-height: 25px;
								min-width: 25px;
							}
						}

						&:hover {
						    @include linear-gradient(to right, rgba($primary-color, 0.2) 0%, rgba($tertiary-color, 0.2) 50%, rgba($secondary-color, 0.2) 100%);
							transition: all 0.5s ease-in-out;
						}
					}


					&.has-children, .sub-nav-dropdown {

						> ul, > .sub-nav-dropdown, .sub-nav-dropdown {
							display: none;
							top: 60px;
							min-width: 200px;
    						flex-direction: column;
							right: 0;
							height: auto;
							background: #fff;
							@include borderRadius (0px 0px 4px 4px);
							@include box-shadow();
							position: fixed;
							list-style: none;
    						padding: 0;
							transition: all 0.25s ease-in-out;

							> li {
								border-left: none;
								border-top: 1px solid rgba($tertiary-color-2, 0.1);
								width: 100%;
								background: #fff;
								padding: 0;
								text-align: left;

								> a, > button {
									line-height: 2;
									padding: 1rem;
									text-align: left;
									cursor: pointer;
									width: 100%;
    								border: none;
    								@include borderRadius(0px);

									&:hover {
    								    @include linear-gradient(to right, rgba($primary-color, 0.2) 0%, rgba($tertiary-color, 0.2) 50%, rgba($secondary-color, 0.2) 100%);
										transition: all 0.5s ease-in-out;
										color: $tertiary-color-2;
									}
								}
							}
						}

						&:hover {
							> ul, > .sub-nav-dropdown {
								display: flex;


								> li {

								 	&:hover {
								 		@include linear-gradient(to right, rgba($primary-color, 0.2) 0%, rgba($tertiary-color, 0.2) 50%, rgba($secondary-color, 0.2) 100%);
								 	}

								}

							}
						}

					}

				}
			}
		}


span.icon.notification {
	position: relative;
	top: -.5em;
}

span.badge {
	display: block;
	@include borderRadius(300px);
	background: $secondary-color;
	position: relative;
	color: #fff;
	font-size: .4rem;
	font-weight: 300;
	padding: .2rem 0.35rem;
	margin-top: -2rem;
	margin-left: 1.75em;
}

}



.mobile-navigation-panel {
	display: grid;
	position: fixed;
	background: rgba(255,255,255,0.95);
	height: 100%;
	top: 0;
	right: 0;
	@include box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default);
	z-index: 6000;
	transition: all .5s ease-in-out;
	min-width: 300px;

	&.hidden, &[hidden] {
		display: none;
		visibility: hidden;
		transform: translateX(150%);
		transition: 0.75s ease-in-out;
	}

	&.active, &[active] {
		display: grid;
		visibility: visible;
		transform: translateX(0%);
		animation: .75s ease-in-out slideLeft;
	}

	&__wrap {
		display: flex;
		flex-direction: column;

		> .close-panel__toggle {
			align-self: flex-end;
			margin-top: 1rem;
			margin-right: 1rem;

			> button {
				@include borderRadius(100px);
				padding: .75rem 1rem;
				font-size: 1rem;
				border: 1px solid rgba(255,255,255,0);
				cursor: pointer;
				opacity: .8;

				&:hover {
					border: 1px solid rgba(#449DF5, .8);
					opacity: 1;

				}
			}
		}

		> div, > section {
			height: auto;
		}

		nav.nav {
			&__primary {
				margin-left: 0;
				height: auto;
			}

			> div, > section {
				height: auto;
			}

			> ul {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: auto;

					 > li {
					 	width: 100%;

						> a, > button {
							width: 100%;
							flex-direction: row;
							justify-content: flex-start;
							padding: 0;						
    						align-items: center;
    						cursor: pointer;
    						text-indent: 1rem;
    						padding: 0;
    						height: 100%;
    						min-height: 50px;	
    						box-sizing: border-box;

							> span {
								text-align: left;
								margin: 0;

								&.icon {
								text-align: center;
								max-width: 20px;
								height: auto;
								}

								&.label {
									margin-left: 1.5rem;
								}
							}
						}

					 }
				}

			&__toolbar {
				margin-left: 0;
				height: auto;
				margin-top: auto;
				bottom: 0;
				position: relative;


				> div, > section {
					height: auto;
				}

				> ul {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: auto;


					> li {
					 	width: 100%;

						> a, > button {
							display: flex;
							width: 100%;
							flex-direction: row;
							justify-content: flex-start;	
    						align-items: center;
    						cursor: pointer;
    						text-indent: 1rem;
    						height: 100%;
    						min-height: 50px;	
    						padding: 0;
    						box-sizing: border-box;

							> span {
								text-align: left;
								margin: 0;

								&.icon {
									text-align: center;
									max-width: 20px;
									height: auto;
								}

								&.label {
									margin-left: 1.5rem;
									color: $tertiary-color-2;
									font-size: 0.7rem;
								}
							}
						}

					 }
				}
			}

		}
	}

}






header.header__desktop .header-wrap .active nav.nav__primary,
header.header__desktop .header-wrap .active nav.nav__toolbar{
  display: block;
}




/* Dropdown-Styles */

 .sub-nav-dropdown {
	display: flex;
	top: 60px;
	min-width: 200px;
	flex-direction: column;
	right: 0;
	height: auto;
	background: #fff;
	@include borderRadius (0px 0px 4px 4px);
	@include box-shadow();
	position: fixed;
	list-style: none;
	padding: 0;
	transition: all 0.25s ease-in-out;

	> li, > .sub-nav-dropdown__item {
		border-left: none;
		border-top: 1px solid rgba($tertiary-color-2, 0.1);
		width: 100%;
		background: #fff;
		padding: 0;
		text-align: left;

		> a, > button {
			line-height: 2;
			padding: 1rem;
			text-align: left;
			cursor: pointer;
			width: 100%;
			border: none;
			@include borderRadius(0px);

			&:hover {
			    @include linear-gradient(to right, rgba($primary-color, 0.2) 0%, rgba($tertiary-color, 0.2) 50%, rgba($secondary-color, 0.2) 100%);
				transition: all 0.5s ease-in-out;
				color: $tertiary-color-2;
			}
		}
	}
}







/* Footer Navigation Mobile - Specific Overrides */
footer.footer {
	/* position: fixed; //remove comments for fixed positioned footer  */
	/* bottom: 0; //remove comments for bottom fixed positioned footer  */

	.footer-wrap {
		padding-left: 0;
		height: 100%;

		> nav.nav__primary {
			margin-left: 0;
			width: 100%;

			> ul {
				width: 100%;
				> li {
					width: 100%;
				    align-items: center;
				    justify-content: space-evenly;

				    > a, > button {
				    	> span {
							&.label {
								color: $tertiary-color-2;
								font-size: 0.7rem;
							}
				    	}
				    }
				}
			}
		}
	}
}