@pierre/diffs 1.1.0-beta.6 → 1.1.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (291) hide show
  1. package/dist/components/AdvancedVirtualizedFileDiff.d.ts +40 -0
  2. package/dist/components/AdvancedVirtualizedFileDiff.d.ts.map +1 -0
  3. package/dist/components/AdvancedVirtualizedFileDiff.js +145 -0
  4. package/dist/components/AdvancedVirtualizedFileDiff.js.map +1 -0
  5. package/dist/components/AdvancedVirtualizer.d.ts +38 -0
  6. package/dist/components/AdvancedVirtualizer.d.ts.map +1 -0
  7. package/dist/components/AdvancedVirtualizer.js +201 -0
  8. package/dist/components/AdvancedVirtualizer.js.map +1 -0
  9. package/dist/components/File.d.ts +58 -33
  10. package/dist/components/File.d.ts.map +1 -1
  11. package/dist/components/File.js +223 -22
  12. package/dist/components/File.js.map +1 -1
  13. package/dist/components/FileDiff.d.ts +42 -16
  14. package/dist/components/FileDiff.d.ts.map +1 -1
  15. package/dist/components/FileDiff.js +505 -65
  16. package/dist/components/FileDiff.js.map +1 -1
  17. package/dist/components/FileStream.d.ts +5 -0
  18. package/dist/components/FileStream.d.ts.map +1 -1
  19. package/dist/components/FileStream.js +66 -8
  20. package/dist/components/FileStream.js.map +1 -1
  21. package/dist/components/VirtualizedFile.d.ts +33 -0
  22. package/dist/components/VirtualizedFile.d.ts.map +1 -0
  23. package/dist/components/VirtualizedFile.js +227 -0
  24. package/dist/components/VirtualizedFile.js.map +1 -0
  25. package/dist/components/VirtualizedFileDiff.d.ts +39 -0
  26. package/dist/components/VirtualizedFileDiff.d.ts.map +1 -0
  27. package/dist/components/VirtualizedFileDiff.js +316 -0
  28. package/dist/components/VirtualizedFileDiff.js.map +1 -0
  29. package/dist/components/Virtualizer.d.ts +63 -0
  30. package/dist/components/Virtualizer.d.ts.map +1 -0
  31. package/dist/components/Virtualizer.js +369 -0
  32. package/dist/components/Virtualizer.js.map +1 -0
  33. package/dist/components/VirtulizerDevelopment.d.ts +14 -0
  34. package/dist/components/VirtulizerDevelopment.d.ts.map +1 -0
  35. package/dist/components/web-components.d.ts +1 -1
  36. package/dist/components/web-components.d.ts.map +1 -1
  37. package/dist/constants.d.ts +4 -7
  38. package/dist/constants.d.ts.map +1 -1
  39. package/dist/constants.js +14 -6
  40. package/dist/constants.js.map +1 -1
  41. package/dist/highlighter/languages/areLanguagesAttached.d.ts.map +1 -1
  42. package/dist/highlighter/languages/attachResolvedLanguages.d.ts.map +1 -1
  43. package/dist/highlighter/languages/cleanUpResolvedLanguages.d.ts.map +1 -1
  44. package/dist/highlighter/languages/constants.d.ts.map +1 -1
  45. package/dist/highlighter/languages/getResolvedLanguages.d.ts.map +1 -1
  46. package/dist/highlighter/languages/getResolvedOrResolveLanguage.d.ts +1 -1
  47. package/dist/highlighter/languages/getResolvedOrResolveLanguage.d.ts.map +1 -1
  48. package/dist/highlighter/languages/hasResolvedLanguages.d.ts.map +1 -1
  49. package/dist/highlighter/languages/registerCustomLanguage.d.ts +11 -4
  50. package/dist/highlighter/languages/registerCustomLanguage.d.ts.map +1 -1
  51. package/dist/highlighter/languages/resolveLanguage.d.ts +1 -1
  52. package/dist/highlighter/languages/resolveLanguage.d.ts.map +1 -1
  53. package/dist/highlighter/languages/resolveLanguages.d.ts.map +1 -1
  54. package/dist/highlighter/shared_highlighter.d.ts.map +1 -1
  55. package/dist/highlighter/shared_highlighter.js.map +1 -1
  56. package/dist/highlighter/themes/areThemesAttached.d.ts.map +1 -1
  57. package/dist/highlighter/themes/attachResolvedThemes.d.ts.map +1 -1
  58. package/dist/highlighter/themes/cleanUpResolvedThemes.d.ts.map +1 -1
  59. package/dist/highlighter/themes/constants.d.ts.map +1 -1
  60. package/dist/highlighter/themes/getResolvedOrResolveTheme.d.ts.map +1 -1
  61. package/dist/highlighter/themes/getResolvedThemes.d.ts.map +1 -1
  62. package/dist/highlighter/themes/hasResolvedThemes.d.ts.map +1 -1
  63. package/dist/highlighter/themes/registerCustomCSSVariableTheme.d.ts.map +1 -1
  64. package/dist/highlighter/themes/registerCustomTheme.d.ts.map +1 -1
  65. package/dist/highlighter/themes/resolveTheme.d.ts.map +1 -1
  66. package/dist/highlighter/themes/resolveThemes.d.ts.map +1 -1
  67. package/dist/index.d.ts +13 -10
  68. package/dist/index.js +10 -7
  69. package/dist/managers/LineSelectionManager.d.ts +14 -15
  70. package/dist/managers/LineSelectionManager.d.ts.map +1 -1
  71. package/dist/managers/LineSelectionManager.js +60 -71
  72. package/dist/managers/LineSelectionManager.js.map +1 -1
  73. package/dist/managers/MouseEventManager.d.ts +13 -6
  74. package/dist/managers/MouseEventManager.d.ts.map +1 -1
  75. package/dist/managers/MouseEventManager.js +161 -47
  76. package/dist/managers/MouseEventManager.js.map +1 -1
  77. package/dist/managers/ResizeManager.d.ts +6 -1
  78. package/dist/managers/ResizeManager.d.ts.map +1 -1
  79. package/dist/managers/ResizeManager.js +114 -64
  80. package/dist/managers/ResizeManager.js.map +1 -1
  81. package/dist/managers/ScrollSyncManager.d.ts.map +1 -1
  82. package/dist/managers/UniversalRenderingManager.d.ts.map +1 -1
  83. package/dist/react/File.d.ts +1 -0
  84. package/dist/react/File.d.ts.map +1 -1
  85. package/dist/react/File.js +2 -1
  86. package/dist/react/File.js.map +1 -1
  87. package/dist/react/FileDiff.d.ts +1 -0
  88. package/dist/react/FileDiff.d.ts.map +1 -1
  89. package/dist/react/FileDiff.js +2 -1
  90. package/dist/react/FileDiff.js.map +1 -1
  91. package/dist/react/MultiFileDiff.d.ts +1 -0
  92. package/dist/react/MultiFileDiff.d.ts.map +1 -1
  93. package/dist/react/MultiFileDiff.js +2 -1
  94. package/dist/react/MultiFileDiff.js.map +1 -1
  95. package/dist/react/PatchDiff.d.ts +1 -0
  96. package/dist/react/PatchDiff.d.ts.map +1 -1
  97. package/dist/react/PatchDiff.js +3 -2
  98. package/dist/react/PatchDiff.js.map +1 -1
  99. package/dist/react/Virtualizer.d.ts +25 -0
  100. package/dist/react/Virtualizer.d.ts.map +1 -0
  101. package/dist/react/Virtualizer.js +38 -0
  102. package/dist/react/Virtualizer.js.map +1 -0
  103. package/dist/react/WorkerPoolContext.d.ts.map +1 -1
  104. package/dist/react/WorkerPoolContext.js +1 -1
  105. package/dist/react/WorkerPoolContext.js.map +1 -1
  106. package/dist/react/constants.d.ts.map +1 -1
  107. package/dist/react/index.d.ts +3 -2
  108. package/dist/react/index.js +2 -1
  109. package/dist/react/jsx.d.ts.map +1 -1
  110. package/dist/react/types.d.ts +5 -3
  111. package/dist/react/types.d.ts.map +1 -1
  112. package/dist/react/utils/renderDiffChildren.d.ts +5 -5
  113. package/dist/react/utils/renderDiffChildren.d.ts.map +1 -1
  114. package/dist/react/utils/renderFileChildren.d.ts +5 -5
  115. package/dist/react/utils/renderFileChildren.d.ts.map +1 -1
  116. package/dist/react/utils/templateRender.d.ts.map +1 -1
  117. package/dist/react/utils/useFileDiffInstance.d.ts +5 -3
  118. package/dist/react/utils/useFileDiffInstance.d.ts.map +1 -1
  119. package/dist/react/utils/useFileDiffInstance.js +6 -2
  120. package/dist/react/utils/useFileDiffInstance.js.map +1 -1
  121. package/dist/react/utils/useFileInstance.d.ts +5 -3
  122. package/dist/react/utils/useFileInstance.d.ts.map +1 -1
  123. package/dist/react/utils/useFileInstance.js +6 -2
  124. package/dist/react/utils/useFileInstance.js.map +1 -1
  125. package/dist/react/utils/useStableCallback.d.ts.map +1 -1
  126. package/dist/react/utils/useStableCallback.js.map +1 -1
  127. package/dist/renderers/DiffHunksRenderer.d.ts +15 -10
  128. package/dist/renderers/DiffHunksRenderer.d.ts.map +1 -1
  129. package/dist/renderers/DiffHunksRenderer.js +240 -136
  130. package/dist/renderers/DiffHunksRenderer.js.map +1 -1
  131. package/dist/renderers/FileRenderer.d.ts +12 -5
  132. package/dist/renderers/FileRenderer.d.ts.map +1 -1
  133. package/dist/renderers/FileRenderer.js +90 -31
  134. package/dist/renderers/FileRenderer.js.map +1 -1
  135. package/dist/shiki-stream/stream.d.ts +2 -2
  136. package/dist/shiki-stream/stream.d.ts.map +1 -1
  137. package/dist/shiki-stream/stream.js.map +1 -1
  138. package/dist/shiki-stream/tokenizer.d.ts +2 -2
  139. package/dist/shiki-stream/tokenizer.d.ts.map +1 -1
  140. package/dist/shiki-stream/tokenizer.js.map +1 -1
  141. package/dist/shiki-stream/types.d.ts +18 -18
  142. package/dist/shiki-stream/types.d.ts.map +1 -1
  143. package/dist/sprite.d.ts +1 -1
  144. package/dist/sprite.d.ts.map +1 -1
  145. package/dist/ssr/FileDiffReact.d.ts.map +1 -1
  146. package/dist/ssr/FileDiffReact.js +1 -1
  147. package/dist/ssr/index.d.ts +2 -2
  148. package/dist/ssr/preloadDiffs.d.ts.map +1 -1
  149. package/dist/ssr/preloadFile.d.ts.map +1 -1
  150. package/dist/ssr/preloadPatchFile.d.ts.map +1 -1
  151. package/dist/ssr/preloadPatchFile.js.map +1 -1
  152. package/dist/ssr/renderHTML.d.ts.map +1 -1
  153. package/dist/style.js +1 -1
  154. package/dist/style.js.map +1 -1
  155. package/dist/types.d.ts +191 -172
  156. package/dist/types.d.ts.map +1 -1
  157. package/dist/utils/areDiffLineAnnotationsEqual.d.ts.map +1 -1
  158. package/dist/utils/areDiffLineAnnotationsEqual.js.map +1 -1
  159. package/dist/utils/areFilesEqual.d.ts.map +1 -1
  160. package/dist/utils/areHunkDataEqual.d.ts.map +1 -1
  161. package/dist/utils/areLineAnnotationsEqual.d.ts.map +1 -1
  162. package/dist/utils/areObjectsEqual.d.ts.map +1 -1
  163. package/dist/utils/areOptionsEqual.d.ts +1 -1
  164. package/dist/utils/areOptionsEqual.d.ts.map +1 -1
  165. package/dist/utils/arePrePropertiesEqual.d.ts.map +1 -1
  166. package/dist/utils/arePrePropertiesEqual.js +1 -1
  167. package/dist/utils/arePrePropertiesEqual.js.map +1 -1
  168. package/dist/utils/areRenderRangesEqual.d.ts.map +1 -1
  169. package/dist/utils/areSelectionsEqual.d.ts.map +1 -1
  170. package/dist/utils/areThemesEqual.d.ts.map +1 -1
  171. package/dist/utils/areVirtualWindowSpecsEqual.d.ts.map +1 -1
  172. package/dist/utils/areWorkerStatsEqual.d.ts.map +1 -1
  173. package/dist/utils/cleanLastNewline.d.ts.map +1 -1
  174. package/dist/utils/createAnnotationElement.d.ts.map +1 -1
  175. package/dist/utils/createAnnotationWrapperNode.d.ts.map +1 -1
  176. package/dist/utils/createContentColumn.d.ts +7 -0
  177. package/dist/utils/createContentColumn.d.ts.map +1 -0
  178. package/dist/utils/createContentColumn.js +17 -0
  179. package/dist/utils/createContentColumn.js.map +1 -0
  180. package/dist/utils/createEmptyRowBuffer.d.ts.map +1 -1
  181. package/dist/utils/createEmptyRowBuffer.js +2 -1
  182. package/dist/utils/createEmptyRowBuffer.js.map +1 -1
  183. package/dist/utils/createFileHeaderElement.d.ts.map +1 -1
  184. package/dist/utils/createHoverContentNode.d.ts.map +1 -1
  185. package/dist/utils/createNoNewlineElement.d.ts +2 -1
  186. package/dist/utils/createNoNewlineElement.d.ts.map +1 -1
  187. package/dist/utils/createNoNewlineElement.js +3 -6
  188. package/dist/utils/createNoNewlineElement.js.map +1 -1
  189. package/dist/utils/createPreElement.d.ts +2 -1
  190. package/dist/utils/createPreElement.d.ts.map +1 -1
  191. package/dist/utils/createPreElement.js +4 -3
  192. package/dist/utils/createPreElement.js.map +1 -1
  193. package/dist/utils/createRowNodes.d.ts.map +1 -1
  194. package/dist/utils/createSeparator.d.ts.map +1 -1
  195. package/dist/utils/createSeparator.js +1 -1
  196. package/dist/utils/createSeparator.js.map +1 -1
  197. package/dist/utils/createSpanNodeFromToken.d.ts.map +1 -1
  198. package/dist/utils/createSpanNodeFromToken.js.map +1 -1
  199. package/dist/utils/createStyleElement.d.ts.map +1 -1
  200. package/dist/utils/createTransformerWithState.d.ts.map +1 -1
  201. package/dist/utils/createUnsafeCSSStyleNode.d.ts.map +1 -1
  202. package/dist/utils/createWindowFromScrollPosition.d.ts.map +1 -1
  203. package/dist/utils/cssWrappers.d.ts.map +1 -1
  204. package/dist/utils/diffAcceptRejectHunk.d.ts +1 -1
  205. package/dist/utils/diffAcceptRejectHunk.d.ts.map +1 -1
  206. package/dist/utils/formatCSSVariablePrefix.d.ts +1 -1
  207. package/dist/utils/formatCSSVariablePrefix.d.ts.map +1 -1
  208. package/dist/utils/getFiletypeFromFileName.d.ts.map +1 -1
  209. package/dist/utils/getHighlighterOptions.d.ts.map +1 -1
  210. package/dist/utils/getHighlighterThemeStyles.d.ts.map +1 -1
  211. package/dist/utils/getHunkSeparatorSlotName.d.ts +3 -1
  212. package/dist/utils/getHunkSeparatorSlotName.d.ts.map +1 -1
  213. package/dist/utils/getHunkSeparatorSlotName.js.map +1 -1
  214. package/dist/utils/getIconForType.d.ts +1 -1
  215. package/dist/utils/getIconForType.d.ts.map +1 -1
  216. package/dist/utils/getLineAnnotationName.d.ts.map +1 -1
  217. package/dist/utils/getLineEndingType.d.ts +1 -1
  218. package/dist/utils/getLineEndingType.d.ts.map +1 -1
  219. package/dist/utils/getLineNodes.d.ts.map +1 -1
  220. package/dist/utils/getOrCreateCodeNode.d.ts +4 -2
  221. package/dist/utils/getOrCreateCodeNode.d.ts.map +1 -1
  222. package/dist/utils/getOrCreateCodeNode.js +9 -6
  223. package/dist/utils/getOrCreateCodeNode.js.map +1 -1
  224. package/dist/utils/getSingularPatch.d.ts.map +1 -1
  225. package/dist/utils/getThemes.d.ts.map +1 -1
  226. package/dist/utils/getTotalLineCountFromHunks.d.ts.map +1 -1
  227. package/dist/utils/hast_utils.d.ts +6 -3
  228. package/dist/utils/hast_utils.d.ts.map +1 -1
  229. package/dist/utils/hast_utils.js +28 -4
  230. package/dist/utils/hast_utils.js.map +1 -1
  231. package/dist/utils/isDefaultRenderRange.d.ts.map +1 -1
  232. package/dist/utils/isWorkerContext.d.ts.map +1 -1
  233. package/dist/utils/iterateOverDiff.d.ts +26 -13
  234. package/dist/utils/iterateOverDiff.d.ts.map +1 -1
  235. package/dist/utils/iterateOverDiff.js +94 -55
  236. package/dist/utils/iterateOverDiff.js.map +1 -1
  237. package/dist/utils/iterateOverFile.d.ts +50 -0
  238. package/dist/utils/iterateOverFile.d.ts.map +1 -0
  239. package/dist/utils/iterateOverFile.js +49 -0
  240. package/dist/utils/iterateOverFile.js.map +1 -0
  241. package/dist/utils/parseDiffDecorations.d.ts.map +1 -1
  242. package/dist/utils/parseDiffFromFile.d.ts +6 -6
  243. package/dist/utils/parseDiffFromFile.d.ts.map +1 -1
  244. package/dist/utils/parseDiffFromFile.js +3 -2
  245. package/dist/utils/parseDiffFromFile.js.map +1 -1
  246. package/dist/utils/parseLineType.d.ts +1 -1
  247. package/dist/utils/parseLineType.d.ts.map +1 -1
  248. package/dist/utils/parsePatchFiles.d.ts +12 -10
  249. package/dist/utils/parsePatchFiles.d.ts.map +1 -1
  250. package/dist/utils/parsePatchFiles.js +16 -9
  251. package/dist/utils/parsePatchFiles.js.map +1 -1
  252. package/dist/utils/prerenderHTMLIfNecessary.d.ts.map +1 -1
  253. package/dist/utils/processLine.d.ts.map +1 -1
  254. package/dist/utils/processLine.js +7 -24
  255. package/dist/utils/processLine.js.map +1 -1
  256. package/dist/utils/renderDiffWithHighlighter.d.ts +2 -2
  257. package/dist/utils/renderDiffWithHighlighter.d.ts.map +1 -1
  258. package/dist/utils/renderDiffWithHighlighter.js +15 -14
  259. package/dist/utils/renderDiffWithHighlighter.js.map +1 -1
  260. package/dist/utils/renderFileWithHighlighter.d.ts +7 -2
  261. package/dist/utils/renderFileWithHighlighter.d.ts.map +1 -1
  262. package/dist/utils/renderFileWithHighlighter.js +30 -4
  263. package/dist/utils/renderFileWithHighlighter.js.map +1 -1
  264. package/dist/utils/resolveVirtualFileMetrics.d.ts +7 -0
  265. package/dist/utils/resolveVirtualFileMetrics.d.ts.map +1 -0
  266. package/dist/utils/resolveVirtualFileMetrics.js +24 -0
  267. package/dist/utils/resolveVirtualFileMetrics.js.map +1 -0
  268. package/dist/utils/setLanguageOverride.d.ts.map +1 -1
  269. package/dist/utils/setWrapperNodeProps.d.ts +1 -0
  270. package/dist/utils/setWrapperNodeProps.d.ts.map +1 -1
  271. package/dist/utils/setWrapperNodeProps.js +19 -12
  272. package/dist/utils/setWrapperNodeProps.js.map +1 -1
  273. package/dist/utils/splitFileContents.d.ts +12 -0
  274. package/dist/utils/splitFileContents.d.ts.map +1 -0
  275. package/dist/utils/splitFileContents.js +17 -0
  276. package/dist/utils/splitFileContents.js.map +1 -0
  277. package/dist/utils/trimPatchContext.d.ts +5 -5
  278. package/dist/utils/trimPatchContext.d.ts.map +1 -1
  279. package/dist/worker/WorkerPoolManager.d.ts +2 -2
  280. package/dist/worker/WorkerPoolManager.d.ts.map +1 -1
  281. package/dist/worker/WorkerPoolManager.js +36 -24
  282. package/dist/worker/WorkerPoolManager.js.map +1 -1
  283. package/dist/worker/getOrCreateWorkerPoolSingleton.d.ts.map +1 -1
  284. package/dist/worker/getOrCreateWorkerPoolSingleton.js.map +1 -1
  285. package/dist/worker/types.d.ts +26 -26
  286. package/dist/worker/types.d.ts.map +1 -1
  287. package/dist/worker/worker-portable.js +323 -143
  288. package/dist/worker/worker-portable.js.map +1 -1
  289. package/dist/worker/worker.js +206 -106
  290. package/dist/worker/worker.js.map +1 -1
  291. package/package.json +52 -53
