/**
 * SVG Icons Styles - 专业镂空SVG图标样式
 * Professional Hollow SVG Icons for Header Navigation
 */

/* SVG图标基础样式 */
.svg-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

/* 确保在不同容器中的一致性 */
.action-btn .svg-icon {
    width: 18px;
    height: 18px;
}

/* 悬停效果 */
.action-btn:hover .svg-icon {
    stroke-width: 2.5;
    transform: scale(1.1);
}

/* 激活状态 */
.action-btn:active .svg-icon {
    transform: scale(0.95);
}

/* 加载状态的旋转动画 */
.svg-icon.spinning,
.svg-spinner {
    animation: spin 1s linear infinite;
}

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

/* 加载状态时的颜色调整 */
.action-btn.loading .svg-icon,
.action-btn.loading .svg-spinner {
    stroke: #007bff; /* 蓝色加载状态 */
    stroke-width: 2.2;
}

/* 深色主题适配 */
[data-bs-theme="dark"] .svg-icon {
    stroke: currentColor;
}

[data-bs-theme="dark"] .action-btn.loading .svg-icon,
[data-bs-theme="dark"] .action-btn.loading .svg-spinner {
    stroke: #4dabf7; /* 深色主题下的蓝色 */
}

/* 搜索图标特定样式 */
.toggle-search .svg-icon {
    /* 搜索图标的放大镜造型优化 */
}

/* 通知图标特定样式 */
.toggle-notify .svg-icon {
    /* 通知铃铛图标的摆动效果 */
}

/* 主题切换图标特定样式 */
.toggle-color .svg-icon {
    transition: all 0.4s ease;
}

/* 太阳图标特定效果 */
.toggle-color .sun-icon:hover {
    transform: rotate(30deg) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
    stroke: #ffc107; /* 黄色悬停效果 */
}

/* 月亮图标特定效果 */
.toggle-color .moon-icon:hover {
    transform: rotate(-15deg) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(108, 117, 125, 0.6));
    stroke: #6c757d; /* 灰色悬停效果 */
}

/* 深色主题下的图标悬停效果 */
[data-bs-theme="dark"] .toggle-color .sun-icon:hover {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.8));
    stroke: #ffd43b;
}

[data-bs-theme="dark"] .toggle-color .moon-icon:hover {
    filter: drop-shadow(0 0 8px rgba(173, 181, 189, 0.8));
    stroke: #adb5bd;
}

/* 主题切换的显示/隐藏控制 */
.toggle-color > span {
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0.8);
}

.toggle-color > span.show {
    display: inline-block;
    opacity: 1;
    transform: scale(1);
}

/* 主题切换动画 */
.toggle-color:hover > span.show .svg-icon {
    animation: theme-pulse 1.5s ease-in-out infinite;
}

@keyframes theme-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.toggle-notify:hover .svg-icon {
    animation: bell-ring 0.5s ease-in-out;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(6deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(2deg); }
    60% { transform: rotate(0deg); }
}

/* 确保图标在各种浏览器中都能正确渲染 */
.svg-icon {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    
    /* 确保在不同设备上的锐度 */
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
}

/* 防止在某些情况下图标模糊 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .svg-icon {
        shape-rendering: crisp-edges;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .svg-icon {
        width: 16px;
        height: 16px;
    }
    
    /* 移动端减少悬停效果 */
    .toggle-color .svg-icon:hover,
    .toggle-search .svg-icon:hover,
    .toggle-notify .svg-icon:hover {
        transform: scale(1.05);
        animation: none;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .svg-icon {
        stroke-width: 1.8; /* 在高分辨率屏幕上稍微细一点 */
    }
}

/* 汉堡菜单图标样式 */
.burger .svg-icon.burger-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.burger:hover .svg-icon.burger-icon {
    stroke-width: 2.5;
    transform: scale(1.1);
}

.burger:active .svg-icon.burger-icon {
    transform: scale(0.95);
}

/* 关闭按钮图标样式 */
.canvas-close .svg-icon.close-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.canvas-close:hover .svg-icon.close-icon {
    transform: rotate(90deg);
    stroke-width: 2.5;
}

.canvas-close:active .svg-icon.close-icon {
    transform: rotate(90deg) scale(0.9);
}

/* 移动端汉堡菜单和关闭按钮优化 */
@media (max-width: 768px) {
    .burger .svg-icon.burger-icon,
    .canvas-close .svg-icon.close-icon {
        width: 18px;
        height: 18px;
    }
    
    .burger:hover .svg-icon.burger-icon,
    .canvas-close:hover .svg-icon.close-icon {
        transform: scale(1.05);
    }
}

/* 深色主题下的汉堡菜单和关闭按钮 */
[data-bs-theme="dark"] .burger .svg-icon.burger-icon,
[data-bs-theme="dark"] .canvas-close .svg-icon.close-icon {
    stroke: currentColor;
}

/* 透明Header下的汉堡菜单图标 */
.site-header.header-transparent-at-top .navbar .burger .svg-icon.burger-icon {
    stroke: #fff !important;
}