/* ========================== */
/* CSS for sap.ui.table/Cell  */
/* Base theme                 */
/* ========================== */

@_sap_ui_table_Cell_FocusOutlineOffset: -@sapUiContentFocusWidth;
@_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome: calc(-@sapUiContentFocusWidth ~"- 0.0625rem");
@_sap_ui_table_Cell_Padding: 0 0.5rem;
@_sap_ui_table_Cell_TouchMenuIconSize: 1.375rem;
@_sap_ui_table_Cell_ColumnIconSize: 0.75rem;
@_sap_ui_table_Cell_BorderColorSelected: @sapUiListBorderColor;
@_sap_ui_table_Cell_BorderColorFixedSelected: @sapUiListTableFixedBorder;
@_sap_ui_table_Cell_ShadowColorFixed: transparent;
@_sap_ui_table_Cell_BorderBottomFocus: @sapUiListTableFixedBorder;
@_sap_ui_table_Cell_DummyBorderColor: @sapUiListVerticalBorderColor;

/*
 * Focus outline
 */
.sapUiTableCell:focus {
	outline: none;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
		outline-offset: @_sap_ui_table_Cell_FocusOutlineOffset;

		.sapUiTableZoomout & {
			outline-offset: @_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome;
		}
	}
}

/*
 * Hover
 */
.sapUiTableHeaderCell:not(.sapUiTableRowActionHeaderCell) {
	&:hover {
		background-color: @sapUiListHoverBackground;
	}
}

/*
 * Borders
 */
.sapUiTableCell {
	position: relative;
	box-sizing: border-box;
	border-right: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
	border-bottom: @_sap_ui_table_BaseBorderWidth solid @sapUiListBorderColor;

	.sapUiTableRowIndented > &.sapUiTableRowSelectionCell {
		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
	}

	// Adds a border on top that might be required due to indentation of the row above.
	.sapUiTableGroupMode &.sapUiTableRowSelectionCell {
		box-shadow: 0 -@_sap_ui_table_BaseBorderWidth @sapUiListBorderColor;
	}

	// Last data column border
	&.sapUiTableCellLast {
		// The table and row action column have a border, so the last data column doesn't need one.
		// See: sapUiTableCellDummy, sapUiTableCtrlScr
		border-right-color: transparent;
	}

	// Row action column border
	&.sapUiTableRowActionHeaderCell,
	&.sapUiTableRowActionCell {
		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;

		.sapUiTableHScr & {
			border-left-color: @sapUiListTableFixedBorder;
			border-right-color: transparent;
		}
	}
	&.sapUiTableRowActionCell {
		.sapUiTableRowNavIndicator:not(.sapUiTableRAct) & {
			border-right: none;
			border-left: none;
			background-color: transparent;
		}
	}

	// Fixed data column border
	&.sapUiTableCellLastFixed {
		border-right-color: @sapUiListTableFixedBorder;
	}

	// Header rows borders
	&.sapUiTableHeaderCell {
		// Column header rows don't have bottom borders. The header area as a whole has a bottom border.
		// See: sapUiTableColHdrCnt
		border-bottom: none;
	}

	// Fixed rows borders
	.sapUiTableRowLastFixedTop > &,
	.sapUiTableRowLastScrollable > & {
		border-bottom-color: @sapUiListTableFixedBorder;

		.sapUiTableRowSel& {
			border-bottom-color: @_sap_ui_table_Cell_BorderColorFixedSelected;
		}

		&:focus {
			border-bottom-color: @_sap_ui_table_Cell_BorderBottomFocus;
		}
	}

	.sapUiTableRowFirstScrollable > &,
	.sapUiTableRowFirstFixedBottom > & {
		box-shadow: 0 @_sap_ui_table_BaseBorderWidth @_sap_ui_table_Cell_ShadowColorFixed inset;
	}

	// Last row border
	.sapUiTableLastRow > & {
		// The table has a border, so the last row doesn't need one.
		border-bottom-color: transparent;
	}

	> .sapUiTableCellInner {
		box-sizing: border-box;

		&.sapUiTableFirstColumnCell {
			padding-left: 1rem;
		}
	}

	.sapUiTableRowSel > & {
		border-bottom-color: @_sap_ui_table_Cell_BorderColorSelected;
	}

	.sapUiTableSummaryRow > & {
		border-left-color: transparent;
		border-right-color: transparent;
	}
}

