$c-nav-link-padding-horizontal: space(3);

.c-nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin-left: -1.75vw;
	margin-right: -1.75vw;

	@include mq($bp-header-3) {
		margin-left: $c-nav-link-padding-horizontal * -1; // negative margin to counter the padding on the links
		margin-right: $c-nav-link-padding-horizontal * -1; // negative margin to counter the padding on the links
	}
}

.c-nav__list {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: flex-start;
	height: 100%;
	padding: 0;
	list-style: none;
	margin: 0;
}

.c-nav__list--align-right {
	justify-content: flex-end;
}

.c-nav__item {
	white-space: nowrap;
}

.c-nav__item--call {
	display: none;

	@include mq($bp-header-4) {
		display: block;
		margin-left: auto;
	}

}

.c-nav__link {
	@include font-weight('semi-bold');
	position: relative;
	display: inline-block;
	padding: space(2) 1.75vw;
	color: palette(neutral, 0);
	text-decoration: none;
	transition: all $site-header-light-speed ease-in-out;

	@include mq($bp-header-3) {
		padding: space(2) $c-nav-link-padding-horizontal;
	}

	&:hover {
		opacity: 0.5;
	}

	.is-active & {
		&::before {
			content: '';
			display: block;
			height: 2px;
			width: calc(100% - (2 * #{$c-nav-link-padding-horizontal}));
			background-color: currentColor;
			position: absolute;
			top: 0;
			opacity: 0.65;
			border-radius: 0 0 2px 2px;
		}
	}

	// When header is hovered link color needs to change also
	.is-header-light & {
		color: palette(neutral, 1000);

		&:hover {
			opacity: 1;
			color: palette(primary);
		}
	}


}

// Link inside item with call modifier
.c-nav__link--icon {
	display: flex;
	align-items: center;

	i {
		flex: none;
		width: space(2);
		margin-right: space(1);
	}
}