:root {
    --tree-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.treeview .tree-node {
    margin: 4px 0;
}

.treeview .toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.treeview .toggle.toggle-hover:hover {
    background-color: var(--bs-light);
}

.treeview .tree-caret-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask-image: var(--tree-caret-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--tree-caret-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

/* default: closed */
.treeview .children {
    display: none;
}

/* when the node is open, show children */
.treeview .open > .children {
    display: block;
}

.treeview .open > .toggle .tree-caret-icon {
    transform: rotate(0deg);
}

.tree-node-adder-container {
    display: none;
}