/**
 * Editor-only chrome for the List Item block.
 *
 * The item's appearance is fully attribute-driven (generated inline). These rules
 * only style the editor-only nested-blocks appender (add heading / bodycopy /
 * sub-list) and the page-builder guide + "List Item" badge.
 */

// Page-builder identity like the other blocks: a faded dashed guide outline
// (::before) + a "List Item" badge as a REAL element (the span in edit.js — not
// ::after, which WordPress uses for its .is-highlighted overlay) that fades in
// only while THIS block is hovered.
.axcelersblocks-list-item {
	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;
	}

	// "List Item" badge — top-center, straddling the top edge. Hidden by
	// default; revealed only while this block is hovered.
	> .axcelersblocks-list-item__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;
		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-list-item__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-list-item__badge {
		opacity: 0;
	}
}

.axcelersblocks-list-item__content {
	// Stack the editable text and the nested-blocks area (with its appender)
	// vertically, so the "+" appender always sits on its own line below the text
	// rather than inline beside it.
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.axcelersblocks-list-item__nested {
	width: 100%;

	// Keep the appender on its own line, left-aligned under the item content.
	// WordPress core sometimes positions `.block-list-appender` absolutely, which
	// makes it overlap the content — force it back into normal block flow.
	.block-list-appender {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		display: block;
		margin: 6px 0 2px;
		width: max-content;
		max-width: 100%;
	}

	// Compact "+" pill: subtle by default, fills with the theme colour on
	// hover/focus. Pinned into normal flow so it can never overlap the block.
	.axcelersblocks-appender.axcelersblocks-list-item__add {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		min-width: 28px;
		padding: 0;
		color: #5b6571;
		background: #fafbfc;
		border: 1px dashed #d7dade;
		border-radius: 4px;
		box-shadow: none;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

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

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