/* Tooltips (docs/visual-design.md, Tooltips): a button that explains itself in a popover bubble. */

.tip {
  display: inline-flex;
}

/* The trigger is the mark itself, not a bordered button. button:where() ties with the global button
   rule and loads after it, while the mark's own class (journeys.css and the like) still outranks it. */
button:where(.tip__trigger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
}

button:where(.tip__trigger):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Without scripts the browser centres the bubble; tooltip_controller.js places it by the trigger. */
.tip__bubble {
  width: max-content;
  max-width: min(16rem, calc(100vw - 16px));
  margin: auto;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
}

/* --tip-top is the trigger's top (or bottom, below) and --tip-left its centre. */
.tip__bubble--placed {
  position: fixed;
  inset: auto;
  top: var(--tip-top, 0);
  left: var(--tip-left, 0);
  margin: 0;
  translate: -50% -100%;
}

.tip__bubble--placed.tip__bubble--below {
  translate: -50% 0;
}