//表单控件组
#{$V}form {
	position: relative;
	
	+ #{$V}form {
		margin-top: rem(10);
	}
}
#{$V}label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: rem(5);
	font-weight: $font-weight-heavy;
}

//输入框
#{$V}input {
	width: 100%;
	height: rem(38);
	line-height: $line-height-input-button;
	padding: rem(6) rem(8);
	font-size: rem($font-size-sm);
	color: $--dark;
	display: block;
	background: {
		color: $--white;
		image: none;
	}
	border: rem($border-width-xs) $border-style-solid $--light-dark;
	border-radius: 0;
	appearance: none;
	transition: border-color .15s ease-in-out, box-shadow .15s cubic-bezier(.35, .81, .45, 1.47);
	
	//focus
	&:not(.disabled):not([disabled]) {
		&:focus,
		&.focus {
			outline: 0;
			border-color: $--vusui;
			background-color: $--white;
			box-shadow: 0 0 0 rem(3) rgba($--vusui, .2);
		}
	}

	@include ms-expand {
		background-color: $--tp;
        border: 0;
	}

	//placeholder
	@include placeholder {
		color: $--gray;
  		opacity: 1;
	}

	//input尺寸
	//small
	&.v-small {
		height: rem(30);
		line-height: $line-height-xs-p;
		padding: rem(5);
		font-size: 80%;
	}

	//large
	&.v-large {
		height: rem(46);
		line-height: $line-height-lg;
		padding: rem(9);
		font-size: rem($font-size-lg);
	}

	//主题颜色
	@each $key, $value in $theme-color {
	    @include input-color($key, $value);
	}

	//输入框默认边框
	&.v-default {
		border-color: $--light-dark;
	}

	//disabled && readonly
	@at-root {
		%inputDR {
			background-color: $--white-f8;
			box-shadow: inset 0 rem(1) rem(2) rgba($--black, .08);
		}
	}
	//disabled
	&[disabled],
	&.disabled {
		cursor: not-allowed;
		@extend %inputDR;
	}
	//readonly
	&[readonly],
	&.readonly {
		cursor: default;
		@extend %inputDR;
	}
}

//下拉菜单
select#{$V}input:not([multiple]) {
	padding-right: rem(25);
	background: {
		image: $img-select;
		repeat: no-repeat;
		position: right rem(6) center;
	}
	@include ms-expand {
		display: none;
		opacity: 0;
	}
}

//多行输入 && 下拉菜单
textarea,
select[multiple],
select[size] {
	&#{$V}input {
		height: auto;
	}
}
select[multiple]#{$V}input {
	padding-right: 0;
}


//单选/复选/开关
#{$V}radio,
#{$V}checkbox,
#{$V}switch {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	user-select: none;
	margin: {
		top: rem(3);
		bottom: rem(3);
	}

	> .icon  {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		border: rem($border-width-xs) $border-style-solid $--tp;
		transition: all .2s ease-in-out;

		&:after {
			position: absolute;
			content: " ";
			transition: all .2s ease-in-out;
			display: block;
		}
	}
	> .text {
		line-height: $line-height-md;
		margin-left: rem(4);
		position: relative;
		display: inline-block;
	}
	> input {
		position: absolute;
		z-index: $zindex-1;
		opacity: 0;
		display: none;

		~ .icon,
		~ .text {
			cursor: pointer;
		}
	}
}