package/dist/style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region src/style.css
2
- var style_default = "@layer base, theme, unsafe;\n\n@layer base {\n :host {\n --diffs-bg: #fff;\n --diffs-fg: #000;\n --diffs-font-fallback:\n 'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n 'Courier New', monospace;\n --diffs-header-font-fallback:\n system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n 'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n --diffs-mixer: light-dark(black, white);\n --diffs-gap-fallback: 8px;\n\n /*\n // Available CSS Color Overrides\n --diffs-bg-buffer-override\n --diffs-bg-hover-override\n --diffs-bg-context-override\n --diffs-bg-separator-override\n\n --diffs-fg-number-override\n --diffs-fg-number-addition-override\n --diffs-fg-number-deletion-override\n\n --diffs-deletion-color-override\n --diffs-addition-color-override\n --diffs-modified-color-override\n\n --diffs-bg-deletion-override\n --diffs-bg-deletion-number-override\n --diffs-bg-deletion-hover-override\n --diffs-bg-deletion-emphasis-override\n\n --diffs-bg-addition-override\n --diffs-bg-addition-number-override\n --diffs-bg-addition-hover-override\n --diffs-bg-addition-emphasis-override\n\n // Line Selection Color Overrides (for enableLineSelection)\n --diffs-selection-color-override\n --diffs-bg-selection-override\n --diffs-bg-selection-number-override\n --diffs-bg-selection-background-override\n --diffs-bg-selection-number-background-override\n\n // Available CSS Layout Overrides\n --diffs-gap-inline\n --diffs-gap-block\n --diffs-gap-style\n --diffs-tab-size\n */\n\n color-scheme: light dark;\n display: block;\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n font-size: var(--diffs-font-size, 13px);\n line-height: var(--diffs-line-height, 20px);\n font-feature-settings: var(--diffs-font-features);\n }\n\n /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n pre,\n code,\n [data-error-wrapper] {\n isolation: isolate;\n margin: 0;\n padding: 0;\n display: block;\n outline: none;\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n [data-icon-sprite] {\n display: none;\n }\n\n /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n * their font-family explicitly. */\n [data-diffs-header],\n [data-separator] {\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n }\n\n [data-file-info] {\n padding: 10px;\n font-weight: 700;\n color: var(--fg);\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n }\n\n [data-diffs-header],\n [data-diffs],\n [data-error-wrapper] {\n --diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg));\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-buffer: var(\n --diffs-bg-buffer-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n )\n );\n --diffs-bg-hover: var(\n --diffs-bg-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer))\n )\n );\n --diffs-bg-context: var(\n --diffs-bg-context-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n )\n );\n --diffs-bg-separator: var(\n --diffs-bg-separator-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n )\n );\n\n --diffs-fg: light-dark(var(--diffs-light), var(--diffs-dark));\n --diffs-fg-number: var(\n --diffs-fg-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n )\n );\n\n --diffs-deletion-base: var(\n --diffs-deletion-color-override,\n light-dark(\n var(\n --diffs-light-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n ),\n var(\n --diffs-dark-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n )\n )\n );\n --diffs-addition-base: var(\n --diffs-addition-color-override,\n light-dark(\n var(\n --diffs-light-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n ),\n var(\n --diffs-dark-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n )\n )\n );\n --diffs-modified-base: var(\n --diffs-modified-color-override,\n light-dark(\n var(\n --diffs-light-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n ),\n var(\n --diffs-dark-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n )\n )\n );\n\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-deletion: var(\n --diffs-bg-deletion-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-number: var(\n --diffs-bg-deletion-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-hover: var(\n --diffs-bg-deletion-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-emphasis: var(\n --diffs-bg-deletion-emphasis-override,\n light-dark(\n rgb(from var(--diffs-deletion-base) r g b / 0.15),\n rgb(from var(--diffs-deletion-base) r g b / 0.2)\n )\n );\n\n --diffs-bg-addition: var(\n --diffs-bg-addition-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-number: var(\n --diffs-bg-addition-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-hover: var(\n --diffs-bg-addition-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-emphasis: var(\n --diffs-bg-addition-emphasis-override,\n light-dark(\n rgb(from var(--diffs-addition-base) r g b / 0.15),\n rgb(from var(--diffs-addition-base) r g b / 0.2)\n )\n );\n\n --diffs-selection-base: var(--diffs-modified-base);\n --diffs-selection-number-fg: light-dark(\n color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n );\n --diffs-bg-selection: var(\n --diffs-bg-selection-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base))\n )\n );\n --diffs-bg-selection-number: var(\n --diffs-bg-selection-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-selection-base))\n )\n );\n\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-diffs] {\n /* This feels a bit crazy to me... so I need to think about it a bit more... */\n --diffs-grid-number-column-width: minmax(min-content, max-content);\n --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n [data-column-content] span {\n color: light-dark(\n var(--diffs-token-light, var(--diffs-light)),\n var(--diffs-token-dark, var(--diffs-dark))\n );\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-light-text-decoration, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n }\n\n /* Since span is a pretty innocuous selector, we need to make sure we don't\n * apply tokenized BG colors to diff-spans */\n [data-column-content] span:not([data-diff-span]) {\n background-color: light-dark(\n var(--diffs-token-light-bg, inherit),\n var(--diffs-token-dark-bg, inherit)\n );\n }\n\n [data-column-content] {\n background-color: var(--diffs-line-bg, 'transparent');\n grid-column: 2 / 3;\n }\n\n [data-diffs][data-dehydrated] {\n --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n }\n\n @media (prefers-color-scheme: dark) {\n [data-diffs-header],\n [data-diffs] {\n color-scheme: dark;\n }\n\n [data-diffs] [data-column-content] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n }\n\n [data-diffs-header][data-theme-type='light'],\n [data-diffs][data-theme-type='light'] {\n color-scheme: light;\n }\n\n [data-diffs][data-theme-type='light'] [data-column-content] span {\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-light-text-decoration, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n\n [data-diffs-header][data-theme-type='dark'],\n [data-diffs][data-theme-type='dark'] {\n color-scheme: dark;\n }\n\n [data-diffs][data-theme-type='dark'] [data-column-content] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n\n [data-type='split'][data-overflow='wrap'] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: repeat(2, var(--diffs-code-grid));\n }\n\n [data-type='split'][data-overflow='scroll'] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2px;\n }\n\n [data-code] {\n display: block;\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: var(--diffs-code-grid);\n overflow: scroll clip;\n overscroll-behavior-x: none;\n tab-size: var(--diffs-tab-size, 2);\n align-self: flex-start;\n padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n padding-bottom: max(\n 0px,\n calc(var(--diffs-gap-block, var(--diffs-gap-fallback)) - 6px)\n );\n }\n\n [data-code]::-webkit-scrollbar {\n width: 0;\n height: 6px;\n }\n\n [data-code]::-webkit-scrollbar-track {\n background: transparent;\n }\n\n [data-code]::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 1px solid transparent;\n background-clip: content-box;\n border-radius: 3px;\n }\n\n [data-diffs]:hover [data-code]::-webkit-scrollbar-thumb {\n background-color: var(--diffs-bg-context);\n }\n\n [data-code]::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n /*\n * If we apply these rules globally it will mean that webkit will opt into the\n * standards compliant version of custom css scrollbars, which we do not want\n * because the custom stuff will look better\n */\n @supports (-moz-appearance: none) {\n [data-code] {\n scrollbar-width: thin;\n scrollbar-color: var(--diffs-bg-context) transparent;\n padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n }\n\n [data-diffs][data-type='split'][data-overflow='wrap'] {\n padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-diffs-header] ~ [data-diffs] [data-code],\n [data-diffs-header] ~ [data-diffs][data-overflow='wrap'] {\n padding-top: 0;\n }\n\n [data-type='split'][data-overflow='wrap'] [data-code] {\n display: contents;\n }\n\n [data-line-annotation],\n [data-no-newline],\n [data-line] {\n position: relative;\n display: grid;\n grid-template-columns: subgrid;\n grid-column: 1 / 3;\n }\n\n [data-line-annotation][data-selected-line] {\n background-color: unset;\n\n &::before {\n content: '';\n position: sticky;\n top: 0;\n left: 0;\n display: block;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-annotation-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-interactive-lines] [data-line] {\n cursor: pointer;\n }\n\n [data-buffer] {\n display: grid;\n grid-column: 1 / 3;\n grid-template-columns: subgrid;\n -webkit-user-select: none;\n user-select: none;\n /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(4px * 1.414)\n );\n min-height: 1lh;\n /* lol not sure this is worth it… */\n /* position: sticky; */\n /* left: 0; */\n /* width: var(--diffs-column-width, auto); */\n /* background-attachment: fixed; */\n\n &::before,\n &::after {\n content: '';\n display: block;\n }\n\n &::before {\n box-sizing: content-box;\n padding-left: 2ch;\n padding-right: 1ch;\n border-left: 4px solid transparent;\n border-right: 1px solid transparent;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n }\n }\n\n [data-separator] {\n grid-column: span 2;\n }\n\n [data-separator='metadata'],\n [data-separator]:empty {\n min-height: 4px;\n background-color: var(--diffs-bg-separator);\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-separator-wrapper] {\n -webkit-user-select: none;\n user-select: none;\n fill: currentColor;\n overflow: hidden;\n }\n\n [data-separator='metadata'] [data-separator-wrapper] {\n grid-column: 2 / 3;\n width: var(--diffs-column-content-width);\n position: sticky;\n left: var(--diffs-column-number-width);\n padding: 4px 1ch;\n }\n\n [data-separator='line-info'] {\n margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-separator='line-info'][data-separator-first] {\n margin-top: 0;\n }\n\n [data-separator='line-info'][data-separator-last] {\n margin-bottom: 0;\n }\n\n [data-separator='line-info'] [data-separator-wrapper] {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n width: auto;\n width: calc(var(--diffs-column-width) - var(--diffs-gap-fallback));\n border-radius: 6px;\n }\n\n [data-overflow='scroll']\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n }\n\n @media (pointer: fine) {\n [data-separator-wrapper][data-separator-multi-button] {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: 15px 15px;\n\n [data-expand-button] {\n height: 15px;\n }\n }\n\n [data-type='split']\n [data-additions]\n [data-separator-wrapper][data-separator-multi-button] {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n\n [data-type='split'] [data-additions] [data-expand-button] {\n grid-column: 2;\n }\n\n [data-type='split'] [data-additions] [data-separator-content] {\n grid-column: 1;\n }\n }\n\n [data-expand-button],\n [data-separator-content] {\n display: flex;\n align-items: center;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-expand-button] {\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n width: 32px;\n height: 32px;\n opacity: 0.65;\n }\n\n [data-hover-slot] {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n justify-content: flex-end;\n }\n\n @media (pointer: fine) {\n [data-expand-button]:hover {\n opacity: 1;\n }\n\n /* FIXME(amadeus): We need to figure out how/when to apply hover effects in\n * a more performant way because it'll trigger layout/paint re-calcs\n * probably when we dont want them... */\n [data-line]:hover {\n z-index: 2;\n }\n }\n\n [data-expand-down] [data-icon] {\n transform: scaleY(-1);\n }\n\n [data-separator-content] {\n flex: 1 1 auto;\n padding: 0 1ch;\n height: 32px;\n opacity: 0.65;\n overflow: hidden;\n justify-content: flex-start;\n\n grid-column: 2;\n grid-row: 1 / -1;\n }\n\n [data-unmodified-lines] {\n display: block;\n overflow: hidden;\n min-width: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 0 1 auto;\n }\n\n [data-type='split'] [data-additions] [data-separator-content] {\n justify-content: flex-end;\n }\n\n [data-type='file']\n [data-code]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n width: calc(\n var(--diffs-column-width) -\n (var(--diffs-gap-inline, var(--diffs-gap-fallback)) * 2)\n );\n }\n\n [data-type='split']\n [data-deletions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [data-type='file'][data-overflow='scroll'],\n [data-type='split'][data-overflow='scroll'] {\n [data-deletions] [data-separator='line-info'] [data-separator-wrapper] {\n left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-type='split']\n [data-additions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-direction: row-reverse;\n }\n\n [data-type='split'][data-overflow='scroll']\n [data-additions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n left: 0;\n }\n\n [data-line] {\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-type='split'][data-overflow='wrap'] [data-deletions] {\n [data-line-annotation],\n [data-buffer],\n [data-line],\n [data-separator],\n [data-virtualized-buffer],\n [data-no-newline] {\n margin-right: 1px;\n grid-column: 1 / 3;\n }\n }\n\n [data-line-annotation] {\n min-height: var(--diffs-annotation-min-height, 0);\n background-color: var(--diffs-bg-context);\n z-index: 3;\n }\n\n [data-type='split'][data-overflow='wrap'] [data-additions] {\n [data-line-annotation],\n [data-buffer],\n [data-line],\n [data-separator],\n [data-virtualized-buffer],\n [data-no-newline] {\n margin-left: 1px;\n grid-column: 3 / 5;\n }\n }\n\n [data-separator='custom'] {\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-column-content],\n [data-column-number] {\n position: relative;\n padding-inline: 1ch;\n }\n\n [data-indicators='classic'] [data-column-content] {\n padding-inline-start: 2ch;\n }\n\n [data-indicators='classic'] {\n [data-line-type='change-addition'] [data-column-content]::before,\n [data-line-type='change-deletion'] [data-column-content]::before {\n display: inline-block;\n width: 1ch;\n height: 1lh;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n [data-line-type='change-addition'] [data-column-content]::before {\n content: '+';\n color: var(--diffs-addition-base);\n }\n\n [data-line-type='change-deletion'] [data-column-content]::before {\n content: '-';\n color: var(--diffs-deletion-base);\n }\n }\n\n [data-indicators='bars'] {\n [data-line-type='change-deletion'],\n [data-line-type='change-addition'] {\n [data-column-number]::before {\n content: '';\n display: block;\n width: 4px;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-user-select: none;\n user-select: none;\n contain: strict;\n }\n }\n\n [data-line-type='change-deletion'] [data-column-number]::before {\n background-image: linear-gradient(\n 0deg,\n var(--diffs-bg-deletion) 50%,\n var(--diffs-deletion-base) 50%\n );\n background-repeat: repeat;\n background-size: 2px 2px;\n background-size: calc(1lh / round(1lh / 2px)) calc(1lh / round(1lh / 2px));\n }\n\n [data-line-type='change-addition'] [data-column-number]::before {\n background-color: var(--diffs-addition-base);\n }\n }\n\n [data-overflow='wrap'] [data-column-content],\n [data-overflow='wrap'] [data-annotation-content] {\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n [data-overflow='scroll'] [data-column-content] {\n white-space: pre;\n min-height: 1lh;\n }\n\n [data-column-number] {\n grid-column: 1 / 2;\n box-sizing: content-box;\n text-align: right;\n -webkit-user-select: none;\n user-select: none;\n background-color: var(--diffs-bg);\n color: var(--diffs-fg-number);\n z-index: 1;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n padding-left: 2ch;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n }\n\n [data-overflow='scroll'] [data-column-number] {\n position: sticky;\n left: 0;\n }\n\n [data-disable-line-numbers] {\n &[data-indicators='bars'] [data-column-number] {\n min-width: 4px;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n }\n\n [data-column-number],\n [data-buffer]::before {\n min-width: 0;\n padding: 0;\n }\n\n [data-line-number-content] {\n display: none;\n }\n\n [data-hover-slot] {\n right: unset;\n left: 0;\n justify-content: flex-start;\n }\n\n &[data-indicators='bars'] [data-hover-slot] {\n /* Using 5px here because theres a 1px separator after the bar */\n left: 5px;\n }\n }\n\n [data-interactive-line-numbers] [data-column-number] {\n cursor: pointer;\n }\n\n [data-diff-span] {\n border-radius: 3px;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n }\n\n [data-line-type='change-addition'] {\n [data-column-number] {\n color: var(\n --diffs-fg-number-addition-override,\n var(--diffs-addition-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-addition-emphasis);\n }\n }\n\n [data-line-type='change-deletion'] {\n [data-column-number] {\n color: var(\n --diffs-fg-number-deletion-override,\n var(--diffs-deletion-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-deletion-emphasis);\n }\n }\n\n [data-background] [data-line-type='change-addition'] {\n --diffs-line-bg: var(--diffs-bg-addition);\n\n [data-column-number] {\n background-color: var(--diffs-bg-addition-number);\n }\n }\n\n [data-background] [data-line-type='change-deletion'] {\n --diffs-line-bg: var(--diffs-bg-deletion);\n\n [data-column-number] {\n background-color: var(--diffs-bg-deletion-number);\n }\n }\n\n /* By wrapping hovers in a pointer: fine, we ensure that mobile devices don't\n * require a double click */\n @media (pointer: fine) {\n [data-line]:hover:not([data-selected-line]) {\n [data-column-number],\n [data-column-content] {\n background-color: var(--diffs-bg-hover);\n }\n }\n\n [data-background] [data-line]:hover:not([data-selected-line]) {\n &[data-line-type='change-deletion'] [data-column-number],\n &[data-line-type='change-deletion'] [data-column-content] {\n background-color: var(--diffs-bg-deletion-hover);\n }\n\n &[data-line-type='change-addition'] [data-column-number],\n &[data-line-type='change-addition'] [data-column-content] {\n background-color: var(--diffs-bg-addition-hover);\n }\n }\n }\n\n [data-diffs-header] {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-height: calc(\n 1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n );\n padding-inline: 16px;\n top: 0;\n z-index: 2;\n }\n\n [data-header-content] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-header-content] [data-prev-name],\n [data-header-content] [data-title] {\n direction: rtl;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-prev-name] {\n opacity: 0.7;\n }\n\n [data-rename-icon] {\n fill: currentColor;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n [data-diffs-header] [data-metadata] {\n display: flex;\n align-items: center;\n gap: 1ch;\n white-space: nowrap;\n }\n\n [data-diffs-header] [data-additions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-addition-base);\n }\n\n [data-diffs-header] [data-deletions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-deletion-base);\n }\n\n [data-no-newline] {\n -webkit-user-select: none;\n user-select: none;\n\n [data-column-content] {\n opacity: 0.6;\n }\n }\n\n [data-annotation-content] {\n position: relative;\n grid-column: 2 / -1;\n width: var(--diffs-column-content-width, auto);\n align-self: flex-start;\n z-index: 2;\n height: 100%;\n }\n\n /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n * need to */\n [data-overflow='scroll'] [data-annotation-content] {\n position: sticky;\n left: var(--diffs-column-number-width, 0);\n }\n\n /* Undo some of the stuff that the 'pre' tag does */\n [data-annotation-slot] {\n text-wrap-mode: wrap;\n word-break: normal;\n white-space-collapse: collapse;\n }\n\n [data-change-icon] {\n fill: currentColor;\n flex-shrink: 0;\n }\n\n [data-change-icon='change'],\n [data-change-icon='rename-pure'],\n [data-change-icon='rename-changed'] {\n color: var(--diffs-modified-base);\n }\n\n [data-change-icon='new'] {\n color: var(--diffs-addition-base);\n }\n\n [data-change-icon='deleted'] {\n color: var(--diffs-deletion-base);\n }\n\n [data-change-icon='file'] {\n opacity: 0.6;\n }\n\n /* Line selection highlighting */\n [data-line-type='context'][data-selected-line] {\n [data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-column-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-selected-line] {\n [data-column-content] {\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 82%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n )\n );\n }\n\n [data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 60%,\n var(--diffs-selection-base)\n )\n );\n }\n }\n }\n\n [data-error-wrapper] {\n overflow: auto;\n padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n var(--diffs-gap-inline, var(--diffs-gap-fallback));\n max-height: 400px;\n scrollbar-width: none;\n\n [data-error-message] {\n font-weight: bold;\n font-size: 18px;\n color: var(--diffs-deletion-base);\n }\n\n [data-error-stack] {\n color: var(--diffs-fg-number);\n }\n }\n\n [data-virtualized-buffer] {\n /* for blanking debugging purposes */\n /* background-color: red; */\n grid-column: 1 / 3;\n }\n}\n";
2
+ var style_default = "@layer base, theme, unsafe;\n\n@layer base {\n :host {\n --diffs-bg: #fff;\n --diffs-fg: #000;\n --diffs-font-fallback:\n 'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n 'Courier New', monospace;\n --diffs-header-font-fallback:\n system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n 'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n --diffs-mixer: light-dark(black, white);\n --diffs-gap-fallback: 8px;\n\n /*\n // Available CSS Color Overrides\n --diffs-bg-buffer-override\n --diffs-bg-hover-override\n --diffs-bg-context-override\n --diffs-bg-separator-override\n\n --diffs-fg-number-override\n --diffs-fg-number-addition-override\n --diffs-fg-number-deletion-override\n\n --diffs-deletion-color-override\n --diffs-addition-color-override\n --diffs-modified-color-override\n\n --diffs-bg-deletion-override\n --diffs-bg-deletion-number-override\n --diffs-bg-deletion-hover-override\n --diffs-bg-deletion-emphasis-override\n\n --diffs-bg-addition-override\n --diffs-bg-addition-number-override\n --diffs-bg-addition-hover-override\n --diffs-bg-addition-emphasis-override\n\n // Line Selection Color Overrides (for enableLineSelection)\n --diffs-selection-color-override\n --diffs-bg-selection-override\n --diffs-bg-selection-number-override\n --diffs-bg-selection-background-override\n --diffs-bg-selection-number-background-override\n\n // Available CSS Layout Overrides\n --diffs-gap-inline\n --diffs-gap-block\n --diffs-gap-style\n --diffs-tab-size\n */\n\n color-scheme: light dark;\n display: block;\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n font-size: var(--diffs-font-size, 13px);\n line-height: var(--diffs-line-height, 20px);\n font-feature-settings: var(--diffs-font-features);\n }\n\n /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n pre,\n code,\n [data-error-wrapper] {\n isolation: isolate;\n margin: 0;\n padding: 0;\n display: block;\n outline: none;\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n }\n\n pre,\n code {\n contain: content;\n background-color: var(--diffs-bg);\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n [data-icon-sprite] {\n display: none;\n }\n\n /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n * their font-family explicitly. */\n [data-diffs-header],\n [data-separator] {\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n }\n\n [data-file-info] {\n padding: 10px;\n font-weight: 700;\n color: var(--fg);\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n }\n\n [data-diffs-header],\n [data-diff],\n [data-file],\n [data-error-wrapper],\n [data-virtualizer-buffer] {\n --diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg));\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-buffer: var(\n --diffs-bg-buffer-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n )\n );\n --diffs-bg-hover: var(\n --diffs-bg-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer))\n )\n );\n\n --diffs-bg-context: var(\n --diffs-bg-context-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n )\n );\n --diffs-bg-context-number: var(\n --diffs-bg-context-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg-context) 80%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-bg-context) 60%, var(--diffs-bg))\n )\n );\n\n --diffs-bg-separator: var(\n --diffs-bg-separator-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n )\n );\n\n --diffs-fg: light-dark(var(--diffs-light), var(--diffs-dark));\n --diffs-fg-number: var(\n --diffs-fg-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n )\n );\n\n --diffs-deletion-base: var(\n --diffs-deletion-color-override,\n light-dark(\n var(\n --diffs-light-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n ),\n var(\n --diffs-dark-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n )\n )\n );\n --diffs-addition-base: var(\n --diffs-addition-color-override,\n light-dark(\n var(\n --diffs-light-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n ),\n var(\n --diffs-dark-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n )\n )\n );\n --diffs-modified-base: var(\n --diffs-modified-color-override,\n light-dark(\n var(\n --diffs-light-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n ),\n var(\n --diffs-dark-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n )\n )\n );\n\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-deletion: var(\n --diffs-bg-deletion-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-number: var(\n --diffs-bg-deletion-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-hover: var(\n --diffs-bg-deletion-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-emphasis: var(\n --diffs-bg-deletion-emphasis-override,\n light-dark(\n rgb(from var(--diffs-deletion-base) r g b / 0.15),\n rgb(from var(--diffs-deletion-base) r g b / 0.2)\n )\n );\n\n --diffs-bg-addition: var(\n --diffs-bg-addition-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-number: var(\n --diffs-bg-addition-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-hover: var(\n --diffs-bg-addition-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-emphasis: var(\n --diffs-bg-addition-emphasis-override,\n light-dark(\n rgb(from var(--diffs-addition-base) r g b / 0.15),\n rgb(from var(--diffs-addition-base) r g b / 0.2)\n )\n );\n\n --diffs-selection-base: var(--diffs-modified-base);\n --diffs-selection-number-fg: light-dark(\n color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n );\n --diffs-bg-selection: var(\n --diffs-bg-selection-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base))\n )\n );\n --diffs-bg-selection-number: var(\n --diffs-bg-selection-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-selection-base))\n )\n );\n\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-diff],\n [data-file] {\n /* This feels a bit crazy to me... so I need to think about it a bit more... */\n --diffs-grid-number-column-width: minmax(min-content, max-content);\n --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n &[data-dehydrated] {\n --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n }\n\n &[data-theme-type='light'],\n & {\n [data-line] span {\n color: light-dark(\n var(--diffs-token-light, var(--diffs-light)),\n var(--diffs-token-dark, var(--diffs-dark))\n );\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-light-text-decoration, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n }\n\n &[data-theme-type='dark'] [data-line] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n\n &:hover [data-code]::-webkit-scrollbar-thumb {\n background-color: var(--diffs-bg-context);\n }\n }\n\n [data-line] span {\n background-color: light-dark(\n var(--diffs-token-light-bg, inherit),\n var(--diffs-token-dark-bg, inherit)\n );\n }\n\n [data-line],\n [data-gutter-buffer],\n [data-line-annotation],\n [data-no-newline] {\n color: var(--diffs-fg);\n background-color: var(--diffs-line-bg, var(--diffs-bg));\n }\n\n [data-virtualizer-buffer] {\n background-color: var(--diffs-bg);\n }\n\n [data-no-newline] {\n -webkit-user-select: none;\n user-select: none;\n\n span {\n opacity: 0.6;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-diffs-header],\n [data-error-wrapper],\n [data-diff],\n [data-file] {\n color-scheme: dark;\n }\n\n [data-content] [data-line] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n -webkit-text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n }\n\n [data-diffs-header],\n [data-diff],\n [data-file] {\n &[data-theme-type='light'] {\n color-scheme: light;\n }\n\n &[data-theme-type='dark'] {\n color-scheme: dark;\n }\n }\n\n [data-diff-type='split'][data-overflow='scroll'] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n\n [data-additions] {\n border-left: 1px solid var(--diffs-bg);\n }\n\n [data-deletions] {\n border-right: 1px solid var(--diffs-bg);\n }\n }\n\n [data-code] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: var(--diffs-code-grid);\n overflow: scroll clip;\n overscroll-behavior-x: none;\n tab-size: var(--diffs-tab-size, 2);\n align-self: flex-start;\n padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n padding-bottom: max(\n 0px,\n calc(var(--diffs-gap-block, var(--diffs-gap-fallback)) - 6px)\n );\n }\n\n [data-code]::-webkit-scrollbar {\n width: 0;\n height: 6px;\n }\n\n [data-code]::-webkit-scrollbar-track {\n background: transparent;\n }\n\n [data-code]::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 1px solid transparent;\n background-clip: content-box;\n border-radius: 3px;\n }\n\n [data-code]::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n /*\n * If we apply these rules globally it will mean that webkit will opt into the\n * standards compliant version of custom css scrollbars, which we do not want\n * because the custom stuff will look better\n */\n @supports (-moz-appearance: none) {\n [data-code] {\n scrollbar-width: thin;\n scrollbar-color: var(--diffs-bg-context) transparent;\n padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n }\n\n [data-diffs-header] ~ [data-diff],\n [data-diffs-header] ~ [data-file] {\n [data-code],\n &[data-overflow='wrap'] {\n padding-top: 0;\n }\n }\n\n [data-gutter] {\n display: grid;\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n grid-column: 1;\n z-index: 3;\n position: relative;\n background-color: var(--diffs-bg);\n\n [data-gutter-buffer],\n [data-column-number] {\n border-right: var(--diffs-gap-style, 2px solid var(--diffs-bg));\n }\n }\n\n [data-content] {\n display: grid;\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n grid-column: 2;\n min-width: 0;\n }\n\n [data-diff-type='split'][data-overflow='wrap'] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: repeat(2, var(--diffs-code-grid));\n padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n [data-deletions] {\n display: contents;\n\n [data-gutter] {\n grid-column: 1;\n }\n\n [data-content] {\n grid-column: 2;\n border-right: 1px solid var(--diffs-bg);\n }\n }\n\n [data-additions] {\n display: contents;\n\n [data-gutter] {\n grid-column: 3;\n border-left: 1px solid var(--diffs-bg);\n }\n\n [data-content] {\n grid-column: 4;\n }\n }\n }\n\n [data-overflow='scroll'] [data-gutter] {\n position: sticky;\n left: 0;\n }\n\n [data-line-annotation][data-selected-line] {\n background-color: unset;\n\n &::before {\n content: '';\n /* FIXME(amadeus): This needs to be audited ... */\n position: sticky;\n top: 0;\n left: 0;\n display: block;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-annotation-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-interactive-lines] [data-line] {\n cursor: pointer;\n }\n\n [data-content-buffer],\n [data-gutter-buffer] {\n position: relative;\n -webkit-user-select: none;\n user-select: none;\n min-height: 1lh;\n }\n\n [data-gutter-buffer='annotation'] {\n min-height: 0;\n }\n\n [data-gutter-buffer='buffer'] {\n background-size: 8px 8px;\n background-position: 0 0;\n background-origin: border-box;\n background-color: var(--diffs-bg);\n /* This is incredibley expensive... */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n rgb(from var(--diffs-bg-buffer) r g b / 0.8) calc(3px * 1.414),\n rgb(from var(--diffs-bg-buffer) r g b / 0.8) calc(4px * 1.414)\n );\n }\n\n [data-content-buffer] {\n grid-column: 1;\n /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n background-size: 8px 8px;\n background-position: 5px 0;\n background-origin: border-box;\n background-color: var(--diffs-bg);\n /* This is incredibley expensive... */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(4px * 1.414)\n );\n }\n\n [data-separator] {\n box-sizing: content-box;\n background-color: var(--diffs-bg);\n }\n\n [data-separator='simple'] {\n margin-right: -2px;\n }\n\n [data-separator='simple'],\n [data-separator='metadata'],\n [data-separator]:empty {\n min-height: 4px;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-separator='metadata'] {\n min-height: 1lh;\n }\n\n [data-separator-wrapper] {\n position: absolute;\n -webkit-user-select: none;\n user-select: none;\n fill: currentColor;\n overflow: hidden;\n background-color: var(--diffs-bg);\n }\n\n [data-separator='metadata'] [data-separator-wrapper] {\n width: var(--diffs-column-content-width);\n padding-inline: 1ch;\n height: 32px;\n background-color: var(--diffs-bg-separator);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [data-separator='line-info'],\n [data-separator='metadata'] {\n height: 32px;\n position: relative;\n }\n [data-separator='line-info'] {\n margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-separator='line-info'][data-separator-first],\n [data-separator='metadata'][data-separator-first] {\n margin-top: 0;\n }\n\n [data-separator='line-info'][data-separator-last],\n [data-separator='metadata'][data-separator-last] {\n margin-bottom: 0;\n }\n\n [data-separator='line-info'] [data-separator-wrapper],\n [data-separator='metadata'] [data-separator-wrapper] {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 2px;\n width: auto;\n }\n\n [data-diff-type='split']\n [data-additions]\n [data-content]\n [data-separator-wrapper] {\n display: flex;\n flex-direction: row-reverse;\n }\n\n [data-expand-button],\n [data-separator-content] {\n display: flex;\n align-items: center;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-expand-button] {\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n width: 32px;\n height: 32px;\n color: var(--diffs-fg-number);\n\n &:hover {\n color: var(--diffs-fg);\n }\n }\n\n [data-hover-slot] {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n justify-content: flex-end;\n }\n\n @media (pointer: fine) {\n /* FIXME(amadeus): We need to figure out how/when to apply hover effects in\n * a more performant way because it'll trigger layout/paint re-calcs\n * probably when we dont want them... */\n /* [data-line]:hover { */\n /* z-index: 2; */\n /* } */\n }\n\n [data-expand-down] [data-icon] {\n transform: scaleY(-1);\n }\n\n [data-separator-content] {\n flex: 1 1 auto;\n padding: 0 1ch;\n height: 32px;\n color: var(--diffs-fg-number);\n\n overflow: hidden;\n justify-content: flex-start;\n\n grid-column: 2;\n grid-row: 1 / -1;\n }\n\n [data-separator='line-info'] [data-separator-content] {\n height: 32px;\n -webkit-user-select: none;\n user-select: none;\n overflow: clip;\n }\n\n [data-unmodified-lines] {\n display: block;\n overflow: hidden;\n min-width: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 0 1 auto;\n }\n\n [data-diff-type='split'] [data-additions] [data-separator-content] {\n justify-content: flex-end;\n }\n\n [data-unified] {\n [data-gutter] {\n [data-separator='line-info'] [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n\n [data-separator-content] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n [data-separator='line-info'][data-expand-index]\n [data-separator-wrapper]\n [data-separator-content] {\n border-top-left-radius: unset;\n border-bottom-left-radius: unset;\n }\n }\n\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n display: flex;\n flex-direction: row-reverse;\n\n [data-separator-wrapper] {\n display: flex;\n background-color: var(--diffs-bg);\n padding-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n gap: 0;\n\n [data-separator-content] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n width: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n\n [data-expand-button] {\n display: none;\n }\n }\n }\n }\n\n [data-overflow='scroll']\n [data-unified]\n [data-content]\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n right: 0;\n }\n\n [data-deletions] {\n [data-gutter] {\n [data-separator='line-info'] {\n [data-separator-wrapper] {\n background-color: var(--diffs-bg);\n padding-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-separator-content] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n [data-content] {\n [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n }\n }\n\n [data-additions] {\n [data-gutter] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n\n [data-content] {\n [data-separator='line-info'] {\n display: flex;\n flex-direction: row-reverse;\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n background-color: var(--diffs-bg);\n padding-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-separator-content] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n [data-overflow='scroll']\n [data-additions]\n [data-content]\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n right: 0;\n }\n\n [data-deletions],\n [data-additions] {\n [data-separator='line-info'][data-expand-index] [data-separator-content] {\n border-radius: unset;\n }\n }\n\n @media (pointer: coarse) {\n [data-unified] [data-gutter],\n [data-diff-type='split'] [data-deletions] [data-gutter] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n [data-expand-down] {\n border-bottom-left-radius: unset;\n border-top-left-radius: unset;\n }\n }\n }\n }\n\n [data-diff-type='split'] [data-additions] [data-content] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n [data-expand-down] {\n border-bottom-right-radius: unset;\n border-top-right-radius: unset;\n }\n }\n }\n\n [data-expand-button] {\n grid-column: 2;\n }\n\n [data-separator-content] {\n grid-column: 1;\n }\n }\n }\n\n @media (pointer: fine) {\n [data-separator-wrapper][data-separator-multi-button] {\n display: grid;\n grid-template-columns: auto min-content;\n grid-template-rows: 15px 15px;\n\n [data-expand-button] {\n height: 15px;\n }\n }\n\n [data-unified] [data-gutter],\n [data-deletions] [data-gutter] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: unset;\n }\n\n [data-expand-down] {\n border-bottom-left-radius: 6px;\n border-top-left-radius: unset;\n }\n }\n }\n }\n\n [data-additions] [data-content] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n display: grid;\n grid-template-columns: min-content auto;\n\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: unset;\n }\n\n [data-expand-down] {\n border-bottom-right-radius: 6px;\n border-top-right-radius: unset;\n }\n }\n }\n\n [data-expand-button] {\n grid-column: 2;\n }\n\n [data-separator-content] {\n grid-column: 1;\n }\n }\n }\n\n [data-diff-type='split']\n [data-deletions]\n [data-gutter]\n [data-separator='line-info']\n [data-separator-wrapper] {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [data-diff-type='split'] [data-deletions] {\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-sepatator-wrapper] {\n display: none;\n }\n }\n }\n\n [data-diff-type='split'] [data-additions] {\n [data-gutter] [data-separator='line-info'] {\n [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n }\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-direction: row-reverse;\n }\n }\n }\n\n [data-line-annotation],\n [data-gutter-buffer='annotation'] {\n --diffs-line-bg: var(--diffs-bg-context);\n }\n\n [data-line-annotation] {\n min-height: var(--diffs-annotation-min-height, 0);\n z-index: 2;\n }\n\n [data-separator='custom'] {\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-line],\n [data-column-number],\n [data-no-newline] {\n position: relative;\n padding-inline: 1ch;\n }\n\n [data-indicators='classic'] [data-line] {\n padding-inline-start: 2ch;\n }\n\n [data-indicators='classic'] {\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-no-newline],\n &[data-line] {\n &::before {\n display: inline-block;\n width: 1ch;\n height: 1lh;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n }\n }\n\n [data-line-type='change-addition'] {\n &[data-line],\n &[data-no-newline] {\n &::before {\n content: '+';\n color: var(--diffs-addition-base);\n }\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-line],\n &[data-no-newline] {\n &::before {\n content: '-';\n color: var(--diffs-deletion-base);\n }\n }\n }\n }\n\n [data-indicators='bars'] {\n [data-line-type='change-deletion'],\n [data-line-type='change-addition'] {\n &[data-column-number] {\n &::before {\n content: '';\n display: block;\n width: 4px;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-user-select: none;\n user-select: none;\n contain: strict;\n }\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-column-number] {\n &::before {\n background-image: linear-gradient(\n 0deg,\n var(--diffs-bg-deletion) 50%,\n var(--diffs-deletion-base) 50%\n );\n background-repeat: repeat;\n background-size: 2px 2px;\n background-size: calc(1lh / round(1lh / 2px))\n calc(1lh / round(1lh / 2px));\n }\n }\n }\n\n [data-line-type='change-addition'] {\n &[data-column-number] {\n &::before {\n background-color: var(--diffs-addition-base);\n }\n }\n }\n }\n\n [data-overflow='wrap'] {\n [data-line],\n [data-annotation-content] {\n white-space: pre-wrap;\n word-break: break-word;\n }\n }\n\n [data-overflow='scroll'] [data-line] {\n white-space: pre;\n min-height: 1lh;\n }\n\n [data-column-number] {\n box-sizing: content-box;\n text-align: right;\n -webkit-user-select: none;\n user-select: none;\n background-color: var(--diffs-bg);\n color: var(--diffs-fg-number);\n padding-left: 2ch;\n }\n\n [data-line-number-content] {\n display: inline-block;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n }\n\n [data-disable-line-numbers] {\n [data-column-number] {\n min-width: 4px;\n padding: 0;\n }\n\n [data-line-number-content] {\n display: none;\n }\n\n [data-hover-slot] {\n right: unset;\n left: 0;\n justify-content: flex-start;\n }\n\n &[data-indicators='bars'] [data-hover-slot] {\n /* Using 5px here because theres a 1px separator after the bar */\n left: 5px;\n }\n }\n\n [data-file][data-disable-line-numbers] {\n [data-gutter-buffer],\n [data-column-number] {\n min-width: 0;\n border-right: 0;\n }\n }\n\n [data-interactive-line-numbers] [data-column-number] {\n cursor: pointer;\n }\n\n [data-diff-span] {\n border-radius: 3px;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n }\n\n [data-line-type='change-addition'] {\n &[data-column-number] {\n color: var(\n --diffs-fg-number-addition-override,\n var(--diffs-addition-base)\n );\n }\n\n > [data-diff-span] {\n background-color: var(--diffs-bg-addition-emphasis);\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-column-number] {\n color: var(\n --diffs-fg-number-deletion-override,\n var(--diffs-deletion-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-deletion-emphasis);\n }\n }\n\n [data-background] [data-line-type='change-addition'] {\n --diffs-line-bg: var(--diffs-bg-addition);\n\n &[data-column-number] {\n background-color: var(--diffs-bg-addition-number);\n }\n }\n\n [data-background] [data-line-type='change-deletion'] {\n --diffs-line-bg: var(--diffs-bg-deletion);\n\n &[data-column-number] {\n background-color: var(--diffs-bg-deletion-number);\n }\n }\n\n @media (pointer: fine) {\n [data-column-number],\n [data-line] {\n &[data-hovered] {\n background-color: var(--diffs-bg-hover);\n }\n }\n\n [data-background] {\n [data-column-number],\n [data-line] {\n &[data-hovered] {\n &[data-line-type='change-deletion'] {\n background-color: var(--diffs-bg-deletion-hover);\n }\n\n &[data-line-type='change-addition'] {\n background-color: var(--diffs-bg-addition-hover);\n }\n }\n }\n }\n }\n\n [data-diffs-header] {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-height: calc(\n 1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n );\n padding-inline: 16px;\n top: 0;\n z-index: 2;\n }\n\n [data-header-content] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-header-content] [data-prev-name],\n [data-header-content] [data-title] {\n direction: rtl;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-prev-name] {\n opacity: 0.7;\n }\n\n [data-rename-icon] {\n fill: currentColor;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n [data-diffs-header] [data-metadata] {\n display: flex;\n align-items: center;\n gap: 1ch;\n white-space: nowrap;\n }\n\n [data-diffs-header] [data-additions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-addition-base);\n }\n\n [data-diffs-header] [data-deletions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-deletion-base);\n }\n\n [data-annotation-content] {\n position: relative;\n display: flow-root;\n align-self: flex-start;\n z-index: 2;\n min-width: 0;\n isolation: isolate;\n }\n\n /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n * need to */\n [data-overflow='scroll'] [data-annotation-content] {\n position: sticky;\n width: var(--diffs-column-content-width, auto);\n left: var(--diffs-column-number-width, 0);\n }\n\n /* Undo some of the stuff that the 'pre' tag does */\n [data-annotation-slot] {\n text-wrap-mode: wrap;\n word-break: normal;\n white-space-collapse: collapse;\n }\n\n [data-change-icon] {\n fill: currentColor;\n flex-shrink: 0;\n }\n\n [data-change-icon='change'],\n [data-change-icon='rename-pure'],\n [data-change-icon='rename-changed'] {\n color: var(--diffs-modified-base);\n }\n\n [data-change-icon='new'] {\n color: var(--diffs-addition-base);\n }\n\n [data-change-icon='deleted'] {\n color: var(--diffs-deletion-base);\n }\n\n [data-change-icon='file'] {\n opacity: 0.6;\n }\n\n /* Line selection highlighting */\n [data-selected-line] {\n &[data-gutter-buffer='annotation'],\n &[data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: var(--diffs-bg-selection-number);\n }\n\n &[data-line] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-selected-line] {\n &[data-line],\n &[data-line][data-hovered] {\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 82%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n )\n );\n }\n\n &[data-column-number],\n &[data-column-number][data-hovered] {\n color: var(--diffs-selection-number-fg);\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 60%,\n var(--diffs-selection-base)\n )\n );\n }\n }\n }\n\n [data-error-wrapper] {\n overflow: auto;\n padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n var(--diffs-gap-inline, var(--diffs-gap-fallback));\n max-height: 400px;\n scrollbar-width: none;\n\n [data-error-message] {\n font-weight: bold;\n font-size: 18px;\n color: var(--diffs-deletion-base);\n }\n\n [data-error-stack] {\n color: var(--diffs-fg-number);\n }\n }\n\n [data-placeholder] {\n contain: strict;\n }\n}\n";
3
3
 
