/*
 * Icons for page bodies. The icon is a file in assets/icons/ used as a
 * mask, so it takes the text colour:
 *
 *   <span class="yb-icon yb-icon--phone" aria-hidden="true"></span>
 *
 * In a round badge (blue circle, white icon; --yellow for yellow/blue):
 *
 *   <span class="yb-icon-badge" aria-hidden="true"><span class="yb-icon yb-icon--phone"></span></span>
 *
 * To add an icon: put the SVG in assets/icons/ and add one line below.
 * Icons are Lucide (ISC licence), standing in for the old theme's icon font.
 * The service-* icons are the site's own SVGs from the front page, carried
 * over from the old page content.
 */
.yb-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--yb-icon) center / contain no-repeat;
  mask: var(--yb-icon) center / contain no-repeat;
  vertical-align: middle;
}

.yb-icon--arrow-down-left { --yb-icon: url("../../icons/arrow-down-left.svg"); }
.yb-icon--arrow-left { --yb-icon: url("../../icons/arrow-left.svg"); }
.yb-icon--arrow-right { --yb-icon: url("../../icons/arrow-right.svg"); }
.yb-icon--arrow-up-right { --yb-icon: url("../../icons/arrow-up-right.svg"); }
.yb-icon--asterisk { --yb-icon: url("../../icons/asterisk.svg"); }
.yb-icon--award { --yb-icon: url("../../icons/award.svg"); }
.yb-icon--blend { --yb-icon: url("../../icons/blend.svg"); }
.yb-icon--book-open { --yb-icon: url("../../icons/book-open.svg"); }
.yb-icon--calendar { --yb-icon: url("../../icons/calendar.svg"); }
.yb-icon--check { --yb-icon: url("../../icons/check.svg"); }
.yb-icon--chevron-down { --yb-icon: url("../../icons/chevron-down.svg"); }
.yb-icon--chevron-left { --yb-icon: url("../../icons/chevron-left.svg"); }
.yb-icon--chevron-right { --yb-icon: url("../../icons/chevron-right.svg"); }
.yb-icon--earth { --yb-icon: url("../../icons/earth.svg"); }
.yb-icon--external-link { --yb-icon: url("../../icons/external-link.svg"); }
.yb-icon--facebook { --yb-icon: url("../../icons/facebook.svg"); }
.yb-icon--file-text { --yb-icon: url("../../icons/file-text.svg"); }
.yb-icon--graduation-cap { --yb-icon: url("../../icons/graduation-cap.svg"); }
.yb-icon--hand-heart { --yb-icon: url("../../icons/hand-heart.svg"); }
.yb-icon--handshake { --yb-icon: url("../../icons/handshake.svg"); }
.yb-icon--mail { --yb-icon: url("../../icons/mail.svg"); }
.yb-icon--instagram { --yb-icon: url("../../icons/instagram.svg"); }
.yb-icon--layers { --yb-icon: url("../../icons/layers.svg"); }
.yb-icon--linkedin { --yb-icon: url("../../icons/linkedin.svg"); }
.yb-icon--map-pin { --yb-icon: url("../../icons/map-pin.svg"); }
.yb-icon--minus { --yb-icon: url("../../icons/minus.svg"); }
.yb-icon--phone { --yb-icon: url("../../icons/phone.svg"); }
.yb-icon--plus { --yb-icon: url("../../icons/plus.svg"); }
.yb-icon--quote { --yb-icon: url("../../icons/quote.svg"); }
.yb-icon--refresh-cw { --yb-icon: url("../../icons/refresh-cw.svg"); }
.yb-icon--service-collaborative { --yb-icon: url("../../icons/service-collaborative.svg"); }
.yb-icon--service-flexible { --yb-icon: url("../../icons/service-flexible.svg"); }
.yb-icon--service-practical { --yb-icon: url("../../icons/service-practical.svg"); }
.yb-icon--service-tailored { --yb-icon: url("../../icons/service-tailored.svg"); }
.yb-icon--smile { --yb-icon: url("../../icons/smile.svg"); }
.yb-icon--star { --yb-icon: url("../../icons/star.svg"); }
.yb-icon--users { --yb-icon: url("../../icons/users.svg"); }
.yb-icon--user { --yb-icon: url("../../icons/user.svg"); }

.yb-icon-badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: var(--yb-color-primary);
  color: var(--yb-color-white);
  font-size: 19px;
}

.yb-icon-badge--yellow {
  width: 46px;
  height: 46px;
  background: var(--yb-color-accent);
  color: var(--yb-color-primary);
  font-size: 16px;
}

.yb-icon-badge--large {
  width: 60px;
  height: 60px;
  font-size: 24px;
}