.column-notes .col-note-label
  cursor: pointer


.column-notes .note-editor.bp6-editable-text
  user-select: none

.column-notes .note-editor.bp6-editable-text:before
  top: 0
  left: 0
  right: 0
  bottom: 0

.position-editor .handle
  background-color: #d2e9ff
  border: 1px solid #1e90ff

.position-editor .add-span-handle
  background-color: #e9f4ff
  border: 1px dotted #1e90ff

.position-editor .top-handle,
.position-editor .bottom-handle,
.position-editor .add-span-handle
  border-radius: 3px

.note-editor .note-connector
  stroke: #1e90ff
  stroke-width: 3

.col-note-label
  padding-left: 0.3em
  border-left: 1px solid var(--note-color)
  margin: 1px 0
  font-style: italic
  z-index: 15

g.height-range line
  stroke: var(--note-color)
  stroke-width: 1.2px


.underlay
  fill: var(--column-background-color)
  fill-opacity: 0.8
  pointer-events: all

.notes-list:has(+ .note-editor)
  // Target the note list that is undergoing editing
  cursor: pointer
  .note
    pointer-events: none
  .note-inner
    cursor: pointer
    pointer-events: all
    &>*
      pointer-events: none

.note-inner
  border: none
  // A margin, not padding: the note's measured height is what the layout
  // centers on the connector, and padding would fold the inset into that
  // height — leaving the text half an inset above the line that points at it
  margin: var(--column-note-padding, 5px)

.focusable
  .note-inner
    cursor: pointer

.note-editor
  // This seems to be needed due to the overflow-y: scroll on .note-inner
  &>foreignObject
    transform: translate(0, -1px)
  .note-inner
    overflow-y: scroll
    max-height: var(--not-editor-max-height, 500px)


g.note, g.note-editor
  --note-color: var(--column-note-color, var(--column-stroke-color, var(--text-color, #000)))

  circle
    fill: var(--note-color)

  .link
    stroke: var(--note-color)
    stroke-width: 1
    fill: none

.note-editor .underlay
  cursor: pointer

.new-note
  circle
    fill: #1e90ff

  line
    stroke: #1e90ff
    stroke-width: 3
    marker-start: url("#new_arrow_start")
    marker-end: url("#new_arrow_end")