.c-action-menu {
  @apply flex h-8 w-8 shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
  &-dot {
    @apply h-[4px] w-[4px] rounded-full bg-gray;
  }
  &[data-state='open'],
  [aria-expanded='true'] {
    @apply flex-row gap-[3px];
  }
  &:focus-visible {
    @apply outline outline-1 outline-inherit;
    outline-color: currentColor;
  }

  &:not(:disabled):hover {
    @apply gap-[3px] bg-gray-100-800 outline outline-1 outline-purple-200-700;
  }

  &:not(:disabled):active {
    @apply scale-95 bg-purple-100-800;
  }
}

.c-action-menu-item {
  @apply flex cursor-pointer items-center gap-2 py-2.5 px-5 font-sans text-sm font-medium text-gray;

  &:hover {
    @apply bg-gray-50-900;
  }

  &:focus {
    @apply bg-gray-50-900 outline-none;
  }

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

.c-action-menu-item-separator {
  @apply m-0 h-px cursor-default p-0;

  hr {
    @apply h-px w-full bg-gray-700-200 p-0;
  }
}
