import {styled} from '@mui/material';
import {rgba} from 'polished';

const Container = styled('div')(({theme}) => ({
    '> div': {
        padding: 0,
        color: theme.palette.typography[500],
        fontFamily: theme.typography.fontFamily,
        fontSize: '1.118rem',
        boxShadow: `0px 4px 6px -2px ${rgba(
            theme.palette.shadow[500] as string,
            0.03,
        )}, 0px 12px 16px -4px ${rgba(
            theme.palette.shadow[500] as string,
            0.08,
        )}`,
        borderRadius: '8px',
        border: `1px solid ${theme.palette.border[100]}`,
        backgroundColor: theme.palette.white,
        marginTop: 4,
    },
}));

export const DropdownMenuStyle = {
    Container,
};