/*
 =================================================================
  (新增) 自定义滚动条样式
  这段代码适用于 Webkit 内核的浏览器 (Chrome, Edge, Safari)
 =================================================================
*/

/* 1. 统一定义滚动条的尺寸 */
.highlight .code-scroll-wrapper::-webkit-scrollbar {
  width: 12px;  /* 垂直滚动条的宽度 */
  height: 12px; /* 水平滚动条的高度 */
}

/* 2. 统一定义滚动条的轨道 (背景) */
.highlight .code-scroll-wrapper::-webkit-scrollbar-track {
  background: #2e2e33; /* 轨道背景色，建议设为代码块的背景色 */
  border-radius: var(--radius); /* 如果需要，可以沿用主题的圆角变量 */
}

/* 3. 统一定义滚动条的滑块 (可拖动的部分) */
.highlight .code-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #555;      /* 滑块的颜色 */
  border-radius: 10px;          /* 滑块的圆角 */
  /* 关键：创建与轨道同色的边框，实现“悬浮内嵌”的视觉效果 */
  border: 3px solid #2e2e33;
}

/* 4. (可选) 鼠标悬停在滑块上时的交互样式 */
.highlight .code-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #777; /* 悬停时颜色变亮，提供反馈 */
}

/*
 =================================================================
  (可选) 针对 Firefox 浏览器的基本兼容样式
 =================================================================
*/
.highlight .code-scroll-wrapper {
  scrollbar-width: thin; /* 可选值: auto, thin, none */
  /* 第一个颜色是滑块颜色，第二个是轨道颜色 */
  scrollbar-color: #555 #2e2e33;
}


/*
 =================================================================
  基础部分：为两种类型的代码块提供通用的滚动和按钮样式
 =================================================================
*/
.highlight {
  position: relative;
}
.code-scroll-wrapper {
  max-height: 500px; /* 您可以自定义最大高度 */
  overflow: auto;
}
.code-wrap-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  padding: 3px 8px;
  font-size: 12px;
  color: #555;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.highlight:hover .code-wrap-button {
  opacity: 1;
}

/*
 =================================================================
  类型 A: 不带行号 (.no-line-numbers)
  策略：将 .highlight 自身的样式“转移”到 .code-scroll-wrapper 上
 =================================================================
*/
.highlight.no-line-numbers {
  /* 清除自身的内边距和背景，因为它们将被 wrapper 继承 */
  padding: 0 !important;
  background: transparent !important;
}
.highlight.no-line-numbers .code-scroll-wrapper {
  /* 继承主题的原始样式 */
  background: var(--code-bg);
  padding: 16px;
  border-radius: var(--radius);
}
.highlight.no-line-numbers .code-scroll-wrapper pre {
  padding: 0; /* 清除pre可能存在的额外padding */
}

/*
 =================================================================
  类型 B: 带行号 (.with-line-numbers)
  策略：保持主题原有样式，只对内部元素做最小化调整
 =================================================================
*/
.highlight.with-line-numbers .code-scroll-wrapper {
  /* wrapper 本身保持透明，并继承圆角 */
  border-radius: var(--radius);
}
.highlight.with-line-numbers table {
  margin: 0; /* 清除表格可能存在的外边距 */
}

/*
 =================================================================
  换行功能样式
 =================================================================
*/
pre.code-wrap-active {
  white-space: pre-wrap !important;
  word-break: break-all;
}
.highlight.wrap-mode-active .lntd:first-child {
  display: none;
}
.highlight.wrap-mode-active .lntd:last-child {
  width: 100%;
}