/* ============================================================
 * Axismundi — icons.css (Material Symbols utility)
 *
 * The explicit icon utility for theme chrome / control blocks. Opt-in: only an
 * element carrying the `.material-symbols-outlined` class becomes an icon —
 * ordinary text never does. Keep the @font-face here as well as its theme.json
 * metadata: WordPress may omit an unused font-family preset from generated
 * global styles even though this utility consumes it directly.
 *
 * Usage: <span class="material-symbols-outlined" aria-hidden="true">settings</span>
 * The ligature text ("settings") is also the graceful-degradation fallback when
 * the CSS/font is stripped (federation / reader views).
 *
 * FILL / wght / GRAD / opsz are themeable via --md-icon-* custom properties
 * (defaults match the M3 baseline 24 / 400 / 0 / 0).
 *
 * Contract: one `.material-symbols-outlined` element == one icon. The glyph is
 * pinned to a 1em inline-flex box with overflow clip, so the ligature/text
 * advance width (or the un-composed fallback text during font load) can never
 * drive the host layout. Consumers (theme chrome, the theme-switcher plugin)
 * inherit this — they only choose the icon name and the font-size.
 * ============================================================ */
@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	font-weight: 100 700;
	font-display: block;
	src: url( "../fonts/material-symbols-outlined/material-symbols-outlined.woff2" ) format( "woff2" );
}

@property --md-icon-fill {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.material-symbols-outlined {
	font-family: "Material Symbols Outlined", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: var(--md-icon-size, 24px);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-user-select: none;
	user-select: none;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga"; /* ligatures: "settings" -> glyph */
	-webkit-font-smoothing: antialiased;
	font-variation-settings:
		"FILL" var(--md-icon-fill, 0),
		"wght" var(--md-icon-wght, 400),
		"GRAD" var(--md-icon-grad, 0),
		"opsz" var(--md-icon-opsz, 24);
	transition: --md-icon-fill var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

@media (prefers-reduced-motion: reduce) {
	.material-symbols-outlined {
		transition: none;
	}
}