/* Глобальные подсказки: один узел на страницу, позиция задаётся
   transform из tooltip.ts. Префикс классов — tip-. */

/* Фон непрозрачный: подсказка всплывает и над тёмным контентом,
   и над светлым сайдбаром админки — стекло там читалось бы плохо.
   Цвета вывернуты относительно темы: в светлой подсказка тёмная,
   в тёмной — светлая. Так она заметна на любом фоне. */
.tip {
  background: var(--color-text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-modal);
  color: var(--admin-canvas);
  font-family: var(--font-main);
  font-size: 0.8rem;
  left: 0;
  line-height: 1.3;
  max-width: 280px;
  opacity: 0;
  padding: 6px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  /* Сдвиг — свойством translate: transform занят позицией из tooltip.ts */
  transition: opacity var(--tr-fast), translate var(--tr-fast);
  translate: 0 8px;
  white-space: pre-line;
  z-index: calc(var(--z-toast) + 10);
}

.tip.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Хвостик: ромб под цвет фона, поворот зависит от стороны */
.tip::after {
  background: inherit;
  border: inherit;
  content: '';
  height: 8px;
  position: absolute;
  transform: rotate(45deg);
  width: 8px;
}

.tip[data-side='top']::after {
  border-left: 0;
  border-top: 0;
  bottom: -5px;
  left: calc(50% - 4px);
}

.tip[data-side='bottom']::after {
  border-bottom: 0;
  border-right: 0;
  left: calc(50% - 4px);
  top: -5px;
}

.tip[data-side='left']::after {
  border-bottom: 0;
  border-left: 0;
  right: -5px;
  top: calc(50% - 4px);
}

.tip[data-side='right']::after {
  border-right: 0;
  border-top: 0;
  left: -5px;
  top: calc(50% - 4px);
}

@media (prefers-reduced-motion: reduce) {
  .tip {
    transition: none;
  }
}