From 51f31f5a703c9dd75c283cec35ceb239bc380604 Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Tue, 7 Nov 2023 14:21:39 -0500
Subject: [PATCH] fix(tooltip): animation transform defined in tooltip instead
 of inherited

---
 components/tooltip/index.css | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index 1ff1774f8ec..0efc054e8fe 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/index.css
@@ -122,7 +122,6 @@ governing permissions and limitations under the License.
   }
 
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
     @inherit: %spectrum-overlay--open;
   }
 
@@ -400,8 +399,7 @@ governing permissions and limitations under the License.
 
   /* tooltip animates upward ⬆ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--top--open;
+    transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 }
 
@@ -416,8 +414,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates downward ⬇ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--bottom--open;
+    transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 }
 
@@ -430,8 +427,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates to right ⮕ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--right--open;
+    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 }
 
@@ -444,8 +440,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates to left ⬅ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--left--open;
+    transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 }
 
@@ -458,15 +453,13 @@ governing permissions and limitations under the License.
 
   /* LTR read, tooltip animates towards left ⬅ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--left--open;
+    transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 
   /* RTL read, tooltip animates towards right ⮕ */
   [dir="rtl"] & {
     &.is-open {
-      --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-      @inherit: %spectrum-overlay--right--open;
+      transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
     }
   }
 }
@@ -480,15 +473,13 @@ governing permissions and limitations under the License.
 
   /* LTR read, tooltip animates towards right ⮕ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--right--open;
+    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 
   /* RTL read, tooltip animates towards left ⬅ */
   [dir="rtl"] & {
     &.is-open {
-      --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-      @inherit: %spectrum-overlay--left--open;
+      transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
     }
   }
 }