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

/*----------------------------------------*/
/*  3.1 header-common
/*----------------------------------------*/

.rr-sticky {
	position: fixed !important;
	top: 0;
	z-index: 111;
	inset-inline-end: 0;
	inset-inline-start: 0;
	width: 100%;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	border-top: 0;
	background-color: var(--rr-common-white) !important;
	box-shadow: 0px 2px 4px rgba(29, 29, 29, 0.14);
}

.header {
	
	&__area {
		background-color: transparent;
	}
	
	&__logo {
		max-width: 144px;
	}
	
	&__main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		@media #{$xs, $sm, $md, $lg} {
			padding: 15px 0;
		}
	}
}

.bar-icon {
	width: 26px;
	height: 18px;
	@include flexbox();
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	transition: color .2s ease-out;
	span {
		width: 100%;
		height: 2px;
		background: var(--rr-theme-primary);
		display: inline-block;
		transition: color .2s ease-out;
		&:nth-child(2) {
			margin-left: 0px;
		}
	}
	
	&:hover {
		span {
			animation: qode-draw .8s cubic-bezier(.44,1.1,.53,.99) 1 forwards;
			&:nth-child(2) {
				margin-left: 0px;
				animation-delay: .1s;
			}
			&:nth-child(3) {
				animation-delay: .2s;
			}
		}
	}
	&.is-black {
		span {
			background: var(--rr-common-black);
		}
	}
	&.is-white {
		span {
			background: var(--rr-common-white);
		}
	}
}