// Header

.header-top {
	.header-right {
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	a {
		color: #fff;
	}
}

.header-middle {
	background-color: #9E9993;
	background-image: url('../images/header-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;

	&.fixed {
		padding: 1rem;
	}

	.header-transparent &:not(.fixed) {
		background-color: transparent;
		background-image: none;
	}

	.container,
	.container-fluid {
		position: relative;
	}
}

.header-dropdowns {
	border-left: 1px solid #2c3035;
	margin-left: 1rem;
	letter-spacing: .01em;
}

.cart-count {
	background: $primary-color-dark;
}

.cart-dropdown {
	padding-left: 1.9rem;
	border-left: 1px solid rgba(255, 255, 255, .2);

	.dropdown-menu:before {
		right: 16px;
	}

	.dropdown-toggle {
		display: block;
		position: relative;
		color: #fff;
		transform: translateY(1px);

		i {
			padding-right: 1.1rem;
			line-height: 1.25;
		}

		.dropdown-cart-text {
			margin-left: 1rem;
		}

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	.product-image-container {
		border: 0;
	}

	.product-title {
		font-weight: 500;
	}
}

.dropdown-cart-action .btn {
	color: #61605a;
}

.search-toggle,
.header-icon {
	display: inline-block;
	padding: 0 1.68rem;
	color: #fff;
	font-size: 2.8rem;
	line-height: 1.25;
	border-left: 1px solid rgba(255, 255, 255, .2);
}

.search-toggle i:before {
	margin: 0 6px 0 8px;
	transform: translateY(-2px);
}

.header-search-wrapper {
	padding-right: 1.68rem;
	right: -2rem;
}

@include mq(md) {
	.header-dropdowns {
		margin-left: 2.5rem;
	}
}

@include mq(lg, max) {
	.header-top {
		.container {
			flex-wrap: wrap;
			-ms-flex-wrap: wrap;
		}

		.header-left,
		.header-right {
			width: 100%;
			justify-content: center;
			-ms-flex-pack: center;
			text-align: center;
		}
	}
}

@include mq(sm, max) {
	.logo {
		max-width: 100px;
	}

	.top-menu li + li {
		margin-left: 1rem;
	}

	.header-dropdown,
	.header-dropdowns {
		margin-left: 0;
	}
}

@include mq(xs, max) {
	.top-menu li + li {
		margin-left: 0;
	}
	.header-icon {
		display: none;
	}
}