import styled from 'styled-components';

export const PaginationContainer = styled.nav`
  text-align: center;
  font-size: ${props => props.theme.default.fonts.sizes[4]};
  line-height: ${props => props.theme.default.fonts.sizes[4]};

  ul {
    list-style: none;
    padding: 0;
    
    li {
      padding: 5px;
      display: inline-block;
      color: ${props => props.theme.default.colors.darkGrey};
      
        .fa-chevron-right {
          padding-left: 8px;
        }
      
        a {
          display: block;
        }

        &.current,
        > a {
          padding: 5px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          transition: all 100ms;
          &.current,
          &:hover {
            color: ${props => props.theme.default.colors.white}!important;
            background-color: ${props => props.theme.default.colors.blue};
          }
        }
      }
    }
  }
`;