import { styled } from 'view-container'
import { TextPlaceholder } from 'atoms/Placeholder/TextPlaceholder'

const HeadingTextPlaceholder = styled.withComponent(TextPlaceholder) `
  margin-bottom: 20px;
`

const DetailedListItemWrapper = styled.div `
  display: flex;
  flex-direction: ${props => (props.isColumnView === true ? 'column' : 'row')};

  .dl-datum {
    margin-bottom: 5px;
  }

  @media (max-width: 767px) {
    flex-direction: column;
  }
`

const StyledTextPlaceholder = styled.withComponent(TextPlaceholder) `
  margin-left: 40px;
  margin-bottom: 5px;
`

const DetailedListWrapper = styled.dl `
  width: 100%;
`

export {
  HeadingTextPlaceholder,
  StyledTextPlaceholder,
  DetailedListItemWrapper,
  DetailedListWrapper,
}