export const popoverPositionerClass = "z-50 px-2";
export const popoverContentClass =
  "w-full min-w-56 max-w-sm rounded-[var(--ui-radius-lg)] border border-[var(--ui-border)] " +
  "bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-[var(--ui-shadow-md)] " +
  "focus-visible:outline-none";
export const popoverHeaderClass =
  "flex items-start justify-between gap-3 border-b border-[var(--ui-border)] px-4 py-3";
export const popoverTitleClass = "text-sm font-semibold text-[var(--ui-fg)]";
export const popoverDescriptionClass = "mt-1 text-sm text-[var(--ui-fg-muted)]";
export const popoverBodyClass = "px-4 py-3";
export const popoverFooterClass =
  "flex items-center justify-end gap-3 border-t border-[var(--ui-border)] px-4 py-3";
export const popoverCloseClass =
  "inline-flex size-8 items-center justify-center rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)] " +
  "text-[var(--ui-fg-muted)] transition-[border-color,background-color,color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
  "hover:border-[var(--ui-primary-muted)] hover:bg-[var(--ui-tonal-secondary)] hover:text-[var(--ui-fg)] " +
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)]";
export const popoverArrowClass = "fill-[var(--ui-surface)] stroke-[var(--ui-border)] stroke-1";