// =============================================================================
// :: Nav
// =============================================================================
.c-nav {
	padding: 0;

	list-style: none;

	@include respond-at(get-breakpoint("desktop")) {
		display: flex;
		align-items: center;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-nav__item {
	margin-right: 3.5rem;
	margin-bottom: 1rem;

	font-family: $font-family-primary;
	font-size: $font-size-base;
	text-transform: lowercase;
	line-height: $line-height-1x-large;

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

	&:hover {

		.c-nav__link {

			&::after {
				transform: scaleX(1);
			}
		}
	}

	@include respond-at(get-breakpoint("desktop")) {
		margin-right: 7.5rem;
		margin-bottom: 0;
	}
}

.c-nav__link {
	position: relative;

	padding-bottom: 1rem;

	color: $secondary-color-purple;

	&::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		width: 100%;
		height: 0.4rem;

		background-color: $background-color-pink;
		border: none;
		border-radius: $border-radius-base;

		transform: scaleX(0);
		transform-origin: center;

		transition: transform 0.2s ease-in-out;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-nav__item {

	&.is-active {

		.c-nav__link {

			&::after {
				transform: scaleX(1);
			}
		}
	}
}