.node-line {
    display: flex;
}
.node-text {
    flex-grow: 1;
}
.node-permissions {
    color: var(--bright-black);
    margin-left: 1ch;
}
.node textarea {
    width: 100%;
    resize: none;
}

/* Special display states a node can be in */
.has-children > .node-line > .node-text {
    font-weight: bold;
    color: var(--yellow);
}
.has-cursor > .node-line > .node-text {
    background-color: var(--blue);
}
.has-editor > .node-line {
    display: none;
}
.is-folded > .node-children {
    display: none;
}

/* Fancy tree lines */
.node-children > *, .node-children > *::before {
    border-color: var(--bright-black);
    border-width: 2px;
}
.node-children > * {
    position: relative; /* .node is containing block for its .node::before */
    margin-left: calc(0.5ch - 1px);
    padding-left: calc(1.5ch - 1px);
    border-left-style: solid;
}
.node-children > *:last-child {
    padding-left: calc(1.5ch + 1px);
    border-left-style: none;
}
.node-children > *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(1ch - 1px);
    height: calc(0.6em - 1px);
    border-bottom-style: solid;
}
.node-children > *:last-child::before {
    border-left-style: solid;
    transition: border-bottom-left-radius 0.4s;
}

/* Curvy lines */
.curvy .node-children > *:last-child, .curvy .node-children > *:last-child::before {
    border-bottom-left-radius: 6px;
}

/* About link in bottom right corner */
#about {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 1ch;
}