/* Vauz icon set -- shared presentation rules.
 *
 * The symbols themselves are inlined per page (see img/icons/vauz-icons.svg for
 * why); this file is the single place their appearance is defined, so the three
 * pages that use icons cannot drift apart.
 *
 * Replaces the Font Awesome stylesheet that used to come from cdnjs. The markup
 * pattern is:
 *
 *     <i class="vauz_icon_slot" aria-hidden="true">
 *         <svg class="vauz_icon"><use href="#vi-check"/></svg>
 *     </i>
 *
 * The <i> wrapper is deliberate. Every icon on this site sits in a container that
 * sizes its glyph with font-size -- .step_icon, .rs_summary_icon, .choice_chip i,
 * .vauz_promotion li i -- because that is how an icon font is sized. Keeping the
 * <i> keeps all of those rules matching, so nothing had to be restyled.
 *
 * Sizes are px on a x2 scale. .vauz_icon used to be 1em, which meant it inherited
 * whatever font-size each of those containers happened to set -- six different
 * rendered sizes across three pages (14, 16, 17, 22, 24px). There are two tiers now,
 * 16 and 32, and a container that wants 32 says so explicitly in the block below.
 * A container's font-size no longer sizes its icon, which is why the exceptions have
 * to be listed rather than falling out of inheritance.
 */

.vauz_icon {
	width: 16px;
	height: 16px;
	/* stroke, stroke-width, the caps and the joins are inherited SVG properties, so
	   setting them here reaches the symbol content through <use>'s shadow tree --
	   which ordinary descendant selectors cannot do. This is the whole reason the
	   symbols carry no presentation attributes of their own. */
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* Never let an icon be squashed by a flex parent, and sit it on the text baseline
	   the way a font glyph would. -2px is the old -0.125em at the 16px base. */
	flex: none;
	vertical-align: -2px;
}

/* The larger icon tier, 24px.
 *
 * Sizing the slot alone no longer reaches the icon -- the svg carries its own px width
 * now -- so these are named explicitly. All three were rendering at 22-24px before,
 * so 24 keeps them where they were: the 16px base would have shrunk them, and 32 made
 * the back-to-top chevron oversized inside its 50px button.
 *
 * 24 rather than 32 puts this tier on the 3-6-12-24-48 doubling line rather than the
 * 1-2-4-8-16-32 one the layout values use. It is the same exception the comparison
 * table's tick makes, and for the same reason. */
.rs_summary_icon .vauz_icon,
.step_icon .vauz_icon,
.progress-wrap .vauz_icon_totop .vauz_icon {
	width: 24px;
	height: 24px;
}

.vauz_icon_slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}