.btn {
	display: inline-flex;
	background: none;
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 0.75em 2em;
	font-weight: 600;
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.btn--primary, a.btn--primary, button.btn--primary {
	border-color: $brand-primary-color;
	background-color: white;

	&:hover, &:active {
		color: white;
		border-color: $brand-primary-color;
		background-color: $brand-primary-color;
	}

	.inverse & {
		&:hover {
			color: white;
		}
	}
}