From 2e3cb0adf79b869e2d3044df86de913d34928fb4 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 22 May 2023 07:40:40 +0000
Subject: [PATCH] Replace a Sass variable with a CSS custom property -
 hover-transition (#10786)

---
 res/css/_animations.pcss                   | 4 ++++
 res/css/_common.pcss                       | 2 --
 res/css/views/settings/_AvatarSetting.pcss | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/res/css/_animations.pcss b/res/css/_animations.pcss
index fb4ce1eb57e..96908097e42 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 3cad47ccfeb..e9df6ccf559 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 1a5e9c5e304..98bf3ab9b85 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;