import { styled } from 'view-container'
import { LabelElement } from 'atoms/Text'

const SpanElement = LabelElement.withComponent('span')

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

const AddressLine2 = styled.withComponent(SpanElement) `
  flex: 0 0 100%;
  margin-right: rem(6);
`
const City = styled.withComponent(SpanElement) `
  margin-right: rem(6);
`
const Country = styled.withComponent(SpanElement) `
  flex: 0 0 100%;
  margin-right: rem(6);
`
const State = styled.withComponent(SpanElement) `
  margin-right: rem(6);
`
const Zipcode = styled.withComponent(SpanElement) `
  margin-right: rem(6);
`

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

export {
  AddressWrapper,
  Name,
  AddressLine1,
  AddressLine2,
  City,
  Country,
  State,
  Zipcode,
}