@stackoverflow/stacks 2.5.4 → 2.5.5

package/lib/components/button/button.less

@@ -1,474 +1,474 @@
-.s-btn {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_bu-baw: var(--su-static1);
-    --_bu-bc: transparent;
-    // --_bu-bg: inherit; // [1]
-    --_bu-br: var(--br-md);
-    --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
-    --_bu-fs: var(--fs-body1);
-    --_bu-p: 0.8em;
-
-    // Active
-    --_bu-bc-active: var(--_bu-bc);
-    --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
-    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used on purpose
-
-    // Hover
-    --_bu-bc-hover: var(--_bu-bc);
-    --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
-    --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
-
-    // BASE SELECTED MODIFIER
-    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
-    --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
-
-    // FILLED VARIANT
-    --_bu-filled-bc: transparent;
-    --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
-    --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
-    // Filled + Selected
-    --_bu-filled-bc-selected: transparent;
-    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
-    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
-    // Filled + Active
-    --_bu-filled-bc-active: var(--_bu-filled-bc);
-    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
-    --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
-    // Filled + Hover
-    --_bu-filled-bc-hover: var(--_bu-filled-bc);
-    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
-    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
-
-    // OUTLINED VARIANT
-    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
-    --_bu-outlined-bg: var(--theme-button-outlined-background-color);
-    --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400));
-    // Outlined + Selected
-    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
-    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
-    --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
-
-    // CHILD COMPONENT CUSTOM PROPERTIES
-    --_bu-badge-o: 0.5;
-    --_bu-dropdown-bw: var(--su-static4);
-    --_bu-number-fc: var(--white);
-    --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
-    --_bu-number-fc-selected: var(--white);
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_bu-bc: currentColor;
-        --_bu-outlined-bc: var(--_bu-bc);
-        --_bu-bc-selected: var(--_bu-bc);
-        --_bu-fc-selected: var(--white);
-        --_bu-outlined-fc-selected: var(--white);
-        --_bu-badge-o: 0.8;
-        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
-    });
-
-    // STATES
-    fieldset[disabled] &,
-    &[disabled],
-    &[aria-disabled="true"] {
-        opacity: var(--_o-disabled-static);
-        pointer-events: none;
-        text-decoration: none;
-    }
-
-    button &,
-    button[type="submit"] &,
-    button[type="reset"] & {
-        -webkit-appearance: button; // [2]
-    }
-
-    &.grid {
-        display: flex; // Override &&__danger buttons having inline-block by default
-    }
-
-    &.is-loading {
-        .svg-icon:first-child {
-            margin-left: calc((var(--su-static24) - var(--su-static1)) * -1); // -23px
-            opacity: 0; // [3]
-        }
-
-        padding-left: 2.2em;
-    }
-
-    &.is-selected,
-    &--radio:checked + & {
-        background-color: var(--_bu-bg-selected);
-        border-color: var(--_bu-bc-selected, transparent);
-        color: var(--_bu-fc-selected);
-
-        .s-btn--number {
-            color: var(--_bu-number-fc-selected);
-        }
-
-        &.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__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);
-                });
-            }
-        }
-    }
-
-    // MODIFIERS
-    &&__filled {
-        .s-btn--number {
-            color: var(--_bu-number-fc-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, inherit);
-    }
-
-    // Resets
-    &&__link,
-    &&__unset {
-        --_bu-baw: 0;
-        --_bu-br: 0;
-        --_bu-p: 0;
-
-        &:focus,
-        &:focus-visible {
-            outline-style: auto;
-        }
-    }
-
-    &&__link {
-        &,
-        &:hover,
-        &:active,
-        &:focus,
-        &[disabled],
-        &[aria-disabled="true"] {
-            --_bu-bg: none;
-        }
-
-        &.s-btn__dropdown {
-            padding-right: 0.9em;
-        }
-
-        .s-link();
-        display: inline;
-        font: inherit;
-        outline: revert;
-        text-align: inherit;
-    }
-
-    &&__unset {
-        &,
-        &:hover,
-        &:active,
-        &:focus {
-            --_bu-bg: none;
-            --_bu-fc: unset;
-
-            cursor: default;
-            font: unset;
-            user-select: auto;
-        }
-
-        outline: initial;
-    }
-
-    // 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-px, var(--_bu-p));
-            top: calc(50% - var(--su-static2));
-            z-index: var(--zi-active);
-        }
-
-        padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5);
-    }
-
-    &&__icon {
-        .svg-icon {
-            vertical-align: baseline;
-            margin-top: -0.3em; // [4]
-            margin-bottom: -0.3em; // [4]
-            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
-        }
-    }
-
-    // Size
-    &&__xs {
-        .size-styles(xs; bu; @styles: fs);
-        --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
-        --_bu-p: 0.6em;
-    }
-
-    &&__sm {
-        .size-styles(sm; bu; @styles: fs);
-    }
-
-    &&__md {
-        .size-styles(md; bu; @styles: br, fs);
-        --_bu-p: 0.7em;
-    }
-
-    // VARIANTS
-    &&__danger,
-    &&__muted {
-        .highcontrast-mode({
-            --_bu-filled-bc: transparent;
-        });
-    }
-
-    &&__danger {
-        --_bu-bg-active: var(--red-300);
-        --_bu-bg-hover: var(--red-200);
-        --_bu-bg-selected: var(--red-300);
-        --_bu-fc: var(--red-500);
-        --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--red-500);
-        --_bu-fc-selected: var(--red-600);
-        --_bu-filled-bc: transparent;
-        --_bu-filled-bc-selected: var(--_bu-filled-bc);
-        --_bu-filled-bg: var(--red-400);
-        --_bu-filled-bg-active: var(--red-500);
-        --_bu-filled-bg-hover: var(--red-500);
-        --_bu-filled-bg-selected: var(--red-600);
-        --_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-400);
-        --_bu-outlined-bc-selected: var(--red-500);
-        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
-        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
-        --_bu-number-fc: var(--white);
-        --_bu-number-fc-filled: var(--black);
-    }
-
-    &&__muted {
-        --_bu-bc-hover: var(--black-300);
-        --_bu-bg-active: var(--black-150);
-        --_bu-bg-hover: var(--black-100);
-        --_bu-bg-selected: var(--black-200);
-        --_bu-fc: var(--black-500);
-        --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--black-500);
-        --_bu-fc-selected: var(--black-500);
-        // The filled modifier on the muted button is deprecated and is to be
-        // removed in Stacks Classic v2
-        --_bu-filled-bc: transparent;
-        --_bu-filled-bc-selected: var(--_bu-filled-bc);
-        --_bu-filled-bg: var(--black-225);
-        --_bu-filled-bg-active: var(--black-300);
-        --_bu-filled-bg-hover: var(--black-250);
-        --_bu-filled-bg-selected: var(--black-350);
-        --_bu-filled-fc: var(--black-500);
-        --_bu-filled-fc-active: var(--_bu-filled-fc);
-        --_bu-filled-fc-hover: var(--_bu-filled-fc);
-        --_bu-filled-fc-selected: var(--black-600);
-        --_bu-outlined-bc: var(--black-300);
-        --_bu-outlined-bc-selected: var(--black-300);
-        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
-        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
-        --_bu-number-fc-filled: var(--white);
-        --_bu-number-fc-selected: var(--white);
-        --_bu-bg-focus: var(--black-400);
-        --_bu-fc-focus: var(--white);
-        --_bu-number-fc-focus: var(--black-500);
-
-        .highcontrast-mode({
-            --_bu-bg-hover: var(--black-225);
-            // // The filled modifier on the muted button is deprecated and is to be
-            // // removed in Stacks Classic v2
-            --_bu-filled-bg: var(--black-400);
-            --_bu-filled-bg-active: var(--black-500);
-            --_bu-filled-bg-hover: var(--black-400);
-            --_bu-filled-bg-selected: var(--black-500);
-            --_bu-filled-fc: var(--white);
-            --_bu-filled-fc-selected: var(--_bu-filled-fc);
-            --_bu-fc-selected: var(--black);
-            --_bu-number-fc: var(--white);
-            --_bu-number-fc-filled: var(--black);
-            --_bu-number-fc-selected: var(--white);
-        });
-    }
-
-    // Social
-    &&__facebook,
-    &&__github {
-        .highcontrast-mode({
-            --_bu-bc: transparent;
-        });
-    }
-
-    &&__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;
-    }
-
-    &&__google {
-        --_bu-bc: var(--bc-medium);
-        --_bu-bg: var(--white);
-        --_bu-bg-active: var(--black-150);
-        --_bu-bg-hover: var(--black-100);
-        --_bu-fc: var(--fc-medium);
-        --_bu-fc-active: var(--fc-dark);
-        --_bu-fc-hover: var(--black-600);
-    }
-
-    &&__github {
-        --_bu-bg: var(--black-600);
-        --_bu-bg-active: var(--black);
-        --_bu-bg-hover: var(--black-600);
-        --_bu-fc: var(--white);
-        --_bu-fc-active: var(--white);
-        --_bu-fc-hover: var(--white);
-        --_bu-hc-bc: transparent;
-    }
-
-    // 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. These styles are the equivelent of `.v-visible-sr`
-        border: 0;
-        clip-path: inset(50%);
-        clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
-        height: var(--su-static1);
-        margin: calc(var(--su-static1) * -1); // -1px
-        overflow-wrap: normal;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: var(--su-static1);
-    }
-
-    // INTERACTION
-    &:not(&__link):not(&__unset):focus-visible,
-    &--radio:focus-visible + & {
-        .focus-styles(true, true);
-    }
-
-    &:not(&--radio:checked + label):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
-        &:focus-visible,
-        &.focus-inset-bordered {
-            &:not(:hover) .s-btn--number {
-                color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
-            }
-
-            background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
-            color: var(--_bu-fc-focus, var(--_bu-filled-fc));
-        }
-
-        &:hover {
-            &.s-btn__filled {
-                background-color: var(--_bu-filled-bg-hover);
-                border-color: var(--_bu-filled-bc-hover);
-                color: var(--_bu-filled-fc-hover);
-            }
-
-            &:not(.s-btn__outlined) {
-                border-color: var(--_bu-bc-hover);
-            }
-
-            &:visited:not(:hover):not(:focus) {
-                &.s-btn__filled {
-                    background-color: var(--_bu-filled-bg);
-                    border-color: var(--_bu-filled-bc);
-                    color: var(--_bu-filled-fc);
-                }
-
-                background-color: var(--_bu-bg);
-                border-color: var(--_bu-bc);
-                color: var(--_bu-fc);
-            }
-
-            background-color: var(--_bu-bg-hover);
-            color: var(--_bu-fc-hover);
-        }
-
-        &:active {
-            &.s-btn__filled {
-                background-color: var(--_bu-filled-bg-active);
-                border-color: var(--_bu-filled-bc-active);
-                color: var(--_bu-filled-fc-active);
-            }
-
-            background-color: var(--_bu-bg-active);
-            border-color: var(--_bu-bc-active);
-            color: var(--_bu-fc-active);
-        }
-    }
-
-    background-color: var(--_bu-bg, inherit); // [1]
-    border: var(--_bu-baw) solid var(--_bu-bc);
-    border-radius: var(--_bu-br);
-    box-shadow: none;
-    color: var(--_bu-fc);
-    font-size: var(--_bu-fs);
-    padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p));
-
-    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] Passing `inherit` as a custom property value has no effect, instead we
-//      provide it as a fallback value for when --_bu-bg is not defined
-//      For more info, see https://stackoverflow.com/a/53239881/652353
-//  [2] 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.
-//  [3] 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.
-//  [4] 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
+.s-btn {
+    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    --_bu-baw: var(--su-static1);
+    --_bu-bc: transparent;
+    // --_bu-bg: inherit; // [1]
+    --_bu-br: var(--br-md);
+    --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
+    --_bu-fs: var(--fs-body1);
+    --_bu-p: 0.8em;
+
+    // Active
+    --_bu-bc-active: var(--_bu-bc);
+    --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
+    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used on purpose
+
+    // Hover
+    --_bu-bc-hover: var(--_bu-bc);
+    --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
+    --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
+
+    // BASE SELECTED MODIFIER
+    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
+
+    // FILLED VARIANT
+    --_bu-filled-bc: transparent;
+    --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
+    --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
+    // Filled + Selected
+    --_bu-filled-bc-selected: transparent;
+    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
+    // Filled + Active
+    --_bu-filled-bc-active: var(--_bu-filled-bc);
+    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
+    --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
+    // Filled + Hover
+    --_bu-filled-bc-hover: var(--_bu-filled-bc);
+    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
+    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
+
+    // OUTLINED VARIANT
+    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
+    --_bu-outlined-bg: var(--theme-button-outlined-background-color);
+    --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400));
+    // Outlined + Selected
+    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
+    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
+
+    // CHILD COMPONENT CUSTOM PROPERTIES
+    --_bu-badge-o: 0.5;
+    --_bu-dropdown-bw: var(--su-static4);
+    --_bu-number-fc: var(--white);
+    --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+    --_bu-number-fc-selected: var(--white);
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_bu-bc: currentColor;
+        --_bu-outlined-bc: var(--_bu-bc);
+        --_bu-bc-selected: var(--_bu-bc);
+        --_bu-fc-selected: var(--white);
+        --_bu-outlined-fc-selected: var(--white);
+        --_bu-badge-o: 0.8;
+        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+    });
+
+    // STATES
+    fieldset[disabled] &,
+    &[disabled],
+    &[aria-disabled="true"] {
+        opacity: var(--_o-disabled-static);
+        pointer-events: none;
+        text-decoration: none;
+    }
+
+    button &,
+    button[type="submit"] &,
+    button[type="reset"] & {
+        -webkit-appearance: button; // [2]
+    }
+
+    &.grid {
+        display: flex; // Override &&__danger buttons having inline-block by default
+    }
+
+    &.is-loading {
+        .svg-icon:first-child {
+            margin-left: calc((var(--su-static24) - var(--su-static1)) * -1); // -23px
+            opacity: 0; // [3]
+        }
+
+        padding-left: 2.2em;
+    }
+
+    &.is-selected,
+    &--radio:checked + & {
+        background-color: var(--_bu-bg-selected);
+        border-color: var(--_bu-bc-selected, transparent);
+        color: var(--_bu-fc-selected);
+
+        .s-btn--number {
+            color: var(--_bu-number-fc-selected);
+        }
+
+        &.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__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);
+                });
+            }
+        }
+    }
+
+    // MODIFIERS
+    &&__filled {
+        .s-btn--number {
+            color: var(--_bu-number-fc-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, inherit);
+    }
+
+    // Resets
+    &&__link,
+    &&__unset {
+        --_bu-baw: 0;
+        --_bu-br: 0;
+        --_bu-p: 0;
+
+        &:focus,
+        &:focus-visible {
+            outline-style: auto;
+        }
+    }
+
+    &&__link {
+        &,
+        &:hover,
+        &:active,
+        &:focus,
+        &[disabled],
+        &[aria-disabled="true"] {
+            --_bu-bg: none;
+        }
+
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
+        }
+
+        .s-link();
+        display: inline;
+        font: inherit;
+        outline: revert;
+        text-align: inherit;
+    }
+
+    &&__unset {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+            --_bu-bg: none;
+            --_bu-fc: unset;
+
+            cursor: default;
+            font: unset;
+            user-select: auto;
+        }
+
+        outline: initial;
+    }
+
+    // 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-px, var(--_bu-p));
+            top: calc(50% - var(--su-static2));
+            z-index: var(--zi-active);
+        }
+
+        padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5);
+    }
+
+    &&__icon {
+        .svg-icon {
+            vertical-align: baseline;
+            margin-top: -0.3em; // [4]
+            margin-bottom: -0.3em; // [4]
+            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
+        }
+    }
+
+    // Size
+    &&__xs {
+        .size-styles(xs; bu; @styles: fs);
+        --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
+        --_bu-p: 0.6em;
+    }
+
+    &&__sm {
+        .size-styles(sm; bu; @styles: fs);
+    }
+
+    &&__md {
+        .size-styles(md; bu; @styles: br, fs);
+        --_bu-p: 0.7em;
+    }
+
+    // VARIANTS
+    &&__danger,
+    &&__muted {
+        .highcontrast-mode({
+            --_bu-filled-bc: transparent;
+        });
+    }
+
+    &&__danger {
+        --_bu-bg-active: var(--red-300);
+        --_bu-bg-hover: var(--red-200);
+        --_bu-bg-selected: var(--red-300);
+        --_bu-fc: var(--red-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--red-500);
+        --_bu-fc-selected: var(--red-600);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--red-400);
+        --_bu-filled-bg-active: var(--red-500);
+        --_bu-filled-bg-hover: var(--red-500);
+        --_bu-filled-bg-selected: var(--red-600);
+        --_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-400);
+        --_bu-outlined-bc-selected: var(--red-500);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc: var(--white);
+        --_bu-number-fc-filled: var(--black);
+    }
+
+    &&__muted {
+        --_bu-bc-hover: var(--black-300);
+        --_bu-bg-active: var(--black-150);
+        --_bu-bg-hover: var(--black-100);
+        --_bu-bg-selected: var(--black-200);
+        --_bu-fc: var(--black-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--black-500);
+        --_bu-fc-selected: var(--black-500);
+        // The filled modifier on the muted button is deprecated and is to be
+        // removed in Stacks Classic v2
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--black-225);
+        --_bu-filled-bg-active: var(--black-300);
+        --_bu-filled-bg-hover: var(--black-250);
+        --_bu-filled-bg-selected: var(--black-350);
+        --_bu-filled-fc: var(--black-500);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--black-600);
+        --_bu-outlined-bc: var(--black-300);
+        --_bu-outlined-bc-selected: var(--black-300);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc-filled: var(--white);
+        --_bu-number-fc-selected: var(--white);
+        --_bu-bg-focus: var(--black-400);
+        --_bu-fc-focus: var(--white);
+        --_bu-number-fc-focus: var(--black-500);
+
+        .highcontrast-mode({
+            --_bu-bg-hover: var(--black-225);
+            // // The filled modifier on the muted button is deprecated and is to be
+            // // removed in Stacks Classic v2
+            --_bu-filled-bg: var(--black-400);
+            --_bu-filled-bg-active: var(--black-500);
+            --_bu-filled-bg-hover: var(--black-400);
+            --_bu-filled-bg-selected: var(--black-500);
+            --_bu-filled-fc: var(--white);
+            --_bu-filled-fc-selected: var(--_bu-filled-fc);
+            --_bu-fc-selected: var(--black);
+            --_bu-number-fc: var(--white);
+            --_bu-number-fc-filled: var(--black);
+            --_bu-number-fc-selected: var(--white);
+        });
+    }
+
+    // Social
+    &&__facebook,
+    &&__github {
+        .highcontrast-mode({
+            --_bu-bc: transparent;
+        });
+    }
+
+    &&__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;
+    }
+
+    &&__google {
+        --_bu-bc: var(--bc-medium);
+        --_bu-bg: var(--white);
+        --_bu-bg-active: var(--black-150);
+        --_bu-bg-hover: var(--black-100);
+        --_bu-fc: var(--fc-medium);
+        --_bu-fc-active: var(--fc-dark);
+        --_bu-fc-hover: var(--black-600);
+    }
+
+    &&__github {
+        --_bu-bg: var(--black-600);
+        --_bu-bg-active: var(--black);
+        --_bu-bg-hover: var(--black-600);
+        --_bu-fc: var(--white);
+        --_bu-fc-active: var(--white);
+        --_bu-fc-hover: var(--white);
+        --_bu-hc-bc: transparent;
+    }
+
+    // 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. These styles are the equivelent of `.v-visible-sr`
+        border: 0;
+        clip-path: inset(50%);
+        clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
+        height: var(--su-static1);
+        margin: calc(var(--su-static1) * -1); // -1px
+        overflow-wrap: normal;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: var(--su-static1);
+    }
+
+    // INTERACTION
+    &:not(&__link):not(&__unset):focus-visible,
+    &--radio:focus-visible + & {
+        .focus-styles(true, true);
+    }
+
+    &:not(&--radio:checked + label):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
+        &:focus-visible,
+        &.focus-inset-bordered {
+            &:not(:hover) .s-btn--number {
+                color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
+            }
+
+            background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
+            color: var(--_bu-fc-focus, var(--_bu-filled-fc));
+        }
+
+        &:hover {
+            &.s-btn__filled {
+                background-color: var(--_bu-filled-bg-hover);
+                border-color: var(--_bu-filled-bc-hover);
+                color: var(--_bu-filled-fc-hover);
+            }
+
+            &:not(.s-btn__outlined) {
+                border-color: var(--_bu-bc-hover);
+            }
+
+            &:visited:not(:active):not(:focus) {
+                &.s-btn__filled {
+                    background-color: var(--_bu-filled-bg);
+                    border-color: var(--_bu-filled-bc);
+                    color: var(--_bu-filled-fc);
+                }
+
+                background-color: var(--_bu-bg);
+                border-color: var(--_bu-bc);
+                color: var(--_bu-fc);
+            }
+
+            background-color: var(--_bu-bg-hover);
+            color: var(--_bu-fc-hover);
+        }
+
+        &:active {
+            &.s-btn__filled {
+                background-color: var(--_bu-filled-bg-active);
+                border-color: var(--_bu-filled-bc-active);
+                color: var(--_bu-filled-fc-active);
+            }
+
+            background-color: var(--_bu-bg-active);
+            border-color: var(--_bu-bc-active);
+            color: var(--_bu-fc-active);
+        }
+    }
+
+    background-color: var(--_bu-bg, inherit); // [1]
+    border: var(--_bu-baw) solid var(--_bu-bc);
+    border-radius: var(--_bu-br);
+    box-shadow: none;
+    color: var(--_bu-fc);
+    font-size: var(--_bu-fs);
+    padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p));
+
+    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] Passing `inherit` as a custom property value has no effect, instead we
+//      provide it as a fallback value for when --_bu-bg is not defined
+//      For more info, see https://stackoverflow.com/a/53239881/652353
+//  [2] 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.
+//  [3] 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.
+//  [4] 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.