.airlogs-json-block {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgb(148 163 184 / 0.24);
  border-radius: 0.85rem;
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.98), rgb(15 23 42 / 0.94));
  color: rgb(226 232 240);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}

.airlogs-json-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.airlogs-json-block--text .airlogs-json-code,
.airlogs-json-block--empty .airlogs-json-code {
  white-space: pre-wrap;
  word-break: break-word;
}

.airlogs-json-block--invalid {
  border-color: rgb(251 146 60 / 0.38);
  background:
    linear-gradient(180deg, rgb(39 24 16 / 0.97), rgb(24 24 27 / 0.94));
}

.airlogs-json-placeholder,
.airlogs-json-token--null {
  color: rgb(148 163 184);
}

.airlogs-json-token--key {
  color: rgb(147 197 253);
}

.airlogs-json-token--string {
  color: rgb(110 231 183);
}

.airlogs-json-token--number {
  color: rgb(251 191 36);
}

.airlogs-json-token--boolean {
  color: rgb(248 113 113);
  font-weight: 600;
}

.airlogs-json-field {
  margin-top: 0.35rem;
}

.airlogs-json-field__preview {
  margin: 0 0 0.65rem;
}

textarea.airlogs-json-textarea {
  width: 100%;
  min-height: 10rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (max-width: 640px) {
  .airlogs-json-code {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .airlogs-json-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}