:root {
  --note-pair-outline: #aaa;
}

html:not(.light-mode) {
  --note-pair-outline: #7c7c7c;
}

.site-post-page a.footnote-ref {
  position: relative;
  z-index: 1;
  padding: 0 .05em;
  transition: box-shadow .15s ease .05s;
}

.site-post-page a.footnote-ref.note-pair-highlighted {
  --outline-vertical-offset: 4px;
  --outline-padding: 4px;
  --outline-horizontal-spread: 2px;
  background: var(--body-background);
  box-shadow:
    var(--outline-horizontal-spread) var(--outline-vertical-offset) 0 var(--outline-padding) var(--body-background),
    calc(-1 * var(--outline-horizontal-spread)) var(--outline-vertical-offset) 0 var(--outline-padding) var(--body-background),
    var(--outline-horizontal-spread) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 1px) var(--note-pair-outline),
    calc(-1 * var(--outline-horizontal-spread)) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 1px) var(--note-pair-outline),
    var(--outline-horizontal-spread) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 2px) var(--body-background),
    calc(-1 * var(--outline-horizontal-spread)) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 2px) var(--body-background),
    var(--outline-horizontal-spread) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 3px) var(--note-pair-outline),
    calc(-1 * var(--outline-horizontal-spread)) var(--outline-vertical-offset) 0 calc(var(--outline-padding) + 3px) var(--note-pair-outline);
  text-decoration: none;
}

.site-post-page .post-sidenote {
  opacity: .88;
  pointer-events: auto;
  transition: opacity .15s ease, box-shadow .15s ease;
}

.site-post-page .post-sidenote::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px double transparent;
  pointer-events: none;
  transition: border-color .15s ease .05s;
}

.site-post-page .post-sidenote.note-pair-highlighted {
  z-index: 3;
  background: var(--body-background);
  box-shadow: 0 0 0 10px var(--body-background);
  opacity: 1;
}

.site-post-page .post-sidenote.note-pair-highlighted::after {
  border-color: var(--note-pair-outline);
}