/* A dark chip about the surface under it, on the rung above every overlay so what it names never covers it.
   The rung sits on the positioner, the element the portal places (§2.3). */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-tooltip__positioner {
    z-index: var(--lotics-z-overlay-above);
    /* The control underneath stays live. */
    pointer-events: none;
  }

  .lotics-tooltip__popup {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    max-width: 320px;
    padding-block: var(--lotics-space-4);
    padding-inline: var(--lotics-space-8);
    border: 0 solid transparent;
    border-radius: var(--lotics-radius-control);
    background-color: var(--primary);
    color: var(--lotics-ink-on-inverse);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    /* Never cut: a hint wraps at its measure, and a line break in its text starts a line, as a `title`'s does. */
    white-space: pre-line;
    transition:
      opacity var(--lotics-duration-fast) var(--lotics-ease-standard),
      transform var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-tooltip__popup[data-starting-style],
  .lotics-tooltip__popup[data-ending-style] {
    opacity: 0;
    transform: scale(0.96);
  }
}