diff --git a/src/components/cylc/tree/util.js b/src/components/cylc/tree/util.js
index 2077f8d58..3352298a7 100644
--- a/src/components/cylc/tree/util.js
+++ b/src/components/cylc/tree/util.js
@@ -33,5 +33,5 @@ export function getNodeChildren (node, cyclePointsOrderDesc) {
 }
 
 export function getIndent (depth) {
-  return `calc(${depth} * var(--tree-indent))`
+  return `calc(${depth} * var(--c-tree-indent))`
 }
diff --git a/src/styles/cylc/_gscan.scss b/src/styles/cylc/_gscan.scss
index 7d7995002..44e31fb76 100644
--- a/src/styles/cylc/_gscan.scss
+++ b/src/styles/cylc/_gscan.scss
@@ -24,7 +24,7 @@
 }
 
 .c-gscan {
-  --tree-indent: 1rem;
+  --c-tree-indent: 1rem;
   .c-gscan-workflows {
     .c-gscan-workflow {
       .c-workflow-stopped {
diff --git a/src/styles/cylc/_tree.scss b/src/styles/cylc/_tree.scss
index 9585f47a2..c65a3c21b 100644
--- a/src/styles/cylc/_tree.scss
+++ b/src/styles/cylc/_tree.scss
@@ -35,7 +35,7 @@ $visible-outputs: 5;
 $icon-width: 1.5rem;
 
 :root {
-  --tree-indent: #{$icon-width};
+  --c-tree-indent: #{$icon-width};
 }
 
 @mixin active-state() {