//单选框
#{$V}radio {
	padding-left: rem(18);
	margin-right: rem(10);

	> .icon {
		width: rem(18);
		height: rem(18);
		border-color: #ddd;
		border-radius: 50%;

		&:after {
			width: rem(10);
			height: rem(10);
			top: calc(50% - #{rem(5)});
			left: calc(50% - #{rem(5)});
			border-radius: 50%;
		}
	}
	> input[type="radio"] {

		&:checked ~ .icon {
			border-color: $--vusui;

			&:after {
				background-color: $--vusui;
			}
		}
		&:disabled,
		&.disabled {
			~ .icon,
			~ .text {
				cursor: not-allowed;
				opacity: .5;
			}
		}
	}

	//勾选(实心&&线条)
	&.v-tick,
	&.v-tick-o {
		> .icon:after {
			width: rem(10);
			height: rem(6);
			top: calc(50% - #{rem(4)});
			left: calc(50% - #{rem(5)});
			transform: rotate(-50deg);
			border-radius: 0;
			border: rem($border-width-sm) $border-style-solid $--tp;
			background-color: $--tp;
		}
	}
	//实心
	&.v-tick {
		> input[type="radio"]:checked ~ .icon {
			background-color: $--vusui;

			&:after {
				border: {
					left-color: $--white;
					bottom-color: $--white;
				}
				background-color: $--tp;
			}
		}
	}
	//线条
	&.v-tick-o {
		> input[type="radio"]:checked ~ .icon:after {
			border: {
				left-color: $--vusui;
				bottom-color: $--vusui;
			}
			background-color: $--tp;
		}
	}
	//大尺寸
	&.v-large {
		padding-left: rem(30);
		margin: {
			top: rem(8);
			bottom: rem(8);
		}
		> .icon {
			width: rem(30);
			height: rem(30);

			&:after {
				width: rem(18);
				height: rem(18);
				top: calc(50% - #{rem(9)});
				left: calc(50% - #{rem(9)});
			}
		}
		&.v-tick,
		&.v-tick-o {
			> .icon:after {
				width: rem(18);
				height: rem(10);
				top: calc(50% - #{rem(7)});
				left: calc(50% - #{rem(9)});
				border-width: rem($border-width-md);
			}	
		}
		> .text {
			line-height: $line-height-md;
			margin-left: rem(6);
			font-size: rem($font-size-md);
		}
	}
	//主题颜色
	@each $key, $value in $theme-color {
		@include radio-color($key, $value);
	}
}


//复选框
#{$V}checkbox {
	padding-left: rem(18);
	margin-right: rem(10);

	> .icon {
		width: rem(18);
		height: rem(18);
		border-color: $--light-dark;

		&:after {
			width: rem(12);
			height: rem(8);
			top: calc(50% - #{rem(6)});
			left: calc(50% - #{rem(6)});
			transform: rotate(-50deg);
			border: rem($border-width-sm) $border-style-solid $--tp;
			background-color: $--tp;
		}
	}
	> input[type="checkbox"] {
		&:checked {
			~ .icon {
				border-color: $--vusui;

				&:after {
					border: {
						left-color: $--vusui;
						bottom-color: $--vusui;
					}
				}
			}
		}
		&:disabled,
		&.disabled {
			~ .icon,
			~ .text {
				cursor: not-allowed;
				opacity: .5;
			}
		}
	}
	//着色
	&.v-bedye {
		> input[type="checkbox"]:checked {
			~ .icon {
				border-color: $--vusui;
				background-color: $--vusui;

				&:after {
					border: {
						left-color: $--white;
						bottom-color: $--white;
					}
					background-color: $--tp;
				}
			}
		}
	}
	//方块
	&.v-square {
		> .icon:after {
			width: rem(10);
			height: rem(10);
			top: calc(50% - #{rem(5)});
			left: calc(50% - #{rem(5)});
			transform: rotate(0);
			border: 0;
			background-color: $--tp;
		}
		> input[type="checkbox"]:checked {
			~ .icon {
				border-color: $--vusui;

				&:after {
					background-color: $--vusui;
				}
			}
		}
	}
	//大尺寸
	&.v-large {
		padding-left: rem(30);
		margin: {
			top: rem(8);
			bottom: rem(8);
		}
		
		> .icon {
			width: rem(30);
			height: rem(30);

			&:after {
				width: rem(18);
				height: rem(10);
				top: calc(50% - #{rem(7)});
				left: calc(50% - #{rem(9)});
				border-width: rem($border-width-md);
			}
		}
		> .text {
			line-height: $line-height-md;
			margin-left: rem(6);
			font-size: rem($font-size-md);
		}
		&.v-square > .icon:after {
			width: rem(18);
			height: rem(18);
			top: calc(50% - #{rem(9)});
			left: calc(50% - #{rem(9)});
		}
	}
	//主题颜色
	@each $key, $value in $theme-color {
		@include checkbox-color($key, $value)
	}
}

//滑动开关
#{$V}switch {
	padding-left: rem(40);
	margin-right: rem(10);

	> .icon {
		width: rem(40);
		height: rem(24);
		border-radius: rem(24);
		border: rem($border-width-xs) $border-style-solid $--light-dark;
		background-color: $--light-dark;

		&:before,
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			content: "";
			background-color: $--white;
		}
		&:before {
			width: rem(38);
			height: rem(22);
			border-radius: rem(11);
			transition: transform .35s cubic-bezier(.45, 1, .4, 1);
		}
		&:after {
			width: rem(22);
			height: rem(22);
			border-radius: 100%;
			box-shadow: 0 0 0 rem(1) rgba($--black, .15), 0 rem(3) 0 rgba($--black, .1);
			transition: left .35s cubic-bezier(.35, .81, .45, 1.47);
		}
	}
	> .text:after {
		content: attr(vus-off);
	}
	> input {
		&:checked {
			~ .icon {
				border-color: $--vusui;
				background-color: $--vusui;

				&:after {
					left: 1rem;
					background-color: $--white;
				}
				&:before {
					transform: scale(0);
				}
			}
			~ .text:after {
				content: attr(vus-on);
			}
		}
		&:active {
			&:not(:disabled):not(.disabled) {
				~ .icon {
					transition: background-color .1s, border .1s;

					&:after {
						transform: scale(1.2, 1);
					}
				}
			}
		}
		&:disabled,
		&.disabled {
			~ .icon,
			~ .text {
				opacity: .5;
				cursor: not-allowed;
			}
		}
	}
	//方块
	&.v-square {
		padding-left: rem(46);

		> .icon {
			width: rem(46);
			border-radius: 0;

			&:before {
				width: rem(44);
				border-radius: 0;
			}
			&:after {
				border-radius: rem(1);
			}
		}
		> input:checked ~ .icon:after {
			left: rem(22);
		}
	}
	//内部文字
	&.v-square-text {
		height: rem(24);
		padding-left: rem(56);

		> .icon {
			width: rem(56);

			&:before {
				width: rem(54);
			}
		}
		> .text {
			width: rem(56);
			height: rem(24);
			line-height: rem(24);
			margin: 0;
			font-size: 80%;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;

			&:after {
				width: rem(32);
				text-align: center;
				position: absolute;
				right: 0;
			}
		}
		> input:checked {
			~ .icon:after {
				left: rem(32);
			}
			~ .text:after {
				color: $--white;
				left: 0;
				right: auto;
			}
		}
	}
	//尺寸
	//small
	&.v-small {
		padding-left: rem(30);

		> .icon {
			width: rem(30);
			height: rem(18);
			border-radius: rem(18);

			&:before {
				width: rem(28);
				height: rem(16);
				border-radius: rem(8);
			}
			&:after {
				width: rem(16);
				height: rem(16);
			}
		}
		> .text {
			line-height: rem(16);
		}
		> input:checked ~ .icon:after {
			left: rem(12);
		}
		//方块
		&.v-square {
			padding-left: rem(34);

			> .icon {
				width: rem(34);
				height: rem(18);
				border-radius: 0;

				&:before {
					width: rem(32);
					height: rem(16);
					border-radius: 0;
				}
				&:after {
					width: rem(16);
					height: rem(16);
				}
			}
			> input:checked ~ .icon:after {
				left: rem(16);
			}
		}
		//内部文字
		&.v-square-text {
			height: rem(18);
			padding-left: rem(44);

			> .icon {
				width: rem(44);

				&:before {
					width: rem(42);
				}
			}
			> .text {
				width: rem(44);
				height: rem(18);
				line-height: rem(18);

				&:after {
					width: rem(26);
				}
			}
			> input:checked ~ .icon:after {
				left: rem(26);
			}
		}
	}
	//large
	&.v-large {
		padding-left: rem(50);

		> .icon {
			width: rem(50);
			height: rem(30);
			border-radius: rem(30);

			&:before {
				width: rem(48);
				height: rem(28);
				border-radius: rem(15);
			}
			&:after {
				width: rem(28);
				height: rem(28);
			}
		}
		> input:checked ~ .icon:after {
			left: rem(20);
		}
		//方块
		&.v-square {
			padding-left: rem(58);

			> .icon {
				width: rem(58);
				border-radius: 0;

				&:before {
					width: rem(56);
					border-radius: 0;
				}
				&:after {
					width: rem(28);
				}
			}
			> input:checked ~ .icon:after {
				left: rem(28);
			}
		}
		//内部文字
		&.v-square-text {
			height: rem(30);
			padding-left: rem(68);

			> .icon {
				width: rem(68);

				&:before {
					width: rem(66);
				}
				&:after {
					width: rem(28);
				}
			}
			> .text {
				width: rem(68);
				height: rem(30);
				line-height: rem(30);
				font-size: 100%;

				&:after {
					width: rem(38);
				}
			}
			> input:checked ~ .icon:after {
				left: rem(38);
			}
		}
	}

	//主题颜色
	@each $key, $value in $theme-color {
		@include switch-color($key, $value);
	}
}

//单选、复选默认边框
#{$V}radio,
#{$V}radio.v-tick,
#{$V}radio.v-tick-o,
#{$V}checkbox,
#{$V}checkbox.v-bedye,
#{$V}checkbox.v-square {
	&.v-default > .icon{
		border-color: $--light-dark;
	}
}

//开关默认边框颜色
#{$V}switch{
	&.v-default {
		> .icon {
		 	border-color: $--light-dark;
			background-color: $--light-dark;

			&:after {
				box-shadow: 0 0 0 rem(1) rgba($--black, .15), 0 rem(3) 0 rgba($--black, .1);
			}
		}
	}
}

//内联表单
@include media-min($sm) {
    #{$V}form-inline {
    	#{$V}form {
			display: inline-block;
	        vertical-align: top;
    	}
    	#{$V}label {
	        vertical-align: middle;
	        margin-bottom: 0;
	        padding-left: rem(5);
	        padding-right: rem(5);
	    }
	    #{$V}form + #{$V}form {
	        margin: 0;
	    }
	    #{$V}input {
	        width: auto;
	        display: inline-block;
	    }
    }
}