pragma-branch {
  @include fullsize();
  @include flex();
  background: var(--color-ui-4);

  svg {
    @include fullsize();
  }

  .node {
    rect {
      fill: var(--color-ui-2-80);
      transform: translateY(-1rem);
      will-change: transform;
    }
    
    text {
      cursor: pointer;
      text-anchor: start;
      transform: translate(0.625rem, 0.3125rem);
      will-change: transform;
    }

    .tree-button {
      cursor: pointer;
      pointer-events: bounding-box;
    }
    
    .checkbox {
      cursor: pointer;
      pointer-events: bounding-box;
      width: 3rem;
      height: 3rem;
      transform: translate(-0.65rem, -1.70rem);
      will-change: transform;
      
      path {
        fill: var(--color-focus);
      }
    }
    
    .toggle {
      cursor: pointer;
    }
  }
  
  .selected {
    rect {
      fill: var(--color-ui-1-80);
    }
    
    text {
      fill: white;
    }

    g.tree-button > path {
      fill: white;
    }
    
    g.busy-indicator > path {
      fill: white;
    }
  }
  
  .node:hover {
    rect {
      fill: var(--color-ui-2);
    }
  }
  
  .node.selected:hover {
    rect {
      fill: var(--color-ui-1);
    }
  }

  .link {
    fill: none;
    stroke: var(--color-ui-2-50);
    stroke-width: 0.125rem;
  }

  .highlighted {
    stroke: var(--color-ui-1-50);
    stroke-width: 0.25rem;
  }

  .focus {
    rect {
      stroke: var(--color-focus-80);
      stroke-width: 0.25rem;
    }
  }

  .loading {
    animation: spin 1s infinite;
    -webkit-animation: spin 1s infinite ease-in-out;
    transform-origin: 0.625rem 0.625rem;
    will-change: transform;
  }
  
  @keyframes spin {
    to {
      transform: rotate(1080deg);
      -webkit-transform: rotate(1080deg);
      -moz-transform: rotate(1080deg);
    }
  }

  @-webkit-keyframes spin {
    to {
      transform: rotate(1080deg);
      -webkit-transform: rotate(1080deg);
      -moz-transform: rotate(1080deg);
    }
  }
}