// Button

.@{prefix}-btn {
	border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
	border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
	position: relative;
	text-shadow: @text-shadow;

	.inline-block();
	.border-radius(3px);
	.box-shadow(@btn-box-shadow);
	.vertical-gradient(@btn-bg, @btn-bg-hlight);

	&:hover, &:focus {
		color: @btn-text;
		.vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
		border-color: @btn-border-hover;
	}

	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
		cursor: default;
		.box-shadow(none);
		.opacity(@btn-box-disabled-opacity);
	}

	&.@{prefix}-active, &.@{prefix}-active:hover {
		.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
		.box-shadow(@btn-box-shadow-active);
		border-color: darken(@btn-bg, 20%);
	}

	&:active {
		.vertical-gradient(darken(@btn-bg, 7%), darken(@btn-bg-hlight, 5%));
		.box-shadow(@btn-box-shadow-active);
		border-color: @btn-border-active;

	}
}

.@{prefix}-btn button {
	padding: @btn-padding;
	font-size: @font-size;
	line-height: @line-height;
	*line-height: @line-height - 4px;
	cursor: pointer;
	color: @btn-text;
	text-align: center;

	// Fixes for default inner padding of button
	overflow: visible; // IE7
	-webkit-appearance: none; // WebKit
	&::-moz-focus-inner { // Gecko
		border: 0;
		padding: 0;
	}
}

.@{prefix}-btn i {
	text-shadow: 1px 1px @btn-text-shadow;
}

.@{prefix}-primary {
	min-width: 50px;
	color: @btn-primary-text;
	border: 1px solid transparent;
	border-color: @btn-primary-border;
	.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);

	&:hover, &:focus {
		.vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
		border-color: @btn-primary-border-hover;
	}

	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
		cursor: default;
		.box-shadow(none);
		.opacity(@btn-box-disabled-opacity);
	}

	&.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
		.vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
		.box-shadow(@btn-box-shadow-active);
	}
}

.@{prefix}-primary button, .@{prefix}-primary button i {
	color: @btn-primary-text;
	text-shadow: 1px 1px @btn-primary-text-shadow;
}

.@{prefix}-btn .@{prefix}-txt {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.@{prefix}-btn-large button {
	padding: 9px 14px;
	font-size: @font-size + 2px;
	line-height: normal;
	.border-radius(5px);
}

.@{prefix}-btn-large i {
	margin-top: 2px;
}

.@{prefix}-btn-small button {
	padding: 1px 5px;
	font-size: @font-size - 2px;
	*padding-bottom: 2px;
}

.@{prefix}-btn-small i {
	line-height: 20px;
	vertical-align: top;
	*line-height: 18px;
}

.@{prefix}-btn .@{prefix}-caret {
	margin-top: 8px;
	margin-left: 0;
}

.@{prefix}-btn-small .@{prefix}-caret {
	margin-top: 8px;
	margin-left: 0;
}

.@{prefix}-caret {
	.inline-block();
	width: 0; height: 0;
	vertical-align: top;
	border-top: 4px solid @btn-caret-border;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
}

.@{prefix}-disabled .@{prefix}-caret {
	border-top-color: @text-disabled;
}

.@{prefix}-caret.@{prefix}-up {
	border-bottom: 4px solid @btn-caret-border;
	border-top: 0;
}

.@{prefix}-btn-flat {
	border: 0;
	background: transparent;
	.border-radius(0);
	.box-shadow(none);
	filter: none;
}

.@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {
	border: 0;
	background: @menubar-bg-active;
	filter: none;
	.box-shadow(none);
}

.@{prefix}-btn-has-text .@{prefix}-ico {
	padding-right: 5px;
}

// RTL

.@{prefix}-rtl .@{prefix}-btn button {
	direction: rtl;
}