.rich-text {
	[data-rich-text-placeholder] {
		pointer-events: none;
	}

	[data-rich-text-placeholder]::after {
		content: attr(data-rich-text-placeholder);
		// Use opacity to work in various editor styles.
		// We don't specify the color here, because blocks or editor styles might provide their own.
		opacity: 0.62;
	}

	&:focus {
		// Removes outline added by the browser.
		outline: none;

		[data-rich-text-format-boundary] {
			border-radius: 2px;
		}
	}
}

.block-editor-rich-text__editable {
	> p:first-child {
		margin-top: 0;
	}
}

// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
	opacity: 0.8;
}

.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;

		// Block UI appearance.
		border: $border-width solid $gray-900;
		border-radius: $radius-block-ui;
		background-color: $white;
	}

	.components-toolbar-group,
	.components-toolbar {
		// The popover already provides a border.
		border: 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);
			}
		}
	}
}

[data-rich-text-script] {
	display: inline;

	&::before {
		content: "</>";
		background: rgb(255, 255, 0);
	}
}