/* Editor preview: same structure as front so before/after and ruler look correct */
.image-split-editor-preview .image-split__inner {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* overridden inline when one image provides dimensions */
}
.image-split-editor-empty-slot {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 12px;
	box-sizing: border-box;
	text-align: center;
	pointer-events: auto;
}
.image-split-editor-empty-slot__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: #1e1e1e;
}
.image-split-editor-preview .image-split__before,
.image-split-editor-preview .image-split__after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.image-split-editor-preview .image-split__before { z-index: 1; }
.image-split-editor-preview .image-split__after { z-index: 2; }
/* Clip "after" so "before" is visible on one side (match front-end) */
.image-split-editor-preview.image-split--horizontal .image-split__after {
	clip-path: inset(0 0 0 calc(var(--split-pos, 50) * 1%));
	-webkit-clip-path: inset(0 0 0 calc(var(--split-pos, 50) * 1%));
}
.image-split-editor-preview.image-split--vertical .image-split__after {
	clip-path: inset(calc(var(--split-pos, 50) * 1%) 0 0 0);
	-webkit-clip-path: inset(calc(var(--split-pos, 50) * 1%) 0 0 0);
}
.image-split-editor-preview .image-split__before img,
.image-split-editor-preview .image-split__after img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.image-split-editor-preview .image-split__label {
	position: absolute;
	z-index: 3;
	padding: 6px 12px;
	border-radius: 2px;
	pointer-events: none;
}
.image-split-editor-preview .image-split__label--top-left { top: 10px; left: 10px; }
.image-split-editor-preview .image-split__label--top-right { top: 10px; right: 10px; left: auto; }
.image-split-editor-preview .image-split__label--bottom-left { bottom: 10px; left: 10px; top: auto; }
.image-split-editor-preview .image-split__label--bottom-right { bottom: 10px; right: 10px; left: auto; top: auto; }
.image-split-editor-preview .image-split__label--center-left { top: 50%; left: 10px; transform: translateY(-50%); }
.image-split-editor-preview .image-split__label--center-right { top: 50%; right: 10px; left: auto; transform: translateY(-50%); }
/* Ruler visuals (solid/double/dashed, arrows) come from assets/css/front.css — enqueued as a dependency of this file. */

.image-split-block-number-unit {
	margin-bottom: 12px;
}

.image-split-block-number-unit .components-flex-item .components-base-control {
	margin-bottom: 0;
}