// Primary Navigation
//
// Style guide: Components.Navigation.primary-nav
.c-primary-nav {
	@include var(background-color, nav-background);
}


.c-primary-nav__list {
	@include preserve-list-semantics();
}


.c-primary-nav__list-item {
	margin-top: 1rem;
	text-align: center;

	// Supports
	@supports #{$supports-flex} {
		margin-top: 1rem;
		margin-left: 0;
		width: 33%;

		// Breakpoints
		@include mappy-bp(palm-small) {
			margin-right: 0.5rem;
			width: initial;
			flex-grow: 1;
		}

		@include mappy-bp(palm-medium) {
			margin-right: 1rem;
		}

		@include mappy-bp(lap-small) {
			margin-top: 0;
		}
	}

	&:last-of-type {
		margin-right: 0;

		.c-primary-nav__link {
			@include var(background-color, nav-cta-background);
			@include var(color, nav-cta-text);
			border-bottom: none;

			// States
			&:hover {
				border-bottom: none;
				text-decoration: underline;
			}

			&:focus {
				@include var(background-color, nav-cta-text);
				@include var(color, nav-cta-background);
			}

			&[aria-current="page"] {
				text-decoration: underline;
			}
		}
	}
}


.c-primary-nav__link {
	border-bottom: $border-thinner solid transparent;
	@include var(color, nav-link-text);
	font-family: $font-family-secondary;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
	transition: $animation-duration-short $animation-easing-character border-bottom-color;

	// States
	&:hover {
		border-bottom-color: currentColor;
	}

	&:focus {
		outline: $border-thinner solid currentColor;
	}

	&[aria-current="page"] {
		border-bottom-color: currentColor;
	}

	// Breakpoints
	@include mappy-bp(palm-large) {
		padding: 0.5rem 1rem;
	}

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}
}
