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

@_sap_ui_table_DragDrop_BarActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
@_sap_ui_table_DragDrop_BarDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
@_sap_ui_table_DragDrop_BarBorder: 0.0625rem solid @sapUiGroupContentBorderColor;
@_sap_ui_table_DragDrop_BarHoverIconBorderColor: @sapUiButtonLiteBorderColor;
@_sap_ui_table_DragDrop_BarHoverIconBackground: @sapUiButtonLiteBackground;
@_sap_ui_table_DragDrop_ColumnDnDHighlightColor: @sapUiListHighlightColor;
@_sap_ui_table_DragDrop_ReorderIndicatorWidth: 2px;

.sapUiTableDragDrop {
	cursor: move;

	.sapUiTableCCnt, .sapUiTableColRsz {
		pointer-events: none;
	}

	.sapUiTableHeaderCell {
		cursor: move;

		* {
			cursor: move;
		}
	}
}

/* Column Reordering */

.sapUiTableHeaderCell.sapUiTableColReorderGhost {
	position: absolute;
	width: auto;
	max-width: 200px;
	cursor: pointer;
	border: @_sap_ui_table_BaseBorderWidth solid @sapUiListBorderColor;
	background-color: @sapUiListHeaderBackground;
	box-shadow: @sapUiShadowLevel2;
}

.sapUiSizeCozy.sapUiTableHeaderCell.sapUiTableColReorderGhost .sapUiTableCellInner > * {
	height: 100%;
	line-height: @_sap_ui_table_BaseSizeCozy;
}

.sapUiSizeCozy.sapUiTableHeaderCell.sapUiTableColReorderGhost {
	padding-top: 0;
	padding-bottom: 0;
}

.sapUiTableColReorderIndicator {
	position: absolute;
	top: 0;
	bottom: 0;
	left: auto; /*set dynamically*/
	width: 4 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	margin-left: (-4) * @_sap_ui_table_DragDrop_ReorderIndicatorWidth + @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	z-index: 3;
	display: none;
}

html[dir=rtl] .sapUiTableColReorderIndicator {
	margin-right: (-4) * @_sap_ui_table_DragDrop_ReorderIndicatorWidth + 2 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
}

.sapUiTableColReorderIndicatorActive {
	display: block;
}

html[data-sap-ui-animation^="on"] .sapUiTableColReorderIndicator {
	transition-property: left;
	transition-duration: 100ms;
}

.sapUiTableColReorderIndicatorInner {
	position: absolute;
	top: 4 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	left: 2 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	bottom: 0;
	width: @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	background-color: @_sap_ui_table_DragDrop_ColumnDnDHighlightColor;
}

.sapUiTableColReorderIndicatorArrow {
	position: absolute;
	top: 0;
	left: 1px;
	width: 0;
}

.sapUiTableColReorderIndicatorArrow::after,
.sapUiTableColReorderIndicatorArrow::before {
	position: absolute;
	top: 0;
	content: " ";
}

.sapUiTableColReorderIndicatorArrow::after {
	height: 2 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	width: 2 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	border-radius: @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	top: @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	left: @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	background-color: @sapUiListHeaderBackground;
}

.sapUiTableColReorderIndicatorArrow::before {
	height: 4 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	width: 4 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	border-radius: 2 * @_sap_ui_table_DragDrop_ReorderIndicatorWidth;
	background-color: @_sap_ui_table_DragDrop_ColumnDnDHighlightColor;
}

.sapUiTableColReorderFade {
	position: relative;
}

.sapUiTableColReorderFade::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	background-color: @sapUiListHoverBackground;
	opacity: 0.5;
	box-sizing: border-box;
}

/* Column Resizing */

.sapUiTableColRsz {
	position: absolute;
	top: 0px;
	width: 5px;
	margin-left: -4px;
	bottom: 0px;
	cursor: col-resize;
	z-index: 3;
	box-sizing: border-box;
	left: -5px;
}

.sapUiTableColRsz.sapUiTableColRszActive {
	z-index: 5; /* Ensure be above Row Action Area */
}

html[dir=rtl] .sapUiTableColRsz {
	margin-right: -3px;
	right: -5px; /* it becomes "left" in RTL mode */
	left: auto;
}

html.sap-desktop .sapUiTableColRsz:hover {
	background-color: @_sap_ui_table_DragDrop_ColumnDnDHighlightColor;
	opacity: 0.5;
}

.sapUiTableColRszActive,
html.sap-desktop .sapUiTableColRsz.sapUiTableColRszActive:hover {
	background-color: @_sap_ui_table_DragDrop_ColumnDnDHighlightColor;
	opacity: 1;
}

/* Table Height Resizing */

.sapUiTableHeightResizer {
	position: relative;
	cursor: row-resize;
	height: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: @sapUiShellBackground;
	border-top: @_sap_ui_table_DragDrop_BarBorder;
	border-bottom: @_sap_ui_table_DragDrop_BarBorder;

	.sapUiTableHeightResizerDecorationBefore {
		width: 4rem;
		height: 1rem;
		background-image: linear-gradient(to left, @_sap_ui_table_DragDrop_BarDecorationColors);
		background-size: 100% 0.0625rem;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sapUiTableHeightResizerDecorationAfter {
		width: 4rem;
		height: 1rem;
		background-image: linear-gradient(to right, @_sap_ui_table_DragDrop_BarDecorationColors);
		background-size: 100% 0.0625rem;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sapUiTableHeightResizerGrip {
		height: 1.5rem;
		line-height: 1.5rem;
		width: 2rem;
		position: relative;
		z-index: 1;

		.sapUiTableHeightResizerGripIcon {
			cursor: row-resize;
			box-sizing: border-box;
			width: 1.625rem;
			height: 1.5rem;
			line-height: 1.5rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth;
			margin-left: 3px;
			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
			border-radius: @sapUiButtonBorderCornerRadius;
			background: @sapUiButtonLiteBackground;
		}
	}

	&:hover {
		.sapUiTableHeightResizerDecorationBefore,
		.sapUiTableHeightResizerDecorationAfter {
			flex-grow: 1;
			transition: all 0.1s ease-in;
		}

		.sapUiTableHeightResizerGripIcon {
			background: @_sap_ui_table_DragDrop_BarHoverIconBackground;
			border-color: @_sap_ui_table_DragDrop_BarHoverIconBorderColor;
		}
	}

	&:focus {
		outline: none;
	}

	&:focus::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
	}

	&.sapUiTableHeightResizerActive {
		.sapUiTableHeightResizerDecorationBefore {
			flex-grow: 1;
			background-image: linear-gradient(to left, @_sap_ui_table_DragDrop_BarActiveDecorationColors);
		}
		.sapUiTableHeightResizerDecorationAfter {
			flex-grow: 1;
			background-image: linear-gradient(to right, @_sap_ui_table_DragDrop_BarActiveDecorationColors);
		}
	}
}