/**
 * Video block — editor chrome.
 *
 * The empty/placeholder + loading styles live in shared-frontend.scss, since
 * the same placeholder can also render on the front end (the block's
 * "Show placeholder when empty" option). That stylesheet loads in the editor
 * canvas too, so the editor's no-video / loading state stays styled.
 *
 * Page-builder identity like the Image/Heading blocks: a faded dashed guide
 * outline (::before) and a "Video" 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. Editor-only, pointer-events:none, so it never affects
 * the block's real styling or output.
 */

.axcelersblocks-video {
	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;
	}

	// "Video" badge — top-right corner, straddling the top edge. Hidden by
	// default; revealed only while this block is hovered.
	> .axcelersblocks-video__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-video__badge {
		opacity: 1;
	}
}