Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

scss/_button-group.scss

@@ -10,15 +10,17 @@
   > .btn {
     position: relative;
     flex: 1 1 auto;
+  }
 
-    // Bring the hover, focused, and "active" buttons to the front to overlay
-    // the borders properly
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-      z-index: 1;
-    }
+  // Bring the hover, focused, and "active" buttons to the front to overlay
+  // the borders properly
+  > .btn-toggle:checked + .btn,
+  > .btn-toggle:focus + .btn,
+  > .btn:hover,
+  > .btn:focus,
+  > .btn:active,
+  > .btn.active {
+    z-index: 1;
   }
 }
 
@@ -46,7 +48,11 @@
     @include border-right-radius(0);
   }
 
-  > .btn:not(:first-child),
+  // - Target second buttons which are not part of toggle buttons
+  // - Target third or more child
+  // - Target buttons in a button group
+  > :not(.btn-toggle) + .btn,
+  > .btn:nth-child(n + 3),
   > .btn-group:not(:first-child) > .btn {
     @include border-left-radius(0);
   }
@@ -132,28 +138,3 @@
     @include border-top-radius(0);
   }
 }
-
-
-// Checkbox and radio options
-//
-// In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
-// `display: none;` or `visibility: hidden;` as that also hides the popover.
-// Simply visually hiding the inputs via `opacity` would leave them clickable in
-// certain cases which is prevented by using `clip` and `pointer-events`.
-// This way, we ensure a DOM element is visible to position the popover from.
-//
-// See https://github.com/twbs/bootstrap/pull/12794 and
-// https://github.com/twbs/bootstrap/pull/14559 for more information.
-
-.btn-group-toggle {
-  > .btn,
-  > .btn-group > .btn {
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0, 0, 0, 0);
-      pointer-events: none;
-    }
-  }
-}

scss/_buttons.scss

@@ -24,12 +24,14 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
-  &:focus,
-  &.focus {
+  .btn-toggle:focus + &,
+  &:focus {
     outline: 0;
     box-shadow: $btn-focus-box-shadow;
   }
 
+  .btn-toggle:checked + &,
+  .btn-toggle:active + &,
   &:active,
   &.active {
     @include box-shadow($btn-active-box-shadow);
@@ -81,8 +83,7 @@
     text-decoration: $link-hover-decoration;
   }
 
-  &:focus,
-  &.focus {
+  &:focus {
     text-decoration: $link-hover-decoration;
   }
 

scss/forms/_form-check.scss

@@ -134,3 +134,9 @@
   display: inline-block;
   margin-right: $form-check-inline-margin-right;
 }
+
+.btn-toggle {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}

scss/mixins/_buttons.scss

@@ -25,8 +25,8 @@
     border-color: $hover-border;
   }
 
-  &:focus,
-  &.focus {
+  .btn-toggle:focus + &,
+  &:focus {
     color: $hover-color;
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -38,6 +38,8 @@
     }
   }
 
+  .btn-toggle:checked + &,
+  .btn-toggle:active + &,
   &:active,
   &.active,
   .show > &.dropdown-toggle {
@@ -83,11 +85,13 @@
     border-color: $active-border;
   }
 
-  &:focus,
-  &.focus {
+  .btn-toggle:focus + &,
+  &:focus {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
+  .btn-toggle:checked + &,
+  .btn-toggle:active + &,
   &:active,
   &.active,
   &.dropdown-toggle.show {