/* Icon Styles - Animon.ai 线性描边风格 */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* 导航图标专用样式 */
.sidebar__nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar__nav-icon svg {
    width: 22px;
    height: 22px;
    color: #6B7280;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 激活状态 - 白色图标 */
.sidebar__nav-item.active .sidebar__nav-icon svg {
    color: white;
}

/* 悬停状态 */
.sidebar__nav-item:hover:not(.active) .sidebar__nav-icon svg {
    color: #374151;
}

/* 图标尺寸变体 */
.icon--xs {
    width: 14px;
    height: 14px;
}

.icon--sm {
    width: 16px;
    height: 16px;
}

.icon--md {
    width: 20px;
    height: 20px;
}

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

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

/* 图标颜色变体 */
.icon--primary {
    color: var(--color-brand-green);
}

.icon--gray {
    color: #6B7280;
}

.icon--light-gray {
    color: #9CA3AF;
}

.icon--white {
    color: #FFFFFF;
}

/* 悬停效果 */
.icon--hover:hover {
    color: var(--color-brand-green);
    transition: color var(--transition-fast);
}