/*
 * Jacleroi Portfolio — confronto prima/dopo.
 *
 * Due immagini sovrapposte: `prima` sta nel flusso e da' le proporzioni al
 * riquadro, `dopo` le sta sopra e viene ritagliata da sinistra fino alla
 * barra. La posizione e' una sola variabile, --jlrp-ba-pos, che il
 * JavaScript aggiorna; senza JavaScript resta al 50%.
 *
 * Caricato solo sulle pagine che contengono lo shortcode.
 */

.jlrp-ba {
	--jlrp-ba-pos: 50%;
	--jlrp-ba-colore: #fff;

	cursor: ew-resize;
	line-height: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
	/* Lo scorrimento verticale resta al browser, il trascinamento orizzontale
	   arriva ai Pointer Events. */
	touch-action: pan-y;
	user-select: none;
}

/* `!important` perche' sul sito ogni immagine riceve uno stile inline
   `width:100%;height:60%;max-width:2560px`: senza, l'immagine `dopo`
   resterebbe alta il 60% del riquadro e sotto si vedrebbe `prima`. */
.jlrp-ba img {
	display: block;
	height: auto !important;
	max-width: 100% !important;
	pointer-events: none;
	width: 100% !important;
}

.jlrp-ba__dopo {
	clip-path: inset(0 0 0 var(--jlrp-ba-pos));
	inset: 0;
	position: absolute;
}

.jlrp-ba__dopo img {
	height: 100% !important;
	object-fit: cover;
}

/* La barra e la maniglia tonda al centro. */
.jlrp-ba__barra {
	background: var(--jlrp-ba-colore);
	bottom: 0;
	left: var(--jlrp-ba-pos);
	margin-left: -1px;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 2px;
}

.jlrp-ba__barra::after {
	background: rgba(0, 0, 0, 0.25);
	border: 2px solid var(--jlrp-ba-colore);
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	height: 44px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
}

/* Lo slider vero serve alla tastiera e agli screen reader: e' invisibile e
   non intercetta il puntatore, che passa alla figura. */
.jlrp-ba__range {
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.jlrp-ba:focus-within .jlrp-ba__barra::after {
	outline: 2px solid #ee2737;
	outline-offset: 2px;
}