/**
* idf-buttons v0.1.1 — Button-Pattern für apps-v2
*
* Single Source of Truth für alle Buttons in v2: Toolbar-Buttons,
* Modal-Footer-Buttons, Form-Submits, Icon-Buttons, Action-Buttons.
*
* v0.1.1: text-decoration-Reset im Basis-Layer — die Klasse gilt auch
* für (Link-als-Button, z.B. tonieye „Im neuen Tab
* öffnen", vm-Inventur-Link, access-denied-Dashboard-Link). Ohne Reset
* behielten Anchors die Browser-Default-Unterstreichung.
*
* Voraussetzung:
* - idf-tokens.css ist vorher geladen (var(--token)-Aufrufe).
*
* HTML-Konvention:
*
*
*
* Link-als-Button
*
*
* Klassen-Layer:
* - `.idf-btn` — Pflicht-Basis (Layout, Reset)
* - `.idf-btn-{variant}` — Pflicht-Variante (Farbe, Treatment)
* - `.is-sm` / `.is-lg` — optionale Größe (default = mid, 40 px)
* - `.idf-btn-icon` — quadratischer Icon-only-Button
*
* Varianten:
* - `idf-btn-primary` — Brand-Rot, weißer Text, fett (Haupt-Action)
* - `idf-btn-secondary` — Weiß mit Border (sekundär, neutral)
* - `idf-btn-ghost` — Transparent, Mid-Text, Hover-BG (Cancel)
* - `idf-btn-danger` — Brand-Rot, weiß, fett (zerstörerisch)
* - `idf-btn-confirm` — Grün, weiß, fett (bestätigen, alles ok)
*
* States: :hover, :focus-visible, :disabled, .is-loading
*/
/* ============================================================== */
/* Basis-Layer */
/* ============================================================== */
.idf-btn {
/* Defaults — können vom Konsumenten via Variable überschrieben werden. */
--idf-btn-h: var(--space-10, 40px); /* mid (default) */
--idf-btn-padding: 0 var(--space-4, 16px);
--idf-btn-font: 0.9375rem; /* ~15 px */
--idf-btn-radius: var(--radius-md, 6px);
--idf-btn-gap: var(--space-2, 8px);
height: var(--idf-btn-h);
padding: var(--idf-btn-padding);
border: 1px solid transparent;
border-radius: var(--idf-btn-radius);
background: var(--white, #fff);
color: var(--ink, #111);
font-family: inherit;
font-size: var(--idf-btn-font);
font-weight: var(--weight-medium, 500);
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--idf-btn-gap);
white-space: nowrap;
box-sizing: border-box;
/* Anchors als Buttons (): Browser-Default-Underline
zurücksetzen — color deckt der Basis-Layer schon ab (v0.1.1). */
text-decoration: none;
transition: background var(--motion-base, 120ms) var(--ease-default, ease),
color var(--motion-base, 120ms) var(--ease-default, ease),
border-color var(--motion-base, 120ms) var(--ease-default, ease),
filter var(--motion-base, 120ms) var(--ease-default, ease);
}
/* Hover-Sicherung für Anchor-Buttons: ein etwaiges globales a:hover
(Element+Pseudo schlägt die nackte Klasse) darf keine Unterstreichung
zurückbringen. */
a.idf-btn:hover,
a.idf-btn:focus,
a.idf-btn:visited {
text-decoration: none;
}
.idf-btn:focus-visible {
outline: 2px solid var(--accent, #167ea0);
outline-offset: 2px;
}
.idf-btn:disabled,
.idf-btn[disabled],
.idf-btn.is-disabled {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
/* Loading — Spinner-Anzeige (Konsument fügt FontAwesome-Spinner ein,
die Klasse blendet etwaigen Text via opacity ab). */
.idf-btn.is-loading {
cursor: progress;
pointer-events: none;
}
.idf-btn.is-loading > :not(.fa-spinner):not(.fa-spin) {
opacity: 0.6;
}
/* Icon im Button — leicht runter-skaliert für visuelle Balance. */
.idf-btn > i { font-size: 0.95em; }
/* ============================================================== */
/* Größen */
/* ============================================================== */
.idf-btn.is-sm {
--idf-btn-h: var(--space-9, 36px);
--idf-btn-padding: 0 var(--space-3, 12px);
--idf-btn-font: var(--font-sm, 0.8125rem); /* 13 px */
--idf-btn-gap: var(--space-2, 8px);
}
.idf-btn.is-lg {
--idf-btn-h: var(--space-12, 48px);
--idf-btn-padding: 0 var(--space-5, 20px);
--idf-btn-font: var(--font-base, 1rem); /* 16 px */
--idf-btn-gap: var(--space-2, 8px);
}
/* ============================================================== */
/* Varianten */
/* ============================================================== */
/* Primary — Brand-Rot, weiß, fett. Haupt-Action der Seite/des Modals. */
.idf-btn-primary {
background: var(--primary, #c8134b);
color: var(--white, #fff);
border-color: var(--primary, #c8134b);
font-weight: var(--weight-semi, 600);
}
.idf-btn-primary:hover { background: var(--ink, #111); border-color: var(--ink, #111); }
/* Secondary — Weiß mit Border, mid-text. Neutrale Toolbar-Action. */
.idf-btn-secondary {
background: var(--white, #fff);
color: var(--mid, #555);
border-color: var(--line, #e5e5e5);
}
.idf-btn-secondary:hover {
background: var(--bg, #fafafa);
border-color: var(--mid, #555);
color: var(--ink, #111);
}
/* Ghost — Transparent, mid-text, Hover-BG. Cancel/Tertiary. */
.idf-btn-ghost {
background: transparent;
color: var(--mid, #555);
border-color: transparent;
}
.idf-btn-ghost:hover {
background: var(--bg, #fafafa);
color: var(--ink, #111);
}
/* Danger — IDF-Rot, weiß, fett. Visuell aktuell identisch mit Primary,
bleibt aber als eigene Klasse, damit später (z.B. dunkler Rot, Pulse-
Animation, anderer Hover) leicht differenzierbar. */
.idf-btn-danger {
background: var(--primary, #c8134b);
color: var(--white, #fff);
border-color: var(--primary, #c8134b);
font-weight: var(--weight-semi, 600);
}
.idf-btn-danger:hover { filter: brightness(0.92); }
/* Confirm — IDF-Grün, weiß, fett. „Alles ok / bestätigen". */
.idf-btn-confirm {
background: var(--confirm, #0c998e);
color: var(--white, #fff);
border-color: var(--confirm, #0c998e);
font-weight: var(--weight-semi, 600);
}
.idf-btn-confirm:hover { filter: brightness(0.92); }
/* ============================================================== */
/* Icon-only-Button */
/* ============================================================== */
/* Quadratisch, kein Padding — Icon füllt zentriert.
Kombiniert mit einer Variante: