.vjs-tree {
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace !important;
    &.is-root {
        position: relative;
    }
    .vjs-tree-node {
        display: flex;
        position: relative;
        &:hover {
            background-color: unset;
        }
        .vjs-indent-unit {
            &.has-line {
                border-left: 1px dotted rgba(204, 204, 204, 0.28) !important;
            }
        }
        &.has-carets {
            padding-left: 15px;
        }
        .has-carets.has-selector,
        .has-selector {
            padding-left: 30px;
        }
    }
    .vjs-indent {
        display: flex;
        position: relative;
    }
    .vjs-indent-unit {
        width: 1em;
    }
    .vjs-tree-brackets {
        cursor: pointer;
        &:hover {
            color: #20a0ff;
        }
    }
    .vjs-key {
        color: #c3cbd3 !important;
        padding-right: 10px;
    }
    .vjs-value {
        @extend .text-break;
    }
    .vjs-value-string {
        color: #c3e88d !important;
    }
    .vjs-value-null,
    .vjs-value-number,
    .vjs-value-boolean,
    .vjs-value-undefined {
        color: #a291f5 !important;
    }
}