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

:host {
	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
}

:host([tokenizer-available]) {
	min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
}

:host(:not([hidden])) {
	display: inline-block;
}

.ui5-multi-combobox-root {
	display: flex;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: var(--_ui5_input_border_radius);
}

.ui5-multi-combobox-tokenizer {
	min-width: var(--_ui5_input_tokenizer_min_width);
	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
	border: none;
	width: auto;
	height: 100%;
}

:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
	color: var(--sapLinkColor);
}

:host([disabled]) .ui5-multi-combobox-tokenizer {
	opacity: 100%;
}

.ui5-multi-combobox-tokenizer::part(n-more-text) {
	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
}

[inner-input][inner-input-with-icon] {
	padding: var(--_ui5_input_inner_padding_with_icon);
}

:host([tokenizer-available]) [inner-input] {
	padding-inline-start: 0;
	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
	min-width: var(--_ui5_input_min_width_tokenizer_available);
}

:host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
	--_ui5_input_tokenizer_min_width: 0px;
	width: var(--_ui5_input_tokenizer_min_width);
}