diff --git a/docs/_data/button-groups.json b/docs/_data/button-groups.json
index 9567ab1976..4c532dff7a 100755
--- a/docs/_data/button-groups.json
+++ b/docs/_data/button-groups.json
@@ -6,9 +6,9 @@
       "description": "Base button group style."
     },
     {
-      "class": ".s-btn-group--container",
-      "applies": "form",
-      "description": "When required to wrap one of our buttons within a button group in a form, apply this class to the form to maintain the intended visuals."
+      "class": ".s-btn-group--radio",
+      "applies": ".s-btn-group",
+      "description": "Applies styling to button groups built using radio and label elements."
     }
   ]
 }
\ No newline at end of file
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 126f8fb7d8..fa976272d1 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -44,13 +44,13 @@
 
         <ol class="s-topbar--content ml0 sm:fl1 overflow-hidden">
             <li class="d-none sm:d-inline-flex ml-auto">
-                <button class="s-topbar--item s-btn__unset c-pointer p8 ml-auto js-search-btn">
+                <button class="s-topbar--item s-btn s-btn__unset c-pointer p8 ml-auto js-search-btn">
                     {% icon "Search", "js-search-icon" %}
                     {% icon "Clear", "d-none js-search-close-icon" %}
                 </button>
             </li>
             <li>
-                <button type="button" class="s-topbar--item s-btn__unset c-pointer stacks-theme-button"
+                <button type="button" class="s-topbar--item s-btn s-btn__unset c-pointer stacks-theme-button"
                     aria-controls="theming-popover"
                     data-controller="s-popover"
                     data-action="s-popover#toggle"
diff --git a/docs/_includes/layouts/home.html b/docs/_includes/layouts/home.html
index 87d10a4ece..2d19486ba1 100644
--- a/docs/_includes/layouts/home.html
+++ b/docs/_includes/layouts/home.html
@@ -154,7 +154,7 @@
                     {% icon "Search", "s-input-icon s-input-icon__search" %}
                 </div>
 
-                <button class="s-btn__unset c-pointer flex--item stacks-theme-button stacks-theme-button__home"
+                <button class="s-btn s-btn__unset c-pointer flex--item stacks-theme-button stacks-theme-button__home"
                         aria-controls="theming-popover"
                         data-controller="s-popover"
                         data-action="s-popover#toggle"
diff --git a/docs/product/components/button-groups.html b/docs/product/components/button-groups.html
index fb6b8e1678..708b826033 100644
--- a/docs/product/components/button-groups.html
+++ b/docs/product/components/button-groups.html
@@ -62,25 +62,25 @@
 <div class="s-btn-group">
     <button class="s-btn s-btn__muted s-btn__outlined" role="button">Newest</button>
     <button class="s-btn s-btn__muted s-btn__outlined" role="button">Frequent</button>
-    <form class="s-btn-group--container">
+    <form>
         <button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button" aria-current="true">Votes</button>
     </form>
     <button class="s-btn s-btn__muted s-btn__outlined" role="button">Active</button>
-    <form class="s-btn-group--container">
+    <form>
         <button class="s-btn s-btn__muted s-btn__outlined" role="button">Unanswered</button>
     </form>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
-            <div class="s-btn-group js-btn-group">
-                <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Newest</button>
-                <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Frequent</button>
-                <form class="s-btn-group--container">
-                    <button class="s-btn s-btn__muted s-btn__outlined is-selected js-btn-group-item" role="button" aria-current="true">Votes</button>
+            <div class="s-btn-group">
+                <button class="s-btn s-btn__muted s-btn__outlined" role="button">Newest</button>
+                <button class="s-btn s-btn__muted s-btn__outlined" role="button">Frequent</button>
+                <form>
+                    <button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button" aria-current="true">Votes</button>
                 </form>
-                <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Active</button>
-                <form class="s-btn-group--container">
-                    <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Unanswered</button>
+                <button class="s-btn s-btn__muted s-btn__outlined" role="button">Active</button>
+                <form>
+                    <button class="s-btn s-btn__muted s-btn__outlined" role="button">Unanswered</button>
                 </form>
             </div>
         </div>
@@ -123,13 +123,13 @@
                         <span class="s-btn--number">197</span>
                     </span>
                 </button>
-                <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">
+                <button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item  s-btn__dropdown" role="button">
                     Inactive
                     <span class="s-btn--badge">
                         <span class="s-btn--number">37</span>
                     </span>
                 </button>
-                <button class="s-btn s-btn__muted s-btn__outlined is-selected js-btn-group-item" role="button">
+                <button class="s-btn s-btn__muted s-btn__outlined is-selected js-btn-group-item" role="button" aria-current="true">
                     All
                     <span class="s-btn--badge">
                         <span class="s-btn--number">234</span>
@@ -140,6 +140,49 @@
     </div>
 </section>
 
