/* Help tips (lib/components/info_tip.dart): label or heading text with a
   dotted muted underline, its tooltip under it. Square and flat. */

.animus-tip {
  position: relative;
  display: inline;
}

.animus-tip-text {
  display: inline-block;
  max-width: 100%;
  text-decoration: underline dotted var(--animus-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: help;
}

.animus-tip-text:focus-visible {
  outline: 2px solid var(--ring, #ffb3d6);
  outline-offset: 1px;
}

/* Out of the layout until shown, so a closed tip never widens the page; it
   lingers briefly on leave so the pointer can cross into it and reach the
   Docs link. */
.animus-tip-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: none;
  gap: 0.25rem;
  justify-items: start;
  width: max-content;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--animus-border);
  border-radius: 0;
  background: var(--popover, #161518);
  color: var(--popover-foreground, var(--foreground));
  font: 400 0.75rem/1.4 var(--font-sans);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  cursor: auto;
  transform: translateX(var(--animus-tip-shift, 0px));
  transition: display 0s linear 150ms allow-discrete;
}

/* Covers the gap above the tooltip so the pointer keeps it open. */
.animus-tip-pop::before {
  content: "";
  position: absolute;
  inset: -5px -1px auto;
  height: 5px;
}

@media (hover: hover) {
  .animus-tip:not(.is-dismissed):hover .animus-tip-pop {
    display: grid;
    transition-delay: 250ms;
  }
}

.animus-tip:not(.is-dismissed):has(.animus-tip-text:focus-visible) .animus-tip-pop,
.animus-tip.is-open .animus-tip-pop {
  display: grid;
  transition-delay: 0s;
}

.animus-tip-docs {
  color: var(--primary, #ff5fa8);
  font-weight: 500;
  text-decoration: underline;
}