/**
 * Heading block — editor chrome ONLY (editorStyle; never on the front end).
 *
 * Page-builder identity: a faded dashed guide outline (::before) and a "Heading"
 * badge that fades in only while THIS block is hovered. The badge is a REAL
 * element (the span in edit.js), NOT ::after — WordPress uses ::after on every
 * block wrapper for its .is-highlighted / .is-hovered overlay. Both
 * pointer-events:none, so they never affect the real styling.
 *
 * Loaded via the block's own editorStyle (block.json) so it reliably reaches the
 * editor canvas iframe — the layout rules in shared-editor.scss stay there.
 */

.axcelersblocks-heading__text {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: -2px;
		border: 1px dashed rgba( 91, 101, 113, 0.4 );
		border-radius: 6px;
		pointer-events: none;
		z-index: 1;
	}

	// "Heading" badge — top-right corner, straddling the top edge. Hidden by
	// default; revealed only while this block is hovered.
	> .axcelersblocks-heading__badge {
		position: absolute;
		top: -2px;
		right: -2px;
		transform: translateY( -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;
		text-transform: capitalize;
		color: #fff;
		background: #15171a;
		border-radius: 999px;
		white-space: nowrap;
		pointer-events: none;
		user-select: none;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

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