.button{
	background-color: $secondary-color;
	border: 0;
	border-radius: $control-border-radius;
	color: $base-font-color;
	padding: $control-padding-y $control-padding-x;
	transition: background-color .15s;
	height: 2.5rem;
	display: inline-block;
	line-height: 1.5;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;

	&:hover{
		color: $base-font-color;
		background-color: $secondary-color-dark;
	}
	&:active{
		background-color: $secondary-color-dark;
	}
	&:focus{
		box-shadow: 0 0 3px $control-focus-color;
    }
}

.button.is-small{
	padding: $control-padding-y $control-padding-x/1.5;
	height: 2rem;
	font-size: .875rem;
}

.button.is-large{
	height: 3rem;
	font-size: 1.25rem;
}

.buttons .button{
	margin-right: .25rem;
	margin-bottom: .25rem;
}

.button.is-primary{
	background-color: $primary-color;
	color: white;

	&:hover{
		color: white;
		background-color: $primary-color-dark;
	}
	&:active{
		background-color: $primary-color-dark;
	}
}

.button.is-danger{
	background-color: map-get($red-colors , '100');
	color: map-get($red-colors , '500');

	&:hover{
		background-color: map-get($red-colors , '200');
		color: map-get($red-colors , '600');
	}
	&:active{
		background-color: map-get($red-colors , '200');
		color: map-get($red-colors , '600');
	}
}