refactor button style

packages/app/src/components/BookmarkButtons.module.scss

@@ -1,13 +1,18 @@
 @use '~/styles/bootstrap/init' as bs;
 
 .btn-bookmark {
-  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: bs.$orange;
+  :global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
+    box-shadow: none !important;
   }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
+
+  &:global {
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: bs.$orange;
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
   }
-  box-shadow: none !important;
 }

packages/app/src/components/LikeButtons.module.scss

@@ -1,13 +1,17 @@
 @use '~/styles/bootstrap/init' as bs;
 
 .btn-like {
-  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten(bs.$red, 15%);
+  :global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
+    box-shadow: none !important;
   }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
+  &:global {
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$red, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
   }
-  box-shadow: none !important;
 }