.block-editor-block-styles__preview-panel {
	display: none;
	// Same layer as the sidebar from which it's triggered.
	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");

	// Only show in narrow widths.
	@include break-medium() {
		display: block;
	}

	.block-editor-block-icon {
		display: none;
	}
}

.block-editor-block-styles__variants {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: $grid-unit-10;

	button.components-button.block-editor-block-styles__item {
		color: $gray-900;
		box-shadow: inset 0 0 0 $border-width $gray-300;
		display: inline-block;
		width: calc(50% - #{$grid-unit-05});

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

		&.is-active,
		&.is-active:hover {
			background-color: $gray-900;
			box-shadow: none;
		}

		&.is-active .block-editor-block-styles__item-text,
		&.is-active:hover .block-editor-block-styles__item-text {
			color: $white;
		}

		&:focus,
		&.is-active:focus {
			@include block-toolbar-button-style__focus();
		}
	}

	.block-editor-block-styles__item-text {
		word-break: break-all;
		// The Button component is white-space: nowrap, and that won't work with line-clamp.
		white-space: normal;

		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
		text-align: start;
		text-align-last: center;
	}
}

// To prevent overflow in the preview container,
// ensure that block contents' margin and padding
// do not add to the block container's width.
.block-editor-block-styles__block-preview-container,
.block-editor-block-styles__block-preview-container * {
	box-sizing: border-box !important;
}