$pin-icon-size: 14px;

.Root {
  background-color: var(--theme-color-bg-4);
  max-height: 300px;
  max-width: 500px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--theme-color-border-default);
}

.ValueContainer {
  overflow: auto;
  gap: 5px;
  display: flex;
  flex-direction: column;
  padding-right: 16px; /* Give some space for the copy icon */

  span,
  div {
    font-family: var(--font-family-code);
  }

  :global(.collapsed-icon),
  :global(.expanded-icon) {
    svg {
      width: 0.8em !important;
      height: 0.8em !important;
      padding-top: 0.1em;
    }

    svg,
    path {
      color: var(--theme-color-fg-default-shy) !important;
      fill: var(--theme-color-fg-default-shy) !important;
    }
  }

  :global(.object-key) {
    span {
      color: var(--theme-color-fg-highlight);
    }
  }

  :global(.node-ellipsis) {
    font-size: 1em !important;
  }
}

.ValueInspector {
  font-family: monospace;
  color: var(--theme-color-fg-highlight);
  white-space: pre;
  cursor: text;
  user-select: text;
  display: flex;

  img {
    margin: 0 auto;
    max-width: 100px;
    max-height: 50px;
  }
}

.PinButton {
  -webkit-mask: url(../assets/icons/editor/push_pin_black_24dp-outline.svg);
  -webkit-mask-size: $pin-icon-size $pin-icon-size;
  width: $pin-icon-size;
  height: $pin-icon-size;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--theme-color-fg-default);
  flex-shrink: 0;

  &.is-pinned {
    -webkit-mask: url(../assets/icons/editor/push_pin_black_24dp-filled.svg);
    -webkit-mask-size: $pin-icon-size $pin-icon-size;
  }
}