.sapUiTableRowSelectionHeaderCell { // Contains highlight and SelectAll selector.
	display: none;
	vertical-align: bottom;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: @_sap_ui_table_RowSelectorWidth;
	min-height: @_sap_ui_table_ColumnHeaderHeight;

	.sapUiSizeCozy & {
		min-height: @_sap_ui_table_ColumnHeaderHeightCozy;
	}

	.sapUiTableRowSelectors &,
	.sapUiTableRowHighlights & {
		display: inline-block;
	}

	// Only selectors visible.
	.sapUiTableRowSelectors:not(.sapUiTableRowHighlights) & {
		width: @_sap_ui_table_RowSelectorWidth;

		.sapUiSizeCondensed & {
			width: @_sap_ui_table_RowSelectorWidthCondensed;
		}

		.sapUiSizeCozy & {
			width: @_sap_ui_table_RowSelectorWidthCozy;
		}
	}

	// Only highlights visible.
	.sapUiTableRowHighlights:not(.sapUiTableRowSelectors) & {
		width: @_sap_ui_table_RowHighlightWidth;
	}

	// Both selectors and highlights visible.
	.sapUiTableRowHighlights.sapUiTableRowSelectors & {
		width: calc(@_sap_ui_table_RowSelectorWidth ~"+" @_sap_ui_table_RowHighlightWidth);

		.sapUiSizeCondensed & {
			width: calc(@_sap_ui_table_RowSelectorWidthCondensed ~"+" @_sap_ui_table_RowHighlightWidth);
		}

		.sapUiSizeCozy & {
			width: calc(@_sap_ui_table_RowSelectorWidthCozy ~"+" @_sap_ui_table_RowHighlightWidth);
		}
	}

	&.sapUiTableSelAllDisabled > * {
		opacity: 0.3;
		pointer-events: none;
	}

	&:not(.sapUiTableSelAllDisabled), &:not(.sapUiTableSelAllDisabled) .sapUiIcon {
		cursor: pointer;
	}
}

.sapUiTableHeaderDataCell {
	padding: 7px 0;

	&.sapUiTableHeaderCellActive {
		cursor: pointer;
		.sapMLabel, .sapMText, .sapUiIcon {
			cursor: pointer;
		}
	}

	&.sapUiTableHeaderCellActive:active {
		// The active state background color and text color should not be applied if column reordering is in progress.
		.sapUiTable:not(.sapUiTableDragDrop) & {
			background-color: @sapUiListActiveBackground;
			color: @sapUiListActiveTextColor;
		}

		& > .sapUiTableCellInner {
			span,
			label,
			&.sapUiTableColSorted::after,
			&.sapUiTableColFiltered::after {
				color: @sapUiListActiveTextColor;
			}
		}
	}

	> .sapUiTableCellInner {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: normal;
		padding: @_sap_ui_table_Cell_Padding;

		&.sapUiTableFirstColumnCell {
			padding-left: 1rem;
		}

		& > div:first-child {
			display: flex;
			flex: 1 1 auto;
			overflow: hidden;

			> * {
				overflow: hidden;
			}
		}

		&::after {
			.sapUiTableColSorted&,
			.sapUiTableColFiltered& {
				content: "";
				font-family: "SAP-Icons";
				font-size: @_sap_ui_table_Cell_ColumnIconSize;
				color: @sapUiContentNonInteractiveIconColor;
				margin-left: 0.5rem;
				flex: none;
			}

			.sapUiTableColSorted& {
				content: "\e1fd";
			}

			.sapUiTableColSortedD& {
				content: "\e1fc";
			}

			.sapUiTableColFiltered& {
				content: "\e076";
			}

			.sapUiTableColFiltered.sapUiTableColSorted& {
				content: "\e076\00a0\e1fd";
			}

			.sapUiTableColFiltered.sapUiTableColSortedD& {
				content: "\e076\00a0\e1fc";
			}
		}
	}

	> .sapUiTableCellTouchMenu {
		display: flex;
		padding: @_sap_ui_table_Cell_Padding;

		.sapUiTableColResizer {
			margin-left: auto;
		}

		.sapUiTableColResizer,
		.sapUiTableColDropDown {
			font-family: "SAP-icons";
			font-size: @_sap_ui_table_Cell_TouchMenuIconSize;
			color: @sapUiContentIconColor;
			cursor: default;

			&:active {
				color: @sapUiContentContrastTextColor;
			}
		}
	}
}

