/*
 * Material Symbols element — front-end styles.
 *
 * The markup is one span whose TEXT is the ligature name (Mf_Symbol); everything
 * that turns "rocket_launch" into a glyph happens here, in the font settings
 * below. That is why the element needs no JavaScript, no SVG and no sprite, and
 * why the name has to survive to the browser intact: `text-transform` and
 * `letter-spacing` are reset explicitly because a theme rule on the surrounding
 * text would otherwise break the ligature and leave the raw name on screen.
 *
 * The @font-face rules live in assets/material-symbols.css, which this sheet
 * declares as a dependency (Mf_Symbol::register).
 */

.mf-symbol {
	display: inline-block;
	direction: ltr;
	font-family: "Material Symbols Outlined", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-feature-settings: "liga";
	font-variant-ligatures: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;

	/* Sits the glyph on the text baseline it shares a line with. */
	vertical-align: -0.15em;
	-webkit-font-smoothing: antialiased;
}

/*
 * The filled face is a SECOND FONT FILE, not an axis: the self-hosted woff2 is a
 * static instance with no `fvar`, so `font-variation-settings: 'FILL' 1` would do
 * nothing. See assets/material-symbols.css.
 */
.mf-symbol.is-filled {
	font-family: "Material Symbols Outlined Filled", sans-serif;
}

/*
 * Sizes are em, so a symbol scales with the type around it — including inside a
 * heading, and at whatever the reader has set. The absence of a size class is the
 * inline case: exactly one em, riding the line it sits in.
 */
.mf-symbol--sm {
	font-size: 1.5em;
}

.mf-symbol--md {
	font-size: 2.5em;
}

.mf-symbol--lg {
	font-size: 4em;
}

.mf-symbol--xl {
	font-size: 6em;
}

/*
 * Two colours for the inline variant only — the block takes the theme palette
 * through WordPress' own colour support, which lands on the wrapper and is
 * inherited from there. #E35205 is the suite accent (a glyph, never text, so the
 * 3.8:1 contrast is not a text-contrast failure); #616c64 is its AA-safe muted ink.
 */
.mf-symbol--accent {
	color: #e35205;
}

.mf-symbol--muted {
	color: #616c64;
}

/*
 * The standalone block's wrapper is BLOCK-LEVEL and full column width, so a block
 * theme lays it out exactly like a paragraph. An inline-block wrapper sized to the
 * glyph would be pinned to the left edge of a full-width content area, because a
 * constrained layout centres its children with `margin-inline: auto` and auto
 * margins do nothing on an inline-block — the mistake the gauge made first.
 */
.mf-symbol-block {
	display: block;
	margin: 0;
}

.mf-symbol-block--left {
	text-align: left;
}

.mf-symbol-block--center {
	text-align: center;
}

.mf-symbol-block--right {
	text-align: right;
}