/* base styles */

.container-base {
  line-height: 1.2;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.punctuation-base {
  margin-right: 5px;
  font-weight: bold;
}

.punctuation-base + .punctuation-base {
  margin-left: -5px;
}

.pointer {
  cursor: pointer;
}

.expander-base {
  composes: pointer;
  font-size: 1.2em;
  margin-right: 5px;
  user-select: none;
}

.expand-icon::after {
  content: '▸';
}

.collapse-icon::after {
  content: '▾';
}

.collapsed-content-base {
  composes: pointer;
  margin-right: 5px;
}

.collapsed-content-base::after {
  content: '...';
  font-size: 0.8em;
}

.container-light {
  composes: container-base;
  background: #eee;
}

.basic-element-style {
  margin: 0;
  padding: 0 10px;
}

.child-fields-container {
  margin: 0;
  padding: 0;
}

/* default light style */
.label-light {
  font-weight: 600;
  margin-right: 5px;
  color: #000000;
}

.clickable-label-light {
  composes: label-light;
  composes: pointer;
}

.punctuation-light {
  composes: punctuation-base;
  color: #000000;
}

.value-null-light {
  color: #df113a;
}

.value-undefined-light {
  color: #df113a;
}

.value-string-light {
  color: rgb(42, 63, 60);
}

.value-number-light {
  color: #0b75f5;
}

.value-boolean-light {
  color: rgb(70, 144, 56);
}

.value-other-light {
  color: #43413d;
}

.collapse-icon-light {
  composes: expander-base;
  composes: collapse-icon;
  color: #000000;
}

.expand-icon-light {
  composes: expander-base;
  composes: expand-icon;
  color: #000000;
}

.collapsed-content-light {
  composes: collapsed-content-base;
  color: #000000;
}

/* default dark style */
.container-dark {
  background: rgb(0, 43, 54);
  composes: container-base;
}

.expand-icon-dark {
  composes: expander-base;
  composes: expand-icon;
  color: rgb(253, 246, 227);
}

.collapse-icon-dark {
  composes: expander-base;
  composes: collapse-icon;
  color: rgb(253, 246, 227);
}

.collapsed-content-dark {
  composes: collapsed-content-base;
  color: rgb(253, 246, 227);
}

.label-dark {
  font-weight: bolder;
  margin-right: 5px;
  color: rgb(253, 246, 227);
}

.clickable-label-dark {
  composes: label-dark;
  composes: pointer;
}

.punctuation-dark {
  composes: punctuation-base;
  color: rgb(253, 246, 227);
}

.value-null-dark {
  color: rgb(129, 181, 172);
}

.value-undefined-dark {
  color: rgb(129, 181, 172);
}

.value-string-dark {
  color: rgb(203, 75, 22);
}

.value-number-dark {
  color: rgb(211, 54, 130);
}

.value-boolean-dark {
  color: rgb(174, 129, 255);
}

.value-other-dark {
  color: rgb(38, 139, 210);
}
