.o-header {
	@include z(z-header);
	flex: 0;
	position: relative;
	padding: space(3) 0;
	background-color: palette(primary, 500);


	&.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;
		}
	}

	@include mq(mainnav) {
		padding: space(3) 0 space(9);

		&.is-sticky {
			padding-bottom: space(4);
		}

		&.is-simple {
			padding: space(6) 0;
		}
	}
}

.o-header__main {
	@include contain;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.o-header__prenav {
	display: none;

	@include mq(mainnav) {
		display: block;
		width: 100%;
	}
}

.o-header__logo {
	flex: none;
	margin-right: auto;

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

.o-header__img {
	height: 48px;
	width: 152px;
}

.o-header__nav {
	display: none;
	margin-left: space(4);

	@include mq(mainnav) {
		display: block;
	}
}

.o-header__toggle {
	@include mq(mainnav) {
		display: none;
	}
}