/*
 * THE HINT. A dark chip of one line, ABOUT the surface under it — so it takes
 * the rung above every overlay and can never be covered by the thing it names.
 *
 * The rung goes on the POSITIONER (§2.3): that is the element the portal places,
 * and the popup inside it is only the paint.
 */
@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);
    /* A hint is never the thing you press — the pointer belongs to the control
       it describes, which stays live underneath. */
    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);
    /* One line — a hint that wraps to a paragraph wanted to be a Callout. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    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);
  }
}