/**
 * Columns block — editor chrome ONLY (editorStyle; never on the front end).
 *
 * Same page-builder guide as the Box block: a faded dashed outline via ::before
 * and a "Columns" badge as a REAL element (not ::after, which WordPress uses for
 * its own selection outline on this element). Plus the on-insert structure picker
 * and the "+ Add Column" appender bar.
 */

.axcelersblocks-columns {
	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 columns block is hovered (see
	// the hover rules below).
	> .axcelersblocks-columns__badge {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate( -50%, -50% );
		z-index: 3;
		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-columns__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-columns__badge {
		opacity: 0;
	}
}

// ── "+ Add Column" appender line ──────────────────────────────────────────────
// Rendered as editor-only chrome inside the Columns block, not through
// Gutenberg's `.block-list-appender`, so reloads/layout changes cannot leave the
// click target tied to stale appender wrapper positioning.
.axcelersblocks-columns > .axcelersblocks-columns__appender {
	// Keep the appender out of the flex layout so Column widths are calculated
	// from the full Columns block width.
	position: absolute !important;
	inset: auto !important;
	top: 0 !important;
	right: -18px !important;
	bottom: 0 !important;
	left: auto !important;
	flex: 0 0 auto;
	align-self: stretch;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 72px;
	height: auto;
	box-sizing: border-box;
	overflow: visible;
	pointer-events: none;
	transform: none !important;
	z-index: 20;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 2px;
		background: #000000;
		border-radius: 2px;
		transform: translateX( -50% );
		transition: background 0.15s ease;
		pointer-events: none;
	}

	&:hover::before {
		background: #000000;
	}
}

.axcelersblocks-columns .axcelersblocks-columns__appender .axcelersblocks-columns__add-column {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	color: #fff;
	background: #000000;
	border: none;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.18 );
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.15s ease, box-shadow 0.15s ease;

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

	&:hover,
	&:focus {
		color: #fff;
		background: #000000;
		box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.24 );
	}
}

// ── On-insert structure picker ────────────────────────────────────────────────
.axcelersblocks-columns-picker {
	&__list {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 108px, 1fr ) );
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&__item {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		height: auto !important;
		padding: 10px !important;
		border: 1px solid #e6e8eb !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: none !important;
		transition: border-color 0.15s ease, background 0.15s ease;

		&:hover,
		&:focus {
			border-color: #15171a !important;
			background: #f3f4f5 !important;
		}
	}

	&__preview {
		display: flex;
		gap: 4px;
		height: 36px;
		width: 100%;

		span {
			width: 0;
			min-width: 0;
			background: #c2c6cc;
			border-radius: 2px;
		}
	}

	&__label {
		font-size: 11px;
		font-weight: 500;
		line-height: 1.3;
		color: #5b6571;
		text-align: center;
		white-space: nowrap;
	}
}
