.c-nav {
	@include flex(flex-end center);
	padding: 0;
}

.c-nav__list {
	@include flex(center);
	padding: 0;
	list-style: none;
	margin: 0 25px;

	@include mq(1200) {
		margin: 0 50px;
	}

	> *+*{
		margin-left: 20px;
	}
}

.c-nav__item--with-icon + *{
	margin-left: 20px;

	@include mq(1200) {
		margin-left: 35px;
	}
}

.c-nav__link {
	position: relative;
	@include flex(center);
	@include font-size(small);
	color: palette(text);
	text-decoration: none;
	padding: 10px 15px;

	.is-active &{
		color: palette(primary);
		font-weight: bold;
		letter-spacing: -0.3px;
	}

}


.c-nav__icon {
	display: inline-block;
	width: 28px;
	margin-right: 10px;

	svg{
		width: 100%;
	}
}

.c-nav__icon--enterprising {
	width: 20px;
}

.c-nav__actions {
	@include flex(center);
	list-style: none;
	margin: 0 0 -7px;
}

.c-nav__background{
	position: absolute;
	z-index: -1;

	$backgroundMinHeight: 16;
	top: #{$backgroundMinHeight / 2}px;
	height: calc(100% - #{$backgroundMinHeight}px);

	left: 0;
	width: 100%;

	.c-nav__item--with-icon &{
		$backgroundMinWidth: 40;
		left: #{$backgroundMinWidth / 8 * 5}px;
		width: calc(100% - #{$backgroundMinWidth}px);
	}


	$rotateDeg: 3;
	transform: rotate(#{$rotateDeg * -1}deg);
	.c-nav__item:nth-child(even) &{ transform: rotate(#{$rotateDeg}deg);}

	&:after{
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 12px;

		transform: scale3d(0.5,0.5,1);
		transform-origin: 50% 50%;
		opacity: 0;
		background-color: rgba(palette(primary, 300), 0.2);

		transition: transform 0.4s, opacity 0.3s;
	}

	.is-active:nth-child(1) &{
		&:after{
			background-color: rgba( palette(accent, 'green'), 0.3);
		}
	}
	.is-active:nth-child(2) &{
		&:after{
			background-color: rgba( palette(accent, 'yellow'), 0.3);
		}
	}
	.is-active:nth-child(3) &{
		&:after{
			background-color: rgba( palette(accent, 'red'), 0.3);
		}
	}
	.is-active:nth-child(4) &{
		&:after{
			background-color: rgba( palette(accent, 'turquoise'), 0.3);
		}
	}


	.c-nav__item:hover &, .is-active & {
		&:after {
			opacity: 1;
			transform: scale3d(1.1, 1.2, 1);
		}
	}
}