1  import { checkboxAnatomy } from '@chakra-ui/anatomy';
 2  import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
 3  
 4  const { defineMultiStyleConfig, definePartsStyle } =
 5    createMultiStyleConfigHelpers(checkboxAnatomy.keys);
 6  
 7  const variants = {
 8    glassTile: definePartsStyle({
 9      control: {
10        visibility: 'hidden',
11      },
12      icon: {
13        width: 0,
14        height: 0,
15      },
16      label: {
17        marginInlineStart: 0,
18      },
19      container: {
20        width: 120,
21        height: 120,
22        display: 'flex',
23        flexDirection: 'column',
24        alignItems: 'center',
25        justifyContent: 'center',
26        borderWidth: 1.5,
27        borderColor: 'transparent',
28        borderRadius: 16,
29        _checked: {
30          backgroundColor: 'glass.grayHov',
31          borderColor: 'glass.white20',
32        },
33        _hover: {
34          backgroundColor: 'glass.white20',
35          borderColor: 'glass.black20',
36        },
37        _active: {
38          backgroundColor: 'glass.grayHov',
39          borderColor: 'glass.white30',
40        },
41        // needed for keyboard navigation, but looks weird with mouse navigation
42        // _focusWithin: {
43        //   backgroundColor: 'glass.white10',
44        //   borderColor: 'glass.white90',
45        //   outline: '1px dashed var(--chakra-colors-glass-white30)',
46        // },
47      },
48    }),
49  };
50  
51  export const Checkbox = defineMultiStyleConfig({ variants });