@import url('../../assets/css/animation.css');
@import url('../../assets/css/reset.css');
@import url('../../assets/css/scrollbar.css');
.v-input {
	position: relative;
	width: 100%;
	min-width: 260px;
	display: flex;
	align-items: center;
	.prepend {
		line-height: 38px;
		height: 38px;
		border: 1px solid #dcdfe6;
		border-right: none;
		border-radius: 4px 0 0 4px;
		color: #909399;
		padding: 0 14px;
		font-size: 14px;
		background-color: #f5f7fa;
	}
	.append {
		line-height: 38px;
		height: 38px;
		border: 1px solid #dcdfe6;
		border-left: none;
		border-radius: 0 4px 4px 0;
		color: #909399;
		padding: 0 14px;
		font-size: 14px;
		background-color: #f5f7fa;
	}
	.v-input-box {
		flex: 1;
		position: relative;
		cursor: pointer;
		input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
			background-color: #fff;
			background-image: none;
			transition: background-color 50000s ease-in-out 0s, border .3s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
		}
		.input, .textarea {
			width: 100%;
			height: 40px;
			text-indent: 10px;
			outline: none;
			cursor: pointer;
			border-radius: 4px;
			box-sizing: border-box;
			border: 1px solid #ddd;
			transition: border .3s;
			&:hover {
				border-color: #c0c4cc;
			}
		}
		.input {
			line-height: 40px;
		}
		.textarea {
			height: auto;
			text-indent: 0;
			padding: 6px;
			resize: vertical;
		}
		.prefix {
			height: 38px;
			position: absolute;
			left: 2px;
			top: 1px;
			background-color: #fff;
			display: flex;
			align-items: center;
			i, img {
				padding-left: 4px;
				font-size: 16px;
				cursor: default;
			}
		}
		.suffix {
			height: 36px;
			border-radius:  0 4px 4px 0;
			position: absolute;
			right: 7px;
			bottom: 3px;
			background-color: #fff;
			display: flex;
			align-items: center;
			.imgBox {
				display: flex;
				align-items: center;
				.loading {
					animation: loading 1s linear infinite;
				}
				.img {
					padding: 2px;
					transition: .3s;
				}
				i, img {
					padding: 0 4px !important;
					font-size: 16px;
					cursor: default;
				}
				.arrow {
					color: #C0C4CC;
				}
			}
		}
		.showWordLimit {
			line-height: 22px;
			background: #fff;
			padding: 0 5px;
			color: #909399;
			font-size: 12px;
		}
		.prependBorderRadius {
			border-radius: 0 4px 4px 0;
		}
		.appendBorderRadius {
			border-radius: 4px 0 0 4px;
		}
		.allBorderRadius {
			border-radius: 0;
		}
		.resize {
			resize: none;
		}
		.paddingLeftSmall {
			padding-left: 20px;
		}
		.paddingLeft {
			padding-left: 40px;
		}
	}
	.disabled {
		cursor: not-allowed !important;
		background-color: #f5f7fa;
		color: #c0c4cc;
		&:-moz-placeholder,   
		&:-moz-placeholder {   
			color: #c0c4cc !important;   
		}   
		
		&:-ms-input-placeholder,   
		&:-ms-input-placeholder {   
			color: #c0c4cc !important;   
		}   
		
		&::-webkit-input-placeholder,   
		&::-webkit-input-placeholder {   
			color: #c0c4cc !important;   
		}  
		&:hover {
			border-color: #ddd;
		}
	}
	.disabledBox {
		.prefix, .suffix, .showWordLimit {
			background-color: #f5f7fa !important;
		}
	}
}