/* jQuery Image Comparer - v1.0
   Author: Tony Leung
   Email: tony.leung@cruzium.com */

.image-comparer {
	overflow:hidden;
	position:relative;
}
.image-comparer > img {
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.image-comparer .handle {
	width:2px;
	height:100%;
	position:absolute;
	background-color:var(--bs-primary,#000000);
	cursor:grab;
}
.image-comparer .handle .arrow {
	content:'';
	width:70px;
	height:70px;
	position:absolute;
	top:50%;
	left:50%;
	border-radius:50%;
	background-color:var(--bs-primary,#000000);
	display:flex;
	align-items:center;
	justify-content:center;
	transform:translate(-50%,-50%);
}
.image-comparer .handle .arrow:before,
.image-comparer .handle .arrow:after {
	content:'';
	width:24%;
	height:24%;
	border-width:2px 2px 0 0;
	border-style:solid;
	border-color:var(--bs-white,#FFFFFF);
}
.image-comparer .handle .arrow:before {
	transform:rotate(-135deg);
}
.image-comparer .handle .arrow:after {
	transform:rotate(45deg);
}
.image-comparer-dragging .handle {
	cursor:grabbing;
}