root:
  base: inline-block rounded
  rounded: rounded-full
  size:
    xs: w-6 h-6
    sm: w-8 h-8
    base: w-10 h-10
    lg: w-20 h-20
    xl: w-36 h-36
  src?:
    false: bg-gray-100 dark:bg-gray-600 relative overflow-hidden
  text?: flex items-center justify-center
  border?: ring-2
  border:
    neutral: &default ring-gray-300 dark:ring-gray-500
    dark: ring-gray-800 dark:ring-gray-800
    light: ring-gray-100 dark:ring-gray-700
    primary: ring-primary-300 dark:ring-primary-500
    info: ring-info-300 dark:ring-info-500
    success: ring-success-300 dark:ring-success-500
    warning: ring-warning-300 dark:ring-warning-500
    danger: ring-danger-300 dark:ring-danger-500
    default: *default
dot:
  base: absolute border-2 border-white dark:border-gray-800 transform z-[1]
  position:
    top_left: top-0 left-0 -translate-y-1/2 -translate-x-1/2
    top_center: top-0 left-1/2 -translate-y-1/2 -translate-x-1/2
    top_right: &default top-0 right-0 -translate-y-1/2 translate-x-1/2
    center_left: top-1/2 left-0 -translate-y-1/2 -translate-x-1/2
    center: top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2
    center_right: top-1/2 right-0 -translate-y-1/2 translate-x-1/2
    bottom_left: bottom-0 left-0 translate-y-1/2 -translate-x-1/2
    bottom_center: bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2
    bottom_right: bottom-0 right-0 translate-y-1/2 translate-x-1/2
    default: *default
dot/container:
  base: relative inline-block
label:
  base: sr-only
icon:
  base: absolute text-gray-400
  size:
    xs: w-8 h-8 -left-1
    sm: w-10 h-10 -left-1
    base: w-12 h-12 -left-1
    lg: w-24 h-24 -left-2
    xl: w-44 h-44 -left-4
text:
  base: font-medium text-gray-600 dark:text-gray-300
  size:
    xs: text-xs
    sm: text-sm
    base: text-base
    lg: text-4xl
    xl: text-7xl