/* Single-colour SVG glyphs for the app icons (the original private icon font is not available locally).
   Every .icon-fontastic-* glyph is a single-colour SVG mask filled with currentColor, so the icons take
   the text colour: yellow in the black .mp-icon circles, white in the navy sidebar (yellow when active),
   #181716 in buttons and on light backgrounds (BRAND §2 contrast rules). Glyphs live in assets/icons/*.svg. */

[class^="icon-fontastic-"]::before,
[class*=" icon-fontastic-"]::before,
[class^="icon-fantastic-"]::before,
[class*=" icon-fantastic-"]::before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--mp-icon) center / contain no-repeat;
  mask: var(--mp-icon) center / contain no-repeat;
}

.icon-fontastic-search { --mp-icon: url("/assets/icons/search.svg"); }
.icon-fontastic-molecules { --mp-icon: url("/assets/icons/molecules.svg"); }
.icon-fontastic-battery { --mp-icon: url("/assets/icons/battery.svg"); }
.icon-fontastic-synthesis { --mp-icon: url("/assets/icons/synthesis.svg"); }
.icon-fontastic-catalysis { --mp-icon: url("/assets/icons/catalysis.svg"); }
.icon-fontastic-nanoporous { --mp-icon: url("/assets/icons/nanoporous.svg"); }
.icon-fontastic-phase-diagram { --mp-icon: url("/assets/icons/phase-diagram.svg"); }
.icon-fontastic-pourbaix-diagram { --mp-icon: url("/assets/icons/pourbaix-diagram.svg"); }
.icon-fontastic-toolkit { --mp-icon: url("/assets/icons/toolkit.svg"); }
.icon-fontastic-reaction { --mp-icon: url("/assets/icons/reaction.svg"); }
.icon-fontastic-interface { --mp-icon: url("/assets/icons/interface.svg"); }
.icon-fontastic-xas { --mp-icon: url("/assets/icons/xas.svg"); }
.icon-fontastic-contribs { --mp-icon: url("/assets/icons/contribs.svg"); }
.icon-fontastic-apps { --mp-icon: url("/assets/icons/apps.svg"); }
.icon-fontastic-table { --mp-icon: url("/assets/icons/table.svg"); }
.icon-fontastic-docs { --mp-icon: url("/assets/icons/docs.svg"); }
.icon-fontastic-dashboard { --mp-icon: url("/assets/icons/dashboard.svg"); }
.icon-fontastic-thermo { --mp-icon: url("/assets/icons/thermo.svg"); }
.icon-fontastic-magnetism { --mp-icon: url("/assets/icons/magnetism.svg"); }
.icon-fontastic-compare { --mp-icon: url("/assets/icons/compare.svg"); }
.icon-fontastic-alloy { --mp-icon: url("/assets/icons/alloy.svg"); }
.icon-fontastic-rfb { --mp-icon: url("/assets/icons/rfb.svg"); }
.icon-fontastic-struct-predictor { --mp-icon: url("/assets/icons/struct-predictor.svg"); }
.icon-fontastic-rad { --mp-icon: url("/assets/icons/rad.svg"); }
.icon-fantastic-loading { --mp-icon: url("/assets/icons/loading.svg"); }
.icon-fantastic-forum { --mp-icon: url("/assets/icons/forum.svg"); }
/* Reverse Pourbaix header/card glyph: faint 4x4 grid, two stability diagonals, one solid cell
   (ASSETS reverse_pourbaix_overview.png) — not the Pourbaix Diagram fan */
.icon-fontastic-reverse-pourbaix,
.mp-glyph-reverse-pourbaix { --mp-icon: url("/assets/icons/reverse-pourbaix.svg"); }

/* periodic-table glyphs are wide (36:19): keep the 1em height, widen the box */
.icon-fontastic-periodic-table-squares { --mp-icon: url("/assets/icons/periodic-table-squares.svg"); }
.icon-fontastic-periodic-table-solid { --mp-icon: url("/assets/icons/periodic-table-solid.svg"); }
.icon-fontastic-periodic-table-squares::before,
.icon-fontastic-periodic-table-solid::before {
  width: 1.15em;
  height: 0.62em;
  vertical-align: middle;
}

/* the loading glyph spins like the original font icon */
.icon-fantastic-loading::before { animation: mp-icon-spin 1s linear infinite; }
@keyframes mp-icon-spin { to { transform: rotate(360deg); } }