$base-color: white !default;
$accent-color: currentColor !default;
$handler-color: $accent-color !default;
$line-color: $base-color !default;
$grid-color: $line-color !default;
$handler-size: 8px !default;
$grid: true !default;

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

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

	&--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.5;
		}

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

.advanced-cropper-circle-stencil,
.advanced-cropper-rectangle-stencil {
	&--moving,
	&--resizing {
		.advanced-cropper-simple-handler {
			opacity: 1;
		}
	}
}

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