import { formControlClasses } from '@mui/material/FormControl';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { paginationClassnames } from './constants';
export const Range = styled(Typography) `
  color: ${({ theme }) => theme.palette.grey['700']};
`;
export const RangeWrapper = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  align-items: center;

  .${formControlClasses.root} {
    flex-direction: unset;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const PaginationWrapper = styled.div `
  display: flex;
  justify-content: flex-end;

  margin: 0 ${({ theme }) => theme.spacing(2)};
  padding-top: ${({ theme }) => theme.spacing(4)};

  &.${paginationClassnames.leadingContent} {
    justify-content: space-between;
  }

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    padding-top: ${({ theme }) => theme.spacing(3)};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    justify-content: center;

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

    &.${paginationClassnames.leadingContent} {
      justify-content: center;
    }
  }
`;
