/* ===================================================================
   TalkStock Icon System v1.0
   SVG sprite-based icon components
   =================================================================== */

/* --- Base Icon --- */
.ts-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.ts-icon svg,
.ts-icon use {
    width: 100%;
    height: 100%;
}

/* --- Size Variants --- */
.ts-icon--sm {
    width: 14px;
    height: 14px;
}

.ts-icon--md {
    width: 18px;
    height: 18px;
}

.ts-icon--lg {
    width: 24px;
    height: 24px;
}

.ts-icon--xl {
    width: 32px;
    height: 32px;
}

/* 14px size: increase stroke-width for clarity */
.ts-icon--sm svg {
    stroke-width: 2;
}

/* 14px size: hide brand motif accent details */
.ts-icon--sm .ts-accent {
    display: none;
}

/* --- Interactive States (Iteration 4) --- */
.ts-icon-interactive {
    transition: transform 150ms ease, color 150ms ease;
    cursor: pointer;
}

.ts-icon-interactive:hover {
    transform: scale(1.08);
}

/* Active state — handled by parent color (currentColor inheritance) */
.side-nav-panel-item.active .ts-icon {
    color: var(--color-accent);
}

/* Disabled state */
.ts-icon--disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* --- Spin Animation --- */
.ts-icon--spin {
    animation: ts-icon-spin 1s linear infinite;
}

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

/* --- Dark Mode accent adjustment --- */
[data-theme="dark"] .ts-icon .ts-accent,
[data-theme="dark"] .ts-accent {
    opacity: 0.35;
}

/* --- Profile settings: .item-icon SVG support --- */
.settings-item .item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}

.settings-item .item-icon .ts-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.settings-item.danger .item-icon {
    color: var(--color-danger);
}

/* --- Admin Side Nav Panel icon --- */
.side-nav-panel-icon .ts-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* --- Query Guide Panel: category-icon SVG override --- */
.category-label .category-icon .ts-icon,
.ref-card-header .category-icon .ts-icon {
    width: 18px;
    height: 18px;
}

/* When category-icon contains SVG, adjust alignment */
.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Sidebar stagger animation (Iteration 5) --- */
@keyframes ts-icon-fade-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.side-nav-panel-nav .side-nav-panel-item .ts-icon {
    animation: ts-icon-fade-in 200ms ease both;
}

.side-nav-panel-nav .side-nav-panel-item:nth-child(1) .ts-icon { animation-delay: 0ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(2) .ts-icon { animation-delay: 30ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(3) .ts-icon { animation-delay: 60ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(4) .ts-icon { animation-delay: 90ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(5) .ts-icon { animation-delay: 120ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(6) .ts-icon { animation-delay: 150ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(7) .ts-icon { animation-delay: 180ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(8) .ts-icon { animation-delay: 210ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(9) .ts-icon { animation-delay: 240ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(10) .ts-icon { animation-delay: 270ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(11) .ts-icon { animation-delay: 300ms; }
.side-nav-panel-nav .side-nav-panel-item:nth-child(12) .ts-icon { animation-delay: 330ms; }

/* Reduce motion: skip animations */
@media (prefers-reduced-motion: reduce) {
    .ts-icon-interactive:hover {
        transform: none;
    }
    .ts-icon--spin {
        animation: none;
    }
    .side-nav-panel-nav .side-nav-panel-item .ts-icon {
        animation: none;
    }
}