diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 76e135a4e6..6ea4dcb0ea 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1250,7 +1250,7 @@ export default {
   inherits: true;
 }
 
-.content {
+:root {
 	/**
 	 * The padding between the toggle button and the page border
 	 */
@@ -1266,12 +1266,12 @@ export default {
 }
 
 // When AppSidebar is animation is active - also apply transition for the toggle button offset
-.content:has(.app-sidebar.slide-right-enter-active),
-.content:has(.app-sidebar.slide-right-leave-active) {
+:root:has(.app-sidebar.slide-right-enter-active),
+:root:has(.app-sidebar.slide-right-leave-active) {
 	transition: --app-sidebar-offset var(--animation-quick);
 }
 
-.content:has(.app-sidebar__toggle) {
+:root:has(.app-sidebar__toggle) {
 	--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));
 }
 </style>