/******************************************************************
	Style of the DT Overlays - base Theme
*******************************************************************/
@_sap_ui_dt_Overlay_FocusColor: @sapUiContentFocusColor; //#000
@_sap_ui_dt_Overlay_TargetZoneColor: @sapUiSelected; //#8fb5ff
@_sap_ui_dt_Overlay_SelectionColor: lighten(@sapUiChart1, 20); //#6fa0e2
@_sap_ui_dt_Overlay_CuttedColor: @sapUiNeutralBG; // #fff
@_sap_ui_dt_Overlay_CuttedBorder: @sapUiSelected; //#8fb5ff
@_sap_ui_dt_Overlay_HighlightColor: @sapUiShellActiveBackground; //#ec8b46
@_sap_ui_dt_Overlay_ActiveBG: fade(@sapUiSelected, 10%); //rgba(143, 181, 255, 0.1);

#overlay-container {
	position: absolute;
	top: 0;
	left: 0;
}

.sapUiDtOverlay {
	position: absolute;
	outline: none;

	// please, don't use border property, it cause the size change of an overtla and box-sizing: border box doesn't work with position: absolute and absolute sizing
	// please, don't use outline property, outline can be invisible due to overflow:hidden of parent
	// instead you should use pseudo elements to special border-like styling:
	// :before pseudoelement should be used for focus visualisation
	// :after pseudoelement should be used for other border-like visualisations

	&:before, &:after {
		position: absolute;
		pointer-events: none;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		z-index: 2;
		box-shadow: none;
	}
}

.sapUiDtOverlayFocusable {
	&:focus {
		&:before {
			content: " ";
			border: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor; //1px
		}
	}
}

.sapUiDtDummyScrollContainer {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.sapUiDtOverlayDropZone {
	z-index: 9999999 !important;

	> .sapUiDtOverlayChildren {
		> .sapUiDtOverlayMovable {
			background: @_sap_ui_dt_Overlay_ActiveBG;
			// no "border"
			&:after {
				content: none;
			}
		}
	}
}

.sapUiDtOverlayTargetZone {
	&:after {
		content: " ";
		outline: 0.125rem dashed @_sap_ui_dt_Overlay_TargetZoneColor; //2px
		outline-offset: -0.125rem; //2px
	}
}

.sapUiDtOverlaySelected {
	&:after {
		content: " ";
		outline: 0.125rem solid @_sap_ui_dt_Overlay_SelectionColor; //2px
		outline-offset: -0.125rem; //2px
		border: none;
	}

	&.sapUiDtOverlayWithScrollBar:after {
		bottom: 0;
		right: 0;
		top: 0;
		left: 0;
		width: initial;
		height: initial;
	}

	&.sapUiDtOverlayFocusable {
		&:focus {
			&:before {
				top: 0.125rem; //2px
				left: 0.125rem; //2px
				bottom: 0.125rem; //2px
				right: 0.125rem; //2px
				width: auto;
				height: auto;
			}
		}
	}
}

.sapUiDtOverlayHighlighted:not(.sapUiDtOverlaySelected) {
	&:after {
		content: " ";
		outline: 0.0625rem solid @_sap_ui_dt_Overlay_HighlightColor; //1px
		outline-offset: -0.0625rem; //1px
		box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.3);
	}
}

.sapUiDtOverlayMovable {
	cursor: move;
}

// Used for non-movable children overlays of movable parents
.sapUiDtOverlaySelectable:not(.sapUiDtOverlayMovable) {
	cursor: auto;
}

.sapUiDtOverlayCutted {
	background-color: @_sap_ui_dt_Overlay_CuttedColor !important;
	opacity: 0.5;

	&:after {
		content: " ";
		outline: 0.063rem solid @_sap_ui_dt_Overlay_CuttedBorder; //1px
		outline-offset: -0.125rem; //2px
	}
}

.sapUiDtDragGhostWrapper {
	position: fixed;
	pointer-events: none;
}

/* fix ghost blinking in FireFox */
.sap-desktop[data-sap-ui-browser^="ff"] .sapUiDtDragGhostWrapper {
	top: -9999px;
	left: -9999px;
}

/* fix for chrome */
.sap-desktop[data-sap-ui-browser^="cr"] .sapUiDtDragGhostWrapper {
	padding-left: -500px;
	padding-bottom: 500px;
	bottom: -1000px;
}

// Fix for Safari, ghost must not be completly off screen
.sap-desktop[data-sap-ui-browser^="sf"] .sapUiDtDragGhostWrapper {
	top: 100vh;
}

.sapUiDtDragGhost {
	background: @_sap_ui_dt_Overlay_ActiveBG;
}

.sapUiDtClonedDom {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;

	* {
		pointer-events: none !important;
	}
}

.sapUiDtOverlayScrollContainer {
	position: absolute;
}