/*
 * Before & After Comparison Slider
 * ----------------------------------------------------------------------- */

.before-after-slider {
	position: relative;
}

.before-after-slider__image-wrap {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.before-after-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
}

.before-after-slider__clip {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%; /* Overridden inline via JS as --reveal custom property */
	overflow: hidden;
	border-right: 3px solid var(--color-white);
}

.before-after-slider__clip .before-after-slider__image {
	width: var(--ba-image-width, 100%);
	max-width: none;
}

.before-after-slider__label {
	position: absolute;
	bottom: var(--space-sm);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--color-white);
	background: rgba(15, 23, 42, 0.6);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	pointer-events: none;
}

.before-after-slider__label--before { left: var(--space-sm); }
.before-after-slider__label--after { right: var(--space-sm); }

.before-after-slider__control {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	margin: 0;
	appearance: none;
	background: transparent;
	height: 44px;
	cursor: ew-resize;
}

.before-after-slider__control::-webkit-slider-thumb {
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	border: 3px solid var(--color-primary);
	box-shadow: var(--shadow-md);
	cursor: ew-resize;
}

.before-after-slider__control::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	border: 3px solid var(--color-primary);
	box-shadow: var(--shadow-md);
	cursor: ew-resize;
}

.before-after-slider__control::-webkit-slider-runnable-track,
.before-after-slider__control::-moz-range-track {
	background: transparent;
}

.before-after-card__caption {
	text-align: center;
	font-size: var(--fs-small);
	color: var(--color-gray);
	margin-top: var(--space-sm);
	margin-bottom: 0;
}