/*
 * Beforely: before/after image comparison slider.
 * @license GPL-2.0-or-later
 */
.beforely {
	--beforely-pos: 50%;
	--beforely-color: #fff;
	--beforely-radius: 0px;
	position: relative;
	display: block;
	overflow: hidden;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border-radius: var(--beforely-radius);
	line-height: 0;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y;
	isolation: isolate;
}

.beforely--vertical {
	cursor: ns-resize;
	touch-action: pan-x;
}

.beforely img.beforely__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.beforely img.beforely__img--after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 0 0 var(--beforely-pos));
}

.beforely--vertical img.beforely__img--after {
	clip-path: inset(var(--beforely-pos) 0 0 0);
}

.beforely__handle {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--beforely-pos);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	margin-left: -24px;
	outline: none;
	cursor: inherit;
}

.beforely__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background: var(--beforely-color);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.beforely__knob {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 3px solid var(--beforely-color);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.beforely__icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: var(--beforely-color);
}

.beforely--vertical .beforely__handle {
	top: var(--beforely-pos);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 48px;
	margin: -24px 0 0 0;
}

.beforely--vertical .beforely__handle::before {
	top: 50%;
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 3px;
	margin: -1.5px 0 0 0;
}

.beforely--vertical .beforely__icon {
	transform: rotate(90deg);
}

.beforely__handle:focus-visible .beforely__knob {
	outline: 3px solid var(--beforely-color);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.45);
}

/* Many themes draw their own ring on :focus-visible. The handle is a full-height strip,
   so that ring shows up as two stray lines; the knob carries the focus ring instead. */
.beforely .beforely__handle:focus,
.beforely .beforely__handle:focus-visible {
	outline: none;
	box-shadow: none;
}

/* After a mouse or touch drag the handle keeps focus for the arrow keys,
   but the ring only appears once a key is pressed. */
.beforely--pointer .beforely__handle:focus-visible .beforely__knob {
	outline: none;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.beforely__label {
	position: absolute;
	z-index: 2;
	top: 12px;
	max-width: 40%;
	overflow: hidden;
	padding: 5px 10px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.beforely__label--before {
	left: 12px;
}

.beforely__label--after {
	right: 12px;
}

.beforely--vertical .beforely__label--after {
	top: auto;
	bottom: 12px;
	left: 12px;
	right: auto;
}

.beforely--labels-hover .beforely__label {
	opacity: 0;
}

.beforely--labels-hover:hover .beforely__label,
.beforely--labels-hover:focus-within .beforely__label {
	opacity: 1;
}

@media (hover: none) {
	.beforely--labels-hover .beforely__label {
		opacity: 1;
	}
}

.beforely--labels-none .beforely__label {
	display: none;
}

.beforely-caption {
	margin: 0.6em 0 0;
	font-size: 0.9em;
	line-height: 1.4;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.beforely__label {
		transition: none;
	}
}