//@import "../../../abstracts/abstracts";

.dbqdb-error {
	padding: 15px;
}

.dbqdb-error-title {
	font-size: 18px;
}

.dbqdb-error-description {
	margin-top: 15px;
}

.element {
	.property {
		.radio-list-control.error {
			label {
				color: $modal-error-color !important;
			}
		}
		textarea.error {
			appearance: none;
			-webkit-appearance: none;
			background-color: $modal-error-background;
			border: $field-border-width solid $modal-error-border !important;
			box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
			color: $modal-error-color;

			&:focus {
				appearance: none;
				-webkit-appearance: none;
				background: $modal-input-background;
				border: 1px solid  $color-primary;
				box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
				color: rgba(0, 0, 0, 0.95);
			}
		}
		select.error {
			/*-webkit-appearance: none;*/
			background-color: $modal-error-background;
			border: $field-border-width solid $modal-error-border !important;
			box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
			color: $modal-error-color;

			&:focus {
				/*-webkit-appearance: none;*/
				background: $modal-input-background;
				border: 1px solid $color-primary;
				border-radius: 0.28571429rem;
				box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
				color: rgba(0, 0, 0, 0.95);
			}
		}

		> label.error {
			color: $modal-error-color !important;
		}
	}
}

.element .property input:not([type]).error,
.element .property input[type="date"].error,
.element .property input[type="datetime-local"].error,
.element .property input[type="email"].error,
.element .property input[type="number"].error,
.element .property input[type="password"].error,
.element .property input[type="search"].error,
.element .property input[type="tel"].error,
.element .property input[type="time"].error,
.element .property input[type="text"].error,
.element .property input[type="url"].error,
.element .property canvas.error,
.element .property .dbqdb-file-upload.error .dbqfsc-file-upload-container,
.element .property .dbqdb-image-upload.error .dbqfsc-file-upload-container {
	background: $modal-error-background;
	background-color: $modal-error-background;
	border: $field-border-width solid $modal-error-border;
	box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
	color: $modal-error-color;
}

.element .property .dbqdb-file-upload.error .dbqfsc-file-upload-container,
.element .property .dbqdb-image-upload.error .dbqfsc-file-upload-container {
	border: $field-border-width dashed $modal-error-border;
}

.element .property input:not([type]).error:focus,
.element .property input[type="date"].error:focus,
.element .property input[type="datetime-local"].error:focus,
.element .property input[type="email"].error:focus,
.element .property input[type="number"].error:focus,
.element .property input[type="password"].error:focus,
.element .property input[type="search"].error:focus,
.element .property input[type="tel"].error:focus,
.element .property input[type="time"].error:focus,
.element .property input[type="text"].error:focus,
.element .property input[type="url"].error:focus {
	-webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
	background: $modal-input-background;
	border: $field-border-width solid $color-primary;
	box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
	color: rgba(0, 0, 0, 0.95);
}

.inline-message.error.active {
	-ms-border-radius: 3px;
	background-color: $modal-error-background;
	border-color: $modal-error-border;
	border-left-width: 10px;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	color: $modal-error-color;
}

span.error {
	color: $modal-error-color !important;
}

.dbq-form .element .property input:not([type]).error,
.dbq-form .element .property input[type="date"].error,
.dbq-form .element .property input[type="datetime-local"].error,
.dbq-form .element .property input[type="email"].error,
.dbq-form .element .property input[type="number"].error,
.dbq-form .element .property input[type="password"].error,
.dbq-form .element .property input[type="search"].error,
.dbq-form .element .property input[type="tel"].error,
.dbq-form .element .property input[type="time"].error,
.dbq-form .element .property input[type="text"].error,
.dbq-form .element .property input[type="url"].error,
.dbq-form .element .checkbox.error,
.dbq-form .form-control.error,
.dbq-form .element .button_list.error {
	background: $modal-error-background;
	background-color: $modal-error-background;
	border-color: $modal-error-border;
	color: color(text-color-default);
}

.dbq-form {
	.form-control.error {
		&:focus {
			outline: 0;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}

		+ .input-group-append button {
			border-color: $modal-error-border !important;
		}
	}
	select {
		/*
			Custom arrow for select elements (not all.. example: CMS -> content management -> new folder -> the folderType selectbox )
			!!! this should be after error/validation styling otherwise the arrow will not be visible
		*/
		&.form-control.error {
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			background: transparent;
			background-repeat: no-repeat !important;
			background-image: url("data:image/svg+xml;utf8,<svg fill='%230054F0' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><g><path d='M10,16L0,6l2-2l8,8l8-8l2,2L10,16z'/></g></svg>") !important;
			color: #001323 !important;
			background-position-x: calc(100% - 10px) !important;
			background-position-y: 50% !important;
			background-size: 10px 10px !important;
			border-radius: 0 0 10px 10px !important;
			padding-left: 10px !important;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 30px 0 10px !important;
		}
	}
}