@use '@/styles/variables.scss' as *;
// 导入全局样式变量

// 知识库列表页面样式
// 说明：.ant-table 样式已在全局 global.scss 中定义，此处不需要重复定义

// ===== 操作栏图标样式 =====
.action-btn {
    // 方形可交互区域
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-secondary;
    transition: all 0.2s ease;
    border-radius: $radius-md;  // 6px 圆角

    // iconify 图标样式
    .iconify {
        font-size: 24px;  // 放大图标
        line-height: 1;
        transition: all 0.2s ease;
    }

    // 悬停效果
    &:hover {
        background: $bg-active;
        color: $primary-color;

        .iconify {
            transform: scale(1.15);  // 图标放大
        }
    }

    // 危险操作（删除）
    &[danger] {
        &:hover {
            background: rgba(220, 38, 38, 0.1);
            color: $error-color;
        }
    }

    // 激活/点击效果
    &:active {
        transform: scale(0.95);
    }
}

// ===== 响应式适配 =====
@media (max-width: $screen-md) {
    // 操作按钮缩小
    .action-btn {
        width: 36px;
        height: 36px;

        .iconify {
            font-size: 20px;
        }
    }
}
