import { BottomDrawer } from '../BottomDrawer';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { LIST_WIDTH } from './constants';
export const Wrapper = styled.ul `
  display: flex;
  flex-direction: column;

  width: ${LIST_WIDTH};
  margin: 0;
  padding: ${({ theme }) => theme.spacing(0)};

  list-style-type: none;
  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: unset;
  }
`;
export const Title = styled(Typography) `
  padding: ${({ theme }) => theme.spacing(2, 4)};
`;
export const StyledBottomDrawer = styled(BottomDrawer) `
  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: none;
  }
`;
