/*
 * Inlined SVG icons, from `icon`. They fill with the ink by default; a tone
 * names the job instead of a colour, and `current` follows the text colour of
 * whatever it sits in (a link, a button).
 */
@layer components {
  .icon {
    flex: none;
    fill: var(--color-ink);
  }

  .icon--muted { fill: var(--color-ink-muted); }
  .icon--subtle { fill: var(--color-ink-subtle); }
  .icon--accent { fill: var(--color-accent); }
  .icon--gain { fill: var(--color-gain); }
  .icon--loss { fill: var(--color-loss); }
  .icon--inverse { fill: var(--color-ink-inverse); }
  .icon--current { fill: currentColor; }
}