.sapUiTableRowActionHeaderCell {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	display: none;
	z-index: 4; /* Ensure Action Area before Resize/Reorder bars */

	.sapUiTableRAct & {
		display: block;
	}

	.sapUiTableRActS & {
		width: @_sap_ui_table_RowActionColumnSmallWidth;

		.sapUiSizeCozy & {
			width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
		}

		.sapUiSizeCondensed & {
			width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
		}
	}

	.sapUiTableRActM & {
		width: @_sap_ui_table_RowActionColumnWidth;

		.sapUiSizeCozy & {
			width: @_sap_ui_table_RowActionColumnWidthCozy;
		}

		.sapUiSizeCondensed & {
			width: @_sap_ui_table_RowActionColumnWidthCondensed;
		}
	}

	.sapUiTableRActL & {
		width: @_sap_ui_table_RowActionColumnLargeWidth;

		.sapUiSizeCozy & {
			width: @_sap_ui_table_RowActionColumnLargeWidthCozy;
		}

		.sapUiSizeCondensed & {
			width: @_sap_ui_table_RowActionColumnLargeWidthCondensed;
		}
	}

	> span {
		display: none;
	}
}

.sapUiTableDataCell {
	padding: 0;
	vertical-align: middle;

	> .sapUiTableCellInner {
		text-overflow: ellipsis;
		overflow: hidden;
		padding: @_sap_ui_table_Cell_Padding;
		white-space: nowrap;
	}
}

.sapUiTableRowSelectionCell {
	cursor: pointer;
}

.sapUiTableRowSelectionCell,
.sapUiTableRowActionCell {
	position: relative;
}

.sapUiTableRowActionCell {
	display: flex;
	align-items: center;

	.sapUiTableRActS & {
		min-width: @_sap_ui_table_RowActionColumnSmallWidth;

		.sapUiSizeCozy & {
			min-width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
		}

		.sapUiSizeCondensed & {
			min-width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
		}
	}

	.sapUiTableRActM & {
		min-width: @_sap_ui_table_RowActionColumnWidth;

		.sapUiSizeCozy & {
			min-width: @_sap_ui_table_RowActionColumnWidthCozy;
		}

		.sapUiSizeCondensed & {
			min-width: @_sap_ui_table_RowActionColumnWidthCondensed;
		}
	}

	.sapUiTableRActL & {
		min-width: @_sap_ui_table_RowActionColumnLargeWidth;

		.sapUiSizeCozy & {
			min-width: @_sap_ui_table_RowActionColumnLargeWidthCozy;
		}

		.sapUiSizeCondensed & {
			min-width: @_sap_ui_table_RowActionColumnLargeWidthCondensed;
		}
	}

	.sapUiTableRowNavIndicator & {
		min-width: @_sap_ui_table_NavIndicatorWidth;
	}
}

.sapUiTableCellDummy {
	border-left: @_sap_ui_table_BaseBorderWidth solid @_sap_ui_table_Cell_DummyBorderColor;
	pointer-events: none;
	.sapUiTableContentRow & {
		background-color: @sapBackgroundColor !important;
	}
}

.sapUiTableCellFlex {
	> .sapUiTableCellInner {
		display: flex;
		align-items: center;

		> * {
			overflow: hidden;
		}
	}
}

.sapUiTableRowHidden > .sapUiTableCell > *,
.sapUiTableCellHidden > * {
	display: none;
}

/**
 * If there is no element (selection/highlight/expand/collapse) at the left most of the table
 * then the first cell must have 1rem left padding while regular cells have 0.5rem left padding
 * this additional 0.5rem padding decreases the max content width of the column cells 0.5rem.
 * The selector below is adding additional 0.5rem padding to the first th elements of the table.
 * Since the box-sizing is content-box for table cells this will increase the DOM column width
 * 0.5rem when compared to the width property of the column. Although this might not be desired
 * it is now aligned with the resposive table behavior.
 * Another alternative would be rendering a dummy 0.5rem width column. While this can solve the
 * API and DOM column width difference, changing the table layout might be expensive.
 */
.sapUiTable:not(.sapUiTableRowSelectors,.sapUiTableRowHighlights) .sapUiTableFirstVisibleColumnTH {
	padding-left: .25rem;
	padding-right: .25rem;
}