/*
	This CSS file enables visual alignment of all input elements:
	- value states
	- readonly and disabled states
*/

:host([disabled]) {
	cursor: default;
	pointer-events: none;
	background: none;
}

:host([readonly]:not([disabled])) {
	border-color: var(--_ui5_input_readonly_border_color);
	background: var(--sapField_ReadOnly_BackgroundStyle);
	background-color: var(--_ui5_input_readonly_background);
}

:host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
	box-shadow: var(--_ui5_input_error_icon_box_shadow);
}

:host([value-state="Critical"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
}

:host([value-state="Information"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
	box-shadow: var(--_ui5_input_information_icon_box_shadow);
}

:host([value-state="Positive"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
	box-shadow: var(--_ui5_input_success_icon_box_shadow);
}

:host([value-state="Negative"]:not([readonly]):not([disabled])) {
	background: var(--sapField_InvalidBackgroundStyle);
	background-color: var(--sapField_InvalidBackground);
	border-color: var(--_ui5_input_value_state_error_border_color);
	box-shadow: var(--sapField_InvalidShadow);
}

:host([value-state="Critical"]:not([readonly]):not([disabled])) {
	background: var(--sapField_WarningBackgroundStyle);
	background-color: var(--sapField_WarningBackground);
	border-color: var(--_ui5_input_value_state_warning_border_color);
	box-shadow: var(--sapField_WarningShadow);
}

:host([value-state="Positive"]:not([readonly]):not([disabled])) {
	background: var(--sapField_SuccessBackgroundStyle);
	background-color: var(--sapField_SuccessBackground);
	border-color: var(--_ui5_input_value_state_success_border_color);
	border-width: var(--_ui5_input_value_state_success_border_width);
	box-shadow: var(--sapField_SuccessShadow);
}

:host([value-state="Information"]:not([readonly]):not([disabled])) {
	background: var(--sapField_InformationBackgroundStyle);
	background-color: var(--sapField_InformationBackground);
	border-color: var(--_ui5_input_value_state_information_border_color);
	border-width: var(--_ui5_input_information_border_width);
	box-shadow: var(--sapField_InformationShadow);
}

:host([value-state="Negative"]) .inputIcon:active,
:host([value-state="Negative"]) .inputIcon.inputIcon--pressed {
	box-shadow: var(--_ui5_input_error_icon_box_shadow);
	color: var(--_ui5_input_icon_error_pressed_color);
}

:host([value-state="Critical"]) .inputIcon:active,
:host([value-state="Critical"]) .inputIcon.inputIcon--pressed {
	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
	color: var(--_ui5_input_icon_warning_pressed_color);
}

:host([value-state="Information"]) .inputIcon:active,
:host([value-state="Information"]) .inputIcon.inputIcon--pressed {
	box-shadow: var(--_ui5_input_information_icon_box_shadow);
	color: var(--_ui5_input_icon_information_pressed_color);
}

:host([value-state="Positive"]) .inputIcon:active,
:host([value-state="Positive"]) .inputIcon.inputIcon--pressed {
	box-shadow: var(--_ui5_input_success_icon_box_shadow);
	color: var(--_ui5_input_icon_success_pressed_color);
}

:host([value-state="Negative"]) .inputIcon,
:host([value-state="Critical"]) .inputIcon {
	padding: var(--_ui5_input_error_warning_icon_padding);
}

:host([value-state="Information"]) .inputIcon {
	padding: var(--_ui5_input_information_icon_padding);
}