import { styled } from '../../styled';
import { fadeDropDownTransition } from '../../styled/mixins';
export const PopupContainer = styled.div `
  position: absolute;
  top: ${({ $topPosition }) => ($topPosition ? `${$topPosition}px` : '16px')};
  left: ${({ theme }) => `calc(100% - ${theme.spacing(1)})`};

  overflow: hidden;

  padding: ${({ theme }) => theme.spacing(1, 0)};

  background-color: ${({ theme }) => theme.palette.background.default};
  border-radius: ${({ theme }) => theme.shape.medium};
  box-shadow: ${({ theme }) => theme.elevation[200]};

  ${({ $isOpen }) => fadeDropDownTransition($isOpen)}

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
