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


/*
	Colors get defined in _settings.config.scss
*/

$c-nav: (
	'link-padding': 4px,
);

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


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

.c-nav__list {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: 0;
	padding: 0;
	list-style: none;
}


.c-nav__item {
	@include font-size(base);
	white-space: nowrap;
	margin-right: 2%;

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


.c-nav__link {
	@include disableOutlineForMouse;
	position: relative;
	padding: map-get($c-nav, 'link-padding');
	color: map-get($site-header, 'textColor');
	text-decoration: none;
	transition: color 150ms linear;

	&::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;
		border-radius: 1px;
		background-color: map-get($site-header, 'decorationColor');
		transform: scaleX(0);
		transform-origin: bottom right;
		transition: transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
	}

	&:hover {
		color: map-get($site-header, 'textColorHover');

		&::before {
			transform: scaleX(1);
			transform-origin: bottom left;
			background-color: map-get($site-header, 'decorationColorHover');
		}
	}

	&.is-active {
		font-weight: 500;
		color: map-get($site-header, 'textColorActive');

		&::before {
			transform: scaleX(1);
			transform-origin: bottom left;
			background-color: map-get($site-header, 'decorationColorActive');
		}
	}

	&:focus {
		outline-color: currentColor;
		outline-style: solid;
		outline-offset: 1px;
		outline-width: 2px;
	}
}