/**
 * Editor-only chrome for the List block (editorStyle; never on the front end).
 *
 * Page-builder identity like the other blocks: a faded dashed guide outline
 * (::before) on the list and a "List" badge (a REAL span rendered INSIDE the
 * <ul> in edit.js — ::after would collide with WordPress' .is-highlighted
 * overlay) that fades in only while THIS block is hovered, plus the line-style
 * Add Item appender at the end of the list.
 */

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

.axcelersblocks-list > .block-list-appender {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
	min-height: 30px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 2px;
		background: #000000;
		border-radius: 2px;
		transform: translateY( -50% );
		transition: background 0.15s ease;
	}

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

	.axcelersblocks-list__add-item {
		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: #ffffff;
		background: #000000;
		border: none;
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.18 );
		cursor: pointer;
		transition: background 0.15s ease, box-shadow 0.15s ease;

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

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