/* ==========================================================================
   Tooltip (simple title-based)
   ========================================================================== */

[data-tooltip] {
  position: relative;
}

/* Centred on its host by default. That is only safe when the host has at
   least half the tooltip's width of room on both sides - which a 36px icon
   button sitting ~20px from the edge of the screen does not. Hosts near an
   edge therefore opt into edge anchoring via data-tooltip-align, below,
   instead of being centred into the void. */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Anchored to the host's left edge and growing rightwards - for controls
   near the left edge of the window (the sidebar's appearance buttons). */
[data-tooltip][data-tooltip-align="start"]::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}

[data-tooltip][data-tooltip-align="start"]:hover::after {
  transform: translateX(0) translateY(0);
}

/* Mirror image, for controls near the right edge (table row actions). */
[data-tooltip][data-tooltip-align="end"]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}

[data-tooltip][data-tooltip-align="end"]:hover::after {
  transform: translateX(0) translateY(0);
}

/* The sidebar is the left edge of the window, and its footer buttons are
   the narrowest hosts in the app - always anchor those. */
.sidebar__footer [data-tooltip]::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}

.sidebar__footer [data-tooltip]:hover::after {
  transform: translateX(0) translateY(0);
}

/* Row actions live at the right edge of a table; a centred tooltip on the
   last column runs past the card. */
.row-actions [data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}

.row-actions [data-tooltip]:hover::after {
  transform: translateX(0) translateY(0);
}