/* Tooltips
 * Pure CSS tooltips via data attribute. No JavaScript needed.
 * Shows on hover and focus-visible for accessibility.
 *
 * Usage:
 *   <button data-tooltip="Copy to clipboard" aria-label="Copy">...</button>
 *   <abbr data-tooltip="Application Programming Interface">API</abbr>
 *   <button data-tooltip="Delete item" data-tooltip-position="bottom">...</button>
 */

@layer components {
  [data-tooltip] {
    position: relative;

    &::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 0.5rem);
      left: 50%;
      translate: -50% 0;
      padding: 0.3rem 0.6rem;
      border-radius: var(--radius-sm);
      background: var(--color-ink);
      color: var(--color-canvas);
      font-size: 0.8125rem;
      white-space: nowrap;
      pointer-events: none;
      z-index: 20;

      /* Hidden by default */
      opacity: 0;
      transition: opacity 120ms ease;
    }

    &:hover::after,
    &:focus-visible::after {
      opacity: 1;
    }

    /* Bottom position */
    &[data-tooltip-position="bottom"]::after {
      bottom: auto;
      top: calc(100% + 0.5rem);
    }

    /* Left position */
    &[data-tooltip-position="left"]::after {
      bottom: auto;
      top: 50%;
      left: auto;
      right: calc(100% + 0.5rem);
      translate: 0 -50%;
    }

    /* Right position */
    &[data-tooltip-position="right"]::after {
      bottom: auto;
      top: 50%;
      left: calc(100% + 0.5rem);
      translate: 0 -50%;
    }
  }
}