@adecore/editor 0.0.1 → 0.17.0-beta.1

package/dist/editor.css

@@ -0,0 +1,813 @@
+/* Import after @adecore/ui/theme.css; host overrides follow this file. */
+:root,
+[data-theme='light'] {
+    --code-font-size: var(--text-code);
+    --code-line-height: var(--text-code--line-height);
+    --find-match: color-mix(in srgb, var(--status-needs-you) 35%, transparent);
+    --find-current: var(--status-needs-you);
+    --find-current-text: var(--text);
+    --editor-selection: color-mix(in srgb, var(--accent) 16%, transparent);
+    --editor-occurrence: color-mix(in srgb, var(--text) 7%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 8%, transparent);
+    --editor-guide-active: color-mix(in srgb, var(--text) 24%, transparent);
+    --editor-margin: color-mix(in srgb, var(--text) 14%, transparent);
+    --editor-whitespace: color-mix(in srgb, var(--text) 30%, transparent);
+    --editor-hatch: color-mix(in srgb, var(--text) 12%, transparent);
+    --editor-added: var(--status-idle);
+    --editor-modified: var(--accent);
+    --editor-deleted: var(--status-error);
+    --editor-sticky-shadow: color-mix(in srgb, black 12%, transparent);
+    --agent-1: #c4602f;
+    --agent-2: #7c4dd8;
+    --agent-3: #0f7f78;
+    --agent-4: #c2255c;
+    --agent-5: #9a6700;
+    --agent-6: #1c6fb0;
+    --agent-ink: #fff;
+}
+[data-theme='dark'] {
+    --find-match: color-mix(in srgb, var(--status-needs-you) 24%, transparent);
+    --editor-selection: color-mix(in srgb, var(--accent) 28%, transparent);
+    --editor-occurrence: color-mix(in srgb, var(--text) 9%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-guide-active: color-mix(in srgb, var(--text) 28%, transparent);
+    --editor-margin: color-mix(in srgb, var(--text) 16%, transparent);
+    --editor-whitespace: color-mix(in srgb, var(--text) 32%, transparent);
+    --editor-hatch: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-sticky-shadow: color-mix(in srgb, black 60%, transparent);
+}
+
+.se-editor {
+    --se-gutter-width: 64px;
+    position: absolute;
+    inset: 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--surface);
+    color: var(--term-fg, var(--text));
+    font-family: var(--font-mono);
+    font-size: var(--code-font-size, var(--text-code));
+    line-height: var(--code-line-height, var(--text-code--line-height));
+    font-kerning: none;
+    text-align: left;
+}
+.se-editor *,
+.se-editor *::before,
+.se-editor *::after {
+    box-sizing: border-box;
+}
+.se-editor [hidden] {
+    display: none !important;
+}
+
+.se-viewport {
+    position: absolute;
+    inset: 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    overflow-anchor: none;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent;
+}
+.se-editor[data-wrap='true'] .se-viewport {
+    overflow-x: hidden;
+}
+.se-scroller {
+    position: relative;
+    display: flex;
+    width: max-content;
+    min-width: 100%;
+    min-height: 100%;
+}
+.se-content {
+    position: relative;
+    flex: none;
+    min-height: 100%;
+    cursor: text;
+}
+.se-overlays,
+.se-code,
+.se-over,
+.se-carets,
+.se-remote {
+    position: absolute;
+    inset: 0;
+}
+.se-overlays,
+.se-over,
+.se-carets,
+.se-remote {
+    pointer-events: none;
+}
+.se-code {
+    user-select: none;
+}
+.se-signs {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+.se-guide,
+.se-margin {
+    position: absolute;
+}
+.se-guide {
+    background: var(--editor-guide);
+}
+.se-guide-active {
+    background: var(--editor-guide-active);
+}
+.se-margin {
+    background: var(--editor-margin);
+}
+.se-ws {
+    color: var(--editor-whitespace);
+}
+.se-wrap-sign,
+.se-tab-sign {
+    position: absolute;
+    overflow: visible;
+    color: var(--editor-whitespace);
+}
+.se-over {
+    z-index: 2;
+}
+.se-carets {
+    z-index: 3;
+}
+.se-remote {
+    z-index: 3;
+}
+.se-actions {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    pointer-events: none;
+}
+.se-line-action {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    pointer-events: auto;
+    font-family: var(--font-sans);
+}
+.se-preview {
+    position: absolute;
+    z-index: 4;
+    max-width: 360px;
+    padding: 4px 8px;
+    border-radius: var(--radius-md);
+    background: var(--surface-raised);
+    box-shadow: 0 0 0 1px var(--border);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    white-space: pre-wrap;
+    pointer-events: none;
+    transform: translate(-50%, 4px);
+}
+
+.se-line {
+    position: absolute;
+    left: 0;
+    white-space: pre;
+    letter-spacing: 0;
+    direction: ltr;
+}
+.se-run {
+    position: absolute;
+    white-space: pre;
+}
+
+.se-gutter {
+    position: sticky;
+    left: 0;
+    z-index: 3;
+    flex: none;
+    width: var(--se-gutter-width);
+    overflow: hidden;
+    background: var(--surface);
+    color: var(--text-faint);
+    cursor: default;
+    user-select: none;
+}
+.se-gutter-lines {
+    position: absolute;
+    inset: 0;
+}
+.se-line-number {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 16px;
+}
+/* A step below the code, as the platform draws them, centered on the row rather than on the code's baseline. */
+.se-line-number > span {
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
+    line-height: 1;
+}
+.se-active-number {
+    color: var(--text-muted);
+}
+.se-fold-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: grid;
+    place-items: center;
+    width: 16px;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    opacity: 0;
+}
+.se-fold-toggle::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border: solid var(--text-muted);
+    border-width: 0 2px 2px 0;
+    transform: translateY(-2px) rotate(45deg);
+}
+.se-folded::before {
+    transform: translateX(-2px) rotate(-45deg);
+}
+.se-gutter:hover .se-fold-toggle {
+    opacity: 1;
+}
+.se-editor[data-fold-outline='always'] .se-fold-toggle {
+    opacity: 1;
+}
+.se-editor[data-fold-outline='off'] .se-fold-toggle {
+    display: none;
+}
+.se-gutter-action {
+    position: absolute;
+    top: 0;
+    left: 12px;
+    display: grid;
+    place-items: center;
+    width: 16px;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--status-needs-you);
+    cursor: pointer;
+}
+.se-gutter-action::before {
+    content: '';
+    width: 14px;
+    height: 14px;
+    background: currentColor;
+    /* Lucide's lightbulb. */
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+}
+.se-gutter-marker {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    display: grid;
+    place-items: center;
+    width: 16px;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--text-faint);
+    cursor: pointer;
+}
+.se-gutter-marker:hover {
+    color: var(--accent);
+}
+.se-gutter-marker::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: currentColor;
+    /* Lucide's sparkles. */
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+}
+.se-change {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 3px;
+}
+.se-change-added {
+    background: var(--editor-added);
+}
+.se-change-modified {
+    background: var(--editor-modified);
+}
+.se-attribution {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 3px;
+}
+.se-change-deleted {
+    top: -4px;
+    width: 0;
+    height: 0;
+    border: solid transparent;
+    border-width: 4px 0 4px 5px;
+    border-left-color: var(--editor-deleted);
+}
+/* The sign of a line a host marked, between the number and the bar. */
+.se-line-sign {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    display: grid;
+    place-items: center;
+    width: 12px;
+    height: 100%;
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
+    line-height: 1;
+}
+.se-line-highlight {
+    position: absolute;
+}
+
+/* Code a host draws in a widget row: the editor's face, with the gutter column the document has. */
+.se-code-block {
+    font-family: var(--font-mono);
+    font-size: var(--code-font-size, var(--text-code));
+    line-height: var(--code-line-height, var(--text-code--line-height));
+    font-kerning: none;
+    color: var(--term-fg, var(--text));
+    white-space: pre;
+}
+.se-code-row {
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+}
+.se-code-gutter {
+    position: relative;
+    display: flex;
+    flex: none;
+    justify-content: flex-end;
+    width: var(--se-gutter-width);
+    padding-right: 16px;
+    color: var(--text-faint);
+    user-select: none;
+}
+.se-code-gutter > span:first-child:not(.se-line-sign, .se-attribution) {
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
+}
+.se-code-gutter .se-attribution {
+    height: 100%;
+}
+.se-code-text {
+    flex: 1;
+    padding-right: 16px;
+}
+.se-code-text[data-faded] {
+    opacity: 0.85;
+}
+.se-code-emphasis {
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--se-emphasis) 22%, transparent);
+}
+.se-overview {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 5;
+    width: 16px;
+    pointer-events: none;
+}
+.se-tick {
+    position: absolute;
+    width: 4px;
+    border-radius: 1px;
+}
+.se-tick-added,
+.se-tick-modified,
+.se-tick-deleted {
+    left: 2px;
+}
+.se-tick-added {
+    background: var(--editor-added);
+}
+.se-tick-modified {
+    background: var(--editor-modified);
+}
+.se-tick-deleted {
+    background: var(--editor-deleted);
+}
+.se-tick-find,
+.se-tick-find-current {
+    left: 6px;
+    background: var(--find-current);
+}
+.se-tick-find {
+    opacity: 0.6;
+}
+.se-tick-occurrence {
+    left: 6px;
+    background: var(--editor-occurrence);
+}
+.se-tick-error,
+.se-tick-warning,
+.se-tick-info {
+    left: 10px;
+}
+/* The only part of the track that takes the pointer, with a wider reach than the 4px it draws. */
+.se-tick[data-offset] {
+    pointer-events: auto;
+    cursor: pointer;
+}
+.se-tick[data-offset]::before {
+    content: '';
+    position: absolute;
+    inset: -2px -3px;
+}
+.se-tick-tip {
+    position: absolute;
+    right: 20px;
+    z-index: 7;
+    max-width: 360px;
+    padding: 4px 8px;
+    border-radius: var(--radius-md);
+    background: var(--surface-raised);
+    box-shadow: 0 0 0 1px var(--border);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    white-space: pre-wrap;
+    pointer-events: none;
+    transform: translateY(-25%);
+}
+.se-tick-tip[hidden] {
+    display: none;
+}
+.se-tick-error {
+    background: var(--status-error);
+}
+.se-tick-warning {
+    background: var(--status-needs-you);
+}
+.se-tick-info {
+    background: var(--status-running);
+}
+.se-fold-chip {
+    position: absolute;
+    height: calc(var(--code-line-height, 20px) - 4px);
+    margin-top: 2px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: var(--surface-hover);
+    color: var(--text-muted);
+    font: inherit;
+    line-height: calc(var(--code-line-height, 20px) - 4px);
+    cursor: pointer;
+}
+
+.se-sticky-anchor {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    flex: none;
+    align-self: flex-start;
+    width: 0;
+    height: 0;
+}
+.se-sticky {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    background: var(--surface);
+    box-shadow:
+        0 1px 0 var(--border),
+        0 8px 12px -8px var(--editor-sticky-shadow);
+    cursor: pointer;
+    overflow: hidden;
+}
+.se-sticky-row {
+    position: relative;
+    background: var(--surface);
+    display: grid;
+    grid-template-columns: var(--se-gutter-width) minmax(0, 1fr);
+    height: var(--code-line-height, 20px);
+}
+.se-sticky-row:hover {
+    background: var(--surface-hover);
+}
+.se-sticky-number {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 16px;
+    color: var(--text-faint);
+    user-select: none;
+}
+.se-sticky-code {
+    position: relative;
+    overflow: hidden;
+}
+.se-sticky-code .se-line {
+    transform: translateX(calc(var(--se-scroll-left, 0px) * -1));
+}
+
+.se-current-line {
+    position: absolute;
+    background: var(--surface-hover);
+}
+.se-selection {
+    position: absolute;
+    background: var(--editor-selection);
+}
+.se-selection-inactive {
+    opacity: 0.6;
+}
+.se-caret {
+    position: absolute;
+    background: var(--term-cursor, var(--accent));
+    animation: se-blink 1.1s steps(1) infinite;
+}
+/* An agent's caret and its name, which sits over the line above the caret, or under it when the view has no room there. */
+.se-remote-caret {
+    position: absolute;
+}
+.se-remote-label {
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    max-width: 200px;
+    height: 18px;
+    padding: 0 6px;
+    overflow: hidden;
+    border-radius: 4px 4px 4px 0;
+    color: var(--agent-ink);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.se-remote-label[data-below] {
+    top: 100%;
+    bottom: auto;
+    border-radius: 0 4px 4px 4px;
+}
+.se-drop-caret {
+    position: absolute;
+    background: var(--term-cursor, var(--accent));
+}
+.se-carets[data-moving] .se-caret {
+    animation: none;
+}
+@keyframes se-blink {
+    50% {
+        opacity: 0;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .se-caret {
+        animation: none;
+    }
+}
+.se-find-match,
+.se-find-current,
+.se-occurrence,
+.se-bracket-match,
+.se-bracket-unmatched {
+    position: absolute;
+    border-radius: var(--radius-xs);
+}
+.se-find-match {
+    background: var(--find-match);
+}
+.se-find-current {
+    background: color-mix(in srgb, var(--find-current) 55%, transparent);
+    box-shadow: 0 0 0 1px var(--find-current);
+}
+.se-occurrence {
+    background: var(--editor-occurrence);
+    border-radius: var(--radius-sm);
+}
+.se-occurrence-write {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+/* The wave is a mask, so it takes the color of the problem from the tokens instead of one baked into an image. */
+.se-squiggle {
+    position: absolute;
+    background: var(--status-error);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 1.5 .5 3 2.5 4.5 .5 6 2.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E")
+        repeat-x left bottom / 6px 3px;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 1.5 .5 3 2.5 4.5 .5 6 2.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E")
+        repeat-x left bottom / 6px 3px;
+}
+.se-squiggle-warning {
+    background: var(--status-needs-you);
+}
+.se-squiggle-info {
+    background: var(--status-running);
+}
+.se-faded {
+    position: absolute;
+    background: color-mix(in srgb, var(--surface) 55%, transparent);
+}
+.se-link {
+    position: absolute;
+}
+.se-link::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 2px;
+    left: 0;
+    height: 1px;
+    background: var(--accent);
+}
+.se-content-link {
+    cursor: pointer;
+}
+.se-editor[data-column='true'] .se-content {
+    cursor: crosshair;
+}
+.se-over-selection {
+    cursor: default;
+}
+.se-struck {
+    position: absolute;
+}
+.se-struck::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background: var(--text-muted);
+}
+.se-bracket-match {
+    background: var(--accent-soft);
+    box-shadow: 0 0 0 1px var(--accent);
+}
+.se-bracket-unmatched {
+    background: color-mix(in srgb, var(--status-error) 16%, transparent);
+    box-shadow: inset 0 -2px var(--status-error);
+}
+
+.se-inlay {
+    position: absolute;
+    height: calc(var(--code-line-height, 20px) - 4px);
+    margin-top: 2px;
+    padding: 0 6px;
+    border-radius: var(--radius-sm);
+    background: var(--surface-hover);
+    color: var(--text-muted);
+    font-family: var(--font-sans);
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 1px));
+    line-height: calc(var(--code-line-height, 20px) - 4px);
+    white-space: pre;
+    cursor: default;
+}
+.se-composition {
+    position: absolute;
+    white-space: pre;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.se-ghost {
+    position: absolute;
+    white-space: pre;
+    font-style: italic;
+    color: var(--text-faint);
+    pointer-events: none;
+}
+/* A line action stands 28px after the line, which reads as detached from the suggestion it belongs to. */
+.se-ghost-accessory {
+    margin-left: -12px;
+}
+.se-ghost-rows .se-code-block {
+    font-style: italic;
+    color: var(--text-faint);
+}
+.se-block {
+    position: absolute;
+    left: 0;
+    padding: 4px 16px;
+    color: var(--text-muted);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+/* The host's own row runs the width of the editor over the gutter and under the pinned headers, so the code layer has no stacking of its own. */
+.se-block.se-widget {
+    z-index: 4;
+    /* The row follows the scroll, so what it draws past its width would push the scroll extent along with every scroll. */
+    overflow-x: clip;
+    padding: 0;
+    color: var(--text);
+    white-space: normal;
+}
+
+/*
+ * A code vision row is quiet text one code line high above a declaration, in the declaration's
+ * indentation. Its entries stand a text size apart and light up as a link under the pointer.
+ */
+.se-block.se-lens {
+    display: flex;
+    align-items: center;
+    gap: var(--text-xs);
+    padding: 0;
+    white-space: nowrap;
+}
+.se-lens-entry {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+.se-lens-entry:hover {
+    color: var(--accent);
+    text-decoration: underline;
+}
+.se-lens-icon {
+    width: 1em;
+    height: 1em;
+    background: var(--text-muted);
+}
+/* Lucide's user and users. */
+.se-lens-icon-user {
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+}
+.se-lens-icon-users {
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+}
+
+.se-input {
+    position: absolute;
+    z-index: 5;
+    width: 2px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    font: inherit;
+    resize: none;
+    outline: none;
+    opacity: 0;
+    overflow: hidden;
+    white-space: pre;
+    pointer-events: none;
+}
+.se-notice {
+    position: absolute;
+    right: 16px;
+    bottom: 8px;
+    z-index: 6;
+    padding: 4px 12px;
+    border-radius: var(--radius-md);
+    background: var(--surface-raised);
+    box-shadow: 0 0 0 1px var(--border);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    pointer-events: none;
+}
+
+@media (forced-colors: active) {
+    .se-selection,
+    .se-find-current,
+    .se-bracket-match {
+        forced-color-adjust: none;
+        background: Highlight;
+    }
+}