.content {
  transform-origin: var(--radix-popper-transform-origin);
  background-color: var(--color-gray100);
  padding: 10px;
  border-radius: 10px;
}

.contentSmall {
  width: 100px;
  height: 50px;
}

.contentLarge {
  width: 300px;
  height: 150px;
}

.anchor {
  background-color: hotpink;
}

.anchorSmall {
  width: 50px;
  height: 50px;
}

.anchorLarge {
  width: 100px;
  height: 100px;
}

.arrow {
  fill: var(--color-gray100);
}

@keyframes popper-rotateIn {
  0% {
    transform: scale(0) rotateZ(calc(var(--direction, 0) * 45deg));
  }
  100% {
    transform: scale(1);
  }
}

.animatedContent {
  &[data-side='top'] {
    --direction: 1;
  }
  &[data-side='bottom'] {
    --direction: -1;
  }
  animation: popper-rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
