/*
 * PureCSS.com
 * https://purecss.com/examples/before-after/
 * Before and after image comparison using resize, overflow and a filter.
 */

/*
 * The stage is a fixed size on purpose. Both layers have to be exactly the
 * same width or the two halves of the photo will not line up across the
 * divider, and a percentage inside the resizable pane would resolve against
 * the pane rather than the frame.
 */
.demo-before-after {
	--ba-w: 480px;
	--ba-h: 300px;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.demo-before-after .ba-frame {
		position: relative;
		width: var(--ba-w);
		height: var(--ba-h);
		max-width: 100%;
		overflow: hidden;
		border-radius: var(--radius-lg);
		border: 1px solid var(--border);
	}

.demo-before-after .ba-img {
		display: block;
		width: var(--ba-w);
		height: var(--ba-h);
		object-fit: cover;
	}

/*
 * The resizable pane. resize needs overflow to be anything but visible, which
 * is the same property doing the clipping, so one declaration serves both.
 * min-width and max-width are what stop the pane being dragged out of the
 * frame entirely.
 */
.demo-before-after .ba-before {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 55%;
		min-width: 28px;
		max-width: 100%;
		overflow: hidden;
		resize: horizontal;
	}

.demo-before-after .ba-before .ba-img {
			filter: grayscale(1) contrast(.88) brightness(1.04);
		}

/* the divider, drawn on the pane's own edge so it travels with the drag */
:is(.demo-before-after .ba-before)::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 3px;
			background: var(--accent);
			pointer-events: none;
		}

/*
 * A browser puts its resize grip in the bottom right corner and nowhere else,
 * so the handle is drawn there rather than halfway down the divider. Putting a
 * knob in the middle would look like the thing to drag and would not be.
 */
:is(.demo-before-after .ba-before)::before {
			content: "";
			position: absolute;
			right: 3px;
			bottom: 3px;
			width: 16px;
			height: 16px;
			border-radius: 4px;
			background: var(--accent);
			pointer-events: none;
			z-index: 1;
		}

.demo-before-after .ba-tag {
		position: absolute;
		top: 10px;
		font-family: var(--font-mono);
		font-size: .6rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		padding: .2rem .5rem;
		border-radius: 999px;
		background: rgba(12, 12, 13, .72);
		color: #f0f0f0;
		pointer-events: none;
	}

.demo-before-after .ba-tag-before { left: 10px; }

.demo-before-after .ba-tag-after { right: 10px; }

.demo-before-after .ba-hint {
		font-family: var(--font-mono);
		font-size: .7rem;
		color: var(--text-muted);
	}

/* ── Variant: a checkbox swaps the two ── */

.demo-before-after .ba-swap-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .9rem;
	}

/* clipped rather than display: none, which would take the control out of the
   accessibility tree and leave the demo mouse-only */
.demo-before-after .ba-check {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

.demo-before-after .ba-btn {
		display: inline-block;
		padding: .55rem 1.15rem;
		background: var(--surface-2);
		color: var(--text);
		border: 1px solid var(--border);
		border-radius: 8px;
		font-size: .85rem;
		cursor: pointer;
		user-select: none;
		transition: background .2s, color .2s, border-color .2s;
	}

:is(.demo-before-after .ba-check):checked + .ba-btn {
			background: var(--accent);
			color: var(--bg);
			border-color: var(--accent);
		}

:is(.demo-before-after .ba-check):focus-visible + .ba-btn {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}

/* Both layers are always painted and opacity decides which one is seen, so
   the change can be transitioned. Toggling display would snap. */
.demo-before-after .ba-swap-frame .ba-layer {
		position: absolute;
		inset: 0;
		transition: opacity .35s;
	}

.demo-before-after .ba-swap-frame .ba-layer-after {
		opacity: 0;
	}

:is(.demo-before-after .ba-check):checked ~ .ba-swap-frame .ba-layer-after {
			opacity: 1;
		}

:is(.demo-before-after .ba-check):checked ~ .ba-swap-frame .ba-layer-before {
			opacity: 0;
		}

.demo-before-after .ba-swap-frame .ba-layer-before .ba-img {
		filter: grayscale(1) contrast(.88) brightness(1.04);
	}

/* ── Variant: a wipe on hover and focus ── */

/*
 * The revealing pane is animated with width rather than opacity, which is what
 * makes it read as a wipe across the photo instead of a cross fade. Focus is
 * included so the keyboard reaches it, and the frame is given a tabindex in
 * the markup for the same reason.
 */
.demo-before-after .ba-wipe-frame .ba-wipe-pane {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 0;
		overflow: hidden;
		transition: width .5s;
	}

:is(.demo-before-after .ba-wipe-frame)::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: var(--radius-lg);
			pointer-events: none;
		}

.demo-before-after .ba-wipe-frame:hover .ba-wipe-pane,
.demo-before-after .ba-wipe-frame:focus-visible .ba-wipe-pane {
		width: 100%;
	}

.demo-before-after .ba-wipe-frame:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
	}

.demo-before-after .ba-wipe-frame .ba-wipe-pane .ba-img {
		filter: none;
	}

.demo-before-after .ba-wipe-frame .ba-base .ba-img {
		filter: grayscale(1) contrast(.88) brightness(1.04);
	}

/*
 * A wipe that only responds to hover has nothing to say on a touch screen,
 * where there is no hover state to enter. The pane is left open there so the
 * comparison is still visible rather than permanently hidden.
 */
@media (hover: none) {
	.demo-before-after .ba-wipe-frame .ba-wipe-pane {
		width: 55%;
		transition: none;
	}
}

@media (max-width: 560px) {
	.demo-before-after {
		--ba-w: 300px;
		--ba-h: 200px;
	}
}

/*
 * The only motion here is a transition the visitor starts, so there is nothing
 * running on its own to remove. Cutting the duration keeps the change readable
 * without animating it.
 */
@media (prefers-reduced-motion: reduce) {
	.demo-before-after .ba-swap-frame .ba-layer,
	.demo-before-after .ba-wipe-frame .ba-wipe-pane {
		transition-duration: .01ms;
	}
}