.header {

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1px solid $border;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: $gutter*2;
		pointer-events: none;
	}

	&::before {
		left: 0;
		background: linear-gradient(to right, $black, rgba($black, 0));
	}

	&::after {
		right: 0;
		background: linear-gradient(to right, rgba($black, 0), $black);
	}

	@keyframes header__rotate {
		0% {
			transform: rotate(0turn);
		}
		100% {
			transform: rotate(1turn);
		}
	}

	&__logo {
		$size: 42px;

		position: relative;
		margin: $gutter 0 math.div($gutter, 2);
		width: $size;
		height: $size;
		background: $gradient;
		border-radius: 100%;
	}

	&__spinner {
		$offset: 4px;

		position: absolute;
		top: $offset*-1;
		left: $offset*-1;
		width: calc(100% + #{ $offset*2 });
		height: calc(100% + #{ $offset*2 });
		border-style: solid;
		border-width: 2px;
		border-radius: 100%;
		border-color: transparent;
		opacity: 0;
		transition: opacity 1.2s ease;
		animation-name: header__rotate;
		animation-iteration-count: infinite;
		animation-timing-function: linear;

		&--visible {
			opacity: 1;
		}

		&--white {
			border-right-color: $white;
			animation-duration: .5s;
		}

		&--primary {
			border-right-color: $primary;
			animation-duration: 1.2s;
		}
	}

	&__nav {
		display: flex;
		width: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	&__buttons {
		display: flex;
		margin: 0 auto;
		padding: 0 math.div($gutter, 2);
	}

	&__button {
		display: flex;
		align-items: center;
		margin: 0 math.div($gutter, 2);
		padding: math.div($gutter, 1.5) 2px;
		outline: none;
		white-space: nowrap;
		transition: box-shadow .3s ease;

		&.hovered,
		&:hover,
		&:focus {
			box-shadow: inset 0 -2px 0 $light;
		}

		&.active {
			box-shadow: inset 0 -2px 0 $primary;
		}
	}

	&__arrow {
		$size: 12px;

		margin-left: math.div($gutter, 2);
		width: $size;
		height: $size;
		fill: currentColor;
	}

}