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

.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;
  }
}

.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;
}

.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;
}

.token.deleted {
  background-color: color-mix(in srgb, var(--code-error-bg) 20%, transparent) !important;
  color: var(--code-error-bg) !important;
}

.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;
}

::selection {
  background-color: var(--code-ui-selection) !important;
}

.language-json {
  .token.property {
    color: var(--code-syntax-property) !important;
  }

  .token.string {
    color: var(--code-syntax-string) !important;
  }

  .token.number {
    color: var(--code-syntax-number) !important;
  }

  .token.boolean,
  .token.null {
    color: var(--code-syntax-boolean) !important;
  }

  .token.punctuation {
    color: var(--code-syntax-operator) !important;
  }
}

.react-syntax-highlighter {
  scrollbar-color: var(--code-ui-gutter-text) var(--code-ui-gutter);

  scrollbar-width: thin;

  &::-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;
}
