/* Copyright 2026 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

#tree.loading {
  pointer-events: none;
}

#tree {
  padding: 8px 12px;
  background: var(--surface-bg);
  border-radius: 4px;
  border: 1px solid var(--border-color);
  min-height: 60px;

  .node {
    display: block;
    padding: 1px 0;
  }

  .key {
    color: var(--accent-color);
  }

  .separator {
    color: var(--muted-color);
  }

  [role="button"] {
    display: inline-block;
    width: 14px;
    font-size: 0.7em;
    color: var(--muted-color);
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
  }

  [role="group"] {
    padding-left: 20px;
    border-left: 1px dashed var(--border-subtle-color);
    margin-left: 2px;

    &.hidden {
      display: none;
    }
  }

  .ref {
    color: var(--ref-color);
    cursor: pointer;
    text-decoration: underline dotted;

    &:hover {
      color: var(--ref-hover-color);
    }
  }

  .str-value {
    color: var(--string-color);
  }

  .num-value {
    color: var(--number-color);
  }

  .bool-value {
    color: var(--bool-color);
  }

  .null-value {
    color: var(--null-color);
  }

  .name-value {
    color: var(--name-color);
  }

  .bracket {
    color: var(--muted-color);
    cursor: pointer;
    user-select: none;

    &:hover {
      color: light-dark(#444, #bbb);
    }
  }

  .stream-label {
    color: var(--stream-color);
    font-style: italic;
  }

  [role="status"] {
    color: var(--muted-color);
    font-style: italic;
  }

  [role="alert"] {
    color: var(--changed-color);
  }

  .bytes-content {
    padding-left: 20px;
    white-space: pre-wrap;
    font-size: 1em;
    opacity: 0.85;
    color: var(--string-color);
  }

  .bytes-hex {
    font-family: monospace;
    color: var(--bool-color);
  }

  .image-preview {
    display: block;
    margin-top: 4px;
    max-width: 40%;
    height: auto;
    image-rendering: pixelated;
    border: 1px solid var(--border-subtle-color);
  }

  .token-cmd {
    color: var(--accent-color);
    font-weight: bold;
  }

  .token-num {
    color: var(--number-color);
  }

  .token-str {
    color: var(--string-color);
  }

  .token-name {
    color: var(--name-color);
  }

  .token-bool {
    color: var(--bool-color);
  }

  .token-null {
    color: var(--null-color);
  }

  .token-ref {
    color: var(--ref-color);
  }

  .token-array,
  .token-dict {
    color: var(--text-color);
  }

  /* Cap height when a MultilineView is embedded in the tree. */
  .mlc-scroll {
    max-height: 60vh;
  }
}

/* Content-stream line styles. */
.content-stm-instruction {
  display: block;
  white-space: nowrap;
  padding-inline-start: 0.5em;
}

.raw-bytes-stream {
  color: var(--string-color);
}