/* Mixins for visual effects in CSS3 */

@import "../settings/colors";

// ----------------------------------------------------------------------------
// Gradients
// ----------------------------------------------------------------------------
.vertical-gradient(@startColor: lighten(@agoraGray, 95%), @endColor: @agoraGray, @startPos: 0, @endPos: 100%) {
	background-color: @endColor;
	background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
	background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
}

// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------

.buttonColors(@baseColor: @agoraGray) {
	// Background color
	.vertical-gradient(lighten(@baseColor, 7.5%), @baseColor);

	border: 1px solid darken(@baseColor, 2%);

	&:hover,
	&.mw-ui-hover {
		.vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%));
		text-decoration: none;
	}

	&:active,
	&.mw-ui-active {
		background-image: none;
		background-color: darken(@baseColor, 3%);
	}

	&:disabled,
	&.mw-ui-disabled {
		background-image: none;
		background-color: @baseColor;
		opacity: 0.5;
	}
}

.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) {
	color: #000;
}

.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) {
	color: #fff;
}