From 8ba3aaf75eebee993bf48b56e6443aca62a3d2a8 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 | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index 1ff1774f8ec..50ef27cee4b 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/index.css
@@ -400,8 +400,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 +415,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 +428,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 +441,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 +454,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 +474,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))));
     }
   }
 }