.content {
  z-index: 5;
  width: 18rem;
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--color-neutral-6);
  background: var(--color-neutral-3);
  padding: var(--space-4);
  color: var(--color-neutral-11);
  box-shadow: var(--shadow-3);
  outline: none;
}

.content[data-state="open"] {
  animation: contentShow 200ms var(--ease);
}

.content[data-state="closed"] {
  animation: contentHide 200ms var(--ease);
}

.content[data-side="top"] {
  animation-name: slideFromBottom;
}

.content[data-side="bottom"] {
  animation-name: slideFromTop;
}

.content[data-side="left"] {
  animation-name: slideFromRight;
}

.content[data-side="right"] {
  animation-name: slideFromLeft;
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes contentHide {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes slideFromTop {
  from {
    transform: translateY(-0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-0.5rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(0.5rem);
  }
  to {
    transform: translateX(0);
  }
}