/* Monster Hunter Rise icon styles - generated by build_icons.py, do not edit.
 *
 * Atlas sprites are greyscale on alpha. In game the sprite is multiplied with a
 * tint colour, so a plain mask would drop the black outline; .mhr-icon layers a
 * tinted silhouette under a multiply-blended copy to reproduce it.
 *
 * The tint RGB values are NOT in the game files - they live in
 * snow.gui.SnowGuiCommonUtility.Icon. The values below are INFERRED from what
 * each index is used for (the comment on each line gives the evidence) and are
 * close but not exact. Run tools/dump_icon_colors.lua under REFramework to
 * replace them with the values the game actually uses.
 */
:root {
  --mhr-icon-size: 48px;
  --mhr-icon-color-01: #e8e4da;  /* bone / ice / neutral - Jumbo Bone, Snow Herb, Normal Ammo */
  --mhr-icon-color-02: #8a9099;  /* iron grey - Iron Ore, Coal, Basarios Shell */
  --mhr-icon-color-03: #c87a4a;  /* copper brown - Fucium Ore, Anjanath parts */
  --mhr-icon-color-04: #e8c63a;  /* yellow - Thunder Ammo, Flash Bomb, Barrel Bomb */
  --mhr-icon-color-05: #e89a3c;  /* amber - Paralysis Ammo, Honey, Firecell Stone */
  --mhr-icon-color-06: #a83a4a;  /* dragon / blast - Dragon Ammo, Blast Coating */
  --mhr-icon-color-07: #e85a3a;  /* fire - Flaming Ammo, Flame Sac, Fire Dragon Scale */
  --mhr-icon-color-08: #7ec850;  /* green - Potion, Herb, Herbivore Egg  [verified] */
  --mhr-icon-color-09: #a96fd0;  /* poison - Poison Ammo, Poison Sac, Purplefur */
  --mhr-icon-color-10: #5a6b8c;  /* slate - Exhaust Ammo, Risen/Abyssal dragon parts */
  --mhr-icon-color-11: #4a9fe0;  /* water - Water Ammo, Antidote, Machalite Ore */
  --mhr-icon-color-12: #6fd5e0;  /* ice / sleep - Freeze Ammo, Sleep Ammo, Block of Ice */
  --mhr-icon-color-13: #a97c50;  /* earth brown - Almudron parts, Bone Scrap */
  --mhr-icon-color-51: #e0407a;  /* affliction - Afflicted Bone, Pelt, Blood */

  /* equipment rarity, RareTypes Ra1=0 .. Ra10=9 - also inferred */
  --mhr-rarity-00: #c2c2c8;  /* R1 */
  --mhr-rarity-01: #e6e6ea;  /* R2 */
  --mhr-rarity-02: #86c06a;  /* R3 */
  --mhr-rarity-03: #5ea9d8;  /* R4 */
  --mhr-rarity-04: #7b76d4;  /* R5 */
  --mhr-rarity-05: #b06ac8;  /* R6 */
  --mhr-rarity-06: #d46a9e;  /* R7 */
  --mhr-rarity-07: #d95f5f;  /* R8 */
  --mhr-rarity-08: #e09a4a;  /* R9 */
  --mhr-rarity-09: #d8c860;  /* R10 */
}

.mhr-icon {
  display: inline-block;
  position: relative;
  width: var(--mhr-icon-size);
  aspect-ratio: 1;
  vertical-align: middle;
  background-color: var(--mhr-tint, #b8b8b8);
  -webkit-mask: var(--mhr-src) center / contain no-repeat;
          mask: var(--mhr-src) center / contain no-repeat;
}

/* multiply the greyscale back over the tint so outlines survive */
.mhr-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mhr-src) center / contain no-repeat;
  mix-blend-mode: multiply;
}

/* full-colour icons (monsters, endemic life) need no tinting */
.mhr-icon--plain {
  background: var(--mhr-src) center / contain no-repeat;
  -webkit-mask: none;
          mask: none;
}
.mhr-icon--plain::after { content: none; }

/* Nav glyphs run at 17px, where the sprite's own black outline eats most
   of the shape - so those drop the multiply layer and render as one flat
   silhouette in the surrounding text colour. */
.mhr-icon--flat {
  background-color: currentColor;
}
.mhr-icon--flat::after { content: none; }

.mhr-nav-item .mhr-icon {
  --mhr-icon-size: 17px;
  margin-right: .45rem;
  opacity: .75;
}
.mhr-nav-item.is-active .mhr-icon { opacity: 1; }

/* The heading has room for the detail, so it keeps the greyscale multiply
   and only borrows the text colour as its tint. */
.mhr-list-title .mhr-icon {
  --mhr-icon-size: 28px;
  --mhr-tint: currentColor;
  margin-right: .55rem;
  position: relative;
  top: -2px;
}

/* In a table row the icon sits ahead of the name. Deliberately inline:
   the name cell also holds a text node, the search <mark> and .mhr-dup, and
   making the cell a flex container would turn each of those into its own
   item - a highlighted match would break away from the rest of the word. */
.mhr-name .mhr-icon {
  --mhr-icon-size: 22px;
  margin-right: .5rem;
  position: relative;
  top: -1px;
}

@media (prefers-reduced-motion: no-preference) {
  .mhr-name .mhr-icon { transition: transform .12s ease; }
  tr:hover .mhr-name .mhr-icon { transform: scale(1.15); }
}

.mhr-tint-01 { --mhr-tint: var(--mhr-icon-color-01); }
.mhr-tint-02 { --mhr-tint: var(--mhr-icon-color-02); }
.mhr-tint-03 { --mhr-tint: var(--mhr-icon-color-03); }
.mhr-tint-04 { --mhr-tint: var(--mhr-icon-color-04); }
.mhr-tint-05 { --mhr-tint: var(--mhr-icon-color-05); }
.mhr-tint-06 { --mhr-tint: var(--mhr-icon-color-06); }
.mhr-tint-07 { --mhr-tint: var(--mhr-icon-color-07); }
.mhr-tint-08 { --mhr-tint: var(--mhr-icon-color-08); }
.mhr-tint-09 { --mhr-tint: var(--mhr-icon-color-09); }
.mhr-tint-10 { --mhr-tint: var(--mhr-icon-color-10); }
.mhr-tint-11 { --mhr-tint: var(--mhr-icon-color-11); }
.mhr-tint-12 { --mhr-tint: var(--mhr-icon-color-12); }
.mhr-tint-13 { --mhr-tint: var(--mhr-icon-color-13); }
.mhr-tint-51 { --mhr-tint: var(--mhr-icon-color-51); }

.mhr-rare-00 { --mhr-tint: var(--mhr-rarity-00); }
.mhr-rare-01 { --mhr-tint: var(--mhr-rarity-01); }
.mhr-rare-02 { --mhr-tint: var(--mhr-rarity-02); }
.mhr-rare-03 { --mhr-tint: var(--mhr-rarity-03); }
.mhr-rare-04 { --mhr-tint: var(--mhr-rarity-04); }
.mhr-rare-05 { --mhr-tint: var(--mhr-rarity-05); }
.mhr-rare-06 { --mhr-tint: var(--mhr-rarity-06); }
.mhr-rare-07 { --mhr-tint: var(--mhr-rarity-07); }
.mhr-rare-08 { --mhr-tint: var(--mhr-rarity-08); }
.mhr-rare-09 { --mhr-tint: var(--mhr-rarity-09); }