@btn-theme: flat;
@btn-align: left;
@btn-size: standard;
@btn-clr: #333;
@btn-base: #fff;
@btn-crnr: 0em;

.iw-so-article-button {
	.btn-align() when (@btn-align = left) { text-align: left }
	.btn-align() when (@btn-align = right) { text-align: right }
	.btn-align() when (@btn-align = center) { text-align: center }
	.btn-align();
}

.iw-so-article-btn {

	border-radius: @btn-crnr;
	color: @btn-base;
	text-decoration: none;

	.btn-size() when (@btn-size = tiny) {
		font-size: 0.75em;
		padding: 0.625em 1.25em;
	}
	.btn-size() when (@btn-size = small) {
		font-size: 0.9em;
		padding: 0.875em 1.75em;
	}
	.btn-size() when (@btn-size = standard) {
		font-size: 1.2em;
		padding: 1em 2em ;
	}
	.btn-size() when (@btn-size = large) {
		font-size: 1.75em;
		padding: 1.125em 2.25em;
	}
	.btn-size();

	.btn-theme() when (@btn-theme = classic) {
		.gradient(@btn-clr, darken(@btn-clr, 15%), @btn-clr);
		border: 1px solid;
		border-color: darken(@btn-clr, 8%) darken(@btn-clr, 10%) darken(@btn-clr, 13%) darken(@btn-clr, 10%);
	}
	.btn-theme() when (@btn-theme = flat) {
		background: @btn-clr;
		border: 1px solid @btn-clr;
	}
	.btn-theme() when (@btn-theme = outline) {
		background: transparent;
		border: 2px solid @btn-clr;
		color: @btn-clr;
	}
	.btn-theme() when (@btn-theme = threed) {
		background: @btn-clr;
		box-shadow: 0px 5px 0px 0px darken(@btn-clr, 10%);
	}
	.btn-theme() when (@btn-theme = shadow) {
		.drop-shadow(1px, 1px, 4px, 0.4);
		background: @btn-clr;
		border: 1px solid @btn-clr;
	}
	.btn-theme() when (@btn-theme = deline) {
		background: @btn-clr;
		border: 2px solid @btn-clr;
	}
	.btn-theme();

	&:hover {
		.dft-theme() when (@btn-theme = classic) {
			color: @btn-base;
		}
		.dft-theme() when (@btn-theme = flat) {
			color: @btn-base;
		}
		.dft-theme() when (@btn-theme = outline) {
			color: @btn-clr;
		}
		.dft-theme() when (@btn-theme = threed) {
			color: @btn-base;
		}
		.dft-theme() when (@btn-theme = shadow) {
			color: @btn-base;
		}
		.dft-theme() when (@btn-theme = deline) {
			color: @btn-base;
		}
		.dft-theme();
	}
}
.iw-so-article-btn-hover {
	&:hover {
		color: @btn-base;
		.btn-hover() when (@btn-theme = classic) {
			.gradient(lighten(@btn-clr, 2%), darken(@btn-clr, 20%), lighten(@btn-clr, 2%));
			border-color: darken(@btn-clr, 4%) darken(@btn-clr, 6%) darken(@btn-clr, 18%) darken(@btn-clr, 6%);
			color: @btn-base;
		}
		.btn-hover() when (@btn-theme = flat) {
			background: darken(@btn-clr, 7.5%);
			border-color: darken(@btn-clr, 7.5%);
		}
		.btn-hover() when (@btn-theme = outline) {
			background: @btn-clr;
			color: @btn-base;
		}
		.btn-hover() when (@btn-theme = threed) {
			background: lighten(@btn-clr, 10%);
		}
		.btn-hover() when (@btn-theme = shadow) {
			background: lighten(@btn-clr, 5%);
			border-color: lighten(@btn-clr, 5%);
			.drop-shadow(1px, 1px, 8px, 0.4);
		}
		.btn-hover() when (@btn-theme = deline) {
			color: @btn-clr;
			background: transparent;
		}
		.btn-hover();
	}
}
.iw-so-article-btn-click {
	&:active {
		.btn-active() when (@btn-theme = classic) {
			.box-shadow(inset 0 3px 25px darken(@btn-clr, 25%));
		}
		.btn-active() when (@btn-theme = flat) {
			background: darken(@btn-clr, 15%);
			border-color: darken(@btn-clr, 15%);
		}
		.btn-active() when (@btn-theme = outline) {
			background: lighten(@btn-clr, 10%);
			border-color: lighten(@btn-clr, 10%);
			color: @btn-base;
		}
		.btn-active() when (@btn-theme = threed) {
			-webkit-transform: translate(0, 5px);
			-moz-transform: translate(0, 5px);
			-ms-transform: translate(0, 5px);
			-o-transform: translate(0, 5px);
			transform: translate(0, 5px);
			box-shadow: 0px 1px 0px 0px;
		}
		.btn-active() when (@btn-theme = shadow) {
			background: darken(@btn-clr, 4%);
			border-color: darken(@btn-clr, 4%);
		}
		.btn-active() when (@btn-theme = deline) {
			color: lighten(@btn-clr, 20%);
			border-color: lighten(@btn-clr, 20%);
			background: transparent;
		}
		.btn-active();
	}
}