.node{
--level:1;
--toggle-width: 1rem;
display: grid;
grid-template-columns: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2)) var(--toggle-width) 1fr;
grid-template-areas: "spacer toggle content";
width: 100%;
min-height: 2rem;
font-size: 14px;
color: rgb(230, 237, 243);
border-radius: 6px;
cursor: pointer;
}
.node:hover{
background-color: rgba(177, 186, 196, 0.12);
}
.node.selected{
background-color: rgba(177, 186, 196, 0.08);
}
.node.selected:hover{
background-color: rgba(177, 186, 196, 0.08);
}
.expand{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
grid-area: toggle / toggle / toggle / toggle;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: 100%;
color: rgb(125, 133, 144);
}
.expand:hover{
background-color: rgba(177, 186, 196, 0.12);
}
.item{
grid-area: content / content / content / content;
display: flex;
-webkit-box-align: center;
align-items: center;
height: 100%;
padding: 0px 8px;
gap: 8px;
}
.visual-hidden{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
white-space: nowrap;
border-width: 0;
}
.item-visual{
display: flex;
color: rgb(125, 133, 144);
}
.item-content{
flex: 1 1 auto;
width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.level-line{
width: 100%;
height: 100%;
border-right: 1px solid rgba(240, 246, 252, 0.1);
border-top-color: rgba(240, 246, 252, 0.1);
border-bottom-color: rgba(240, 246, 252, 0.1);
border-left-color: rgba(240, 246, 252, 0.1);
}
.show-name{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
@media (prefers-color-scheme: light){
.node{
color:#000
}
}
/*@media (hover: hover){*/
/* .level-line {*/
/* border-color: transparent;*/
/* }*/
/*}*/