styles.ts

import { css } from 'emotion'

export const wrapper = css`
  font-family: monospace;
  font-size: 16px;
  line-height: 20px;
`

export const smallWrapper = css`
  font-family: monospace;
  font-size: 12px;
  line-height: 16px;
`

export const key = css`
  margin-right: 5px;
  color: var(--color-white-1);
`

export const inlineNested = css`
  cursor: pointer;
`

export const bracket = (pointer: boolean) => css`
  cursor: ${pointer ? 'pointer' : 'default'};
`

export const stringValue = css`
  color: #00990a;
`

export const genericValue = css`
  color: var(--color-blue);
`

export const nestedChildren = css`
  padding-left: 1rem;
`

export const keyCount = css`
  font-size: var(--font-size-2);
  color: var(--color-white-4);
`