.headerNav {
	position         : fixed;
	top              : 32px;
	left             : 0px;
	max-width        : 40vw;
	max-height       : calc(100vh - 32px);
	padding          : 5px 10px;
	overflow-y       : auto;
	background-color : #CCCCCC;
	border-radius    : 5px;
	&.active {
		padding-bottom : 10px;
		.navIcon { padding-bottom : 10px; }
	}
	.navIcon { cursor : pointer; }
	li {
		list-style-type : none;
		a {
			display         : inline-block;
			width           : 100%;
			padding         : 2px;
			font-family     : 'Open Sans';
			font-size       : 12px;
			color           : inherit;
			text-decoration : none;
			cursor          : pointer;
			&:hover { text-decoration : underline; }
			&.pageLink { font-weight : 900; }

			@depths: 0,1,2,3,4,5,6,7;

			each(@depths, {
				&.depth-@{value} {
					padding-left: ((@value) * 0.5em);
				}
			});
		}
	}
}