/*
 * sphinx-tippy renders tooltips with tippy.js, whose bundled themes hard-code
 * light colors (#fff / #333). We use tippy's light-border theme (loaded in
 * conf.py) for its outlined box and arrow, then recolor it from furo's theme
 * variables so the tooltip matches the page in both light and dark mode.
 *
 * Colors follow @lkubb's furo recipe:
 * https://github.com/sphinx-extensions2/sphinx-tippy/issues/8#issuecomment-2311342324
 */
.tippy-box[data-theme~="light-border"] {
  background-color: var(--color-background-hover);
  color: var(--color-foreground-primary);
  border-color: var(--color-foreground-border);
}

/*
 * Arrow fill (::before) follows the box; its outline (::after) the box border.
 * The arrow is a CSS triangle: only the side facing the box may be colored, as
 * the two perpendicular borders must stay transparent to form the point. That
 * means one rule per placement (matching light-border's own per-placement
 * selectors, so specificity ties and these later-loaded rules win).
 */
.tippy-box[data-theme~="light-border"][data-placement^="top"]
  > .tippy-arrow::before {
  border-top-color: var(--color-background-hover);
}
.tippy-box[data-theme~="light-border"][data-placement^="bottom"]
  > .tippy-arrow::before {
  border-bottom-color: var(--color-background-hover);
}
.tippy-box[data-theme~="light-border"][data-placement^="left"]
  > .tippy-arrow::before {
  border-left-color: var(--color-background-hover);
}
.tippy-box[data-theme~="light-border"][data-placement^="right"]
  > .tippy-arrow::before {
  border-right-color: var(--color-background-hover);
}

.tippy-box[data-theme~="light-border"][data-placement^="top"]
  > .tippy-arrow::after {
  border-top-color: var(--color-foreground-border);
}
.tippy-box[data-theme~="light-border"][data-placement^="bottom"]
  > .tippy-arrow::after {
  border-bottom-color: var(--color-foreground-border);
}
.tippy-box[data-theme~="light-border"][data-placement^="left"]
  > .tippy-arrow::after {
  border-left-color: var(--color-foreground-border);
}
.tippy-box[data-theme~="light-border"][data-placement^="right"]
  > .tippy-arrow::after {
  border-right-color: var(--color-foreground-border);
}