button,
a {
	&:focus {
		outline: 0;
	}
}

%button-template {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	vertical-align: middle;
}

.button-primary {
	@extend %button-template;
	background: $color-blue;
	border: 0;
	border-radius: 2px;
	color: $color-white;
	padding: 6px 16px;
	transition: background .3s;
	
	&.active,
	&:hover {
		background: darken($color-blue, 6);
	}
	
	.fa-plus {
		font-size: 11px;
		margin-right: 6px;
	}
}

.button-ghost {
	@extend %button-template;
	border: 1px solid #3f3f3f;
	border-radius: 2px;
	color: $color-white;
	padding: 6px 16px;
	background: none;

	&:focus,
	&:hover {
		color: $color-blue-washed;
	}

	.fa-plus {
		font-size: 11px;
		margin-right: 6px;
	}

	&.blue {
		border-color: $color-blue-light;
		border-width: 2px;
		border-radius: 4px;
		color: $color-blue;
		font-weight: 700;

		&:focus,
		&:hover {
			border-color: $color-blue;
			color: darken($color-blue, 10%);
		}
	}
}

.button-link {
	@extend %button-template;
	background-color: transparent;
	border: 0;
	color: $color-white;
	padding: 6px 12px;

	&:focus,
	&:hover {
		color: $color-blue-washed;
	}

	&.active {
		color: $color-blue;
	}
	
	.fa {
		margin-right: 12px;
		vertical-align: middle;
	}
	
	.fa-desktop {
		font-size: 1.5em;
	}
	
	.fa-mobile {
		font-size: 2em;
	}

	.fa-signal {
		font-size: 1.5em;
	}

	&.has-html-errors {
		color: $color-red;
		font-weight: 600;
		padding: 0;
		white-space: nowrap;

		.fa {
			margin-right: 5px;
		}

		&:focus,
		&:hover {
			color: darken($color-red, 10%);
		}
	}
}

.button-close {
	background: none;
	border-radius: 50%;
	border: 0;
	color: $color-black;
	font-size: 37px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	position: absolute;
	right: 5px;
	text-align: center;
	top: 5px;
	transition: .3s;
	vertical-align: middle;
	width: 30px;
}
