/* ═══════════════════════════════════════════════
   TOOLTIP  ·  ds-tooltip
   ═══════════════════════════════════════════════ */

.ds-tooltip-root {
  position: relative;
  display: inline-block;
}

/* ── Base ──────────────────────────────────────── */
.ds-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: var(--ds-tooltip-max-w);
  background: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-text);
  border-radius: var(--ds-tooltip-r);
  padding: var(--ds-tooltip-py) var(--ds-tooltip-px);
  font-size: var(--ds-type-body-2-size);
  line-height: var(--ds-type-body-2-lh);
  font-family: var(--ds-font);
  white-space: nowrap;
  pointer-events: none;
  animation: ds-tooltip-in var(--ds-tooltip-dur) var(--ds-ease);
}

/* ── Content ───────────────────────────────────── */
.ds-tooltip-content {
  display: block;
  overflow-wrap: break-word;
}

/* ── Placements ────────────────────────────────── */
.ds-tooltip[data-placement='top'] {
  bottom: calc(100% + var(--ds-tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.ds-tooltip[data-placement='right'] {
  left: calc(100% + var(--ds-tooltip-offset));
  top: 50%;
  transform: translateY(-50%);
}

.ds-tooltip[data-placement='bottom'] {
  top: calc(100% + var(--ds-tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.ds-tooltip[data-placement='left'] {
  right: calc(100% + var(--ds-tooltip-offset));
  top: 50%;
  transform: translateY(-50%);
}

/* ── Arrow ─────────────────────────────────────── */
.ds-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.ds-tooltip[data-placement='top'] .ds-tooltip-arrow {
  bottom: calc(var(--ds-tooltip-arrow) * -1);
  left: 50%;
  transform: translateX(-50%);
  border: var(--ds-tooltip-arrow) solid transparent;
  border-top-color: var(--ds-tooltip-bg);
  border-bottom: none;
}

.ds-tooltip[data-placement='right'] .ds-tooltip-arrow {
  left: calc(var(--ds-tooltip-arrow) * -1);
  top: 50%;
  transform: translateY(-50%);
  border: var(--ds-tooltip-arrow) solid transparent;
  border-right-color: var(--ds-tooltip-bg);
  border-left: none;
}

.ds-tooltip[data-placement='bottom'] .ds-tooltip-arrow {
  top: calc(var(--ds-tooltip-arrow) * -1);
  left: 50%;
  transform: translateX(-50%);
  border: var(--ds-tooltip-arrow) solid transparent;
  border-bottom-color: var(--ds-tooltip-bg);
  border-top: none;
}

.ds-tooltip[data-placement='left'] .ds-tooltip-arrow {
  right: calc(var(--ds-tooltip-arrow) * -1);
  top: 50%;
  transform: translateY(-50%);
  border: var(--ds-tooltip-arrow) solid transparent;
  border-left-color: var(--ds-tooltip-bg);
  border-right: none;
}

/* ── Animation ─────────────────────────────────── */
@keyframes ds-tooltip-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-tooltip { animation: none; }
}