.c-dropdown-menu-content {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  @apply z-[100] rounded border border-solid border-purple-200-700 shadow;
}

.c-dropdown-menu-content[data-side='top'] {
  animation-name: slideUp;
}
.c-dropdown-menu-content[data-side='bottom'] {
  animation-name: slideDown;
}

.c-dropdown-menu-trigger {
  .c-dropdown-menu-arrow {
    @apply transition-transform;
  }

  &[data-state='open'] .c-dropdown-menu-arrow {
    @apply -scale-y-100;
  }
}

.c-dropdown-menu-label {
  @apply bg-elevate px-4 pb-1 pt-3 font-sans text-[11px] font-bold text-gray-500-400;
  @apply first:rounded-tl first:rounded-tr;
}

.c-dropdown-menu-item {
  @apply flex h-10 items-center bg-elevate px-4 font-sans text-xs font-medium;
  @apply first:rounded-tl first:rounded-tr last:rounded-bl last:rounded-br;

  &:not([data-disabled]) {
    @apply cursor-pointer text-gray-700-200;

    &:hover,
    &:focus,
    &:focus-visible,
    &:hover.selected,
    &:focus.selected,
    &:focus-visible.selected {
      @apply bg-gray-50-900 outline-none;
    }
  }

  &[data-disabled] {
    @apply cursor-not-allowed text-gray-700-200/50;
  }

  &.selected {
    @apply bg-gray-50-900 font-bold text-green-500-400;
  }

  &.danger {
    @apply text-pink-600-300;

    &[data-disabled] {
      @apply text-pink-600-300/50;
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
