/*
 * A stored SVG illustration on the front end.
 *
 * Two placements, and the difference between them is not cosmetic: a standalone
 * drawing is sized by the author, an inline one is sized by the line it sits in.
 */

/*
 * Standalone.
 *
 * The width travels as a CUSTOM PROPERTY rather than as `width` in the style
 * attribute, for the reason the gauge had to learn (docs/core/gauge.md → Gotchas):
 * the theme's `.is-layout-constrained > :where(…)` rule sets `max-width` at the
 * same specificity but LATER in the cascade, so it wins. No theme rule touches a
 * custom property of ours.
 *
 * The fallback is 100% rather than a fixed length, so a drawing without a stated
 * width fills its column instead of falling back to CSS's 300px default for an
 * `<svg>` that carries only a viewBox.
 */
.mf-svg {
	display: inline-block;
	width: var(--mf-svg-width, 100%);
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.mf-svg > svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Inline in a sentence.
 *
 * Height-driven, not width-driven: the drawing has to match the type around it,
 * and its own aspect ratio decides how wide that makes it. Capped at 1.4em for the
 * reason the inline gauge has no caption and the inline symbol is always 1em — a
 * taller element tears the line height open and the paragraph starts to limp.
 *
 * The offset is measured against the Material Symbol beside it, which is the icon
 * readers already judge the line by: on this theme its glyph bottom sits 0.167em below
 * the baseline, and `-0.17em` puts the drawing there too. Unlike the CSS icon's wrapper
 * this one behaves as the spec describes — its child `<svg>` is `display: block`, so
 * `baseline` really does mean the bottom margin edge and the offset from there is exact.
 *
 * `-0.25em` shipped first and sat 0.25em down, which is a hair below the symbol and was
 * reported as sagging.
 */
.mf-svg--inline {
	width: auto;
	height: 1.4em;
	vertical-align: -0.17em;
}

.mf-svg--inline > svg {
	width: auto;
	height: 100%;
}