// =============================================================================
// :: Topnav
// =============================================================================
.c-topnav {
	padding: 1.2rem 2rem;

	background-color: $background-color-medium;

	border: none;
	border-radius: 10rem 0.5rem 20rem 10rem;

	@include respond-at(get-breakpoint("tablet")) {
		padding: 1.5rem 4rem;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-topnav__list {
	display: flex;

	padding: 0;

	list-style: none;
}

.c-topnav__item {
	margin-right: 2rem;

	font-size: $font-size-2x-small;
	font-weight: $font-weight-medium;

	&:last-child {
		margin-right: 0;
	}

	&:hover {

		.c-topnav__item-link {
			color: $text-color-base;
		}
	}

	@include respond-at(get-breakpoint("tablet")) {
		margin-right: 4rem;
	}
}

.c-topnav__item-link {
	color: $text-color-dark;

	transition: color 0.3s ease-in-out;
}