diff --git a/res/css/_animations.pcss b/res/css/_animations.pcss
index fb4ce1eb57..96908097e4 100644
--- a/res/css/_animations.pcss
+++ b/res/css/_animations.pcss
@@ -34,6 +34,10 @@ limitations under the License.
     transition: opacity 300ms ease;
 }
 
+:root {
+    --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
+}
+
 @keyframes mx--anim-pulse {
     0% {
         opacity: 1;
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 3cad47ccfe..e9df6ccf55 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -23,8 +23,6 @@ limitations under the License.
 @import "./_spacing.pcss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
-$hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
-
 :root {
     font-size: 10px;
 
diff --git a/res/css/views/settings/_AvatarSetting.pcss b/res/css/views/settings/_AvatarSetting.pcss
index 1a5e9c5e30..98bf3ab9b8 100644
--- a/res/css/views/settings/_AvatarSetting.pcss
+++ b/res/css/views/settings/_AvatarSetting.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     position: relative;
 
     .mx_AvatarSetting_hover {
-        transition: opacity $hover-transition;
+        transition: opacity var(--hover-transition);
 
         /* position to place the hover bg over the entire thing */
         position: absolute;