4
4
  //#endregion
5
5
  export { style_default as default };
package/dist/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../src/style.css"],"sourcesContent":["@layer base, theme, unsafe;\n\n@layer base {\n :host {\n --diffs-bg: #fff;\n --diffs-fg: #000;\n --diffs-font-fallback:\n 'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n 'Courier New', monospace;\n --diffs-header-font-fallback:\n system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n 'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n --diffs-mixer: light-dark(black, white);\n --diffs-gap-fallback: 8px;\n\n /*\n // Available CSS Color Overrides\n --diffs-bg-buffer-override\n --diffs-bg-hover-override\n --diffs-bg-context-override\n --diffs-bg-separator-override\n\n --diffs-fg-number-override\n --diffs-fg-number-addition-override\n --diffs-fg-number-deletion-override\n\n --diffs-deletion-color-override\n --diffs-addition-color-override\n --diffs-modified-color-override\n\n --diffs-bg-deletion-override\n --diffs-bg-deletion-number-override\n --diffs-bg-deletion-hover-override\n --diffs-bg-deletion-emphasis-override\n\n --diffs-bg-addition-override\n --diffs-bg-addition-number-override\n --diffs-bg-addition-hover-override\n --diffs-bg-addition-emphasis-override\n\n // Line Selection Color Overrides (for enableLineSelection)\n --diffs-selection-color-override\n --diffs-bg-selection-override\n --diffs-bg-selection-number-override\n --diffs-bg-selection-background-override\n --diffs-bg-selection-number-background-override\n\n // Available CSS Layout Overrides\n --diffs-gap-inline\n --diffs-gap-block\n --diffs-gap-style\n --diffs-tab-size\n */\n\n color-scheme: light dark;\n display: block;\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n font-size: var(--diffs-font-size, 13px);\n line-height: var(--diffs-line-height, 20px);\n font-feature-settings: var(--diffs-font-features);\n }\n\n /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n pre,\n code,\n [data-error-wrapper] {\n isolation: isolate;\n margin: 0;\n padding: 0;\n display: block;\n outline: none;\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n [data-icon-sprite] {\n display: none;\n }\n\n /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n * their font-family explicitly. */\n [data-diffs-header],\n [data-separator] {\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n }\n\n [data-file-info] {\n padding: 10px;\n font-weight: 700;\n color: var(--fg);\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n }\n\n [data-diffs-header],\n [data-diffs],\n [data-error-wrapper] {\n --diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg));\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-buffer: var(\n --diffs-bg-buffer-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n )\n );\n --diffs-bg-hover: var(\n --diffs-bg-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer))\n )\n );\n --diffs-bg-context: var(\n --diffs-bg-context-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n )\n );\n --diffs-bg-separator: var(\n --diffs-bg-separator-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n )\n );\n\n --diffs-fg: light-dark(var(--diffs-light), var(--diffs-dark));\n --diffs-fg-number: var(\n --diffs-fg-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n )\n );\n\n --diffs-deletion-base: var(\n --diffs-deletion-color-override,\n light-dark(\n var(\n --diffs-light-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n ),\n var(\n --diffs-dark-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n )\n )\n );\n --diffs-addition-base: var(\n --diffs-addition-color-override,\n light-dark(\n var(\n --diffs-light-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n ),\n var(\n --diffs-dark-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n )\n )\n );\n --diffs-modified-base: var(\n --diffs-modified-color-override,\n light-dark(\n var(\n --diffs-light-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n ),\n var(\n --diffs-dark-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n )\n )\n );\n\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-deletion: var(\n --diffs-bg-deletion-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-number: var(\n --diffs-bg-deletion-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-hover: var(\n --diffs-bg-deletion-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-emphasis: var(\n --diffs-bg-deletion-emphasis-override,\n light-dark(\n rgb(from var(--diffs-deletion-base) r g b / 0.15),\n rgb(from var(--diffs-deletion-base) r g b / 0.2)\n )\n );\n\n --diffs-bg-addition: var(\n --diffs-bg-addition-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-number: var(\n --diffs-bg-addition-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-hover: var(\n --diffs-bg-addition-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-emphasis: var(\n --diffs-bg-addition-emphasis-override,\n light-dark(\n rgb(from var(--diffs-addition-base) r g b / 0.15),\n rgb(from var(--diffs-addition-base) r g b / 0.2)\n )\n );\n\n --diffs-selection-base: var(--diffs-modified-base);\n --diffs-selection-number-fg: light-dark(\n color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n );\n --diffs-bg-selection: var(\n --diffs-bg-selection-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base))\n )\n );\n --diffs-bg-selection-number: var(\n --diffs-bg-selection-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-selection-base))\n )\n );\n\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-diffs] {\n /* This feels a bit crazy to me... so I need to think about it a bit more... */\n --diffs-grid-number-column-width: minmax(min-content, max-content);\n --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n [data-column-content] span {\n color: light-dark(\n var(--diffs-token-light, var(--diffs-light)),\n var(--diffs-token-dark, var(--diffs-dark))\n );\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n }\n\n /* Since span is a pretty innocuous selector, we need to make sure we don't\n * apply tokenized BG colors to diff-spans */\n [data-column-content] span:not([data-diff-span]) {\n background-color: light-dark(\n var(--diffs-token-light-bg, inherit),\n var(--diffs-token-dark-bg, inherit)\n );\n }\n\n [data-column-content] {\n background-color: var(--diffs-line-bg, 'transparent');\n grid-column: 2 / 3;\n }\n\n [data-diffs][data-dehydrated] {\n --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n }\n\n @media (prefers-color-scheme: dark) {\n [data-diffs-header],\n [data-diffs] {\n color-scheme: dark;\n }\n\n [data-diffs] [data-column-content] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n }\n\n [data-diffs-header][data-theme-type='light'],\n [data-diffs][data-theme-type='light'] {\n color-scheme: light;\n }\n\n [data-diffs][data-theme-type='light'] [data-column-content] span {\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n\n [data-diffs-header][data-theme-type='dark'],\n [data-diffs][data-theme-type='dark'] {\n color-scheme: dark;\n }\n\n [data-diffs][data-theme-type='dark'] [data-column-content] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n\n [data-type='split'][data-overflow='wrap'] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: repeat(2, var(--diffs-code-grid));\n }\n\n [data-type='split'][data-overflow='scroll'] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2px;\n }\n\n [data-code] {\n display: block;\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: var(--diffs-code-grid);\n overflow: scroll clip;\n overscroll-behavior-x: none;\n tab-size: var(--diffs-tab-size, 2);\n align-self: flex-start;\n padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n padding-bottom: max(\n 0px,\n calc(var(--diffs-gap-block, var(--diffs-gap-fallback)) - 6px)\n );\n }\n\n [data-code]::-webkit-scrollbar {\n width: 0;\n height: 6px;\n }\n\n [data-code]::-webkit-scrollbar-track {\n background: transparent;\n }\n\n [data-code]::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 1px solid transparent;\n background-clip: content-box;\n border-radius: 3px;\n }\n\n [data-diffs]:hover [data-code]::-webkit-scrollbar-thumb {\n background-color: var(--diffs-bg-context);\n }\n\n [data-code]::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n /*\n * If we apply these rules globally it will mean that webkit will opt into the\n * standards compliant version of custom css scrollbars, which we do not want\n * because the custom stuff will look better\n */\n @supports (-moz-appearance: none) {\n [data-code] {\n scrollbar-width: thin;\n scrollbar-color: var(--diffs-bg-context) transparent;\n padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n }\n\n [data-diffs][data-type='split'][data-overflow='wrap'] {\n padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-diffs-header] ~ [data-diffs] [data-code],\n [data-diffs-header] ~ [data-diffs][data-overflow='wrap'] {\n padding-top: 0;\n }\n\n [data-type='split'][data-overflow='wrap'] [data-code] {\n display: contents;\n }\n\n [data-line-annotation],\n [data-no-newline],\n [data-line] {\n position: relative;\n display: grid;\n grid-template-columns: subgrid;\n grid-column: 1 / 3;\n }\n\n [data-line-annotation][data-selected-line] {\n background-color: unset;\n\n &::before {\n content: '';\n position: sticky;\n top: 0;\n left: 0;\n display: block;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-annotation-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-interactive-lines] [data-line] {\n cursor: pointer;\n }\n\n [data-buffer] {\n display: grid;\n grid-column: 1 / 3;\n grid-template-columns: subgrid;\n user-select: none;\n /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(4px * 1.414)\n );\n min-height: 1lh;\n /* lol not sure this is worth it… */\n /* position: sticky; */\n /* left: 0; */\n /* width: var(--diffs-column-width, auto); */\n /* background-attachment: fixed; */\n\n &::before,\n &::after {\n content: '';\n display: block;\n }\n\n &::before {\n box-sizing: content-box;\n padding-left: 2ch;\n padding-right: 1ch;\n border-left: 4px solid transparent;\n border-right: 1px solid transparent;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n }\n }\n\n [data-separator] {\n grid-column: span 2;\n }\n\n [data-separator='metadata'],\n [data-separator]:empty {\n min-height: 4px;\n background-color: var(--diffs-bg-separator);\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-separator-wrapper] {\n user-select: none;\n fill: currentColor;\n overflow: hidden;\n }\n\n [data-separator='metadata'] [data-separator-wrapper] {\n grid-column: 2 / 3;\n width: var(--diffs-column-content-width);\n position: sticky;\n left: var(--diffs-column-number-width);\n padding: 4px 1ch;\n }\n\n [data-separator='line-info'] {\n margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-separator='line-info'][data-separator-first] {\n margin-top: 0;\n }\n\n [data-separator='line-info'][data-separator-last] {\n margin-bottom: 0;\n }\n\n [data-separator='line-info'] [data-separator-wrapper] {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n width: auto;\n width: calc(var(--diffs-column-width) - var(--diffs-gap-fallback));\n border-radius: 6px;\n }\n\n [data-overflow='scroll']\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n }\n\n @media (pointer: fine) {\n [data-separator-wrapper][data-separator-multi-button] {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: 15px 15px;\n\n [data-expand-button] {\n height: 15px;\n }\n }\n\n [data-type='split']\n [data-additions]\n [data-separator-wrapper][data-separator-multi-button] {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n\n [data-type='split'] [data-additions] [data-expand-button] {\n grid-column: 2;\n }\n\n [data-type='split'] [data-additions] [data-separator-content] {\n grid-column: 1;\n }\n }\n\n [data-expand-button],\n [data-separator-content] {\n display: flex;\n align-items: center;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-expand-button] {\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n width: 32px;\n height: 32px;\n opacity: 0.65;\n }\n\n [data-hover-slot] {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n justify-content: flex-end;\n }\n\n @media (pointer: fine) {\n [data-expand-button]:hover {\n opacity: 1;\n }\n\n /* FIXME(amadeus): We need to figure out how/when to apply hover effects in\n * a more performant way because it'll trigger layout/paint re-calcs\n * probably when we dont want them... */\n [data-line]:hover {\n z-index: 2;\n }\n }\n\n [data-expand-down] [data-icon] {\n transform: scaleY(-1);\n }\n\n [data-separator-content] {\n flex: 1 1 auto;\n padding: 0 1ch;\n height: 32px;\n opacity: 0.65;\n overflow: hidden;\n justify-content: flex-start;\n\n grid-column: 2;\n grid-row: 1 / -1;\n }\n\n [data-unmodified-lines] {\n display: block;\n overflow: hidden;\n min-width: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 0 1 auto;\n }\n\n [data-type='split'] [data-additions] [data-separator-content] {\n justify-content: flex-end;\n }\n\n [data-type='file']\n [data-code]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n width: calc(\n var(--diffs-column-width) -\n (var(--diffs-gap-inline, var(--diffs-gap-fallback)) * 2)\n );\n }\n\n [data-type='split']\n [data-deletions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [data-type='file'][data-overflow='scroll'],\n [data-type='split'][data-overflow='scroll'] {\n [data-deletions] [data-separator='line-info'] [data-separator-wrapper] {\n left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-type='split']\n [data-additions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-direction: row-reverse;\n }\n\n [data-type='split'][data-overflow='scroll']\n [data-additions]\n [data-separator='line-info']\n [data-separator-wrapper] {\n left: 0;\n }\n\n [data-line] {\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-type='split'][data-overflow='wrap'] [data-deletions] {\n [data-line-annotation],\n [data-buffer],\n [data-line],\n [data-separator],\n [data-virtualized-buffer],\n [data-no-newline] {\n margin-right: 1px;\n grid-column: 1 / 3;\n }\n }\n\n [data-line-annotation] {\n min-height: var(--diffs-annotation-min-height, 0);\n background-color: var(--diffs-bg-context);\n z-index: 3;\n }\n\n [data-type='split'][data-overflow='wrap'] [data-additions] {\n [data-line-annotation],\n [data-buffer],\n [data-line],\n [data-separator],\n [data-virtualized-buffer],\n [data-no-newline] {\n margin-left: 1px;\n grid-column: 3 / 5;\n }\n }\n\n [data-separator='custom'] {\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-column-content],\n [data-column-number] {\n position: relative;\n padding-inline: 1ch;\n }\n\n [data-indicators='classic'] [data-column-content] {\n padding-inline-start: 2ch;\n }\n\n [data-indicators='classic'] {\n [data-line-type='change-addition'] [data-column-content]::before,\n [data-line-type='change-deletion'] [data-column-content]::before {\n display: inline-block;\n width: 1ch;\n height: 1lh;\n position: absolute;\n top: 0;\n left: 0;\n user-select: none;\n }\n\n [data-line-type='change-addition'] [data-column-content]::before {\n content: '+';\n color: var(--diffs-addition-base);\n }\n\n [data-line-type='change-deletion'] [data-column-content]::before {\n content: '-';\n color: var(--diffs-deletion-base);\n }\n }\n\n [data-indicators='bars'] {\n [data-line-type='change-deletion'],\n [data-line-type='change-addition'] {\n [data-column-number]::before {\n content: '';\n display: block;\n width: 4px;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n user-select: none;\n contain: strict;\n }\n }\n\n [data-line-type='change-deletion'] [data-column-number]::before {\n background-image: linear-gradient(\n 0deg,\n var(--diffs-bg-deletion) 50%,\n var(--diffs-deletion-base) 50%\n );\n background-repeat: repeat;\n background-size: 2px 2px;\n background-size: calc(1lh / round(1lh / 2px)) calc(1lh / round(1lh / 2px));\n }\n\n [data-line-type='change-addition'] [data-column-number]::before {\n background-color: var(--diffs-addition-base);\n }\n }\n\n [data-overflow='wrap'] [data-column-content],\n [data-overflow='wrap'] [data-annotation-content] {\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n [data-overflow='scroll'] [data-column-content] {\n white-space: pre;\n min-height: 1lh;\n }\n\n [data-column-number] {\n grid-column: 1 / 2;\n box-sizing: content-box;\n text-align: right;\n user-select: none;\n background-color: var(--diffs-bg);\n color: var(--diffs-fg-number);\n z-index: 1;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n padding-left: 2ch;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n }\n\n [data-overflow='scroll'] [data-column-number] {\n position: sticky;\n left: 0;\n }\n\n [data-disable-line-numbers] {\n &[data-indicators='bars'] [data-column-number] {\n min-width: 4px;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n }\n\n [data-column-number],\n [data-buffer]::before {\n min-width: 0;\n padding: 0;\n }\n\n [data-line-number-content] {\n display: none;\n }\n\n [data-hover-slot] {\n right: unset;\n left: 0;\n justify-content: flex-start;\n }\n\n &[data-indicators='bars'] [data-hover-slot] {\n /* Using 5px here because theres a 1px separator after the bar */\n left: 5px;\n }\n }\n\n [data-interactive-line-numbers] [data-column-number] {\n cursor: pointer;\n }\n\n [data-diff-span] {\n border-radius: 3px;\n box-decoration-break: clone;\n }\n\n [data-line-type='change-addition'] {\n [data-column-number] {\n color: var(\n --diffs-fg-number-addition-override,\n var(--diffs-addition-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-addition-emphasis);\n }\n }\n\n [data-line-type='change-deletion'] {\n [data-column-number] {\n color: var(\n --diffs-fg-number-deletion-override,\n var(--diffs-deletion-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-deletion-emphasis);\n }\n }\n\n [data-background] [data-line-type='change-addition'] {\n --diffs-line-bg: var(--diffs-bg-addition);\n\n [data-column-number] {\n background-color: var(--diffs-bg-addition-number);\n }\n }\n\n [data-background] [data-line-type='change-deletion'] {\n --diffs-line-bg: var(--diffs-bg-deletion);\n\n [data-column-number] {\n background-color: var(--diffs-bg-deletion-number);\n }\n }\n\n /* By wrapping hovers in a pointer: fine, we ensure that mobile devices don't\n * require a double click */\n @media (pointer: fine) {\n [data-line]:hover:not([data-selected-line]) {\n [data-column-number],\n [data-column-content] {\n background-color: var(--diffs-bg-hover);\n }\n }\n\n [data-background] [data-line]:hover:not([data-selected-line]) {\n &[data-line-type='change-deletion'] [data-column-number],\n &[data-line-type='change-deletion'] [data-column-content] {\n background-color: var(--diffs-bg-deletion-hover);\n }\n\n &[data-line-type='change-addition'] [data-column-number],\n &[data-line-type='change-addition'] [data-column-content] {\n background-color: var(--diffs-bg-addition-hover);\n }\n }\n }\n\n [data-diffs-header] {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-height: calc(\n 1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n );\n padding-inline: 16px;\n top: 0;\n z-index: 2;\n }\n\n [data-header-content] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-header-content] [data-prev-name],\n [data-header-content] [data-title] {\n direction: rtl;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-prev-name] {\n opacity: 0.7;\n }\n\n [data-rename-icon] {\n fill: currentColor;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n [data-diffs-header] [data-metadata] {\n display: flex;\n align-items: center;\n gap: 1ch;\n white-space: nowrap;\n }\n\n [data-diffs-header] [data-additions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-addition-base);\n }\n\n [data-diffs-header] [data-deletions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-deletion-base);\n }\n\n [data-no-newline] {\n user-select: none;\n\n [data-column-content] {\n opacity: 0.6;\n }\n }\n\n [data-annotation-content] {\n position: relative;\n grid-column: 2 / -1;\n width: var(--diffs-column-content-width, auto);\n align-self: flex-start;\n z-index: 2;\n height: 100%;\n }\n\n /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n * need to */\n [data-overflow='scroll'] [data-annotation-content] {\n position: sticky;\n left: var(--diffs-column-number-width, 0);\n }\n\n /* Undo some of the stuff that the 'pre' tag does */\n [data-annotation-slot] {\n text-wrap-mode: wrap;\n word-break: normal;\n white-space-collapse: collapse;\n }\n\n [data-change-icon] {\n fill: currentColor;\n flex-shrink: 0;\n }\n\n [data-change-icon='change'],\n [data-change-icon='rename-pure'],\n [data-change-icon='rename-changed'] {\n color: var(--diffs-modified-base);\n }\n\n [data-change-icon='new'] {\n color: var(--diffs-addition-base);\n }\n\n [data-change-icon='deleted'] {\n color: var(--diffs-deletion-base);\n }\n\n [data-change-icon='file'] {\n opacity: 0.6;\n }\n\n /* Line selection highlighting */\n [data-line-type='context'][data-selected-line] {\n [data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-column-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-selected-line] {\n [data-column-content] {\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 82%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n )\n );\n }\n\n [data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 60%,\n var(--diffs-selection-base)\n )\n );\n }\n }\n }\n\n [data-error-wrapper] {\n overflow: auto;\n padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n var(--diffs-gap-inline, var(--diffs-gap-fallback));\n max-height: 400px;\n scrollbar-width: none;\n\n [data-error-message] {\n font-weight: bold;\n font-size: 18px;\n color: var(--diffs-deletion-base);\n }\n\n [data-error-stack] {\n color: var(--diffs-fg-number);\n }\n }\n\n [data-virtualized-buffer] {\n /* for blanking debugging purposes */\n /* background-color: red; */\n grid-column: 1 / 3;\n }\n}\n"],"mappings":";oBAAA"}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../src/style.css"],"sourcesContent":["@layer base, theme, unsafe;\n\n@layer base {\n :host {\n --diffs-bg: #fff;\n --diffs-fg: #000;\n --diffs-font-fallback:\n 'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n 'Courier New', monospace;\n --diffs-header-font-fallback:\n system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n 'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n --diffs-mixer: light-dark(black, white);\n --diffs-gap-fallback: 8px;\n\n /*\n // Available CSS Color Overrides\n --diffs-bg-buffer-override\n --diffs-bg-hover-override\n --diffs-bg-context-override\n --diffs-bg-separator-override\n\n --diffs-fg-number-override\n --diffs-fg-number-addition-override\n --diffs-fg-number-deletion-override\n\n --diffs-deletion-color-override\n --diffs-addition-color-override\n --diffs-modified-color-override\n\n --diffs-bg-deletion-override\n --diffs-bg-deletion-number-override\n --diffs-bg-deletion-hover-override\n --diffs-bg-deletion-emphasis-override\n\n --diffs-bg-addition-override\n --diffs-bg-addition-number-override\n --diffs-bg-addition-hover-override\n --diffs-bg-addition-emphasis-override\n\n // Line Selection Color Overrides (for enableLineSelection)\n --diffs-selection-color-override\n --diffs-bg-selection-override\n --diffs-bg-selection-number-override\n --diffs-bg-selection-background-override\n --diffs-bg-selection-number-background-override\n\n // Available CSS Layout Overrides\n --diffs-gap-inline\n --diffs-gap-block\n --diffs-gap-style\n --diffs-tab-size\n */\n\n color-scheme: light dark;\n display: block;\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n font-size: var(--diffs-font-size, 13px);\n line-height: var(--diffs-line-height, 20px);\n font-feature-settings: var(--diffs-font-features);\n }\n\n /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n pre,\n code,\n [data-error-wrapper] {\n isolation: isolate;\n margin: 0;\n padding: 0;\n display: block;\n outline: none;\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n }\n\n pre,\n code {\n contain: content;\n background-color: var(--diffs-bg);\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n [data-icon-sprite] {\n display: none;\n }\n\n /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n * their font-family explicitly. */\n [data-diffs-header],\n [data-separator] {\n font-family: var(\n --diffs-header-font-family,\n var(--diffs-header-font-fallback)\n );\n }\n\n [data-file-info] {\n padding: 10px;\n font-weight: 700;\n color: var(--fg);\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n }\n\n [data-diffs-header],\n [data-diff],\n [data-file],\n [data-error-wrapper],\n [data-virtualizer-buffer] {\n --diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg));\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-buffer: var(\n --diffs-bg-buffer-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n )\n );\n --diffs-bg-hover: var(\n --diffs-bg-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer))\n )\n );\n\n --diffs-bg-context: var(\n --diffs-bg-context-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n )\n );\n --diffs-bg-context-number: var(\n --diffs-bg-context-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg-context) 80%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-bg-context) 60%, var(--diffs-bg))\n )\n );\n\n --diffs-bg-separator: var(\n --diffs-bg-separator-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n )\n );\n\n --diffs-fg: light-dark(var(--diffs-light), var(--diffs-dark));\n --diffs-fg-number: var(\n --diffs-fg-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n )\n );\n\n --diffs-deletion-base: var(\n --diffs-deletion-color-override,\n light-dark(\n var(\n --diffs-light-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n ),\n var(\n --diffs-dark-deletion-color,\n var(--diffs-deletion-color, rgb(255, 0, 0))\n )\n )\n );\n --diffs-addition-base: var(\n --diffs-addition-color-override,\n light-dark(\n var(\n --diffs-light-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n ),\n var(\n --diffs-dark-addition-color,\n var(--diffs-addition-color, rgb(0, 255, 0))\n )\n )\n );\n --diffs-modified-base: var(\n --diffs-modified-color-override,\n light-dark(\n var(\n --diffs-light-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n ),\n var(\n --diffs-dark-modified-color,\n var(--diffs-modified-color, rgb(0, 0, 255))\n )\n )\n );\n\n /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n * and vscode use an older build of chrome that appears to have a bug with\n * color-mix and 'in oklch', so use 'in lab' instead */\n --diffs-bg-deletion: var(\n --diffs-bg-deletion-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-number: var(\n --diffs-bg-deletion-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-hover: var(\n --diffs-bg-deletion-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base))\n )\n );\n --diffs-bg-deletion-emphasis: var(\n --diffs-bg-deletion-emphasis-override,\n light-dark(\n rgb(from var(--diffs-deletion-base) r g b / 0.15),\n rgb(from var(--diffs-deletion-base) r g b / 0.2)\n )\n );\n\n --diffs-bg-addition: var(\n --diffs-bg-addition-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-number: var(\n --diffs-bg-addition-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-hover: var(\n --diffs-bg-addition-hover-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)),\n color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))\n )\n );\n --diffs-bg-addition-emphasis: var(\n --diffs-bg-addition-emphasis-override,\n light-dark(\n rgb(from var(--diffs-addition-base) r g b / 0.15),\n rgb(from var(--diffs-addition-base) r g b / 0.2)\n )\n );\n\n --diffs-selection-base: var(--diffs-modified-base);\n --diffs-selection-number-fg: light-dark(\n color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n );\n --diffs-bg-selection: var(\n --diffs-bg-selection-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base))\n )\n );\n --diffs-bg-selection-number: var(\n --diffs-bg-selection-number-override,\n light-dark(\n color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base)),\n color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-selection-base))\n )\n );\n\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n }\n\n [data-diff],\n [data-file] {\n /* This feels a bit crazy to me... so I need to think about it a bit more... */\n --diffs-grid-number-column-width: minmax(min-content, max-content);\n --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n &[data-dehydrated] {\n --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n }\n\n &[data-theme-type='light'],\n & {\n [data-line] span {\n color: light-dark(\n var(--diffs-token-light, var(--diffs-light)),\n var(--diffs-token-dark, var(--diffs-dark))\n );\n font-weight: var(--diffs-token-light-font-weight, inherit);\n font-style: var(--diffs-token-light-font-style, inherit);\n text-decoration: var(--diffs-token-light-text-decoration, inherit);\n }\n }\n\n &[data-theme-type='dark'] [data-line] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n\n &:hover [data-code]::-webkit-scrollbar-thumb {\n background-color: var(--diffs-bg-context);\n }\n }\n\n [data-line] span {\n background-color: light-dark(\n var(--diffs-token-light-bg, inherit),\n var(--diffs-token-dark-bg, inherit)\n );\n }\n\n [data-line],\n [data-gutter-buffer],\n [data-line-annotation],\n [data-no-newline] {\n color: var(--diffs-fg);\n background-color: var(--diffs-line-bg, var(--diffs-bg));\n }\n\n [data-virtualizer-buffer] {\n background-color: var(--diffs-bg);\n }\n\n [data-no-newline] {\n user-select: none;\n\n span {\n opacity: 0.6;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-diffs-header],\n [data-error-wrapper],\n [data-diff],\n [data-file] {\n color-scheme: dark;\n }\n\n [data-content] [data-line] span {\n font-weight: var(--diffs-token-dark-font-weight, inherit);\n font-style: var(--diffs-token-dark-font-style, inherit);\n text-decoration: var(--diffs-token-dark-text-decoration, inherit);\n }\n }\n\n [data-diffs-header],\n [data-diff],\n [data-file] {\n &[data-theme-type='light'] {\n color-scheme: light;\n }\n\n &[data-theme-type='dark'] {\n color-scheme: dark;\n }\n }\n\n [data-diff-type='split'][data-overflow='scroll'] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n\n [data-additions] {\n border-left: 1px solid var(--diffs-bg);\n }\n\n [data-deletions] {\n border-right: 1px solid var(--diffs-bg);\n }\n }\n\n [data-code] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: var(--diffs-code-grid);\n overflow: scroll clip;\n overscroll-behavior-x: none;\n tab-size: var(--diffs-tab-size, 2);\n align-self: flex-start;\n padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n padding-bottom: max(\n 0px,\n calc(var(--diffs-gap-block, var(--diffs-gap-fallback)) - 6px)\n );\n }\n\n [data-code]::-webkit-scrollbar {\n width: 0;\n height: 6px;\n }\n\n [data-code]::-webkit-scrollbar-track {\n background: transparent;\n }\n\n [data-code]::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 1px solid transparent;\n background-clip: content-box;\n border-radius: 3px;\n }\n\n [data-code]::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n /*\n * If we apply these rules globally it will mean that webkit will opt into the\n * standards compliant version of custom css scrollbars, which we do not want\n * because the custom stuff will look better\n */\n @supports (-moz-appearance: none) {\n [data-code] {\n scrollbar-width: thin;\n scrollbar-color: var(--diffs-bg-context) transparent;\n padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n }\n\n [data-diffs-header] ~ [data-diff],\n [data-diffs-header] ~ [data-file] {\n [data-code],\n &[data-overflow='wrap'] {\n padding-top: 0;\n }\n }\n\n [data-gutter] {\n display: grid;\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n grid-column: 1;\n z-index: 3;\n position: relative;\n background-color: var(--diffs-bg);\n\n [data-gutter-buffer],\n [data-column-number] {\n border-right: var(--diffs-gap-style, 2px solid var(--diffs-bg));\n }\n }\n\n [data-content] {\n display: grid;\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n grid-column: 2;\n min-width: 0;\n }\n\n [data-diff-type='split'][data-overflow='wrap'] {\n display: grid;\n grid-auto-flow: dense;\n grid-template-columns: repeat(2, var(--diffs-code-grid));\n padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n [data-deletions] {\n display: contents;\n\n [data-gutter] {\n grid-column: 1;\n }\n\n [data-content] {\n grid-column: 2;\n border-right: 1px solid var(--diffs-bg);\n }\n }\n\n [data-additions] {\n display: contents;\n\n [data-gutter] {\n grid-column: 3;\n border-left: 1px solid var(--diffs-bg);\n }\n\n [data-content] {\n grid-column: 4;\n }\n }\n }\n\n [data-overflow='scroll'] [data-gutter] {\n position: sticky;\n left: 0;\n }\n\n [data-line-annotation][data-selected-line] {\n background-color: unset;\n\n &::before {\n content: '';\n /* FIXME(amadeus): This needs to be audited ... */\n position: sticky;\n top: 0;\n left: 0;\n display: block;\n border-right: var(--diffs-gap-style, 1px solid var(--diffs-bg));\n background-color: var(--diffs-bg-selection-number);\n }\n\n [data-annotation-content] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-interactive-lines] [data-line] {\n cursor: pointer;\n }\n\n [data-content-buffer],\n [data-gutter-buffer] {\n position: relative;\n user-select: none;\n min-height: 1lh;\n }\n\n [data-gutter-buffer='annotation'] {\n min-height: 0;\n }\n\n [data-gutter-buffer='buffer'] {\n background-size: 8px 8px;\n background-position: 0 0;\n background-origin: border-box;\n background-color: var(--diffs-bg);\n /* This is incredibley expensive... */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n rgb(from var(--diffs-bg-buffer) r g b / 0.8) calc(3px * 1.414),\n rgb(from var(--diffs-bg-buffer) r g b / 0.8) calc(4px * 1.414)\n );\n }\n\n [data-content-buffer] {\n grid-column: 1;\n /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n background-size: 8px 8px;\n background-position: 5px 0;\n background-origin: border-box;\n background-color: var(--diffs-bg);\n /* This is incredibley expensive... */\n background-image: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(3px * 1.414),\n var(--diffs-bg-buffer) calc(4px * 1.414)\n );\n }\n\n [data-separator] {\n box-sizing: content-box;\n background-color: var(--diffs-bg);\n }\n\n [data-separator='simple'] {\n margin-right: -2px;\n }\n\n [data-separator='simple'],\n [data-separator='metadata'],\n [data-separator]:empty {\n min-height: 4px;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-separator='metadata'] {\n min-height: 1lh;\n }\n\n [data-separator-wrapper] {\n position: absolute;\n user-select: none;\n fill: currentColor;\n overflow: hidden;\n background-color: var(--diffs-bg);\n }\n\n [data-separator='metadata'] [data-separator-wrapper] {\n width: var(--diffs-column-content-width);\n padding-inline: 1ch;\n height: 32px;\n background-color: var(--diffs-bg-separator);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [data-separator='line-info'],\n [data-separator='metadata'] {\n height: 32px;\n position: relative;\n }\n [data-separator='line-info'] {\n margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n }\n\n [data-separator='line-info'][data-separator-first],\n [data-separator='metadata'][data-separator-first] {\n margin-top: 0;\n }\n\n [data-separator='line-info'][data-separator-last],\n [data-separator='metadata'][data-separator-last] {\n margin-bottom: 0;\n }\n\n [data-separator='line-info'] [data-separator-wrapper],\n [data-separator='metadata'] [data-separator-wrapper] {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 2px;\n width: auto;\n }\n\n [data-diff-type='split']\n [data-additions]\n [data-content]\n [data-separator-wrapper] {\n display: flex;\n flex-direction: row-reverse;\n }\n\n [data-expand-button],\n [data-separator-content] {\n display: flex;\n align-items: center;\n background-color: var(--diffs-bg-separator);\n }\n\n [data-expand-button] {\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n width: 32px;\n height: 32px;\n color: var(--diffs-fg-number);\n\n &:hover {\n color: var(--diffs-fg);\n }\n }\n\n [data-hover-slot] {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n justify-content: flex-end;\n }\n\n @media (pointer: fine) {\n /* FIXME(amadeus): We need to figure out how/when to apply hover effects in\n * a more performant way because it'll trigger layout/paint re-calcs\n * probably when we dont want them... */\n /* [data-line]:hover { */\n /* z-index: 2; */\n /* } */\n }\n\n [data-expand-down] [data-icon] {\n transform: scaleY(-1);\n }\n\n [data-separator-content] {\n flex: 1 1 auto;\n padding: 0 1ch;\n height: 32px;\n color: var(--diffs-fg-number);\n\n overflow: hidden;\n justify-content: flex-start;\n\n grid-column: 2;\n grid-row: 1 / -1;\n }\n\n [data-separator='line-info'] [data-separator-content] {\n height: 32px;\n user-select: none;\n overflow: clip;\n }\n\n [data-unmodified-lines] {\n display: block;\n overflow: hidden;\n min-width: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 0 1 auto;\n }\n\n [data-diff-type='split'] [data-additions] [data-separator-content] {\n justify-content: flex-end;\n }\n\n [data-unified] {\n [data-gutter] {\n [data-separator='line-info'] [data-separator-wrapper] {\n margin-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n\n [data-separator-content] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n [data-separator='line-info'][data-expand-index]\n [data-separator-wrapper]\n [data-separator-content] {\n border-top-left-radius: unset;\n border-bottom-left-radius: unset;\n }\n }\n\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n display: flex;\n flex-direction: row-reverse;\n\n [data-separator-wrapper] {\n display: flex;\n background-color: var(--diffs-bg);\n padding-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n gap: 0;\n\n [data-separator-content] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n width: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n\n [data-expand-button] {\n display: none;\n }\n }\n }\n }\n\n [data-overflow='scroll']\n [data-unified]\n [data-content]\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n right: 0;\n }\n\n [data-deletions] {\n [data-gutter] {\n [data-separator='line-info'] {\n [data-separator-wrapper] {\n background-color: var(--diffs-bg);\n padding-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-separator-content] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n [data-content] {\n [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n }\n }\n\n [data-additions] {\n [data-gutter] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n\n [data-content] {\n [data-separator='line-info'] {\n display: flex;\n flex-direction: row-reverse;\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n background-color: var(--diffs-bg);\n padding-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n }\n\n [data-separator-content] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n [data-overflow='scroll']\n [data-additions]\n [data-content]\n [data-separator='line-info']\n [data-separator-wrapper] {\n position: sticky;\n right: 0;\n }\n\n [data-deletions],\n [data-additions] {\n [data-separator='line-info'][data-expand-index] [data-separator-content] {\n border-radius: unset;\n }\n }\n\n @media (pointer: coarse) {\n [data-unified] [data-gutter],\n [data-diff-type='split'] [data-deletions] [data-gutter] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n [data-expand-down] {\n border-bottom-left-radius: unset;\n border-top-left-radius: unset;\n }\n }\n }\n }\n\n [data-diff-type='split'] [data-additions] [data-content] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n [data-expand-down] {\n border-bottom-right-radius: unset;\n border-top-right-radius: unset;\n }\n }\n }\n\n [data-expand-button] {\n grid-column: 2;\n }\n\n [data-separator-content] {\n grid-column: 1;\n }\n }\n }\n\n @media (pointer: fine) {\n [data-separator-wrapper][data-separator-multi-button] {\n display: grid;\n grid-template-columns: auto min-content;\n grid-template-rows: 15px 15px;\n\n [data-expand-button] {\n height: 15px;\n }\n }\n\n [data-unified] [data-gutter],\n [data-deletions] [data-gutter] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: unset;\n }\n\n [data-expand-down] {\n border-bottom-left-radius: 6px;\n border-top-left-radius: unset;\n }\n }\n }\n }\n\n [data-additions] [data-content] {\n [data-separator-wrapper] {\n [data-expand-both],\n [data-expand-down],\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &[data-separator-multi-button] {\n display: grid;\n grid-template-columns: min-content auto;\n\n [data-expand-up] {\n border-top-right-radius: 6px;\n border-bottom-right-radius: unset;\n }\n\n [data-expand-down] {\n border-bottom-right-radius: 6px;\n border-top-right-radius: unset;\n }\n }\n }\n\n [data-expand-button] {\n grid-column: 2;\n }\n\n [data-separator-content] {\n grid-column: 1;\n }\n }\n }\n\n [data-diff-type='split']\n [data-deletions]\n [data-gutter]\n [data-separator='line-info']\n [data-separator-wrapper] {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [data-diff-type='split'] [data-deletions] {\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-sepatator-wrapper] {\n display: none;\n }\n }\n }\n\n [data-diff-type='split'] [data-additions] {\n [data-gutter] [data-separator='line-info'] {\n [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n }\n\n [data-separator-wrapper] {\n display: none;\n }\n }\n\n [data-content] [data-separator='line-info'] {\n background-color: var(--diffs-bg-separator);\n\n [data-separator-wrapper] {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-direction: row-reverse;\n }\n }\n }\n\n [data-line-annotation],\n [data-gutter-buffer='annotation'] {\n --diffs-line-bg: var(--diffs-bg-context);\n }\n\n [data-line-annotation] {\n min-height: var(--diffs-annotation-min-height, 0);\n z-index: 2;\n }\n\n [data-separator='custom'] {\n display: grid;\n grid-template-columns: subgrid;\n }\n\n [data-line],\n [data-column-number],\n [data-no-newline] {\n position: relative;\n padding-inline: 1ch;\n }\n\n [data-indicators='classic'] [data-line] {\n padding-inline-start: 2ch;\n }\n\n [data-indicators='classic'] {\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-no-newline],\n &[data-line] {\n &::before {\n display: inline-block;\n width: 1ch;\n height: 1lh;\n position: absolute;\n top: 0;\n left: 0;\n user-select: none;\n }\n }\n }\n\n [data-line-type='change-addition'] {\n &[data-line],\n &[data-no-newline] {\n &::before {\n content: '+';\n color: var(--diffs-addition-base);\n }\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-line],\n &[data-no-newline] {\n &::before {\n content: '-';\n color: var(--diffs-deletion-base);\n }\n }\n }\n }\n\n [data-indicators='bars'] {\n [data-line-type='change-deletion'],\n [data-line-type='change-addition'] {\n &[data-column-number] {\n &::before {\n content: '';\n display: block;\n width: 4px;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n user-select: none;\n contain: strict;\n }\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-column-number] {\n &::before {\n background-image: linear-gradient(\n 0deg,\n var(--diffs-bg-deletion) 50%,\n var(--diffs-deletion-base) 50%\n );\n background-repeat: repeat;\n background-size: 2px 2px;\n background-size: calc(1lh / round(1lh / 2px))\n calc(1lh / round(1lh / 2px));\n }\n }\n }\n\n [data-line-type='change-addition'] {\n &[data-column-number] {\n &::before {\n background-color: var(--diffs-addition-base);\n }\n }\n }\n }\n\n [data-overflow='wrap'] {\n [data-line],\n [data-annotation-content] {\n white-space: pre-wrap;\n word-break: break-word;\n }\n }\n\n [data-overflow='scroll'] [data-line] {\n white-space: pre;\n min-height: 1lh;\n }\n\n [data-column-number] {\n box-sizing: content-box;\n text-align: right;\n user-select: none;\n background-color: var(--diffs-bg);\n color: var(--diffs-fg-number);\n padding-left: 2ch;\n }\n\n [data-line-number-content] {\n display: inline-block;\n min-width: var(\n --diffs-min-number-column-width,\n var(--diffs-min-number-column-width-default, 3ch)\n );\n }\n\n [data-disable-line-numbers] {\n [data-column-number] {\n min-width: 4px;\n padding: 0;\n }\n\n [data-line-number-content] {\n display: none;\n }\n\n [data-hover-slot] {\n right: unset;\n left: 0;\n justify-content: flex-start;\n }\n\n &[data-indicators='bars'] [data-hover-slot] {\n /* Using 5px here because theres a 1px separator after the bar */\n left: 5px;\n }\n }\n\n [data-file][data-disable-line-numbers] {\n [data-gutter-buffer],\n [data-column-number] {\n min-width: 0;\n border-right: 0;\n }\n }\n\n [data-interactive-line-numbers] [data-column-number] {\n cursor: pointer;\n }\n\n [data-diff-span] {\n border-radius: 3px;\n box-decoration-break: clone;\n }\n\n [data-line-type='change-addition'] {\n &[data-column-number] {\n color: var(\n --diffs-fg-number-addition-override,\n var(--diffs-addition-base)\n );\n }\n\n > [data-diff-span] {\n background-color: var(--diffs-bg-addition-emphasis);\n }\n }\n\n [data-line-type='change-deletion'] {\n &[data-column-number] {\n color: var(\n --diffs-fg-number-deletion-override,\n var(--diffs-deletion-base)\n );\n }\n\n [data-diff-span] {\n background-color: var(--diffs-bg-deletion-emphasis);\n }\n }\n\n [data-background] [data-line-type='change-addition'] {\n --diffs-line-bg: var(--diffs-bg-addition);\n\n &[data-column-number] {\n background-color: var(--diffs-bg-addition-number);\n }\n }\n\n [data-background] [data-line-type='change-deletion'] {\n --diffs-line-bg: var(--diffs-bg-deletion);\n\n &[data-column-number] {\n background-color: var(--diffs-bg-deletion-number);\n }\n }\n\n @media (pointer: fine) {\n [data-column-number],\n [data-line] {\n &[data-hovered] {\n background-color: var(--diffs-bg-hover);\n }\n }\n\n [data-background] {\n [data-column-number],\n [data-line] {\n &[data-hovered] {\n &[data-line-type='change-deletion'] {\n background-color: var(--diffs-bg-deletion-hover);\n }\n\n &[data-line-type='change-addition'] {\n background-color: var(--diffs-bg-addition-hover);\n }\n }\n }\n }\n }\n\n [data-diffs-header] {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-height: calc(\n 1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n );\n padding-inline: 16px;\n top: 0;\n z-index: 2;\n }\n\n [data-header-content] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-header-content] [data-prev-name],\n [data-header-content] [data-title] {\n direction: rtl;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n white-space: nowrap;\n }\n\n [data-prev-name] {\n opacity: 0.7;\n }\n\n [data-rename-icon] {\n fill: currentColor;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n [data-diffs-header] [data-metadata] {\n display: flex;\n align-items: center;\n gap: 1ch;\n white-space: nowrap;\n }\n\n [data-diffs-header] [data-additions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-addition-base);\n }\n\n [data-diffs-header] [data-deletions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-deletion-base);\n }\n\n [data-annotation-content] {\n position: relative;\n display: flow-root;\n align-self: flex-start;\n z-index: 2;\n min-width: 0;\n isolation: isolate;\n }\n\n /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n * need to */\n [data-overflow='scroll'] [data-annotation-content] {\n position: sticky;\n width: var(--diffs-column-content-width, auto);\n left: var(--diffs-column-number-width, 0);\n }\n\n /* Undo some of the stuff that the 'pre' tag does */\n [data-annotation-slot] {\n text-wrap-mode: wrap;\n word-break: normal;\n white-space-collapse: collapse;\n }\n\n [data-change-icon] {\n fill: currentColor;\n flex-shrink: 0;\n }\n\n [data-change-icon='change'],\n [data-change-icon='rename-pure'],\n [data-change-icon='rename-changed'] {\n color: var(--diffs-modified-base);\n }\n\n [data-change-icon='new'] {\n color: var(--diffs-addition-base);\n }\n\n [data-change-icon='deleted'] {\n color: var(--diffs-deletion-base);\n }\n\n [data-change-icon='file'] {\n opacity: 0.6;\n }\n\n /* Line selection highlighting */\n [data-selected-line] {\n &[data-gutter-buffer='annotation'],\n &[data-column-number] {\n color: var(--diffs-selection-number-fg);\n background-color: var(--diffs-bg-selection-number);\n }\n\n &[data-line] {\n background-color: var(--diffs-bg-selection);\n }\n }\n\n [data-line-type='change-addition'],\n [data-line-type='change-deletion'] {\n &[data-selected-line] {\n &[data-line],\n &[data-line][data-hovered] {\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 82%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n )\n );\n }\n\n &[data-column-number],\n &[data-column-number][data-hovered] {\n color: var(--diffs-selection-number-fg);\n background-color: light-dark(\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 75%,\n var(--diffs-selection-base)\n ),\n color-mix(\n in lab,\n var(--diffs-line-bg, var(--diffs-bg)) 60%,\n var(--diffs-selection-base)\n )\n );\n }\n }\n }\n\n [data-error-wrapper] {\n overflow: auto;\n padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n var(--diffs-gap-inline, var(--diffs-gap-fallback));\n max-height: 400px;\n scrollbar-width: none;\n\n [data-error-message] {\n font-weight: bold;\n font-size: 18px;\n color: var(--diffs-deletion-base);\n }\n\n [data-error-stack] {\n color: var(--diffs-fg-number);\n }\n }\n\n [data-placeholder] {\n contain: strict;\n }\n}\n"],"mappings":";oBAAA"}