// Header

// # Contents
// 1. Header Base
// 2. Header Elements
// 2.1) Logo
// 2.2) Header Contact
// 2.3) Mobile Menu Toggler
// 2.4) Circle Badge
// 3. Footer
// 4. Responsive

// # Variables
@include set(
	(
		header: (
			color: false,
			link-color: false,
			link-active-color: false,

			top: (
				padding-top: false,
				padding-bottom: false,
				color: false,
				background: false,
				border-bottom: false,
				font-size: false,
				font-weight: false,
				letter-spacing: false,
			),
			middle: (
				padding-top: false,
				padding-bottom: false,
				color: false,
				background: false,
				border-bottom: false,
				font-size: false,
				font-weight: false,
				letter-spacing: false,
			),
			bottom: (
				padding-top: false,
				padding-bottom: false,
				color: false,
				background: false,
				border-bottom: false,
				font-size: false,
				font-weight: false,
				letter-spacing: false,
			),
			logo: (
				max-width: 101px,
				max-width-mobile: false,
			),
			separator: (
				color: #e7e7e7,
				space: 10px
			),
			social-icon: (
				font-size: 1.28rem,
				size: 2.6rem,
				color: false,
				space: 2px
			),
			top-notice: (
				padding: 1.1rem,
				font-size: 1.3rem,
				link-background: #151719
			),
			icon: (
				size: 2.7rem,
				space: 2.2rem,
				space-mobile: 1.2rem,
			)
		)
	)
);

// 1. Header Base
header {
	position: relative;
	@include css( color, header, color );

	.container,
	.container-fluid {
		display: flex;
		display: -ms-flexbox;
		align-items: center;
		-ms-flex-align: center;
		justify-content: space-between;
		-ms-flex-pack: justify;
		position: relative;
	}

	p {
		margin-bottom: 0;
	}

	a:hover {
		@include css( color, header, link-active-color );
	}
}

@if ( get( header, link-color ) ) {
	.header a {
		color: get( header, link-color );
	}
}

@else {
	header a {
		color: inherit;
	}
}

.header {
	&-top {
		@include css(padding-top, header, top, padding-top);
		@include css(padding-bottom, header, top, padding-bottom);
		@include css(border-bottom, header, top, border-bottom);
		@include css(color, header, top, color);
		@include css(background, header, top, background);
		@include css(font-size, header, top, font-size);
		@include css(font-weight, header, top, font-weight);
		@include css(letter-spacing, header, top, letter-spacing);
	}

	&-middle {
		@include css(padding-top, header, middle, padding-top);
		@include css(padding-bottom, header, middle, padding-bottom);
		@include css(border-bottom, header, middle, border-bottom);
		@include css(color, header, middle, color);
		@include css(background, header, middle, background);
		@include css(font-size, header, middle, font-size);
		@include css(font-weight, header, middle, font-weight);
		@include css(letter-spacing, header, middle, letter-spacing);
	}

	&-bottom {
		@include css(padding-top, header, bottom, padding-top);
		@include css(padding-bottom, header, bottom, padding-bottom);
		@include css(border-bottom, header, bottom, border-bottom);
		@include css(color, header, bottom, color);
		@include css(background, header, bottom, background);
		@include css(font-size, header, bottom, font-size);
		@include css(font-weight, header, bottom, font-weight);
		@include css(letter-spacing, header, bottom, letter-spacing);
	}
}

.header-menu {
	margin-bottom: -1px;
	margin-left: 1px;
}

.header-dropdown {
	&.lang-menu {
		margin-right: 1.2rem;

		> a {
			padding: 0;
		}
	}
}

.header-search-inline .form-control {
	min-width: 17rem;
}

.header .header-search-wrapper {
	.btn {
		font-size: 1.6rem;

		&::before {
			margin-top: 0;
		}
	}

	.select-custom::after {
		right: 16px;
	}
}

.header-transparent {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1040;
}

.menu-banner.menu-banner-2 .btn {
	bottom: 16px;
}

.main-nav .menu > li {
	> a {
		padding-top: 2rem;
		padding-bottom: 2rem;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: -.01em;
		line-height: 20px;
		text-transform: uppercase;
	}
}

