.tip {
  position: absolute;
  left: var(--tip-x, 50%);
  bottom: calc(100% + var(--spacing-xsmall));
  width: var(--tip-w, 0);
  height: calc(var(--line-height-caption-alt-1) + var(--spacing-xxxsmall) * 2);
  border-radius: var(--radius-small);
  background: var(--background-inverse-primary);
  overflow: hidden;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    translate 160ms ease,
    left 300ms cubic-bezier(0.32, 0.72, 0, 1),
    width 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.tip[data-jump] {
  transition: opacity 160ms ease, translate 160ms ease;
}

.tip[data-on] {
  opacity: 1;
  translate: -50% 0;
}

.tip-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  padding: 0 var(--padding-chip);
  color: var(--content-inverse-primary);
  font: var(--text-caption-alt1-regular);
  letter-spacing: var(--text-caption-alt1-regular-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  translate: -50% -50%;
  transition: opacity 180ms ease, translate 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.tip-layer[data-state="in"] { opacity: 1; }

.tip-layer[data-state="pre"] {
  opacity: 0;
  translate: calc(-50% + var(--tip-shift)) -50%;
  transition: none;
}

.tip-layer[data-state="out"] {
  opacity: 0;
  translate: calc(-50% - var(--tip-shift)) -50%;
}

@media (prefers-reduced-motion: reduce) {
  .tip, .tip-layer { transition-duration: 1ms; }
}