:host {
	background: var(--sapList_Background);
}

:host([_alternate]) {
	background: var(--_ui5_table_row_alternating_background);
}

:host([position]) {
	height: var(--row-height);
}

:host(:first-of-type) > [ui5-table-cell],
:host(:first-of-type) > ::slotted([ui5-table-cell]) {
	border-top: none;
}

:host(:last-of-type) {
	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_TableFooterBorder);
}

:host([aria-selected="true"]) {
	background: var(--sapList_SelectionBackgroundColor);
	box-shadow: inset 0 calc(-1 * var(--sapList_BorderWidth)) 0 0 var(--sapList_SelectionBorderColor);

	#actions-cell,
	#navigated-cell,
	#selection-cell {
		clip-path: inset(0px 0px 1px 0px); /* selection bottom border should not overlap with sticky cells */
	}
}

:host(:not([_has-popin])) {
	/* Use CSS Space Toggles until if() or container style queries are widely supported */
	--_ui5_table_cell_border_merged: ;
	--_ui5_table_cell_content_merged: ;
}

:host(:not([_has-popin]):active),
:host(:not([_has-popin]):focus-within) {
	/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
	--_ui5_table_cell_content_merged: initial;
}

:host([_interactive]) {
	cursor: pointer;
}

@media (hover: hover) {
	:host([_interactive]:hover) {
		background: var(--sapList_Hover_Background);
	}
	:host([_interactive][aria-selected=true]:hover) {
		background: var(--sapList_Hover_SelectionBackground);
	}
	:host(:not([_has-popin]):hover) {
		/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
		--_ui5_table_cell_content_merged: initial;
	}
}

:host([_interactive][_active]),
:host([_interactive][aria-selected="true"][_active]) {
	background: var(--sapList_Active_Background);
}

#popin-cell {
	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
	align-content: initial;
	flex-direction: column;
	grid-column: 1 / -1;
	border-top: none;
}

#navigated-cell {
	overflow: visible;
	grid-row: span 2;
}

:host([navigated]) #navigated {
	position: absolute;
	inset: 0px 0px 0px 1px;
	background: var(--sapList_SelectionBorderColor);
}

:host([navigated][tabindex]:focus) {
	#navigated {
		transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
		bottom: 3px;
		top: 2px;
	}
	#navigated:dir(rtl) {
		transform: translateX(var(--_ui5_table_navigated_cell_width));
	}
}

:host([navigated]) #popin-cell {
	grid-column: 1 / -2;
}

#selection-cell ~ #popin-cell {
	grid-column-start: 2;
	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
}

#actions-cell {
	gap: var(--_ui5_table_row_actions_gap);
}