From 4d07735cd5d579c3be79f02afa88d525ab2d5cdb Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 30 Jun 2025 14:18:14 -0500
Subject: [PATCH] Organize button variants

---
 app/assets/stylesheets/buttons.css | 33 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index bcec84ad1..34ceab7f4 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -31,23 +31,6 @@
       text-align: start;
     }
 
-    /* Circle buttons */
-    &.btn--circle,
-    &[aria-label]:where(:has(.icon)),
-    &:where(:has(.for-screen-reader):has(.icon)) {
-      --btn-padding: 0;
-
-      aspect-ratio: 1;
-      block-size: var(--btn-size);
-      display: grid;
-      inline-size: var(--btn-size);
-      place-items: center;
-
-      > * {
-        grid-area: 1/1;
-      }
-    }
-
     /* With radios and checkboxes */
     &:has(input[type=radio]),
     &:has(input[type=checkbox]) {
@@ -121,6 +104,22 @@
     --outline-color: var(--color-link);
   }
 
+  .btn--circle,
+  .btn[aria-label]:where(:has(.icon)),
+  .btn:where(:has(.for-screen-reader):has(.icon)) {
+    --btn-padding: 0;
+
+    aspect-ratio: 1;
+    block-size: var(--btn-size);
+    display: grid;
+    inline-size: var(--btn-size);
+    place-items: center;
+
+    > * {
+      grid-area: 1/1;
+    }
+  }
+
   .btn--negative {
     --btn-background: var(--color-negative);
     --btn-border-color: var(--color-canvas);