/* 图标字体样式 */

/* 基础图标样式 */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
}

/* 常用图标 */
.icon-calendar::before { content: "📅"; }
.icon-user::before { content: "👤"; }
.icon-eye::before { content: "👁️"; }
.icon-folder::before { content: "📁"; }
.icon-tag::before { content: "🏷️"; }
.icon-search::before { content: "🔍"; }
.icon-arrow-right::before { content: "→"; }
.icon-arrow-left::before { content: "←"; }
.icon-arrow-up::before { content: "↑"; }
.icon-arrow-down::before { content: "↓"; }
.icon-check::before { content: "✓"; }
.icon-close::before { content: "✕"; }
.icon-plus::before { content: "+"; }
.icon-minus::before { content: "-"; }
.icon-star::before { content: "★"; }
.icon-heart::before { content: "♥"; }
.icon-share::before { content: "📤"; }
.icon-download::before { content: "⬇️"; }
.icon-upload::before { content: "⬆️"; }
.icon-edit::before { content: "✏️"; }
.icon-delete::before { content: "🗑️"; }
.icon-settings::before { content: "⚙️"; }
.icon-home::before { content: "🏠"; }
.icon-phone::before { content: "📞"; }
.icon-email::before { content: "📧"; }
.icon-location::before { content: "📍"; }
.icon-time::before { content: "⏰"; }
.icon-like::before { content: "👍"; }
.icon-dislike::before { content: "👎"; }
.icon-comment::before { content: "💬"; }
.icon-bookmark::before { content: "🔖"; }
.icon-print::before { content: "🖨️"; }
.icon-copy::before { content: "📋"; }
.icon-link::before { content: "🔗"; }
.icon-external::before { content: "↗️"; }
.icon-menu::before { content: "☰"; }
.icon-close-menu::before { content: "✕"; }

/* 社交媒体图标 */
.icon-weixin::before { content: "💬"; }
.icon-weibo::before { content: "📱"; }
.icon-qq::before { content: "💻"; }
.icon-qq-space::before { content: "🌐"; }
.icon-douyin::before { content: "🎵"; }
.icon-bilibili::before { content: "📺"; }
.icon-zhihu::before { content: "📚"; }
.icon-github::before { content: "🐙"; }
.icon-twitter::before { content: "🐦"; }
.icon-facebook::before { content: "📘"; }
.icon-instagram::before { content: "📷"; }
.icon-linkedin::before { content: "💼"; }
.icon-youtube::before { content: "📺"; }

/* 文件类型图标 */
.icon-pdf::before { content: "📄"; }
.icon-word::before { content: "📝"; }
.icon-excel::before { content: "📊"; }
.icon-powerpoint::before { content: "📈"; }
.icon-image::before { content: "🖼️"; }
.icon-video::before { content: "🎥"; }
.icon-audio::before { content: "🎵"; }
.icon-archive::before { content: "📦"; }
.icon-code::before { content: "💻"; }

/* 状态图标 */
.icon-success::before { content: "✅"; }
.icon-error::before { content: "❌"; }
.icon-warning::before { content: "⚠️"; }
.icon-info::before { content: "ℹ️"; }
.icon-question::before { content: "❓"; }
.icon-loading::before { content: "⏳"; }

/* 方向图标 */
.icon-chevron-right::before { content: "›"; }
.icon-chevron-left::before { content: "‹"; }
.icon-chevron-up::before { content: "⌃"; }
.icon-chevron-down::before { content: "⌄"; }
.icon-angle-right::before { content: "⟩"; }
.icon-angle-left::before { content: "⟨"; }
.icon-angle-up::before { content: "⌃"; }
.icon-angle-down::before { content: "⌄"; }

/* 功能图标 */
.icon-refresh::before { content: "🔄"; }
.icon-sync::before { content: "🔄"; }
.icon-save::before { content: "💾"; }
.icon-undo::before { content: "↶"; }
.icon-redo::before { content: "↷"; }
.icon-zoom-in::before { content: "🔍+"; }
.icon-zoom-out::before { content: "🔍-"; }
.icon-fullscreen::before { content: "⛶"; }
.icon-exit-fullscreen::before { content: "⛶"; }
.icon-volume::before { content: "🔊"; }
.icon-mute::before { content: "🔇"; }
.icon-play::before { content: "▶️"; }
.icon-pause::before { content: "⏸️"; }
.icon-stop::before { content: "⏹️"; }
.icon-next::before { content: "⏭️"; }
.icon-previous::before { content: "⏮️"; }

/* 图标大小 */
.icon-xs { font-size: 12px; }
.icon-sm { font-size: 14px; }
.icon-md { font-size: 16px; }
.icon-lg { font-size: 20px; }
.icon-xl { font-size: 24px; }
.icon-2xl { font-size: 32px; }
.icon-3xl { font-size: 48px; }

/* 图标颜色 */
.icon-primary { color: #2563ff; }
.icon-secondary { color: #64748b; }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }
.icon-error { color: #ef4444; }
.icon-info { color: #3b82f6; }

/* 动画图标 */
.icon-spin {
    animation: spin 1s linear infinite;
}

.icon-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.icon-bounce {
    animation: bounce 1s infinite;
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70% { transform: translate3d(0, -15px, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}

/* 图标组合 */
.icon-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.icon-group .icon {
    margin-right: 4px;
}

.icon-group .icon:last-child {
    margin-right: 0;
}

/* 响应式图标 */
@media (max-width: 768px) {
    .icon-lg { font-size: 18px; }
    .icon-xl { font-size: 20px; }
    .icon-2xl { font-size: 24px; }
    .icon-3xl { font-size: 32px; }
}

@media (max-width: 480px) {
    .icon-lg { font-size: 16px; }
    .icon-xl { font-size: 18px; }
    .icon-2xl { font-size: 20px; }
    .icon-3xl { font-size: 24px; }
}