ui/src/assets/widgets/tree.scss

@import "theme";

$chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='8'%3E%3Cline x1='2' y1='0' x2='6' y2='4' stroke='black'/%3E%3Cline x1='6' y1='4' x2='2' y2='8' stroke='black'/%3E%3C/svg%3E");

.pf-tree {
  font-family: $pf-font;
  display: grid;
  grid-template-columns: [left]auto [right]1fr;
  row-gap: 5px;

  .pf-tree-node {
    display: contents;

    &:hover {
      background: $table-hover-color;
    }

    .pf-tree-left {
      grid-column: left;
      background: inherit;
      min-width: max-content;
      border-radius: $pf-border-radius 0 0 $pf-border-radius;
      font-weight: bolder;
    }

    .pf-tree-right {
      grid-column: right;
      background: inherit;
      padding: 0 0 0 15px;
      border-radius: 0 $pf-border-radius $pf-border-radius 0;
      word-break: break-all;
      white-space: pre-wrap;
    }

    .pf-tree-gutter {
      display: inline-flex;
      position: relative;
      width: 16px;
      justify-content: center;
      align-items: center;
    }

    &.pf-collapsed > .pf-tree-left > .pf-tree-gutter {
      cursor: pointer;

      &::after {
        content: $chevron-svg;
      }
    }
    &.pf-expanded > .pf-tree-left > .pf-tree-gutter {
      cursor: pointer;
      &::after {
        content: $chevron-svg;
        rotate: 90deg;
      }
    }

    &.pf-loading > .pf-tree-left > .pf-tree-gutter {
      &::after {
        content: "";
        border: solid 1px lightgray;
        border-top: solid 1px $pf-primary-background;
        animation: pf-spinner-rotation 1s infinite linear;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
    }
    .pf-tree-indent-gutter {
      display: block;
      position: relative;
    }

    &.pf-collapsed + .pf-tree-children {
      display: none;
    }
  }

  .pf-tree-children {
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: subgrid;
    row-gap: 5px;
    border-left: solid rgba(0, 0, 0, 0.2) 1px;
    margin-left: 6px;
    padding-left: 6px;
  }
}