import { LIQUID_GLASS_SURFACE } from "./liquid-glass";

/**
 * Solid surface shared by {@link DropdownMenuContent},
 * {@link ContextMenuContent}, {@link SelectContent} and {@link TooltipContent}.
 *
 * Light menus ride the --popover token; dark menus go deeper than the theme
 * overlay (#141417) so they sit below the interface, not at card level.
 * Crisp hairline edge and deep, diffuse shadows. No translucency, no blur,
 * no inset lighting. Hover state lives in the flat sliding pill
 * (see menu-highlight).
 */
export const liquidMenuSurfaceClasses =
  "rounded-2xl bg-popover/75 dark:bg-zinc-900/75 backdrop-blur-[3px] border border-black/[0.08] text-popover-foreground" +
  " shadow-[0_4px_16px_-4px_rgba(0,0,0,0.08),0_16px_48px_-12px_rgba(0,0,0,0.28)]" +
  " dark:border-white/[0.09] dark:bg-[#141417]" +
  " dark:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.4),0_16px_48px_-12px_rgba(0,0,0,0.7)]";

/** The menu surface, or Liquid Glass with nothing painted over it. */
export function menuSurfaceClasses(liquid: boolean) {
  return liquid ? `rounded-2xl text-popover-foreground ${LIQUID_GLASS_SURFACE}` : liquidMenuSurfaceClasses;
}