/*
 * Book-wide term-icon system.
 *
 * The inline term icons live at `images/icon-*.svg` (uniform line icons,
 * viewBox 0 0 24 24). They are rendered as CSS *masks*, not <img> elements, so
 * they inherit the surrounding text color and adapt to the light/dark theme
 * automatically.
 *
 * WHY MASKS (and not <img>): an external SVG referenced through <img src=...>
 * does NOT inherit the host document's CSS `color`, so the icons'
 * `stroke="currentColor"` would resolve to black on every theme. Using each SVG
 * as a `mask-image` instead — with `background-color: currentColor` painting the
 * masked shape — makes the glyph take the page's text color, so it renders
 * correctly on both the light and dark mdBook themes with no per-page markup.
 *
 * USAGE (in Markdown — mdBook renders inline HTML):
 *     <span class="ticon ticon-mailbox" role="img" aria-label="mailbox"></span>
 * The base `.ticon` class sizes/aligns; the `ticon-<term>` modifier selects the
 * glyph. Applying these across the book is a later phase; this file only
 * establishes the system.
 */

.ticon {
    display: inline-block;
    width: 1em;                 /* square viewBox → 1em box matches text size */
    height: 1em;
    vertical-align: -0.125em;   /* nudge the glyph onto the text baseline */
    margin-right: 0.15em;       /* small gap so it sits nicely before a word */
    background-color: currentColor; /* the mask is painted in the text color */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*
 * One modifier per term. The mask URL is relative to this stylesheet's built
 * location (`book/css/…`), so it points up into `book/images/`.
 */
.ticon-address    { -webkit-mask-image: url(../images/icon-address.svg);    mask-image: url(../images/icon-address.svg); }
.ticon-mailbox    { -webkit-mask-image: url(../images/icon-mailbox.svg);    mask-image: url(../images/icon-mailbox.svg); }
.ticon-frombox    { -webkit-mask-image: url(../images/icon-frombox.svg);    mask-image: url(../images/icon-frombox.svg); }
.ticon-alias      { -webkit-mask-image: url(../images/icon-alias.svg);      mask-image: url(../images/icon-alias.svg); }
.ticon-domain     { -webkit-mask-image: url(../images/icon-domain.svg);     mask-image: url(../images/icon-domain.svg); }
.ticon-mail       { -webkit-mask-image: url(../images/icon-mail.svg);       mask-image: url(../images/icon-mail.svg); }
.ticon-postoffice { -webkit-mask-image: url(../images/icon-postoffice.svg); mask-image: url(../images/icon-postoffice.svg); }
.ticon-postmaster { -webkit-mask-image: url(../images/icon-postmaster.svg); mask-image: url(../images/icon-postmaster.svg); }
.ticon-pop        { -webkit-mask-image: url(../images/icon-pop.svg);        mask-image: url(../images/icon-pop.svg); }
.ticon-imap       { -webkit-mask-image: url(../images/icon-imap.svg);       mask-image: url(../images/icon-imap.svg); }
.ticon-daemon     { -webkit-mask-image: url(../images/icon-daemon.svg);     mask-image: url(../images/icon-daemon.svg); }
.ticon-hash       { -webkit-mask-image: url(../images/icon-hash.svg);       mask-image: url(../images/icon-hash.svg); }
.ticon-sol        { -webkit-mask-image: url(../images/icon-sol.svg);        mask-image: url(../images/icon-sol.svg); }
.ticon-stamp      { -webkit-mask-image: url(../images/icon-stamp.svg);      mask-image: url(../images/icon-stamp.svg); }
.ticon-pin        { -webkit-mask-image: url(../images/icon-pin.svg);        mask-image: url(../images/icon-pin.svg); }
.ticon-campaign   { -webkit-mask-image: url(../images/icon-campaign.svg);   mask-image: url(../images/icon-campaign.svg); }
