1 files changed, 70 insertions, 0 deletions
diff --git a/linux/home/.config/ags/style/mixins/button.scss b/linux/home/.config/ags/style/mixins/button.scss
new file mode 100644
index 0000000..79ec275
--- /dev/null
+++ b/linux/home/.config/ags/style/mixins/button.scss
@@ -0,0 +1,70 @@
+@mixin button-focus() {
+    box-shadow: inset 0 0 0 $border-width $primary-bg;
+    background-color: $hover-bg;
+    color: $hover-fg;
+}
+
+@mixin button-hover() {
+    box-shadow: inset 0 0 0 $border-width $border-color;
+    background-color: $hover-bg;
+    color: $hover-fg;
+}
+
+@mixin button-active() {
+    box-shadow: inset 0 0 0 $border-width $border-color;
+    background-image: $active-gradient;
+    background-color: $primary-bg;
+    color: $primary-fg;
+}
+
+@mixin button-disabled() {
+    box-shadow: none;
+    background-color: transparent;
+    color: transparentize($fg, 0.7);
+}
+
+@mixin button($flat: false, $reactive: true, $radius: $radius, $focusable: true) {
+    all: unset;
+    transition: $transition;
+    border-radius: $radius;
+    color: $fg;
+
+    @if $flat {
+        background-color: transparent;
+        background-image: none;
+        box-shadow: none;
+    }
+
+    @else {
+        background-color: $widget-bg;
+        box-shadow: inset 0 0 0 $border-width $border-color;
+    }
+
+    @if $reactive {
+        @if $focusable {
+            &:focus {
+                @include button-focus;
+            }
+        }
+
+        &:hover {
+            @include button-hover;
+        }
+
+        &:active,
+        &.on,
+        &.active,
+        &:checked {
+            @include button-active;
+
+            &:hover {
+                box-shadow: inset 0 0 0 $border-width $border-color,
+                    inset 0 0 0 99px $hover-bg;
+            }
+        }
+    }
+
+    &:disabled {
+        @include button-disabled;
+    }
+}