.c-subnav {
	background-color: palette(neutral, 100);
	padding: column(1);
}


.c-subnav__header {
	margin: 0;
}


.c-subnav__list {
	margin-top: space(5);
	list-style-type: none;
	margin-left: 0;
}


.c-subnav__link {
	position: relative;
	display: flex;
	padding: space(1) 0;
	color: palette(neutral, 500);
	text-decoration: none;
	cursor: pointer;
	transition: color 250ms;

	&:hover {
		color: palette(neutral, 900);
	}

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

	&::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid palette(neutral, 300);
	}
}


.c-subnav__icon {
	opacity: 0;
	align-items: center;
	margin-left: space(2);
	color: palette(neutral, 300);
	transform: translateX(#{space(-2)});
	transition: all 250ms ease-out;

	.c-subnav__link:hover & {
		opacity: 1;
		transform: none;
		color: palette(neutral, 900);
	}
}


// Active state of the subnav item
.c-subnav__item.is-active {
	.c-subnav__link {
		color: palette(neutral, 1000);
		font-weight: bold;

		&::before {
			border-color: palette(neutral, 900);
			border-width: 2px;
		}
	}

	.c-subnav__icon {
		opacity: 0;
	}
}