/* ============================================================
   icons.css — the PNG icon set from img/icon, as maskable glyphs
   ============================================================ */

/* The icons are black silhouettes on transparency, so they are drawn as a
   *mask* over `currentColor` rather than as an <img>: an <img> would be black
   in both themes, and black is not a token. As a mask each one inherits the
   colour of whatever it sits in — the accent on a settings row, --text-dim on
   a card's menu button, --on-accent on a primary button — and follows a theme
   switch for free, with no JS and no second file per palette.

   Sized in `em`, so an icon is as big as the text around it and a rule that
   sets font-size sizes both. Every source file is square, and `contain` keeps
   it that way.

   Deliberately `.ico`, not `.icon`: `.icon-only` already means "a button with
   no label" on .btn-sm, and two unrelated things called icon-something in the
   same markup is a trap for whoever reads it next. */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* An icon leading a button's label, where the gap is not already a flex gap. */
.ico.lead { margin-right: 0.45em; }

/* Paths are relative to this file, not to the document. */
.ico-d20     { -webkit-mask-image: url('../../img/icon/d20.png');     mask-image: url('../../img/icon/d20.png'); }
.ico-dice    { -webkit-mask-image: url('../../img/icon/dice.png');    mask-image: url('../../img/icon/dice.png'); }
.ico-dots    { -webkit-mask-image: url('../../img/icon/dots.png');    mask-image: url('../../img/icon/dots.png'); }
.ico-hide    { -webkit-mask-image: url('../../img/icon/hide.png');    mask-image: url('../../img/icon/hide.png'); }
.ico-home    { -webkit-mask-image: url('../../img/icon/home.png');    mask-image: url('../../img/icon/home.png'); }
.ico-info    { -webkit-mask-image: url('../../img/icon/info.png');    mask-image: url('../../img/icon/info.png'); }
.ico-map     { -webkit-mask-image: url('../../img/icon/treasure-map.png'); mask-image: url('../../img/icon/treasure-map.png'); }
.ico-moon    { -webkit-mask-image: url('../../img/icon/moon.png');    mask-image: url('../../img/icon/moon.png'); }
.ico-plus    { -webkit-mask-image: url('../../img/icon/plus.png');    mask-image: url('../../img/icon/plus.png'); }
.ico-setting { -webkit-mask-image: url('../../img/icon/setting.png'); mask-image: url('../../img/icon/setting.png'); }
.ico-show    { -webkit-mask-image: url('../../img/icon/show.png');    mask-image: url('../../img/icon/show.png'); }
.ico-sun     { -webkit-mask-image: url('../../img/icon/sun.png');     mask-image: url('../../img/icon/sun.png'); }
.ico-trash   { -webkit-mask-image: url('../../img/icon/trash.png');   mask-image: url('../../img/icon/trash.png'); }

/* The eight schools of magic: `.ico ico-school ico-school-<name>`
   (schoolIcon() in spells.js builds one). Unlike the icons above these carry
   their own colour — a school is read by its tint as much as its glyph — so
   each sets `color` to its --school-* token and names its glyph in
   --school-glyph; the shared rule does the rest.

   The glyph is drawn on ::before rather than the element itself — cut by a
   second mask layer, a gradient, so it fades to 40% on its left side — which
   leaves the element unmasked. A mask clips everything inside the element it's
   on, so this is what lets something laid over an icon (the spell card's grime
   patch, spells.css) spill past the glyph's strokes. */
.ico-school {
  position: relative;
  background: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.ico-school::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--school-glyph), linear-gradient(to right, rgba(0, 0, 0, 0.4), #000);
          mask-image: var(--school-glyph), linear-gradient(to right, rgba(0, 0, 0, 0.4), #000);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ico-school-abjuration    { color: var(--school-abjuration);    --school-glyph: url('../../img/icon/spells/school-abjuration.svg'); }
.ico-school-conjuration   { color: var(--school-conjuration);   --school-glyph: url('../../img/icon/spells/school-conjuration.svg'); }
.ico-school-divination    { color: var(--school-divination);    --school-glyph: url('../../img/icon/spells/school-divination.svg'); }
.ico-school-enchantment   { color: var(--school-enchantment);   --school-glyph: url('../../img/icon/spells/school-enchantment.svg'); }
.ico-school-evocation     { color: var(--school-evocation);     --school-glyph: url('../../img/icon/spells/school-evocation.svg'); }
.ico-school-illusion      { color: var(--school-illusion);      --school-glyph: url('../../img/icon/spells/school-illusion.svg'); }
.ico-school-necromancy    { color: var(--school-necromancy);    --school-glyph: url('../../img/icon/spells/school-necromancy.svg'); }
.ico-school-transmutation { color: var(--school-transmutation); --school-glyph: url('../../img/icon/spells/school-transmutation.svg'); }

/* The plus is a hairline cross that reads thin next to bold button text, and
   the d20's engraved facets need room to separate — as do the treasure map's
   folds. All nudged rather than the type around them being changed. */
.ico-plus { width: 0.85em; height: 0.85em; }
.ico-d20  { width: 1.15em; height: 1.15em; }
.ico-map  { width: 1.12em; height: 1.12em; }