.sapSuiteUiCommonsImageEditor {
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: auto;
	display: flex;
	min-width: 1px; // fix for IE
}

.sapSuiteUiCommonsImageEditorNoData {
	display: none;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.sapSuiteUiCommonsImageEditorNoDataText {
	font-size: @sapMFontLargeSize;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sapSuiteUiCommonsImageEditorNoData:focus{
	outline: 1px dotted @sapUiContentFocusColor;
	outline-offset: 1px;
}

.sapSuiteUiCommonsImageEditorCanvasInnerContainer {
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	margin: auto;
	overflow: hidden;
}

.sapSuiteUiCommonsImageEditorCanvasInnerContainer:focus{
	outline: 1px dotted @sapUiContentFocusColor;
	outline-offset: 1px;
}

.sapSuiteUiCommonsImageEditorCanvas {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	box-sizing: border-box;

	&.sapSuiteUiCommonsImageEditorCanvasResize {
		width: 100%;
		height: 100%;
	}
}

.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorEmpty {
	.sapSuiteUiCommonsImageEditorCanvasInnerContainer {
		display: none;
	}

	.sapSuiteUiCommonsImageEditorNoData {
		display: flex;
	}
}

.sapSuiteUiCommonsImageEditorTransformHandlers {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;

	.sapSuiteUiCommonsImageEditorHandlerContainer {
		&.sapSuiteUiCommonsImageEditorTop {
			top: -0.125rem;
		}

		&.sapSuiteUiCommonsImageEditorBottom {
			bottom: -0.125rem;
		}

		&.sapSuiteUiCommonsImageEditorLeft {
			left: -0.125rem;
		}

		&.sapSuiteUiCommonsImageEditorRight {
			right: -0.125rem;
		}
	}
}

// resize box shadow
.sapSuiteUiCommonsImageEditorTransformHandlers:before {
	content: '';
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
}

.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeResize {
	.sapSuiteUiCommonsImageEditorTransformHandlers {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorCropOverlayContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: none;

	.sapSuiteUiCommonsImageEditorCropOverlayBlack {
		fill: black;
		fill-opacity: 0.5;
	}

	.sapSuiteUiCommonsImageEditorCropOverlayWhite {
		fill: white;
		fill-opacity: 0.25;
	}
}

.sapSuiteUiCommonsImageEditorCropInnerRectangle {
	position: absolute;
	overflow: visible;
	pointer-events: none;
	display: none;

	svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.sapSuiteUiCommonsImageEditorCropSvg {
		position: absolute;
	}

	&.sapSuiteUiCommonsImageEditorCropInnerRectangleSmall {
		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
			font-size: 1rem;
			width: 1.5rem;
			height: 1.5rem;
		}

		.sapSuiteUiCommonsImageEditorCropThirds {
			display: none;
		}
	}

	&.sapSuiteUiCommonsImageEditorCropInnerRectangleVerySmall {
		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
			font-size: 0.625rem;
			width: 1rem;
			height: 1rem;
		}

		.sapSuiteUiCommonsImageEditorCropThirds {
			display: none;
		}

		.sapSuiteUiCommonsImageEditorHandler.sapSuiteUiCommonsImageEditorHandlerHorizontal {
			max-height: 0.125rem;
		}

		.sapSuiteUiCommonsImageEditorHandler.sapSuiteUiCommonsImageEditorHandlerVertical {
			max-width: 0.125rem;
		}

		.sapSuiteUiCommonsImageEditorHandlerContainer {
			&.sapSuiteUiCommonsImageEditorRight, &.sapSuiteUiCommonsImageEditorLeft {
				max-width: 0.5rem;
			}

			&.sapSuiteUiCommonsImageEditorTop, &.sapSuiteUiCommonsImageEditorBottom {
				max-height: 0.5rem;
			}
		}
	}

	&.sapSuiteUiCommonsImageEditorCropInnerRectangleExtraSmall {
		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
			display: none;
		}

		.sapSuiteUiCommonsImageEditorCropThirds {
			display: none;
		}

		.sapSuiteUiCommonsImageEditorHandler.sapSuiteUiCommonsImageEditorHandlerHorizontal {
			max-height: 0.0625rem;
		}

		.sapSuiteUiCommonsImageEditorHandler.sapSuiteUiCommonsImageEditorHandlerVertical {
			max-width: 0.0625rem;
		}
	}
}

