From 39da77cf4c3c3f387b7144f24a661ee66db8cbbd Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Thu, 6 Jan 2022 11:16:23 +0100
Subject: [PATCH] Style for the ghost button has been changed

---
 scss/_btn.scss                 | 28 +++++++++++++++++++++++++
 src/components/GhostButton.vue | 37 ++--------------------------------
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/scss/_btn.scss b/scss/_btn.scss
index e7e0ad4..d2b6a0f 100644
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -75,3 +75,31 @@ $btn-colors: (
   }
   @content;
 }
+
+@mixin ghost-button($has-icon: false) {
+  @include button($has-icon: $has-icon);
+
+  position: relative;
+  font-size: 1.2em;
+  border: unset;
+
+  &:hover {
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $dark-gray;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
+}
diff --git a/src/components/GhostButton.vue b/src/components/GhostButton.vue
index 9f078aa..737be06 100644
--- a/src/components/GhostButton.vue
+++ b/src/components/GhostButton.vue
@@ -19,42 +19,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$btn-gray-color: #4f4f4f;
+@import "scss/btn";
 
 .btn {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  background-color: transparent;
-  color: $btn-gray-color;
-  font-size: 1.2em;
-  border: unset;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    &::after {
-      width: 98%;
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 auto;
-    width: 30%;
-    height: 2px;
-    background-color: $btn-gray-color;
-    transform: translateY(2px);
-    transition: width .3s linear;
-  }
+  @include ghost-button();
 }
 </style>