.button-dimensions( @dim-height, @dim-padding, @dim-font ) {
	padding: 0 @dim-padding;
	height: @dim-height;
	line-height: @dim-height;
	font-size: @dim-font;
	
	.fusion-button-text-left {
		padding-left: @dim-height;
	}
	
	.fusion-button-text-right {
		padding-right: @dim-height;
	}	
	
	.button-icon-divider-left {
		padding: 0 ( @dim-height - @dim-font ) / 2;
	}
	
	.button-icon-divider-right {
		padding: 0 ( @dim-height - @dim-font ) / 2;
	}	
}

.button-colors( @grad-bottom-color, @grad-top-color, @border-color, @text-color ) {
    background: @grad-top-color;
    background-image: -webkit-gradient( linear, left bottom, left top, from( @grad-bottom-color ), to( @grad-top-color ) );
    background-image: -webkit-linear-gradient( bottom, @grad-bottom-color, @grad-top-color );
    background-image:    -moz-linear-gradient( bottom, @grad-bottom-color, @grad-top-color );
    background-image:      -o-linear-gradient( bottom, @grad-bottom-color, @grad-top-color );
    background-image: linear-gradient( to top, @grad-bottom-color, @grad-top-color );
    
    border: 1px solid @border-color;
    color: @text-color;
    
    .button-icon-divider-left,
    .button-icon-divider-right {
    	border-color: @border-color;
    }
}

.button-3d-effect( @3d-highlight-color, @3d-color ) {
	&.button-small {
		.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 2px 0px @3d-color, 1px 4px 4px 2px rgba(0,0,0,0.3) );
		
		&:active {
			.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 1px 0px @3d-color, 1px 4px 4px 2px rgba(0,0,0,0.3) );
		}
	}

	&.button-medium {
		.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 3px 0px @3d-color, 1px 5px 5px 3px rgba(0,0,0,0.3) );
		
		&:active {
			.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 1px 0px @3d-color, 1px 5px 5px 3px rgba(0,0,0,0.3) );
		}		
	}

	&.button-large {
		.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 4px 0px @3d-color, 1px 6px 6px 3px rgba(0,0,0,0.3) );
		
		&:active {
			.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 1px 0px @3d-color, 1px 6px 6px 3px rgba(0,0,0,0.3) );
		}			
	}

	&.button-xlarge {
		.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 5px 0px @3d-color, 1px 7px 7px 3px rgba(0,0,0,0.3) );
		
		&:active {
			.button-box-shadow( inset 0px 1px 0px @3d-highlight-color, 0px 2px 0px @3d-color, 1px 7px 7px 3px rgba(0,0,0,0.3) );
		}				
	}
}

.button-box-shadow( @shadow-arg-1, @shadow-arg-2, @shadow-arg-3 ) {
	-webkit-box-shadow: @shadow-arg-1, @shadow-arg-2, @shadow-arg-3;
	-moz-box-shadow: 	@shadow-arg-1, @shadow-arg-2, @shadow-arg-3;
	box-shadow: 		@shadow-arg-1, @shadow-arg-2, @shadow-arg-3;
}

.fusion-button {
	display: inline-block;
	position: relative;
	outline: 0;
	overflow: hidden;
	.box-shadow( 0 1px 1px rgba(0, 0, 0, 0.2) );
	border: 1px solid rgba( 0, 0, 0, 0 );
	text-align: center;
	text-shadow: 0 1px 0 #fff;		
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;

	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;	
	-o-transition: all .2s;
	transition: all .2s;
	
	&:hover {
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-ms-transition: all .3s;	
		-o-transition: all .3s;
		transition: all .3s;
	}
	
	&:focus {
		outline: 0;
	}
}

#wrapper .button-square {
	border-radius: 0;
}

#wrapper .button-round {
	border-radius: 2px;
	
	&.button-3d {
		border-radius: 4px;
	}
}

#wrapper .button-pill {
	border-radius: 25px !important;
}

.button-small, .button.small {
	.button-dimensions( 32px, 20px, 12px );
	
	&.button-3d:active {
		top: 2px;
	}
}

.button-medium, .button.medium,.woocommerce form.checkout #place_order {
	.button-dimensions( 38px, 23px, 13px );
	
	&.button-3d:active {
		top: 3px;
	}	
}

.button-large, .button.large {
	.button-dimensions( 43px, 29px, 14px );
	
	&.button-3d:active {
		top: 4px;
	}	
}

.button-xlarge, .button.xlarge {
	.button-dimensions( 55px, 40px, 18px );
	
	&.button-3d:active {
		top: 6px;
	}	
}

button.fusion-button.button-3d:active {
	.button-box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.2 ), 1px 2px 3px 2px rgba(0,0,0,0.3), 0 0 0 #000 );
}

.button-icon-left {
	margin-right: 10px;
}

.button-icon-right {
	margin-left: 10px;
}

.button-icon-divider-left,
.button-icon-divider-right {
	display: inline-block;
	position: absolute;
	top: 0;
	height: inherit;
	
	i {
		position: relative;
		//top: 2px;
	}
}

