/*
 * ss-icon — Lucide SVG icon wrapper
 *
 * Usage:
 *   <svg class="ss-icon" viewBox="0 0 24 24" ...><path .../></svg>
 *
 * Icons always inherit currentColor — never hardcode a fill.
 * Component containers (buttons, chips, etc.) set the color; icons follow.
 */

.ss-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ── Sizes ────────────────────────────────────────────────────── */

.ss-icon--xs { width: 12px; height: 12px; }
.ss-icon--sm { width: 14px; height: 14px; }
.ss-icon--md { width: 16px; height: 16px; }
.ss-icon--lg { width: 22px; height: 22px; }
.ss-icon--xl { width: 28px; height: 28px; }
.ss-icon--2xl { width: 36px; height: 36px; }

/* ── State/emphasis modifiers ─────────────────────────────────── */

.ss-icon--muted { color: var(--text-muted); }
.ss-icon--faint { color: var(--text-faint); }
.ss-icon--accent { color: var(--accent); }
.ss-icon--success { color: var(--success); }
.ss-icon--warning { color: var(--warning); }
.ss-icon--danger { color: var(--danger); }

/* ── Spin (loading indicator) ─────────────────────────────────── */

.ss-icon--spin {
    animation: ss-icon-spin 0.8s linear infinite;
}

@keyframes ss-icon-spin {
    to { transform: rotate(360deg); }
}