/* icons.css — Inline SVG icon system styles
 *
 * Companion to js/lib/icons.js. Provides sizing, colors,
 * animations, and layout integration for SVG icons.
 */

/* ─── Icon Base ───────────────────────────────────────────── */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    color: inherit;
    transition: color 180ms ease, transform 180ms ease;
}

/* ─── Size Variants ───────────────────────────────────────── */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }
.icon-2xl { width: 36px; height: 36px; }

/* ─── Color Variants ──────────────────────────────────────── */
.icon-primary { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-warning { color: var(--warning); }
.icon-danger { color: var(--danger); }
.icon-info { color: var(--info); }
.icon-muted { color: var(--text-muted); }

/* ─── Animations ──────────────────────────────────────────── */
.icon-spin {
    animation: iconSpin 1s linear infinite;
}
@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Layout Integration ──────────────────────────────────── */

/* Sidebar nav icon — opacity managed by .nav-icon in layout.css, not here */
.nav-icon .icon {
    width: 18px;
    height: 18px;
}

/* Button icon alignment */
.btn .icon { margin-right: 4px; }
.btn .icon:last-child { margin-right: 0; margin-left: 4px; }
.btn .icon:only-child { margin: 0; }

/* Badge icon */
.badge .icon {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

/* Missing icon fallback */
.icon-missing {
    background: var(--danger-bg);
    border: 1px dashed var(--danger-border);
    border-radius: 2px;
}