File: src/components/Tree/Tree.scss

.tree {
  padding: 0.5rem;
}

.leaf {
  cursor: pointer;
  margin: 0.1rem 0;
  padding-left: 1rem;

  .name {
    border: 1px dotted transparent;
    display: inline-block;
    padding: 0.1rem;
  }

  > .toggle {
    display: inline-block;
    text-align: center;
    width: 1rem;
  }

  &[aria-selected='true'] {
    > .name {
      background-color: rgb(0, 0, 192, 0.2);
      border-color: rgb(0, 0, 0, 0.6);
      font-weight: bold;
    }
  }

  &:not(.hasChildren):not(.hasNoChildren) {
    > .toggle::before {
      content: '?';
    }
  }

  &.hasChildren {
    &[aria-expanded='false'] {
      > .children {
        display: none;
      }

      > .toggle::before {
        content: '?';
      }
    }

    &[aria-expanded='true'] {
      > .toggle::before {
        content: '?';
      }
    }
  }
}