Small hover animations

src/components/screens/Characters.vue

@@ -266,6 +266,7 @@ function create() {
         display: flex;
         gap: 15px;
         align-items: center;
+        transition: ease-in-out gap 0.2s;
 
         span {
           margin: auto;
@@ -280,6 +281,10 @@ function create() {
           background-color: rgba($cyan, 0.5);
           cursor: not-allowed;
         }
+
+        &:hover {
+          gap: 20px;
+        }
       }
     }
   }

src/components/utilities/Modal.vue

@@ -139,7 +139,7 @@ onUnmounted(() => {
 
       &:hover {
         transform: rotate(180deg);
-        transition: ease-in-out 0.3s;
+        transition: ease-in-out transform 0.3s;
       }
     }
   }