// Button

.mce-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%));
	}

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

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

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

.mce-btn button {
	padding: 4px 10px;
	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;
	}
}

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

.mce-primary {
	min-width: 50px;
	color: @btn-primary-text;
	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;
	.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);

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

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

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

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

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

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

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

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

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

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

.mce-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: "";
}

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

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

// RTL

.mce-rtl .mce-btn button {
	direction: rtl;
}