root:
  base: font-medium h-fit rounded
  icon_only?:
    false: inline-flex items-center gap-1
    true:
      base: rounded-full inline-flex items-center justify-center
      size:
        base: w-6 h-6 p-0.5
        sm: w-7 h-7 p-1
  size:
    base: text-xs px-2.5 py-0.5
    sm: text-sm px-3 py-1
  pill?: rounded-full
  border?: border
  color:
    neutral: &default
      base: bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300
      border?: bg-gray-50 text-gray-500 border-gray-500 dark:bg-gray-400 dark:text-gray-600 dark:border-gray-600
      url?: hover:bg-gray-200 dark:hover:bg-gray-600
    dark:
      base: bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200
      border?: bg-gray-100 text-gray-800 border-gray-800 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-400
      url?: hover:bg-gray-500 dark:hover:bg-gray-700
    light:
      base: bg-gray-100 text-gray-600 dark:bg-gray-300 dark:text-gray-600
      border?: bg-gray-50 text-gray-300 border-gray-300 dark:bg-gray-500 dark:text-gray-700 dark:border-gray-700
      url?: hover:bg-gray-300 dark:hover:bg-gray-500
    red: &red
      base: bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800
      border?: bg-red-100 text-red-800 border-red-800 dark:bg-gray-700 dark:text-red-400 dark:border-red-400
      url?: hover:bg-red-200 dark:hover:bg-red-300
    blue: &blue
      base: bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800
      border?: bg-blue-100 text-blue-800 border-blue-800 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-400
      url?: hover:bg-blue-200 dark:hover:bg-blue-300
    yellow: &yellow
      base: bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800
      border?: bg-yellow-100 text-yellow-800 border-yellow-800 dark:bg-gray-700 dark:text-yellow-400 dark:border-yellow-400
      url?: hover:bg-yellow-200 dark:hover:bg-yellow-300
    green: &green
      base: bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800
      border?: bg-green-100 text-green-800 border-green-800 dark:bg-gray-700 dark:text-green-400 dark:border-green-400
      url?: hover:bg-green-200 dark:hover:bg-green-300
    indigo:
      base: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800
      border?: bg-indigo-100 text-indigo-800 border-indigo-800 dark:bg-gray-700 dark:text-indigo-400 dark:border-indigo-400
      url?: hover:bg-indigo-200 dark:hover:bg-indigo-300
    purple:
      base: bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800
      border?: bg-indigo-100 text-purple-800 border-purple-800 dark:bg-gray-700 dark:text-purple-400 dark:border-purple-400
      url?: hover:bg-purple-200 dark:hover:bg-purple-300
    pink:
      base: bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800
      border?: bg-pink-100 text-pink-800 border-pink-800 dark:bg-gray-700 dark:text-pink-400 dark:border-pink-400
      url?: hover:bg-pink-200 dark:hover:bg-pink-300
    info: *blue
    success: *green
    warning: *yellow
    error: *red
    default: *default
icon:
  size:
    base: w-3.5 h-3.5
    sm: w-4 h-4
content:
  hidden: sr-only