/* Structure */
json-tree {
    box-sizing: border-box;
    *, *:before, *:after {
        box-sizing: border-box;
    }
    .key {
        vertical-align: middle;
    }
    .expandable {
        position: relative;
        &::before {
            pointer-events: none;
        }
        &::before, & > .key {
            cursor: pointer;
        }
    }
    .branch-preview {
        display: inline-block;
        vertical-align: middle;
    }
}

/* Looks */
json-tree {
    ul {
        padding-left: 20px;
    }
    li, ul {
        list-style: none;
    }
    li {
        line-height: 1.5em;
    }
    .key {
        color: #D02828;
        padding: 5px 10px 5px 15px;
        &::after {
            content: ':';
        }
    }
    json-node.expandable {
        &::before {
            content: '\25b6';
            position: absolute;
            left: 0px;
            font-size: 10px;
            transition: transform .1s ease;
        }
        &.expanded::before {
            transform: rotate(90deg);
        }
    }
    .leaf-value, .branch-preview {
        word-break: break-all;
    }
    .branch-preview {
        overflow: hidden;
        font-style: italic;
        max-width: 40%;
        height: 1.5em;
        opacity: .7;
    }
}