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

$c-subnav: (
	'border-color': 		palette(border, 300),
	'color':				palette(neutral, 500),
	'hover-color':			palette(feedback, action),
	'active-color':			palette(primary),
);

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


.c-subnav {
	height: 100%;
}


.c-subnav--boxed {
	background-color: map-get($site-intro, 'subnavBgColor');
	padding: space(10) $site-gutter-width;

	@include mq(m, l){
		padding-left: 25%;
	}
}


.c-subnav__header {
	margin: 0;
}


.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 {
	@include disableOutlineForMouse;
	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: currentColor;
		outline-style: solid;
		outline-offset: 1px;
		outline-width: 2px;
	}

	&::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 {
	opacity: 0;
	align-items: center;
	margin-left: space(2);
	color: map-get($c-subnav, 'border-color');
	transform: translateX(#{space(-2)});
	transition: all 250ms ease-out;

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


// Active state of the subnav item
.c-subnav__item.is-active {
	.c-subnav__link {
		color: map-get($c-subnav, 'active-color');
		font-weight: bold;

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

	.c-subnav__icon {
		opacity: 0;
	}
}