/**
 * ud2-range.less
 * 范围控件的默认样式
 */

// 导入必要的文件
@import "../../../common/import.less";

// 范围控件主容器
.ud2-range {
	padding-left: @CtrlPaddingLR;
	padding-right: 2em;
	// 设置控件被开启时的样式
	&.on {
		.ud2-range-list {
			display: block;
		}
	}
}
// 设置横拉控件公共样式
.ud2-range-back, .ud2-range-end, .ud2-range-hand {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
// 设置横拉控件背景样式
.ud2-range-back, .ud2-range-end {
	top: (@CtrlHeight - 2px) / 2;
	height: 2px;
}
// 设置横拉控件背景底容器样式
.ud2-range-end {
	z-index: 1;
	width: 100%;
	background: @ColorWhiteDeepest;
}
// 设置横拉控件背景顶容器样式
.ud2-range-back {
	z-index: 2;
	width: 0;
	background: @ColorBlue;
}
// 设置横拉控件按钮样式
.ud2-range-hand {
	top: (@CtrlHeight - (@BaseSize * 2.25 - 2px)) / 2;
	z-index: 3;
	width: @BaseSize * 2.25 - 2px;
	height: @BaseSize * 2.25 - 2px;
	border-radius: 50%;
	background: @ColorWhite;
	box-shadow: 0 0 3px @ColorWhiteBackDark;
	cursor: ew-resize;
}
// 设置控件列表样式
.ud2-range-list {
	display: none;
	position: absolute;
	left: -1px;
	top: @CtrlHeight + 4;
	width: 100%;
	height: @CtrlHeight;
	border: 1px solid @ColorWhiteBackDark;
	border-radius: @BorderRadius;
	background: @ColorWhite;
	.boxSizing();
}
// 设置控件的小尺寸方案
.ud2-range.sm, .group.sm .ud2-range {
	.ud2-range-list {
		top: @CtrlHeight;
	}
}
// 设置控件的大尺寸方案
.ud2-range.lg, .group.lg .ud2-range {
	.ud2-range-list {
		top: @CtrlHeight + 8;
	}
}