.tree-grid {
    --row-color-base: white;
    --row-color-selected: lightgrey;
    --row-color-border: oklch(from var(--row-color-base) calc(l - .1) c h);
    --row-height: 2em;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */

    border-spacing: 1px 5px;
    border-collapse: collapse;
    width: 100%;
}

.tree-grid-body-row {
    background-color: var(--row-color-base);
    height: var(--row-height);
}
    .tree-grid-body-row:hover {
        background-color: var(--row-color-border);
    }

    .tree-grid-body-row td {
        border-style: solid;
        border-width: 1px;
        border-color: var(--row-color-border);
    }

.tree-grid-body-row-invisible {
    display: none;
}
.tree-grid-body-row-selected {
    background-color: var(--row-color-border);
}

.tree-grid-body-row-id {
    display: none;
}

.tree-grid-body-row-grabber {
    width: var(--row-height);
}

.tree-grid-body-row-grabber[draggable="true"] {
    cursor: grab;
}

    .tree-grid-body-row-grabber svg {
        height: calc(var(--row-height) * 0.8);
        width: calc(var(--row-height) * 0.8);
        display: block;
        margin: auto;
    }

.tree-grid-body-row-tree {
    width: 0px;
}

.tree-grid-body-row-indenter {
    height: var(--row-height);
    width: var(--row-height);
    justify-items: center;
    align-content: center;
}

    .tree-grid-body-row-indenter img {
        height: calc(var(--row-height) * 0.8);
        width: calc(var(--row-height) * 0.8);
        display: block;
        margin: auto;
    }

.tree-grid-body-data {
    min-width: var(--row-height);
    width: auto;
}
    .tree-grid-body-data > input {
        height: calc(var(--row-height) * 0.8);
        width: calc(100% - 15px);
        border: none;
        border-radius: 0;
        padding: 0;
        padding-left: 5px;
        margin-left: 5px;
        margin-right: 5px;
        background-color: oklch(from var(--row-color-base) calc(l + .4) c h);
    }

[aria-hidden="true"] {
    display: none;
}

.drag-over {
    background-color: oklch(from var(--row-color-base) calc(l + .1) c h);
}

.click-cursor:hover {
    cursor: pointer;
}

.row-height-width {
    width: var(--row-height);
}

.row-height-width .tree-grid-body-row-indenter img {
    height: 100%;
    width: 100%;
}