From 7b73ac59523ea82f3cdd6dbff76a302d5e113153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 2 Oct 2021 20:38:30 +0200
Subject: [PATCH] Add hover effect on BoxCTA component

---
 src/style/atoms/_box-cta.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/style/atoms/_box-cta.scss b/src/style/atoms/_box-cta.scss
index 52b2080..1b423db 100644
--- a/src/style/atoms/_box-cta.scss
+++ b/src/style/atoms/_box-cta.scss
@@ -8,6 +8,8 @@
     background-color: $color-primary-tertiary20;
     border-radius: 12px;
     text-decoration: none;
+    box-shadow: none;
+    transition: background-color 0.8s var(--ease-quart), box-shadow 1.0s var(--ease-quart);
 
     @include bp (sm) {
         flex-direction: column;
@@ -20,6 +22,7 @@
         width: 36px;
         height: 36px;
         flex-shrink: 0;
+        transition: transform 0.6s var(--ease-quart);
 
         @include bp (sm) {
             margin: auto 0;
@@ -45,4 +48,15 @@
             text-align: center;
         }
     }
+
+    // Hover
+    &:hover {
+        $shadow-color: rgba(0, 0, 0, 0.05);
+        background-color: #77357b;
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+
+        .icon {
+            transform: translate3d(0, -3px, 0);
+        }
+    }
 }
\ No newline at end of file