/* Paint an external SVG icon with the current text color through a CSS mask.
   Serve the SVG files over http(s) from the page's own origin (or with CORS headers):
   a mask that fails to load hides the element. */

.icon {
  display: inline-block;          /* a plain span has no width or height */
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  background-color: currentColor; /* the visible color comes from here */
  mask-position: center;
  mask-repeat: no-repeat;         /* the default repeats the image */
  mask-size: contain;             /* the default uses the file's own size */
}

.icon-house { mask-image: url("house-mask.svg"); }         /* prepared: white shapes cut out */
.icon-house-raw { mask-image: url("house-original.svg"); } /* untouched download, for comparison */
.icon-parcel { mask-image: url("parcel-ai-flat.svg"); }    /* works as it was downloaded */

/* Forced colors (Windows contrast themes) replace background colors,
   which would hide the icon. System colors are left alone. */
@media (forced-colors: active) {
  .icon { background-color: CanvasText; }
  a .icon { background-color: LinkText; }
  button .icon { background-color: ButtonText; }
}

/* Browsers leave out backgrounds when printing unless asked not to.
   Chrome and Edge before version 136 only know the -webkit- name. */
@media print {
  .icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}