* {
    /*colors*/
    --sonj-prop-name: #b863bf;
    --sonj-prop-type-string: #C41A16;
    --sonj-prop-type-number: #1C00CF;
    --sonj-prop-type-undefined: #444444;
    --sonj-arrow-color: #727272;
    --sonj-primary-color: #909090;
    --sonj-primary-bgcolor: #fff;
    --sonj-secondary-bgcolor: #dedede;
    --sonj-secondary-color: #808080;
    /*sizes*/
    --sonj-prop-indent: 12px; 
}

.sonj-container {
    overflow: hidden;
    overflow-x: auto;
    color: var(--sonj-primary-color);
}

.prop-wrapper {
    padding-left: var(--sonj-prop-indent);
    cursor: default;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
    font-size: 14px;
}
.prop-header {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.prop-separator {
    margin-right: 5px;
}
.prop-name {
    color: var(--sonj-prop-name);
}

.prop-value.prop-type-string {
    color: var(--sonj-prop-type-string);
}
.prop-value.prop-type-string::before {
    content: '"';
}
.prop-value.prop-type-string::after {
    content: '"';
}
.prop-value.prop-type-bigint,
.prop-value.prop-type-number {
    color: var(--sonj-prop-type-number);
}
.prop-value.prop-type-undefined,
.prop-value.prop-type-object {
    color: var(--sonj-prop-type-undefined);
    font-style: italic;
}
.prop-expand {
    position: absolute;
    border: 4px solid transparent;
    border-top: 6px solid var(--sonj-arrow-color);
    height: 0;
    width: 0;
    left: -10px;
    top: 4px;
    transform: rotate(-90deg);
}
.prop-expanded > * > .prop-expand {
    transform: rotate(0);
    left: -12px;
    top: 6px;
}
.prop-pill {
    background-color: var(--sonj-secondary-bgcolor);
    color: var(--sonj-secondary-color);
    border-radius: 5px;
    padding: 0 5px;
}

.prop-clickable {
    cursor: pointer;
}