/* ==========================================================================
   Icons – Material Symbols Outlined

   Single source of truth fuer Icons in der App-UI und in Web-Templates.
   Die Web-Font wird in `templates/base.html` als Stylesheet geladen.

   Usage (HTML/JS):
     <span class="icon">edit</span>
     <span class="icon icon--sm icon--muted">close</span>
     <span class="icon icon--lg icon--primary">auto_awesome</span>

   Icon-Namen siehe https://fonts.google.com/icons
   ========================================================================== */

.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;          /* skaliert mit Eltern-Schriftgroesse */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: -0.2em;     /* baseline neben Text */
    user-select: none;
}

/* Groessen-Modifier (relativ zur Eltern-Schriftgroesse) */
.icon--sm { font-size: 1em; }
.icon--lg { font-size: 1.5em; }
.icon--xl { font-size: 2em; }

/* Farb-Modifier (Tokens) */
.icon--primary { color: var(--color-primary); }
.icon--muted   { color: var(--color-text-muted); }
.icon--danger  { color: var(--color-danger); }
.icon--success { color: var(--color-success); }
.icon--warning { color: var(--color-warning); }

/* Inline-Icon mit kleinem Abstand zum nachfolgenden Text */
.icon--leading { margin-right: 0.35em; }
.icon--trailing { margin-left: 0.35em; }