/*
 * Icons: Font Awesome's drawings (design/README.md, "Icons"). A template draws one inline with
 * $this->icon('calendar'): 1em square, in the text's colour, so font-size and color size and colour it.
 * Loaded after app.css, whose older .icon rules drew outlines, and before the themes, which may restyle
 * anything here.
 */
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; stroke: none; vertical-align: -.125em; }

/* A duotone's lighter half. */
.icon__secondary { opacity: var(--icon-secondary-opacity, .4); }

/* An icon that turns, as a waiting sign does; still for a visitor who asks for less motion. */
.icon--spin { animation: icon-spin 2s linear infinite; }
@keyframes icon-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .icon--spin { animation: none; } }

/* An icon a stylesheet draws, before an element's text: the element takes the class and names the
   drawing by its address, .faq summary { --icon: url(/fa/regular/chevron-down.svg); }. The same
   three lines on any ::before do it without the class. */
.has-icon::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.125em; background-color: currentColor; mask: var(--icon) center / contain no-repeat; }