feat(styles/components): button styles

Author: MM25Zamanian

packages/styles/src/components/button.css

@@ -0,0 +1,40 @@
+@layer components {
+  .gecut-button {
+    &.elevated {
+      @apply text-primary bg-surfaceContainerLow elevation-1 state-primary hover:elevation-2 focus:elevation-1 disabled:opacity-35;
+    }
+    &.filled {
+      @apply text-onPrimary bg-primary elevation-0 state-onPrimary hover:elevation-2 focus:elevation-1 disabled:opacity-15;
+    }
+    &.filled-tonal {
+      @apply text-onSecondaryContainer bg-secondaryContainer elevation-0 state-onSecondaryContainer hover:elevation-2 focus:elevation-1 disabled:opacity-25;
+    }
+    &.outlined {
+      @apply text-primary bg-transparent border border-outline state-primary disabled:opacity-60;
+    }
+    &.text {
+      @apply text-primary bg-transparent state-primary disabled:opacity-60;
+    }
+
+    & &-loader {
+      @apply absolute inset-0 flex justify-center items-center transition-opacity duration-300 opacity-0;
+    }
+
+    & &-body {
+      @apply flex items-center justify-center h-full w-full gap-2 transition-opacity duration-300 opacity-100;
+    }
+
+    &[loading] {
+      .gecut-button-loader {
+        @apply opacity-100;
+      }
+      .gecut-button-body {
+        @apply opacity-0;
+      }
+
+      @apply cursor-default pointer-events-none;
+    }
+
+    @apply relative rounded-full h-10 px-6 cursor-pointer focus-ring disabled:cursor-default disabled:pointer-events-none;
+  }
+}