
.header__fast-nav {
	text-transform: uppercase;
	font-size: 1.2rem;
	display: inline-block;
	float: left;
	padding: 8px 15px;
	margin: 10px;
	margin-left: 0;
	background: $color--graybutton;
	color: $color--graydark;
	cursor: pointer;
	transition: all 0.2s linear;
	box-shadow: $shadows-light;

	&:hover {
		text-decoration: none;
		background-color: darken($color--graybutton, 2%);
		box-shadow: none;
	}

}

.header__filter-button {
	@extend .header__fast-nav;
	background-color: $color--additional;
	color: $color--white;
	float: left;
	margin: 0.2rem;
	box-shadow: $shadows-visible;
	outline: none;
	border: none;
	.turn-off-word { display: none; }
	&:hover {
		background-color: darken($color--additional, 5%);
	}
	&:before {
		content: $fa-var-filter;
		font-family: 'FontAwesome';
		display: inline-block;
		margin: 0px 10px 0px -5px;
	}
	&.active {
		box-shadow: $shadows-inset;
		background-color: darken($color--additional, 5%);
		.turn-off-word { display: inline; }
		&:hover {
			box-shadow: none;
			background-color: $color--additional;
		}
	}
}

.header__fast-nav--add {
	@extend .header__fast-nav;
	&:before {
		content: $fa-var-plus;
		font-family: 'FontAwesome';
		display: inline-block;
		margin: 0px 10px 0px -5px;
	}
}
.header__fast-nav--export {
	@extend .header__fast-nav;
	&:before {
		content: $fa-var-download;
		font-family: 'FontAwesome';
		display: inline-block;
		margin: 0px 10px 0px -5px;
	}
}