export const selectedItemSurfaceClassName =
  "bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)]";

export const selectedItemBorderClassName =
  "border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]";

export const importantSelectedItemSurfaceClassName =
  "!bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)]";

export const importantSelectedItemBorderClassName =
  "!border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]";

export const hoverImportantSelectedItemSurfaceClassName =
  "hover:!bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)]";

export const hoverImportantSelectedItemBorderClassName =
  "hover:!border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]";

export const selectedItemTextClassName = "text-[color:var(--foreground)]";

export const pressedSelectedItemClassName =
  "aria-pressed:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] aria-pressed:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] aria-pressed:text-[color:var(--foreground)] data-[pressed]:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] data-[pressed]:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-[pressed]:text-[color:var(--foreground)]";

export const toggleSelectedItemClassName =
  "aria-pressed:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] aria-pressed:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] aria-pressed:text-[color:var(--foreground)] data-[pressed]:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] data-[pressed]:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-[pressed]:text-[color:var(--foreground)] data-[state=on]:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] data-[state=on]:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-[state=on]:text-[color:var(--foreground)]";

export const activeSelectedItemClassName =
  "data-active:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] data-active:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-active:text-[color:var(--foreground)]";

export const checkedSelectedItemClassName =
  "data-checked:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] data-checked:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-checked:text-[color:var(--foreground)] dark:data-checked:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)]";