import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';

const css = styled.div;

export default css<any>`
   .pagination {
      text-align: center;
      display: table;
      margin: auto;
      user-select: none;
      ${(props) => props.textColor && `color: ${props.textColor};`};

      .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.activeBgColor ?? GetThemeVar(props.theme, 'primary')};
            color: ${(props) => props.activeTextColor ?? GetThemeVar(props.theme, 'primaryTextInside') ?? 'white'};

            &:hover {
               cursor: auto;
               background: ${(props) => props.activeBgColor ?? GetThemeVar(props.theme, 'primary')};
            }
         }

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

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