+<section class="stacks-section">
+    {% header "h2", "Radio" %}
+    <p class="stacks-copy">
+        Button groups can be implemented using radio elements with the modifier class <code class="stacks-code">.s-btn-group--radio</code>. This modifier class assumes all buttons are styled <code class="stacks-code">label</code> elements.
+    </p>
+    <div class="stacks-preview">
+{% highlight html %}
+<div class="s-btn-group">
+    <div class="s-btn-group s-btn-group--radio">
+        <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-1" />
+        <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-1">
+            Active
+        </label>
+        <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-2" />
+        <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-2">
+            Inactive
+        </label>
+        <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-3" checked />
+        <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-3">
+            All
+        </label>
+    </div>
+</div>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="s-btn-group s-btn-group--radio">
+                <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-1" />
+                <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-1">
+                    Active
+                </label>
+                <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-2" />
+                <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-2">
+                    Inactive
+                </label>
+                <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-3" checked />
+                <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-3">
+                    All
+                </label>
+            </div>
+        </div>
+    </div>
+</section>
+
 <script>
     document.querySelectorAll('.js-btn-group-item').forEach(buttonGroup => {
         buttonGroup.addEventListener('click', e => {
diff --git a/docs/product/components/buttons.html b/docs/product/components/buttons.html
index 3b6d25ea3c..5d04ad6423 100644
--- a/docs/product/components/buttons.html
+++ b/docs/product/components/buttons.html
@@ -369,18 +369,18 @@
                                     </div>
                                 </td>
                                 <td class="va-middle ta-center px4">
-                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %} {{ btn.class }}" type="button">
-                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
+                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %}" type="button">
+                                        Active <span class="{{ btn.class }}"><span class="s-btn--number">198</span></span>
                                     </button>
                                 </td>
                                 <td class="va-middle ta-center px4">
-                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %} {{ btn.class }} is-selected" type="button" aria-pressed="true">
-                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
+                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %} is-selected" type="button" aria-pressed="true">
+                                        Active <span class="{{ btn.class }}"><span class="s-btn--number">198</span></span>
                                     </button>
                                 </td>
                                 <td class="va-middle ta-center px4">
-                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %} {{ btn.class }}" type="button" disabled>
-                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
+                                    <button class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %}" type="button" disabled>
+                                        Active <span class="{{ btn.class }}"><span class="s-btn--number">198</span></span>
                                     </button>
                                 </td>
                             </tr>
diff --git a/lib/css/atomic/colors.less b/lib/css/atomic/colors.less
index a95f3da9a2..dae96ec24f 100644
--- a/lib/css/atomic/colors.less
+++ b/lib/css/atomic/colors.less
@@ -7,7 +7,7 @@
 //  visit https://stackoverflow.design/
 //
 //  ============================================================================
-//  UTLITY OVERRIDES
+//  UTILITY OVERRIDES
 //  Instead of re-adding colors to unique class names, use these atomic classes
 //  for text and background colors
 //  ============================================================================
diff --git a/lib/css/components/button-groups.less b/lib/css/components/button-groups.less
index 5462bf5149..c61e0dd7fd 100644
--- a/lib/css/components/button-groups.less
+++ b/lib/css/components/button-groups.less
@@ -1,90 +1,80 @@
 .s-btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1px; // Compensate for buttons having a margin bottom of -1px to account for row wrapping
-
-    .s-btn {
-        margin-bottom: -1px; // When wrapping we need to account for the border
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        .s-btn {
+            &.s-btn__dropdown {
+                padding-right: 1.2em;
 
-        // If it isn't the last button, we should slide the button over to account for border thickness
-        &:not(:last-child) {
-            margin-right: -1px;
-        }
+                &:after {
+                    right: 0.4em;
+                }
+            }
 
-        // We don't want border-radii on interior buttons
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
+            padding-left: 0.4em;
+            padding-right: 0.4em;
         }
+    }, @force-selector: true);
 
-        // Kill the right border radius on the first button
-        &:first-child:not(:only-child) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+    // VARIANTS
+    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
+    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
+        border-radius: 0;
+    }
 
