component
  font-size: 0.75rem
  display: flex
  flex-direction: column
  row-gap: 0.5rem

  > h2
    white-space: nowrap
    font-family: monospace
    font-size: 0.75rem
    text-transform: uppercase
    opacity: 0.3
    border-bottom: 1px white solid

  div.fields
    display: grid
    grid-template-columns: auto auto 1fr
    column-gap: 0.75rem
    white-space: nowrap

    > div.type
      color: var(--color-green)
      grid-column: span 3

    > div.field
      margin-left: 0.25rem
      display: grid
      grid-template-columns: subgrid
      grid-column: span 3

      > span.key
        text-align: right
        opacity: 0.5

      > div.value > div.target
        font-family: monospace
        font-size: 0.75rem
        margin-top: 0.0625rem

      > div.value
        color: var(--color-green)

      > div.target
        color: var(--color-blue)

        &.clickable
          cursor: pointer

      > div.object
        display: flex
        flex-direction: column

  span.pointer
    color: var(--color-shadow)