From 560e9d9d8ff5e51d6a6e006fdf112a74ca3409a2 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 1 Jul 2025 15:07:53 -0500
Subject: [PATCH] Separate toggle buttons from main component

---
 app/assets/stylesheets/buttons.css | 75 +++++++++++++++---------------
 app/assets/stylesheets/layout.css  |  2 +
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 30236f833..e8408855d 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -17,6 +17,7 @@
     justify-content: center;
     padding: var(--btn-padding, 0.5em 1.1em);
     pointer-events: auto;
+    position: relative;
     transition:
       background-color var( --transition),
       border var( --transition),
@@ -25,44 +26,6 @@
       opacity var( --transition),
       scale var( --transition);
 
-    /* With radios and checkboxes */
-    &:has(input[type=radio]),
-    &:has(input[type=checkbox]) {
-      position: relative;
-
-      :is(input[type=radio]),
-      :is(input[type=checkbox]) {
-        --hover-size: 0;
-
-        appearance: none;
-        border-radius: var(--btn-border-radius);
-        cursor: pointer;
-        display: flex;
-        inset: 0;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-
-      .checked {
-        display: none;
-      }
-    }
-
-    &:has(input:checked)  {
-      --btn-background: var(--color-ink);
-      --btn-color: var(--color-ink-inverted);
-      --outline-color: var(--color-ink);
-
-      .checked {
-        display: block;
-      }
-    }
-
     &[disabled],
     &:has([disabled]),
     [disabled] &[type=submit],
@@ -154,6 +117,42 @@
     --outline-color: var(--color-ink);
   }
 
+  /* Toggleable buttons
+  /* ------------------------------------------------------------------------ */
+
+  .btn {
+    :is(input[type=radio], input[type=checkbox]) {
+      --hover-size: 0;
+
+      appearance: none;
+      border-radius: var(--btn-border-radius);
+      cursor: pointer;
+      display: flex;
+      inset: 0;
+      margin: 0;
+      padding: 0;
+      position: absolute;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    .checked {
+      display: none;
+    }
+
+    &:has(input:checked)  {
+      --btn-background: var(--color-ink);
+      --btn-color: var(--color-ink-inverted);
+      --outline-color: var(--color-ink);
+
+      .checked {
+        display: block;
+      }
+    }
+  }
+
   /* Button groups
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 9bf4d4953..40de97e09 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -92,7 +92,9 @@
       display: none;
     }
   }
+}
 
+@layer components {
   .skip-navigation {
     --left-offset: -999em;