import { cva } from "../lib/cva";

export const dropdownMenuContentVariants = cva(
  [
    "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
    "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
    "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
    "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
  ],
  {
    variants: {
      size: {
        sm: "min-w-[11rem]",
        md: "min-w-[13rem]",
        lg: "min-w-[15rem]",
        xl: "min-w-[18rem]"
      }
    },
    defaultVariants: {
      size: "md"
    }
  }
);

export const dropdownMenuItemVariants = cva(
  [
    "relative flex min-w-0 cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-2.5 py-2 text-sm outline-none",
    "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
    "focus:bg-[var(--ui-control-bg)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--ui-control-bg)] data-[highlighted]:text-[var(--color-foreground)]",
    "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
  ],
  {
    variants: {
      inset: {
        false: "",
        true: "pl-8"
      },
      variant: {
        default: "",
        destructive:
          "text-[var(--color-destructive)] data-[highlighted]:bg-[color-mix(in_oklch,var(--color-destructive)_12%,var(--color-card))] data-[highlighted]:text-[var(--color-destructive)]"
      }
    },
    defaultVariants: {
      inset: false,
      variant: "default"
    }
  }
);

export const dropdownMenuItemBodyVariants = cva([
  "grid min-w-0 flex-1 gap-0.5"
]);

export const dropdownMenuItemLabelVariants = cva([
  "truncate text-sm font-medium text-[var(--color-foreground)]"
]);

export const dropdownMenuItemDescriptionVariants = cva([
  "text-xs leading-5 text-[var(--color-muted-foreground)]"
]);

export const dropdownMenuItemLeadingVariants = cva([
  "inline-flex size-4 shrink-0 items-center justify-center text-[var(--color-muted-foreground)]"
]);

export const dropdownMenuLabelVariants = cva(
  [
    "px-2.5 py-2 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
  ],
  {
    variants: {
      inset: {
        false: "",
        true: "pl-8"
      }
    },
    defaultVariants: {
      inset: false
    }
  }
);

export const dropdownMenuSeparatorVariants = cva([
  "-mx-1 my-1 h-px bg-[var(--color-border)]"
]);