.button-icon-divider-left {
	left: 0;
	border-right: 1px solid;
}

.button-icon-divider-right {
	right: 0;
	border-left: 1px solid;
}

.fusion-button.button-green, 
.fusion-button.button-green.wpcf7-submit,
.button.green, {
	.button-colors( #AAD75D, #D1E990, #9dba60, #54770f );
	
	&:hover,
	&:focus,
	&:active {
		.button-colors( #D1E990, #AAD75D, #9dba60, #54770f );
		
		.no-cssgradients & {
			background-color: #AAD75D;
		}
	}
	
	.no-cssgradients & {
		background-color: #D1E990;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #54770f );
	}
}

.fusion-button.button-darkgreen, 
.fusion-button.button-darkgreen.wpcf7-submit,
.button.darkgreen {
	.button-colors( #a8c76a, #d0e0a5, #9dba60, #54770f );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #d0e0a5, #a8c76a, #9dba60, #54770f );	
		
		.no-cssgradients & {
			background-color: #a8c76a;
		}
	}
	
	.no-cssgradients & {
		background-color: #d0e0a5;
	}
	
	&.button-3d {
		.button-3d-effect( #fff, #54770f );
	}		
}

.fusion-button.button-orange, 
.fusion-button.button-orange.wpcf7-submit,
.button.orange {	
	.button-colors( #f8bf56, #fbdc86, #c0830b, #c0830b );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #fbdc86, #f8bf56, #c0830b, #c0830b );	
		
		.no-cssgradients & {
			background-color: #f8bf56;
		}
	}
	
	.no-cssgradients & {
		background-color: #fbdc86;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #c0830b );
	}	
}

.fusion-button.button-blue,
.fusion-button.button-blue.wpcf7-submit,
.button.blue {	
	.button-colors( #76c7f1, #b5e0f7, #1172c1, #1172c1 );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #b5e0f7, #76c7f1, #1172c1, #1172c1 );	
		
		.no-cssgradients & {
			background-color: #76c7f1;
		}
	}
	
	.no-cssgradients & {
		background-color: #b5e0f7;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #1172c1 );
	}		
}

.fusion-button.button.button-darkblue, 
.fusion-button.button.button-darkblue.wpcf7-submit,
.button.darkblue {	
	.button-colors( #2A6496, #428BCA, #072c5e, #072c5e );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #428BCA, #2A6496, #072c5e, #072c5e );		
		
		.no-cssgradients & {
			background-color: #2A6496;
		}
	}
	
	.no-cssgradients & {
		background-color: #428BCA;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #072c5e );
	}		
}

.fusion-button.button-red, 
.fusion-button.button-red.wpcf7-submit,
.button.red {	
	.button-colors( #fc7d7d, #fd9c9c, #9d1111, #9d1111 );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #fd9c9c, #fc7d7d, #9d1111, #9d1111 );	
		
		.no-cssgradients & {
			background-color: #fc7d7d;
		}
	}
	
	.no-cssgradients & {
		background-color: #fd9c9c;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #9d1111 );
	}	
}

.fusion-button.button-darkred, 
.fusion-button.button-darkred.wpcf7-submit,
.button.darkred {	
	.button-colors( #b01818, #fe2020, #690e0e, #690e0e );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #fe2020, #b01818, #690e0e, #690e0e );		
		
		.no-cssgradients & {
			background-color: #b01818;
		}
	}
	
	.no-cssgradients & {
		background-color: #fe2020;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #690e0e );
	}	
}

.fusion-button.button-pink, 
.fusion-button.button-pink.wpcf7-submit,
.button.pink {	
	.button-colors( #fc84c8, #fda1d5, #a31366, #a31366 );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #fda1d5, #fc84c8, #a31366, #a31366 );		
		
		.no-cssgradients & {
			background-color: #fc84c8;
		}
	}
	
	.no-cssgradients & {
		background-color: #fda1d5;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #a31366 );
	}		
}

.fusion-button.button-lightgray, 
.fusion-button.button-lightgray.wpcf7-submit,
.button.lightgray {	
	.button-colors( #f0f0f0, #fbfbfb, #ababab, #ababab );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #fbfbfb, #f0f0f0, #ababab, #ababab );	
		
		.no-cssgradients & {
			background-color: #f0f0f0;
		}
	}
	
	.no-cssgradients & {
		background-color: #fbfbfb;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #ababab );
	}			
}

.fusion-button.button-darkgray, 
.fusion-button.button-darkgray.wpcf7-submit,
.button.darkgray {	
	.button-colors( #9e9e9e, #c0c0c0, #434c50, #434c50 );
	
	&:hover,
	&:focus,
	&:active{
		.button-colors( #c0c0c0, #9e9e9e, #434c50, #434c50 );
		
		.no-cssgradients & {
			background-color: #9e9e9e;
		}
	}
	
	.no-cssgradients & {
		background-color: #c0c0c0;
	}	
	
	&.button-3d {
		.button-3d-effect( #fff, #434c50 );
	}		
}