docmost/frontend/src/features/page/tree/tree.module.css

.tree {
     border-radius: 0px;
}

.treeContainer {
    display: flex;
    height: 50vh;
    flex: 1;
    min-width: 0;
}

.node {
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;

    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-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-6));
}

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

.row:focus {
    outline: none;
}

.row:focus .node {
    /** come back to this **/
    background-color: light-dark(var(--mantine-color-gray-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;
}