/**
 * import.less
 * 管理导入文件包及公用样式
 */

@import "config.less";
@import "function.less";

// 控件尺寸方案
.size() {
	// 小尺寸
	&.sm {
		font-size: @BaseFontSize - @CtrlSizeGradient;
		height: @CtrlHeight - @CtrlSizeGradient * 2;
		line-height: @CtrlLineHeight - @CtrlSizeGradient * 2;
	}

	// 大尺寸
	&.lg {
		font-size: @BaseFontSize + @CtrlSizeGradient;
		height: @CtrlHeight + @CtrlSizeGradient * 2;
		line-height: @CtrlLineHeight + @CtrlSizeGradient * 2;
	}
}

// 控件基础样式
.ctrl() {
	display: inline-block; // 把此元素设置成 inline-block，目的是当 .btn 设置在非按钮类元素上时能把显示形式调整为内联块级样式
	height: @CtrlHeight; 
	border: 1px solid @ColorWhiteBorder;
	border-radius: @BorderRadius;
	background-color: @ColorWhite;
	vertical-align: middle;
	// 默认过渡效果
	.transition(background .3s, border-color .3s);
	// 尺寸方案
	.size();
}

// JS控件基础样式
.ctrl-js() {
	.ctrl();
	position: relative;
	z-index: 1;
	width: 100%;

	.userSelect();

	&:hover {
		border-color: @ColorWhiteBackDark;
	}

	&.on {
		z-index: @MaxZIndex;
		background: @ColorWhiteBackLight;
		border-color: @ColorWhiteBackDark;
	}

	.ctrl-checkout();
}
// 用于tabindex的隐藏checkbox
.ctrl-checkout() {
	> [type="checkbox"] {
		position: absolute;
		top: 0; left: -20000px;
		z-index: -1;
	}
}