.c-action-menu {
  @apply flex shrink-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;

  &-dot {
    @apply 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;
  }

  &:enabled {
    @apply cursor-pointer;
  }

  &: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;
  }

  &__trigger-text {
    @apply sr-only;
  }
}

.c-action-menu-xs {
  @apply h-6 w-6 p-0.5;

  .c-action-menu-dot {
    @apply h-0.5 w-0.5 shrink-0;
  }
}

.c-action-menu-sm {
  @apply h-8 w-8 p-1;

  .c-action-menu-dot {
    @apply h-[3px] w-[3px] shrink-0;
  }
}

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

.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;
  }
}
