@pierre/diffs
Version:
6 lines (5 loc) • 40.8 kB
JavaScript
//#region src/style.css?inline
var style_default = "@layer base {\n :host {\n --diffs-font-fallback: \"SF Mono\", Monaco, Consolas, \"Ubuntu Mono\", \"Liberation Mono\",\n \"Courier New\", monospace;\n --diffs-header-font-fallback: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif;\n --diffs-mixer: light-dark(#000, #fff);\n --diffs-gap-fallback: 8px;\n --diffs-scrollbar-gutter-fallback: 6px;\n --diffs-scrollbar-gutter: var(--diffs-scrollbar-gutter-override, var(--diffs-scrollbar-gutter-measured, var(--diffs-scrollbar-gutter-fallback)));\n --diffs-added-light: #0dbe4e;\n --diffs-added-dark: #5ecc71;\n --diffs-modified-light: #009fff;\n --diffs-modified-dark: #69b1ff;\n --diffs-deleted-light: #ff2e3f;\n --diffs-deleted-dark: #ff6762;\n --diffs-warning-light: #d5a910;\n --diffs-warning-dark: #ffd452;\n color-scheme: light dark;\n font-family: var(--diffs-header-font-family, var(--diffs-header-font-fallback));\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 --diffs-bg: light-dark(var(--diffs-light-bg, #fff), var(--diffs-dark-bg, #000));\n --diffs-bg-buffer: var(--diffs-bg-buffer-override, light-dark(color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))));\n --diffs-bg-context: var(--diffs-bg-context-override, light-dark(color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))));\n --diffs-bg-context-gutter: var(--diffs-bg-context-gutter-override, light-dark(color-mix(in lab, var(--diffs-bg-context) 90%, var(--diffs-bg)), color-mix(in lab, var(--diffs-bg-context) 45%, var(--diffs-bg))));\n --diffs-bg-separator: var(--diffs-bg-separator-override, light-dark(color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))));\n --diffs-fg: light-dark(var(--diffs-light, #000), var(--diffs-dark, #fff));\n --diffs-fg-number: var(--diffs-fg-number-override, light-dark(color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)), color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))));\n --diffs-fg-conflict-marker: var(--diffs-fg-conflict-marker-override, var(--diffs-fg-number));\n --diffs-deletion-base: var(--diffs-deletion-color-override, light-dark(var(--diffs-light-deletion-color, var(--diffs-deletion-color, var(--diffs-deleted-light))), var(--diffs-dark-deletion-color, var(--diffs-deletion-color, var(--diffs-deleted-dark)))));\n --diffs-addition-base: var(--diffs-addition-color-override, light-dark(var(--diffs-light-addition-color, var(--diffs-addition-color, var(--diffs-added-light))), var(--diffs-dark-addition-color, var(--diffs-addition-color, var(--diffs-added-dark)))));\n --diffs-modified-base: var(--diffs-modified-color-override, light-dark(var(--diffs-light-modified-color, var(--diffs-modified-color, var(--diffs-modified-light))), var(--diffs-dark-modified-color, var(--diffs-modified-color, var(--diffs-modified-dark)))));\n --diffs-bg-deletion: var(--diffs-bg-deletion-override, light-dark(color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)), color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))));\n --diffs-bg-deletion-emphasis: var(--diffs-bg-deletion-emphasis-override, light-dark(rgb(from var(--diffs-deletion-base) r g b / .15), rgb(from var(--diffs-deletion-base) r g b / .2)));\n --diffs-bg-addition: var(--diffs-bg-addition-override, light-dark(color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)), color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))));\n --diffs-bg-addition-emphasis: var(--diffs-bg-addition-emphasis-override, light-dark(rgb(from var(--diffs-addition-base) r g b / .15), rgb(from var(--diffs-addition-base) r g b / .2)));\n --diffs-selection-base: var(--diffs-modified-base);\n --diffs-selection-number-fg: light-dark(color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer)));\n background-color: var(--diffs-bg);\n color: var(--diffs-fg);\n display: block;\n }\n\n pre, code, [data-error-wrapper] {\n isolation: isolate;\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n outline: none;\n margin: 0;\n padding: 0;\n display: block;\n }\n\n pre, code {\n background-color: var(--diffs-bg);\n }\n\n code {\n contain: content;\n }\n\n input, button {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n\n *, :before, :after {\n box-sizing: border-box;\n }\n\n [data-icon-sprite] {\n display: none;\n }\n\n [data-diffs-header], [data-separator] {\n font-family: var(--diffs-header-font-family, var(--diffs-header-font-fallback));\n }\n\n [data-diffs-header][data-sticky] {\n z-index: 1;\n background-color: var(--diffs-bg);\n position: sticky;\n top: 0;\n }\n\n [data-file-info] {\n color: var(--fg);\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 padding: 10px;\n font-weight: 700;\n }\n\n [data-diff], [data-file] {\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 &:hover [data-code]::-webkit-scrollbar-thumb {\n background-color: var(--diffs-bg-context);\n }\n }\n\n @supports (-webkit-touch-callout: none) {\n :host {\n --diffs-scrollbar-gutter-fallback: 0px;\n }\n }\n\n [data-line] span, [data-edit-prediction-suffix] span {\n color: light-dark(var(--diffs-token-light, var(--diffs-light)), var(--diffs-token-dark, var(--diffs-dark)));\n background-color: light-dark(var(--diffs-token-light-bg, inherit), var(--diffs-token-dark-bg, inherit));\n font-weight: light-dark(var(--diffs-token-light-font-weight, inherit), var(--diffs-token-dark-font-weight, inherit));\n font-style: light-dark(var(--diffs-token-light-font-style, inherit), var(--diffs-token-dark-font-style, inherit));\n text-decoration: light-dark(var(--diffs-token-light-text-decoration, inherit), var(--diffs-token-dark-text-decoration, inherit));\n }\n\n [data-line], [data-gutter-buffer], [data-column-number], [data-line-annotation], [data-no-newline], [data-merge-conflict], [data-merge-conflict-actions], [data-editor-overlay] {\n --diffs-computed-decoration-bg: var(--diffs-bg);\n --diffs-computed-diff-line-bg: var(--diffs-computed-decoration-bg);\n --diffs-computed-selected-line-bg: var(--diffs-computed-diff-line-bg);\n --diffs-computed-editor-active-line-bg: var(--diffs-computed-selected-line-bg);\n --diffs-computed-hovered-line-bg: var(--diffs-computed-editor-active-line-bg);\n --diffs-hover-mix-target: var(--diffs-bg-hover-override, var(--diffs-mixer));\n --diffs-line-bg: var(--diffs-computed-hovered-line-bg);\n color: var(--diffs-fg);\n background-color: var(--diffs-line-bg, var(--diffs-bg));\n }\n\n [data-line], [data-no-newline] {\n &[data-decoration-bg] {\n --mix-deco-light: 92%;\n --mix-deco-dark: 85%;\n\n &[data-decoration-bg-depth=\"2\"] {\n --mix-deco-light: 88%;\n --mix-deco-dark: 80%;\n }\n\n &[data-decoration-bg-depth=\"3\"] {\n --mix-deco-light: 85%;\n --mix-deco-dark: 78%;\n }\n\n --diffs-hover-mix-target: var(--diffs-decoration-bg);\n --diffs-computed-decoration-bg: light-dark(color-mix(in lab,\n var(--diffs-bg) var(--mix-deco-light),\n var(--diffs-decoration-bg)), color-mix(in lab,\n var(--diffs-bg) var(--mix-deco-dark),\n var(--diffs-decoration-bg)));\n }\n }\n\n [data-line-annotation], [data-gutter-buffer=\"annotation\"] {\n --diffs-annotation-bg: var(--diffs-bg-context);\n --diffs-computed-decoration-bg: var(--diffs-annotation-bg);\n --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n }\n\n [data-merge-conflict-actions], [data-gutter-buffer=\"merge-conflict-action\"], [data-gutter-buffer=\"merge-conflict-marker-base\"], [data-gutter-buffer=\"merge-conflict-marker-separator\"], [data-merge-conflict=\"marker-base\"], [data-merge-conflict=\"marker-separator\"] {\n --diffs-computed-decoration-bg: var(--diffs-bg-context);\n --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n }\n\n [data-gutter-buffer=\"merge-conflict-marker-start\"], [data-merge-conflict=\"marker-start\"] {\n --diffs-computed-decoration-bg: light-dark(color-mix(in lab,\n var(--diffs-bg) 78%,\n var(--conflict-bg-current-header-override, var(--diffs-addition-base))), color-mix(in lab,\n var(--diffs-bg) 68%,\n var(--conflict-bg-current-header-override, var(--diffs-addition-base))));\n --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n }\n\n [data-gutter-buffer=\"merge-conflict-marker-end\"], [data-merge-conflict=\"marker-end\"] {\n --diffs-computed-decoration-bg: light-dark(color-mix(in lab,\n var(--diffs-bg) 78%,\n var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))), color-mix(in lab,\n var(--diffs-bg) 68%,\n var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))));\n --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n }\n\n [data-has-merge-conflict] [data-line-annotation], [data-has-merge-conflict] [data-gutter-buffer=\"annotation\"] {\n --diffs-computed-decoration-bg: var(--diffs-bg);\n --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n }\n\n :where([data-background]) {\n & [data-gutter-buffer], & [data-column-number] {\n --mix-light: 91%;\n --mix-dark: 85%;\n }\n\n & [data-line], & [data-no-newline] {\n --mix-light: 88%;\n --mix-dark: 80%;\n }\n\n & [data-gutter-buffer], & [data-column-number], & [data-line], & [data-no-newline] {\n --diffs-diff-line-mix-target: var(--diffs-bg);\n\n &[data-line-type=\"change-deletion\"] {\n --diffs-diff-line-mix-target: var(--diffs-bg-deletion-override, var(--diffs-deletion-base));\n --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n &:where([data-gutter-buffer], [data-column-number]) {\n color: var(--diffs-fg-number-deletion-override, var(--diffs-deletion-base));\n --diffs-diff-line-mix-target: var(--diffs-bg-deletion-number-override, var(--diffs-deletion-base));\n }\n\n --diffs-computed-diff-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-light),\n var(--diffs-diff-line-mix-target)), color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-dark),\n var(--diffs-diff-line-mix-target)));\n }\n\n &[data-line-type=\"change-addition\"] {\n --diffs-diff-line-mix-target: var(--diffs-bg-addition-override, var(--diffs-addition-base));\n --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n &:where([data-gutter-buffer], [data-column-number]) {\n color: var(--diffs-fg-number-addition-override, var(--diffs-addition-base));\n --diffs-diff-line-mix-target: var(--diffs-bg-addition-number-override, var(--diffs-addition-base));\n }\n\n --diffs-computed-diff-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-light),\n var(--diffs-diff-line-mix-target)), color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-dark),\n var(--diffs-diff-line-mix-target)));\n }\n\n &[data-merge-conflict=\"current\"] {\n --diffs-diff-line-mix-target: var(--conflict-bg-current-override, var(--diffs-addition-base));\n --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n &:where([data-gutter-buffer], [data-column-number]) {\n color: var(--diffs-fg-number-addition-override, var(--diffs-addition-base));\n --diffs-diff-line-mix-target: var(--conflict-bg-current-number-override, var(--diffs-addition-base));\n }\n\n --diffs-computed-diff-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-light),\n var(--diffs-diff-line-mix-target)), color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-dark),\n var(--diffs-diff-line-mix-target)));\n }\n\n &[data-merge-conflict=\"incoming\"] {\n --diffs-diff-line-mix-target: var(--conflict-bg-incoming-override, var(--diffs-modified-base));\n --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n &:where([data-gutter-buffer], [data-column-number]) {\n color: var(--diffs-modified-base);\n --diffs-diff-line-mix-target: var(--conflict-bg-incoming-number-override, var(--diffs-modified-base));\n }\n\n --diffs-computed-diff-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-light),\n var(--diffs-diff-line-mix-target)), color-mix(in lab,\n var(--diffs-computed-decoration-bg) var(--mix-dark),\n var(--diffs-diff-line-mix-target)));\n }\n }\n }\n\n [data-gutter-buffer], [data-column-number], [data-line], [data-line-annotation], [data-merge-conflict], [data-merge-conflict-actions], [data-no-newline], [data-editor-overlay] {\n --diffs-selection-mix-target: var(--diffs-bg-selection-override, var(--diffs-selection-base));\n --diffs-selection-emphasis-mix-target: var(--diffs-selection-mix-target);\n\n &:where([data-editor-overlay]), &:where([data-line], [data-line-annotation], [data-merge-conflict], [data-merge-conflict-actions], [data-no-newline])[data-selected-line] {\n --mix-selection-light: 82%;\n --mix-selection-dark: 75%;\n --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n }\n\n &:where([data-gutter-buffer][data-selected-line], [data-column-number]:is([data-selected-line], [data-editor-active-line])) {\n --mix-selection-light: 75%;\n --mix-selection-dark: 60%;\n --diffs-selection-mix-target: var(--diffs-bg-selection-number-override, var(--diffs-selection-base));\n --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n }\n\n &:where([data-line][data-selected-line]):is([data-line-type=\"change-addition\"], [data-line-type=\"change-deletion\"]) {\n --diffs-selection-emphasis-mix-target: light-dark(color-mix(in lab,\n var(--diffs-diff-line-mix-target, var(--diffs-selection-mix-target))\n var(--mix-selection-light),\n var(--diffs-selection-mix-target)), var(--diffs-selection-mix-target));\n }\n\n &:where([data-editor-overlay]), &[data-selected-line] {\n --diffs-computed-selected-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-diff-line-bg) var(--mix-selection-light),\n var(--diffs-selection-mix-target)), color-mix(in lab,\n var(--diffs-computed-diff-line-bg) var(--mix-selection-dark),\n var(--diffs-selection-mix-target)));\n }\n }\n\n [data-line][data-editor-active-line], [data-column-number][data-editor-active-line] {\n --diffs-computed-editor-active-line-bg: color-mix(in lab,\n var(--diffs-computed-selected-line-bg)\n var(--diffs-editor-active-line-source-mix, 100%),\n var(--diffs-selection-emphasis-mix-target));\n }\n\n @media (pointer: fine) {\n [data-line][data-hovered], [data-gutter-buffer][data-hovered], [data-column-number][data-hovered], [data-line-annotation][data-hovered], [data-no-newline][data-hovered], [data-merge-conflict][data-hovered], [data-merge-conflict-actions][data-hovered], [data-editor-overlay][data-hovered] {\n --diffs-computed-hovered-line-bg: light-dark(color-mix(in lab,\n var(--diffs-computed-editor-active-line-bg) 97%,\n var(--diffs-hover-mix-target)), color-mix(in lab,\n var(--diffs-computed-editor-active-line-bg) 91%,\n var(--diffs-hover-mix-target)));\n }\n }\n\n [data-gutter-buffer][data-selected-line], [data-column-number]:is([data-selected-line], [data-editor-active-line]) {\n color: var(--diffs-selection-number-fg);\n }\n\n [data-no-newline] {\n user-select: none;\n\n & span {\n opacity: .6;\n }\n }\n\n [data-diff-type=\"split\"][data-overflow=\"scroll\"] {\n grid-template-columns: 1fr 1fr;\n display: grid;\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 grid-auto-flow: dense;\n grid-template-columns: var(--diffs-code-grid);\n overflow: var(--diffs-overflow-override, scroll) clip;\n overscroll-behavior-x: none;\n tab-size: var(--diffs-tab-size, 2);\n padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n padding-bottom: max(0px,\n calc(var(--diffs-gap-block, var(--diffs-gap-fallback)) -\n var(--diffs-scrollbar-gutter)));\n scrollbar-gutter: stable;\n align-self: flex-start;\n display: grid;\n }\n\n [data-diffs-scrollbar-measure] {\n opacity: 0;\n pointer-events: none;\n scrollbar-gutter: auto;\n grid-template-columns: none;\n width: 100px;\n height: 100px;\n padding: 0;\n position: absolute;\n top: -200px;\n left: -200px;\n }\n\n [data-container-size] {\n container-type: inline-size;\n }\n\n [data-code]::-webkit-scrollbar {\n width: 0;\n height: var(--diffs-scrollbar-gutter);\n }\n\n [data-code]::-webkit-scrollbar-track {\n background: none;\n }\n\n [data-code]::-webkit-scrollbar-thumb {\n background-color: #0000;\n background-clip: content-box;\n border: 1px solid #0000;\n border-radius: 3px;\n }\n\n [data-code]::-webkit-scrollbar-corner {\n background-color: #0000;\n }\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], [data-diffs-header] ~ [data-file] {\n & [data-code], &[data-overflow=\"wrap\"], &[data-dehydrated][data-diff-type=\"split\"][data-overflow=\"scroll\"] {\n padding-top: 0;\n }\n }\n\n [data-gutter] {\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n z-index: 3;\n background-color: var(--diffs-bg);\n grid-column: 1;\n display: grid;\n position: relative;\n\n & [data-gutter-buffer], & [data-column-number] {\n border-right: var(--diffs-gap-style, 2px solid var(--diffs-bg));\n }\n }\n\n [data-content] {\n grid-template-rows: subgrid;\n grid-template-columns: subgrid;\n background-color: var(--diffs-bg);\n grid-column: 2;\n min-width: 0;\n display: grid;\n }\n\n [data-diff-type=\"split\"][data-overflow=\"wrap\"], [data-dehydrated][data-diff-type=\"split\"][data-overflow=\"scroll\"] {\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 display: grid;\n\n & [data-code] {\n display: contents;\n }\n\n & [data-deletions] {\n & [data-gutter] {\n grid-column: 1;\n }\n\n & [data-content] {\n border-right: 1px solid var(--diffs-bg);\n grid-column: 2;\n }\n }\n\n & [data-additions] {\n & [data-gutter] {\n border-left: 1px solid var(--diffs-bg);\n grid-column: 3;\n }\n\n & [data-content] {\n grid-column: 4;\n }\n }\n }\n\n [data-dehydrated][data-diff-type=\"split\"][data-overflow=\"scroll\"] [data-content] {\n overflow: clip;\n }\n\n [data-overflow=\"scroll\"] [data-gutter] {\n position: sticky;\n left: 0;\n }\n\n [data-interactive-lines] [data-line] {\n cursor: pointer;\n }\n\n [data-interactive-line-numbers] [data-column-number] {\n cursor: pointer;\n touch-action: none;\n }\n\n [data-content-buffer], [data-gutter-buffer] {\n user-select: none;\n min-height: 1lh;\n position: relative;\n }\n\n [data-gutter-buffer] {\n padding-left: 2ch;\n padding-right: 1ch;\n\n &:before {\n content: \"\";\n min-width: var(--diffs-min-number-column-width, var(--diffs-min-number-column-width-default, 3ch));\n display: block;\n }\n }\n\n [data-gutter-buffer=\"annotation\"] {\n --diffs-annotation-bg: var(--diffs-bg-context-gutter);\n min-height: 0;\n }\n\n [data-gutter-buffer=\"buffer\"] {\n --diffs-line-bg: var(--diffs-bg-context-gutter);\n }\n\n [data-content-buffer] {\n background-position: 5px 0;\n background-size: 8px 8px;\n background-origin: border-box;\n background-image: repeating-linear-gradient(-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 grid-column: 1;\n }\n\n [data-separator] {\n box-sizing: content-box;\n background-color: var(--diffs-bg);\n }\n\n [data-separator=\"simple\"] {\n min-height: 4px;\n }\n\n [data-separator=\"line-info\"], [data-separator=\"line-info-basic\"], [data-separator=\"metadata\"], [data-separator=\"simple\"] {\n background-color: var(--diffs-bg-separator);\n }\n\n [data-separator=\"line-info\"], [data-separator=\"line-info-basic\"], [data-separator=\"metadata\"] {\n height: 32px;\n position: relative;\n }\n\n [data-separator-wrapper] {\n user-select: none;\n fill: currentColor;\n background-color: var(--diffs-bg);\n align-items: center;\n height: 100%;\n display: flex;\n position: absolute;\n inset-inline: 0;\n }\n\n [data-content] [data-separator-wrapper] {\n display: none;\n }\n\n [data-separator=\"metadata\"] [data-separator-wrapper] {\n background-color: var(--diffs-bg-separator);\n height: 100%;\n color: var(--diffs-fg-number);\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: min-content;\n padding-inline: 1ch;\n inset-inline: 100% auto;\n overflow: hidden;\n }\n\n [data-separator=\"line-info\"] {\n margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n & [data-separator-wrapper] {\n min-width: 16px;\n }\n }\n\n [data-separator=\"line-info-basic\"], [data-separator=\"metadata\"] {\n margin-block: 0;\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-expand-index] [data-separator-wrapper] {\n grid-template-columns: 32px auto;\n display: grid;\n }\n\n [data-expand-index] [data-separator-wrapper][data-separator-multi-button] {\n grid-template-columns: 32px 32px auto;\n }\n\n [data-expand-button], [data-separator-content] {\n background-color: var(--diffs-bg-separator);\n flex: none;\n align-items: center;\n display: flex;\n }\n\n [data-expand-index] [data-separator-content]:hover {\n cursor: pointer;\n text-decoration: underline;\n }\n\n [data-expand-button] {\n cursor: pointer;\n min-width: 32px;\n color: var(--diffs-fg-number);\n border-right: 2px solid var(--diffs-bg);\n flex-shrink: 0;\n justify-content: center;\n align-self: stretch;\n\n &:hover {\n color: var(--diffs-fg);\n }\n\n &[data-expand-all-button] {\n display: none;\n }\n }\n\n [data-expand-down] [data-icon] {\n transform: scaleY(-1);\n }\n\n [data-separator-content] {\n height: 100%;\n color: var(--diffs-fg-number);\n flex: auto;\n justify-content: flex-start;\n padding: 0 1ch;\n overflow: hidden;\n }\n\n [data-separator=\"line-info\"], [data-separator=\"line-info-basic\"] {\n & [data-separator-content] {\n user-select: none;\n height: 100%;\n overflow: clip;\n }\n }\n\n [data-unmodified-lines] {\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 0 auto;\n min-width: 0;\n display: block;\n overflow: hidden;\n }\n\n @supports (width: 1cqi) {\n [data-unified] {\n & [data-separator=\"line-info\"] [data-separator-wrapper] {\n padding-inline: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n width: 100cqi;\n\n & [data-separator-content] {\n border-radius: 6px;\n }\n }\n\n & [data-separator=\"line-info\"][data-expand-index] [data-separator-wrapper] [data-separator-content] {\n border-top-left-radius: unset;\n border-bottom-left-radius: unset;\n }\n }\n\n [data-gutter] {\n & [data-separator=\"line-info\"] [data-separator-wrapper] {\n padding-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n }\n\n & [data-separator=\"line-info\"] [data-separator-content] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n & [data-separator=\"line-info\"][data-expand-index] [data-separator-content] {\n border-top-left-radius: unset;\n border-bottom-left-radius: unset;\n }\n }\n\n [data-additions] {\n & [data-content] [data-separator=\"line-info\"] {\n background-color: var(--diffs-bg);\n\n & [data-separator-wrapper] {\n display: none;\n }\n }\n\n & [data-gutter] [data-separator=\"line-info\"] [data-separator-wrapper] {\n background-color: var(--diffs-bg-separator);\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n height: 100%;\n display: block;\n\n & [data-separator-content], & [data-expand-button] {\n display: none;\n }\n }\n }\n\n [data-overflow=\"scroll\"] [data-additions] [data-gutter] [data-separator=\"line-info\"] [data-separator-wrapper] {\n width: calc(100cqi - var(--diffs-gap-inline, var(--diffs-gap-fallback)));\n }\n\n [data-overflow=\"wrap\"] [data-additions] [data-content] [data-separator=\"line-info\"] [data-separator-wrapper] {\n background-color: var(--diffs-bg-separator);\n height: 100%;\n margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n display: block;\n\n & [data-separator-content], & [data-expand-button] {\n display: none;\n }\n }\n\n [data-separator=\"line-info\"] [data-separator-wrapper] {\n & [data-expand-both], & [data-expand-down], & [data-expand-up] {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n @media (pointer: fine) {\n [data-separator=\"line-info\"] [data-separator-wrapper] {\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\n @media (pointer: coarse) {\n [data-separator=\"line-info-basic\"] [data-separator-wrapper][data-separator-multi-button] {\n grid-template-columns: 34px 34px auto;\n\n & [data-separator-content] {\n grid-column: unset;\n grid-row: unset;\n }\n }\n\n @supports (width: 1cqi) {\n [data-separator=\"line-info\"] [data-separator-wrapper] {\n & [data-expand-both], & [data-expand-down], & [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\n @media (pointer: fine) {\n [data-separator-wrapper][data-separator-multi-button] {\n grid-template-rows: 50% 50%;\n display: grid;\n\n & [data-separator-content] {\n grid-area: 1 / 2 / -1;\n min-width: min-content;\n }\n\n & [data-expand-button] {\n grid-column: 1;\n }\n }\n\n [data-separator=\"line-info\"] [data-separator-wrapper], [data-separator=\"line-info\"] [data-separator-wrapper][data-separator-multi-button] {\n grid-template-columns: 34px auto;\n }\n\n [data-separator=\"line-info-basic\"][data-expand-index] [data-separator-wrapper] {\n grid-template-columns: 100% auto;\n }\n\n [data-separator=\"line-info\"], [data-separator=\"line-info-basic\"] {\n & [data-separator-multi-button] {\n & [data-expand-up] {\n border-bottom: 1px solid var(--diffs-bg);\n border-right: 2px solid var(--diffs-bg);\n }\n\n & [data-expand-down] {\n border-top: 1px solid var(--diffs-bg);\n border-right: 2px solid var(--diffs-bg);\n }\n }\n }\n }\n\n [data-additions] [data-gutter] [data-separator-wrapper], [data-additions] [data-separator=\"line-info-basic\"] [data-separator-wrapper], [data-content] [data-separator-wrapper] {\n display: none;\n }\n\n [data-line-annotation] {\n min-height: var(--diffs-annotation-min-height, 0);\n z-index: 2;\n }\n\n [data-merge-conflict-actions] {\n z-index: 2;\n }\n\n [data-separator=\"custom\"] {\n grid-template-columns: subgrid;\n display: grid;\n }\n\n [data-line], [data-column-number], [data-no-newline] {\n padding-inline: 1ch;\n position: relative;\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\"], & [data-line-type=\"change-deletion\"] {\n &[data-no-newline], &[data-line] {\n &:before {\n user-select: none;\n width: 1ch;\n height: 1lh;\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n }\n\n & [data-line-type=\"change-addition\"] {\n &[data-line], &[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], &[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\"], & [data-line-type=\"change-addition\"] {\n &[data-column-number] {\n &:before {\n content: \"\";\n user-select: none;\n contain: strict;\n width: 4px;\n height: 100%;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n }\n\n & [data-line-type=\"change-deletion\"] {\n &[data-column-number] {\n &:before {\n background-image: linear-gradient(0deg,\n var(--diffs-bg-deletion) 50%,\n var(--diffs-deletion-base) 50%);\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 white-space: pre-wrap;\n word-break: break-word;\n }\n\n & [data-annotation-content] {\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 color: var(--diffs-fg-number);\n padding-left: 2ch;\n }\n\n [data-line-number-content] {\n min-width: var(--diffs-min-number-column-width, var(--diffs-min-number-column-width-default, 3ch));\n z-index: 1;\n display: inline-block;\n position: relative;\n }\n\n [data-disable-line-numbers] {\n & [data-gutter-buffer], & [data-column-number] {\n min-width: 4px;\n padding: 0;\n\n &:before {\n min-width: 0;\n }\n }\n\n & [data-line-number-content] {\n display: none;\n }\n\n & [data-gutter-utility-slot] {\n right: unset;\n justify-content: flex-start;\n left: 0;\n }\n\n &[data-indicators=\"bars\"] [data-gutter-utility-slot] {\n left: 6px;\n }\n }\n\n [data-file][data-disable-line-numbers] {\n & [data-gutter-buffer], & [data-column-number] {\n border-right: 0;\n min-width: 0;\n }\n }\n\n [data-diff-span] {\n box-decoration-break: clone;\n border-radius: 3px;\n }\n\n [data-line-type=\"change-addition\"] [data-diff-span] {\n background-color: var(--diffs-bg-addition-emphasis);\n }\n\n [data-line-type=\"change-deletion\"] [data-diff-span] {\n background-color: var(--diffs-bg-deletion-emphasis);\n }\n\n [data-merge-conflict=\"marker-start\"], [data-merge-conflict=\"marker-base\"], [data-merge-conflict=\"marker-separator\"], [data-merge-conflict=\"marker-end\"] {\n color: var(--diffs-fg);\n padding-left: 1ch;\n }\n\n [data-merge-conflict=\"marker-start\"], [data-merge-conflict=\"marker-end\"] {\n align-items: center;\n display: flex;\n\n &:after {\n color: var(--diffs-fg-conflict-marker);\n font-size: .75rem;\n font-style: normal;\n line-height: 1.25rem;\n font-family: var(--diffs-header-font-family, var(--diffs-header-font-fallback));\n padding-left: 1ch;\n }\n }\n\n [data-merge-conflict=\"marker-start\"]:after {\n content: \"(Current Change)\";\n }\n\n [data-merge-conflict=\"marker-end\"]:after {\n content: \"(Incoming Change)\";\n }\n\n [data-merge-conflict-actions-content] {\n min-height: 1.75rem;\n font-family: var(--diffs-header-font-family, var(--diffs-header-font-fallback));\n color: var(--diffs-fg);\n align-items: center;\n gap: .25rem;\n padding-inline: .5rem;\n font-size: .75rem;\n line-height: 1.2;\n display: flex;\n }\n\n [data-merge-conflict-action] {\n appearance: none;\n color: var(--diffs-fg-number);\n font: inherit;\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font-style: normal;\n }\n\n [data-merge-conflict-action]:hover {\n color: var(--diffs-fg);\n }\n\n [data-merge-conflict-action=\"current\"]:hover {\n color: var(--diffs-addition-base);\n }\n\n [data-merge-conflict-action=\"incoming\"]:hover {\n color: var(--diffs-modified-base);\n }\n\n [data-merge-conflict-action-separator] {\n color: var(--diffs-fg-number);\n opacity: .6;\n user-select: none;\n }\n\n [data-diffs-header=\"default\"] {\n background-color: var(--diffs-bg);\n justify-content: space-between;\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n min-height: calc(1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3));\n z-index: 2;\n flex-direction: row;\n padding-inline: 16px;\n display: flex;\n position: relative;\n top: 0;\n }\n\n [data-header-content] {\n align-items: center;\n gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n white-space: nowrap;\n flex-direction: row;\n min-width: 0;\n display: flex;\n }\n\n [data-header-content] [data-prev-name], [data-header-content] [data-title] {\n text-overflow: ellipsis;\n white-space: nowrap;\n direction: rtl;\n min-width: 0;\n overflow: hidden;\n }\n\n [data-prev-name] {\n opacity: .7;\n }\n\n [data-rename-icon] {\n fill: currentColor;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n [data-diffs-header=\"default\"] [data-metadata] {\n white-space: nowrap;\n align-items: center;\n gap: 1ch;\n display: flex;\n }\n\n [data-diffs-header=\"default\"] [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=\"default\"] [data-deletions-count] {\n font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n color: var(--diffs-deletion-base);\n }\n\n [data-change-icon] {\n fill: currentColor;\n flex-shrink: 0;\n }\n\n [data-change-icon=\"change\"], [data-change-icon=\"rename-pure\"], [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: .6;\n }\n\n [data-annotation-content] {\n z-index: 2;\n isolation: isolate;\n white-space: normal;\n align-self: flex-start;\n min-width: 0;\n display: flow-root;\n position: relative;\n }\n\n [data-overflow=\"scroll\"] [data-annotation-content], [data-overflow=\"scroll\"] [data-merge-conflict-actions-content] {\n width: var(--diffs-column-content-width, auto);\n left: var(--diffs-column-number-width, 0);\n position: sticky;\n }\n\n [data-annotation-slot] {\n text-wrap-mode: wrap;\n word-break: normal;\n white-space-collapse: collapse;\n }\n\n [data-gutter-utility-slot] {\n touch-action: none;\n justify-content: flex-end;\n display: flex;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n }\n\n [data-utility-button] {\n appearance: none;\n cursor: pointer;\n width: 1lh;\n height: 1lh;\n font-size: var(--diffs-font-size, 13px);\n line-height: var(--diffs-line-height, 20px);\n background-color: var(--diffs-modified-base);\n color: var(--diffs-bg);\n fill: currentColor;\n z-index: 4;\n touch-action: none;\n border: none;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n margin-right: calc(-1lh + 1ch);\n padding: 0;\n display: flex;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 -4px;\n }\n }\n\n [data-decoration-bar-stack] {\n pointer-events: none;\n isolation: isolate;\n z-index: 1;\n background-color: var(--diffs-decoration-bar-color, transparent);\n box-sizing: content-box;\n border-left: 2px solid var(--diffs-bg);\n border-right: 2px solid var(--diffs-bg);\n width: 6px;\n position: absolute;\n top: 0;\n bottom: 0;\n right: -2px;\n\n [data-decoration-bar-depth=\"1\"] & {\n background-color: color-mix(in lab,\n var(--diffs-bg) 20%,\n var(--diffs-decoration-bar-color, transparent));\n }\n\n [data-decoration-bar-depth=\"2\"] & {\n background-color: color-mix(in lab,\n var(--diffs-bg) 45%,\n var(--diffs-decoration-bar-color, transparent));\n }\n\n [data-decoration-bar-depth=\"3\"] & {\n background-color: color-mix(in lab,\n var(--diffs-bg) 65%,\n var(--diffs-decoration-bar-color, transparent));\n }\n\n [data-decoration-bar-start] & {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n }\n\n [data-decoration-bar-end] & {\n z-index: 3;\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n }\n }\n\n [data-placeholder] {\n contain: strict;\n }\n\n [data-error-wrapper] {\n padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n var(--diffs-gap-inline, var(--diffs-gap-fallback));\n scrollbar-width: none;\n max-height: 400px;\n overflow: auto;\n\n & [data-error-message] {\n color: var(--diffs-deletion-base);\n font-size: 18px;\n font-weight: bold;\n }\n\n & [data-error-stack] {\n color: var(--diffs-fg-number);\n }\n }\n}\n\n@layer theme, rendered, unsafe;\n";
//#endregion
export { style_default as default };
//# sourceMappingURL=style.js.map