.o-header {
	@include z(z-header);
	position: relative;
	overflow-y: hidden;
	padding: space(1) 0 space(1);
	background-color: palette(secondary, 700);

	@include mq($bp-header-switch) {
		padding: space(2) 0;
	}

	&.is-sticky {
		opacity: 0;
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -5px 30px black;
		transform: translateY(-100%);
		transition-property: transform, opacity;
		transition-duration: 300ms;
		transition-delay: 0s, 300ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

		.is-sticky-header-visible & {
			opacity: 1;
			transform: none;
			transition-delay: 0s;
		}
	}
}

.o-header__main {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	@include mq($max: 980) {
		padding: 0 20px 0 column(1, 14);
	}

	@include mq(980) {
		@include contain();
	}
}

.o-header__nav {
	width: 100%;

	@include mq($max: $bp-header-switch) {
		display: none;
	}
}


.o-header__logo {
	flex: none;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: space(-1);
		right: space(-3);
		background-color: palette(secondary, 400);
		height: 64px;
		width: calc(185px + 50vw);
		transform: matrix(1,0,-0.5,1,0,0);
	}

	&:focus {
		outline-offset: 2px;
		outline-color: palette(action);
	}

	@include mq(980) {
		&::before {
			top: space(-2);
			height: 80px;
		}
	}
}

.o-header__img {
	max-height: space(6);
	width: 100px;
}

.o-header__toggle {
	margin-left: 8px;

	@include mq($bp-header-switch) {
		display: none;
	}
}

// Used in simple layout
.o-header__rating {
	margin-left: auto;
	color: palette(neutral, 0);

	@include mq($max: 350){
		.c-rating {
			display: none;
		}
	}

	@include mq($max: 536){
		.c-rating__stars,
		.c-rating__reviews {
			display: none;
		}
	}
}