$errorImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-error-circle-e50000.svg');
$validImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-check-027a02.svg');
$selectArrowImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-ui-chevron-down-46403c.svg');


/* Mensaje de error mostrado bajo el input */
.error_text {
	color: $brand-red;
	clear: both;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	font-size: $font-size-base;
	font-weight: $roboto-light;
	line-height: 1.2;
	text-align: left;
	.checkbox &, .radio & {
		padding-left: 20px;
	}
	.includes_error & {
		color: $brand-red;
	}
	.includes_warning & {
		color: #c1a655;
	}
}
.error_text a {
	color: $brand-red;
}
/* comunes a errores y validados */
.includes_error {
	input,
	textarea,
	select,
	.form-control.bootstrap-select .dropdown-toggle {
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: right 10px top 14px;
		background-size: 18px 18px;
		padding-right: 35px;
		transition: background 0s;
	}
	select {
		background-position: right 15px top 14px;
	}
	input.form-control,
	textarea.form-control {
		background-position: right 10px bottom 8px;
		padding-right: 35px;
		&::-ms-clear {
			display: none;
		}
	}
	select.form-control {
		background-position: right 10px top 50%, right 30px bottom 8px;
		background-size: 10px 10px, 18px 18px;
		padding-right: 52px;
	}
	&.form-group label:not(.sr-only) + .form-control,
	&.form-group label:not(.sr-only) + span .form-control,
	&.form-group label:not(.sr-only) + .twitter-typeahead .form-control,
	&.form-group label:not(.sr-only) + .geounits-autocomplete-input-widget .twitter-typeahead .form-control {
		padding-right: 35px;
	}
	&.form-group label:not(.sr-only) + .form-control.bootstrap-select {
		padding: 0;
	}
	&.form-group label:not(.sr-only) + .form-control.bootstrap-select .dropdown-toggle {
		padding-right: 52px;
		background-position: right 30px bottom 8px;
	}
	&.form-group label:not(.sr-only) + select.form-control,
	&.form-group label:not(.sr-only) + span select.form-control,
	&.form-group label:not(.sr-only) + .twitter-typeahead select.form-control {
		padding-right: 52px;
		background-position: right 10px top 32px, right 30px bottom 8px;
	}
	&.form-group label.long-label:not(.sr-only) + select.form-control,
	&.form-group label.long-label:not(.sr-only) + span select.form-control,
	&.form-group label.long-label:not(.sr-only) + .twitter-typeahead select.form-control {
		background-position: right 10px top 47px, right 30px bottom 8px;
	}
}

/* Inputs marcados como erróneos */
.includes_error {
	input,
	textarea,
	select,
	.false-select,
	.form-control.bootstrap-select .dropdown-toggle {
		border: 1px solid $brand-red !important;
		background-image: $errorImgUrl;
		&.form-control {
			box-shadow: none;
			&:focus {
				box-shadow: 0 0 8px rgba($input-border-focus,.8);
			}
		}
	}
	select.form-control {
		background-image: $selectArrowImgUrl, $errorImgUrl;
	}
	input[type="file"] {
		background-image: none;
	}
}
.checkbox.includes_error {
	input {
		outline: 2px solid $brand-red;
		outline-offset: -1px;
		@media screen and (device-aspect-ratio: 40/71) {
			outline: 0;
		}
	}
}

/* error messages: EOC */