/*
 * Inline SVG icon component. Markup comes from mhg_icon() in inc/icons.php.
 *
 * The size classes exist to keep the EFFECTIVE stroke at roughly 1.5 CSS pixels
 * whatever the render size. Drawing at a fixed 1.5/24 and rendering at 40px
 * gives a 2.5px stroke, which is what makes an icon look like clip-art rather
 * than a drawing. Rule of thumb: stroke-width is about 38 divided by the
 * rendered pixel size.
 *
 * A default size is set on .mhg-icon itself, not only on the modifiers. Without
 * it, a bare mhg_icon() call renders at the UA default replaced-element size of
 * 300x150 — and so does every icon if this stylesheet fails to load.
 *
 * There is deliberately no `color` declaration here. Colour inherits by default,
 * and setting `color: inherit` would tie with the consumer's own rule on
 * specificity, so which one wins would depend on enqueue order.
 */

.mhg-icon {
	display: block;
	flex: none;
	width: var(--mhg-icon-size-md);
	height: var(--mhg-icon-size-md);
	stroke-width: var(--mhg-icon-stroke-md);
}

.mhg-icon--sm {
	width: var(--mhg-icon-size-sm);
	height: var(--mhg-icon-size-sm);
	stroke-width: var(--mhg-icon-stroke-sm);
}

.mhg-icon--md {
	width: var(--mhg-icon-size-md);
	height: var(--mhg-icon-size-md);
	stroke-width: var(--mhg-icon-stroke-md);
}

.mhg-icon--lg {
	width: var(--mhg-icon-size-lg);
	height: var(--mhg-icon-size-lg);
	stroke-width: var(--mhg-icon-stroke-lg);
}