/**
 * Box block — editor chrome ONLY (never loaded on the front end; editorStyle).
 *
 * A page-builder style container guide that is completely separate from the
 * block's real styling:
 *   - a faded dashed outline + radius drawn just OUTSIDE the box via ::before, so
 *     it can never overlap or conflict with the block's own border / outline /
 *     shadow style controls (those can't target a pseudo-element);
 *   - a "Box" capsule badge on the top-center via ::after so the container is
 *     identifiable;
 *   - while the box is empty, a centered "Add Block" button. Once it has content
 *     the button is gone and WordPress' native between-blocks "+" popover handles
 *     inserting before/after blocks.
 *
 * Everything here is pointer-events:none or editor-only, so it never affects the
 * block's layout, styles, or output.
 */

.axcelersblocks-box {
	position: relative;

	// Faded container guide — sits a couple px outside the box, distinct from any
	// real border the user sets.
	&::before {
		content: '';
		position: absolute;
		inset: -2px;
		border: 1px dashed rgba( 91, 101, 113, 0.4 );
		border-radius: 6px;
		pointer-events: none;
		z-index: 1;
	}

	// "Box" badge — a REAL element (not ::after) so it can never collide with the
	// ::after WordPress uses on this same element for its selection/hover outline.
	// Absolutely positioned, so it's also excluded from any flex/grid layout the
	// user sets on the box. Hidden by default; revealed only while THIS box is
	// hovered (see the hover rules below).
	> .axcelersblocks-box__badge {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate( -50%, -50% );
		z-index: 2;
		box-sizing: border-box;
		height: 20px;
		padding: 0 10px;
		font-size: 11px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0.02em;
		color: #fff;
		background: #15171a;
		border-radius: 999px;
		white-space: nowrap;
		pointer-events: none;
		user-select: none;
		text-transform: capitalize;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	&:hover > .axcelersblocks-box__badge {
		opacity: 1;
	}

	// While a nested badged block is hovered, keep this outer badge hidden so
	// only the innermost hovered block shows its badge.
	&:hover:has( .axcelersblocks-box:hover, .axcelersblocks-columns:hover, .axcelersblocks-column:hover, .axcelersblocks-list:hover, .axcelersblocks-list-item:hover, .axcelersblocks-heading__text:hover, .axcelersblocks-bodycopy__text:hover, .axcelersblocks-button__text:hover, .axcelersblocks-image:hover, .axcelersblocks-video:hover ) > .axcelersblocks-box__badge {
		opacity: 0;
	}
}

// Empty box → a centered "Add Block" button (the guide above already shows the
// boundary, so the button stays clean). Removed automatically once content is
// added (renderAppender is only set while empty).
.axcelersblocks-box.axcelersblocks-box--empty {
	.block-list-appender {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 72px;
		width: 100%;
		margin: 0;
	}

	.axcelersblocks-appender.axcelersblocks-box__add {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 9px 18px;
		font-size: 13px;
		font-weight: 500;
		color: #5b6571;
		background: #f3f4f5;
		border: 1px solid #e6e8eb;
		border-radius: 6px;
		box-shadow: none;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

		svg {
			width: 18px;
			height: 18px;
			fill: currentColor;
		}

		&:hover,
		&:focus {
			color: #15171a;
			background: #e9ebed;
			border-color: #d7dade;
			box-shadow: none;
		}
	}
}
