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

// Lines
.advanced-cropper-simple-line {
	border-color: rgba($line-color, 0.8);
	&--hover {
		border-color: rgba($line-color, 1);
	}
}

// Handlers
.advanced-cropper-simple-handler-wrapper {
	width: $handler-wrapper-size;
	height: $handler-wrapper-size;
	&--west-north {
		transform: translate(0, 0);
	}
	&--east-south {
		transform: translate(-100%, -100%);
	}
	&--west-south {
		transform: translate(0, -100%);
	}
	&--east-north {
		transform: translate(-100%, 0);
	}
}

.advanced-cropper-simple-handler {
	display: block;
	position: relative;
	transition: opacity 0.5s;
	border: none;
	background: $small-handler-color;
	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: 0.7;
	}
	&--west-north {
		border-left: solid $big-handler-width $big-handler-color;
		border-top: solid $big-handler-width $big-handler-color;
	}
	&--east-south {
		border-right: solid $big-handler-width $big-handler-color;
		border-bottom: solid $big-handler-width $big-handler-color;
	}

	&--west-south {
		border-left: solid $big-handler-width $big-handler-color;
		border-bottom: solid $big-handler-width $big-handler-color;
	}
	&--east-north {
		border-right: solid $big-handler-width $big-handler-color;
		border-top: solid $big-handler-width $big-handler-color;
	}

	&--hover {
		opacity: 1;
	}
}

// Stencils
.advanced-cropper-circle-stencil {
	&__preview {
		border: solid 2px rgba($line-color, 0.8);
	}
	.advanced-cropper-simple-line {
		border-color: rgba($line-color, 0.3);
	}
	.advanced-cropper-simple-handler {
		&--west-north,
		&--east-south,
		&--west-south,
		&--east-north {
			opacity: 0.4;
		}

		&--hover {
			opacity: 1;
		}
	}
}

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