// Component settings: Subnav
// ------------------------------------------

$c-subnav: (
	'bgcolor':					palette(neutral),
	'border-color': 		palette(border),
	'color':						palette(text, 2),
	'hover-color':			palette(text),
	'active-color':			palette(primary),
);

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


.c-subnav {
	height: 100%;
	padding: 1px $site-gutter-width space(10) $site-gutter-width;
	background-color: map-get($c-subnav, 'bgcolor');

	@include mq(m){
		padding-top: space(5);
	}

	@include mq(m, l){
		.l-split--breakout-on-m & {
			padding-left: column(1, 4);
		}
	}

	@include mq(l){
		padding-left: column(1, 6);
		padding-right: column(1, 6);
	}
}

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

.c-subnav__item--back {
	margin-top: space(3);
}

.c-subnav__link {
	position: relative;
	display: flex;
	padding: space(1) 0;
	color: map-get($c-subnav, 'color');
	text-decoration: none;
	cursor: pointer;
	transition: color 250ms;

	&:hover {
		color: map-get($c-subnav, 'hover-color');
	}

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

	.c-subnav__item.is-active & {
		color: map-get($c-subnav, 'active-color');
		font-weight: 600;
	}

	&::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid map-get($c-subnav, 'border-color');

		.c-subnav__item.is-active & {
			border-color: map-get($c-subnav, 'active-color');
			border-width: 2px;
		}
	}
}

.c-subnav__icon {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	color: map-get($c-subnav, 'border-color');
	transform: translateX(#{space(-1)});
	transition-property: transform, color;
	transition-duration: 250ms;

	.c-subnav__link:hover & {
		transform: none;
		color: map-get($c-subnav, 'hover-color');
	}

	.c-subnav__item.is-active & {
		display: none;
	}
}