/* _effects.scss */

/* Mixins for visual effects in CSS3 */

// ----------------------------------------------------------------------------
// Gradients
// ----------------------------------------------------------------------------
@mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) {
	// Fallback
    background-color: $endColor;
    *background-color: $endColor; // IE7

    // IE6-8
    @include filter-gradient($startColor, $endColor, vertical);

    // IE9+, Opera, Gecko, WebKit
    @include background-image(linear-gradient(top, $startColor, $endColor));
}

// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------
@mixin buttonColors ($baseColor: $agoraGray) {
	// Background color
	@include vertical-gradient(lighten($baseColor, 7.5%), $baseColor);

	@if $baseColor == $agoraGray {
		color: black;
		@include text-shadow(0 1px 1px rgba($baseColor, 0.3));
	} @else {
		color: white;
		@include text-shadow(0 1px 1px rgba($baseColor, 0.75));
	}

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

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

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

		text-shadow: none;
	}

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