/*
 * Icon set (Flaticon PNGs, see comdata:credits for attribution) - replaces
 * the site's previous raw-emoji-in-<i class="icon"> convention (see
 * static/comdata/css/nav.css and static/comdata/css/list_view.css:.icon).
 *
 * Each icon is a PNG (Flaticon's free tier only offers PNG, no SVG)
 * applied as a CSS mask - the mask only reads the image's alpha channel, so
 * it inherits currentColor (follows the surrounding text/theme color)
 * regardless of the PNG's own baked-in colors. Use the highest-resolution
 * free PNG export (usually 512px) so the mask stays crisp. Sizing is
 * deliberately left to the existing per-context font-size rules
 * (.desktop-nav .icon, .bottom-nav-item .icon, .notification-bell,
 * .settings-menu-icon, ...) since width/height are in `em`, relative to
 * that font-size - nothing to change there.
 *
 * PNG files live in static/comdata/icons/ (sibling of this css/ folder,
 * hence the ../icons/ relative urls below).
 */

.icon-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.15em;
}

.icon-home       { -webkit-mask-image: url("../icons/home.56f8205850dc.png");       mask-image: url("../icons/home.56f8205850dc.png"); }
.icon-flag       { -webkit-mask-image: url("../icons/flag.c6c9e5686801.png");       mask-image: url("../icons/flag.c6c9e5686801.png"); }
.icon-search     { -webkit-mask-image: url("../icons/search.7e748f15556d.png");     mask-image: url("../icons/search.7e748f15556d.png"); }
.icon-note       { -webkit-mask-image: url("../icons/note.528e2946f76a.png");       mask-image: url("../icons/note.528e2946f76a.png"); }
.icon-motorcycle { -webkit-mask-image: url("../icons/motorcycle.e4e389bd8044.png"); mask-image: url("../icons/motorcycle.e4e389bd8044.png"); }
.icon-bell       { -webkit-mask-image: url("../icons/bell.d8d99b40c3cf.png");       mask-image: url("../icons/bell.d8d99b40c3cf.png"); }
.icon-plus       { -webkit-mask-image: url("../icons/plus.cf050959552e.png");       mask-image: url("../icons/plus.cf050959552e.png"); }
.icon-settings   { -webkit-mask-image: url("../icons/settings.f447424bac7f.png");   mask-image: url("../icons/settings.f447424bac7f.png"); }
.icon-key        { -webkit-mask-image: url("../icons/key.6afef1c1af9b.png");        mask-image: url("../icons/key.6afef1c1af9b.png"); }
.icon-lock       { -webkit-mask-image: url("../icons/lock.f0f3f016054c.png");       mask-image: url("../icons/lock.f0f3f016054c.png"); }
.icon-unlock     { -webkit-mask-image: url("../icons/unlock.d690490ade25.png");     mask-image: url("../icons/unlock.d690490ade25.png"); }
.icon-hand       { -webkit-mask-image: url("../icons/hand.47452acbbf67.png");       mask-image: url("../icons/hand.47452acbbf67.png"); }
.icon-reload     { -webkit-mask-image: url("../icons/reload.3da66fa78d7a.png");     mask-image: url("../icons/reload.3da66fa78d7a.png"); }

/* Icône du bouton "Logger" (profile.html, rangée de 3 boutons du profil,
   renvoie vers accounts:my_loggers). Aussi injectée à l'exécution par l'app
   Android dans l'en-tête de cette même page (#logger-device-actions, voir
   SimpleLoggerAndroid/WebFragment.java, qui ajoute #androidDeviceLogo),
   remplaçant l'ancien raw emoji 📟. */
.icon-device     { -webkit-mask-image: url("../icons/device.d988a8510737.png");     mask-image: url("../icons/device.d988a8510737.png"); }

/* Bouton crayon "modifier la photo" (accounts/profile.html, ancré en haut à
   droite de l'avatar). PNG à fournir (même convention Flaticon que les
   autres icônes de ce fichier) dans static/comdata/icons/edit.png. */
.icon-edit       { -webkit-mask-image: url("../icons/edit.84139d709a98.png");       mask-image: url("../icons/edit.84139d709a98.png"); }