@import "./InvisibleTextStyles.css";
:host(:not([hidden])) {
	display: block;
	position: relative;
}

.ui5-li-tree-text-wrapper {
	flex: auto;
}

.ui5-li-root-tree {
	padding-inline-start: 0;
}

:host(:not([level="1"])) .ui5-li-root {
	border-color: var(--sapList_AlternatingBackground);
}

:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root {
	border-bottom: var(--ui5-listitem-selected-border-bottom);
}

:host([_toggle-button-end]) .ui5-li-root-tree:hover,
:host([_selection-mode]:not([_selection-mode="None"], [_selection-mode="Delete"], [active])) .ui5-li-root-tree:hover {
	cursor: pointer;
}

:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
:host(:not([_selection-mode="None"]):not([_selection-mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
	background: var(--sapList_Hover_Background);
}

:host(:not([level="1"]):not([active]):not([selected])) .ui5-li-root-tree {
	background: var(--sapList_AlternatingBackground);
}

:host([_toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
	background: var(--ui5-listitem-background-color);
}

:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
	background: var(--sapList_SelectionBackgroundColor);
}

:host(:not([_selection-mode="None"]):not([_selection-mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
	background-color: var(--sapList_Hover_SelectionBackground);
}

:host([_has-image]) {
	height: unset;
}

::slotted([ui5-avatar][slot="image"]) {
	min-width: var(--_ui5_avatar_fontsize_XS);
	min-height: var(--_ui5_avatar_fontsize_XS);
}

.ui5-li-tree-toggle-box {
	min-width: var(--_ui5-tree-toggle-box-width);
	min-height: var(--_ui5-tree-toggle-box-height);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ui5-li-tree-toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--_ui5-tree-toggle-box-width);
	height: var(--_ui5-tree-toggle-box-height);
	color: var(--sapContent_IconColor);
	cursor: pointer;
}

.ui5-li-tree-toggle-icon::part(root) {
	width: var(--_ui5-tree-toggle-icon-size);
	height: var(--_ui5-tree-toggle-icon-size);
}

:host([actionable]) .ui5-li-tree-toggle-icon {
	color: var(--sapButton_TextColor);
}

:host([active][actionable]) .ui5-li-tree-toggle-icon {
	color: var(--sapList_Active_TextColor);
}

/* move host styles to .ui5-li-root as the focused element of [ui5-tree-item]
is the .ui5-li-root and not the host. The host height expands to fill subtree */

:host {
    height: unset;
}

.ui5-li-root {
    height: var(--_ui5_list_item_base_height);
}

/* selected */
:host([selected]) {
    background: unset;
}
:host([selected]) .ui5-li-root {
    background: var(--sapList_SelectionBackgroundColor);
}

:host([has-border]) {
    border-bottom: unset;
}
:host([has-border]) .ui5-li-root {
    border-bottom: var(--ui5-listitem-border-bottom);
}

/* focused & selected */
:host(:not([focused])[selected][has-border]) {
    border-bottom: unset;
}
:host(:not([focused])[selected][has-border]) .ui5-li-root {
    border-bottom: var(--ui5-listitem-selected-border-bottom);
}

:host([focused][selected]) {
    border-bottom: unset;
}
:host([focused][selected]) .ui5-li-root {
    border-bottom: var(--ui5-listitem-focused-selected-border-bottom);
}

.ui5-tree-li-subtree {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* focused & active */
:host([focused][active]) .ui5-li-root-tree {
	background: var(--sapList_Active_Background);
}

:host([focused][active]) .ui5-li-root-tree .ui5-li-tree-toggle-icon,
:host([focused][active]) .ui5-li-root-tree .ui5-li-title,
:host([focused][active]) .ui5-li-root-tree .ui5-li-additional-text {
	color: var(--sapList_Active_TextColor);
}