/*
 * Sizing for the shared SVG sprite (templates/_icon_sprite.html).
 *
 * Extracted from main.css for the same reason fonts.css was: the sprite is
 * used by both the shop front and the back office, and the admin does not
 * load main.css. Including the sprite without this file gives every symbol
 * its natural size — the confirmation queue rendered a phone handset roughly
 * 100px tall next to 14px text, which is what a browser showed and a
 * stylesheet review would not have.
 *
 * Sized in em on purpose: an icon is punctuation for the text beside it, so
 * it should scale with that text rather than hold a pixel size of its own.
 * DESIGN.md section 6.
 */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  margin-inline-end: 0.35em;
  flex-shrink: 0;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.2em;
}

/* For an icon that follows its label — "Continue shopping →" — rather than
   leading it. */
.icon--trailing {
  margin-inline-end: 0;
  margin-inline-start: 0.35em;
}