From e71652303a66f09b1866c2be4227ec8a713e6099 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Fri, 5 Nov 2021 22:45:11 +0100
Subject: [PATCH] Add gray variant to button circle

---
 src/components/molecules/PosterCart.svelte |  2 +-
 src/style/atoms/_button-circle.scss        | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/PosterCart.svelte b/src/components/molecules/PosterCart.svelte
index 39951c6..d142c1a 100644
--- a/src/components/molecules/PosterCart.svelte
+++ b/src/components/molecules/PosterCart.svelte
@@ -14,7 +14,7 @@
     </div>
     <div class="poster-cart__right">
         <div class="remove">
-            <ButtonCircle size="tiny">
+            <ButtonCircle size="tiny" color="gray">
                 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
                 </svg>
diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
index 4ffcbac..2a39811 100644
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -72,7 +72,6 @@
     &--tiny {
         height: 24px;
         width: 24px;
-        background-color: #F2F2F2;
 
         img, svg {
             width: 8px;
@@ -106,4 +105,13 @@
     &--purple {
         background-color: $color-primary-tertiary20;
     }
+
+    // Gray color
+    &--gray {
+        background-color: #F2F2F2;
+
+        &:hover {
+            background-color: #D2D2D2;
+        }
+    }
 }
\ No newline at end of file