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

const StyledText = LabelElement.as('span')

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

const AddressLine2 = styled.withComponent(StyledText) `
  flex: 0 0 100%;
  margin-right: rem(6);
`
const City = styled.withComponent(StyledText) `
  margin-right: rem(6);
`
const Country = styled.withComponent(StyledText) `
  flex: 0 0 100%;
  margin-right: rem(6);
`
const State = styled.withComponent(StyledText) `
  margin-right: rem(6);
`
const PostalCode = styled.withComponent(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,
}