/**
 * Title icon -- an icon in a fixed gutter to the LEFT of a heading or
 * paragraph. If the text wraps, every line stays flush with the FIRST line's
 * text (not indented under, not overlapping the icon), and the icon only ever
 * appears once, pinned to the top-left.
 *
 * Technique: `padding-inline-start` reserves the gutter on the block's whole
 * box, so every wrapped line is inset by it. The icon is an absolutely
 * positioned `::before` in that gutter, sized in `em` so it always matches
 * the block's own font size.
 *
 * The icon is a CSS mask with background-color: currentColor, so it follows
 * the block's text colour. Any SVG works as long as it's a simple solid shape
 * on a transparent background (its own fill colour doesn't matter).
 *
 * Applied via the editor's "Title icon" picker (solo-title-icon.js);
 * SoloTitleIcon::render_title_icon() adds the class + --solo-title-icon on
 * the front end. Also enqueued for the editor canvas.
 */
.has-title-icon {
	position: relative;
	padding-inline-start: 1.35em; /* icon (1em) + gap */
}
.has-title-icon::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	/* Roughly centres the icon on the FIRST line. Override per block with
	   --solo-title-icon-offset if a particular size/line-height reads off. */
	top: var(--solo-title-icon-offset, 0.15em);
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--solo-title-icon) center / contain no-repeat;
	mask: var(--solo-title-icon) center / contain no-repeat;
}