:root {
	--header-height: 6.4rem;
	--header-visible-height: 6.4rem;
}

body {
	padding-top: var(--header-height);
	&.has-banner {
		padding-top: 0;
	}
}

.header {
	position: fixed;
	z-index: $z-index-header;
	top: 0;
	left: 0;
	right: 0;
	min-width: $content-min-width;

	&-inner {
		max-width: 150rem;
		margin-left: auto;
		margin-right: auto;
		padding: 1rem 0;
		backdrop-filter: blur(10px);
		background-color: rgba(#000, .2);
		border-bottom: 1px solid rgba(#fff, .2);
		transition: background-color 0.3s ease-in-out;
	}

	body:not(.has-banner) &-inner,
	.scolled-xs-top &-inner {
		background-color: rgba(#000, .7);
	}

	.container {
		display: flex;
		align-items: center;
	}
}

.header-logo {
	width: 7.9rem;
	margin-right: auto;
}

.header-item {
	margin-left: $sp-4;
	&-cta {
		.btn .ico {
			opacity: .9;
			transform: scale(1.2) translateY(.05rem);
		}
	}
	&-lang {
		.ico {
			transform: scale(.8) translateY(.2rem);
		}
	}
}

@include mediaQ(smMax) {
	.header .btn {
		padding: $sp-1 $sp-4;
		font-size: $font-size-small;
	}
}

@include mediaQ(sm) {
	:root {
		--header-height: 11.8rem;
		--header-visible-height: 11rem;
	}

	.header {
		padding: $sp-5 $sp-4 0;
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scolled-xs-top & { transform: translate3d(0,-4.2rem,0); }

		&-inner {
			padding: $sp-4 $sp-2;
			border: 1px solid rgba(#fff, .2);
			border-radius: $border-radius-5;
		}
	}

	.header-logo {
		width: auto;
		transform: scale3d(1,1,1);
		transform-origin: 0 170%;
		transition: transform 0.3s ease-in-out;
		.scolled-xs-top & { transform: scale3d(.9,.9,1); }
	}

	.header-item {
		margin-left: $sp-6;
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scolled-xs-top & { transform: translate3d(0,.8rem,0); }
	}
}

@include mediaQ(md) {
	.header {
		padding: $sp-5 $sp-5 0;
	}
}

@include mediaQ(bp) {
	.header-menu {
		transform: translate3d(0,0,0);
		transition: transform .3s ease-in-out;
		.scolled-xs-top & { transform: translate3d(0,1rem,0); }
	}
}