@devtools-ds/tree/src/Tree.css

A versatile expanding `Tree` component, with full keyboard navigation following the [Tree View Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html).

.tree {
  width: 100%;
  font-family: Menlo, monospace;
}

/* Indent each row in the tree */
.item {
  list-style: outside none none;
}

/* Remove padding from the unordered list */
.group {
  margin: 0;
  padding: 0;
  list-style: outside none none;

  /* Responsible for the highlight and focus colors in the row */
  .label {
    cursor: default;
    line-height: 1.5;
    width: 100%;
    display: inline-block;
    outline: none;
    padding-left: 5px;

    &:focus {
      background-color: @theme focusColor;
      color: @theme focusTextColor;

      &.focusWhite {
        * {
          color: white;
        }

        .arrow {
          border-color: transparent transparent transparent white;
        }
      }
    }
  }

  .label.hover {
    &:hover:not(:focus) {
      background-color: @theme hoverColor;
      border-radius: @theme hoverRadius;
    }
  }
}

/* The expand/collapse arrow character */
.arrow {
  margin: 0 0.7em 0 0.1em;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.4em;
  border-color: transparent transparent transparent @theme arrowColor;
  vertical-align: baseline;

  &.open {
    transform: rotateZ(90deg);
    bottom: -0.05em;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}