Element mixin

_element.scss

$white: #fff;
$black: #000;
$radius: 5px;
$sans: "Helvetica", sans-serif;
$default: #88a23d;

@mixin element-base {
	@include background-clip;
	@include transition(none);
	@include appearance(none);
	position: relative;
	font-family: $sans;
	font-weight: 600; }
	
%element-base {
	@include element-base; }
	
@mixin element(
	$main-color: #888,
	$text-color: $white,
	$radius: $radius, 
	$subtle: false, 
	$shadow: true, 
	$style: true, 
	$size: small, 
	$hover: false,
	$font-size: false,
	$display: inline-block) {
	
	@if saturation($main-color) < 1% {
		@if lightness($main-color) > 80% {
			$text-color: #666; } }
	@else {
		$text-color: $text-color;
		$text-color: rgba($text-color, .9); }
	
	// normal state
	$light-color: scale-color($main-color, $lightness: if-bright($main-color, 25%, 20%));
	$dark-color: scale-color($main-color, $lightness: if-bright($main-color, -20%, -25%));
	$shadow-color: scale-color($dark-color, $lightness: if-bright($main-color, -20%, -25%));
	
	// hover state
	$hover-main-color: scale-color($main-color, $lightness: 15%);
	$hover-light-color: scale-color($light-color, $lightness: if-bright($main-color, 15%, 20%));
	$hover-dark-color: scale-color($dark-color, $lightness: 15%);
	$hover-shadow-color: $dark-color;
	
	// active state
	$active-main-color: $main-color;
	$active-light-color: $light-color;
	$active-dark-color: scale-color($dark-color, $lightness: -25%);
	$active-shadow-color: scale-color($active-dark-color, $lightness: -25%);
	
	@extend %element-base;
	
	@if $display == block { 
		display: block; }
	@else { 
		display: inline-block; }
	
	@if $subtle == true { 
		color: $subtle-color; }
	@else if $style == true { 
		color: $text-color; }
	
	@if $size == xlarge {
		padding: em($line, $base-font-size) em($line*3, $base-font-size);
		@if $font-size == true {
			font-size: 150%; } }
			
	@else if $size == large {
		padding: em($base-px*1.5, $base-font-size) em($line*2, $base-font-size);
		@if $font-size == true {
			font-size: 125%; } }
		
	@else if $size == normal {
		padding: em($base-px, $base-font-size) em($line*1.5, $base-font-size); }
		
	@else if $size == small {
		padding: em($base-px/1.3333333333, $base-font-size) em($line, $base-font-size);
		@if $font-size == true {
			font-size: 90%; } }
			
	@else if $size == xsmall {
		padding: em($base-px/2, $base-font-size) em($line/1.5, $base-font-size);
		@if $font-size == true {
			font-size: 80%; } }
			
	@else if $size == xxsmall {
		padding: em($base-px/4, $base-font-size) em($line/2, $base-font-size);
		@if $font-size == true {
			font-size: 80%; } }
	
	@if $radius != none OR $radius == false {
		@include border-radius($radius); }
	
	// you may just want a button without style 
	// as sometimes you may just want a nice start
	// padding, etc
	@if $style == true {
		// subtle start
		@if $subtle == true {
			@include box-shadow(inset 0 0 0 1px fade-out($subtle-color, 1));
			.no-boxshadow & {
				border: 1px solid transparent; }
			.no-cssgradients & {
				background: $active-main-color; } } // close $subtle true
		// non subtle start		
		@else {
			@include background(
				linear-gradient(
					rgba($main-color, .8) 10%,
					rgba($dark-color, .8) 70%), $main-color);
	
			@if $shadow == true {		
				@include box-shadow(
					inset 0 0 0 1px $shadow-color,
					inset 0 2px 0 $light-color,
					inset 0 -1px 3px $dark-color,
					inset -1px -3px 12px -3px rgba($shadow-color, .2),
					inset 1px -3px 12px -3px rgba($shadow-color, .2),
					0 1px 2px rgba($black, .2));
				@if saturation($main-color) < 1% {
					@if lightness($main-color) > 80% {
						text-shadow: 0 1px 1px rgba($light-color, .6); }
					@else {
						text-shadow: 0 1px 1px rgba($active-dark-color, .6); } }
				@else {
					text-shadow: 0 1px 1px rgba($active-shadow-color, .6); } }
			
			// modernizr stuff
			.no-boxshadow & {
				border: 1px solid $shadow-color; }
			.no-cssgradients & {
				background: $main-color; }
		} // close else
		@if $hover == true {
			&:hover, &:focus {
				color: $text-color;
				
				@include background(
					linear-gradient(
						rgba($hover-main-color, .8) 0%,
						rgba($hover-dark-color, .8) 60%), $hover-main-color);
				
				@if $shadow == true {		
					@include box-shadow(
						inset 0 0 0 1px $hover-shadow-color,
						inset 0 2px 0 $hover-light-color,
						inset 0 -1px 3px $hover-dark-color,
						inset -1px -3px 12px -3px rgba($hover-shadow-color, .2),
					inset 1px -3px 12px -3px rgba($hover-shadow-color, .2),
						0 1px 2px rgba($black, .25));
					@if saturation($main-color) < 1% {
						@if lightness($main-color) > 80% {
							text-shadow: 0 1px 1px rgba($hover-light-color, .6); }
						@else {
							text-shadow: 0 1px 1px rgba($hover-shadow-color, .6); } }
					@else {
						text-shadow: 0 1px 1px rgba($hover-shadow-color, .6); } }
				
				// modernizr stuff
				.no-boxshadow & {
					border: 1px solid $hover-shadow-color; }
				.no-cssgradients & {
					background: $hover-main-color; } }
					
			&:active {
				color: $text-color;

				@include background(
					linear-gradient(
						rgba($active-dark-color, .4),
						rgba($main-color, .8)), $main-color);

				@if $shadow == true {		
					@include box-shadow(
						inset 0 1px 3px $active-shadow-color,
						inset 0 1px 0 1px $active-dark-color,
						inset 0 2px 3px $active-dark-color,
						inset -1px -3px 12px -3px rgba($active-shadow-color, .2),
						inset 1px -3px 12px -3px rgba($active-shadow-color, .2),
						0 1px 1px rgba($white, .5));

				@if saturation($main-color) < 1% {
					@if lightness($main-color) > 80% {
						text-shadow: 0 1px 1px rgba($active-light-color, .6); }
					@else {
						text-shadow: 0 1px 1px scale-color(rgba($active-shadow-color, .6), $lightness: -10%); } }
				@else {
					text-shadow: 0 1px 1px scale-color(rgba($active-shadow-color, .6), $lightness: -10%); } }
					
				.no-boxshadow & {
					border: 1px solid $active-shadow-color; }
				.no-cssgradients & {
					background: $active-main-color; } } }
	} // close $style
}