diff --git a/src/components/KTreeList/KTreeDraggable.vue b/src/components/KTreeList/KTreeDraggable.vue
index 78aa0c3175..0cc73961d6 100644
--- a/src/components/KTreeList/KTreeDraggable.vue
+++ b/src/components/KTreeList/KTreeDraggable.vue
@@ -266,6 +266,9 @@ $kTreeListBar: 12px;
 
 /* Component styles */
 .tree-draggable {
+  margin: var(--kui-space-0, $kui-space-0);
+  padding: var(--kui-space-0, $kui-space-0);
+
   .child-drop-zone {
     // this is the height of the area you can drop an item in
     // to make it the child of another item
diff --git a/src/components/KTreeList/KTreeList.vue b/src/components/KTreeList/KTreeList.vue
index 8381e13826..c9b482d263 100644
--- a/src/components/KTreeList/KTreeList.vue
+++ b/src/components/KTreeList/KTreeList.vue
@@ -204,14 +204,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+// needs to stay unscoped as it's targeting specific deeply nested elements
 .k-tree-list {
   font-family: var(--kui-font-family-text, $kui-font-family-text);
 
-  .tree-draggable {
-    margin: var(--kui-space-0, $kui-space-0);
-    padding: var(--kui-space-0, $kui-space-0);
-  }
-
   & > .tree-draggable > .tree-item-container {
     &:before {
       display: none;