fix some bugs with ::after and ::before

Author: bjohansebas

apps/site/components/Common/Button/index.module.css

@@ -1,12 +1,12 @@
 @reference "../../../styles/index.css";
 
 .button {
-  @apply relative
+  @apply px-4.5
+    relative
     inline-flex
     items-center
     justify-center
     gap-2
-    px-4.5
     py-2.5
     text-center
     font-semibold
@@ -47,12 +47,12 @@
   }
 
   &.primary {
-    @apply rounded-sm
+    @apply shadow-xs
+      rounded-sm
       border
       border-green-600
       bg-green-600
-      text-white
-      shadow-xs;
+      text-white;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-green-700
@@ -97,19 +97,24 @@
   }
 
   &.special {
-    @apply rounded-lg
+    @apply shadow-xs
+      before:bg-gradient-glow-backdrop
+      rounded-lg
       border
       border-green-600/30
       bg-green-600/10
       text-white
-      shadow-xs;
+      after:bg-gradient-to-r
+      after:from-green-600/0
+      after:via-green-600
+      after:to-green-600/0
+      after:content-[''];
 
     &::before {
-      @apply bg-gradient-glow-backdrop
-        absolute
-        top-0
-        right-0
+      @apply absolute
         left-0
+        right-0
+        top-0
         -z-10
         mx-auto
         h-full
@@ -121,16 +126,11 @@
     &::after {
       @apply absolute
         -top-px
-        right-0
         left-0
+        right-0
         mx-auto
         h-px
-        w-2/5
-        bg-gradient-to-r
-        from-green-600/0
-        via-green-600
-        to-green-600/0
-        content-[''];
+        w-2/5;
     }
 
     &[aria-disabled='true'] {

apps/site/components/Common/GlowingBackdrop/index.module.css

@@ -2,12 +2,14 @@
 
 .glowingBackdrop {
   @apply absolute
-    top-0
     left-0
+    top-0
     -z-10
     size-full
     opacity-50
-    md:opacity-100;
+    after:bg-green-300
+    md:opacity-100
+    dark:after:bg-green-700;
 
   &::after {
     @apply absolute
@@ -16,10 +18,8 @@
       aspect-square
       w-[300px]
       rounded-full
-      bg-green-300
       blur-[120px]
-      content-['']
-      dark:bg-green-700;
+      content-[''];
   }
 
   svg {