@use 'entity-finder' as EntityFinder;
@use 'sass:color';

.TreeViewReflexElement {
  .TreeView {
    border: none;
    border-right: var(--entity-finder-border);
  }
}

.TreeView {
  background-color: var(--synapse-background-color-gray);
  height: var(--entity-finder-height);
  overflow: hidden;

  .Tree {
    height: calc(
      var(--entity-finder-height) - var(--entity-finder-tree-header-height)
    );
    overflow: auto;

    // This defines general styles for the node elements of the tree
    // Other classes may override for specific components
    // See _tree-node-*.scss files
    .Node {
      transition: background-color 200ms ease-in;
      width: 100%;
      align-items: center;
      display: inline-grid;
      align-items: center;
      // grid-template-columns are defined in `tree-node-browse` and `tree-node-select` files
      button {
        grid-column: toggle / span 1;
        text-align: center;

        .ExpandButton {
          display: block;
          color: var(--synapse-primary-action-color-active);
        }
      }

      .EntityName {
        grid-column: name / span 1;
        white-space: nowrap;
        overflow-y: visible;
        overflow-x: clip;
        text-overflow: ellipsis;
      }
    }
    .Node[aria-disabled='false'][aria-selected='false'] {
      cursor: pointer;
    }
    .Node[aria-disabled='true'] {
      opacity: 0.5;
      > .NodeContent {
        cursor: default;
      }
    }
  }

  .Header {
    height: var(--entity-finder-tree-header-height);
    display: flex;
    justify-content: center;
    align-items: center;

    .MuiButtonGroup-grouped {
      white-space: nowrap;
    }
  }

  .Placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    &__Content {
      font-size: large;
    }
  }
}