/* Popup - Cropper */
.ple-cropper {
	position: absolute;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	&__bg {
		display: block;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		background: rgba(0,0,0,.86);
	}
	&__wrap {
		position: absolute;
		z-index: 2;
		left: 10px;
		top: 10px;
		width: 100px;
		height: 100px;
	}
	&__nav {
		$self: &;
		position: absolute;
		right: -50px;
		top: 0;
		button {
			position: relative;
			display: block;
			margin: 0 0 1px;
			width: 40px;
			height: 40px;
			background: #888;
			text-align: center;
			text-indent: -9999px;
			border: none;
			cursor: pointer;
			border-radius: 0;
			i {
				position: absolute;
				display: block;
				left: 50%;
				top: 50%;
			}
			&#{$self}-active {
				background: $col-active;
			}
		}
	}
}


.ple-cropperBlock {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fff;

	&__image {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		&-cover {
			right: 0;
			bottom: 0;
			background-size: cover;
			background-position: 50% 50%;
		}
		&-resize {
			width: 100%;
			height: 100%;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
			}
		}
	}

	&__control {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		cursor: move;
		&:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: 1px dashed #000;
		}
		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 1px;
			top: 1px;
			right: -1px;
			bottom: -1px;
			border: 1px dashed #fff;
		}
		&-active {
			display: block;
		}
	}
	&__resize {
		position: absolute;
		display: block;
		z-index: 2;
		width: 34px;
		height: 34px;
		border: none;
		background: none;
		text-indent: -9999px;
		outline: 0;

		> i {
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
		}
		&-lt {
			left: -10px;
			top: -10px;
			cursor: nwse-resize;
		}
		&-rt {
			right: -11px;
			top: -10px;
			transform: rotate(90deg);
			cursor: nesw-resize;
		}
		&-lb {
			left: -10px;
			bottom: -11px;
			transform: rotate(270deg);
			cursor: nesw-resize;
		}
		&-rb {
			right: -12px;
			bottom: -12px;
			transform: rotate(180deg);
			cursor: nwse-resize;
		}
	}
}