// 2. Header Elements

// 2.1) Logo
.logo {
	@include css(max-width, header, logo, max-width);
}

// 2.2) Header Contact
.header-contact {
	align-items: center;
	text-transform: uppercase;

	i {
		margin-right: 1.1rem;
		font-size: 2.9rem;
	}

	img {
		margin-right: .8rem;
	}

	h6 {
		margin: 0;
		font-size: 1.1rem;
		line-height: 1.3;
		color: #777;
	}

	a {
		display: block;
		font-size: 1.8rem;
		font-weight: 700;
		white-space: nowrap;
	}
}

// 2.3) Mobile Menu Toggler
.mobile-menu-toggler {
	border: 0;
	background: transparent;
	color: $primary-color-dark;
	padding: 1rem .5rem;
	margin-right: .5rem;
	font-size: 20px;
	line-height: 0;
	cursor: pointer;
}

// 2.4) Circle Badge
.badge-circle {
	position: absolute;
	top: 1px;
	right: 0;
	width: 1.6rem;
	border-radius: 50%;
	color: #fff;
	background: #ff5b5b;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.6rem;
	font-family: $font-family;
	text-align: center;
}

// 2.5) Social Icons
header {
	.social-icon {
		border-radius: 50%;
		@include css( color, header, social-icon, color );
		@include css( font-size, header, social-icon, font-size );
		@include css( width, header, social-icon, size);
		@include css( height, header, social-icon, size);
		@include css( line-height, header, social-icon, size);

		&:not(:hover):not(:active):not(:focus) {
			background-color: transparent;
		}

		@if get( header, social-icon, space ) {
			& + .social-icon {
				margin-left: get( header, social-icon, space );
			}
		}
	}

// 2.5) Seperator
	.separator {
		height: 20px;
		@if ( get( header, separator, color ) ) {
			border-left: 1px solid get( header, separator, color );
		}
		@if ( get( header, separator, space ) ) {
			margin: 0 get( header, separator, space );
		}
	}
}

// 2.6) Top Notice
.top-notice {
	position: relative;
	@if ( get( header, top-notice, padding ) ) {
		padding: get( header, top-notice, padding ) 2rem;
	}
	@include css( font-size, header, top-notice, font-size );
	font-family: $second-font-family;
	line-height: 2;
	letter-spacing: .025em;

	h5 {
		color: inherit;
		font-size: inherit;
		font-weight: 500;
	}

	small {
		font-size: .8461em;
		letter-spacing: .025em;
		opacity: .5;
	}

	a {
		color: inherit;
		font-weight: 700;
	}

	.category {
		display: inline-block;
		padding: .3em .8em;
		@include css( background, header, top-notice, link-background );
		font-size: 1rem;
	}

	.mfp-close {
		top: 50%;
		transform: translateY(-50%) rotateZ(45deg) translateZ(0);
		color: inherit;
		opacity: .7;
		z-index: 10;

		&:hover {
			opacity: 1;
		}
	}
}

//custom header for pixel
.social-icons {
	padding-top: 1px;
	margin-bottom: -1px;
}

.header {
	.social-icon.icon-twitter {
		font-size: 14px;
	}
	
	.separator {
		margin-right: 8px;
		margin-left: 9px;
	}
	
	.social-icon+.social-icon {
		margin-left: 3px;
	}

	.header-right .cart-dropdown {
		margin-right: 2.6rem;
		margin-left: 1px;
	}

	.dropdown-arrow .badge-circle {
		top: -5px;
		left: 22px;
	}

	.header-contact {
		padding-top: 1px;
		padding-right: 1.6rem;
		margin-bottom: -1px;
	}

	.font1 {
		padding-top: 3px;
	}

	.header-bottom {
		border-top: 2px solid #e7e7e7;
	}
}

.top-message {
	margin-right: 1.7rem;
}

.dropdown-arrow:after {
	position: absolute;
	top: 22%;
	right: -1.8rem;
	font-size: 17px;
}

