import styled from 'styled-components';

const css = styled.div;

export default css`
   .pagination {
      text-align: center;
      display: table;
      margin: auto;
      user-select: none;

      .page {
         font-weight: 600;
         font-size: 14px;
         border-radius: 500px;
         width: 30px;
         height: 30px;
         text-align: center;
         line-height: 30px;
         margin: 0px 3px;
         display: inline-block;

         &.active {
            background: ${(props) => props.theme.primary};
            color: white;

            &:hover {
               cursor: auto;
               background: ${(props) => props.theme.primary};
            }
         }

         &:hover {
            cursor: pointer;
            background: #eee;
         }

         &.disabled {
            background: transparent;
         }
      }
   }
`;
