.ngx-json-viewer {
  font-family: monospace;
  font-size: 1em;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .segment {
    padding: 2px;
    margin: 1px 1px 1px 12px;

    .segment-main {
      word-wrap: break-word;

      .toggler {
        position: absolute;
        margin-left: -14px;
        margin-top: 3px;
        font-size: 0.8em;
        line-height: 1.2em;
        vertical-align: middle;

        &::after {
          display: inline-block;
          content: '►';
          transition: transform 0.1s ease-in;
        }
      }
    }

    .children {
      margin-left: 12px;
    }
  }

  .segment-type-object > .segment-main,
  .segment-type-array > .segment-main {
    white-space: nowrap;
  }

  .expanded > .toggler::after {
    transform: rotate(90deg);
  }

  .expandable,
  .expandable > .toggler {
    cursor: pointer;
  }
}