.c-nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}


.c-nav__list {
	display: none;

	@include mq(c-nav__list) {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 0;
		list-style: none;
		margin: 0 auto;
	}
}


.c-nav__item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 0 auto;
	margin-top: 0;

	& + & {
		margin-left: 30px;
	}
}


.c-nav__label {
	display: flex;
	align-items: center;
	padding: space(1) 0;
	color: palette(neutral, 0);
	cursor: pointer;

	&::after {
		content: '';
		display: block;
		width: 10px;
		height: 5px;
		margin-left: space(1);
		background-image: url('/img/icons/arrow-dropdown.svg');
	}

	&.is-active {
		color: palette(secondary, 300);
	}
}


.c-nav__link {
	display: inline-block;
	padding: space(1) 0;
	color: palette(neutral, 0);
	text-decoration: none;
	transition: color 100ms linear;

	&:hover {
		color: rgba(palette(neutral, 0), 0.6);
	}

	.is-active & {
		color: palette(secondary, 300);
	}
}


.c-nav__icon {
	margin-left: 7px;
	color: palette(action);
}


.c-nav__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0 0 0 space(4);
}


/**
 * -----------------------------------------------------------------------------
 * Extra MQ for tweaking some spacing when enough room is available
 * -----------------------------------------------------------------------------
 */
@include mq(1032) {
	.c-nav__list {
	}
	.c-nav__actions {
	}
}