/**
 * form.less
 * 表单的默认样式
 */

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

/**
 * 公用样式
 */
// 表单元素公用样式
.btn, .textbox, .addon {
	.ctrl();
	padding: @CtrlPaddingTB @CtrlPaddingLR;
	line-height: @CtrlLineHeight;
	
	// 为按钮取消默认的系统样式
	.appearance();
	// 为按钮添加一个过渡动画
	.transition(width .3s, height .3s, border-color .3s, background .3s, color .3s, box-shadow .3s);
	// 当按钮存在禁用、只读属性时显示无法交互样式
	&[disabled], &[readonly], &.disabled {
		cursor: default;
		opacity: @OpacityNoImport;
		
		&:hover, &:focus {
			border-color: @ColorWhiteBorder;
		}
	}
}
// 方形样式(强制)
.square {
	border-radius: 0 !important;
}
// 圆角按钮
.btn.round, .textbox.round {
	border-radius: @CtrlHeight / 2;

	&.sm {
		border-radius: (@CtrlHeight - @CtrlSizeGradient) / 2
	}

	&.lg {
		border-radius: (@CtrlHeight + @CtrlSizeGradient) / 2
	}
}
// 消息圆角方案
.message.round {
	border-radius: @BaseSize * 2.5;
}


/**
 * 按钮样式
 */
// 按钮默认样式
.btn {
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	.userSelect();

	// 设置按钮被hover的外观变化
	&:hover, &:focus {
		border-color: @ColorWhiteBackDark;
	}
	// 设置按钮被active的外观变化
	&:active {
		background: @ColorWhiteDeepest;
	}
}
// 实心按钮
.btn-solid {
	background: @ColorWhite;
}

