.before-after {
	position: relative;
	cursor: pointer;
	height: 100%;
	width: 100%;
}
.before-after:focus {
	outline: none;
}
.before-after__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.before-after__img--after {
	position: absolute;
	inset: 0;
	will-change: clip-path;
}

@property --reveal__radius {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: true;
}
.before-after--reveal {
	--reveal__radius: 0%;
	--reveal__x: 0%;
	--reveal__y: 0%;

	transition: --reveal__radius 500ms ease-out;
}
.before-after--reveal .before-after__img--after {
	clip-path: circle(
		var(--reveal__radius) at clamp(0%, var(--reveal__x), 100%)
			clamp(0%, var(--reveal__y), 100%)
	);
}
.before-after--reveal.before-after--is-after {
	--reveal__radius: 140%;
}

@property --swipe__x {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: true;
}
.before-after--swipe {
	--swipe__x: 50%;

	transition: --swipe__x 300ms ease-out;
	overflow: clip;
}
.before-after--is-dragging {
	transition: none;
}
.before-after--swipe .before-after__after {
	position: absolute;
	inset: 0;
	will-change: clip-path;
	clip-path: polygon(
		clamp(0%, var(--swipe__x), 100%) 0%,
		100% 0,
		100% 100%,
		clamp(0%, var(--swipe__x), 100%) 100%
	);
}
.before-after--swipe__btn {
	position: absolute;
	top: 50%;
	left: clamp(0%, var(--swipe__x), 100%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 150ms ease, outline-color 150ms ease;
	transform: translate(-50%, -50%) scale(1);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4rem;
	background-color: var(--color-surface-1);
	color: var(--color-surface-4);
	box-shadow: 0 0.5rem 0.5rem rgba(0 0 0 / 0.2);
	outline: 1px solid var(--color-surface-3);
	outline-offset: -0.2rem;
	animation: before-after--swipe__btn__wiggle 6s ease-out infinite 4s;
}
.before-after--swipe__icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	transition: fill 150ms ease;
}
.before-after--swipe__btn:hover {
	color: var(--color-interactive);
	transform: translate(-50%, -50%) scale(1.1);
	outline-color: var(--color-interactive);
}
.before-after--is-dragging .before-after--swipe__btn {
	transform: translate(-50%, -50%) scale(0.8);
}
.before-after--has-interacted .before-after--swipe__btn {
	animation: none;
}
@keyframes before-after--swipe__btn__wiggle {
	75% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	78.125% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	81.25% {
		transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
	}
	84.375% {
		transform: translate(-50%, -50%) scale(1.1) rotate(45deg);
	}
	87.5% {
		transform: translate(-50%, -50%) scale(1.1) rotate(-45deg);
	}
	90.625% {
		transform: translate(-50%, -50%) scale(1.1) rotate(45deg);
	}
	93.75% {
		transform: translate(-50%, -50%) scale(1.1) rotate(-45deg);
	}
	96.875% {
		transform: translate(-50%, -50%) scale(1.1) rotate(45deg);
	}
	100% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
}
.before-after--swipe__caption {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 1rem;
	background-color: var(--color-surface-1);
	border-radius: 0.125rem;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	width: fit-content;
}
.before-after--swipe__caption--before {
	left: 1rem;
}
.before-after--swipe__caption--after {
	right: 1rem;
	z-index: 10;
}
@media (min-width: 992px) {
	.before-after--swipe__btn {
		width: 4rem;
		height: 4rem;
		outline-offset: -0.333rem;
	}
	.before-after--swipe__icon {
		width: 1.75rem;
		height: 1.75rem;
	}
}