refactor(buttons): add a tertiary kind (previously links styles)

1 files changed, 14 insertions, 40 deletions

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 5fe423e..bc1597c 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -7,6 +7,19 @@
   font-size: var(--font-size-md);
 }
 
+.left {
+  margin-right: auto;
+}
+
+.right {
+  margin-left: auto;
+}
+
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .primary {
   margin: auto;
   padding: var(--spacing-2xs) var(--spacing-md);
@@ -22,19 +35,6 @@
   text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
   transition: all 0.25s ease-in-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:hover,
   &:focus {
     background: var(--color-primary-light);
@@ -68,19 +68,6 @@
   font-weight: 600;
   transition: all 0.35s ease-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:disabled {
     color: var(--color-fg-light);
     border-color: var(--color-border);
@@ -117,7 +104,7 @@
   }
 }
 
-.link {
+.tertiary {
   display: flex;
   flex-flow: row wrap;
   place-items: center;
@@ -139,19 +126,6 @@
   text-decoration: underline transparent 0;
   transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:hover,
   &:focus {
     border-color: var(--color-primary-light);