/**
 * No.10 アイコンアセット（共通ヘルパー）。
 * サイズは theme.json の --wp--custom--icon--size（既定 1.5em。text-xs 時 ≈1.125rem / text-md 時 1.5rem）。
 * fill=off は親の color を継承、fill=on は反転（白）。
 *
 * 光学揃え: 幾何中心だとやや上寄りに見えるため、わずかに下へずらす。
 * 定番は vertical-align: -0.125em（Iconify）や translateY / top の em 微調整
 * （Snook / CSS-Tricks）。ここでは hover の transform と衝突しないよう top を使う。
 */

.icon {
	--icon-optical-offset-y: var(--wp--custom--icon--optical-offset-y, 0.0625em);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	top: var(--icon-optical-offset-y);
	inline-size: var(--wp--custom--icon--size, 1.5em);
	block-size: var(--wp--custom--icon--size, 1.5em);
	color: inherit;
	line-height: 0;
}

.icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.icon[data-fill="on"] {
	color: var(--wp--preset--color--base-white);
}