/* Tooltip — WowVendor DS. Триггер-иконка + всплывающий пузырёк.
   Оси Figma: Direction(Top/Bottom × Left/Center/Right + Left + Right = 8) ×
   Type(Short/Large) × Interaction(Default=скрыт / Hover & Focus=показан) ×
   Dark Mode(только False — игнор).

   Пузырёк — ПЕРЕИСПОЛЬЗОВАННЫЙ компонент popover (Figma 4117:82276,
   ../popover/popover.css). Здесь только триггер, позиционирование пузырька
   относительно триггера и показ/скрытие. Свою копию пузырька tooltip больше
   не держит.

   ⚠ ОСИ НАПРАВЛЕНИЙ У tooltip И popover ПРОТИВОПОЛОЖНЫ:
   у tooltip Direction — сторона, КУДА уходит пузырёк от триггера,
   у popover Direction — сторона, НА КОТОРОЙ сидит стрелка.
   Поэтому tooltip--top-left несёт popover--bottom-right (пузырёк сверху,
   прижат вправо → стрелка снизу справа) и т.д. Маппинг зафиксирован в
   разметке tooltip.html, а не в CSS. */

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-family: var(--font-family-base);
  --tt-corner: -2px;   /* смещение пузырька у угловых направлений */
}
.tooltip--large { --tt-corner: -12px; }

/* Override инстанса (так же переопределён в Figma): обводка стрелки —
   alpha-dark-12 у обоих типов, рамка пузырька — alpha-dark-12 только у Short
   (у Large рамка остаётся gray-100, как в мастере popover). */
.tooltip .popover { --popover-arrow-stroke: var(--color-alpha-dark-12); }
.tooltip .popover--short { --popover-border: var(--color-alpha-dark-12); }

/* ── Триггер ───────────────────────────────────────────── */
.tooltip__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-gray-200);
  cursor: pointer;
}
.tooltip__trigger svg { display: block; width: 16px; height: 16px; }

/* ── Пузырёк: скрыт по умолчанию, показывается на hover/focus ── */
/* width:max-content обязателен: absolute-элемент считает ширину от containing
   block (триггер 20px), а word-break:break-word у popover разрешает рвать слово
   по буквам — без max-content «Title» встаёт столбиком. Ограничение ширины
   остаётся на .popover__content (max-width 160/280). */
.tooltip .popover {
  position: absolute;
  width: max-content;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tooltip:hover .popover,
.tooltip:focus-within .popover,
.tooltip.tooltip--open .popover {
  opacity: 1;
  visibility: visible;
}

/* ── Позиция пузырька относительно триггера (20×20) ────── */
/* Пузырёк сверху */
.tooltip--top-left .popover,
.tooltip--top-center .popover,
.tooltip--top-right .popover { bottom: 20px; }
/* Пузырёк снизу */
.tooltip--bottom-left .popover,
.tooltip--bottom-center .popover,
.tooltip--bottom-right .popover { top: 20px; }

.tooltip--top-center .popover,
.tooltip--bottom-center .popover { left: 50%; transform: translateX(-50%); }

/* Left/Right у tooltip = к какому краю триггера прижат пузырёк */
.tooltip--top-left .popover,
.tooltip--bottom-left .popover { right: var(--tt-corner); }
.tooltip--top-right .popover,
.tooltip--bottom-right .popover { left: var(--tt-corner); }

/* Пузырёк сбоку — центрируется по вертикали */
.tooltip--left .popover  { right: 20px; top: 50%; transform: translateY(-50%); }
.tooltip--right .popover { left: 20px;  top: 50%; transform: translateY(-50%); }