elements.tsx

import styled from '../../styled-components'

export const Wrapper = styled<
  {
    small: boolean
  },
  'div'
>('div')`
  font-family: monospace;
  font-size: ${({ small }) => (small ? '12px' : '16px')};
  line-height: ${({ small }) => (small ? '16px' : '20px')};
`

export const Key = styled.span`
  margin-right: 5px;
  color: #333;
`

export const InlineNested = styled.div`
  cursor: pointer;
`

export const Bracket = styled.div`
  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
`

export const StringValue = styled.div`
  color: orange;
`

export const GenericValue = styled.div`
  color: ${({ theme }) => theme.color.primary};
`

export const NestedChildren = styled.div`
  padding-left: 1rem;
`