/*
 * Inline tooltip: annotates a word inside running text.
 * Colors and typefaces come from tokens.css. Nothing here hardcodes a hex.
 *
 * Usage:
 *   <span data-tooltip="Rassemblement National, ex-Front National"
 *         tabindex="0">RN</span>
 *
 * tabindex="0" is what makes the tooltip reachable without a mouse: it puts
 * the term in the tab order, so :focus-visible fires on keyboard and the
 * bubble opens on tap on touch devices, where :hover never does.
 */

/* --------------------------------------------------------------------------
   The annotated term
   -------------------------------------------------------------------------- */

[data-tooltip] {
  position: relative;
  cursor: help;

  /* A dotted underline is the affordance: it tells the reader something is
     hidden under the word. text-decoration rather than border-bottom, so the
     line follows the glyphs when the term wraps across two lines. */
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-ink-muted);
}

/* Lift the whole term above its neighbours while open, so the bubble is never
   covered by a later sibling in the same paragraph. */
[data-tooltip]:hover,
[data-tooltip]:focus-visible {
  z-index: 20;
}

[data-tooltip]:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The bubble
   -------------------------------------------------------------------------- */

[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.6rem;
  transform: translate(-50%, 0.25rem);

  /* max-content, then capped: short labels stay on one line, long ones wrap
     instead of stretching across the column. */
  width: max-content;
  max-width: 24ch;
  padding: 0.4rem 0.6rem;

  background-color: var(--color-band);
  color: var(--color-band-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);

  font-family: var(--font-display);
  font-size-adjust: var(--x-display);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  white-space: normal;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s 120ms;
}

/* The arrow. A square rotated 45deg, half of it tucked under the bubble. */
[data-tooltip]::before {
  content: '';

  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.35rem;
  transform: translate(-50%, 0.25rem) rotate(45deg);

  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-band);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s 120ms;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

/* --------------------------------------------------------------------------
   Placement overrides

   The bubble is centred on the term, which clips when the term sits against
   the edge of a narrow viewport. These two opt-in variants pin the bubble to
   one side instead. The arrow stays centred on the term either way.
   -------------------------------------------------------------------------- */

[data-tooltip][data-tooltip-place='right']::after {
  left: 0;
  transform: translate(0, 0.25rem);
}

[data-tooltip][data-tooltip-place='right']:hover::after,
[data-tooltip][data-tooltip-place='right']:focus-visible::after {
  transform: translate(0, 0);
}

[data-tooltip][data-tooltip-place='left']::after {
  left: auto;
  right: 0;
  transform: translate(0, 0.25rem);
}

[data-tooltip][data-tooltip-place='left']:hover::after,
[data-tooltip][data-tooltip-place='left']:focus-visible::after {
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   Preferences and media
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after,
  [data-tooltip]::before {
    transition: none;
    transform: translate(-50%, 0);
  }

  [data-tooltip][data-tooltip-place='right']::after,
  [data-tooltip][data-tooltip-place='left']::after {
    transform: none;
  }

  [data-tooltip]:hover::before,
  [data-tooltip]:focus-visible::before {
    transform: translate(-50%, 0) rotate(45deg);
  }
}

/* On paper the bubble can never open, so print the annotation inline instead
   of losing it. */
@media print {
  [data-tooltip]::after {
    content: ' (' attr(data-tooltip) ')';

    position: static;
    opacity: 1;
    visibility: visible;
    width: auto;
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font-style: italic;
    transform: none;
  }

  [data-tooltip]::before {
    display: none;
  }
}