/* Code Styles - Default Theme */

@layer components {

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.125em 0.375em;
  background: var(--color-surface);
  border-radius: var(--radius);
  color: var(--color-text);
}

/* Code blocks */
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: normal;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

pre::-webkit-scrollbar {
  height: 6px;
}

pre::-webkit-scrollbar-track {
  background: transparent;
}

pre::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

/* Code block with language label */
pre[data-language] {
  position: relative;
  padding-top: calc(var(--space-4) + 1.5em);
}

pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Line numbers (optional) */
pre.line-numbers {
  padding-left: 3.5em;
  position: relative;
}

pre.line-numbers .line-numbers-rows {
  position: absolute;
  left: 0;
  top: var(--space-4);
  width: 3em;
  text-align: right;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  padding-right: var(--space-2);
  user-select: none;
  pointer-events: none;
}

pre.line-numbers .line-numbers-rows > span {
  display: block;
  counter-increment: line;
}

pre.line-numbers .line-numbers-rows > span::before {
  content: counter(line);
}

/* Syntax Highlighting - GitHub-inspired */
/* Comments */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs {
  color: #6a737d;
  font-style: italic;
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sr,
.highlight .sx {
  color: #032f62;
}

/* Keywords */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #d73a49;
  font-weight: 600;
}

/* Functions */
.highlight .nf,
.highlight .fm {
  color: #6f42c1;
}

/* Classes / Types */
.highlight .nc,
.highlight .nn,
.highlight .no {
  color: #22863a;
}

/* Numbers */
.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo {
  color: #005cc5;
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: #d73a49;
}

/* Variables */
.highlight .n,
.highlight .na,
.highlight .nb,
.highlight .nv,
.highlight .vi,
.highlight .vg {
  color: #24292e;
}

/* Tags (HTML/XML) */
.highlight .nt {
  color: #22863a;
}

/* Attributes (HTML/XML) */
.highlight .na {
  color: #6f42c1;
}

/* Errors */
.highlight .err {
  color: #cb2431;
  background-color: #ffdce0;
}

/* Diff */
.highlight .gi {
  color: #22863a;
  background-color: #f0fff4;
}

.highlight .gd {
  color: #cb2431;
  background-color: #ffeef0;
}

/* Dark mode syntax highlighting */
@media (prefers-color-scheme: dark) {
  code {
    color: #e6edf3;
  }

  /* Comments */
  .highlight .c,
  .highlight .c1,
  .highlight .cm,
  .highlight .cs {
    color: #8b949e;
  }

  /* Strings */
  .highlight .s,
  .highlight .s1,
  .highlight .s2,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .se,
  .highlight .sh,
  .highlight .si,
  .highlight .sr,
  .highlight .sx {
    color: #a5d6ff;
  }

  /* Keywords */
  .highlight .k,
  .highlight .kc,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt {
    color: #ff7b72;
  }

  /* Functions */
  .highlight .nf,
  .highlight .fm {
    color: #d2a8ff;
  }

  /* Classes / Types */
  .highlight .nc,
  .highlight .nn,
  .highlight .no {
    color: #7ee787;
  }

  /* Numbers */
  .highlight .m,
  .highlight .mi,
  .highlight .mf,
  .highlight .mh,
  .highlight .mo {
    color: #79c0ff;
  }

  /* Operators */
  .highlight .o,
  .highlight .ow {
    color: #ff7b72;
  }

  /* Variables */
  .highlight .n,
  .highlight .na,
  .highlight .nb,
  .highlight .nv,
  .highlight .vi,
  .highlight .vg {
    color: #c9d1d9;
  }

  /* Tags (HTML/XML) */
  .highlight .nt {
    color: #7ee787;
  }

  /* Attributes (HTML/XML) */
  .highlight .na {
    color: #d2a8ff;
  }

  /* Errors */
  .highlight .err {
    color: #f85149;
    background-color: rgba(248, 81, 73, 0.15);
  }

  /* Diff */
  .highlight .gi {
    color: #7ee787;
    background-color: rgba(63, 185, 80, 0.15);
  }

  .highlight .gd {
    color: #f85149;
    background-color: rgba(248, 81, 73, 0.15);
  }
}

}