/*
 * Boost Before Afters: the Before After widget.
 * Loaded once per page, only on pages that use the widget. The widget's Style controls set the
 * --bba-* custom properties on .bba (or style the parts directly); these are the defaults.
 */
.bba {
	--bba-line-width: 2px;
	--bba-line-style: solid;
	--bba-line-color: rgba(255, 255, 255, 0.9);
	--bba-handle-size: 44px;
	--bba-handle-icon-size: 20px;
	--bba-handle-at: 50%;
	--bba-label-offset: 16px;
	--bba-caption-gap: 16px;
	--bba-title-gap: 6px;
	margin: 0;
	padding: 0;
}

/* The frame: both pictures, the labels, the line and the handle */
.bba .bba__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 3 / 2;
	cursor: ew-resize;
	touch-action: pan-y; /* vertical swipes still scroll the page */
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.bba--vertical .bba__frame {
	cursor: ns-resize;
	touch-action: pan-x;
}

.bba .bba__layer {
	overflow: hidden;
	height: 100%;
}
.bba .bba__layer--after {
	position: relative; /* in flow: with "Original" ratio the after picture sets the height */
}
.bba .bba__layer--before {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--bba-pos, 50%)) 0 0);
}
.bba--vertical .bba__layer--before {
	clip-path: inset(0 0 calc(100% - var(--bba-pos, 50%)) 0);
}
.bba .bba__layer::after { /* overlay (Style → Pictures → Overlay) */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.bba .bba__media {
	height: 100%;
}
.bba .bba__layer--before .bba__media {
	position: absolute;
	inset: 0;
}
.bba .bba__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Labels */
.bba .bba__label {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	padding: 4px 12px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 0.2s;
}
.bba .bba__label--before {
	background: rgba(255, 255, 255, 0.9);
	color: #1a1a1a;
}
.bba .bba__label--after {
	background: rgba(26, 26, 26, 0.85);
	color: #fff;
}
.bba--horizontal .bba__label--before { left: var(--bba-label-offset); }
.bba--horizontal .bba__label--after { right: var(--bba-label-offset); }
.bba--horizontal.bba--labels-start .bba__label { top: var(--bba-label-offset); }
.bba--horizontal.bba--labels-center .bba__label { top: 50%; transform: translateY(-50%); }
.bba--horizontal.bba--labels-end .bba__label { bottom: var(--bba-label-offset); }
.bba--vertical .bba__label--before { top: var(--bba-label-offset); }
.bba--vertical .bba__label--after { bottom: var(--bba-label-offset); }
.bba--vertical.bba--labels-start .bba__label { left: var(--bba-label-offset); }
.bba--vertical.bba--labels-center .bba__label { left: 50%; transform: translateX(-50%); }
.bba--vertical.bba--labels-end .bba__label { right: var(--bba-label-offset); }
@media (hover: hover) {
	.bba--labels-hover .bba__label { opacity: 0; }
	.bba--labels-hover .bba__frame:hover .bba__label,
	.bba--labels-hover .bba__frame:focus-within .bba__label { opacity: 1; }
}

/* The line (a 0-wide box with one border, so Dashed/Dotted/Double work) */
.bba .bba__divider {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--bba-pos, 50%);
	width: 0;
	border-left: var(--bba-line-width) var(--bba-line-style) var(--bba-line-color);
	transform: translateX(-50%);
	pointer-events: none;
}
.bba--vertical .bba__divider {
	top: var(--bba-pos, 50%);
	right: 0;
	bottom: auto;
	left: 0;
	width: auto;
	height: 0;
	border-left: 0;
	border-top: var(--bba-line-width) var(--bba-line-style) var(--bba-line-color);
	transform: translateY(-50%);
}

/* The handle */
.bba .bba__handle {
	position: absolute;
	z-index: 4;
	top: var(--bba-handle-at);
	left: var(--bba-pos, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--bba-handle-size);
	height: var(--bba-handle-size);
	border-radius: 50%;
	background-color: #fff;
	color: #1a1a1a;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transform: translate(-50%, -50%);
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
	pointer-events: none;
}
.bba--vertical .bba__handle {
	top: var(--bba-pos, 50%);
	left: var(--bba-handle-at);
}
.bba .bba__handle svg {
	display: block;
	width: var(--bba-handle-icon-size);
	height: var(--bba-handle-icon-size);
}
.bba .bba__handle svg:not(.bba__arrows) { fill: currentColor; }
.bba .bba__handle i { font-size: var(--bba-handle-icon-size); line-height: 1; }
.bba--vertical .bba__arrows { transform: rotate(90deg); }

/* Keyboard and screen readers: an invisible range input. Pointers are handled by the script. */
.bba .bba__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}
.bba .bba__range:focus-visible ~ .bba__handle {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.bba .bba__range:focus-visible ~ .bba__divider { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }

/* Title & description */
.bba .bba__caption {
	margin-top: var(--bba-caption-gap);
	/* Themes style figcaption (Hello: italic, 16px, #333); the Style tab and kit globals decide here. */
	color: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
}
.bba--caption-above .bba__caption {
	margin-top: 0;
	margin-bottom: var(--bba-caption-gap);
}
.bba .bba__title {
	margin: 0 0 var(--bba-title-gap);
	padding: 0;
}
.bba .bba__title:last-child { margin-bottom: 0; }
.bba .bba__description { margin: 0; }