import { styled } from 'styleh-components'
import { LabelElement } from 'atoms/Text'

const StyledText = LabelElement.as('span')

const Name = styled(StyledText)`
  flex: 0 0 100%;
  margin-right: rem(6);
`
const AddressLine1 = styled(StyledText)`
  flex: 0 0 100%;
  margin-right: rem(6);
`

const AddressLine2 = styled(StyledText)`
  flex: 0 0 100%;
  margin-right: rem(6);
`
const City = styled(StyledText)`
  margin-right: rem(6);
`
const Country = styled(StyledText)`
  flex: 0 0 100%;
  margin-right: rem(6);
`
const State = styled(StyledText)`
  margin-right: rem(6);
`
const PostalCode = styled(StyledText)`
  margin-right: rem(6);
`

const AddressWrapper = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`

export {
  AddressWrapper,
  Name,
  AddressLine1,
  AddressLine2,
  City,
  Country,
  State,
  PostalCode,
  StyledText,
}