.sticky-header.fixed {
	.logo {
		max-width: 80px;
		height: 32px;
		
		img {
			transform: none;
		}
	}

	.custom {
		display: none !important
	}

	.header-right {
		padding-right: 0;
	}

	.header-left {
		padding-top: 2px;
	}

	.header-search-inline.header-search {
		margin-top: 3px;
		margin-right: 2.5rem;

		i {
			font-size: 2rem;
		}
	}

	.account-icon {
		margin-right: 2.6rem;
	}
}

// 2.7) Header Icon
.header-icon {
	&.btn-wishlist {
		margin-top: -1px;
		margin-right: 17px;
	}

	&.login-link {
		margin-top: -1px;
		margin-right: 23px;
	}

	i {
		@include css( font-size, header, icon, size );
	}
}

.header-middle .icon-search-3 {
	font-size: 2.4rem;
}

// 3. Footer
// 3.1) Footer Base
.footer-middle {
    padding: 6.6rem 0 .9rem;
}

.footer-bottom {
	padding: 2.4rem 0 2.3rem;
	border-top: 1px solid #313438;

	.footer-right {
		padding-bottom: 1px;
	}

	.footer-left {
		padding-top: 1px;
	}
}

.footer-ribbon {
    padding: 9px 20px 5px;
}

.footer {
	a:hover,
	a:focus {
		color: #fff;
	}

// 3.2) Footer Element

// 3.2.1) Footer Social Icons
 	.social-icon {
		margin-left: 2px;
		height: 3.7rem;
		width: 3.7rem;
		font-size: 1.4rem;
		line-height: 3.6rem;
		border: 1px solid transparent;
		border-radius: 50%;

		&:not(:hover):not(:active):not(:focus) {
			background-color: transparent;
			border-color: #313438;
			font-size: 1.3rem;
			color: #fff;
		}

		&+.social-icon {
			margin-left: .4rem;
		}
	}

// 3.2.2) Footer Contact Info
	.contact-info {
		padding-bottom: 2px;

		li {
			position: relative;
			margin-bottom: 5px;
			line-height: 1.4;
		}
	}

	.contact-info li:last-child {
		margin-bottom: 1.7rem;
	}

	.contact-info-label {
		display: block;
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}
	
// 3.2.3) Footer Newsletter
	.widget-newsletter {
		margin: -1px 0 4rem;
	    padding-bottom: 2.5rem;
		border-bottom: 1px solid #313438;

		.widget-title {
			margin-bottom: .9rem;
		}

		p {
			max-width: 360px;
			margin-top: 2px;
			line-height: 1.6;
		}

		form {
			padding-right: 2px;
			background: #292c30;
			border-radius: 5rem;
			padding-left: 2.5rem;
		}

		.form-control {
			height: 4.8rem;
			padding: .9rem 2.5rem .8rem 0;
			border: 0;
			box-shadow: none;
			outline: none;
			background: #292c30;
			color: #777;
			font-size: 1.2rem;

			@include only_for_ie() {
				flex: 1;
			}

			&::placeholder {
				color: #999999;
			}
		}

		.btn {
			padding: 1rem 2.3rem .8em;
			border-radius: 0 5rem 5rem 0;
			font-size: 1.2rem;
			letter-spacing: 0.01em;
		}
	}

	.widget {
		color: #a8a8a8;
	}
}

// 3.2.4) Footer Copyright
.footer-copyright {
	color: #777;
	font-size: 1.2rem;
    letter-spacing: -.013em
}

.widget-middle .widget-title {
	margin-bottom: 1.4rem;
}

// 4. Responsive

@include mq(lg) {
	.mobile-menu-toggler {
		display: none;
	}

	.dropdown-expanded li+li {
		margin-left: 2.6rem;
	}
}

@include mq(xl, max) {
	.header-dropdown.lang-menu {
		margin-right: 0;
	}
}

@include mq(lg, max) {
	.main-nav {
		display: none;
	}
}

@include mq(md, max) {
	.header .separator {
		display: none;
	}	
}

@include mq(sm, max) {
	.top-notice {
		line-height: 1.5;
	}

	.logo {
		@include css(max-width, header, logo, max-width-mobile);
	}

	.header-icon {
		&:not(:last-child) {
			@include css(margin-right, header, icon, space-mobile);
		}
	}

	.header-search {
		display: none;
	}
}