/**
 * PF Compare — the before / after frame.
 *
 * Everything tunable arrives as a custom property set on the block by PHP (and
 * by the editor preview, which builds the same markup), so the values here are
 * only the fallbacks and the parts of the layout a control would never
 * sensibly change.
 *
 * The whole thing hangs off one number: --pf-cmp-pos, 0% to 100%. The script
 * writes it, the clip-path and the handle read it.
 */

.pf-cmp {
	--pf-cmp-pos: 50%;
	--pf-cmp-ratio: 16 / 9;
	--pf-cmp-fit: cover;
	--pf-cmp-radius: 0px;
	--pf-cmp-line: 3px;
	--pf-cmp-line-color: #ffffff;
	--pf-cmp-knob: 44px;
	--pf-cmp-knob-color: #ffffff;
	--pf-cmp-knob-icon: #14121A;
	--pf-cmp-label-size: 13px;
	--pf-cmp-label-color: #ffffff;
	--pf-cmp-label-bg: rgba(0, 0, 0, 0.55);

	position: relative;
}

.pf-cmp__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--pf-cmp-ratio);
	border-radius: var(--pf-cmp-radius, var(--pf-radius, 10px));
	background: #000;
	/* The frame is dragged across, not selected or long-pressed. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	isolation: isolate;
}

/* The axis the handle travels on belongs to the block; the other one still
   scrolls the page, so a phone never traps a thumb inside the frame. */
.pf-cmp--vertical .pf-cmp__frame {
	touch-action: pan-y;
}

.pf-cmp--horizontal .pf-cmp__frame {
	touch-action: pan-x;
}

/* ---------- the two layers ---------------------------------------------- */

.pf-cmp__layer {
	position: absolute;
	inset: 0;
}

/* Both layers fill the same box, so the two sides line up whatever the source
   files measure. object-fit decides how each one meets that box. */
.pf-cmp__media {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--pf-cmp-fit);
	pointer-events: none;
}

.pf-cmp--vertical .pf-cmp__layer--after {
	clip-path: inset(0 0 0 var(--pf-cmp-pos));
}

.pf-cmp--horizontal .pf-cmp__layer--after {
	clip-path: inset(var(--pf-cmp-pos) 0 0 0);
}

/* ---------- the handle --------------------------------------------------- */

.pf-cmp__handle {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
}

.pf-cmp--vertical .pf-cmp__handle {
	top: 0;
	bottom: 0;
	left: var(--pf-cmp-pos);
	width: max(var(--pf-cmp-knob), 40px);
	transform: translateX(-50%);
	cursor: ew-resize;
	/* Sideways belongs to the handle, up and down still scrolls the page. */
	touch-action: pan-y;
}

.pf-cmp--horizontal .pf-cmp__handle {
	left: 0;
	right: 0;
	top: var(--pf-cmp-pos);
	height: max(var(--pf-cmp-knob), 40px);
	transform: translateY(-50%);
	cursor: ns-resize;
	touch-action: pan-x;
}

/* Following the pointer means the handle must never be under it. */
.pf-cmp--hover .pf-cmp__handle {
	pointer-events: none;
}

.pf-cmp__line {
	position: absolute;
	background: var(--pf-cmp-line-color);
}

.pf-cmp--vertical .pf-cmp__line {
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--pf-cmp-line);
	transform: translateX(-50%);
}

.pf-cmp--horizontal .pf-cmp__line {
	left: 0;
	right: 0;
	top: 50%;
	height: var(--pf-cmp-line);
	transform: translateY(-50%);
}

.pf-cmp__knob {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pf-cmp-knob);
	height: var(--pf-cmp-knob);
	border-radius: 50%;
	background: var(--pf-cmp-knob-color);
	color: var(--pf-cmp-knob-icon);
}

.pf-cmp--no-knob .pf-cmp__knob {
	display: none;
}

.pf-cmp__arrows {
	width: 62%;
	height: 62%;
}

.pf-cmp--shadow .pf-cmp__knob {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pf-cmp--shadow .pf-cmp__line {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.pf-cmp__handle:focus {
	outline: none;
}

.pf-cmp__handle:focus-visible .pf-cmp__knob {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pf-cmp--no-knob .pf-cmp__handle:focus-visible .pf-cmp__line {
	outline: 2px solid var(--pf-cmp-line-color);
	outline-offset: 3px;
}

/* ---------- labels ------------------------------------------------------- */

.pf-cmp__label {
	position: absolute;
	z-index: 2;
	padding: 0.35em 0.7em;
	border-radius: 2em;
	background: var(--pf-cmp-label-bg);
	color: var(--pf-cmp-label-color);
	font-size: var(--pf-cmp-label-size);
	line-height: 1.35;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.18s ease-out;
}

.pf-cmp--labels-top .pf-cmp__label {
	top: 12px;
}

.pf-cmp--labels-bottom .pf-cmp__label {
	bottom: 12px;
}

.pf-cmp--vertical .pf-cmp__label--before {
	left: 12px;
}

.pf-cmp--vertical .pf-cmp__label--after {
	right: 12px;
}

/* Split top-to-bottom, the labels belong to the top and bottom halves, not to
   the left and right of them. */
.pf-cmp--horizontal .pf-cmp__label--before {
	top: 12px;
	left: 12px;
	bottom: auto;
}

.pf-cmp--horizontal .pf-cmp__label--after {
	bottom: 12px;
	left: 12px;
	top: auto;
}

.pf-cmp__label.is-covered {
	opacity: 0;
}

/* ---------- the play button ---------------------------------------------- */

.pf-cmp__play {
	position: absolute;
	z-index: 4;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pf-cmp-label-bg);
	color: var(--pf-cmp-label-color);
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.18s ease-out;
}

.pf-cmp__play:hover,
.pf-cmp__play:focus-visible {
	opacity: 1;
}

.pf-cmp--labels-top .pf-cmp__play {
	bottom: 12px;
}

.pf-cmp--labels-bottom .pf-cmp__play {
	top: 12px;
}

.pf-cmp__play svg {
	width: 20px;
	height: 20px;
}

.pf-cmp__play[aria-pressed="true"] .pf-cmp__icon-play,
.pf-cmp__play[aria-pressed="false"] .pf-cmp__icon-pause {
	display: none;
}

/* ---------- the editor canvas -------------------------------------------- */

/* The placeholder stands in for the frame until both slots are filled. */
.pf-cmp-editor__empty {
	display: grid;
	gap: 4px;
	place-content: center;
	aspect-ratio: 16 / 9;
	border: 1px dashed currentColor;
	border-radius: var(--pf-radius, 10px);
	opacity: 0.6;
	text-align: center;
	font-size: 13px;
}

/* Dragging on the canvas sets the starting position, so it wants the same
   grab cursor the front end has — even over the media. */
.pf-cmp-editor .pf-cmp__frame {
	cursor: inherit;
}

/* The two media slots in the sidebar. */
.pf-cmp-slot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pf-cmp-slot__preview {
	flex: 0 0 100%;
	overflow: hidden;
	border-radius: var(--pf-radius, 10px);
	background: #1E1A24;
}

.pf-cmp-slot__preview img,
.pf-cmp-slot__preview video {
	display: block;
	width: 100%;
	max-height: 140px;
	object-fit: cover;
}

/* Said on the canvas when a file the browser cannot paint is picked. */
.pf-cmp-editor__failed {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	max-width: min(90%, 30em);
	margin: 0;
	padding: 10px 14px;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}