/*
 * Linien-Icons als CSS-Maske, damit sie die Schriftfarbe ihres Typs annehmen.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 */

/* Linien-Icons werden als Maske eingefärbt */
.spo-tile-icon--mask {
    display: block;
    /*
     * Die Kantenlänge gehört der Variante und steht bei ihr: 65-button.css für
     * die Buttons, 40-personas.css für den Reiter. Der Rückfall hier — 24px —
     * ist der Wert des Designs für den blauen und den hellen Button und für die
     * Meldung; nur die orange Fläche (28) und die Sand-Zeile (30) weichen ab.
     *
     * Sie stand einmal als Maß im style-Attribut (ICON_PIXELS je Elementklasse).
     * Dort war sie unantastbar: auf dem Telefon trägt das Design kleinere Icons,
     * und gegen Inline kommt keine Media-Query an.
     */
    width: var(--spo-icon-size, 24px);
    height: var(--spo-icon-size, 24px);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}