💄 Fix conflicts regarding the generated CSS class names

src/components/button.scss

@@ -1,6 +1,6 @@
 @import "../_base.scss"
 
-.root {
+%button {
     height: 100%;
     aspect-ratio: 3.5;
 
@@ -18,27 +18,31 @@
     }
 }
 
-.register {
-    @extend .root;
+.register-button {
+    @extend %button;
 
     background-color: $color-ternary-90;
-}
-.register:hover {
-    background-color: $color-ternary-80;
-}
-.register:active {
-    background-color: $color-ternary-70;
+
+    &:hover {
+        background-color: $color-ternary-80;
+    }
+
+    &:active {
+        background-color: $color-ternary-70;
+    }
 }
 
 
-.login {
-    @extend .root;
+.login-button {
+    @extend %button;
 
     background-color: $color-secondary-90;
-}
-.login:hover {
-    background-color: $color-secondary-80;
-}
-.login:active {
-    background-color: $color-secondary-70;
+
+    &:hover {
+        background-color: $color-secondary-80;
+    }
+
+    &:active {
+        background-color: $color-secondary-70;
+    }
 }