/**
 * 项目面板 - 视图切换器样式
 * 使用 review- 前缀确保样式独立
 */

/* 显示模式切换容器 */
#review-panel .review-view-mode-container {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--review-radius-sm, var(--radius-sm));
    padding: 2px;
    border: 1px solid var(--review-border-color, var(--border-primary));
}

/* 显示模式切换按钮 */
#review-panel .review-view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--review-text-secondary, var(--text-secondary));
    border-radius: calc(var(--review-radius-sm, var(--radius-sm)) - 2px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

#review-panel .review-view-mode-btn:hover {
    background: var(--bg-hover);
    color: var(--review-text-primary, var(--text-primary));
    transform: translateY(-1px);
}

#review-panel .review-view-mode-btn.active {
    background: var(--gradient-primary);
    color: var(--review-text-primary, var(--text-primary));
    box-shadow: var(--shadow-sm);
}

#review-panel .review-view-mode-btn.active:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#review-panel .review-view-mode-btn svg {
    transition: all 0.3s ease;
}

#review-panel .review-view-mode-btn:hover svg {
    transform: scale(1.1);
}