/* Lucide-Icons via SVG-Sprite (public/icons.svg).
   Markup: <svg class="icon" aria-hidden="true"><use href="/icons.svg?v=690#NAME"/></svg>
   Stroke/Fill werden hier auf dem konsumierenden <svg> deklariert; <use>
   creates a shadow tree that inherits via cascade. */

/* In @layer components wie jede andere components/*.css — sonst sind diese Regeln
   unlayered und schlagen JEDE layered Komponentenregel (unlayered > jeder Layer,
   unabhaengig von Spezifitaet). Insbesondere `button:has(> .icon)` wuerde sonst
   jeden layered `display`-Override auf Icon-Buttons aushebeln (z.B. ein gezieltes
   `display:none` zum Verstecken). Custom-Props bleiben unten unlayered (global). */
@layer components {

  .icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  /* Groessen-Variante. Der Regelfall ist `font-size` am Parent — .icon skaliert
     via 1em —, weshalb es hier bewusst KEINE sm/md/lg-Leiter gibt: nur `--sm`
     traegt zusaetzlich eine eigene stroke-width, und genau das kann der Parent
     nicht ausdruecken. Braucht eine Stelle eine weitere Stufe, gehoert sie an
     den Parent, nicht als neue Variante hierher. */
  .icon--sm { font-size: 14px; stroke-width: 2.25; }

  /* Button mit Icon + Text: inline-flex sorgt fuer konsistenten Gap und vertikale Achse. */
  button:has(> .icon) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

}

/* Reusable mask data URLs (Lucide-Pfade, ISC) fuer CSS-Pseudo-Icons: eine
   maskierte Flaeche statt <svg>, damit currentColor greift und das Element
   rotierbar bleibt (.history-chevron). Konsumiert wird die Mask direkt, ohne
   Traegerklasse — die vier Zeilen stehen jeweils beim Konsumenten:

     .my-thing {
       display: inline-block; width: 1em; height: 1em;
       background-color: currentColor;
       -webkit-mask: var(--icon-chevron-right) center / contain no-repeat;
               mask: var(--icon-chevron-right) center / contain no-repeat;
     }

   Konsumenten: page/tree-history.css (.history-chevron),
   editor/focus/focus-content.css, components/card-form/form-elements.css. */
:root {
  --icon-chevron-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
  --icon-check:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --icon-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2' ry='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
}