.wd-compare-img {
	position: relative;
	display: inline-flex;
	border-radius: var(--wd-brd-radius);
	overflow: hidden;
	cursor: col-resize;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.wd-compare-img img {
	pointer-events: none;
}

.wd-compare-img :is(.wd-before-img,.wd-after-img) {
	background-color: var(--wd-main-bgcolor);
}

.wd-compare-img .wd-before-img {
	clip-path: polygon(0 0, var(--wd-compare-handle-pos, 50%) 0, var(--wd-compare-handle-pos, 50%) 100%, 0 100%);
}

.wd-compare-img .wd-after-img {
	position: absolute;
	inset: 0;
}

.wd-compare-img .wd-after-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wd-compare-img-handle {
	position: absolute;
	inset-block: 0;
	left: calc(var(--wd-compare-handle-pos, 50%) - 2px);
	width: 4px;
	color: var(--color-gray-800);
	background-color: var(--bgcolor-white);
}

.wd-compare-img-handle span {
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	background-color: inherit;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
}

.rtl .wd-compare-img-handle span {
	flex-direction: row-reverse;
}

.wd-compare-img-handle span:before {
	content: "";
	font-family: "woodmart-font";
}

.wd-compare-img-handle span:after {
	content: "";
	font-family: "woodmart-font";
}