/* The shared icon primitive's recipe, shipped in the library that owns the component (GameClientCore/
   Components/UI/AppIcon.razor) and served from its RCL wwwroot, so a game board can reach the component and the
   two rules it needs together. index.html links it alongside the other framework chrome.

   Where it sits in the cascade does not matter: every surface that resizes or re-tones an icon does so through a
   compounded or descendant selector (.app-nav__item .app-icon, .table-header .app-icon.table-header__art, …),
   which outranks these single-class rules whatever the source order. */

/* Shared app icon (GameClientCore/Components/UI/AppIcon.razor): a served svg that scales with the surrounding
   font-size. */
.app-icon {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* An `icon-` glyph, painted as a mask over a currentColor fill so it genuinely takes the text colour of its
   context — which is what the asset's fill="currentColor" promises and what an <img> reference cannot deliver
   (the referenced document resolves currentColor against its own initial colour, i.e. black). The shell's dark
   chrome and the room's white one draw the same file and each gets its own ink. */
.app-icon--glyph {
    background-color: currentColor;
    -webkit-mask-image: var(--app-icon-src);
            mask-image: var(--app-icon-src);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}