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

// 表单组件
.c_form {
	position:relative; overflow:hidden; // 不设置 overflow，会出横向滚动条
	> ul {
		> li {
			margin-top:0.5*@gap; vertical-align:top; overflow:hidden;
			> .label { float:left; line-height:1+2*@gap; text-align:right;}
			> .value {
				overflow:hidden; padding-bottom:1px; display:block; padding-right:1px;
				> label {
					height:1+2*@gap; line-height:1+2*@gap; padding:0 @gap;
					> input[type="radio"],
					> input[type="checkbox"] { vertical-align:top; margin-top:@gap;}
				}
				.e_star,
				> input[type="radio"],
				> input[type="checkbox"] { margin-top:@gap;}
				> input[type="date"],
				> input[type="datetime"],
				> input[type="datetime-local"],
				> input[type="email"],
				> input[type="month"],
				> input[type="week"],
				> input[type="number"],
				> input[type="tel"],
				> input[type="time"],
				> input[type="url"],
				> input[type="text"],
				> input[type="password"] { width:100%;}
				.e_select { display:block; width:auto;}
				textarea { width:100%;}
				.e_group { width:auto; display:block;}
				.e_mix { width:auto; display:flex;}
				.e_mix > .e_mix { width:1px;}
				.e_segment {
					display:flex;
					> span { display:block; float:none; flex:1; text-align:center;}
				}
				.e_switch { margin-top:((1+2*@gap)-1.5)/2; vertical-align:top;}
				.e_range { width:100%; margin-top:((1+2*@gap)-2)/2; vertical-align:top;}
				.text { line-height:1+2*@gap;}
			}
		}
		> li.required {
			> .label:before { content:"*"; margin-right:0.25em; color:@danger;}
		}
		&:first-child { margin-top:-0.5*@gap;}
	}
	.c_form { padding:@gap; border:1px solid @fg-light-8-5; background:@bg-dark-0-7;}
}



// 边框
.c_form-border {
	border:1px solid @fg-light-8-5;
}



// 全屏高度
.c_form-full {
	min-height:100%; .x_bs;
}



// 标签文字长度
.c_form-label-1 > ul > li > .label { width:2.2em;}
.c_form-label-2 > ul > li > .label { width:3.2em;}
.c_form-label-3 > ul > li > .label { width:4.3em;}
.c_form-label-4 > ul > li > .label { width:5.3em;}
.c_form-label-5 > ul > li > .label { width:6.3em;}
.c_form-label-6 > ul > li > .label { width:7.4em;}
.c_form-label-7 > ul > li > .label { width:8.4em;}
.c_form-label-8 > ul > li > .label { width:9.4em;}
.c_form-label-9 > ul > li > .label { width:10.4em;}
.c_form-label-10 > ul > li > .label { width:11.5em;}
.c_form-label-11 > ul > li > .label { width:12.5em;}
.c_form-label-12 > ul > li > .label { width:13.6em;}
.c_form-label-13 > ul > li > .label { width:14.6em;}
.c_form-label-14 > ul > li > .label { width:15.6em;}
.c_form-label-15 > ul > li > .label { width:16.7em;}
.c_form-label-16 > ul > li > .label { width:17.7em;}
.c_form-label-17 > ul > li > .label { width:18.7em;}
.c_form-label-18 > ul > li > .label { width:19.8em;}
.c_form-label-19 > ul > li > .label { width:20.8em;}
.c_form-label-20 > ul > li > .label { width:21.8em;}



// 分列
[class*="c_form-col-"] {
	> ul { margin-right:-@gap;}
	> ul > li { display:inline-block; margin-right:-0.29em; vertical-align:top; padding-right:@gap; .x_bs;}
}
.c_form-col-1 {
	> ul > li { width:100%;}
}
.c_form-col-2 {
	> ul > li { width:50%;}
	> ul > .merge-2 { width:100%;}
}
.c_form-auto {
	> ul { display:inline-block; vertical-align:top;}
	> ul > li {
		display:inline-flex; margin-left:0.5*@gap;
		.value .e_mix { width:16em;}
	}
	> .submit { display:inline-block; vertical-align:top; margin-left:0.5*@gap;}
}



// 垂直布局
.c_form-v {
	> ul { margin-top:0 !important;}
	> ul > li { margin-top:0;}
	> ul > li > .label { float:none; text-align:left;}
}
.c_form-v[class*="c_form-col"] {
	> ul > li { display:inline-block !important;}
}



// 色彩
.c_form-white {
	background:#fff !important;
}



// 固定在右下角的提交部分
.c_form-submit {
	background:@bg;
	> ul {
		&:after { content:""; height:1+2*@gap; margin-top:0.5*@gap; width:2em; display:inline-block;}
		> li {
			> .label { line-height:1+2*@gap;}
		}
	}
	.submit {
		position:absolute; right:0; bottom:0; white-space:nowrap;
	}
}



// BOX
.c_form-box {
	padding:@gap; background:@bg;
	.submit {
		margin-top:@gap; text-align:center;
		button { min-width:10em; margin:0 0.5*@gap;}
		&-full {
			display:flex;
			button { min-width:auto; flex:1;}
			button:first-child { margin-left:0;}
			button:last-child { margin-right:0;}
		}
	}
	border:1px solid @fg-light-8-5;
}



// 单行模式的提交部分
.c_form-submit-h {
	display:flex;
	background:@bg;
	> ul { margin-top:-0.5*@gap; flex:1; order:1;}
	> ul > li { margin-top:0; margin-top:0.5*@gap;}
	.submit { order:2; align-self:flex-end; padding-bottom:1px;}
}
.s_pc .c_form-submit-h,
.s_pad .c_form-submit-h {
	> ul { overflow:hidden; margin-right:0;}
}
.c_form-submit-h.c_form-v .submit { margin-top:1+2*@gap;}



// 带 padding 的表单
.c_form-padding { padding:@gap; background:@bg;}
.c_form-padding.c_form-submit {
	.submit {
		right:@gap; bottom:@gap;
	}
}