/*
 * ILM Components -- Icon.
 *
 * The `<svg>` is sized in `em`, so an icon is proportional to the text it sits
 * beside and follows a change in font size without a second setting. The size
 * classes set that font size on the wrapper.
 *
 * `stroke="currentColor"` is on the element, so an icon takes the colour of
 * whatever it is inside -- the page, a dark Section, a Button -- with nothing
 * here having an opinion about it.
 *
 * The wrapper is a `block` so that `text-align` on it can place the icon.
 * Inline, it would sit in a line box and ignore the alignment classes.
 */

.ilm-component--basic-icon {
	display: block;
}

.ilm-component--basic-icon .ilm-icon {
	display: inline-block;
	inline-size: 1.5em;
	block-size: 1.5em;

	/*
	 * `vertical-align` matters when an icon shares a line with text: the
	 * baseline of an SVG is its bottom edge, so without this it sits low.
	 */
	vertical-align: -0.15em;
}

.ilm-component--basic-icon.ilm-size-sm { font-size: var(--ilm-font-size-sm, 0.875rem); }
.ilm-component--basic-icon.ilm-size-md { font-size: var(--ilm-font-size-base, 1rem); }
.ilm-component--basic-icon.ilm-size-lg { font-size: var(--ilm-font-size-xl, 1.25rem); }