1  import { styled, ToggleButton, ToggleButtonProps } from '@mui/material';
 2  import React from 'react';
 3  
 4  const CustomToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
 5    border: '0px',
 6    flex: 1,
 7    backgroundColor: '#383D51',
 8    borderRadius: '4px',
 9  
10    '&.Mui-selected, &.Mui-selected:hover': {
11      backgroundColor: '#FFFFFF',
12      borderRadius: '4px !important',
13    },
14  
15    '&.Mui-selected, &.Mui-disabled': {
16      zIndex: 100,
17      height: '100%',
18      display: 'flex',
19      justifyContent: 'center',
20  
21      '.MuiTypography-subheader1': {
22        background: theme.palette.gradients.aaveGradient,
23        backgroundClip: 'text',
24        textFillColor: 'transparent',
25      },
26      '.MuiTypography-secondary14': {
27        background: theme.palette.gradients.aaveGradient,
28        backgroundClip: 'text',
29        textFillColor: 'transparent',
30      },
31    },
32  })) as typeof ToggleButton;
33  
34  const CustomTxModalToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
35    border: '0px',
36    flex: 1,
37    color: theme.palette.text.muted,
38    borderRadius: '4px',
39  
40    '&.Mui-selected, &.Mui-selected:hover': {
41      border: `1px solid ${theme.palette.other.standardInputLine}`,
42      backgroundColor: '#FFFFFF',
43      borderRadius: '4px !important',
44    },
45  
46    '&.Mui-selected, &.Mui-disabled': {
47      zIndex: 100,
48      height: '100%',
49      display: 'flex',
50      justifyContent: 'center',
51      color: theme.palette.background.header,
52    },
53  })) as typeof ToggleButton;
54  
55  export function StyledTxModalToggleButton(props: ToggleButtonProps) {
56    return <CustomTxModalToggleButton {...props} />;
57  }
58  
59  export default function StyledToggleButton(props: ToggleButtonProps) {
60    return <CustomToggleButton {...props} />;
61  }