From 8972896d9b05a4288e7f56e6e61c9dad5e4be211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Tue, 31 May 2022 17:43:33 +0200
Subject: [PATCH] Change hover styles

---
 src/components/common/card/card.module.scss     | 13 +++++++++++++
 src/components/primitives/link/index.tsx        |  7 +------
 src/components/primitives/link/link.module.scss |  9 ++++++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss
index 0733940..bd6b304 100644
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@@ -15,6 +15,19 @@
   text-decoration: none;
   color: unset;
 
+  &:hover {
+    a {
+      &::before {
+        opacity: 1;
+        transition: all var(--duration-normal) var(--ease);
+      }
+
+      svg:nth-child(1) {
+        transform: rotate(45deg) scale(1.15);
+      }
+    }
+  }
+
   &-blog {
     border-bottom: none;
 
diff --git a/src/components/primitives/link/index.tsx b/src/components/primitives/link/index.tsx
index b64c5e6..a52c617 100644
--- a/src/components/primitives/link/index.tsx
+++ b/src/components/primitives/link/index.tsx
@@ -49,12 +49,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           {...aProps}
         >
           {children}
-          {variant === 'default' &&
-            (isExternal ? (
-              <ArrowLink className={s['icon']} />
-            ) : (
-              <ArrowLink className={clsx(s['icon'], s['icon--rotated'])} />
-            ))}
+          {variant === 'default' && <ArrowLink className={s['icon']} />}
         </a>
       </NextLink>
     )
diff --git a/src/components/primitives/link/link.module.scss b/src/components/primitives/link/link.module.scss
index 12e22c2..ff0f365 100644
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@@ -40,8 +40,9 @@
       left: 0;
       right: 0;
       opacity: 0;
-      width: 100%;
-      margin: auto;
+      width: 0%;
+
+      // margin: auto;
       background-image: repeating-linear-gradient(
           0deg,
           currentcolor,
@@ -80,6 +81,7 @@
       animation: border var(--duration-normal) linear infinite;
       content: '';
       pointer-events: none;
+      transition: all var(--duration-normal) var(--ease);
     }
 
     &::after {
@@ -102,10 +104,11 @@
       }
 
       &::before {
+        width: 100%;
         opacity: 1;
 
         // width: 90%;
-        transition: opacity var(--duration-normal) var(--ease);
+        transition: all var(--duration-normal) var(--ease);
       }
     }
   }