Separate toggle buttons from main component

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
   /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/layout.css

@@ -92,7 +92,9 @@
       display: none;
     }
   }
+}
 
+@layer components {
   .skip-navigation {
     --left-offset: -999em;