/* ui/tooltip.css */

.acms-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  padding: 6px 10px;
  background: var(--fg-primary);
  color: var(--bg-elevated);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  max-width: 280px;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity var(--duration-fast) var(--ease-out-quint),
    transform var(--duration-fast) var(--ease-out-quint);
}

.acms-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.acms-tooltip[data-placement="bottom"] { transform: translateY(2px); }
.acms-tooltip[data-placement="bottom"].is-visible { transform: translateY(0); }
.acms-tooltip[data-placement="left"]   { transform: translateX(2px); }
.acms-tooltip[data-placement="left"].is-visible { transform: translateX(0); }
.acms-tooltip[data-placement="right"]  { transform: translateX(-2px); }
.acms-tooltip[data-placement="right"].is-visible { transform: translateX(0); }

.acms-tooltip__arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--fg-primary);
  transform: rotate(45deg);
}

.acms-tooltip[data-placement="top"]    .acms-tooltip__arrow {
  bottom: -3px; left: 50%; margin-left: -3px;
}
.acms-tooltip[data-placement="bottom"] .acms-tooltip__arrow {
  top: -3px; left: 50%; margin-left: -3px;
}
.acms-tooltip[data-placement="left"]   .acms-tooltip__arrow {
  right: -3px; top: 50%; margin-top: -3px;
}
.acms-tooltip[data-placement="right"]  .acms-tooltip__arrow {
  left: -3px; top: 50%; margin-top: -3px;
}