// 图标圆按钮
.btn-icoround {
	width: @CtrlHeight;
	padding-left: 0;
	padding-right: 0;
	border-radius: 50%;

	&.sm {
		width: @CtrlHeight - @CtrlSizeGradient;
	}

	&.lg {
		width: @CtrlHeight + @CtrlSizeGradient;
	}
}
// 按钮颜色函数
.btn-color(@Text, @Border, @Back) {
	color: @Text;
	background-color: @Back;
	border-color: @Border;
	// 设置按钮被hover的外观变化
	&:hover, &:focus {
		border-color: @Text;
	}
	// 设置按钮被active的外观变化
	&:active {
		background-color: darken(@Back, 10%);
	}
	// 擦出掉带有disabled属性的元素特定样式
	&[disabled], &.disabled {
		&:hover, &:focus {
			border-color: @Border;
		}
		&:active {
			background-color: @Back;
		}
	}
}
// 按钮实心颜色函数
.btn-fullcolor(@Back, @Hover, @Active) {
	color: @ColorWhite;
	border-color: @Back;
	background-color: @Back;

	// 设置按钮被hover的外观变化
	&:hover, &:focus {
		border-color: @Hover;
		background-color: @Hover;
	}
	// 设置按钮被active的外观变化
	&:active {
		border-color: @Active;
		background-color: @Active;
	}
	// 擦出掉带有disabled属性的元素特定样式
	&[disabled], &.disabled {
		&:hover, &:focus, &:active {
			border-color: @Back;
			background-color: @Back;
		}
	}
}
// 红色按钮颜色样式
.btn.c-red, .btn.danger, .group.danger > .btn {
	.btn-color(@ColorRed, @ColorRedBorder, @ColorRedBackLight);
}
// 橙色按钮颜色样式
.btn.c-orange, .btn.warning, .group.warning > .btn {
	.btn-color(@ColorOrange, @ColorOrangeBorder, @ColorOrangeBackLight);
}
// 绿色按钮颜色样式
.btn.c-green, .btn.success, .group.success > .btn {
	.btn-color(@ColorGreen, @ColorGreenBorder, @ColorGreenBackLight);
}
// 蓝色按钮颜色样式
.btn.c-blue, .btn.info, .group.info > .btn {
	.btn-color(@ColorBlue, @ColorBlueBorder, @ColorBlueBackLight);
}
// 黄色按钮颜色样式
.btn.c-yellow {
	.btn-color(@ColorYellow, @ColorYellowBorder, @ColorYellowBackLight);
}
// 天蓝色按钮颜色样式
.btn.c-teal {
	.btn-color(@ColorTeal, @ColorTealBorder, @ColorTealBackLight);
}
// 紫蓝色按钮颜色样式
.btn.c-violet {
	.btn-color(@ColorViolet, @ColorVioletBorder, @ColorVioletBackLight);
}
// 紫色按钮颜色样式
.btn.c-purple {
	.btn-color(@ColorPurple, @ColorPurpleBorder, @ColorPurpleBackLight);
}
// 粉色按钮颜色样式
.btn.c-pink {
	.btn-color(@ColorPink, @ColorPinkBorder, @ColorPinkBackLight);
}
// 棕色按钮颜色样式
.btn.c-brown {
	.btn-color(@ColorBrown, @ColorBrownBorder, @ColorBrownBackLight);
}
// 灰色按钮颜色样式
.btn.c-grey {
	.btn-color(@ColorGrey, @ColorGreyBorder, @ColorGreyBackLight);
}
// 深色按钮颜色样式
.btn.c-dark {
	.btn-color(@ColorDark, @ColorDarkBorder, @ColorDarkBackLight);
}
// 红色实心按钮颜色样式
.btn.btn-solid.c-red,
.message.c-red > .btn, .message.danger > .btn {
	.btn-fullcolor(@ColorRed, @ColorRedDeeper, @ColorRedDeepest);
}
// 橙色实心按钮颜色样式
.btn.btn-solid.c-orange,
.message.c-orange > .btn, .message.warning > .btn {
	.btn-fullcolor(@ColorOrange, @ColorOrangeDeeper, @ColorOrangeDeepest);
}
// 绿色实心按钮颜色样式
.btn.btn-solid.c-green,
.message.c-green > .btn, .message.success > .btn {
	.btn-fullcolor(@ColorGreen, @ColorGreenDeeper, @ColorGreenDeepest);
}
// 蓝色实心按钮颜色样式
.btn.btn-solid.c-blue,
.message.c-blue > .btn, .message.info > .btn {
	.btn-fullcolor(@ColorBlue, @ColorBlueDeeper, @ColorBlueDeepest);
}
// 黄色实心按钮颜色样式
.btn.btn-solid.c-yellow,
.message.c-yellow > .btn {
	.btn-fullcolor(@ColorYellow, @ColorYellowDeeper, @ColorYellowDeepest);
}
// 天蓝色实心按钮颜色样式
.btn.btn-solid.c-teal,
.message.c-teal > .btn {
	.btn-fullcolor(@ColorTeal, @ColorTealDeeper, @ColorTealDeepest);
}
// 紫蓝色实心按钮颜色样式
.btn.btn-solid.c-violet,
.message.c-violet > .btn {
	.btn-fullcolor(@ColorViolet, @ColorVioletDeeper, @ColorVioletDeepest);
}
// 紫色实心按钮颜色样式
.btn.btn-solid.c-purple,
.message.c-purple > .btn {
	.btn-fullcolor(@ColorPurple, @ColorPurpleDeeper, @ColorPurpleDeepest);
}
// 粉色实心按钮颜色样式
.btn.btn-solid.c-pink,
.message.c-pink > .btn {
	.btn-fullcolor(@ColorPink, @ColorPinkDeeper, @ColorPinkDeepest);
}
// 棕色实心按钮颜色样式
.btn.btn-solid.c-brown,
.message.c-brown > .btn {
	.btn-fullcolor(@ColorBrown, @ColorBrownDeeper, @ColorBrownDeepest);
}
// 灰色实心按钮颜色样式
.btn.btn-solid.c-grey,
.message.c-grey > .btn {
	.btn-fullcolor(@ColorGrey, @ColorGreyDeeper, @ColorGreyDeepest);
}
// 深色实心按钮颜色样式
.btn.btn-solid.c-dark,
.message.c-dark > .btn {
	.btn-fullcolor(@ColorDark, @ColorDarkDeeper, @ColorDarkDeepest);
}


