nav {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: $clr-navbar;
	z-index: 10;

	& > div {
		display: flex;
		flex-wrap: wrap;
	}

	.brand-logo {
		display: flex;
		align-self: center;
		text-decoration: none;
		font-size: 2.1rem;
		font-weight: 800;

		background: linear-gradient(to right, $clr-secondary, $clr-primary 25%, $clr-secondary 50%, white 50%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 200% 100%;
		background-position: 100%;
		transition: background-position 275ms ease;

		&:hover, &:focus {
			outline: none;
			background-position: 0 100%;
		}
	}

	.spacer {
		width: 100%;
		flex: 1;
	}

	ul {
		float: right;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 20px 10px;
	}

	li a {
		position: relative;
		font-size: 1.2rem;
		display: inline-block;
		padding-bottom: 3px;
		margin: 0 5px;
		text-decoration: none;
		color: $clr-primary;
		font-weight: 700;

		&:focus {
			outline: none;
		}

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: currentColor;
			width: 100%;
			height: 2px;
			transform: scaleX(0);
			transform-origin: right;
			transition: transform 250ms ease-in;
		}

		&:hover::after, &:focus::after {
			transform: scaleX(1);
			transform-origin: left;
		}
	}
}