-        // Kill the left border radius on the last button
-        &:last-child:not(:only-child) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
+    &:not(&--radio) .s-btn:first-child:not(:only-child),
+    &&--radio .s-btn:first-of-type:not(:last-of-type) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-        // When the button is active or selected, it should pop above its siblings
-        &.is-selected {
-            z-index: var(--zi-selected);
-        }
+    &:not(&--radio) .s-btn:last-child:not(:only-child),
+    &&--radio .s-btn:last-of-type:not(:first-of-type) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 
-        .highcontrast-mode({
-            &.is-selected {
-                background-color: var(--black-400);
-                color: var(--white);
+    &:not(&--radio) .s-btn:not(:last-child),
+    &&--radio .s-btn:not(:last-of-type) {
+        margin-right: calc(var(--su-static1) * -1);
+    }
 
-                .s-btn--number {
-                    color: var(--black);
-                }
+    // CHILD ELEMENTS
+    form {
+        &:not(:first-child):not(:last-child) {
+            .s-btn {
+                border-radius: 0;
             }
-        });
-
-        &:active {
-            z-index: var(--zi-active);
         }
-
-        #stacks-internals #screen-sm({
-            padding-left: 0.4em;
-            padding-right: 0.4em;
-        }, @force-selector: true);
-    }
-
-    #stacks-internals #screen-sm({
-        .s-btn.s-btn__dropdown {
-            padding-right: 1.2em;
-
-            &:after {
-                right: 0.4em;
+        &:last-child:not(:only-child) {
+            .s-btn:not(:last-child) {
+                border-radius: 0;
+            }
+        }
+        &:first-child:not(:only-child) {
+            .s-btn:not(:first-child) {
+                border-radius: 0;
             }
         }
-    }, @force-selector: true);
 
-    .s-btn-group--container {
         display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
+    }
 
