@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");

@mixin grid {
  display: grid;
  grid-template-columns: [gutter]auto [left]auto [right]1fr;
  row-gap: 5px;
}

.pf-tree {
  font-family: $pf-font;
  @include grid;
  .pf-tree-node {
    display: contents;
    .pf-tree-content {
      display: contents;
      &:hover {
        background: $table-hover-color;
      }
      .pf-tree-left {
        background: inherit;
        min-width: max-content;
        border-radius: $pf-border-radius 0 0 $pf-border-radius;
        font-weight: bolder;
      }
      .pf-tree-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: block;
      position: relative;
    }
    &.pf-collapsed > .pf-tree-gutter {
      cursor: pointer;
      width: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      &::after {
        content: $chevron-svg;
      }
    }
    &.pf-expanded > .pf-tree-gutter {
      cursor: pointer;
      width: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      &::after {
        content: $chevron-svg;
        rotate: 90deg;
      }
    }
    &.pf-loading > .pf-tree-gutter {
      width: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      &::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-tree-children {
      grid-column: 2 / span 2;
      @include grid;
      .pf-tree-gutter {
        // Nested gutters are always present, to provide indentation
        width: 16px;
      }
    }
    &.pf-collapsed > .pf-tree-children {
      display: none;
    }
    &.pf-collapsed > .pf-tree-indent-gutter {
      display: none;
    }
  }
}