.wrapper {
  background: var(--color-background-static-default);
  color: var(--color-content-default);
  @extend .pos-2dp;

  z-index: var(--z-index-tooltip);
  overflow: hidden;
  border-radius: var(--radii-small);
  padding: 8px 12px;
  @include typography(text, 300, regular);
  transition: var(--transition-fast);
  will-change: transform, opacity;
  user-select: none;

  animation-name: enter;
  animation-duration: var(--motion-timing-fast);
  animation-timing-function: var(--transition-function);
  --enter-opacity: 0;
  --enter-scale: 0.95;

  &[data-state="closed"] {
    animation-name: exit;
    animation-duration: var(--motion-timing-fast);
    animation-timing-function: var(--transition-function);
    --exit-opacity: 0;
    --exit-scale: 0.95;
  }

  &[data-side="bottom"][data-side="bottom"] {
    --enter-translate-y: -8px;
  }

  &[data-side="left"][data-side="left"] {
    --enter-translate-x: 8px;
  }

  &[data-side="right"][data-side="right"] {
    --enter-translate-x: -8px;
  }

  &[data-side="top"][data-side="top"] {
    --enter-translate-y: 8px;
  }
}

@keyframes enter {
  0% {
    opacity: var(--enter-opacity, 1);
    transform: translate3d(var(--enter-translate-x, 0), var(--enter-translate-y, 0), 0)
      scale3d(var(--enter-scale, 1), var(--enter-scale, 1), var(--enter-scale, 1));
  }
}

@keyframes exit {
  100% {
    opacity: var(--exit-opacity, 1);
    transform: translate3d(var(--exit-translate-x, 0), var(--exit-translate-y, 0), 0)
      scale3d(var(--exit-scale, 1), var(--exit-scale, 1), var(--exit-scale, 1));
  }
}
