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

// 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;
}

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

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

[data-rich-text-comment],
[data-rich-text-format-boundary] {
	border-radius: $radius-small;
}

[data-rich-text-comment] {
	background-color: currentColor;

	span {
		filter: invert(100%);
		color: currentColor;
		padding: 0 2px;
	}
}