/* =====================================================================
   BauWERK Core — Zeichen und Zustand
   Fassung 1.0, 03.09.2026. Gehört zu bauwerk-icons.js, siehe ADR-009.

   Diese Datei macht aus den Zeichnungen einen bedienbaren Knopf. Zwei
   Variablen steuern alles:

     --bw-icon-leitfarbe   die Leitfarbe der App nach ADR-008
     --bw-icon-akzent      was das handelnde Teil des Zeichens gerade führt

   Farbe ist Kennung, Tönung ist Zustand: das handelnde Teil trägt die
   Leitfarbe immer, die getönte Fläche kommt beim Zeigen dazu, der Rahmen
   beim Gewähltsein. `.bw-icon-button--gedaempft` macht eine Leiste
   einfarbig, wo die Farbe schon etwas anderes bedeutet.

   Die Größen stehen in drei Stufen (16 / 20 / 24 px) und kommen aus den
   Tokens — siehe unten und ADR-009.
   ===================================================================== */

.bw-icon-button {
  --bw-icon-leitfarbe: var(--bw-color-accent, #4d6bbb);
  --bw-icon-tint: var(--bw-color-accent-surface, #eef3ff);
  /* Die Leitfarbe ist immer zu sehen: sie sagt, in welcher App man ist.
     Sie war zuerst dem Zeigen und Gewähltsein vorbehalten — das war falsch
     herum, denn dann trug in einer ruhenden Leiste genau ein Knopf Farbe,
     nämlich der gewählte, und das las sich wie ein Fehler statt wie eine
     Ordnung. Farbe ist Kennung, Tönung ist Zustand. */
  --bw-icon-akzent: var(--bw-icon-leitfarbe);

  display: grid;
  place-items: center;
  width: 33px;
  height: 29px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--bw-radius-sm, 5px);
  background: none;
  color: var(--bw-color-text, #171a1d);
  cursor: pointer;
  transition: background var(--bw-motion-fast, 120ms) ease,
              border-color var(--bw-motion-fast, 120ms) ease;
}
/* ---------------------------------------------------------------------
   Die Größenleiter — drei Stufen, verbindlich für die ganze Suite
   ---------------------------------------------------------------------
   Die Werte stehen in den Tokens (`--bw-icon-size-*`), damit sie über die
   übliche Lieferung in jeder App ankommen und nicht app-weise gepflegt
   werden. Hier stehen nur die Klassen, die sie anwenden.

     --kompakt  16 px  dichte Tabellenzeilen
     (Vorgabe)  20 px  Werkzeug- und Aktionsleisten — die Regel
     --gross    24 px  Startblenden und große Flächen

   Die Strichstärke gehört zur Stufe, nicht zum Geschmack: gezeichnet ist
   im 24er-Raster mit 1,5, und wer kleiner anzeigt, verliert Linie. Jede
   Stufe bringt deshalb ihren eigenen Strich mit — so bleibt die Linie auf
   dem Schirm bei rund 1,45 px, in allen drei Stufen.
   --------------------------------------------------------------------- */
.bw-icon-button svg {
  width: var(--bw-icon-size-default, 20px);
  height: var(--bw-icon-size-default, 20px);
  stroke-width: var(--bw-icon-stroke-default, 1.75);
  overflow: visible;
}
.bw-icon-button--kompakt { width: 27px; height: 25px; }
.bw-icon-button--kompakt svg {
  width: var(--bw-icon-size-compact, 16px);
  height: var(--bw-icon-size-compact, 16px);
  stroke-width: var(--bw-icon-stroke-compact, 2);
}
.bw-icon-button--gross { width: 37px; height: 33px; }
.bw-icon-button--gross svg {
  width: var(--bw-icon-size-large, 24px);
  height: var(--bw-icon-size-large, 24px);
  stroke-width: var(--bw-icon-stroke-large, 1.5);
}

/* ---------------------------------------------------------------------
   Zeigen und Gewähltsein sprechen dieselbe Sprache, in zwei Lautstärken:
   beide bekommen die Leitfarbe und dieselbe getönte Fläche — aber nur das
   Gewählte trägt den Rahmen. Ohne diesen Unterschied wäre beim
   Darüberfahren nicht mehr erkennbar, welches Werkzeug tatsächlich an ist.
   --------------------------------------------------------------------- */
.bw-icon-button:hover,
.bw-icon-button[aria-pressed="true"] { background: var(--bw-icon-tint); }
.bw-icon-button[aria-pressed="true"] { border-color: var(--bw-icon-leitfarbe); }

/* Der Grundkörper bleibt immer in der Textfarbe — farbig ist nur das
   handelnde Teil des Zeichens. Genau das macht den Entwurf aus: die Leiste
   bleibt ruhig, und trotzdem trägt jeder Knopf die Farbe seiner App. */

/* Einfarbig, wo eine Leiste bewusst zurücktreten soll — etwa in einer
   dichten Tabellenzeile, in der die Farbe schon etwas anderes bedeutet. */
.bw-icon-button--gedaempft { --bw-icon-akzent: currentColor; }

/* Trägt der Knopf selbst schon eine Bedeutungsfarbe — Löschen ist rot,
   eine Warnung gelb —, dann tritt die Leitfarbe zurück und das Zeichen
   wird einfarbig. Zwei Farben in einem Zeichen sagen nichts: ein roter
   Papierkorb mit magentafarbenem Deckel ist keine Aussage, sondern ein
   Versehen. Die Bedeutungsfarbe gewinnt, weil sie die dringendere ist. */
.bw-icon-button--danger,
.bw-icon-button--warning,
.bw-icon-button--success,
/* Ebenso, wenn der Knopf die Leitfarbe selbst als Fläche trägt: dann läge
   der Akzent farbgleich auf ihr und wäre schlicht verschwunden. */
.bw-icon-button--primary { --bw-icon-akzent: currentColor; }

.bw-icon-button:focus-visible {
  outline: 2px solid var(--bw-color-focus, #1f5fa8);
  outline-offset: 1px;
}
.bw-icon-button[disabled] { opacity: .4; cursor: default; }
.bw-icon-button[disabled]:hover { background: none; --bw-icon-akzent: currentColor; }

/* Die Trennung in der Leiste — dieselbe Machart wie in PrüfWERK. */
.bw-icon-trenner {
  width: 1px;
  height: 16px;
  margin: 0 5px;
  background: var(--bw-color-line, #e2e6ea);
}

/* ---------------------------------------------------------------------
   Dunkler Grund
   Die Leitfarben nach ADR-008 halten mit einem Wert auf Weiß wie auf
   Schwarz. Das gilt aber nur, solange die Fläche dunkel bleibt: oberhalb
   von etwa #202429 reißt die 3:1 gegen die schwächste Leitfarbe. Deshalb
   ist die Tönung hier bewusst eine helle Aufhellung statt der üblichen
   abgesetzten Fläche — sie hebt den Knopf, ohne den Grund aufzuhellen.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .bw-icon-button { --bw-icon-tint: rgb(255 255 255 / 8%); }
}
[data-bw-grund="dunkel"] .bw-icon-button { --bw-icon-tint: rgb(255 255 255 / 8%); }