@import  "../coco-variables.scss";

.easyui-linkbutton{
	font-family: system-ui; font-weight: 500;
	border-radius: 4px;display: inline-block;
	&.l-btn-disabled{
		position: relative;
	}
	&+.easyui-linkbutton{ margin-left:3px}
	
	
	// success
	&.success{
		color: #fff;
		background: $--sys-success;
		border-color: $--sys-success;
		&:hover:not(.l-btn-disabled){
			background: lighten($--sys-success,10%);
			border-color: lighten($--sys-success,10%);
			color: #fff;
		}
		&:active:not(.l-btn-disabled){
			background: darken($--sys-success,10%);
			border-color: darken($--sys-success,10%);
			outline: none;
		}
		// success+plain 二级
		&.plain{
			color: $--sys-success;
			background: rgba($--sys-success,0.1);
			border-color: rgba($--sys-success,0.5);
			&:hover:not(.l-btn-disabled){
				background: $--sys-success;
				border-color: $--sys-success;
				color: #fff;
			}
			&:active:not(.l-btn-disabled){
				background: darken($--sys-success,10%);
				border-color: darken($--sys-primary,10%);
				color: #fff;
				outline: none;
			}
		}
	}
	// info
	&.info{
		color: #fff;
		background: $--sys-info;
		border-color: $--sys-info;
		&:hover:not(.l-btn-disabled){
			background: lighten($--sys-info,10%);
			border-color: lighten($--sys-info,10%);
			color: #fff;
		}
		&:active:not(.l-btn-disabled){
			background: darken($--sys-info,10%);
			border-color: darken($--sys-info,10%);
			outline: none;
		}
		// info+plain 二级
		&.plain{
			color: $--sys-info;
			background: rgba($--sys-info,0.1);
			border-color: rgba($--sys-info,0.5);
			&:hover:not(.l-btn-disabled){
				background: $--sys-info;
				border-color: $--sys-info;
				color: #fff;
			}
			&:active:not(.l-btn-disabled){
				background: darken($--sys-info,10%);
				border-color: darken($--sys-info,10%);
				color: #fff;
				outline: none;
			}
		}
	}
	// warning
	&.warning{
		color: #fff;
		background: $--sys-warning;
		border-color: $--sys-warning;
		&:hover:not(.l-btn-disabled){
			background: lighten($--sys-warning,10%);
			border-color: lighten($--sys-warning,10%);
			color: #fff;
		}
		&:active:not(.l-btn-disabled){
			background: darken($--sys-warning,10%);
			border-color: darken($--sys-warning,10%);
			outline: none;
		}
		// warning+plain 二级
		&.plain{
			color: $--sys-warning;
			background: rgba($--sys-warning,0.1);
			border-color: rgba($--sys-warning,0.5);
			&:hover:not(.l-btn-disabled){
				background: $--sys-warning;
				border-color: $--sys-warning;
				color: #fff;
			}
			&:active:not(.l-btn-disabled){
				background: darken($--sys-warning,10%);
				border-color: darken($--sys-warning,10%);
				color: #fff;
				outline: none;
			}
		}
	}
	// danger
	&.danger{
		color: #fff;
		background: $--sys-danger;
		border-color: $--sys-danger;
		&:hover:not(.l-btn-disabled){
			background: lighten($--sys-danger,10%);
			border-color: lighten($--sys-danger,10%);
			color: #fff;
		}
		&:active:not(.l-btn-disabled){
			background: darken($--sys-danger,10%);
			border-color: darken($--sys-danger,10%);
			outline: none;
		}
		// danger+plain 二级
		&.plain{
			color: $--sys-danger;
			background: rgba($--sys-danger,0.1);
			border-color: rgba($--sys-danger,0.5);
			&:hover:not(.l-btn-disabled){
				background: $--sys-danger;
				border-color: $--sys-danger;
				color: #fff;
			}
			&:active:not(.l-btn-disabled){
				background: darken($--sys-danger,10%);
				border-color: darken($--sys-danger,10%);
				color: #fff;
				outline: none;
			}
		}
	}
	
	
	// primary 一级
	&.primary{
		color: #fff;
		background: $--sys-primary;
		border-color: $--sys-primary;
		&:hover:not(.l-btn-disabled){
			background: lighten($--sys-primary,10%);
			border-color: lighten($--sys-primary,10%);
			color: #fff;
		}
		&:active:not(.l-btn-disabled){
			background: darken($--sys-primary,10%);
			border-color: darken($--sys-primary,10%);
			outline: none;
		}
		// primary+plain 二级
		&.plain{
			color: $--sys-primary;
			background: rgba($--sys-primary,0.1);
			border-color: rgba($--sys-primary,0.5);
			&:hover:not(.l-btn-disabled){
				background: $--sys-primary;
				border-color: $--sys-primary;
				color: #fff;
			}
			&:active:not(.l-btn-disabled){
				background: darken($--sys-primary,10%);
				border-color: darken($--sys-primary,10%);
				color: #fff;
				outline: none;
			}
		}
	}
	
	// default 三级
	// &.default{
		border-color:$--tab-border-color;
		background: #fff;
		&:hover:not(.l-btn-disabled){
			color: $--sys-primary;
			border-color: rgba($--sys-primary,0.3);
			background-color: rgba($--sys-primary,0.1);
		}
		&:active:not(.l-btn-disabled){
			color: darken($--sys-primary,10%);
			border-color: darken($--sys-primary,10%);
			outline: none;
		}
	// }
	
	// plain 四级
	&.plain.default{
		border-color: $--tab-border-color;
		background: #fff;
		&:hover:not(.l-btn-disabled){
			background: #fff;
			border-color: $--sys-primary;
			color: $--sys-primary;
		}
		&:active:not(.l-btn-disabled){
			border-color: darken($--sys-primary,10%);
			color: darken($--sys-primary,10%);
			outline: none;
		}
	}
	
	// text 五级
	&.text{
		color: $--sys-primary;
		background: none;
		border-width: 0;
		padding: 0;
		&:hover:not(.l-btn-disabled){
			background: rgba(255,255,255,0.2);
			color: lighten($--sys-primary,10%);
		}
		&:active:not(.l-btn-disabled){
			color: darken($--sys-primary,10%);
			outline: none;
		}
		&.white{
			color: #FFF;
			
			&:hover:not(.l-btn-disabled){
				color: #CCC;
				background: none;
				.l-btn-text{ text-decoration: underline; }
				
			}
		}
	}
	
	// cir
	&.cir{
		border-radius: 100px;
	}
	
	// text
	&.text.l-btn{
		padding: 0;
		// default
		.l-btn-text{ margin: 0;}
		// 左边图标
		.l-btn-icon-left .l-btn-text{ margin: 0 0px 0 20px;}
		.l-btn-icon-left .l-btn-icon{ left: 0px;}
		// 右边图标
		.l-btn-icon-right .l-btn-text{ margin: 0 20px 0 0px;}
		.l-btn-icon-right .l-btn-icon{ right:0px;}
	}
	
	
	
	// 尺寸
	&.xl{
		height: 40px; padding: 0 14px;
		.l-btn-left{ margin-top: 5px;}
		.l-btn-text{ font-size: 14px;}
		.l-btn-icon{ font-size: 16px;}
		// 只有图标
		.l-btn-text.l-btn-empty{ margin: 0 5px;}
		.l-btn-empty+.l-btn-icon{ left:5px }
		// cir
		&.cir{ padding:0 6px}
	}
	&.md{
		height: 36px; padding: 0 14px;
		.l-btn-left{ margin-top: 3px;}
		.l-btn-text{ font-size: 14px;}
		.l-btn-icon{ font-size: 15px;}
		// 只有图标
		.l-btn-text.l-btn-empty{ margin: 0 5px;}
		.l-btn-empty+.l-btn-icon{ left:5px }
		// cir
		&.cir{ padding:0 4px}
	}
	&.sm{
		height: 32px; padding: 0 9px;
		.l-btn-left{ margin-top: 1px;}
		.l-btn-text{ font-size: 14px;}
		.l-btn-icon{ font-size: 14px; margin-top: -7px;}
		// 只有图标
		.l-btn-text.l-btn-empty{ margin: 0 5px;}
		.l-btn-empty+.l-btn-icon{ left:6px }
		// cir
		&.cir{ padding:0 2px}
	}
	&.xs{
		height: 28px; padding: 0 9px;
		.l-btn-left{ margin-top: -1px;}
		.l-btn-text{ font-size: 12px;}
		.l-btn-icon{ font-size: 14px; margin-top: -7px;}
		// 只有图标
		.l-btn-text.l-btn-empty{ margin: 0 4px;}
		.l-btn-empty+.l-btn-icon{ left:5px }
		// cir
		&.cir{ padding:0 1px}
	}
	&.xxs{
		height: 24px; padding: 0 4px;
		.l-btn-left{ margin-top: -1px;}
		.l-btn-text{ font-size: 12px;}
		.l-btn-icon{ font-size: 14px; margin-top: -7px;}
		// default
		.l-btn-text{ line-height: 24px}
		// 只有图标
		.l-btn-text.l-btn-empty{ margin: 0 3px;}
		.l-btn-empty+.l-btn-icon{ left:4px}
		// cir
		&.cir{ padding:0}
	}
}