abbr[title],
abbr[data-title] {
  white-space: nowrap;
}

abbr[data-title] {
  cursor: pointer;
}

#abbr-popover {
  display: none;
  margin: 0;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .22);
}

@keyframes abbrFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#abbr-popover:popover-open {
  animation: abbrFadeIn var(--dur-normal);
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .22);
}

@supports (anchor-name: --x) {
  #abbr-popover {
    position: fixed;
    position-anchor: --abbr-active;
    position-area: block-start;
    position-try-fallbacks: flip-block;
  }
}