$accent-color: currentColor !default;
$base-color: white !default;
$line-color: $base-color !default;
$line-width: 2px !default;
$handler-color: $accent-color !default;
$big-handler-color: $handler-color !default;
$big-handler-size: 16px !default;
$big-handler-width: $line-width + 1px !default;
$small-handler-size: 0px !default;
$small-handler-color: $handler-color !default;
$handler-padding: 4px !default;
$handler-wrapper-size: $big-handler-size + $handler-padding * 2 !default;
$grid-color: $line-color !default;


// Lines
.advanced-cropper-simple-line {
	border-color: rgba($line-color, 0.7);
	&--east {
		border-right-width: $line-width;
	}
	&--west {
		border-left-width: $line-width;
	}
	&--south {
		border-bottom-width: $line-width;
	}
	&--north {
		border-top-width: $line-width;
	}
	&--hover {
		border-color: $line-color;
	}
}

// Handlers
.advanced-cropper-bounding-box {
	&__handler {
		width: $handler-wrapper-size;
		height: $handler-wrapper-size;

		$shift: 1px;

		&--west-north {
			transform: translate(-$handler-padding - $shift , -$handler-padding - $shift );
		}

		&--east-south {
			transform: translate(-$big-handler-size - $handler-padding + $shift , -$big-handler-size - $handler-padding + $shift );
		}

		&--west-south {
			transform: translate(-$handler-padding - $shift , -$big-handler-size - $handler-padding + $shift );
		}

		&--east-north {
			transform: translate(-$big-handler-size - $handler-padding + $shift , -$handler-padding - $shift );
		}
	}
}

.advanced-cropper-simple-handler {
	display: block;
	position: relative;
	flex-shrink: 0;
	transition: opacity 0.5s;
	border: none;
	background: $accent-color;
	top: auto;
	left: auto;
	height: $small-handler-size;
	width: $small-handler-size;
	opacity: 0;

	&--west-north,
	&--east-south,
	&--west-south,
	&--east-north {
		display: block;
		height: $big-handler-size;
		width: $big-handler-size;
		background: none;
		opacity: 1;
	}

	&--west-north {
		border-left: solid $big-handler-width $accent-color;
		border-top: solid $big-handler-width $accent-color;
	}

	&--east-south {
		border-right: solid $big-handler-width $accent-color;
		border-bottom: solid $big-handler-width $accent-color;
	}

	&--west-south {
		border-left: solid $big-handler-width $accent-color;
		border-bottom: solid $big-handler-width $accent-color;
	}

	&--east-north {
		border-right: solid $big-handler-width $accent-color;
		border-top: solid $big-handler-width $accent-color;
	}

	&--hover {
		opacity: 1;
	}
}

// Stencils
.advanced-cropper-circle-stencil {
	border-color: rgba($line-color, 0.4);
}

// Grid
.advanced-cropper-stencil-grid {
	color: rgba($grid-color, 0.5);
}