.components-popover.block-editor-rich-text__inline-format-toolbar {
	// Set z-index as if it's displayed on the bottom, otherwise the block
	// switcher popover might overlap if displayed on the bottom.
	z-index: z-index(".components-popover.block-editor-rich-text__inline-format-toolbar");

	.components-popover__content {
		width: auto;
		min-width: auto;
		margin-bottom: $grid-unit-10;
		box-shadow: none;
		outline: none;
		border-radius: $radius-small;
	}

	.components-toolbar {
		border-radius: $radius-small;
	}

	.components-toolbar-group {
		background: none;
	}

	.components-toolbar__control,
	.components-dropdown-menu__toggle {
		min-width: $block-toolbar-height;
		min-height: $block-toolbar-height;
		padding-left: $grid-unit-15;
		padding-right: $grid-unit-15;
	}
}

.block-editor-rich-text__inline-format-toolbar-group {
	.components-dropdown-menu__toggle {
		justify-content: center;
	}
}

.show-icon-labels {
	.block-editor-rich-text__inline-format-toolbar-group {
		.components-button.has-icon {
			width: auto;

			// Hide the button icons when labels are set to display...
			svg {
				display: none;
			}
			// ... and display labels.
			&::after {
				content: attr(aria-label);
			}
		}
	}
}