.block-editor-button-block-appender {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	color: $gray-900;
	box-shadow: inset 0 0 0 $border-width $gray-900;

	.is-dark-theme & {
		color: $light-gray-placeholder;
		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
	}

	&:hover {
		color: var(--wp-admin-theme-color);
		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
	}

	&:focus {
		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
	}

	&:active {
		color: $black;
	}
}


// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
.block-list-appender:only-child {
	// One level of nesting
	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
	// Legacy groups have an inner container so need to be targeted separately
	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
		pointer-events: none;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
			border: $border-width dashed currentColor;
		}

		.block-editor-inserter {
			opacity: 0;

			&:focus-within {
				opacity: 1;
			}
		}

		&.is-drag-over {
			&::after {
				border: none;
			}

			.block-editor-inserter {
				visibility: visible;
			}
		}
	}

	// Hide the dashed outline in 2-level nested cases, so for example the dashed
	// empty column is only shown when the columns block is selected.
	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
		border: none;
	}

	// Drop zone.
	&.is-drag-over .block-editor-button-block-appender {
		background-color: var(--wp-admin-theme-color);
		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
		color: $light-gray-placeholder;
		@media not ( prefers-reduced-motion ) {
			transition: background-color 0.2s ease-in-out;
		}
	}
}