@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

.block-editor-block-list__block[data-type="core/spacer"] {
	// This generates an invisible field above the spacer, which makes its minimum clickable-to-select height larger.
	&::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;

		// Horizontal spacer: span the full width, and provide a min-height for when it's 1px tall.
		width: 100%;
		min-height: $grid-unit-10;

		// Vertical spacer: span the height width, and provide a min-width for when it's 1px wide.
		min-width: $grid-unit-10;
		height: 100%;
	}
}

.wp-block-spacer.is-hovered .block-library-spacer__resize-container,
.block-library-spacer__resize-container.has-show-handle,
.wp-block-spacer.is-selected.custom-sizes-disabled {
	background: rgba($black, 0.1);

	.is-dark-theme & {
		background: rgba($white, 0.15);
	}
}

.block-library-spacer__resize-container {
	clear: both;

	&:not(.is-resizing) {
		// Important is used to have higher specificity than the inline style set by re-resizable library.
		height: 100% !important;
		width: 100% !important;
	}

	// Don't show the horizontal indicator.
	.components-resizable-box__handle::before {
		content: none;
	}

	&.resize-horizontal {
		margin-bottom: 0;
		// Important is used to have higher specificity than the inline style set by re-resizable library.
		height: 100% !important;
	}
}