/* Popover — WowVendor DS. Всплывающий пузырёк-подсказка со стрелкой.
   Оси Figma (4117:82276): Type(Short/Large) × Direction(Top Left/Center/Right,
   Bottom Left/Center/Right, Left, Right = 8) → 16 вариантов.

   Direction = СТОРОНА, НА КОТОРОЙ СИДИТ СТРЕЛКА (а не сторона якоря):
   Top Center → стрелка сверху по центру (пузырёк висит ПОД якорем),
   Bottom Center → стрелка снизу (пузырёк НАД якорем), Left/Right — сбоку,
   стрелка центрируется по вертикали.

   Все цвета/отступы/радиусы — токены. Структурные размеры (стрелка 8×4,
   зазор 2px, смещение стрелки у угловых, max-width 160/280) — raw px:
   size-токенов под них в системе нет (тот же приём, что в tabs и tooltip). */

.popover {
  position: relative;
  display: flex;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  /* Тень обводит контур целиком (пузырёк + стрелка), поэтому filter, не box-shadow */
  filter: drop-shadow(var(--shadow-4));
  /* Смещение стрелки от края у угловых направлений */
  --pop-arrow-offset: var(--spacing-8);
  /* Заливка и обводка — переменные: инстансы их переопределяют (в tooltip
     обводка alpha-dark-12, как в Figma-override). Обводка пузырька и стрелки
     разделены: у tooltip Large рамка gray-100, а стрелка всё равно alpha-dark-12. */
  --popover-bg: var(--color-gray-0);
  --popover-border: var(--color-gray-100);
  --popover-arrow-stroke: var(--popover-border);
}
.popover--large { --pop-arrow-offset: 18px; }

/* ── Пузырёк ──────────────────────────────────────────────── */
/* Рамка — внешнее кольцо (box-shadow spread), а не border: в Figma stroke лежит
   СНАРУЖИ фрейма и не входит в его габарит (Content = 132×68 без обводки).
   С обычным border пузырёк съедал бы 1px внутрь и вся раскладка уезжала на 1px.
   Тот же приём, что в button/chips/input, но там кольцо inset. */
.popover__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 160px;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--popover-bg);
  box-shadow: 0 0 0 1px var(--popover-border);
  word-break: break-word;
}
.popover--large .popover__content {
  gap: var(--spacing-4);
  max-width: 280px;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-8);
}

.popover__title { color: var(--color-gray-900); }
.popover__text  { color: var(--color-gray-500); white-space: nowrap; }

/* ── Стрелка ──────────────────────────────────────────────── */
/* Обёртка задаёт зазор 2px до края и позицию стрелки вдоль стороны.
   z-index поднимает стрелку над пузырьком: её белая заливка выходит на 1px
   за свой блок и перекрывает кольцо-рамку — иначе под стрелкой осталась бы
   линия gray-100. overflow:hidden срезает ровно основание треугольника
   (та же грань выходит за обёртку) — иначе его обводка легла бы серой
   полосой поверх пузырька. В Figma это overflow-clip на фрейме Arrow. */
.popover__arrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  overflow: hidden;
}
.popover__arrow-shape { position: relative; flex: none; }
/* SVG на 1px больше блока со всех сторон — там лежит обводка (stroke) */
.popover__arrow-shape svg {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
/* Цвета стрелки — из CSS, а не из presentation-атрибутов SVG: так их можно
   переопределить переменной у инстанса (атрибуты в разметке остаются fallback'ом) */
.popover__arrow-shape svg path {
  fill: var(--popover-bg);
  stroke: var(--popover-arrow-stroke);
}
.popover__content { position: relative; z-index: 1; }

/* ── Вертикальные направления (Top / Bottom) ──────────────── */
.popover--top-left,
.popover--top-center,
.popover--top-right { flex-direction: column; }

.popover--bottom-left,
.popover--bottom-center,
.popover--bottom-right { flex-direction: column-reverse; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow,
.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { align-self: stretch; }

.popover--top-left .popover__arrow-shape,
.popover--top-center .popover__arrow-shape,
.popover--top-right .popover__arrow-shape,
.popover--bottom-left .popover__arrow-shape,
.popover--bottom-center .popover__arrow-shape,
.popover--bottom-right .popover__arrow-shape { width: 8px; height: 4px; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow { padding-top: 2px; }

.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { padding-bottom: 2px; }

/* Стрелка вниз — зеркало стрелки вверх */
.popover--bottom-left .popover__arrow-shape svg,
.popover--bottom-center .popover__arrow-shape svg,
.popover--bottom-right .popover__arrow-shape svg { transform: scaleY(-1); }

.popover--top-center .popover__arrow,
.popover--bottom-center .popover__arrow { justify-content: center; }

.popover--top-left .popover__arrow,
.popover--bottom-left .popover__arrow {
  justify-content: flex-start;
  padding-left: var(--pop-arrow-offset);
}
.popover--top-right .popover__arrow,
.popover--bottom-right .popover__arrow {
  justify-content: flex-end;
  padding-right: var(--pop-arrow-offset);
}

/* ── Горизонтальные направления (Left / Right) ────────────── */
.popover--left  { flex-direction: row; align-items: stretch; }
.popover--right { flex-direction: row-reverse; align-items: stretch; }

.popover--left .popover__arrow,
.popover--right .popover__arrow { align-items: center; }

.popover--left .popover__arrow-shape,
.popover--right .popover__arrow-shape { width: 4px; height: 8px; }

.popover--left .popover__arrow  { padding-left: 2px; }
.popover--right .popover__arrow { padding-right: 2px; }

/* Стрелка влево — зеркало стрелки вправо */
.popover--left .popover__arrow-shape svg { transform: scaleX(-1); }