.button:not( .is-unstyled ) {
	@extend %bold;
	display: inline-block;
	padding: 0.7rem 1.2rem;
	background-color: #fff;
	border: 1px solid $border-color;
	border-radius: $border-radius;
    font-size: 0.8rem;
    text-transform: uppercase;
	cursor: pointer;
	color: $font-color-body;
	line-height: 1;

	&[disabled] {
		cursor: default;
		cursor: not-allowed;
		opacity: 0.4;
	}

	&:not( [disabled] ):hover {
		border-color: $border-hover-color;
	}

	&:active {
		box-shadow: inset 1px 1px 2px $border-color;
	}

	&.is-primary {
		background-color: $color-blue;
		border-color: $color-blue;
		color: #fff;

		&:not( [disabled] ):hover {
			background-color: lighten( $color-blue, 10% );
			border-color: lighten( $color-blue, 10% );
		}

		&:active {
			box-shadow: inset 1px 1px 2px darken( $color-blue, 5% );
		}
	}

	&.is-dangerous {
		background-color: $color-red;
		border-color: $color-red;
		color: #fff;

		&:not( [disabled] ):hover {
			background-color: lighten( $color-red, 5% );
			border-color: lighten( $color-red, 5% );
		}

		&:active {
			box-shadow: inset 1px 1px 2px darken( $color-red, 5% );
		}
	}
}
