.icon {
  background-color: var(--icon-color, currentColor);
  block-size: var(--icon-size, 1rem);
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--icon-size, 1rem);
  mask-image: var(--svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--icon-size, 1rem);
  pointer-events: none;
  user-select: none;
}

img.icon {
  background: none;
}

.icon--loading {
  --svg: url("/assets/loading-b8fb367c.svg");
  animation: var(--animate-spin);
  animation-duration: 1s;
}

/****************************************************************
* Lucide (https://lucide.dev)
* Open-source icon library with a consistent style
*****************************************************************/
.icon--camera { --svg: url("/assets/camera-d0824639.svg"); }
.icon--check { --svg: url("/assets/check-1ace08fa.svg"); }
.icon--chevron-left { --svg: url("/assets/chevron-left-c0e2dc09.svg"); }
.icon--chevron-right { --svg: url("/assets/chevron-right-cefe893c.svg"); }
.icon--chevrons-up-down { --svg: url("/assets/chevrons-up-down-f4f3a04e.svg"); }
.icon--circle-alert { --svg: url("/assets/circle-alert-c59e0a27.svg"); }
.icon--circle-check { --svg: url("/assets/circle-check-eb15357f.svg"); }
.icon--circle-help { --svg: url("/assets/circle-help-3d7aa093.svg"); }
.icon--copy { --svg: url("/assets/copy-01e6c75f.svg"); }
.icon--download { --svg: url("/assets/download-e58535ee.svg"); }
.icon--ellipsis { --svg: url("/assets/ellipsis-ced9163f.svg"); }
.icon--minus { --svg: url("/assets/minus-45ea2d69.svg"); }
.icon--moon { --svg: url("/assets/moon-d3c54f2f.svg"); }
.icon--panel-left { --svg: url("/assets/panel-left-58d5a2c2.svg"); }
.icon--pencil { --svg: url("/assets/pencil-6cf7709e.svg"); }
.icon--search { --svg: url("/assets/search-dd48e95f.svg"); }
.icon--share { --svg: url("/assets/share-5540b3f5.svg"); }
.icon--trash { --svg: url("/assets/trash-dc3d7671.svg"); }
.icon--sun { --svg: url("/assets/sun-617e9d17.svg"); }
.icon--x { --svg: url("/assets/x-47ea5b4b.svg"); }

/****************************************************************
* Material (https://icon-sets.iconify.design) — P10.5 round 2
*
* Lucide has no filled check-circle and nothing in the shape of a gate, and the
* app's own vocabulary already borrows from davidnewkerk.com, which draws from
* the Material sets. Added by name, verbatim from Iconify, normalised to a 24px
* box so they mask identically to the Lucide set above:
*   mdi:check-circle-outline, mdi:check-circle  — the completion toggle (§5.1)
*   material-symbols:inbox-outline, mdi:gate,
*   material-symbols:rocket                     — the three emoji board headings
*****************************************************************/
.icon--check-circle-outline { --svg: url("/assets/check-circle-outline-0db5ee91.svg"); }
.icon--check-circle-filled { --svg: url("/assets/check-circle-filled-1fde1658.svg"); }
.icon--inbox { --svg: url("/assets/inbox-outline-486ee961.svg"); }
.icon--gate { --svg: url("/assets/gate-16f141b7.svg"); }
.icon--rocket { --svg: url("/assets/rocket-8acb933a.svg"); }