//
// Button variants
// ==============================

// Inspired by https://github.com/twbs/bootstrap


// Fill

.button-variant(@color; @background) {
	#gradient .vertical(lighten(@background, 5%), darken(@background, 10%));
	background-color: @background;
	border-color: darken(@background, 5%) darken(@background, 10%) darken(@background, 15%);
	box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px;
	color: @color;
	font-weight: 400;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

	&:enabled {
		&:hover {
			background-image: none;
			background-color: darken(@background, 5%);
			border-color: @background darken(@background, 5%) darken(@background, 10%);
			box-shadow: 0 1px 0 rgba(0,0,0,0.1);
			color: @color;
			outline: none;
		}
		&:active,
		&.active {
			background-color: darken(@background, 4%);
			background-image: none;
			border-color: darken(@background, 15%) darken(@background, 10%) darken(@background, 5%);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
		}
	}
}


// Default

.button-default-variant(@color) {
	#gradient .vertical(#fafafa, #eaeaea);
	border: 1px solid @input-border-color;
	border-color: @input-border-color darken(@input-border-color, 6%) darken(@input-border-color, 12%);
	color: @color;

	&:enabled {
		&:hover {
			#gradient .vertical(lighten(@color, 4%), darken(@color, 4%));
			border-color: darken(@color, 6%) darken(@color, 12%) darken(@color, 18%);
			box-shadow: 0 1px 0 rgba(0,0,0,0.1);
			color: white;
		}
		&:active {
			background-color: darken(@color, 4%);
			background-image: none;
			border-color: darken(@color, 18%) darken(@color, 12%) darken(@color, 6%);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			color: white;
		}
	}

	&.disabled,
	&[disabled] {
		background-color: @button-default-disabled-bg;
	}
}


// Hollow

.button-hollow-variant(@color; @border) {
	background: none;
	border-color: @border;
	color: @color;

	&:enabled {
		&:hover {
			background-image: none;
			border-color: darken(@border, 10%);
			color: @color;
			outline: none;
		}
		&:hover {
			background-color: mix(@border, @body-bg, 8%);
		}
		&:active {
			background-color: fade(@border, 20%);
			border-color: darken(@border, 20%);
			box-shadow: none;
		}
	}
}



// Link

.button-link-variant(@color; @hover-color; @hover-decoration) {
	color: @color;
	font-weight: normal;

	&,
	&:active,
	&.active,
	&[disabled],
	fieldset[disabled] & {
		.box-shadow(none);
		background-color: transparent;
	}
	&,
	&:hover,
	&:active {
		border-color: transparent;
		outline: none;
	}
	&:enabled {
		&:hover {
			color: @hover-color;
			text-decoration: @hover-decoration;
		}
	}
}