/* icon-label — a small icon in front of a label, aligned to its first line.
   See templates/components/icon-label.php.

   The mark is exactly one line tall (1lh) with the icon centered in it, so
   the icon sits on the first line whatever the voice, and a wrapped label
   hangs beside it instead of under it. Paint the icon from outside with
   --icon-label-color.

   $todo Temp structural styles — alignment only. */

icon-label {
	display: grid;
	grid-template-columns: 1em minmax(0, 1fr);
	column-gap: var(--space-small);
	align-items: start;

	.mark {
		display: flex;
		align-items: center;
		height: 1lh;
		color: var(--icon-label-color, currentColor);

		.icon {
			width: 1em;
			height: 1em;
		}
	}
}