/* Tooltip
   A label shown on hover or focus. Wrap the trigger and .dp-tooltip-content in
   .dp-tooltip. Position is set with data-side (top (default), bottom).
   Add data-open to force it visible. Colour and type from tokens.css. */

.dp-tooltip {
  position: relative;
  display: inline-flex;
}

.dp-tooltip-content {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 20;
  background: var(--dp-navy);
  color: var(--dp-white);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-semibold);
  line-height: 1.3;
  padding: var(--dp-space-2) var(--dp-space-3);
  border-radius: var(--dp-radius-sm);
  box-shadow: var(--dp-shadow-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dp-transition);
}

/* Arrow */
.dp-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dp-navy);
}

.dp-tooltip[data-side="bottom"] .dp-tooltip-content {
  bottom: auto;
  top: calc(100% + 8px);
}

.dp-tooltip[data-side="bottom"] .dp-tooltip-content::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--dp-navy);
}

/* Shown on hover, keyboard focus, or when forced open */
.dp-tooltip:hover .dp-tooltip-content,
.dp-tooltip:focus-within .dp-tooltip-content,
.dp-tooltip[data-open] .dp-tooltip-content {
  opacity: 1;
}