.base {
	--base-position: 50%;
	--base-handle-color: #fff;
	--base-handle-size: 44px;
	position: relative;
	overflow: hidden;
	line-height: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
}

.base[data-orientation="vertical"] {
	touch-action: pan-x;
	cursor: ns-resize;
}

.base__layer--before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--base-position)) 0 0);
}

.base[data-orientation="vertical"] .base__layer--before {
	clip-path: inset(0 0 calc(100% - var(--base-position)) 0);
}

.base__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.base__layer--after .base__img {
	height: auto;
}

.base__label {
	position: absolute;
	top: 12px;
	padding: 4px 10px;
	font-size: 13px;
	line-height: 1.3;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 3px;
	pointer-events: none;
}

.base__label--before { left: 12px; }
.base__label--after { right: 12px; }

.base[data-orientation="vertical"] .base__label--after {
	top: auto;
	bottom: 12px;
	right: auto;
	left: 12px;
}

/* Reset theme/Elementor styles that add borders, shadows or outlines to focusable elements. */
.base .base__handle,
.base .base__handle:hover,
.base .base__handle:focus,
.base .base__handle:focus-visible,
.base .base__handle:active {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	background: transparent !important;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.base__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--base-position);
	width: 44px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

.base__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--base-handle-color);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.base[data-orientation="vertical"] .base__handle {
	top: var(--base-position);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 44px;
	transform: translateY(-50%);
}

.base[data-orientation="vertical"] .base__handle::before {
	top: 50%;
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 2px;
	margin: -1px 0 0;
}

.base__grip {
	position: relative;
	width: var(--base-handle-size);
	height: var(--base-handle-size);
	border-radius: 50%;
	background: var(--base-handle-color);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.base__grip::before,
.base__grip::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
}

.base__grip::before { left: 20%; border-right-color: #333; }
.base__grip::after { right: 20%; border-left-color: #333; }

.base[data-orientation="vertical"] .base__grip::before,
.base[data-orientation="vertical"] .base__grip::after {
	left: 50%;
	right: auto;
	margin: 0 0 0 -5px;
}

.base[data-orientation="vertical"] .base__grip::before {
	top: 20%;
	border-right-color: transparent;
	border-bottom-color: #333;
}

.base[data-orientation="vertical"] .base__grip::after {
	top: auto;
	bottom: 20%;
	border-left-color: transparent;
	border-top-color: #333;
}

.base__handle:focus-visible .base__grip {
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
	.base:not(.is-dragging) .base__layer--before,
	.base:not(.is-dragging) .base__handle {
		transition: none;
	}
}