import styled , { StyledComponentClass } from 'styled-components';
import { COLOR_PALETTE } from '../../constants/colors';
import { FONTS } from "../../constants/fonts";
import * as React from 'react';

export const Container = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`;

export const PagerContainer = styled.ul`
    list-style: none;
    margin-left: 8px;
    margin-right: 8px;
`;

export const PagerItem = styled.li`
    text-align: center; 
    display: inline-block;
    margin: 4px 4px; 
    width: 27px;
    padding: 5px 6px 4px;
	height: 23px;
	border-radius: 2px;
    font-family: ${FONTS.HELVETICA};
	font-size: 16px;
    letter-spacing: 1.4px;
`;

export const PagerItemSelected = PagerItem.extend`
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, ${COLOR_PALETTE.BlUE_LIGHT_PAGER}, ${COLOR_PALETTE.BLUE_DARK_PAGER});
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.10);
`;

export const PagerItemUnselected = PagerItem.extend`
    font-weight: 300; 
    color: ${COLOR_PALETTE.BLUE_LIGHT_2};
    background: ${COLOR_PALETTE.WHITE};
    box-shadow: 1px 2px 3px 0 ${COLOR_PALETTE.BLACK_BOX_SHADOW};
`;

export const PagerItemContent = styled.a`
    display: flex;
    width: 100%;
    padding: 0 1px; 
    justify-content: center;
    height: 100%;
    cursor: pointer;
`;