/**
 * 修饰样式
 */
// 修饰默认样式
.addon {
	font-style: normal;
	background: @ColorWhiteDeeper;
	white-space: nowrap;
	text-align: center;
}
// 修饰颜色函数
.addon-color(@Text, @Background, @Border){
	color: @Text;
	background: @Background;
	border-color: @Border;
}
// 蓝色修饰样式
.addon.info, .group.info > .addon {
	.addon-color(@ColorBlue, @ColorBlueBackLight, @ColorBlueBorder);
}
// 绿色修饰样式
.addon.success, .group.success > .addon {
	.addon-color(@ColorGreen, @ColorGreenBackLight, @ColorGreenBorder);
}
// 橙色修饰样式
.addon.warning, .group.warning > .addon {
	.addon-color(@ColorOrange, @ColorOrangeBackLight, @ColorOrangeBorder);
}
// 红色修饰样式
.addon.danger, .group.danger > .addon {
	.addon-color(@ColorRed, @ColorRedBackLight, @ColorRedBorder);
}


/**
 * 输入框样式
 */
// 输入框默认样式
.textbox {
	width: 100%;
	cursor: text;
	.userSelect(text);

	// 设置输入框被hover的外观变化
	&:hover {
		border-color: @ColorWhiteBackDark;
	}

	// 设置输入框被focus的外观变化
	&:focus {
		background: @ColorWhiteDeeper;
		border-color: @ColorWhiteBackDark;
	}

	&[disabled], &[readonly], &.disabled {
		&:hover, &:focus {
			background: @ColorWhite;
		}
	}
}
// 设置多行输入框默认样式
textarea.textbox {
	resize: none;

	& {
		height: 6em;
	}

	&.sm {
		height: 5em;
	}

	&.lg {
		height: 7em;
	}
}
// 输入框颜色函数
.textbox-color(@Color, @ColorDeepest, @Background) {
	color: @Color;
	border-color: @Color;

	&:hover {
		border-color: @Color;
		background: @Background;
	}

	&:focus {
		border-color: @ColorDeepest;
		background: @Background;
		box-shadow: inset 0 0 3px @Color;
	}

	&[disabled], &[readonly], &.disabled { 
		&:hover, &:focus {
			border-color: @Color;
			background: @ColorWhite;
			box-shadow: none;
		}
	}
}
// 控件组内的输入框颜色函数
.textbox-group-color(@Text, @Background, @Border, @BorderChange){
	color: @Text;
	border-color: @Border;
	// 设置输入框被hover的外观变化
	&:hover {
		border-color: @BorderChange;
	}

	// 设置输入框被focus的外观变化
	&:focus {
		background: @Background;
		border-color: @BorderChange;
	}

	&[disabled], &[readonly], &.disabled { 
		&:hover, &:focus {
			border-color: @Border;
			background: @ColorWhite;
		}
	}
}
// 信息状态输入框样式
.textbox.info {
	.textbox-color(@ColorBlue, @ColorBlueDeeper, @ColorBlueBackLight);
}
// 成功状态输入框样式
.textbox.success {
	.textbox-color(@ColorGreen, @ColorGreenDeeper, @ColorGreenBackLight);
}
// 警告状态输入框样式
.textbox.warning {
	.textbox-color(@ColorOrange, @ColorOrangeDeeper, @ColorOrangeBackLight);
}
// 危险状态输入框样式
.textbox.danger {
	.textbox-color(@ColorRed, @ColorRedDeeper, @ColorRedBackLight);
}
// 控件组信息状态输入框样式
.group.info > .textbox {
	.textbox-group-color(@ColorBlue, @ColorBlueBackLight, @ColorBlueBorder, @ColorBlueBackDark);
}
// 控件组成功状态输入框样式
.group.success > .textbox {
	.textbox-group-color(@ColorGreen, @ColorGreenBackLight, @ColorGreenBorder, @ColorGreenBackDark);
}
// 控件组警告状态输入框样式
.group.warning > .textbox {
	.textbox-group-color(@ColorOrange, @ColorOrangeBackLight, @ColorOrangeBorder, @ColorOrangeBackDark);
}
// 控件组危险状态输入框样式
.group.danger > .textbox {
	.textbox-group-color(@ColorRed, @ColorRedBackLight, @ColorRedBorder, @ColorRedBackDark);
}


