@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/lib/css/components/{_stacks-buttons.less → buttons.less}

@@ -1,658 +1,665 @@
-//
-//  STACK OVERFLOW
-//  BUTTONS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • STYLE MODIFICATIONS
-//  • LAYOUTS & SIZES
-//  ----------------------------------------------------------------------------
-
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-& {
-    .s-btn {
-        position: relative;
-        display: inline-block;
-        padding: 0.8em;
-        color: var(--theme-button-color);
-        border: 1px solid transparent;
-        border-radius: @br-sm;
-        background-color: transparent;
-        outline: none;
-        font-family: inherit;
-        font-size: @fs-body1;
-        font-weight: normal;
-        line-height: @lh-sm;
-        text-align: center;
-        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 @su4 var(--focus-ring);
-        }
-
-        &[disabled] {
-            opacity: 0.5;
-            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 @su4 var(--focus-ring);
-            }
-        }
-
-        &.s-btn__dropdown {
-            padding-right: 2em;
-
-            &:after {
-                content: "";
-                position: absolute;
-                z-index: @zi-active;
-                top: calc(50% - 2px);
-                right: 0.8em;
-                border-style: solid;
-                border-width: @su4;
-                border-top-width: @su4;
-                border-bottom-width: 0;
-                border-color: currentColor transparent;
-                pointer-events: none;
-            }
-        }
-
-        &.s-btn__xs {
-            padding: 0.6em;
-            font-size: @fs-fine;
-
-            &.s-btn__dropdown {
-                padding-right: 1.5em;
-
-                &:after {
-                    top: calc(50% - 2px);
-                    right: 0.6em;
-                    border-width: @su4 - 1px;
-                    border-top-width: @su4 - 1px;
-                    border-bottom-width: 0;
-                }
-            }
-        }
-
-        &.s-btn__sm {
-            font-size: @fs-caption;
-
-            &.s-btn__dropdown {
-                padding-right: 2.05em;
-            }
-        }
-
-        &.s-btn__md {
-            padding: 0.7em;
-            border-radius: @br-sm + 1;
-            font-size: @fs-body3;
-
-            &.s-btn__dropdown {
-                padding-right: 1.8em;
-
-                &:after {
-                    top: calc(50% - 2px);
-                    right: 0.7em;
-                    border-width: @su4 + 1px;
-                    border-top-width: @su4 + 1px;
-                    border-bottom-width: 0;
-                }
-            }
-        }
-
-        .s-btn--badge {
-            opacity: 0.5;
-            display: inline-block;
-            border-radius: @br-sm;
-            padding: @su2 (@su4 - 1px);
-            font-size: @fs-caption;
-            line-height: @lh-xs;
-            background-color: currentColor;
-
-            .highcontrast-mode({ opacity: 0.8; });
-        }
-
-        .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); });
-    }
-
-    //  ============================================================================
-    //  $   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);
-        }
-    }
-
-    //  --  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({ box-shadow: none; });
-
-        &:hover,
-        &: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 @su4 var(--focus-ring);
-            });
-        }
-
-        &.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;
-        }
-    }
-
-    //  --  Muted Clear Style
-    //      Creates a gray button style.
-    //  ----------------------------------------------------------------------------
-    .s-btn__muted {
-        color: var(--black-500);
-
-        .highcontrast-mode({
-            &.s-btn__filled {
-                border-color: transparent;
-            }
-        });
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--black-600);
-            background-color: var(--black-025);
-        }
-
-        &:active {
-            background: var(--black-050);
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-        }
-
-        &.is-selected {
-            color: var(--black-700);
-            background-color: var(--black-075);
-
-            &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-            }
-        }
-
-        //  --  Muted (Gray)
-        &.s-btn__outlined {
-            border-color: var(--black-300);
-
-            &.is-selected {
-                border-color: var(--black-400);
-            }
-        }
-
-        //  --  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({ 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 @su4 var(--focus-ring-muted);
-                .highcontrast-mode({ box-shadow: 0 0 0 @su4 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 @su4 var(--focus-ring-muted);
-                }
-            }
-        }
-    }
-
-    //  ============================================================================
-    //  $   DANGER BUTTONS & STYLES
-    //  ============================================================================
-    .s-btn__danger {
-        color: var(--red-600);
-
-        .highcontrast-mode({
-            &.s-btn__filled {
-                border-color: transparent;
-            }
-        });
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--red-700);
-            background-color: var(--red-050);
-        }
-
-        &:active {
-            background-color: var(--red-100);
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-error);
-            .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
-        }
-
-        &.is-selected {
-            color: var(--red-900);
-            background-color: var(--red-200);
-
-            &:focus {
-                box-shadow: 0 0 0 @su4 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);
-
-            .dark-mode({ box-shadow: none; });
-
-            .highcontrast-mode({
-                color: var(--white);
-
-                &:focus {
-                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
-                }
-
-                .s-btn--number {
-                    color: 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 @su4 var(--focus-ring-error);
-            }
-
-            &.is-selected {
-                color: var(--white);
-                background-color: var(--red-800);
-                box-shadow: none;
-
-                &:focus {
-                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
-                }
-                .highcontrast-mode({
-                    .s-btn--number {
-                        color: var(--black);
-                    }
-                });
-            }
-
-            .s-btn--number {
-                color: var(--black-900);
-            }
-        }
-    }
-
-    //  ============================================================================
-    //  $   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);
-
-        .dark-mode({
-            box-shadow: none;
-
-            &:not(.is-selected) {
-                color: var(--black);
-            }
-        });
-        .highcontrast-mode({
-            &:not(.is-selected) {
-                border-color: transparent;
-                color: var(--white);
-            }
-        });
-
-        &: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 @su4 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 @su4 var(--focus-ring-muted);
-        }
-    }
-
-    .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;
-        }
-    }
-
-    .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 @su4 var(--focus-ring-muted);
-        }
-    }
-
-    .s-btn__unset,
-    .s-btn__unset:hover,
-    .s-btn__unset:active,
-    .s-btn__unset:focus {
-        padding: 0;
-        border: none;
-        outline: none;
-        font: unset;
-        border-radius: 0;
-        color: unset;
-        background: none;
-        box-shadow: none;
-        cursor: default;
-        user-select: auto;
-    }
-
-    .s-btn__link {
-        display: inline;
-        padding: 0;
-        border: none;
-        border-radius: 0;
-        outline: none;
-        font: inherit;
-        background: none;
-        box-shadow: none;
-        text-align: inherit;
-
-        .s-link();
-
-        &:hover,
-        &:active,
-        &:focus,
-        &[disabled] {
-            background: none;
-            box-shadow: none;
-        }
-
-        &.s-btn__dropdown {
-            padding-right: 0.9em;
-
-            &:after {
-                right: 0;
-            }
-        }
-    }
-
-    .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 @te-smooth; // Animate the transition to .is-loading
-        }
-    }
-
-    //  $$  Loading Icon
-    //      Adds a loading icon into the button
-    //  ----------------------------------------------------------------------------
-    .s-btn {
-        &.is-loading {
-            padding-left: 2.2em;
-
-            &:before {
-                content: "";
-                position: absolute;
-                opacity: 0.3;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: currentColor;
-                border-radius: @br-circle;
-            }
-
-            &:after {
-                content: "";
-                position: absolute;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: transparent;
-                border-left-color: currentColor;
-                border-radius: @br-circle;
-                animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-                // see _stacks-spinner.less for an explanation of the following two
-                filter: invert(0); // (*)
-                transform-origin: 50% 50% 1px; // (*)
-            }
-
-            .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;
-            }
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  BUTTONS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • STYLE MODIFICATIONS
+//  • LAYOUTS & SIZES
+//  ----------------------------------------------------------------------------
+
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+& {
+    .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;
+        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] {
+            opacity: 0.5;
+            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;
+            }
+        }
+
+        &.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__sm {
+            font-size: var(--fs-caption);
+
+            &.s-btn__dropdown {
+                padding-right: 2.05em;
+            }
+        }
+
+        &.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--badge {
+            opacity: 0.5;
+            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;
+
+            .highcontrast-mode({ opacity: 0.8; });
+        }
+
+        .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); });
+    }
+
+    //  ============================================================================
+    //  $   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);
+        }
+    }
+
+    //  --  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({ box-shadow: none; });
+
+        &:hover,
+        &: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);
+            });
+        }
+
+        &.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;
+        }
+    }
+
+    //  --  Muted Clear Style
+    //      Creates a gray button style.
+    //  ----------------------------------------------------------------------------
+    .s-btn__muted {
+        color: var(--black-500);
+
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: var(--black-600);
+            background-color: var(--black-025);
+        }
+
+        &:active {
+            background: var(--black-050);
+        }
+
+        &: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);
+            }
+        }
+
+        //  --  Muted (Gray)
+        &.s-btn__outlined {
+            border-color: var(--black-300);
+
+            &.is-selected {
+                border-color: var(--black-400);
+            }
+        }
+
+        //  --  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({ 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);
+                }
+            }
+        }
+    }
+
+    //  ============================================================================
+    //  $   DANGER BUTTONS & STYLES
+    //  ============================================================================
+    .s-btn__danger {
+        color: var(--red-600);
+
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
+        &: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);
+
+            .dark-mode({ box-shadow: none; });
+
+            .highcontrast-mode({
+                color: var(--white);
+
+                &:focus {
+                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
+                }
+
+                .s-btn--number {
+                    color: 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);
+            }
+        }
+    }
+
+    //  ============================================================================
+    //  $   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);
+
+        .dark-mode({
+            box-shadow: none;
+
+            &:not(.is-selected) {
+                color: var(--black);
+            }
+        });
+        .highcontrast-mode({
+            &:not(.is-selected) {
+                border-color: transparent;
+                color: var(--white);
+            }
+        });
+        .light-mode-forced({
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
+
+            &:not(.is-selected) {
+                color: var(--white);
+            }
+        });
+
+        &: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);
+        }
+    }
+
+    .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;
+        }
+    }
+
+    .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);
+        }
+    }
+
+    .s-btn__unset,
+    .s-btn__unset:hover,
+    .s-btn__unset:active,
+    .s-btn__unset:focus {
+        padding: 0;
+        border: none;
+        outline: none;
+        font: unset;
+        border-radius: 0;
+        color: unset;
+        background: none;
+        box-shadow: none;
+        cursor: default;
+        user-select: auto;
+    }
+
+    .s-btn__link {
+        display: inline;
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        font: inherit;
+        background: none;
+        box-shadow: none;
+        text-align: inherit;
+
+        .s-link();
+
+        &:hover,
+        &:active,
+        &:focus,
+        &[disabled] {
+            background: none;
+            box-shadow: none;
+        }
+
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
+
+            &:after {
+                right: 0;
+            }
+        }
+    }
+
+    .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
+        }
+    }
+
+    //  $$  Loading Icon
+    //      Adds a loading icon into the button
+    //  ----------------------------------------------------------------------------
+    .s-btn {
+        &.is-loading {
+            padding-left: 2.2em;
+
+            &:before {
+                content: "";
+                position: absolute;
+                opacity: 0.3;
+                left: 0.6em;
+                top: calc(50% - 0.6em);
+                width: 1.23076923em;
+                height: 1.23076923em;
+                border-width: 2px;
+                border-style: solid;
+                border-color: currentColor;
+                border-radius: var(--br-circle);
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                left: 0.6em;
+                top: calc(50% - 0.6em);
+                width: 1.23076923em;
+                height: 1.23076923em;
+                border-width: 2px;
+                border-style: solid;
+                border-color: transparent;
+                border-left-color: currentColor;
+                border-radius: var(--br-circle);
+                animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+                // see spinner.less for an explanation of the following two
+                filter: invert(0); // (*)
+                transform-origin: 50% 50% 1px; // (*)
+            }
+
+            .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;
+            }
+        }
+    }
+}