@import "./FormComponents.css";
@import "./InputIcon.css";
@import "./Input.css";

:host([icon]) {
	min-width: var(--_ui5_button_base_min_width);
	width: var(--_ui5_button_base_min_width);
}

:host([opened]) .ui5-input-focusable-element::after {
	content: var(--ui5_input_focus_pseudo_element_content);
	position: absolute;
	pointer-events: none;
	z-index: 2;
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
	border-radius: var(--_ui5_input_focus_border_radius);
	top: var(--_ui5_input_focus_offset);
	bottom: var(--_ui5_input_focus_offset);
	left: var(--_ui5_input_focus_offset);
	right: var(--_ui5_input_focus_offset);
}

:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after {
	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
}

:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after {
	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
}

:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after {
	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
}

:host([icon]) .ui5-select-root {
	min-width: var(--_ui5_button_base_min_width);
}

:host([icon]) .ui5-select-label-root {
	min-width: 0;
	padding-inline-start: 0;
}

.ui5-select-root {
	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
	width: 100%;
	height: 100%;
	display: flex;
	outline: none;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--_ui5_input_border_radius);
}

.ui5-select-label-root {
	flex-shrink: 1;
	flex-grow: 1;
	align-self: center;
	min-width: 1rem;
	padding-inline-start: 0.5rem;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--_ui5_select_label_color);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	font-weight: normal;
}

.ui5-select-option-icon {
	padding-inline-start: 0.5rem;
	color: var(--sapField_TextColor);
	align-self: center;
}

:host(:not([disabled])) {
	cursor: pointer;
}

.ui5-select-icon-root {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: var(--_ui5_select_icon_width);
	min-width: var(--_ui5_select_icon_width);
	height: var(--_ui5_select_icon_wrapper_height);
	padding: 0;
}

.ui5-select-icon {
	color: inherit;
}

:host([value-state]:not([value-state="None"], [value-state="Positive"])) .ui5-select-icon-root {
	height: var(--_ui5_select_icon_wrapper_state_height);
}