.root {
    font-family: Menlo, Consolas, monospace;
    margin-left: 20px;
    cursor: default;
}

.item {
    position: relative;
    white-space: nowrap;
}

.item[disabled] {
    opacity: 0.6;
}

.property {
    /* color: #891391; */
    color: #2c75e4;
}

.value {
    display: inline-block;
    position: relative;
}

.text {}

.text[type="null"] {
    color: #93989f;
}

.text[type="string"] {
    color: #55a808;
}

.text[type="literal"] {
    color: #e0276e;
}

.text[editing] {
    visibility: hidden;
}

.textarea {
    position: absolute;
    top: -1px;
    left: -4px;
    z-index: 1;
    outline: none;
    border: 1px solid #bbb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    font-family: Menlo, Consolas, monospace;
    line-height: inherit;
    box-sizing: content-box;
    resize: none;
    padding: 0 3px;
    white-space: nowrap;
    overflow: hidden;
}

.textarea[role="back"] {
    line-height: 1;
}

.expander {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    text-align: center;
    margin-left: -20px;
    color: #6e6e6e;
    font: 10px/20px "Hiragino Sans GB", sans-serif;
}

.expander:before {
    content: '▶︎';
}

.expander[expanded]:before {
    content: '▼';
}