/* 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,
.preview-content.selector {
  justify-content: center;
}

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

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

.preview-content.selector > img {
  margin-top: 4px;
}

.preview-content.selector > .jt-root {
  border-bottom: var(--border-width) solid var(--border-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);
}
/* Preview styles */  .preview {   --border-width: 1px;   --border-color: #ebebeb;   --danger-color: #d44646;   --header-color: #ebebeb;   --background-color: #333;   --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: #333;   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;   background-color: #333; }  .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: #3d3d3d; }  .preview-copy:hover {   opacity: 0.5; }  .preview-content.image, .preview-content.error, .preview-content.selector {   justify-content: center; }  .preview-content.image > img, .preview-content.selector > img {   object-fit: contain; }  .preview-content.error > span {   color: var(--danger-color); }  .preview-content.selector > img {   margin-top: 4px; }  .preview-content.selector > .jt-root {   border-bottom: var(--border-width) solid #3d3d3d; }  .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: #f22c3d; }  .preview .date > .jt-node-inner > .jt-node-value {   color: #e9950c; }  .preview .number > .jt-node-inner > .jt-node-value {   color: #df3079; }  .preview .string > .jt-node-inner > .jt-node-value {   color: #2befbe; }  .preview .boolean > .jt-node-inner > .jt-node-value {   color: #2e95d3; }  .preview .undefined > .jt-node-inner > .jt-node-value {   color: #3378a5; }  .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); }