.content {
  z-index: 9999;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--np-slate-50);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  outline: none;
  transform-origin: var(--kb-menu-content-transform-origin);
  animation: hide 200ms var(--np-ease-out-expo) forwards;
}

.content[data-expanded] {
  animation: show 200ms var(--np-ease-out-expo);
}

@keyframes show {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}