/* Icon library: global-skills/wordpress-component-build.md, "Icons".
   An element with the classes `c-icon c-icon--<name>` draws that icon from assets/icons/<name>.svg,
   in the text colour (currentColor), before its words (a paragraph, a button) or on its own (an empty group).
   Sizes: c-icon--sm | c-icon--md (default) | c-icon--lg, all relative to the element's font size; a component
   can set --c-icon-size itself. c-icon--after puts the icon after the words.
   The per-icon rules (`.c-icon--phone { --c-icon: var(--c-icons-phone) }`) and the root variables
   (`--c-icons-phone`, for a component's own ::before or ::after) are written by functions.php from the files in
   assets/icons/, so adding an SVG there adds the icon everywhere. */
.c-icon { --c-icon-size: 1.25em; align-items: center; display: flex; gap: .55em; }
span.c-icon { display: inline-flex; }
.c-icon--sm { --c-icon-size: 1em; }
.c-icon--md { --c-icon-size: 1.25em; }
.c-icon--lg { --c-icon-size: 2em; }
.c-icon--after::before,
.wp-block-button.c-icon--after > .wp-block-button__link::before { order: 1; }
.c-icon::before,
.wp-block-button.c-icon > .wp-block-button__link::before {
  -webkit-mask: var(--c-icon) center / contain no-repeat;
  mask: var(--c-icon) center / contain no-repeat;
  background-color: currentColor;
  content: "";
  flex: none;
  height: var(--c-icon-size);
  width: var(--c-icon-size);
}
/* A button carries the icon in its link, not beside it. */
.wp-block-button.c-icon { display: inline-block; }
.wp-block-button.c-icon::before { display: none; }
.wp-block-button.c-icon > .wp-block-button__link { align-items: center; display: inline-flex; gap: .55em; }