@bigfishtv/cockpit/styles/template/edit.less

.edit {
	display: flex;
	flex: auto;
	background-color: @grey-100;
	background-image: linear-gradient(45deg, @grey-200 25%, transparent 25%, transparent 75%, @grey-200 75%, @grey-200), linear-gradient(45deg, @grey-200 25%, transparent 25%, transparent 75%, @grey-200 75%, @grey-200);
	background-size: 2rem 2rem;
	background-position: 0 0, 1rem 1rem;
	user-select: none;
}

.edit-inner {
	margin: auto;
	max-width: 600px;
	position: relative;

	&:hover {

		canvas {
			display: none;
		}
	}

	.original-image {
		.cover();
	}

	#mainImage {
		position: absolute;
		left: 0;
		top: 0;
	}
}

.edit-toolbar {
	display: flex;
	flex-direction: column;
	padding: @padding-xsmall;
	background: @white;
	border-right: 1px solid @light-grey;

	.button {
		margin: 0 !important;
	}
}

.edit-toolbar-crop,
.edit-toolbar-advanced {
	background-color: @grey-200;
}

.edit-toolbar-crop {
	
}

.edit-toolbar-advanced {
	width: 200px;
	max-height: calc(100vh ~"-" 314px);
	overflow: auto;
}


@crop-handle-size: 10px;

.cropper {
	position: absolute;
	left: 0;
	top: 0;

	.crop-zone {
		position: absolute;
		border: 1px solid @white;
		cursor: move;

		&:after {
			content: '';
			position: absolute;
			width: calc(100% ~"+" 2px);
			height: calc(100% ~"+" 2px);
			margin: -1px 0 0 -1px;
			border: 1px dashed @black;
		}

		.crop-handle {
			position: absolute;
			z-index: 5;
			margin: -@crop-handle-size 0 0 -@crop-handle-size;
			.square(@crop-handle-size*2);

			&:after {
				content: '';
				position: absolute;
				left: @crop-handle-size/2;
				top: @crop-handle-size/2;
				border: 1px solid @white;
				background-color: @black;
				.square(@crop-handle-size);
			}

			&.TL { cursor: nwse-resize; left: 0; 	top: 0; }
			&.TM { cursor: ns-resize;	left: 50%; 	top: 0; }
			&.TR { cursor: nesw-resize;	left: 100%; top: 0; }
			&.ML { cursor: ew-resize;	left: 0; 	top: 50%; }
			&.MR { cursor: ew-resize;	left: 100%; top: 50%; }
			&.BL { cursor: nesw-resize;	left: 0; 	top: 100%; }
			&.BM { cursor: ns-resize;	left: 50%; 	top: 100%; }
			&.BR { cursor: nwse-resize;	left: 100%; top: 100%; }
		}

		button {
			cursor: pointer;
			z-index: 1;
			.center();
			.square(40px);
			border-radius: 100%;
			background-color: @light;
			&:hover {
				background-color: @primary;
			}
		}
	}
}