/*
 * Shared component styles for the tooltip partials
 * (app/views/components/_tooltip_inline.html.erb; _tooltip reuses these classes).
 *
 * Uses engine tokens exclusively (--spacing-*, --color-*, --font-*, --shadow-*, --border-*).
 * Loaded from the layout via stylesheet_link_tag "components/tooltip".
 */

.tooltip {
  display: inline-flex;
  align-items: center;
}

/* Absolutely-positioned variant (_tooltip): parent must be positioned. */
.tooltip-anchored {
  position: absolute;
  right: var(--spacing-12);
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
}

.tooltip-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-neutral-tertiary);
  transition: color var(--duration-fast) ease;
}

.tooltip-trigger:hover {
  color: var(--color-text-neutral-secondary);
}

.tooltip-trigger:focus {
  outline: none;
}

.tooltip-trigger:focus-visible {
  box-shadow: 0 0 0 var(--border-width-lg) var(--color-brand-secondary);
}

.tooltip-panel {
  pointer-events: none;
  width: max-content;
  max-width: 18rem;
  border: 0;
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface-white);
  padding: var(--spacing-12);
  text-align: center;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-18);
  color: var(--color-text-neutral-primary);
  box-shadow: var(--shadow-lg);
  outline: none;
}