@import "../default-skin.less";
@import "../../global/mixin.less";

// 按钮元素
.e_button,
button {
	display:inline-block; white-space:nowrap; cursor:pointer; color:@fg-light-2; height:1+2*@gap; line-height:1+2*@gap; font-size:100%; padding:0 @gap; box-sizing:border-box; background:@bg; border:1px solid @fg-light-8-5; vertical-align:middle; position:relative;
	[class*="e_ico"] {
		margin-right:0.5*@gap; vertical-align:baseline; // 不加此样式 XHTML DOCTYPE 下，只有图标时会错位
	}
	[class*="e_ico"]:after { line-height:1;}
	[class*="e_ico"]:last-child { margin-left:0.5*@gap; margin-right:0;}
	img { height:100%; vertical-align:top; margin-left:-@gap; margin-right:@gap;}
	span:only-child { margin:0 !important;}
	.e_ico-next:not(:first-child),
	.e_ico-fold:not(:first-child),
	.e_ico-unfold:not(:first-child) { font-size:75%; margin-left:@gap; opacity:0.5;}
	.e_buttonProgress { position:absolute; bottom:0; left:0; width:100%; z-index:3;}
	.e_buttonBar { display:block; height:2px; background:@success; border-top:1px solid rgba(255,255,255,0.5);}
}



// 附加
.e_button-attach {
	width:1+@gap; padding:0; border-left:1px solid @fg-light-9-2; margin-left:-1px;
	[class*="e_ico"] { font-size:75%; opacity:0.6;}
}



// 大小
.e_button-l { font-size:116.67%;}
.e_button-m { font-size:100%;}
.e_button-s { font-size:85.71%;}



// 宽度
.e_button-width-s { width:6em;}
.e_button-width-m { width:8em;}
.e_button-width-l { width:12em;}



// 圆角
.e_button-r { border-radius:0.25em;}
.e_button-left { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
.e_button-right { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;}
.e_button-pill { border-radius:0.5+@gap;}



// 色彩
.e_button-navy,
.e_button-red,
.e_button-green,
.e_button-orange,
.e_button-blue { color:@bg; border:0 none;}
.e_button-blue { background:@primary;}
.e_button-orange { background:@warning;}
.e_button-green { background:@success;}
.e_button-red { background:@danger;}
.e_button-navy { background:@secondary-light-1;}
.e_button-blue.e_button-attach { border-left:1px solid @primary-light-2;}
.e_button-red.e_button-attach { border-left:1px solid @danger-light-2;}
.e_button-green.e_button-attach { border-left:1px solid @success-light-2;}
.e_button-orange.e_button-attach { border-left:1px solid @warning-light-2;}



// 渐变
.e_button-gd { background:linear-gradient(to right, @primary, @success); border:0 none; color:@bg;}
.e_button-gd-green { background:linear-gradient(to right, @success-light-3, @success); border:0 none;  color:@bg;}
.e_button-gd-red { background:linear-gradient(to right, @danger-light-3, @danger); border:0 none; color:@bg;}
.e_button-gd-blue { background:linear-gradient(to right, @primary-light-3, @primary); border:0 none; color:@bg;}
.e_button-gd-orange { background:linear-gradient(to right, @warning-light-3, @warning); border:0 none; color:@bg;}
.e_button-gd-navy { background:linear-gradient(to right, @secondary-light-3, @secondary); border:0 none; color:@bg;}
.e_button-gd-greenBlue { background:linear-gradient(to right, @success, @primary); border:0 none; color:@bg;}
.e_button-gd-blueRed { background:linear-gradient(to right, @primary, @danger); border:0 none; color:@bg;}
.e_button-gd-redBlue { background:linear-gradient(to right, @danger, @primary); border:0 none; color:@bg;}
.e_button-gd-redOrange { background:linear-gradient(to right, @danger, @warning); border:0 none; color:@bg;}
.e_button-gd-orangeRed { background:linear-gradient(to right, @warning, @danger); border:0 none; color:@bg;}



// 外边线
.e_button-outline { background:none; color:#f3f3f3; border:1px #f3f3f3 solid;  box-sizing:border-box;}
.e_button-outline.e_button-red { border:1px @danger solid; color:@danger;}
.e_button-outline.e_button-green { border:1px @success solid; color:@success;}
.e_button-outline.e_button-blue { border:1px @primary solid; color:@primary;}
.e_button-outline.e_button-orange { border:1px @warning solid; color:@warning;}
.e_button-outline.e_button-navy { border:1px @secondary solid; color:@secondary;}



// 无边框
.e_button-noborder { border:0 none;}
// .e_button-noborder,
// .e_button-noborder.e_button-red,
// .e_button-noborder.e_button-green,
// .e_button-noborder.e_button-blue,
// .e_button-noborder.e_button-orange,
// .e_button-noborder.e_button-navy,
// .e_button-noborder.e_button-outline { background:none; color:#f3f3f3; border:none;  box-sizing:border-box;}