export const menuPositionerClass = "z-50 px-2";
export const menuContentClass =
  "min-w-48 rounded-[var(--ui-radius-lg)] border border-[var(--ui-border)] bg-[var(--ui-surface)] p-1 text-[var(--ui-fg)] shadow-[var(--ui-shadow-md)]";
export const menuArrowClass = "fill-[var(--ui-surface)] stroke-[var(--ui-border)] stroke-1";
export const menuItemClass =
  "flex w-full items-center rounded-[var(--ui-radius-sm)] px-3 py-2 text-sm text-[var(--ui-fg)] " +
  "transition-[background-color,color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
  "hover:bg-[var(--ui-tonal-secondary)] focus-visible:outline-none data-[highlighted]:bg-[var(--ui-tonal-secondary)] data-[highlighted]:text-[var(--ui-fg)] " +
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
export const menuSeparatorClass = "my-1 h-px bg-[var(--ui-border)]";