/* ===== OO Icon =====
   Basis-Styles für die <Icon>-Komponente (Material Symbols Outlined).
   Das Icon bleibt ein Inline-Element; vertical-align richtet es im Textfluss aus.
   In Flex-Containern wird vertical-align ignoriert – kein Konflikt.
   ==================== */

.oo-icon {
    font-family: 'Material Symbols', 'Material Symbols Outlined', sans-serif!important;
    /* Ligatur-Schutz: geerbte Textformatierung (fett, kursiv, Großschreibung, Sperrung, Umbruch)
       würde den Ligatur-Namen zerstören und statt des Icons den Text anzeigen. */
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    overflow-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    /* Bewährter Trick (Font Awesome, Lucide, etc.): negativer Wert senkt die Icon-Baseline,
       wodurch die Glyph-Mitte optisch auf Zeilenmitte wandert.
       In Flex-Containern wird vertical-align komplett ignoriert → kein Einfluss auf Buttons/Badges. */
    vertical-align: -0.125em;
}

/* Explizite Icon-Größen haben eine eigene Staffelung: Die allgemeinen Textgrößen
   für XS, SM und MD sind gleich. Ohne Size bleibt die geerbte Schriftgröße erhalten.
   !important überschreibt die allgemeinen oo-size-Regeln; die Schrift-Skalierung bleibt aktiv. */
.oo-icon.oo-size-xxxs { font-size: calc(0.75rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-xxs { font-size: calc(0.875rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-xs { font-size: calc(1rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-sm { font-size: calc(1.25rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-md { font-size: calc(1.5rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-lg { font-size: calc(1.75rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-xl { font-size: calc(2rem * var(--oo-font-scale, 1)) !important; }