import {styled} from '@mui/material/styles';
import {ButtonComponent} from '../../atoms';

const Container = styled('div')`
    display: flex;
    justify-content: space-between;
`;

const Counts = styled('div')`
    display: inline-flex;
    align-items: center;
    width: 100%;
`;

const Button = styled(ButtonComponent)`
    color: ${({theme}) => theme.palette.typography[500]};
    display: inline-flex;
    gap: 8px;

    &.active {
        background-color: ${({theme}) => theme.palette.gray[100]};
        color: ${({theme}) => theme.palette.typography[800]};
    }

    & .icon {
        font-size: 1.3rem;
    }
`;

export const PaginationStyle = {
    Container,
    Counts,
    Button,
};