style.scss

.editor-block-switcher {
	position: relative;
	height: $icon-button-size;
}

// Style this the same as the block buttons in the library.
// Needs specificiity to override the icon button.
.components-icon-button.editor-block-switcher__toggle {
	width: auto;
	margin: 0;
	display: block;
	height: $icon-button-size;
	padding: 6px 3px;

	// Unset icon button styles.
	&:active,
	&:not(:disabled):not([aria-disabled="true"]):hover,
	&:not([aria-disabled="true"]):focus {
		outline: none;
		box-shadow: none;
		background: none;
		border: none;
	}

	.editor-block-icon,
	.editor-block-switcher__transform {
		width: $icon-button-size + 3px + 3px;
		position: relative;
		height: $icon-button-size-small;
		margin: 0;
		padding: 0 6px;
		display: flex;
		align-items: center;

		// Transition opacity slightly slower than the movement
		transition: opacity 0.3s ease-in-out, transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	// Add a dropdown arrow indicator.
	.editor-block-icon::after {
		content: "";
		pointer-events: none;
		display: block;
		position: absolute;
		top: $icon-button-size-small / 2 - 1px;
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 5px solid currentColor;
		right: 6px;
	}

	.editor-block-switcher__transform {
		margin-top: 6px + 3px;
		border-radius: $radius-round-rectangle;
		height: $icon-button-size-small + 6px;
		padding: 3px 9px 3px 9px;
		//opacity: 0;
	}

	// Block hover and focus style.
	&[aria-expanded="true"],
	&:not(:disabled):hover,
	&:not(:disabled):focus {
		.editor-block-icon,
		.editor-block-switcher__transform {
			transform: translateY(-$icon-button-size);
		}

		// Swap opacities on hover
		.editor-block-icon {
			opacity: 0;
		}

		.editor-block-switcher__transform {
			opacity: 1;
		}
	}

	// Block focus style.
	&:not(:disabled):focus .editor-block-icon,
	&:not(:disabled):focus .editor-block-switcher__transform {
		@include formatting-button-style__focus();
	}
}

.components-popover:not(.is-mobile).editor-block-switcher__popover .components-popover__content {
	min-width: 320px;
}

.editor-block-switcher__popover .components-popover__content {
	@include break-medium {
		position: relative;

		.editor-block-preview {
			border: $border-width solid $light-gray-500;
			box-shadow: $shadow-popover;
			background: $white;
			position: absolute;
			left: 100%;
			top: -1px;
			bottom: -1px;
			width: 300px;
			height: auto;
		}
	}

	// Hide the bottom border on the last panel so it stacks with the popover.
	.components-panel__body {
		border: 0;

		// Elevate this so the hover style is visible.
		position: relative;
		z-index: 1;
	}

	.components-panel__body + .components-panel__body {
		border-top: $border-width solid $light-gray-500;
	}
}

.editor-block-switcher__popover:not(.is-mobile) > .components-popover__content {
	// Reset overflow to allow showing the preview on the left once an item is hovered.
	overflow-y: visible;
}

.editor-block-switcher__popover .editor-block-styles {
	margin: 0 -3px; // Remove the panel body padding while keeping it for the title.
}

.editor-block-switcher__popover .editor-block-types-list {
	margin: 8px -8px -8px;
}