.header {
	background: $white;
	padding: 0;
	position: relative;
	z-index: $header-zindex;
	
	@include box-shadow(0 0 16px rgba($black, .15));
	
	&.header-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: $header-fixed-zindex;
		
		& .navbar-collapse {
			@include media-breakpoint-down(md) {
				overflow: scroll;
				max-height: calc(100vh - 60px);
			}
		}
	}
	&.header-inverse {
		background: $dark;
		
		& .header-logo {
			& a {
				color: $white;
				
				& small {
					color: rgba($white, .75);
				}
			}
		}
		& .header-nav {
			& .nav {
				& > li {
					&.active {
						& > a {
							color: $primary;
						}
					}
					&.divider {
						background: rgba($white, .25);
					}
					& > a {
						color: $white;
						
						& .caret {
							color: rgba($white, .5);
						}
						&:hover,
						&:focus {
							color: rgba($white, .75);
						}
					}
				}
			}
		}
		& .navbar-toggle {
			border-right-color: rgba($white, .25);
			
			& .icon-bar {
				background: rgba($white, .25);
			}
		}
		& .navbar-collapse {
			@include media-breakpoint-down(md) {
				border-color: rgba($white, .25);
				background: $dark;
			}
			
			& .nav {
				& > li {
					& + li {
						border-color: rgba($white, .25);
					}
				}
			}
		}
	}
	& .container {
		position: relative;
	}
	& .header-container {
		display: table;
		width: 100%;
		
		@include media-breakpoint-down(sm) {
			@include display-flex();
		}
	}
	& .header-logo {
		width: rem(240px);
		height: rem(76px);
		display: table-cell;
		vertical-align: middle;
		
		@include media-breakpoint-down(md) {
			width: auto;
			height: rem(60px);
		}
		@include media-breakpoint-down(sm) {
			display: block;
			
			@include flex(1);
		}
		
		& img {
			max-height: rem(40px);
			max-width: rem(240px);
			display: block;
		}
		& a {
			display: block;
			color: $dark;
			text-decoration: none;
			font-size: rem(20px);
			height: 100%;
			
			@include display-flex();
			@include flex(1);
			@include flex-align(center);
			@include media-breakpoint-down(md) {
				font-size: rem(16px);
			}
			
			& small {
				display: block;
				font-size: rem(12px);
				font-weight: normal;
				margin-top: rem(-3px);
				color: lighten($black, 30%);
				
				@include media-breakpoint-down(md) {
					font-size: rem(10px);
					max-width: rem(120px);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		& .brand-logo {
			border: 15px solid;
			width: rem(30px);
			height: rem(30px);
			border-color: $primary darken($primary, 10%) darken($primary, 20%);
			margin: rem(6px) rem(12px) rem(6px) rem(10px);
			
			@include border-radius($border-radius-lg);
			@include box-shadow(0 5px 5px -4px $black);
			@include media-breakpoint-down(md) {
				width: rem(24px);
				height: rem(24px);
				border-width: 12px;
				margin: rem(6px) rem(15px) rem(6px) 0;
			}
			@include media-breakpoint-down(sm) {
				width: rem(20px);
				height: rem(20px);
				margin: rem(10px);
			}
		}
	}
	& .header-nav {
		display: table-cell;
		vertical-align: middle;
		
		@include media-breakpoint-down(sm) {
			display: block;
		}
		
		& .nav {
			@include display-flex();
			
			& > li {
				@include media-breakpoint-down(sm) {
					@include clearfix();
				}
				
				& > a {
					color: $dark;
					line-height: rem(56px);
					padding: rem(10px) rem(15px);
					text-decoration: none;
					display: block;
					position: relative;
					
					@include media-breakpoint-down(md) {
						line-height: rem(40px);
						padding: rem(10px);
					}
					
					&:hover,
					&:focus {
						background: none;
						color: lighten($black, 30%);
					}
				}
				&.active {
					& > a {
						color: $primary;
						
						&:hover,
						&:focus {
							color: $primary;
						}
					}
				}
				&.divider {
					width: 1px;
					height: rem(24px);
					margin: rem(26px) 0;
					background: $gray-300;
					
					@include media-breakpoint-down(md) {
						margin: rem(18px) 0;
					}
				}
			}
			&.pull-right {
				@include media-breakpoint-down(xs) {
					margin-right: rem(-15px);
				}
			}
		}
	}
	& .header-cart {
		color: $dark;
		display: block;
		
		& .header-cart-text {
			margin-right: rem(35px);
			line-height: rem(20px);
		}
		& .total {
			font-size: rem(12px);
			color: $white;
			font-weight: bold;
			background: $primary;
			display: inline-block;
			width: rem(20px);
			height: rem(20px);
			line-height: rem(20px);
			text-align: center;
			
			@include border-radius($border-radius-lg * 10);
			@include media-breakpoint-down(md) {
				position: absolute;
				right: rem(5px);
				top: rem(10px);
			}
		}
		& i {
			font-size: rem(20px);
			float: left;
			line-height: rem(56px);
			margin-right: rem(5px);
			
			@include media-breakpoint-down(md) {
				line-height: rem(40px);
				float: none;
				margin: 0;
				display: block;
			}
		}
	}
	& .dropdown {
		@include media-breakpoint-up(lg) {
			&.dropdown-hover {
				&:hover,
				&:focus {
					& .dropdown-menu {
						display: block;
						position: absolute;
					}
					& .arrow {
						display: block;
					}	
				}
			}
		}
		@include media-breakpoint-down(sm) {
			position: initial;
			
			&.show {
				& .arrow {
					display: block;
				}	
			}
		}
		& .arrow {
			position: relative;
			display: none;
			
			&:after,
			&:before {
				content: '';
				position: absolute;
				left: 50%;
				margin-left: -7px;
			}
			&.top {
				&:before,
				&:after {
					border: 7px solid transparent;
					border-bottom-color: $primary;
					top: -2px;
				}
			}
		}
	}
	& .dropdown-menu {
		margin: 0;
		padding: 0 rem(15px);
		border: none;
		border-top: 3px solid $primary;
		min-width: rem(230px);
		
		@include box-shadow(0 16px 16px rgba($black, .15));
		@include border-radius(0 0 $border-radius-lg $border-radius-lg);
		@include media-breakpoint-down(sm) {
			top: 100% !important;
			left: 0 !important;
			right: 0 !important;
			width: 100%;
			
			@include transform(none !important);
		}
		
		& .dropdown-title {
			margin: 0 0 rem(15px);
			color: $primary;
		}
		& .dropdown-item {
			padding: rem(10px) 0;
			line-height: rem(20px);
			
			& + .dropdown-item {
				border-top: 1px solid $gray-300;
			}
			&:hover,
			&:focus {
				color: $primary;
				background: none;
			}
		}
	}
	& .user-img {
		float: left;
		width: rem(36px);
		height: rem(36px);
		margin: rem(10px) rem(10px) rem(10px) 0;
		
		@include border-radius($border-radius-lg * 20);
		@include media-breakpoint-down(md) {
			float: none;
			margin: 0;
		}
	}
	& .navbar-collapse {
		@include media-breakpoint-up(md) {
			display: block;
		}
		@include media-breakpoint-down(md) {
			& .nav {
				& > li {
					& > a {
						font-size: rem(12px);
						padding-left: rem(10px);
						padding-right: rem(10px);
					}
				}
			}
		}
		@include media-breakpoint-down(sm) {
			position: absolute;
			left: 0;
			right: 0;
			top: rem(60px);
			background: $white;
			padding: 0;
			border-top: 1px solid $gray-300;
			
			& .nav {
				display: block;
				
				& > li {
					& + li {
						border-top: 1px solid $gray-300;
					}
					& > a {
						line-height: rem(30px);
						padding: rem(10px) rem(15px);
						font-size: rem(13px);
					}
				}
			}
			
			& .dropdown-menu {
				position: initial !important;
				margin-top: 0;
				top: 0 !important;
				border-bottom: 3px solid $primary;
				width: 100%;
		
				@include box-shadow(none);
				@include border-radius(0);
				@include transform(none !important);
			}
		}
	}
	& .navbar-toggle {
		position: relative;
		padding: rem(9px) rem(15px);
		height: rem(60px);
		margin: 0 0 0 rem(-15px);
		background-color: transparent;
		background-image: none;
		border: none;
		border-right: 1px solid $gray-300;
		
		@include border-radius(0);
		@include media-breakpoint-up(md) {
			display: none;
		}
		
		&:focus {
			outline: none;
		}
		& .icon-bar {
			display: block;
			width: rem(22px);
			height: rem(2px);
			background: $dark;
		
			@include border-radius($border-radius);
			
			& + .icon-bar {
				margin-top: rem(4px);
			}
		}
	}
}