// HEADER
// -----------------------------------------------------------------------------
/* Header */
.header {
	background: #FFF;
	border: {
		bottom: 1px solid #E9E9E6;
		top: 3px solid #EDEDED;
	}
	z-index: $header-z-index;

	.logo {
		float: left;
		margin: 10px 0 0 15px;
		img {
			color: transparent;
		}
	}

	.separator {
		@include linear-gradient(#F6F6F6 60%, #EDEDED);
		display: inline-block;
		height: 100%;
		margin: 0 25px 0;
		width: 2px;
		vertical-align: middle;
	}

	.search {
		width: 170px;
		display: inline-block;
		vertical-align: middle;
	}

	.toggle-sidebar-left {
		background: $color-primary;
		border-radius: 100px;
		color: $color-primary-inverse;
		height: 30px;
		line-height: 30px;
		position: absolute;
		right: 15px;
		text-align: center;
		top: 14px;
		width: 30px;
	}
}

.header-right {
	float: right;
	height: $header-height - 4px;
}

html.has-left-sidebar-half {
	.header {
		z-index: 1011;
	}
}

// HEADER MOBILE
// -----------------------------------------------------------------------------
/* Header Mobile */
@media only screen and (max-width: 767px) {
	.header {
		.logo-container {
			@include linear-gradient(#F6F6F6 0%, #FFFFFF 45%);
			border: {
				bottom: 1px solid #E9E9E6;
				top: 3px solid #EDEDED;
			}

			.logo {
				float: none;
				display: inline-block;
				line-height: $header-height - 3;
				margin-top: 0;
			}
		}

		.search,
		.separator {
			display: none;
		}
	}
}

// HEADER DARK AND DARK VERSION
// -----------------------------------------------------------------------------
/* Header Dark */
html.dark,
html.header-dark {
	.header {
		background: $sidebar-background;
		border-bottom-color: darken( $sidebar-background, 3% );
		border-top-color: $sidebar-background;

		@media only screen and (max-width: 767px) {
			.logo-container {
				background: $sidebar-background;
				border-bottom-color: darken( $sidebar-background, 3% );
				border-top-color: $sidebar-background;
			}

			.header-right {
				background: $sidebar-background;
			}
		}

		.separator {
			@include linear-gradient($sidebar-background 10%, darken( $sidebar-background, 5% ));
		}

		.input-search {
			input {
				&,
				&:focus {
					background: lighten( $sidebar-background, 5% );
					border-color: darken( $sidebar-background, 3% );
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.40) inset;
					color: #FFF;
				}
			}

			.input-group-btn .btn-default {
				background: transparent;
				color: $page-header-color;
			}
		}
	}
}

// FIXED HEADER
// -----------------------------------------------------------------------------
@media only screen and (min-width: 768px) {
	html.header-fixed {
		.header {
			border-radius: 0;
			border-top-color: transparent;
			left: 0;
			position: fixed;
			right: 0;
			top: -3px;
			z-index: 2000;
			margin: 0;
		}

		.inner-wrapper {
			padding-top: 0;
			margin-top: 60px;
		}
	}
}

// HEADER NAV MENU
// -----------------------------------------------------------------------------
/* Header Nav Menu */
.header {	
	&.header-nav-menu {
		@media only screen and (min-width: 768px) {
			.logo {
				position: relative;
				padding: 0 20px 0 5px;
				&:after {
					content: '';
					display: block;
					position: absolute;
					top: -13px;
					right: 0;
					height: $header-height;
					border-right: 1px solid #E9E9E6;
				}
			}
		}

		// Header Nav Main
		@import "header-nav-main";

		// Header Nav Main Mobile
		@import "header-nav-main-mobile";

		// Header Nav Main Style for all resolutions
		.header-nav-main {
			nav {
				> ul {
					> li {
						&:not(.dropdown-mega).active {
							ul.dropdown-menu {
								li {
									&:hover {
										> a {
											background-color: #f4f4f4;
										}
									}

									a {
										background: transparent;
									}
								}
							}
						}
						&.dropdown-mega.active {
							ul.dropdown-mega-sub-nav {
								li {
									&:hover {
										a {
											background-color: #f4f4f4;
										}
									}

									a {
										background: transparent;
									}
								}
							}
						}
					}
				}
			}
		}

		// Not Included
		.not-included {
			color: #b7b7b7;
			display: block;
			font-size: 0.8em;
			font-style: normal;
			margin: -4px 0;
			padding: 0;
		}

		// Tip
		.tip {
			display: inline-block;
			padding: 0 5px;
			background: $color-dark;
			color: #FFF;
			text-shadow: none;
			border-radius: 3px;
			margin-left: 8px;
			position: relative;
			text-transform: uppercase;
			font-size: 10px;
			font-weight: bold;
			&:before {
				right: 100%;
				top: 50%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba($color-dark, 0);
				border-right-color: $color-dark;
				border-width: 5px;
				margin-top: -5px;
			}
			&.skin {
				color: $color-dark;
			}
		}

		// Search Form
		.search-toggle {
			color: $color-primary;
			&:focus, &:active {
				box-shadow: none;
			}
		}
		
		@media (min-width: 992px) {
			// Header Nav Stripe
			&.header-nav-stripe {
				height: initial;
				border-bottom: 0;
				nav {
					> ul {
						> li, > li:hover {
							> a {
								background: transparent;
						        padding: 18px 13px 19px;
								margin: 0;
							}
						}
						> li {
							> a {
								color: #444;

								&.dropdown-toggle {
									&:after {
										border-color: #444 transparent transparent transparent;
									}
								}
							}
							&:hover {
								> a {
									color: #FFF;
								}
							}
							&.dropdown:hover, &.dropdown.open {
								> a {
									padding-bottom: 19px;
								}
							}
						}
					}
				}
			}

			// Header Nav Top Line
			&.header-nav-top-line {
				height: initial;
				border-bottom: 0;
				nav {
					> ul {
						> li, > li:hover {
							> a {
								background: transparent !important;
								color: #444;
								padding: 18px 13px 19px;
								margin: 0;
								&:before {
									content: "";
									position: absolute;
									width: 100%;
									height: 5px;
									top: -5px;
									left: -5px;
									opacity: 0;
									background: $color-primary;
								}
							}
						}
						> li {
							&.active, &:hover {
								> a {
									color: $color-primary;
									&:before {
										opacity: 1;
									}
									&.dropdown-toggle {
										&:after {
											border-color: $color-primary transparent transparent transparent;
										}
									}
								}
							}
							> a {
								&.dropdown-toggle {
									&:after {
										border-color: #444 transparent transparent transparent;
									}
								}
							}
							&.dropdown:hover, &.dropdown.open {
								> a {
									padding-bottom: 19px;
								}
							}
						}
					}
				}
			}

			&.header-nav-stripe, &.header-nav-top-line {
				.header-nav-main {
					margin-top: 0;
				}
			}
		}

		// HEADER NAV MENU - RESPONSIVE
		// -----------------------------------------------------------------------------
		// Header Separator
		@media only screen and (max-width: 1199px) {
			.separator {
			    margin: 0px 14px 0;
			}
		}
		
		// Search Form
		@media only screen and (min-width: 768px) and (max-width: 1199px) {
			.search {
				position: absolute;
			    top: 50px;
			    left: -66px;
			    &.active {
			    	display: block !important;
			    }
			    &:before {
			    	content: '';
			    	display: block;
			    	position: absolute;
			    	top: -7px;
				    left: 50%;
				    width: 0;
				    height: 0;
				    border-left: 7px solid transparent;
				    border-right: 7px solid transparent;
				    border-bottom: 7px solid $color-primary;
			    	@include transform(translateX(-50%));
			    }
			}
		}

		// Set position relative to Search Form position correctly
		@media only screen and (min-width: 992px) {
			.header-right {
				position: relative;
			}	
		}

		// Header Right get position absolute only on Tablet resolution
		@media only screen and (min-width: 768px) and (max-width: 991px) {
			.header-right {
				position: absolute;
				top: 0;
    			right: 60px;
			}	
		}
	}
}

// HEADER NAV MENU - DARK COLORS
// -----------------------------------------------------------------------------
/* Header Nav Menu Dark */
html.dark,
html.header-dark {
	.header {
		&.header-nav-menu {
			@media only screen and (min-width: 768px) {
				.logo {
					&:after {
						border-color: #343a44;
					}
				}
			}

			/* Header Nav Main */
			@media (min-width: 992px) {
				// Header Nav Main
				.header-nav-main {
					nav {
						> ul {
							> li {
								&.dropdown {
									.dropdown-menu {
										background-color: #282d36;
										li {
											a {
												border-color: #343a44;
												&:hover, &:focus {
													background-color: #1d2127;
												}
											}
										}
									}
								}

								// Mega Menu
								&.dropdown-mega {
									.dropdown-mega-sub-nav {
										> li {
											&:hover {
												> a {
													background: #1d2127;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}

			/* Header Nav Stripe & Header Nav Top Line */
			@media (min-width: 992px) {
				&.header-nav-stripe, 
				&.header-nav-top-line {
					.header-nav-main {
						nav {
							> ul {
								> li:not(.active):not(:hover) {
									> a {
										color: #FFF;
										&.dropdown-toggle::after {
										    border-color: #FFF transparent transparent transparent;
										}
									}
								}
							}
						}
					}
				}
			}

			// Header Nav Main Style for all resolutions
			.header-nav-main {
				nav {
					> ul {
						> li {
							&:not(.dropdown-mega).active {
								ul.dropdown-menu {
									li {
										&:hover {
											> a {
												background-color: #1d2127;
											}
										}

										a {
											background: transparent;
										}
									}
								}
							}
							&.dropdown-mega.active {
								ul.dropdown-mega-sub-nav {
									li {
										&:hover {
											a {
												background-color: #1d2127;
											}
										}

										a {
											background: transparent;
										}
									}
								}
							}
						}
					}
				}
			}

			/* Header Nav Main Mobile */
			@media (max-width: 991px) {
				.header-nav-main {
					background: #282d36;
					nav {
						> ul {
							> li {
								a {
									&:hover {
										background: #1d2127;
									}
								}
								ul {
									li {
										a {
											color: #777;
										}
									}
								}
							}
						}

						ul {
							li {
								border-color: #343a44;
								a {
									&:hover, &:focus {
										background-color: #1d2127;
									}
								}
								&.dropdown-mega {
									.dropdown-mega-sub-nav {
										> li {
											> a {
												color: #777;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}