import { isNumber } from 'lodash'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

/** @component */
export default styled.div.attrs({
  'data-test-id': props => props['data-test-id'] || 'item',
})`
  display: flex;
  flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
  flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
  justify-content: ${({ justify }) => justify || 'initial'};
  margin-right: ${({ withRightMargin }) =>
    withRightMargin ? th('gridUnit') : 0};
`