1  import { inputAnatomy } from '@chakra-ui/anatomy';
 2  import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
 3  
 4  const { defineMultiStyleConfig, definePartsStyle } =
 5    createMultiStyleConfigHelpers(inputAnatomy.keys);
 6  
 7  const variants = {
 8    glass: definePartsStyle({
 9      field: {
10        borderBottom: '1px solid',
11        borderColor: 'glass.white60',
12        borderRadius: 0,
13        px: 0,
14        marginBottom: 4,
15        marginTop: 0,
16        bg: 'transparent',
17        _readOnly: {
18          boxShadow: 'none !important',
19          userSelect: 'all',
20        },
21        _invalid: {
22          marginBottom: 0,
23          borderColor: 'red.600',
24          boxShadow: `0px 1px 0px 0px var(--chakra-colors-glass-white80)`,
25        },
26        _focusVisible: {
27          borderColor: 'glass.white80',
28          boxShadow: `0px 1px 0px 0px var(--chakra-colors-glass-white80)`,
29        },
30      },
31      addon: {
32        borderBottom: '2px solid',
33        borderColor: 'inherit',
34        borderRadius: 0,
35        px: 0,
36        bg: 'transparent',
37      },
38    }),
39  };
40  
41  export const Input = defineMultiStyleConfig({ variants });