import { styled } from 'styleh-components'
const PaginationWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
`
/**
* @todo use button!!!
*/
const NextWrapper = styled.div`
order: ${props => (props.isMobile ? 4 : 2)};
`
const PreviousWrapper = styled.div`
order: 1;
`
const SelectBox = styled.div`
font-family: 'Roboto';
display: inline-flex;
justify-content: center;
align-items: center;
border: 0px;
padding: 4px;
`
const TextWrapper = styled.div`
order: 3;
display: inline-flex;
justify-content: center;
align-items: center;
`
/**
* @todo use text from atoms
*/
const Text = styled.span`
font-family: 'Roboto';
padding: 5px;
`
const PreText = styled.span`
font-family: 'Roboto';
padding: 5px;
order: 1;
margin-right: 4px;
`
const PostText = styled.span`
font-family: 'Roboto';
padding: 5px;
order: 3;
margin-left: 4px;
`
const Select = styled.select`
order: 2;
min-width: 40px;
font-size: 16px;
appearance: none;
padding: 4px;
`
export {
PaginationWrapper,
NextWrapper,
PreviousWrapper,
SelectBox,
TextWrapper,
Text,
PreText,
PostText,
Select,
}