-        .s-btn {
-            margin-right: -1px; // We should slide buttons over to account for border thickness
+    .s-btn {
+        &:active {
+            z-index: var(--zi-active);
         }
-
-        &:not(:first-child):not(:last-child) .s-btn {
-            border-radius: 0;
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
         }
 
-        &:first-child .s-btn {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            margin-left: 0;
-        }
-
-        &:last-child .s-btn {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
+        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
+        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
+
+    // STATIC COMPONENT STYLES
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
 }
diff --git a/lib/css/components/buttons.less b/lib/css/components/buttons.less
index e655764ed2..ce57d0dc15 100644
--- a/lib/css/components/buttons.less
+++ b/lib/css/components/buttons.less
@@ -1,634 +1,450 @@
-& {
-    .s-btn {
-        position: relative;
-        display: inline-block;
-        padding: 0.8em;
-        color: var(--theme-button-color);
-        border: 1px solid transparent;
-        border-radius: var(--br-sm);
-        background-color: transparent;
-        outline: none;
-        font-family: inherit;
-        font-size: var(--fs-body1);
-        font-weight: normal;
-        line-height: var(--lh-sm);
-        text-align: center;
+.s-btn {
+    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    --_bu-baw: var(--su-static1);
+    --_bu-bc: transparent;
+    --_bu-bg: transparent;
+    --_bu-br: var(--br-sm);
+    --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
+    --_bu-fc: var(--theme-button-color);
+    --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_bu-fs: var(--fs-body1);
+    --_bu-p: 0.8em;
+    // STATE AND INTERACTION CUSTOM PROPERTIES
+    --_bu-bc-selected: transparent;
+    --_bu-bg-active: var(--theme-button-active-background-color);
+    --_bu-bg-hover: var(--theme-button-hover-background-color);
+    --_bu-bg-selected: var(--theme-button-selected-background-color);
+    --_bu-fc-active: var(--theme-button-hover-color); // Note: hover color used here intentionally
+    --_bu-fc-hover: var(--theme-button-hover-color);
+    --_bu-fc-selected: var(--theme-button-selected-color);
+    // Filled
+    --_bu-filled-bc: var(--theme-button-filled-border-color);
+    --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
+    --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
+    --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
+    --_bu-filled-bg: var(--theme-button-filled-background-color);
+    --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
+    --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
+    --_bu-filled-fc: var(--theme-button-filled-color);
+    --_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
+    --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
+    --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
+    // Outlined
+    --_bu-outlined-bc: var(--theme-button-outlined-border-color);
+    --_bu-outlined-bg: var(--theme-button-outlined-background-color);
+    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
+    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
+    --_bu-outlined-fc-selected: var(--theme-button-selected-color);
+    // CHILD COMPONENT CUSTOM PROPERTIES
+    --_bu-badge-o: 0.5;
+    --_bu-dropdown-bw: var(--su-static4);
+    --_bu-number-fc: var(--white);
+    --_bu-number-fc-selected: var(--_bu-number-fc);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        --_bu-bs: none;
+    });
+    .highcontrast-mode({
+        --_bu-bc: currentColor;
+        --_bu-filled-bc: var(--_bu-bc);
+        --_bu-outlined-bc: var(--_bu-bc);
+        --_bu-bc-selected: var(--_bu-bc);
+        --_bu-badge-o: 0.8;
+    });
+
+    // STATES
+    &[disabled],
+    &[aria-disabled="true"] {
+        --_bu-bs: none !important;
+        opacity: var(--_o-disabled-static);
+        pointer-events: none;
         text-decoration: none;
-        cursor: pointer;
-        user-select: none;
-
-        .highcontrast-mode({
-            border-color: currentColor;
-
-            &:not(.s-btn__link):not(.s-btn__unset) {
-                text-decoration: none;
-            }
-        });
-
-        button &,
-        button[type="submit"] &,
-        button[type="reset"] & {
-            // Guard against the difference in configurable resets
-            // Eric Meyer's reset does not include this, while normalize.css does
-            // Correct the inability to style buttons in iOS and Safari.
-            -webkit-appearance: button;
-        }
-
-        // Override for buttons having inline-block by default
-        &.grid {
-            display: flex;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--theme-button-hover-color);
-            background: var(--theme-button-hover-background-color);
-            text-decoration: none;
-        }
-
-        &:active {
-            background: var(--theme-button-active-background-color);
-        }
-
-        &:focus {
-            outline: none;
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-
-        &[disabled],
-        &[aria-disabled="true"] {
-            opacity: var(--_o-disabled-static);
-            pointer-events: none;
-            box-shadow: none !important;
-        }
-
-        &.is-selected {
-            color: var(--theme-button-selected-color);
-            background: var(--theme-button-selected-background-color);
-            box-shadow: none;
-
-            &:focus {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-            }
-        }
-
-        &.s-btn__dropdown {
-            padding-right: 2em;
-
-            &:after {
-                content: "";
-                position: absolute;
-                z-index: var(--zi-active);
-                top: calc(50% - 2px);
-                right: 0.8em;
-                border-style: solid;
-                border-width: var(--su-static4);
-                border-top-width: var(--su-static4);
-                border-bottom-width: 0;
-                border-color: currentColor transparent;
-                pointer-events: none;
-            }
+    }
+    button &,
+    button[type="submit"] &,
+    button[type="reset"] & {
+        -webkit-appearance: button; // [1]
+    }
+    &.grid {
+        display: flex; // Override &&__danger buttons having inline-block by default
+    }
+    &.is-loading {
+        .svg-icon:first-child {
+            margin-left: -23px;
+            opacity: 0; // [2]
         }
+    }
+    &.is-selected,
+    .s-btn-group.s-btn-group--radio &--radio:checked + & {
+        background-color: var(--_bu-bg-selected);
+        border-color: var(--_bu-bc-selected);
+        color: var(--_bu-fc-selected);
 
-        &.s-btn__xs {
-            padding: 0.6em;
-            font-size: var(--fs-fine);
-
-            &.s-btn__dropdown {
-                padding-right: 1.5em;
-
-                &:after {
-                    top: calc(50% - 2px);
-                    right: 0.6em;
-                    border-width: calc(var(--su-static4) - var(--su-static1));
-                    border-top-width: calc(var(--su-static4) - var(--su-static1));
-                    border-bottom-width: 0;
-                }
-            }
+        .s-btn--number {
+            color: var(--_bu-number-fc-selected);
         }
-
-        &.s-btn__sm {
-            font-size: var(--fs-caption);
-
-            &.s-btn__dropdown {
-                padding-right: 2.05em;
-            }
+        &.s-btn__filled { // this needs to live here to adapt to radio button-group
+            border-color: var(--_bu-filled-bc-selected);
+            background-color: var(--_bu-filled-bg-selected);
+            color: var(--_bu-filled-fc-selected);
         }
+        &.s-btn__outlined { // this needs to live here to adapt to radio button-group
+            border-color: var(--_bu-outlined-bc-selected);
+            background-color: var(--_bu-outlined-bg-selected);
+            color: var(--_bu-outlined-fc-selected);
 
-        &.s-btn__md {
-            padding: 0.7em;
-            border-radius: calc(var(--br-sm) + 1px);
-            font-size: var(--fs-body3);
-
-            &.s-btn__dropdown {
-                padding-right: 1.8em;
-
-                &:after {
-                    top: calc(50% - 2px);
-                    right: 0.7em;
-                    border-width: calc(var(--su-static4) + var(--su-static1));
-                    border-top-width: calc(var(--su-static4) + var(--su-static1));
-                    border-bottom-width: 0;
-                }
+            &.s-btn__muted {
+                .highcontrast-mode({
+                    --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
+                    --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
+                    --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
+                    --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
+                });
             }
         }
-
-        .s-btn--badge {
-            opacity: var(--_o-disabled);
-            display: inline-block;
-            border-radius: var(--br-sm);
-            padding: var(--su2) calc(var(--su4) - var(--su1));
-            font-size: var(--fs-caption);
-            line-height: var(--lh-xs);
-            background-color: currentColor;
-        }
-
-        .s-btn--number {
-            color: var(--white);
-        }
     }
-
-    .s-btn__primary:not(.is-selected) .s-btn--number,
-    .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
-        .dark-mode({ color: var(--white); });
-        .highcontrast-mode({ color: var(--black); });
+    &.is-selected:not(:focus),
+    .s-btn-group.s-btn-group--radio &--radio:checked:not(:focus) + & {
+        box-shadow: none;
     }
 
-    //  ============================================================================
-    //  $   DEFAULT (SECONDARY) STYLES
-    //  ============================================================================
-
-    //  --  Base Outline Style
-    //      Style which applies only a border.
-    //  ----------------------------------------------------------------------------
-    .s-btn__outlined {
-        border-color: var(--theme-button-outlined-border-color);
-
-        &.is-selected {
-            border-color: var(--theme-button-outlined-selected-border-color);
-        }
+    // MODIFIERS
+    &&__filled {
+        border-color: var(--_bu-filled-bc);
+        background-color: var(--_bu-filled-bg);
+        color: var(--_bu-filled-fc);
+    }
+    &&__outlined {
+        border-color: var(--_bu-outlined-bc);
+        background-color: var(--_bu-outlined-bg);
     }
 
-    //  --  Base Filled Style
-    //      Adds in background-colors, background-images, and/or box-shadows.
-    //  ----------------------------------------------------------------------------
-    .s-btn__filled {
-        color: var(--theme-button-filled-color);
-        background-color: var(--theme-button-filled-background-color);
-        border-color: var(--theme-button-filled-border-color);
-        box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
-
-        .dark-mode({
-            &:not(:focus) {
-                box-shadow: none;
-            }
-        });
-
-        &:hover,
+    // Resets
+    &&__link,
+    &&__unset {
         &:focus,
-        &:active {
-            color: var(--theme-button-filled-hover-color);
-            background-color: var(--theme-button-filled-hover-background-color);
-        }
-
-        &:active {
-            background-color: var(--theme-button-filled-active-background-color);
-            border-color: var(--theme-button-filled-active-border-color);
-            box-shadow: none;
-        }
-
-        &:focus {
-            .highcontrast-mode({
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-            });
+        &:focus-visible {
+            outline-style: auto;
         }
 
-        &.is-selected {
-            color: var(--theme-button-filled-selected-color);
-            background-color: var(--theme-button-filled-selected-background-color);
-            border-color: var(--theme-button-filled-selected-border-color);
-            box-shadow: none;
-        }
+        outline: initial;
     }
-
-    //  --  Muted Clear Style
-    //      Creates a gray button style.
-    //  ----------------------------------------------------------------------------
-    .s-btn__muted {
-        color: var(--black-500);
-
-        .highcontrast-mode({
-            &.s-btn__filled {
-                border-color: transparent;
-            }
-        });
-
+    &&__link {
+        --_bu-baw: 0;
+        --_bu-br: 0;
+        --_bu-bs: none;
+        --_bu-focus-ring: none;
+        --_bu-p: 0;
+
+        &,
         &:hover,
+        &:active,
         &:focus,
-        &:active {
-            color: var(--black-600);
-            background-color: var(--black-025);
+        &[disabled],
+        &[aria-disabled="true"] {
+            --_bu-bg: none;
         }
-
-        &:active {
-            background: var(--black-050);
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
         }
 
+        .s-link();
+        display: inline;
+        font: inherit;
+        text-align: inherit;
+    }
+    &&__unset {
+        &,
+        &:hover,
+        &:active,
         &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-        }
-
-        &.is-selected {
-            color: var(--black-700);
-            background-color: var(--black-075);
-
-            &:focus {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-            }
+            --_bu-baw: 0;
+            --_bu-bg: none;
+            --_bu-br: 0;
+            --_bu-bs: none;
+            --_bu-fc: unset;
+            --_bu-focus-ring: none;
+            --_bu-p: 0;
+
+            cursor: default;
+            font: unset;
+            user-select: auto;
         }
+    }
 
-        //  --  Muted (Gray)
-        &.s-btn__outlined {
-            border-color: var(--black-300);
-
-            &.is-selected {
-                border-color: var(--black-400);
-            }
+    // Pseudo-elements and child-based modifiers
+    &&__dropdown {
+        &:after {
+            border-color: currentColor transparent;
+            border-style: solid;
+            border-width: var(--_bu-dropdown-bw);
+            border-bottom-width: 0;
+            content: "";
+            pointer-events: none;
+            position: absolute;
+            right: var(--_bu-p);
+            top: calc(50% - var(--su-static2));
+            z-index: var(--zi-active);
         }
 
-        //  --  Filled (Gray)
-        &.s-btn__filled {
-            color: var(--black-700);
-            background-color: var(--black-100);
-            border-color: transparent;
-            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
-
-            .dark-mode({
-                &:not(:focus) {
-                    box-shadow: none;
-                }
-            });
-
-            .highcontrast-mode({
-                background-color: var(--black-400);
-                border-color: transparent;
-                color: var(--white);
-
-                .s-btn--number {
-                    color: var(--black);
-                }
-            });
-
-            &:hover,
-            &:focus,
-            &:active {
-                color: var(--black-700);
-                background-color: var(--black-150);
-            }
-
-            &:active {
-                background-color: var(--black-200);
-                box-shadow: none;
-            }
-
-            &:focus {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-                .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted); });
-            }
-
-            &.is-selected {
-                color: var(--black-800);
-                background-color: var(--black-350);
-                box-shadow: none;
-
-                .highcontrast-mode({
-                    background-color: var(--black-700);
-
-                    .s-btn--number {
-                        color: var(--black);
-                    }
-                });
-
-                &:focus {
-                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-                }
-            }
+        padding-right: calc(var(--_bu-p) * 2.5);
+    }
+    &&__icon {
+        .svg-icon {
+            vertical-align: baseline;
+            margin-top: -0.3em; // [3]
+            margin-bottom: -0.3em; // [3]
+            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
         }
     }
 
-    //  ============================================================================
-    //  $   DANGER BUTTONS & STYLES
-    //  ============================================================================
-    .s-btn__danger {
-        color: var(--red-600);
+    // Size
+    &&__xs {
+        --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
+        --_bu-fs: var(--fs-fine);
+        --_bu-p: 0.6em;
+    }
+    &&__sm {
+        --_bu-fs: var(--fs-caption);
+    }
+    &&__md {
+        --_bu-br: calc(var(--br-sm) + var(--su-static1));
+        --_bu-fs: var(--fs-body3);
+        --_bu-p: 0.7em;
+    }
 
+    // VARIANTS
+    &&__danger,
+    &&__muted {
         .highcontrast-mode({
-            &.s-btn__filled {
-                border-color: transparent;
-            }
+            --_bu-filled-bc: transparent;
         });
+    }
+    &&__danger {
+        --_bu-bg-active: var(--red-100);
+        --_bu-bg-hover: var(--red-050);
+        --_bu-bg-selected: var(--red-200);
+        --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
+        --_bu-fc: var(--red-600);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--red-700);
+        --_bu-fc-selected: var(--red-900);
+        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--red-500);
+        --_bu-filled-bg-active: var(--red-700);
+        --_bu-filled-bg-hover: var(--red-600);
+        --_bu-filled-bg-selected: var(--red-800);
+        --_bu-filled-fc: var(--white);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--_bu-filled-fc);
+        --_bu-outlined-bc: var(--red-500);
+        --_bu-outlined-bc-selected: var(--red-700);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--red-700);
-            background-color: var(--red-050);
-        }
-
-        &:active {
-            background-color: var(--red-100);
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-            .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error); });
-        }
-
-        &.is-selected {
-            color: var(--red-900);
-            background-color: var(--red-200);
-
-            &:focus {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-            }
-        }
-
-        //  --  Outlined
-        &.s-btn__outlined {
-            border-color: var(--red-500);
-
-            &.is-selected {
-                border-color: var(--red-600);
-            }
-        }
-
-        //  --  Filled
         &.s-btn__filled {
-            color: @white;
-            background-color: var(--red-500);
-            border-color: transparent;
-            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
+            --_bu-number-fc: var(--black);
 
             .dark-mode({
-                &:not(:focus) {
-                    box-shadow: none;
-                }
+                --_bu-filled-fc: var(--black);
+                --_bu-filled-fc-selected: var(--white);
+                --_bu-number-fc: var(--white);
+                --_bu-number-fc-selected: var(--black);
             });
-
-            .highcontrast-mode({
-                color: var(--white);
-
-                &:focus {
-                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-                }
-
-                .s-btn--number {
-                    color: var(--black);
-                }
+            .highcontrast-dark-mode({
+                --_bu-filled-fc: var(--white);
+                --_bu-number-fc: var(--black);
+                --_bu-number-fc-selected: var(--black);
             });
-
-            &:hover,
-            &:focus,
-            &:active {
-                color: @white;
-                background-color: var(--red-600);
-            }
-
-            &:active {
-                background-color: var(--red-700);
-                box-shadow: none;
-            }
-
-            &:focus {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-            }
-
-            &.is-selected {
-                color: var(--white);
-                background-color: var(--red-800);
-                box-shadow: none;
-
-                &:focus {
-                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-                }
-                .highcontrast-mode({
-                    .s-btn--number {
-                        color: var(--black);
-                    }
-                });
-            }
-
-            .s-btn--number {
-                color: var(--black-900);
-            }
         }
     }
+    &&__muted {
+        --_bu-bg-active: var(--black-050);
+        --_bu-bg-hover: var(--black-025);
+        --_bu-bg-selected: var(--black-075);
+        --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
+        --_bu-fc: var(--black-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--black-600);
+        --_bu-fc-selected: var(--black-700);
+        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--black-100);
+        --_bu-filled-bg-active: var(--black-200);
+        --_bu-filled-bg-hover: var(--black-150);
+        --_bu-filled-bg-selected: var(--black-350);
+        --_bu-filled-fc: var(--black-700);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--black-800);
+        --_bu-outlined-bc: var(--black-300);
+        --_bu-outlined-bc-selected: var(--black-400);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 
-    //  ============================================================================
-    //  $   PRIMARY STYLE
-    //  ============================================================================
-    .s-btn__primary {
-        color: var(--theme-button-primary-color);
-        background-color: var(--theme-button-primary-background-color);
-        box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
+        .highcontrast-mode({
+            --_bu-filled-bg: var(--black-400);
+            --_bu-filled-bg-active: var(--black-600);
+            --_bu-filled-bg-hover: var(--black-500);
+            --_bu-filled-bg-selected: var(--black-700);
+            --_bu-filled-fc: var(--white);
+            --_bu-filled-fc-selected: var(--_bu-filled-fc);
 
-        .dark-mode({
-            &:not(:focus) {
-                box-shadow: none;
+            &.s-btn__filled {
+                --_bu-number-fc: var(--black);
             }
+        });
+    }
+    &&__primary {
+        --_bu-bg: var(--theme-button-primary-background-color);
+        --_bu-bg-active: var(--theme-button-primary-active-background-color);
+        --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
+        --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
+        --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
+        --_bu-fc: var(--theme-button-primary-color);
+        --_bu-fc-active: var(--theme-button-primary-hover-color);
+        --_bu-fc-hover: var(--theme-button-primary-hover-color);
+        --_bu-fc-selected: var(--theme-button-primary-selected-color);
+        --_bu-number-fc: var(--theme-button-primary-number-color);
 
-            &:not(.is-selected) {
-                background-color: var(--theme-secondary-300);
-                color: var(--black);
-            }
+        .dark-mode({
+            --_bu-bg: var(--theme-secondary-300);
+            --_bu-bg-active: var(--theme-secondary-400);
+            --_bu-bg-hover: var(--theme-secondary-350);
+            --_bu-fc: var(--black);
+            --_bu-fc-active: var(--_bu-fc);
+            --_bu-fc-hover: var(--_bu-fc);
+            --_bu-fc-selected: var(--white);
+            --_bu-number-fc: var(--white);
+            --_bu-number-fc-selected: var(--black);
         });
         .highcontrast-mode({
-            &:not(.is-selected) {
-                border-color: transparent;
-                background-color: var(--theme-secondary-400);
-                color: var(--white);
-            }
+            --_bu-bc: transparent;
         });
-        .light-mode-forced({
-            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
-
-            &:not(.is-selected) {
-                color: var(--white);
-            }
+        .highcontrast-dark-mode({
+            --_bu-bg: var(--theme-secondary-400);
+            --_bu-bg-active: var(--theme-secondary-600);
+            --_bu-bg-hover: var(--theme-secondary-500);
+            --_bu-fc: var(--white);
+            --_bu-number-fc: var(--black);
         });
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--theme-button-primary-hover-color);
-            background-color: var(--theme-button-primary-hover-background-color);
-        }
-
-        &:active {
-            background-color: var(--theme-button-primary-active-background-color);
-            box-shadow: none;
-        }
-
-        &:focus {
-            .highcontrast-mode({
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-            });
-        }
-
-        &.is-selected {
-            color: var(--theme-button-primary-selected-color);
-            background-color: var(--theme-button-primary-selected-background-color);
-        }
-
-        .s-btn--number {
-            color: var(--theme-button-primary-number-color);
-        }
     }
 
-    //  ============================================================================
-    //  $   MISC STYLES
-    //  ============================================================================
-    .s-btn__google {
-        border-color: var(--bc-medium);
-        background-color: var(--white);
-        color: var(--black-700);
-
-        &:hover,
-        &:focus {
-            border-color: var(--bc-darker);
-            background-color: var(--black-025);
-            color: var(--black-800);
-        }
-
-        &:active {
-            background-color: var(--black-050);
-            color: var(--black-900);
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-        }
+    // Social
+    &&__facebook,
+    &&__github {
+        .highcontrast-mode({
+            --_bu-bc: transparent;
+        });
     }
-
-    .s-btn__facebook {
-        border-color: transparent;
-        background-color: #385499;
-        color: #fff;
-
-        .highcontrast-mode({ border-color: transparent; });
-
-        &:hover,
-        &:focus {
-            background-color: darken(#385499, 5%);
-            color: #fff;
-        }
-
-        &:active {
-            background-color: darken(#385499, 10%);
-            color: #fff;
-        }
+    &&__facebook {
+        @_fb-brand: #385499;
+        --_bu-bc: transparent;
+        --_bu-bg: @_fb-brand;
+        --_bu-bg-active: darken(@_fb-brand, 10%);
+        --_bu-bg-hover: darken(@_fb-brand, 5%);
+        --_bu-fc: #fff;
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--_bu-fc);
+        --_bu-hc-bc: transparent;
     }
-
-    .s-btn__github {
-        background-color: var(--black-750);
-        color: var(--white);
-
-        .highcontrast-mode({ border-color: transparent; });
-
-        &:hover,
-        &:focus {
-            background-color: var(--black-800);
-            color: var(--white);
-        }
-
-        &:active {
-            background-color: var(--black-900);
-            color: var(--white);
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-        }
+    &&__google {
+        --_bu-bc: var(--bc-medium);
+        --_bu-bg: var(--white);
+        --_bu-bg-active: var(--black-050);
+        --_bu-bg-hover: var(--black-025);
+        --_bu-fc: var(--fc-medium);
+        --_bu-fc-active: var(--fc-dark);
+        --_bu-fc-hover: var(--black-800);
+        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
     }
-
-    .s-btn__unset,
-    .s-btn__unset:hover,
-    .s-btn__unset:active,
-    .s-btn__unset:focus {
-        padding: 0;
-        border: none;
-        outline: initial;
-        font: unset;
-        border-radius: 0;
-        color: unset;
-        background: none;
-        box-shadow: none;
-        cursor: default;
-        user-select: auto;
+    &&__github {
+        --_bu-bg: var(--black-750);
+        --_bu-bg-active: var(--black);
+        --_bu-bg-hover: var(--black-800);
+        --_bu-fc: var(--white);
+        --_bu-fc-active: var(--white);
+        --_bu-fc-hover: var(--white);
+        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+        --_bu-hc-bc: transparent;
     }
 
-    .s-btn__link {
-        display: inline;
-        padding: 0;
-        border: none;
-        border-radius: 0;
-        outline: initial;
-        font: inherit;
-        background: none;
-        box-shadow: none;
-        text-align: inherit;
+    // CHILD ELEMENTS
+    & &--badge {
+        opacity: var(--_bu-badge-o);
+        display: inline-block;
+        border-radius: var(--br-sm);
+        padding: var(--su2) calc(var(--su4) - var(--su1));
+        font-size: var(--fs-caption);
+        line-height: var(--lh-xs);
+        background-color: currentColor;
+    }
+    & &--number {
+        color: var(--_bu-number-fc);
+    }
+    &--radio { // This lives alongside a .s-btn element
+        .v-visible-sr;
+    }
 
-        .s-link();
+    // INTERACTION
+    &:not(.is-selected):not(&__link):not(&__unset) {
+        &:hover, &:focus {
+            &.s-btn__filled {
+                background-color: var(--_bu-filled-bg-hover);
+                color: var(--_bu-filled-fc-hover);
+            }
 
-        &:hover,
-        &:active,
-        &:focus,
-        &[disabled]
-        &[aria-disabled="true"] {
-            background: none;
-            box-shadow: none;
+            background-color: var(--_bu-bg-hover);
+            color: var(--_bu-fc-hover);
         }
-
-        &.s-btn__dropdown {
-            padding-right: 0.9em;
-
-            &:after {
-                right: 0;
+        &:active {
+            &.s-btn__filled {
+                background-color: var(--_bu-filled-bg-active);
+                color: var(--_bu-filled-fc-active);
             }
-        }
-    }
 
-    .s-btn__unset,
-    .s-btn__link {
-        &:focus,
-        &:focus-visible {
-            outline-style: auto;
+            background-color: var(--_bu-bg-active);
+            color: var(--_bu-fc-active);
         }
     }
-
-    .s-btn__icon {
-        //  -- BUTTONS WITH ICONS
-        //  ------------------------------------------------------------------------
-        //  [1] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
-        //      This means we need to off set the margin y-axis so we don't add
-        //      additional height to the button.
-        //  ------------------------------------------------------------------------
-        .svg-icon {
-            vertical-align: baseline;
-            margin-top: -0.3em;         // [1]
-            margin-bottom: -0.3em;      // [1]
-            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
-        }
+    &:focus,
+    &--radio:focus + & {
+        box-shadow: var(--_bu-focus-ring);
+        outline: none;
     }
 
-    //  $$  Loading Icon
-    //      see spinner.less for full implementation
-    //  ----------------------------------------------------------------------------
-    .s-btn.is-loading  .svg-icon:first-child {
-        margin-left: -23px;
-        // If the first thing in the button is an icon, let's hide it on loading
-        // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
-        opacity: 0;
-    }
+    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    background-color: var(--_bu-bg);
+    border: var(--_bu-baw) solid var(--_bu-bc);
+    border-radius: var(--_bu-br);
+    box-shadow: var(--_bu-bs);
+    color: var(--_bu-fc);
+    font-size: var(--_bu-fs);
+    padding: var(--_bu-p);
+
+    // STATIC COMPONENT STYLES
+    cursor: pointer;
+    display: inline-block;
+    font-family: inherit;
+    font-weight: normal;
+    line-height: var(--lh-sm);
+    position: relative;
+    outline: none;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
 }
+
+//  [1] Guard against the difference in configurable resets
+//      Eric Meyer's reset does not include this, while normalize.css does
+//      Correct the inability to style buttons in iOS and Safari.
+//  [2] If the first thing in the button is an icon, let's hide it on loading
+//      We only want to modify the visibility, since we still want it to have shape and keep the same layout.
+//  [3] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
+//      This means we need to off set the margin y-axis so we don't add
+//      additional height to the button.
\ No newline at end of file