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

body {
	padding-top: calc(var(--header-height) + #{$sp-6} );
}

.header {
	// position: sticky; // causes scoll on offcanvas menu dismiss
	position: fixed;
	z-index: $z-index-header;
	top: 0;
	left: 0;
	right: 0;
	padding: $sp-2 0;
	min-width: $content-min-width;
	// margin-bottom: $sp-6;
	background-color: $co-base-1;
	box-shadow: $shadow-sm-v;


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

.header-logo {
	width: 88px;
}

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

	.header {
		padding: $sp-3 0;
		// transform: translate3d(0,0,0);
		// transition: transform 0.3s ease-in-out;
		// .scolled-xs-top & { transform: translate3d(0,-$sp-6,0); }
	}

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

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

@include mediaQ(bp) {
	.header-menu {
		display: block;
		// transform: translate3d(0,0,0);
		// transition: transform .3s ease-in-out;
		// .scolled-xs-top & { transform: translate3d(0,$sp-4,0); }
	}
}