docmost/apps/client/src/features/page/tree/styles/tree.module.css

.tree {
    border-radius: 0;
}

.treeContainer {
    height: 100%;
    min-width: 0;

    > div, > div > .tree {
        height: 100% !important;
    }
}

.node {
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: 100%;
    width: 93%; /* not to overlap with scroll bar */

    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

    &:hover {
        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
        /*background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));*/
     }


    .actions {
        visibility: hidden;
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
    }

      &:hover .actions {
       visibility: visible;
    }

}

.node:global(.willReceiveDrop) {
    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-gray-7));
}

.node:global(.isSelected) {
    border-radius: 0;

    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
/*
    color: white;

 // background-color: light-dark(
  //  var(--mantine-color-gray-0),
   // var(--mantine-color-dark-6)
  //);
  //background: rgb(20, 127, 250, 0.5);*/
}

.node:global(.isSelectedStart.isSelectedEnd) {
    border-radius: 4px;
}

.row:focus .node:global(.isSelected) {
    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
}

.row {
    white-space: nowrap;
    cursor: pointer;
}

.row:focus {
    outline: none;
}

.row:focus .node {
    /** come back to this **/
   /* background-color: light-dark(var(--mantine-color-red-2), var(--mantine-color-dark-5));*/
}

.icon {
    margin: 0 rem(10px);
    flex-shrink: 0;
}

.text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: rem(14px);
    font-weight: 500;
}

.arrow {
    display: flex;
}

[role="treeitem"] {
    padding-bottom: 2px;
}