/**
 * Column block — editor chrome ONLY (editorStyle; never on the front end).
 *
 * Same page-builder UI as the Box block:
 *   - a faded dashed guide outline via ::before (WordPress doesn't use ::before
 *     on this element, so it's safe);
 *   - a "Column" badge as a REAL element (not ::after, which WordPress uses for
 *     its own selection/hover outline on this same element);
 *   - a centered "Add Block" button while empty.
 * All pointer-events:none / editor-only, so it never affects the block's styles.
 */

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

	// Hidden by default; revealed only while THIS column is hovered (see the
	// hover rules below).
	> .axcelersblocks-column__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-column__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-column__badge {
		opacity: 0;
	}
}

// Empty column → a centered "Add Block" button.
.axcelersblocks-column.axcelersblocks-column--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-column__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;
		}
	}
}
