/*
 * .c-icon: a 1.5rem stroke icon from landing/assets/img/icons/*.svg, painted with currentColor
 * through a CSS mask, so one file serves every color and state. Decorative: put aria-hidden="true"
 * on it, and give the control an accessible name (visible text, or .u-visually-hidden text).
 *
 *   <span class="c-icon c-icon--search" aria-hidden="true"></span>
 */
.c-icon {
  --_icon: none;
  display: inline-block;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background: currentColor;
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
}

.c-icon--whatsapp {
  --_icon: url('../../img/icons/whatsapp.svg');
}
.c-icon--map-pin {
  --_icon: url('../../img/icons/map-pin.svg');
}
.c-icon--instagram {
  --_icon: url('../../img/icons/instagram.svg');
}
.c-icon--facebook {
  --_icon: url('../../img/icons/facebook.svg');
}
.c-icon--share {
  --_icon: url('../../img/icons/share.svg');
}
.c-icon--search {
  --_icon: url('../../img/icons/search.svg');
}
.c-icon--menu {
  --_icon: url('../../img/icons/menu.svg');
}
.c-icon--close {
  --_icon: url('../../img/icons/close.svg');
}
.c-icon--arrow-right {
  --_icon: url('../../img/icons/arrow-right.svg');
}
.c-icon--check {
  --_icon: url('../../img/icons/check.svg');
}
.c-icon--info {
  --_icon: url('../../img/icons/info.svg');
}
.c-icon--alert {
  --_icon: url('../../img/icons/alert.svg');
}

/* Windows high contrast: masked icons must follow the system text color. */
@media (forced-colors: active) {
  .c-icon {
    forced-color-adjust: none;
    background: CanvasText;
  }
}