@use '../../utils' as *;

/*----------------------------------------*/
/*  3.5.4 Header Common Style 
/*----------------------------------------*/


.header {
	&-logo {
		width: 170px;
			@media #{$xs}{
				width: 140px;
		}
	}
	&-search-wrapper {
		position: relative;
	}
	&-search-inner {
		display: none;
		position: absolute;
		width: 290px;
		top: 60px;
		z-index: 2;
		inset-inline-end: 0;
		@media #{$lg} {
			top: 55px;
		}
		@media #{$xs} {
			width: 250px;
			top: 48px;
		}
		@media #{$mobile} {
			top:46px;
			width: 220px;
		}
	}
	&-search-icon {
		cursor: pointer;
		&:hover {
			.has-search {
				color: var(--rs-theme-yellow);
			}
			.has-close {
				color: var(--rs-theme-yellow);
			}
		}
		i {
			font-size: 20px;
			transition: all 0.3s ease-out 0s;
			color: var(--rs-white);
			@media #{$mobile}{
				font-size: 17px;
			}
		}
		.has-close {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			z-index: 1;
		}
		&.icon-close {
			.has-search {
				opacity: 0;
				visibility: hidden;
			}
			.has-close {
				opacity: 1;
				visibility: visible;
			}
		}
		&.has-theme-cyan{
			&:hover {
				.has-search {
					color: var(--rs-theme-cyan);
				}
				.has-close {
					color: var(--rs-theme-cyan);
				}
			}
		}
		&.has-theme-red{
			&:hover {
				.has-search {
					color: var(--rs-theme-red);
				}
				.has-close {
					color: var(--rs-theme-red);
				}
			}
		}
		&.has-theme-green{
			&:hover {
				.has-search {
					color: var(--rs-theme-green);
				}
				.has-close {
					color: var(--rs-theme-green);
				}
			}
		}
		&.has-theme-green-two{
			&:hover {
				.has-search {
					color: var(--rs-theme-green-two);
				}
				.has-close {
					color: var(--rs-theme-green-two);
				}
			}
		}
	}
	&-search {
		input {
			color: var(--rs-black);
			padding-inline-end: 40px;
			padding-inline-start: 15px;
			width: 100%;
			background: var(--rs-white);
			border-radius: 6px;
			border: 1px solid rgba(255,255,255, .1);
			font-size: 14px;
			height: 48px;
			@include rtl {
				padding-inline-end: 40px;
			}
			&::placeholder{
				color: var(--rs-text-primary);
				font-weight: 500;
				font-size: 14px;
			}
			&:focus{
				border-color: rgba(0,0,0,.1);
			}
		}
		button {
			position: absolute;
			right: 5px;
			font-size: 20px;
			top: 50%;
			transform: translate(-50%, -50%);
			@include rtl {
				left: 20px;
			}
			&:hover{
				color: var(--rs-theme-primary);
			}
		}
	}
	&-content{
		display: flex;
		align-items: center;
		position: relative;
		gap: 18px;
	}
	&-inner{
		&.rs-sticky{
			.header-menu{
				> nav{
					> ul{
						> li{
							> a{
								padding: 32px 0;
							}
						}
					}
				}
			}
			.header-search-inner{
				top: 56px;
				@media #{$lg} {
				top: 51px;
				}
				@media #{$mobile} {
					top: 48px;
				}
			}
		}
	}
	&-icon-wrapper{
		display: flex;
		align-items: center;
		position: relative;
		&::before{
			position: absolute;
			content: "";
			width: 1px;
			height: 15px;
			background: rgba(255, 255, 255, 0.7);
			left: 50%;
			transform: translateX(-50%);
		}
	}
	&-search-wrapper{
		&:not(:last-child){
			padding-inline-end: 17px;
			margin-inline-end: 17px;
		}
	}
	&-right{
		display: flex;
  		gap: 35px;
		align-items: center;
	}
}

// hamburger
.header-bar-icon {
	width: 20px;
	height: 16px;
	@include flexbox();
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	transition: color .2s ease-out;
	span {
		width: 28px;
		height: 2px;
		background: var(--rs-white);
		display: inline-block;
		transition: color .2s ease-out;
		margin: 0 auto;
		margin-right: auto;
		margin-right: 0;
		&:nth-child(1) {
			width: 20px;
			transition: all 0.3s linear;
		}
		&:nth-child(2) {
			width: 15px;
			transition: all 0.3s linear;
		}
		&:nth-child(3) {
			width: 20px;
			transition: all 0.3s linear;
		}
	}
	&:hover {
		span {
			animation: qode-draw .8s cubic-bezier(.44, 1.1, .53, .99) 1 forwards;
			&:nth-child(2) {
				animation-delay: .1s;
			}
			&:nth-child(3) {
				animation-delay: .2s;
			}
		}
	}
}


// sticky css
.rs-sticky-header {
    position: fixed !important;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%;
    z-index: 999;
    background: var(--rs-white);
    box-shadow: 0 0 25px rgba(0,0,0,0.07);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.6s ease;
	&.active{
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}


// transparent css
.header-transparent {
	position: absolute;
	inset-inline-start: 0;
	margin: auto;
	width: 100%;
	z-index: 99;
}