// Header icon
.header-icon {
	position: relative;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	vertical-align: middle;
}
// Header Cart
.cms-header-cart-content{
	z-index: 5;
	width: 320px;
	padding: 40px;
	position: absolute;
	visibility: hidden;
	background-color: var(--dropdown-bg);
	background-image: $dropdown_bg_img;
	background-repeat: repeat-x;
	background-position: top left;
	max-height: calc(100% - var(--header-height) - 20px);
	overflow-x: hidden;
	overflow-y: scroll;
	@include box-shadow(var(--dropdown-shadow));
	@include border-radius(var(--dropdown-radius));
	@include opacity(0);
	@include transition();
	&.open{
		visibility: visible;
		@include opacity(1);
	}
	// Inside
	&.inside{
		top: 100%;
		@include transform(translateY(100px));
		&.open{
			@include transform(translateY(0));
		}
	}
	// Outside
	&.outside{
		top: 0;
		@include transform(translateX(320px));
		&.open{
			@include transform(translateX(0));
		}
	    [dir="rtl"] &{
	    	@include transform(translateX(-320px));
	    }
	}
	@media (min-width: $screen-sm-min){
		width: 330px;
	}
}
// Header count 
.h-btn-cart {
	position: relative;
	.cart-icon{
		padding-right: 15px;
	}
	> .menu-text {
		padding-right: 5px;
		vertical-align: middle;
		[dir="rtl"] &{
			padding-right: 0;
			padding-left: 5px;
		}
	}
}
.cart-count{
	position: absolute;
	top: -10px;
	right: 0;
	min-width: 19px;
	height: 19px;
	line-height: 19px;
	background: $accent-color;
	color: $white;
	@include border-radius(50%);
	font-size: 12px;
	text-align: center;
	padding: 0 3px;
}
// Header Text 
.menu-text{
	font-size: var(--menu-font-size);
	font-weight: var(--menu-font-weight);
	font-family: var(--menu-font-family);
	&:hover{
		color: var(--menu-hover);
	}
}
// Header Phone
.cms-header-phone{
	width: 61px;
	height: 61px;
	line-height: 47px!important;
	font-size: 17px;
	color: $white;
	text-align: center;
	display: block;
	@include border-radius(50%);
	padding: 7px;
	box-shadow: 0 0 0 2px #{'rgba(var(--color-custom-1-rgb), 1)'};
	.cms-ripple > span{
		display: inline-block;
		@include transform(translateY(3px));
	}
	@media (max-width: $screen-xs){
		width: 35px;
		height: 35px;
		padding: 3px;
		.cms-ripple.size-47{
			width: 29px;
			height: 29px;
			line-height: 29px;
			> span{
				font-size: 14px;
			}
		}
	}
}
.cms-header-phone-text{
	@media (min-width: 1366px) and (max-width: 1500px){
		display: none;
	}
}
// Header Buttons
.cms-header-btn{
	.btn-height-header.h-btn{
		height: $header-height;
		line-height: $header-height;
		padding-top: 0;
		padding-bottom: 0;
	}
	.btn-header-size{
		padding-left: 0;
		padding-right: 0;
		.cms-btn-content{
			justify-content: center;
		}
	}
}
// Header Hidden Content
.cms-header-hidden-content.active > span:before{
	content: "\e93e";
}
.cms-header-hidden-content-content{
	position: fixed;
	left: 0;
	right: 0;
	top: 100vh;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	background-color: $white;
	&.open{
		visibility: visible;
		opacity: 1;
		z-index: 1;
		top: var(--header-height);
	}
}