/**
 * 🎨 React Syntax Highlighter 自定义主题
 * 
 * 基于 CodeMirror 的颜色规则创建
 * 使用与 style.scss 相同的 CSS 变量
 */

// ===== 🎯 React Syntax Highlighter 主题样式 =====

// 语法高亮容器
.react-syntax-highlighter {
  border-radius: 0;
  background-color: var(--code-editor-bg) !important;
  overflow: auto;
  color: var(--code-editor-fg) !important;
  font-family: var(--font-mono) !important;

  // 代码容器
  code {
    background-color: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
  }

  // 预格式化文本
  pre {
    margin: 0 !important;
    background-color: transparent !important;
  }
}

// ===== 🎨 PrismJS 语法高亮类映射 =====
// 将 PrismJS 的类映射到我们的 CSS 变量

// 关键字 (function, if, const, return, export, import)
.token.keyword,
.token.control,
.token.conditional,
.token.important {
  color: var(--code-syntax-keyword) !important;
}

// 字符串字面量
.token.string,
.token.char,
.token.attr-value,
.token.regex {
  color: var(--code-syntax-string) !important;
}

// 数字字面量
.token.number,
.token.constant,
.token.symbol {
  color: var(--code-syntax-number) !important;
}

// 布尔值
.token.boolean {
  color: var(--code-syntax-boolean) !important;
}

// 注释
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-syntax-comment) !important;
  font-style: italic;
}

// 函数名
.token.function,
.token.method,
.token.function-name {
  color: var(--code-syntax-function) !important;
}

// 属性名 (包括 JSX 组件和对象属性)
.token.property,
.token.tag,
.token.selector,
.token.attr-name,
.token.namespace {
  color: var(--code-syntax-property) !important;
}

// 操作符
.token.operator,
.token.entity,
.token.url,
.token.punctuation {
  color: var(--code-syntax-operator) !important;
}

// 变量名
.token.variable,
.token.parameter,
.token.class-name,
.token.builtin {
  color: var(--code-syntax-variable) !important;
}

// 删除的代码 (git diff)
.token.deleted {
  background-color: color-mix(in srgb, var(--code-error-bg) 20%, transparent) !important;
  color: var(--code-error-bg) !important;
}

// 插入的代码 (git diff)
.token.inserted {
  background-color: color-mix(in srgb, var(--code-syntax-string) 20%, transparent) !important;
  color: var(--code-syntax-string) !important;
}

// 粗体
.token.bold {
  font-weight: bold;
}

// 斜体
.token.italic {
  font-style: italic;
}

// ===== 🎪 特殊样式 =====

// 行号样式 (如果启用)
.linenumber {
  padding-right: 1em;
  min-width: 3em;
  color: var(--code-ui-gutter-text) !important;
  user-select: none;
  text-align: right;
}

// 高亮行
.highlight-line {
  display: block;
  margin: 0 -1rem;
  background-color: var(--code-ui-active-line) !important;
  padding: 0 1rem;
}

// 选中文本
.react-syntax-highlighter ::selection {
  background-color: var(--code-ui-selection) !important;
}

// ===== 🌈 JSON 特定样式 =====
// 为 JSON 语法高亮添加额外的样式

.language-json {
  // JSON 属性键
  .token.property {
    color: var(--code-syntax-property) !important;
  }

  // JSON 字符串值
  .token.string {
    color: var(--code-syntax-string) !important;
  }

  // JSON 数字值
  .token.number {
    color: var(--code-syntax-number) !important;
  }

  // JSON 布尔值和 null
  .token.boolean,
  .token.null {
    color: var(--code-syntax-boolean) !important;
  }

  // JSON 标点符号 (大括号、冒号、逗号)
  .token.punctuation {
    color: var(--code-syntax-operator) !important;
  }
}

// ===== 🎯 自定义滚动条 =====
.react-syntax-highlighter {
  scrollbar-color: var(--code-ui-gutter-text) var(--code-ui-gutter);

  // Firefox 滚动条
  scrollbar-width: thin;
  // Webkit 浏览器滚动条
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    border-radius: 4px;
    background: var(--code-ui-gutter);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--code-ui-gutter-text);

    &:hover {
      background: var(--code-syntax-comment);
    }
  }
}

// ===== 🌙 响应式边距和内边距 =====
.react-syntax-highlighter {
  // 默认内边距
  padding: 1rem !important;

  // 小屏幕设备
  @media (max-width: 640px) {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

// ===== 🎪 内联代码样式 =====
// 如果需要支持内联代码高亮
.react-syntax-highlighter-inline {
  display: inline !important;
  border-radius: 4px !important;
  background-color: var(--code-ui-gutter) !important;
  padding: 0.125rem 0.25rem !important;
  font-size: 0.875em !important;
}