@import "./FormComponents.css";
@import "./InvisibleTextStyles.css";
@import "./InputIcon.css";
@import "./InputSharedStyles.css";

:host(:not([hidden])) {
	display: inline-block;
	line-height: normal;
	letter-spacing: normal;
	word-spacing: normal;
}

:host {
	color: var(--sapField_TextColor);
	background-color: var(--sapField_Background);
	border: var(--_ui5_step_input_border_style);
	border-radius: var(--sapField_BorderCornerRadius);
	box-sizing: border-box;
	height: var(--_ui5_input_height);
	position: relative;
	isolation: isolate;
	margin: var(--_ui5_input_margin_top_bottom) 0;
	min-width: var(--_ui5_step_input_min_width);
	text-align: right;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

[ui5-input] {
	--ui5_input_focus_pseudo_element_content: none;
}

:host .ui5-step-input-input {
	text-align: inherit;
	height: inherit;
}

:host(:not([value-state]):not([readonly]):not([disabled])){
	box-shadow: none;
}

:host(:not([value-state]):not([readonly]):not([disabled]):hover),
:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
	background-color: var(--_ui5_step_input_border_color_hover);
	border: var(--_ui5_step_input_border_hover);
}
:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
	background-color: var(--sapField_Hover_Background);
	border: var(--_ui5_step_input_border_style_hover);
	box-shadow: var(--sapField_Hover_Shadow);
}

:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
	box-shadow: var(--sapField_Hover_SuccessShadow);
}

:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
	box-shadow: var(--sapField_Hover_InformationShadow);
}

:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
	box-shadow: var(--sapField_Hover_WarningShadow);
}

:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
	box-shadow: var(--sapField_Hover_InvalidShadow);
}

:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
	background-color: var(--_ui5-step_input_button_state_hover_background_color);
}

:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]),
:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
	background-color: var(--sapField_Focus_Background);
}

:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
:host([value-state="None"]:not([readonly]):not([disabled]))::after,
:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
	position: absolute;
	content: "";
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	outline: none;
	pointer-events: none;
	border-radius: var(--sapField_BorderCornerRadius);
	border-style: var(--_ui5_input_error_warning_border_style);
	z-index: 0;
	border-width: 0px;
}

:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
	border-color: var(--sapField_InformationColor);
	border-width: var(--_ui5_input_information_border_width);
}

:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
	border-color: var(--sapField_WarningColor);
	border-width: 2px;
}

:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
	border-color: var(--sapField_SuccessColor);
	border-width: 1px;
}

:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
	border-color: var(--sapField_InvalidColor);
	border-width: var(--_ui5_input_information_border_width);
}

:host([value-state])::after {
	border-width: var(--_ui5_input_state_border_width);
}
:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input {
	background-color: var(--_ui5_input_input_background_color);
}

:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
	background-color: var(--_ui5_step_input_input_error_background_color);
}
:host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
		outline: none;
}

:host .ui5-step-input-input {
	width: 100%;
	color: inherit;
	background-color: inherit;
	border: var(--_ui5_step_input_input_border);
	box-sizing: border-box;
	vertical-align: top;
	margin-top: var(--_ui5_step_input_input_margin_top);
	min-width: var(--_ui5_step_input_min_width);
	padding-inline-start: var(--_ui5_step_input_padding);
	padding-inline-end: var(--_ui5_step_input_padding);
	position: relative;
	outline: none;
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

:host .ui5-step-input-input[readonly] {
	padding: 0;
}

:host .ui5-step-input-input:hover,
:host .ui5-step-input-input[focused]{
	box-shadow: none;
}

:host .ui5-step-input-root {
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	height: inherit;
}

:host .ui5-step-input-input::part(input) {
	white-space: nowrap;
}

:host .ui5-step-input-input[text-align=left]::part(input) {
	text-align: left;
}

:host .ui5-step-input-input[text-align=center]::part(input) {
	text-align: center;
}

:host .ui5-step-input-input[text-align=right]::part(input) {
	text-align: right;
}

::slotted([slot="valueStateMessage"]) {
	text-align: left;
}

:host .ui5-step-icon {
	position: absolute;
	display: var(--_ui5_step_input_button_display);
	height: 2rem;
	height: 100%;
	background-color: var(--_ui5_step_input_button_background_color);
	z-index: 0;
}

:host .ui5-step-icon[focused] {
	border: none;
	outline: none;
}

:host .ui5-step-icon.ui5-step-dec {
	left: var(--_ui5_step_input_button_left);
	z-index: 1;
}

:host .ui5-step-icon.ui5-step-inc {
	right: var(--_ui5_step_input_button_right);
}

:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable),
:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):active,
:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):hover {
	opacity: 0.5;
	background-color: transparent;
	color: var(--sapContent_IconColor);
}

:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:hover,
:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:active {
	background-color: var(--sapField_Background);
	color: var(--sapContent_IconColor);
}

:host .ui5-step-input-input[focused]::after {
	position: absolute;
	content: "";
	border: var(--_ui5_step_input_input_border_focused_after);
	top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
	right: 0px;
	bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
	border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
	left: 0px;
	outline: none;
	pointer-events: none;
	z-index: 1;
}

:host .ui5-step-input-input[focused] {
	outline: none;
}

:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
}

:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
}

:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
}

:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
}

/* Disable spin buttons in Chrome, Safari, Edge, Opera */
:host .ui5-step-input-input::-webkit-outer-spin-button,
:host .ui5-step-input-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

:host([disabled]) .ui5-step-icon {
	background-color: var(--_ui5_step_input_disabled_button_background);
}

:host([disabled]) .ui5-step-icon [ui5-icon] {
	color: var(--sapField_ReadOnly_BorderColor);
}