$header-height: 114px;

.o-header {
	@include z(z-header);
	position: relative;
	padding: space(2) 0;
	background-color: palette(primary, 500);
	background-image: linear-gradient(to bottom, palette(primary, 500), palette(primary, 600));

	@include mq(header-extras) {
		padding: space(5) 0;
	}

	&.is-sticky {
		opacity: 0;
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -5px 30px rgba(palette(neutral, 1000), 0.8);
		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);
	}


	@include mq($max: header-extras) {
		.is-sticky-header-visible &.is-sticky {
			opacity: 1;
			transform: none;
			transition-delay: 0s;
		}
	}
}


.o-header__main {
	@include contain;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.o-header__logo {
	flex: none;

	@include mq($max: header-extras) {
		svg {
			width: 56px;
			height: 56px;
		}
	}

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


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


.o-header__body {
	@include mq(header-extras) {
		flex: 1 1 auto;
		margin-left: 5.657%; // translates to 80px max
		display: flex;
		height: $header-height;
		flex-direction: column;
		justify-content: space-between;
	}
}




.o-header__nav {
	display: none;

	@include mq(header-extras) {
		display: block;
		flex: 1 1 auto;
	}
}


.o-header__row_1 {
	display: flex;
	margin-left: auto;
}


.o-header__row_2 {
	display: flex;

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


.o-header__actions {
	margin-right: 3vw;
	display: flex;

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

	@include mq($bp-max) {
		margin-right: space(5);
	}
}


.o-header__language {
	position: relative;
	z-index: 1; // some value to lay on top of the rating component

	@include mq($max: full-nav) {
		display: none;
	}
}


.o-header__rating {
	display: flex;
	margin-top: auto;
	margin-left: auto;

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


.o-header__toggle {
	@include mq($max: full-nav) {
		display: block;
	}

	@include mq($max: header-extras) {
		margin-left: auto;
	}
}


.o-header--simple {
	background: transparent none;
	padding-bottom: space(2);

	.o-header__row_2,
	.o-header__toggle,
	.o-header__actions {
		display: none;
	}

	.o-header__logo {
		svg { background-color: palette(neutral, 0); }
		path { fill: palette(primary, 600); }
	}
}