list.css

.field{
    display: flex;
    flex-direction: row;
}
.rowContainer{
    background: #121212;
}
.expander{
    width: fit-content;
    height: fit-content;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2px;
    width:25px;
}
/*
TODO:  make this a container query
*/
@media only screen and (max-width: 740px) {
    .field{
        flex-direction: column;
    }
}
label.key {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 1px;
    padding: 3px;
    height: fit-content;
    width:200px;
    display:inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
label.key::after{
    content: ": ";
}
button.expander{
    display:none;
}


.text-editing:has(link[itemprop="hasChildren"][href$="True"]) > button.expander{
    display:inline;
    margin: 1px;
}

.text-editing:has(link[itemprop="open"][href$="True"]) > button.expander::before {
    content: '-'
}

.text-editing:has(link[itemprop="open"]) > button.expander::before {
    content: '+'
}

.value{
    background-color: #ECF3C3;
    /* width: 100%; */
    flex-grow:5;
    color: var(--value-color);
    line-height: var(--font-lineheight-3);
}
.text-editing{
    display:flex;
    flex-direction: row;
    flex-basis: 100%;
    align-items: center;
}
.text-editing:has(meta[itemprop="type"][content="string"]) .key{
    background-color: var(--str-key-bg);
    color: var(--str-key-color);
}
.text-editing:has(meta[itemprop="type"][content="number"]) .key{
    background-color: var(--num-key-bg);
    color: var(--num-key-color);
}
.text-editing:has(meta[itemprop="type"][content="array"]) .key{
    background-color: var(--array-key-bg);
    color: var(--array-key-color);
}
.text-editing:has(meta[itemprop="type"][content="object"]) .key{
    background-color: var(--obj-key-bg);
    color: var(--obj-key-color);
}
.text-editing:has(meta[itemprop="type"][content="boolean"]) .key{
    background-color: var(--bool-key-bg);
}
section,div.buttons{
    display:flex;
    flex-direction: column;
    justify-content:left;
}
section.adder-buttons{
    display:none;
}
aside[data-can-have-children] section.adder-buttons{
    display:flex;
    /* width:240px; */
}
div.field[data-readonly] aside[data-can-have-children] section.adder-buttons{
    display:none;
}
div.field[data-readonly] .delete-button{
    display:none;
}
section.exp-collapse-buttons{
    display:none;
}
aside[data-can-have-children] section.exp-collapse-buttons{
    display:flex;
}
/* section{
    align-items: center;
} */
button{
    background-repeat:no-repeat;
    background-position-y:center;
    height: 22px;
    color: var(--btn-color);
}
.object.adder{
    background-color: var(--obj-adder-bg);
}
.string.adder{
    background-color:var(--string-adder-bg);
}
.bool.adder{
    background-color: var(--bool-adder-bg);
}
.number.adder{
    background-color: var(--num-adder-bg);
}
.arr.adder{
    background-color: var(--arr-adder-bg);
}
.adder{
    color: white;
    text-shadow:1px 1px 1px black;
    border-radius: 5px;
    padding: 2px;
    margin: 1px;
    border: none;
}

.expand-all{
    background-image: url(https://cdn.jsdelivr.net/npm/xtal-editor@0.0.165/arrows-expand.svg);
}
.collapse-all{
    background-image: url(https://cdn.jsdelivr.net/npm/xtal-editor@0.0.165/arrows-collapse.svg);
}
.copy{
    background-image: url(https://cdn.jsdelivr.net/npm/xtal-editor@0.0.165/copy.svg);
}
xtal-side-nav::part(opener), xtal-side-nav::part(close-btn){
    font-size:10px;
}
xtal-side-nav::part(side-nav){
    padding-top:5px;
}
/* xtal-side-nav::part(close-btn){
    display:none;
} */
xtal-side-nav{
    --side-nav-position:absolute;
}
xtal-side-nav:has(template):not([open]) aside{
    display: none;
}
/* xtal-side-nav menu{
    padding-inline-start: 0px;
} */