From d47c3016a32b6d19f1714bbf6357292f38008fba Mon Sep 17 00:00:00 2001
From: Diedra Rater <diedra.rater@gmail.com>
Date: Mon, 29 Aug 2022 08:23:45 -0700
Subject: [PATCH] chore(clickable-style): make transition target more specific

---
 src/components/ClickableStyle/ClickableStyle.module.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css
index b874f552f..8aaeeb584 100644
--- a/src/components/ClickableStyle/ClickableStyle.module.css
+++ b/src/components/ClickableStyle/ClickableStyle.module.css
@@ -22,10 +22,17 @@
   border-radius: var(--eds-border-radius-md);
   cursor: pointer;
   text-decoration: none; /* 4 */
-  transition: all var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--eds-anim-fade-quick);
+  transition-timing-function: var(--eds-anim-ease);
 
   svg {
     --icon-size-default: 2em; /* 5 */
+    transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+    @media screen and (prefers-reduced-motion) {
+      transition: none;
+    }
   }
 
   &:focus {