/* isdp/web/src/components/thread/CodePreviewButton.css */

/* ============================================
   CodePreviewButton - 代码预览入口按钮
   简洁轻量设计
   ============================================ */

.code-preview-button {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--bg-sidebar, #fafafa);
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-preview-button:hover {
  border-color: var(--color-primary, #1890ff);
  background: var(--color-primary-opacity-5, rgba(24, 144, 255, 0.05));
}

.code-preview-button:active {
  transform: scale(0.99);
}

/* 左侧信息 */
.code-preview-button__info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-preview-button__icon {
  font-size: 14px;
  color: var(--color-primary, #1890ff);
}

.code-preview-button__text {
  font-size: 13px;
  color: var(--text-primary, #262626);
  font-weight: 500;
}

/* 统计信息 */
.code-preview-button__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-preview-button__stat {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', 'Consolas', monospace;
  border-radius: 4px;
}

.code-preview-button__stat--add {
  background: rgba(46, 160, 67, 0.1);
  color: #22863a;
}

.code-preview-button__stat--del {
  background: rgba(203, 36, 49, 0.1);
  color: #cb2431;
}

.code-preview-button__arrow {
  font-size: 12px;
  color: var(--text-secondary, #8c8c8c);
  transition: transform 0.2s ease;
}

.code-preview-button:hover .code-preview-button__arrow {
  color: var(--color-primary, #1890ff);
  transform: translateX(4px);
}

/* ============================================
   深色主题适配
   ============================================ */

[data-theme='dark'] .code-preview-button {
  background: var(--bg-sidebar, #1e293b);
  border-color: var(--border-light, #334155);
}

[data-theme='dark'] .code-preview-button:hover {
  border-color: var(--color-primary, #60a5fa);
  background: rgba(96, 165, 250, 0.1);
}

[data-theme='dark'] .code-preview-button__text {
  color: var(--text-primary, #e2e8f0);
}

[data-theme='dark'] .code-preview-button__stat--add {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

[data-theme='dark'] .code-preview-button__stat--del {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}