//
// Buttons
// --------------------------------------------------


.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	-webkit-appearance: none;
	padding: 0.625em 1.25em;
	margin: 0 0 0.625em;
	font-family: inherit;
	font-size: 1em;
	border: none;
	outline: none;
	background: @baseColor;
	line-height: 100%;
	cursor: pointer;
	text-decoration: none;
	.inline-block();

	&:hover {
		background: darken(@baseColor, 3%);
		text-decoration: none;
	}
	&:active {
		background: darken(@baseColor, 6%);
	}

	&.disabled {
		background: lighten(@baseColor, 2.5%);
		color: darken(@baseColor, 15%);
		cursor: default;
	}
}

button.primary,
.button-primary {
	background: @primaryColor;
	color: white;

	&:hover {
		background: darken(@primaryColor, 5%);
	}
	&:active {
		background: darken(@primaryColor, 10%);
	}

	&.disabled {
		background: lighten(@primaryColor, 20%);
		color: @primaryColor;
		cursor: default;
	}
}

button.secondary,
.button-secondary {
	background: @secondaryColor;
	color: white;

	&:hover {
		background: darken(@secondaryColor, 5%);
	}
	&:active {
		background: darken(@secondaryColor, 10%);
	}

	&.disabled {
		background: lighten(@secondaryColor, 20%);
		color: @secondaryColor;
		cursor: default;
	}
}