styles.css

/* Code Linker 1.8.0 — assembled from the shared styles and src/styles.css by "npm run build". Do not edit directly. */

/* Styles every linker plugin uses. The token below stands for the plugin class prefix;
   build.mjs substitutes it when it assembles styles.css. See CONTRIBUTING.md. */

/* The second column of a suggestion row — the note in one pair, the path in the other. */
body.code-linker-hide-suggestion-path .code-linker-path,
body.code-linker-hide-suggestion-path .code-linker-suggestion-note {
  display: none;
}

.code-linker-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-ui-small);
}

.code-linker-preview-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.code-linker-folder-row .setting-item-name {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  overflow-wrap: anywhere;
}

.code-linker-folder-add {
  display: flex;
  gap: 8px;
  margin: 6px 0 18px 1.5em;
}

.code-linker-folder-input {
  flex: 1 1 auto;
  min-width: 0;
}

.code-linker-folder-addbtn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.code-linker-folder-addbtn svg {
  width: 16px;
  height: 16px;
}

/* Editable rows: the entry itself is the input, so a typo is corrected where it is read. */
.code-linker-list-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 4px 1.5em;
  padding-left: 0.75em;
  border-left: 2px solid var(--background-modifier-border);
}

.code-linker-list-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
}

.code-linker-list-del {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.code-linker-list-del svg {
  width: 14px;
  height: 14px;
}

/* Ten rows, then it scrolls: a long list must not push the rest of the tab out of reach. */
.code-linker-list-scroll {
  max-height: 21em;
  overflow-y: auto;
}

/* Priority order among the installed linker plugins. Our own row is the movable one, so
   it is the one that reads as active; the others are context. */
.code-linker-precedence-list {
  margin: 0 0 18px 1.5em;
}

.code-linker-precedence-list .setting-item {
  border-top: none;
  /* Padding matches the folder-list rows, so this nested list lines up with the other one in the same pane: text off the left edge, arrows level with the remove buttons. */ padding: 4px 6px 4px 0.75em;
}

.code-linker-precedence-list .setting-item-name {
  color: var(--text-muted);
}

.code-linker-precedence-self .setting-item-name {
  color: var(--text-normal);
  font-weight: var(--font-semibold);
}

/* The hidden span trackThemeColors settles a colour through, and the canvas it paints one the
   swatch cannot take on. Off-flow so measuring never moves the page. */
.code-linker-probe {
  position: absolute;
  visibility: hidden;
}

/* Styles both sigil linkers use. The plugin class prefix is substituted by build.mjs. */

.code-linker-suggestion {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}

.code-linker-name {
  font-weight: var(--font-semibold);
}

.code-linker-kind {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.code-linker-path {
  margin-left: auto;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

.code-linker-input {
  width: 100%;
}

/* Muted helper / status line under a control or section — one class for every such
   note in the pane. .is-error tints it for a missing folder or other problem. */
.code-linker-note {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  margin: 4px 0 14px;
}

.code-linker-note.is-error {
  color: var(--text-error);
}

/* User editor preset rows: name + template + remove on one line, wrapping to
   two lines on a narrow pane so nothing collides. The full control area is used
   (the empty name label is hidden) and the theme styles the row like any other. */
.code-linker-editor-row .setting-item-info {
  display: none;
}

.code-linker-editor-row .setting-item-control {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.code-linker-editor-name {
  flex: 1 1 140px;
  min-width: 0;
}

.code-linker-editor-tpl {
  flex: 3 1 240px;
  min-width: 0;
}

.code-linker-hover {
  position: fixed;
  z-index: var(--layer-popover);
  max-width: min(var(--code-linker-hover-width, 720px), 90vw);
  box-shadow: var(--shadow-s);
  user-select: text;
  -webkit-user-select: text;
}

.code-linker-hover.code-linker-hidden {
  display: none;
}

.code-linker-embed {
  margin: var(--p-spacing, 1em) 0;
}

/* The embed's header is a row: the title takes what is left, the toolbar sits at the end.
   It wraps because a narrow block cannot hold both, and the embed clips what overflows. */
.code-linker-embed-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* The title yields its width to the toolbar, but not all of it: shrinking to nothing is how
   it kept the row on one line and pushed the last controls out of the box. */
.code-linker-embed-title {
  cursor: pointer;
  flex: 1 1 6em;
  min-width: 4em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Obsidian floats its own edit-block button over the top right of a rendered block, so the
   last control keeps clear of it. */
.code-linker-embed-tools {
  padding-right: 22px;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  opacity: var(--code-linker-embed-tools-idle, 1);
  transition: opacity 100ms ease-out;
}

.code-linker-embed:hover .code-linker-embed-tools,
.code-linker-embed:focus-within .code-linker-embed-tools {
  opacity: 1;
}

.code-linker-embed-group {
  display: flex;
  align-items: center;
  gap: 1px;
}

.code-linker-embed-group:empty {
  display: none;
}

.code-linker-embed-group + .code-linker-embed-group {
  margin-left: 4px;
  padding-left: 5px;
  border-left: 1px solid var(--background-modifier-border);
}

.code-linker-embed-button {
  height: auto;
  padding: 2px 4px;
  color: var(--text-muted);
  font-family: var(--font-interface);
}

.code-linker-embed-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.code-linker-embed-button.is-active {
  color: var(--text-accent);
}

.code-linker-embed-button.is-hidden,
.code-linker-embed-group.is-hidden {
  display: none;
}

.code-linker-embed-error,
.code-linker-embed-note {
  padding: 6px 10px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.code-linker-embed-error {
  color: var(--text-error);
}

/* Colours are declared, not merely read with a fallback. Style Settings shows a colour row's
   live computed value when the row carries no default, and an undeclared variable reads as
   empty and renders a blank swatch. On `:root` rather than `body`, so a value set on `body` —
   Style Settings' own rule, or a snippet's — reaches the mark before this does.
   See CONTRIBUTING.md. */
:root {
  --code-linker-link-color: var(--link-external-color, var(--link-color));
  --code-linker-stale-color: var(--text-warning);
  --code-linker-broken-color: var(--text-error);
}

/* Our own links, marked in both render modes whether or not they have drifted. The defaults
   are the theme's own, so a link the plugin inserted goes on looking like any other link
   until a value is chosen.
   What it looks like is decided in --sl-* below, where no theme competes; only the rule that
   spends them meets the theme's own link rules. See CONTRIBUTING.md. */
.code-linker-link,
.cm-code-linker-link {
  --sl-ink: var(--link-external-color, var(--link-color));
  --sl-decoration: var(--code-linker-underline, var(--link-external-decoration, underline));
}

/* An editor line carries no underline of its own, so nothing chosen means nothing drawn. */
.cm-code-linker-link {
  --sl-decoration: var(--code-linker-underline, none);
}

/* The one rule that meets the theme's own, and it sits no higher than the plugin's rules ever
   have: a theme that paints its own links still wins, as it did before any of this was
   configurable. */
.code-linker-link,
.cm-code-linker-link {
  color: var(--sl-ink);
  text-decoration: var(--sl-decoration);
}

/* A colour picked in Style Settings is the reader's own: the class comes from
   trackPickedColors(), and this and the modes below are the only places a theme is answered
   rather than left to win. See CONTRIBUTING.md. */
body.code-linker-link-color-picked .code-linker-link,
body.code-linker-link-color-picked .cm-code-linker-link {
  --sl-ink: var(--code-linker-link-color);
  color: var(--sl-ink) !important;
}

/* Relative colours: an installer without them drops the block whole and the colour above
   stands. The source is read where the link sits, so the hue follows the link colour of the
   note it is in. After the picked rule, so a mode outranks a picked colour. */
@supports (color: oklch(from red l c h)) {
  body.code-linker-hue-turned .code-linker-link,
  body.code-linker-hue-turned .cm-code-linker-link {
    --sl-ink: oklch(from var(--link-external-color, var(--link-color)) l c calc(h + var(--code-linker-hue-shift, 0)));
    color: var(--sl-ink) !important;
  }

  body.code-linker-hue-fixed .code-linker-link,
  body.code-linker-hue-fixed .cm-code-linker-link {
    --sl-ink: oklch(from var(--link-external-color, var(--link-color)) l c var(--code-linker-hue, 210));
    color: var(--sl-ink) !important;
  }
}

/* Drifted line (stale) and renamed/removed symbol (broken), in both render modes.
   A border-bottom rather than text-decoration: wavy/offset underlines render
   inconsistently across platforms, so a plain border is the reliable choice — and it stacks
   with the link's own underline above instead of fighting it. */
.code-linker-stale,
.code-linker-broken {
  border-bottom-width: var(--code-linker-mark-underline-width, 1px);
  border-bottom-style: var(--code-linker-mark-underline-style, dotted);
}

.code-linker-stale {
  border-bottom-color: var(--code-linker-stale-color);
}

.code-linker-broken {
  border-bottom-color: var(--code-linker-broken-color);
}

/* The same underline is invisible in some themes, so the state can also be spelled out.
   `none` rather than an empty string: with no symbol chosen there is no pseudo-element at
   all. The symbol is not part of the link text, so it carries none of its underline. */
.code-linker-stale::before,
body.code-linker-mark-after .code-linker-stale::after {
  content: var(--code-linker-stale-symbol, none);
  color: var(--code-linker-stale-color);
  border-bottom: none;
  font-size: 0.8em;
  vertical-align: super;
}

.code-linker-broken::before,
body.code-linker-mark-after .code-linker-broken::after {
  content: var(--code-linker-broken-symbol, none);
  color: var(--code-linker-broken-color);
  border-bottom: none;
  font-size: 0.8em;
  vertical-align: super;
}

body.code-linker-mark-after .code-linker-stale::before,
body.code-linker-mark-after .code-linker-broken::before {
  content: none;
}

/* Nested sub-rows — searchable kinds under a language, and chosen folders under a
   folder list — share one indent and compact height so the pane reads as one list
   style. The kind rule is unqualified so it also indents the plain rebuild hint. */
.code-linker-kind-row,
.code-linker-folder-row {
  margin-left: 1.5em;
  padding-left: 0.75em;
  border-left: 2px solid var(--background-modifier-border);
}

.code-linker-kind-row.setting-item,
.code-linker-folder-row.setting-item {
  border-top: 0;
  padding: 4px 6px 4px 0.75em;
}

.code-linker-kind-row .setting-item-name {
  font-size: 0.9em;
  opacity: 0.85;
}

/* Folder-set editor: a full-width input with autocomplete and an add button below
   the chosen-folder rows. */
.code-linker-folder-rows:not(:empty) {
  margin: 6px 0;
}

.code-linker-preview-file {
  font-weight: var(--font-semibold);
  margin: 12px 0 4px;
  overflow-wrap: anywhere;
}

.code-linker-preview-table td {
  border-bottom: 1px solid var(--background-modifier-border);
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}

.code-linker-preview-pick {
  width: 1%;
  padding-right: 0;
  vertical-align: middle;
}

.code-linker-preview-move {
  font-family: var(--font-monospace);
  white-space: nowrap;
  width: 1%;
  color: var(--text-muted);
}

/* A guessed move (file matched by symbol or basename), not a plain line drift — tinted so
   it stands out for a closer look before applying. */
.code-linker-preview-moved .code-linker-preview-move {
  color: var(--code-linker-stale-color);
  white-space: normal;
}

.code-linker-preview-more,
.code-linker-preview-empty {
  color: var(--text-muted);
  padding: 8px 0;
}

.code-linker-preview-attention {
  color: var(--code-linker-broken-color);
}

.code-linker-preview-broken {
  font-size: var(--font-ui-small);
  color: var(--code-linker-broken-color);
  padding: 2px 8px;
  overflow-wrap: anywhere;
}

/* @settings

name: Code Linker
id: code-linker
settings:
  -
    id: code-linker-links
    title: Links
    type: heading
    level: 1
  -
    id: code-linker-link-color
    title: Link colour
    description: Follows the theme's colour for external links until you pick one.
    type: variable-color
    format: hex
    opacity: false
  -
    id: code-linker-hue-mode
    title: Follow the link colour
    description: Paints a link the plugin inserted from the link colour where it sits — including one a cssclass gives a single note — with a hue of your own, so it keeps that relationship when the theme changes. Leave empty to use the colour above. Relative colours need a recent Obsidian installer; without them the colour above is used.
    type: class-select
    allowEmpty: true
    options:
      -
        label: Shift its hue
        value: code-linker-hue-turned
      -
        label: Replace its hue
        value: code-linker-hue-fixed
  -
    id: code-linker-hue-shift
    title: Hue shift
    description: How far round the colour wheel such a link sits from the link colour, in degrees. Read by "Shift its hue".
    type: variable-number-slider
    default: 0
    min: -180
    max: 180
    step: 5
  -
    id: code-linker-hue
    title: Hue
    description: The hue such a link takes, in degrees, keeping the lightness and saturation of the link colour beside it. Read by "Replace its hue".
    type: variable-number-slider
    default: 210
    min: 0
    max: 360
    step: 5
  -
    id: code-linker-underline
    title: Underline
    description: How a link the plugin inserted is underlined in Reading view.
    type: variable-select
    default: var(--link-external-decoration, underline)
    options:
      -
        label: Theme default
        value: var(--link-external-decoration, underline)
      -
        label: Underline
        value: underline
      -
        label: Dotted
        value: underline dotted
      -
        label: Dashed
        value: underline dashed
      -
        label: Double
        value: underline double
      -
        label: None
        value: none
  -
    id: code-linker-marks
    title: Stale and broken links
    type: heading
    level: 1
  -
    id: code-linker-stale-color
    title: Stale-link underline colour
    description: Links and embeds whose target has moved — the update commands can fix them. Follows the theme's warning colour until you pick one.
    type: variable-color
    format: hex
    opacity: false
  -
    id: code-linker-broken-color
    title: Broken-link underline colour
    description: Links and embeds whose pin no longer matches anything — renamed, removed, or rewritten. Follows the theme's error colour until you pick one.
    type: variable-color
    format: hex
    opacity: false
  -
    id: code-linker-mark-underline-style
    title: Stale / broken underline style
    type: variable-select
    default: dotted
    options:
      - dotted
      - dashed
      - solid
      - double
  -
    id: code-linker-mark-underline-width
    title: Stale / broken underline thickness
    type: variable-number-slider
    default: 1
    min: 1
    max: 4
    step: 1
    format: px
  -
    id: code-linker-stale-symbol
    title: Stale-link symbol
    description: Any character or emoji, shown beside a link whose target has moved. Leave empty for none.
    type: variable-text
    quotes: true
    default: ''
  -
    id: code-linker-broken-symbol
    title: Broken-link symbol
    description: Any character or emoji, shown beside a link whose pin no longer matches. Leave empty for none.
    type: variable-text
    quotes: true
    default: ''
  -
    id: code-linker-mark-after
    title: Put the symbol after the link
    description: Off shows it before the link.
    type: class-toggle
    default: false
  -
    id: code-linker-previews
    title: Previews and embeds
    type: heading
    level: 1
  -
    id: code-linker-embed-height
    title: Inline embed height
    description: How tall an inline embed grows before it scrolls, in percent of the window.
    type: variable-number-slider
    default: 60
    min: 20
    max: 100
    step: 5
  -
    id: code-linker-embed-tools-idle
    title: Inline embed toolbar when idle
    description: How visible the embed's toolbar is while the pointer is elsewhere. 0 keeps it out of the way until you hover the embed or focus it.
    type: variable-number-slider
    default: 1
    min: 0
    max: 1
    step: 0.25
  -
    id: code-linker-hover-width
    title: Hover preview width
    description: How wide a hover preview grows, capped at 90% of the window.
    type: variable-number-slider
    default: 720
    min: 320
    max: 1200
    step: 20
    format: px
  -
    id: code-linker-hover-height
    title: Hover preview height
    description: How tall a hover preview grows before it scrolls, in percent of the window.
    type: variable-number-slider
    default: 40
    min: 20
    max: 100
    step: 5
  -
    id: code-linker-highlight-color
    title: Preview line highlight
    description: Background of the target line in hover previews and embeds. Follows the theme's selection colour until you pick one.
    type: variable-color
    format: hex
    opacity: true
  -
    id: code-linker-snippet-line-height
    title: Snippet line height
    description: How tightly the lines of a preview or an embed are set. The target line's highlight follows it.
    type: variable-number-slider
    default: 1.5
    min: 1
    max: 2.5
    step: 0.05
  -
    id: code-linker-snippet-font-size
    title: Snippet text size
    description: Size of the code in a preview or an embed, relative to the interface text.
    type: variable-number-slider
    default: 1
    min: 0.7
    max: 1.4
    step: 0.05
  -
    id: code-linker-autocomplete
    title: Autocomplete
    type: heading
    level: 1
  -
    id: code-linker-hide-suggestion-path
    title: Hide the second column
    description: Drop the note or path shown beside a suggestion, leaving the name alone.
    type: class-toggle
    default: false
  -
    id: code-linker-side-panel
    title: Side panel
    type: heading
    level: 1
  -
    id: code-linker-panel-density
    title: Row density
    description: How tightly the panel's rows are set. Leave empty for the normal spacing.
    type: class-select
    allowEmpty: true
    options:
      -
        label: Dense
        value: code-linker-dense
      -
        label: Roomy
        value: code-linker-roomy
  -
    id: code-linker-panel-font-size
    title: Text size
    description: Base size for the panel's rows. Labels that are deliberately secondary keep their own smaller size.
    type: variable-select
    default: var(--font-ui-small)
    options:
      - var(--font-ui-smaller)
      - var(--font-ui-small)
      - var(--font-ui-medium)

*/

/* Declared so Style Settings' picker can show the colour actually in use — see the note in
   the shared sigil.css. */
body {
  --code-linker-highlight-color: var(--text-selection);
}

/* Snippet chrome shared by the hover popover and the inline embed. Both containers carry
   .code-linker-code (see the token colours below). The popover is a fixed overlay; the
   embed flows inline — otherwise the parts match. The band and the code read --cl-lh alike, so
   the band can be placed by row index whatever it is set to, and body/pre carry no vertical
   padding so row 0 sits at top 0. user-select on the popover lets the snippet be copied. */
.code-linker-hover,
.code-linker-embed {
  overflow: hidden;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
}

.code-linker-hover-header,
.code-linker-embed-header {
  padding: 4px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  font-family: var(--font-monospace);
  white-space: nowrap;
}

.code-linker-embed-header {
  overflow: hidden;
}

.code-linker-hover-body,
.code-linker-embed-body {
  position: relative;
  overflow: auto;
  padding: 0;
  font-family: var(--font-monospace);
  font-size: calc(var(--font-ui-smaller) * var(--code-linker-snippet-font-size, 1));
  --cl-lh: calc(var(--code-linker-snippet-line-height, 1.5) * 1em);
}

.code-linker-hover-body {
  max-height: calc(var(--code-linker-hover-height, 40) * 1vh);
}

.code-linker-embed-body {
  max-height: calc(var(--code-linker-embed-height, 60) * 1vh);
}

/* The .code-linker-code prefix raises specificity above the theme's / editor's own
   `pre` rules — in Live Preview an embed is rendered where those would otherwise add a
   top margin, border or a different line-height and push the code off the fixed band. */
.code-linker-code .code-linker-hover-body pre,
.code-linker-code .code-linker-embed-body pre {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font-size: inherit;
  /* keep it equal to the band's, so their em line heights match */ line-height: var(--cl-lh);
  white-space: pre;
}

.code-linker-code .code-linker-hover-body code,
.code-linker-code .code-linker-embed-body code {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  color: var(--code-normal, var(--text-normal));
}

.code-linker-code .code-linker-embed-body.is-wrapped pre {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Placed by row index, so it only lines up while every line is one row tall. */
.code-linker-embed-code.has-wrapped-lines .code-linker-embed-band {
  display: none;
}

.code-linker-embed-code {
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Sticky, so a long line scrolled sideways does not take the numbers with it; unselectable, so
   copying the snippet copies code only. */
.code-linker-embed-numbers {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 8px 0 10px;
  background: var(--background-primary);
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

.code-linker-embed-numbers > div {
  line-height: var(--cl-lh);
}

.code-linker-embed-numbers > .code-linker-embed-marked {
  background: var(--code-linker-highlight-color);
}

.code-linker-code .code-linker-embed-code pre {
  flex: 1 1 auto;
  min-width: 0;
}

.code-linker-embed-code.has-wrapped-lines .code-linker-embed-numbers {
  display: none;
}

/* Reading further up or down, the way a diff opens up its context. */
.code-linker-embed-more {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  height: auto;
  padding: 1px 10px;
  border-radius: 0;
  background: var(--background-secondary);
  color: var(--text-muted);
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  text-align: left;
  cursor: pointer;
}

.code-linker-embed-more:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.code-linker-hover-band,
.code-linker-embed-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* actual row offset (row-index * line-height) is set inline */ height: var(--cl-lh);
  background: var(--code-linker-highlight-color);
  z-index: 0;
  pointer-events: none;
}

/* Prism token colours, shared by the hover popover and the inline embed (both carry
   .code-linker-code). The popover sits outside Obsidian's markdown containers where the
   theme's token CSS doesn't reach, so map the tokens to Obsidian's --code-* variables. */
.code-linker-code .token.comment,
.code-linker-code .token.prolog,
.code-linker-code .token.doctype,
.code-linker-code .token.cdata {
  color: var(--code-comment, var(--text-faint));
}

.code-linker-code .token.punctuation {
  color: var(--code-punctuation, var(--text-muted));
}

.code-linker-code .token.property,
.code-linker-code .token.tag,
.code-linker-code .token.constant,
.code-linker-code .token.symbol,
.code-linker-code .token.deleted {
  color: var(--code-tag, var(--text-normal));
}

.code-linker-code .token.boolean,
.code-linker-code .token.number {
  color: var(--code-value, var(--text-normal));
}

.code-linker-code .token.selector,
.code-linker-code .token.attr-name,
.code-linker-code .token.string,
.code-linker-code .token.char,
.code-linker-code .token.builtin,
.code-linker-code .token.inserted {
  color: var(--code-string, var(--text-normal));
}

.code-linker-code .token.operator,
.code-linker-code .token.entity,
.code-linker-code .token.url {
  color: var(--code-operator, var(--text-normal));
}

.code-linker-code .token.atrule,
.code-linker-code .token.attr-value,
.code-linker-code .token.keyword {
  color: var(--code-keyword, var(--text-accent));
}

.code-linker-code .token.function,
.code-linker-code .token.class-name {
  color: var(--code-function, var(--text-normal));
}

.code-linker-code .token.regex,
.code-linker-code .token.important,
.code-linker-code .token.variable {
  color: var(--code-property, var(--text-normal));
}

/* A pinned embed whose code moved is showing the wrong lines, so it says so: the header
   is tinted and a note under the snippet explains. Same colours as the link marks, but
   their own classes — an embed is a block, and the links' underline doesn't suit it. */
.code-linker-embed-stale {
  color: var(--code-linker-stale-color);
}

.code-linker-embed-broken {
  color: var(--code-linker-broken-color);
}

/* Update preview: each note is a checkable group, its link changes a compact table, and
   the code that's gone is listed apart in the warning colour — so an update is something
   you look over and confirm, not a blind sweep. */
.code-linker-preview-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- index panel ------------------------------------------------------- */

.code-linker-index {
  font-size: var(--code-linker-panel-font-size, var(--font-ui-small));
}

body.code-linker-dense .code-linker-index-row {
  padding-top: 0;
  padding-bottom: 0;
}

body.code-linker-roomy .code-linker-index-row {
  padding-top: 6px;
  padding-bottom: 6px;
}

.code-linker-index-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.code-linker-index-bar input[type='search'] {
  flex: 1;
  min-width: 0;
}

.code-linker-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: var(--font-semibold);
  margin: 12px 0 4px;
}

.code-linker-index-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 6px;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

.code-linker-index-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid var(--background-modifier-border);
}

.code-linker-index-row.is-toggle {
  cursor: pointer;
}

.code-linker-index-row.is-sub {
  padding-left: 1.6em;
  border-bottom: none;
}

.code-linker-index-caret {
  color: var(--text-muted);
  width: 1em;
}

.code-linker-index-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-linker-index-name.is-link,
.code-linker-index-act.is-link {
  cursor: pointer;
  color: var(--text-accent);
}

.code-linker-index-kind,
.code-linker-index-count {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  white-space: nowrap;
}

.code-linker-index-count.is-broken {
  color: var(--text-error);
}

.code-linker-index-path {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

.code-linker-index-empty.is-error {
  color: var(--text-error);
}

.code-linker-index-empty {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  padding: 4px 0;
}

/* Code Linker 1.8.0 */