import { styled } from 'styleh-components'

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

/**
 * @todo isColumnView is not working right now
 * this logic will be changed by using React.Context
 *
 * @note was just a typo - currently it's in by using breakpoints
 */
// flex-direction: ${props => (props.isColumnView === true ? 'column' : 'row')};

const DetailedListItemPanel = styled.dl`
  display: flex;
  flex-direction: row;

  @media (max-width: 767px) {
    flex-direction: column;
  }
`
const DetailedListLabel = styled.dt`
  ${props =>
    props.isColon === true &&
    styled.css`
      &::after {
        content: ':';
      }
    `};
`
const DetailedListValue = styled.dd`
  @media (max-width: 767px) {
    margin: 10px 0;
  }
`

export {
  DetailedListWrapper,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
}