@import  "../coco-variables.scss";

.textbox{
	border-radius: 4px;
	&:not(.textbox-invalid){
		border-color: $--tab-border-color;
		&:hover{ border-color: darken($--tab-border-color, 20%);}
		// &:focus,&:active{ border-color: #1890FF; outline: none;}
		&.textbox-focused{ border-color:$--sys-primary;}
	}
	&.textbox-focused{ box-shadow: none; outline: none;}
	
	.combo-arrow:hover,.combo-arrow{ background-color: transparent;}
	
	.textbox-button{
		background:none; border-width: 0; color: $--sys-primary;
		&:hover{ color: #FF0000;}
	}
	
	&.xl{
		input{ height:38px; padding-left: 10px; padding-right: 10px;}
		.textbox-icon{ line-height: 38px; vertical-align: top;}
	}
	&.md{
		input{ height:34px; padding-left: 10px; padding-right: 10px;}
		.textbox-icon{ line-height: 34px; vertical-align: top;}
	}
	&.sm{
		input{ height:30px; padding-left: 10px; padding-right: 10px;}
		.textbox-icon{ line-height: 30px; vertical-align: top;}
	}
	&.xs{
		input{ height:26px; padding-left: 10px; padding-right: 10px;}
		.textbox-icon{ line-height: 26px; vertical-align: top;}
	}
	
	/* form textarea */
	.textbox-text{ padding: 7px 10px; line-height: 24px;}
}


.dark .textbox{
	background: none; border-color: $--tab-border-color-dark;
	input{ background: none;}
}