/**
 * Join Widgets (No Gap) — the two widgets either side of it meet with no gap,
 * on every device (or with the space set on the joiner, --jn-gap).
 *
 * The joiner reaches its neighbours from the outside:
 *   the one before it   x:has(+ .joiner)          or x:has(+ style + .joiner)
 *                       (the joiner prints its own size <style> first when set)
 *   the one after it    .joiner + x               or .joiner + style + x
 *                       (a widget prints its own size <style> before itself)
 * !important is deliberate: the space comes from rules of very different
 * weight — every widget root's 24px, a widget's own "margin" setting per
 * device, a Group block's block gap — and the joiner has to beat all of them.
 * Only the two edges that face the joiner are touched; everything else about
 * the neighbours stays exactly as designed.
 */

.espt-block.espt-block-joiner {
	clear: both;
	display: block;
	height: var(--jn-gap, 0px);
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.espt-block-joiner .espt-jn:not(.espt-jn-tab) {
	display: none;
}

/* the widget before the joiner: no space below it */
:is(*:has(+ .espt-block-joiner), *:has(+ style + .espt-block-joiner)):not(style) {
	margin-block-end: 0 !important;
	margin-bottom: 0 !important;
}

/* the widget after the joiner: no space above it */
:is(.espt-block-joiner + *, .espt-block-joiner + style + *):not(style) {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* ------------------------------------------------------------ in the editor
 * Every block sits inside the editor's own wrapper, so the neighbours are
 * wrappers there: the wrapper and the widget inside it both lose the facing
 * margin, so what the editor shows is what the page will show. */

.block-editor-block-list__block[data-type="esalespage/joiner"] {
	margin-block: 0 !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.block-editor-block-list__block:has(+ .block-editor-block-list__block[data-type="esalespage/joiner"]),
.block-editor-block-list__block:has(+ .block-editor-block-list__block[data-type="esalespage/joiner"]) .espt-block {
	margin-block-end: 0 !important;
	margin-bottom: 0 !important;
}

.block-editor-block-list__block[data-type="esalespage/joiner"] + .block-editor-block-list__block,
.block-editor-block-list__block[data-type="esalespage/joiner"] + .block-editor-block-list__block .espt-block {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* the tab on the seam: the only visible part, and only in the editor */
.espt-block-joiner .espt-jn-tab {
	align-items: center;
	background: #1e293b;
	border: 2px solid #fff;
	border-radius: 999px;
	box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.45);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 600;
	gap: 6px;
	left: 50%;
	line-height: 1;
	padding: 5px 12px 5px 9px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	z-index: 30;
}

.espt-block-joiner .espt-jn-tab svg {
	flex: none;
}

/* a thin dashed seam line so the join point reads at a glance */
.espt-block-joiner:has(.espt-jn-tab)::before {
	border-top: 1px dashed rgba(30, 41, 59, 0.45);
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 29;
}

.block-editor-block-list__block.is-selected[data-type="esalespage/joiner"] .espt-jn-tab {
	background: var(--wp-admin-theme-color, #3858e9);
}