// Component settings: Nav
// ------------------------------------------

$c-nav: (
	'color':  						palette(text-on-primary),
	'color-link-decoration':		palette(primary, 2),
	'color-link-active':			palette(secondary),
	'color-alt':					palette(primary, 2),
	'color-link-decoration-alt':	rgba(palette(light), 0.5),
	'link-padding':			      	4px,
);

// ------------------------------------------


.c-nav {
	height: 100%;
	padding: 0;
}

.c-nav__list {
	@include flex(flex-end center);
	margin-left: 3vw;
	padding: 0;
	list-style: none;
}

.c-nav__item {
	white-space: nowrap;

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

	@include mq($max: l){
		font-size: calc(1.3vw + 0.05rem);
		margin-right: 1.3vw;
	}

	@include mq(l){
		margin-right: 2.2vw;
	}

	@include mq($bp-max){
		margin-right: 4%;
	}
}

.c-nav__link {
	position: relative;
	padding: map-get($c-nav, 'link-padding');
	color: map-get($c-nav, 'color');
	text-decoration: none;

	.is-header-alt & {
		color: map-get($c-nav, 'color-alt');
	}

	&::before {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		left: map-get($c-nav, 'link-padding');
		bottom: 1px;
		width: calc(100% - #{double(map-get($c-nav, 'link-padding'))});
		height: 2px;
		background-color: map-get($c-nav, 'color-link-decoration');
		transform: scaleX(0);
		transform-origin: bottom right;
		transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);

		.is-header-alt & {
			background-color: map-get($c-nav, 'color-link-decoration-alt');
		}
	}

	&:hover {
		&::before {
			transform: scaleX(1);
			transform-origin: bottom left;
		}
	}

	&.is-active {
		font-weight: 500;

		&::before {
			background-color: map-get($c-nav, 'color-link-active');
			transform: scaleX(1);
			transform-origin: bottom left;
		}
	}

	&:focus {
		outline-color: palette(feedback, action);
	}
}