.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropRectangle,
.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropEllipse,
.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropCustomShape {
	.sapSuiteUiCommonsImageEditorCropOverlayContainer {
		display: block;
	}

	.sapSuiteUiCommonsImageEditorHandlerContainer {
		&.sapSuiteUiCommonsImageEditorTop {
			top: -0.0625rem;
		}

		&.sapSuiteUiCommonsImageEditorBottom {
			bottom: -0.0625rem;
		}

		&.sapSuiteUiCommonsImageEditorLeft {
			left: -0.0625rem;
		}

		&.sapSuiteUiCommonsImageEditorRight {
			right: -0.0625rem;
		}
	}
}

.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropRectangle,
.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropEllipse,
.sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropCustomShape.sapSuiteUiCommonsImageEditorModeCropCustomShapeLoaded {
	.sapSuiteUiCommonsImageEditorCropInnerRectangle {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorCropItemRectangle, .sapSuiteUiCommonsImageEditorCropItemEllipse, .sapSuiteUiCommonsImageEditorCropItemCustomShape {
	display: none;
}

.sapSuiteUiCommonsImageEditorModeCropRectangle {
	.sapSuiteUiCommonsImageEditorCropItemRectangle {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorModeCropEllipse {
	.sapSuiteUiCommonsImageEditorCropItemEllipse {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorModeCropCustomShape {
	.sapSuiteUiCommonsImageEditorCropItemCustomShape {
		display: block;
	}
}

.sapSuiteUiCommonsImageEditorDragHandlerContainer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8rem;
	height: 8rem;
	font-size: 3rem;
	color: @sapUiContentContrastIconColor;
	text-shadow: 0 0.1875rem 5px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	cursor: move;
	display: flex;
	justify-content: center;
	align-items: center;

	.sapUiIcon {
		cursor: move;
	}
}

.sapSuiteUiCommonsImageEditorHandlerContainer {
	position: absolute;
	width: 100%;
	max-width: 1rem;
	height: 100%;
	max-height: 1rem;
	pointer-events: auto;
}

.sapSuiteUiCommonsImageEditorHandler {
	position: absolute;
	background: white;

	&.sapSuiteUiCommonsImageEditorHandlerHorizontal {
		width: 100%;
		height: 100%;
		max-height: 0.1875rem;

		.sapSuiteUiCommonsImageEditorBottom & {
			bottom: 0;
			box-shadow: 0 -0.1875rem 5px 0 rgba(0, 0, 0, 0.5);
		}

		.sapSuiteUiCommonsImageEditorTop & {
			box-shadow: 0 0.1875rem 5px 0 rgba(0, 0, 0, 0.5);
		}
	}

	&.sapSuiteUiCommonsImageEditorHandlerVertical {
		width: 100%;
		max-width: 0.1875rem;
		height: 100%;

		.sapSuiteUiCommonsImageEditorRight & {
			right: 0;
			box-shadow: -0.1875rem 0 5px 0 rgba(0, 0, 0, 0.5);
		}

		.sapSuiteUiCommonsImageEditorLeft & {
			box-shadow: 0.1875rem 0 5px 0 rgba(0, 0, 0, 0.5);
		}
	}
}

.sapSuiteUiCommonsImageEditorTop {
	top: 0;
}

.sapSuiteUiCommonsImageEditorBottom {
	bottom: 0;
}

.sapSuiteUiCommonsImageEditorLeft {
	left: 0;
}

.sapSuiteUiCommonsImageEditorRight {
	right: 0;
}

.sapSuiteUiCommonsImageEditorCenter {
	left: 50%;
	transform: translateX(-50%);
}

html[dir=rtl] .sapSuiteUiCommonsImageEditorCenter {
	transform: translateX(50%);
}

.sapSuiteUiCommonsImageEditorMiddle {
	top: 50%;
	transform: translateY(-50%);
}

.sapSuiteUiCommonsImageEditorCropLine {
	stroke-width: 1;
	stroke: white;
	stroke-dasharray: 3, 2;
}

.sapSuiteUiCommonsImageEditor {
	.ui-resizable-nw {
		cursor: nw-resize;
	}

	.ui-resizable-ne {
		cursor: ne-resize;
	}

	.ui-resizable-sw {
		cursor: sw-resize;
	}

	.ui-resizable-se {
		cursor: se-resize;
	}

	.ui-resizable-n {
		cursor: n-resize;
	}

	.ui-resizable-s {
		cursor: s-resize;
	}

	.ui-resizable-w {
		cursor: w-resize;
	}

	.ui-resizable-e {
		cursor: e-resize;
	}
}