/**
 * ============================================================
 * TK Icons - 线条式图标系统
 * ============================================================
 * 
 * 清新动漫风格线条图标
 * - 统一使用 SVG 线条图标
 * - 支持颜色自定义
 * - 支持尺寸调整
 */

/* ========== 图标基础类 ========== */
.tk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tk-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* 图标尺寸 */
.tk-icon-xs { width: 16px; height: 16px; }
.tk-icon-sm { width: 20px; height: 20px; }
.tk-icon-md { width: 24px; height: 24px; }
.tk-icon-lg { width: 32px; height: 32px; }
.tk-icon-xl { width: 48px; height: 48px; }
.tk-icon-2xl { width: 64px; height: 64px; }

/* 图标颜色 */
.tk-icon-primary { color: var(--tk-text); }
.tk-icon-secondary { color: var(--tk-text-secondary); }
.tk-icon-success { color: var(--tk-success); }
.tk-icon-danger { color: var(--tk-danger); }
.tk-icon-warning { color: var(--tk-warning); }
.tk-icon-info { color: var(--tk-info); }
.tk-icon-p1 { color: var(--tk-p1); }
.tk-icon-p2 { color: var(--tk-p2); }

/* ========== 图标与文字组合 ========== */
.tk-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tk-icon-text .tk-icon {
    flex-shrink: 0;
}

/* ========== 按钮中的图标 ========== */
.tk-btn .tk-icon {
    width: 20px;
    height: 20px;
}

.tk-btn-primary .tk-icon {
    stroke-width: 2.5;
}

/* ========== 卡片中的图标 ========== */
.tk-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--tk-space-4);
    color: var(--tk-text);
    transition: transform 0.2s ease;
}

.tk-card-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.tk-card:hover .tk-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.tk-card.selected .tk-card-icon {
    color: var(--tk-success);
}

/* ========== 状态图标 ========== */
.tk-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tk-status-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.tk-status-success {
    background: var(--tk-success);
    color: white;
}

.tk-status-error {
    background: var(--tk-danger);
    color: white;
}

.tk-status-warning {
    background: var(--tk-warning);
    color: white;
}

.tk-status-info {
    background: var(--tk-info);
    color: white;
}

/* ========== 上传区域图标 ========== */
.tkgpu-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    opacity: 0.6;
    color: var(--tk-text-secondary);
}

.tkgpu-upload-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ========== 关闭按钮图标 ========== */
.tkgpu-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.tkgpu-clear svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tkgpu-upload.has-tkgpu:hover .tkgpu-clear {
    opacity: 1;
}

.tkgpu-clear:hover {
    background: #c0392b;
}

/* ========== 弹窗图标 ========== */
#dialogIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

#dialogIcon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ========== 标题图标 ========== */
.tkgpu-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    vertical-align: middle;
}

.tkgpu-title-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ========== 选择器关闭按钮 ========== */
.selector-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--tk-bg-muted);
    color: var(--tk-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selector-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.selector-close:hover {
    background: var(--tk-danger);
    color: white;
}

/* ========== 空状态图标 ========== */
.empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.5;
    color: var(--tk-text-muted);
}

.empty-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ========== 包选择按钮图标 ========== */
.selector-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.selector-btn .tk-icon {
    width: 18px;
    height: 18px;
}

/* ========== 标签移除按钮 ========== */
.tk-tag-remove {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.tk-tag-remove svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tk-tag-remove:hover {
    opacity: 1;
}

/* ========== 本地包面板图标 ========== */
.local-packages-title .tk-icon {
    width: 20px;
    height: 20px;
}

/* ========== 返回按钮 ========== */
.tk-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tk-btn-back svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}