/* Preview styles */

.preview {
  --border-width: 1px;
  --border-color: #d0d0d0;
  --danger-color: #d44646;
  --header-color: #616161;
  --background-color: #fcfcfc;
  --arrow-offset-skidding: 0px;
  --arrow-offset-distance: 0px;
}

.preview {
  display: flex;
  z-index: 5;
  font-size: 12px;
  padding: 4px 6px;
  max-height: 50vh;
  line-height: 14px;
  letter-spacing: -0.2px;
  flex-direction: column;
  max-width: calc(100vw - 8px);
  background: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: 5px;
  max-width: 400px;
  max-height: calc(100vh / 2 - 100px);
}

.preview-root {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.preview-copy {
  padding: 0;
  width: 14px;
  height: 14px;
  border: none;
  outline: none;
  display: flex;
  background: none;
}

.preview-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--header-color);
}

.preview-header {
  gap: 6px;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
}

.preview-content {
  padding: 4px;
  display: flex;
  overflow: auto;
  margin-top: 4px;
  min-width: 100px;
  min-height: 34px;
  flex-direction: column;
  border: var(--border-width) solid var(--border-color);
  border-radius: 5px;
  background: white;
}

.preview-copy:hover {
  opacity: 0.5;
}

.preview-content.image,
.preview-content.error {
  justify-content: center;
}

.preview-content.image > img {
  object-fit: contain;
}

.preview-content.error > span {
  color: var(--danger-color);
}

.preview[data-popper-reference-hidden] {
  pointer-events: none;
  visibility: hidden !important;
}

.preview[data-popper-placement^='top']:before {
  top: 100%;
}

.preview[data-popper-placement^='bottom']:before {
  bottom: 100%;
}

.preview[data-popper-placement^='top']:before,
.preview[data-popper-placement^='bottom']:before {
  left: 0;
  width: 100%;
  content: '';
  position: absolute;
  height: calc(var(--arrow-offset-distance) + var(--border-width));
}

/* Arrow styles */

.preview-arrow {
  visibility: hidden;
}

.preview-arrow,
.preview-arrow:before {
  width: 8px;
  height: 8px;
  position: absolute;
  background: inherit;
}

.preview-arrow:before {
  content: '';
  visibility: visible;
  transform: rotate(45deg);
  border: var(--border-width) solid var(--border-color);
}

.preview[data-popper-placement^='top'] > .preview-arrow {
  bottom: -5px;
}

.preview[data-popper-placement^='bottom'] > .preview-arrow {
  top: -5px;
}

.preview[data-popper-placement^='top'] > .preview-arrow:before {
  border-top-width: 0;
  border-left-width: 0;
}

.preview[data-popper-placement^='bottom'] > .preview-arrow:before {
  border-right-width: 0;
  border-bottom-width: 0;
}

/* Tree styles */

.preview .jt-node {
  --depth: 0;
  --offset: 8px;
  padding: 3px 0;
  overflow: hidden;
  line-height: 18px;
  --indent: calc(var(--depth) * var(--offset));
}

.jt-node {
  white-space:nowrap;
}

.jt-root>.jt-node.string {
  white-space:normal;
}

.preview .jt-node-inner,
.preview .jt-node-label {
  display: flex;
}

.preview .jt-node-label,
.preview .jt-node-value {
  min-width: 0;
  overflow: hidden;
}

.preview .jt-node-value {
  flex: 1;
  display: block;
  margin-right: 6px;
  text-overflow: ellipsis;
}

.preview .jt-node-preview {
  padding: 0 3px;
  color: rgba(96, 96, 96, 0.65);
}

.preview .jt-node-actions {
  gap: 0 12px;
  display: grid;
  grid-auto-flow: column;
}

.preview .jt-node-ellipsis {
  display: block;
  padding-left: calc(var(--offset) * (var(--depth) + 3 / 2));
}

.preview .jt-node-actions > button {
  padding: 0;
  width: 18px;
  height: 18px;
  border: none;
  outline: none;
  display: flex;
  background: none;
}

.preview .jt-node-actions > button:hover,
.preview .jt-node-actions > button:active {
  opacity: 0.5;
}

.preview .null > .jt-node-inner > .jt-node-value {
  color: #8546bc;
}

.preview .date > .jt-node-inner > .jt-node-value {
  color: #ce904a;
}

.preview .number > .jt-node-inner > .jt-node-value {
  color: #d036d0;
}

.preview .string > .jt-node-inner > .jt-node-value {
  color: #2db669;
}

.preview .boolean > .jt-node-inner > .jt-node-value {
  color: #2525cc;
}

.preview .undefined > .jt-node-inner > .jt-node-value {
  color: #808080;
}

.preview .jt-root > .jt-node > .jt-node-nodes > .jt-node-bracket {
  padding-left: 0 !important;
}

.preview .expanded > .jt-node-nodes > .jt-node-bracket:last-of-type,
.preview .expanded > .jt-node-nodes > .jt-node-bracket:first-of-type,
.preview .expanded > .jt-node-nodes > .jt-node > .jt-node-inner > .jt-node-label {
  padding-left: calc(var(--indent, 0) + var(--offset) / 2);
}
