.object-visualizer {
  border-radius: 4px;
  overflow-x: auto;
  margin: 0;
  padding: 10px;
  /* font-family: Menlo; */
  font-size: 0.6em;
  line-height: 1.7;
}

.array > .value,
.object > .value {
  display: flex;
  flex-direction: column;
  margin-left: 2em;
}

.key {
  /* color: #4078f2; */
  color: #111;
}

.string > .value {
  color: #50a14f;
}

.boolean > .value,
.number > .value {
  color: #d19a66;
}

.null > .value,
.undefined > .value {
  color: hsl(0, 0%, 40%);
}

.separator {
  cursor: pointer;
  font-size: 0.8em;
  color: hsl(0, 0%, 30%);
}

.indicator {
  cursor: pointer;
  font-size: 0.8em;
  padding-right: 0.5em;
  user-select: none;
  vertical-align: text-bottom;
  color: hsl(0, 0%, 30%);
}

.array > .key,
.object > .key {
  cursor: pointer;
}

.value > .array,
.value > .object {
  position: relative;
  left: -0.8em;
}

.count,
.preview,
.quotes {
  cursor: pointer;
  font-size: 0.8em;
  user-select: none;
  color: hsl(0, 0%, 30%);
}