/**
 * 选框样式
 */
// 单选与多选的默认样式
.check, .radio {
	display: inline-block;
	width: 18px; height: 18px;
	border: 1px solid @ColorWhiteBackDark;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDM2IDE4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNiAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0LjQsNi45YzAsMC4yLTAuMSwwLjMtMC4yLDAuNWwtNS44LDUuOGMtMC4xLDAuMS0wLjMsMC4yLTAuNSwwLjJzLTAuMy0wLjEtMC41LTAuMkw0LjEsOS44DQoJQzQsOS43LDMuOSw5LjYsMy45LDkuNFM0LDksNC4xLDguOUw1LjEsOGMwLjEtMC4xLDAuMy0wLjIsMC41LTAuMkM1LjcsNy44LDUuOCw3LjksNiw4bDIsMmw0LjQtNC40YzAuMS0wLjEsMC4zLTAuMiwwLjUtMC4yDQoJczAuMywwLjEsMC41LDAuMmwwLjksMC45QzE0LjMsNi42LDE0LjQsNi44LDE0LjQsNi45eiIvPg0KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjciIGN5PSI5IiByPSIzIi8+DQo8L3N2Zz4NCg==');
	background-size: 36px 18px;
	vertical-align: text-top;
	cursor: pointer;
	.transition(border-color .3s, border-width .3s, background .3s, box-shadow .3s);
	.appearance();
	
	// 滑动样式
	&:hover {
		border-width: 2px;
		border-color: @ColorBlue;
	}
	&:focus {
		box-shadow: 0 0 0 1px @ColorBlueBorder;
	}
	// 选中样式
	&:checked {
		border-width: 2px;
		border-color: @ColorBlue;
		background-color: @ColorBlue;
		background-position-y: -2px;
	}
	// 禁用样式
	&:disabled, &.disabled {
		cursor: default;
		opacity: @OpacityNoImport;

		&:hover {
			border-width: 1px;
			border-color: @ColorWhiteBackDark;
		}
	}
}
// 单选样式
.check {
	background-position: -2px 18px;
}
// 多选样式
.radio {
	border-radius: 9px;
	background-position: -20px 18px;
}


/**
 * 组合控件样式
 */
// 控件组合样式
// 可加入控件 ud2.number ud2.range ud2.select ud2.date
// 可加入元素 .btn .textbox .addon
.group {
	.flexInline();
	.flexDirection(row);
	.transition(width .3s, height .3s);
	vertical-align: middle;

	// 内部控件的基础样式
	// 内部弹性控件强制取消弹性
	> * {
		.flexItem(0);
		position: relative;
		z-index: 1;
		font-size: @BaseFontSize;

		&:not(:first-child) {
			margin-left: -1px;
		}

		&:hover, &:focus, &.on {
			z-index: 2;
		}
	}
	// 内部弹性控件
	> .textbox, > [ud2] {
		.flexItem(1);
	}
	// 内部组控件自适应
	> [ud2].group {
		width: auto;
	}

	// 取消多个控件组合时除第一个控件外的左侧圆角
	> :not(:first-child), > .group:not(:first-child) > :first-child {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	// 取消多个控件组合时除最后一个控件外的右侧圆角
	> :not(:last-child), > .group:not(:last-child) > :last-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	// 取消圆角样式
	&.square > * {
		border-radius: 0;
	}
	// 控件的小尺寸方案
	&.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;
	}
}
// 组强制通栏
.group-justify {
	width: 100%;

	> * {
		.flexItem(1);
	}
}
// 强制与强制取消弹性
.group, .group-justify {
	> .flex {
		.flexItem(1);
	}

	> .noflex {
		.flexItem(0);
	}
}