.header {
	height: 5rem;
	padding: 0;
	background: $black;

	&-logo {
		display: block;
		position: absolute;
		left: 15px;
		top: 1.75em;
	}
}

/* Main navigation */

.main-nav {
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;

	ul {
		margin: 0;

		li {
			padding: 0 1rem;
			margin: 0;
			background: none;
			display: inline-block;
		}
	}

	&-item {
		color: $white;
		font-size: 0.9em;
		display: block;
		line-height: 5rem;
		white-space: nowrap;
		padding: 0;

		&:hover, &:active, &:focus {
			color: $white;
		}

		&.active {
			color: $black;
		}
	}
}

/* Dropdowns */

.dropdown {
	display: none;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	text-align: left;
	background: $gray;
	padding: 2rem 2rem;
	width: 15rem;

	&-trig {
		position: relative;

		&:before {
			@include triangleTop(24px, 14px, $gray);
			position: absolute;
			left: calc(50% - 12px);
			transform: translateY(0);
			top: 100%;
			transition: none;
			visibility: hidden;
			opacity: 0;
		}

		&-active {
			&:before {
				visibility: visible;
				opacity: 1;
				transform: translateY(-100%);
				transition: all 0.1s ease-in;
			}
		}
	}

	a {
		color: $white;
	}

	&-wrap {
		position: relative;
	}

	ul {
		margin: 0;

		li {
			padding: 0;
			margin-bottom: 0.2rem;
			display: block;
		}
	}
}

/* Mobile menu */

.menu-trigger {
	border: none;
	width: 2.75rem;
	height: 2.75rem;
	position: absolute;
	right: 0.7em;
	top: 0.7em;
	display: none;
	text-align: center;
	padding: 0.5em;
	z-index: 1100;

	.icon-menu {
		fill: $white;
		width: 1.75rem;
		height: 1.75rem;
		display: block;
	}
}

@media screen and (max-width: $xs) {
	.menu-trigger {
		display: block;
	}

	.header {
		height: auto;
		min-height: 4rem;
		width: 100%;

		&-logo {
			top: 1.25rem;
			left: 1.25rem;
			z-index: 1500;
		}
	}

	.main-nav {
		background: $black;
		z-index: 1050;
		width: 100%;
		min-height: 100vh;
		left: 100%;
		margin: 0;
		top: 0;
		padding: 4rem 1.5rem 1rem 1.5rem;
		position: absolute;
		transition: left 0.25s ease-in;

		ul {
			width: 100%;

			li {
				display: block;
				width: 100%;
				padding: 0;

				a {
					line-height: 3.3;
					font-size: 1rem;
					text-decoration: none;
					color: $white;
					display: block;

					&:after {
						display: none;
					}

					&:hover, &:active, &:focus {
						color: $white;
					}
				}
			}
		}
	}

	.dropdown {
		position: relative;
		width: 100%;
		left: auto;
		top: auto;
		transform: none;
		padding: 0 0 0 1.5rem;
		background: none;

		&-trig {
			&:before {
				display: none;
			}
		}
	}

	.menu-open {
		overflow: hidden;
		height: 100vh;

		.main-nav {
			left: 0;
		}

		.icon-menu {
			fill: $white;
		}
	}
}
