import { Button } from '../../Button';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
import { paginationItemClassnames } from './constants';
export const Ellipsis = styled(Typography) `
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 32px;
  height: 32px;

  &.${paginationItemClassnames.disabled} {
    color: ${({ theme }) => theme.palette.grey['500']};
  }
`;
export const StyledButton = styled(Button) `
  min-width: 32px;
  padding: 0;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    &.${paginationItemClassnames.previousButton},
    &.${paginationItemClassnames.nextButton} {
      padding: ${({ theme }) => theme.spacing(2)};
    }

    &.${paginationItemClassnames.pageButton} {
      padding: ${({ theme }) => theme.spacing(2, 3)};
    }
  }
`;
