Add variables for timing

components/CharacterUnit/index.scss

@@ -69,7 +69,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
     height: auto;
     width: 100%;
     -webkit-user-select: none; /* Safari */
@@ -86,6 +86,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }

components/SummonUnit/index.scss

@@ -42,7 +42,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);
@@ -55,6 +55,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }

components/WeaponUnit/index.scss

@@ -122,7 +122,7 @@
     margin-bottom: calc($unit / 4);
     overflow: hidden;
     position: relative;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);
@@ -169,6 +169,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }

styles/variables.scss

@@ -307,3 +307,7 @@ $item-corner: $unit-half;
 // Shadows
 $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
 $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
+
+// Durations
+$duration-color-fade: 0.24s;
+$duration-zoom: 0.18s;