@skewedaspect/sleekspace-ui 0.7.0 → 0.8.0

package/src/styles/components/_button.scss

@@ -1,5 +1,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 // Button Component Styles
+//
+// Structure:
+//   .sk-button         - Outer hit zone. Transparent layout container. Carries kind/size/variant classes
+//                        and state (disabled, loading, pressed). On touch devices it grows to a 44px
+//                        floor so the tap target is comfortable; the inner chrome stays at its natural
+//                        size so the button visually looks the same on desktop and mobile.
+//   .sk-button-chrome  - Visible button body. Background, border, cut-border, padding, height, font,
+//                        box-shadow, transitions. Sized by --sk-button-current-* vars driven by the
+//                        size variant on the outer .sk-button.
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
@@ -58,7 +67,7 @@
     /// Line height for button text (1.5 for comfortable vertical spacing)
     --sk-button-line-height: 1.5;
 
-    /// Gap between button content items (icon + text spacing)
+    /// Gap between content items (icon + text spacing)
     --sk-button-gap: 0.5rem;
 
     //------------------------------------------------------------------------------------------------------------------
@@ -155,10 +164,23 @@
 
     /// Hover border color - slightly lighter than base for emphasis
     --sk-button-border-hover: color-mix(in oklch, var(--sk-button-color-base), white 12.68%);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Chrome sizing tokens (set by size variants, consumed by .sk-button-chrome)
+    //------------------------------------------------------------------------------------------------------------------
+
+    --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
+    --sk-button-current-padding-x: var(--sk-button-padding-base);
+    --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
+    --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
 }
 
 //----------------------------------------------------------------------------------------------------------------------
 // Variant Mixins
+//
+// Each mixin sets CSS custom properties on the .sk-button for kind-specific colors, and uses a
+// descendant selector (.sk-button-chrome) to paint the visible chrome. State transitions update
+// vars on the button OR directly target the chrome element.
 //----------------------------------------------------------------------------------------------------------------------
 
 // Mixin for solid variant
@@ -176,17 +198,21 @@
         // Set dynamic border color
         --sk-button-border-color: var(--sk-button-border-base);
 
-        // Use calculated background and foreground
-        background-color: var(--sk-button-bg);
-        color: var(--sk-button-text);
+        .sk-button-chrome
+        {
+            background-color: var(--sk-button-bg);
+            color: var(--sk-button-text);
+        }
 
         &:hover:not(:disabled)
         {
-            // Update border color and glow shadow
             --sk-button-border-color: var(--sk-button-border-hover);
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: var(--sk-button-bg-hover);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+            }
         }
 
         &:active:not(:disabled)
@@ -194,8 +220,11 @@
             --sk-button-border-color: var(--sk-button-border-hover);
             --sk-button-glow-shadow: 0 0 0 transparent;
 
-            background-color: var(--sk-button-bg);
-            color: var(--sk-button-color-base);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg);
+                color: var(--sk-button-color-base);
+            }
         }
 
         &:focus-visible
@@ -210,24 +239,26 @@
 {
     &.sk-#{ "" + $kind }
     {
-        // Override base color tokens for this kind
         --sk-button-color-base: var(--sk-#{ $kind }-base);
         --sk-button-text: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
         --sk-kind-color: var(--sk-#{ $kind }-base);
-
         --sk-button-border-color: var(--sk-button-border-base);
 
-        background-color: var(--sk-button-outline-bg);
-        color: var(--sk-button-color-base);
+        .sk-button-chrome
+        {
+            background-color: var(--sk-button-outline-bg);
+            color: var(--sk-button-color-base);
+        }
 
         &:hover:not(:disabled)
         {
             --sk-button-border-color: var(--sk-button-border-hover);
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: var(--sk-button-bg);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg);
+            }
         }
 
         &:active:not(:disabled)
@@ -235,8 +266,11 @@
             --sk-button-border-color: var(--sk-button-border-hover);
             --sk-button-glow-shadow: 0 0 0 transparent;
 
-            background-color: var(--sk-button-bg-hover);
-            color: var(--sk-button-text);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+                color: var(--sk-button-text);
+            }
         }
     }
 }
@@ -246,23 +280,25 @@
 {
     &.sk-#{ "" + $kind }
     {
-        // Override base color tokens for this kind
         --sk-button-color-base: var(--sk-#{ $kind }-base);
         --sk-button-text: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
         --sk-kind-color: var(--sk-#{ $kind }-base);
-
         --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
 
-        background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity));
-        color: var(--sk-button-color-base);
+        .sk-button-chrome
+        {
+            background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity));
+            color: var(--sk-button-color-base);
+        }
 
         &:hover:not(:disabled)
         {
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: var(--sk-button-bg-hover);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+            }
         }
 
         &:active:not(:disabled)
@@ -270,8 +306,11 @@
             --sk-button-border-color: var(--sk-button-border-base);
             --sk-button-glow-shadow: 0 0 0 transparent;
 
-            background-color: var(--sk-button-bg);
-            color: var(--sk-button-text);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg);
+                color: var(--sk-button-text);
+            }
         }
     }
 }
@@ -281,23 +320,25 @@
 {
     &.sk-#{ "" + $kind }
     {
-        // Override base color tokens for this kind
         --sk-button-color-base: var(--sk-#{ $kind }-base);
         --sk-button-text: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
         --sk-kind-color: var(--sk-#{ $kind }-base);
-
         --sk-button-border-color: transparent;
 
-        background-color: transparent;
-        color: var(--sk-button-color-base);
+        .sk-button-chrome
+        {
+            background-color: transparent;
+            color: var(--sk-button-color-base);
+        }
 
         &:hover:not(:disabled)
         {
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: var(--sk-button-bg-hover);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+            }
         }
 
         &:active:not(:disabled)
@@ -305,8 +346,11 @@
             --sk-button-border-color: var(--sk-button-border-hover);
             --sk-button-glow-shadow: 0 0 0 transparent;
 
-            background-color: var(--sk-button-bg-hover);
-            color: var(--sk-button-text);
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+                color: var(--sk-button-text);
+            }
         }
     }
 }
@@ -316,30 +360,29 @@
 {
     &.sk-#{ "" + $kind }
     {
-        // Override base color tokens for this kind
         --sk-button-color-base: var(--sk-#{ $kind }-base);
         --sk-button-text: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
         --sk-kind-color: var(--sk-#{ $kind }-base);
-
         --sk-button-radius-factor: 10;
         --sk-button-border-width: 0;
         --sk-button-border-color: transparent;
 
-        background-color: transparent;
-        color: var(--sk-button-color-base);
-        text-decoration: none;
-        border: none;
+        .sk-button-chrome
+        {
+            background-color: transparent;
+            color: var(--sk-button-color-base);
+            text-decoration: none;
+            border: none;
+        }
 
-        &:hover:not(:disabled)
+        &:hover:not(:disabled) .sk-button-chrome
         {
             color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
             text-decoration-color: var(--sk-button-text);
             text-decoration: underline;
         }
 
-        &:active:not(:disabled)
+        &:active:not(:disabled) .sk-button-chrome
         {
             color: var(--sk-button-text);
             text-decoration-color: var(--sk-button-border-hover);
@@ -348,26 +391,28 @@
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Outer Hit Zone
 //----------------------------------------------------------------------------------------------------------------------
 
 .sk-button
 {
-    // Base styles
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--sk-button-gap);
-    font-weight: var(--sk-button-font-weight);
-    font-size: var(--sk-button-font-size-base);
-    line-height: var(--sk-button-line-height);
+    flex-shrink: 0;
+
+    // Strip default UA styling; chrome paints the button visually.
+    background: transparent;
+    border: none;
+    padding: 0;
     text-decoration: none; // Remove underline when rendered as anchor tag
-    border-width: var(--sk-button-border-width);
-    border-style: solid;
+    appearance: none;
+    font-family: inherit;
     cursor: pointer;
     user-select: none;
     touch-action: manipulation;
-    flex-shrink: 0;
 
     // Override list marker color to match component kind
     // Uses generic --sk-kind-color set by kind mixins
@@ -376,119 +421,67 @@
         color: var(--sk-kind-color, var(--sk-button-color-base));
     }
 
-    // Apply cut-border mixin for beveled corners with fallback
-    @include cut-border(
-        $cut: calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)),
-        $border-width: var(--sk-button-border-width),
-        $border-color: var(--sk-button-border-color),
-        $corners: (top-left bottom-right)
-    );
+    //------------------------------------------------------------------------------------------------------------------
+    // Coarse-pointer touch-target floor (44px minimum on touch devices).
+    // Chrome stays at its natural size; the button itself grows so the tap target is comfortable.
+    // The `dense` prop opts out for tight toolbars and data tables where the consumer accepts the tradeoff.
+    //------------------------------------------------------------------------------------------------------------------
 
-    // Apply glow shadow (only works in modern browsers with corner-shape support)
-    // Fallback browsers clip the shadow due to clip-path limitations
-    @supports (corner-shape: bevel)
+    &:not(.sk-dense)
     {
-        box-shadow: var(--sk-button-glow-shadow);
-    }
-
-    // Transitions
-    transition:
-        color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
-        background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
-        border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
-        box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
+        @include touch
+        {
+            min-height: 44px;
 
-    // Remove default button styles
-    appearance: none;
-    font-family: inherit;
+            &.sk-icon-only
+            {
+                min-width: 44px;
+            }
+        }
+    }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Size variants
+    // Size variants -- set chrome sizing vars; .sk-button-chrome consumes them below.
     //------------------------------------------------------------------------------------------------------------------
 
     &.sk-xs
     {
-        --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs) / var(--sk-button-radius-factor));
-
-        height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
-        padding-left: var(--sk-button-padding-xs);
-        padding-right: var(--sk-button-padding-xs);
-        font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
-
-        @include cut-border(
-            $cut: var(--sk-button-cut-size),
-            $border-width: var(--sk-button-border-width),
-            $border-color: var(--sk-button-border-color),
-            $corners: (top-left bottom-right)
-        );
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
+        --sk-button-current-padding-x: var(--sk-button-padding-xs);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
     &.sk-sm
     {
-        --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm) / var(--sk-button-radius-factor));
-
-        height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
-        padding-left: var(--sk-button-padding-base);
-        padding-right: var(--sk-button-padding-base);
-        font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
-
-        @include cut-border(
-            $cut: var(--sk-button-cut-size),
-            $border-width: var(--sk-button-border-width),
-            $border-color: var(--sk-button-border-color),
-            $corners: (top-left bottom-right)
-        );
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
+        --sk-button-current-padding-x: var(--sk-button-padding-base);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
     &.sk-md
     {
-        --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-md) / var(--sk-button-radius-factor));
-
-        height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
-        padding-left: var(--sk-button-padding-base);
-        padding-right: var(--sk-button-padding-base);
-        font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
-
-        @include cut-border(
-            $cut: var(--sk-button-cut-size),
-            $border-width: var(--sk-button-border-width),
-            $border-color: var(--sk-button-border-color),
-            $corners: (top-left bottom-right)
-        );
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
+        --sk-button-current-padding-x: var(--sk-button-padding-base);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
     &.sk-lg
     {
-        --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg) / var(--sk-button-radius-factor));
-
-        height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
-        padding-left: var(--sk-button-padding-base);
-        padding-right: var(--sk-button-padding-base);
-        font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
-
-        @include cut-border(
-            $cut: var(--sk-button-cut-size),
-            $border-width: var(--sk-button-border-width),
-            $border-color: var(--sk-button-border-color),
-            $corners: (top-left bottom-right)
-        );
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
+        --sk-button-current-padding-x: var(--sk-button-padding-base);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
     &.sk-xl
     {
-        --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl) / var(--sk-button-radius-factor));
-
-        height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
-        padding-left: var(--sk-button-padding-xl);
-        padding-right: var(--sk-button-padding-xl);
-        font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
-
-        @include cut-border(
-            $cut: var(--sk-button-cut-size),
-            $border-width: var(--sk-button-border-width),
-            $border-color: var(--sk-button-border-color),
-            $corners: (top-left bottom-right)
-        );
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
+        --sk-button-current-padding-x: var(--sk-button-padding-xl);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -506,7 +499,11 @@
         &.sk-neutral
         {
             --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base), white 25%);
-            color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+
+            .sk-button-chrome
+            {
+                color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+            }
         }
     }
 
@@ -536,7 +533,10 @@
         &:disabled,
         &.sk-loading
         {
-            background-color: oklch(from var(--sk-button-bg) l c h / 0.45);
+            .sk-button-chrome
+            {
+                background-color: oklch(from var(--sk-button-bg) l c h / 0.45);
+            }
         }
 
         // Special case: neutral text and border are lighter (halfway to white) for better differentiation
@@ -546,7 +546,11 @@
                 from color-mix(in oklch, var(--sk-button-border-base), white 50%)
                 l c h / var(--sk-button-subtle-border-opacity)
             );
-            color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+
+            .sk-button-chrome
+            {
+                color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+            }
         }
     }
 
@@ -556,15 +560,13 @@
 
     &.sk-ghost
     {
-        border-color: transparent;
-
         @each $kind in $kinds
         {
             @include button-ghost-kind($kind);
         }
 
         // Special case: neutral text is lighter (halfway to white) for better differentiation
-        &.sk-neutral
+        &.sk-neutral .sk-button-chrome
         {
             color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
         }
@@ -576,11 +578,14 @@
 
     &.sk-link
     {
-        border-color: transparent;
-        padding-left: 0;
-        padding-right: 0;
-        text-decoration: underline;
-        text-underline-offset: 2px;
+        --sk-button-current-padding-x: 0;
+
+        .sk-button-chrome
+        {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+            border-color: transparent;
+        }
 
         @each $kind in $kinds
         {
@@ -590,9 +595,12 @@
         // Special case: neutral text is lighter (halfway to white) for better differentiation
         &.sk-neutral
         {
-            color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+            .sk-button-chrome
+            {
+                color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
+            }
 
-            &:hover:not(:disabled)
+            &:hover:not(:disabled) .sk-button-chrome
             {
                 color: color-mix(in oklch, var(--sk-button-color-base), white 60%);
             }
@@ -632,121 +640,190 @@
         &.sk-solid
         {
             --sk-button-border-color: var(--sk-button-border-hover);
-            background-color: var(--sk-button-bg-hover);
-            color: var(--sk-button-text);
+
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg-hover);
+                color: var(--sk-button-text);
+            }
 
             &:hover:not(:disabled)
             {
                 --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-                background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+
+                .sk-button-chrome
+                {
+                    background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+                }
             }
         }
 
         &.sk-outline
         {
             --sk-button-border-color: var(--sk-button-border-hover);
-            background-color: var(--sk-button-bg);
-            color: var(--sk-button-text);
+
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg);
+                color: var(--sk-button-text);
+            }
         }
 
         &.sk-subtle
         {
             --sk-button-border-color: transparent;
-            background-color: var(--sk-button-bg);
-            color: var(--sk-button-text);
+
+            .sk-button-chrome
+            {
+                background-color: var(--sk-button-bg);
+                color: var(--sk-button-text);
+            }
 
             &:hover:not(:disabled)
             {
                 --sk-button-border-color: transparent;
                 --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-                background-color: var(--sk-button-bg-hover);
+
+                .sk-button-chrome
+                {
+                    background-color: var(--sk-button-bg-hover);
+                }
             }
         }
 
         &.sk-ghost
         {
             --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
-            border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
-            background-color: var(--sk-button-outline-bg);
-            color: var(--sk-button-text);
+
+            .sk-button-chrome
+            {
+                border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+                background-color: var(--sk-button-outline-bg);
+                color: var(--sk-button-text);
+            }
         }
 
-        &.sk-link
+        &.sk-link .sk-button-chrome
         {
             color: var(--sk-button-text);
         }
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Loading spinner
+    // Icon-only: chrome becomes square
     //------------------------------------------------------------------------------------------------------------------
 
-    .sk-button-loader
-    {
-        position: absolute;
-        width: 1em;
-        height: 1em;
-        border: 2px solid currentColor;
-        border-right-color: transparent;
-        border-radius: 50%;
-        animation: sk-button-spin 0.6s linear infinite;
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Icon support
-    //------------------------------------------------------------------------------------------------------------------
-
-    // Icon-only buttons have square aspect ratio and larger icons
     &.sk-icon-only
     {
-        padding-left: 0;
-        padding-right: 0;
-        aspect-ratio: 1;
+        --sk-button-current-padding-x: 0;
+
+        .sk-button-chrome
+        {
+            aspect-ratio: 1;
+        }
 
         .sk-button-icon
         {
             font-size: 1.25em;
         }
     }
+}
 
-    // Icon wrappers
-    .sk-button-icon
-    {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        line-height: 1;
+//----------------------------------------------------------------------------------------------------------------------
+// Inner Visual Chrome
+//
+// Lives inside .sk-button. Draws the button body at its natural size. Consumes the
+// --sk-button-current-* vars set by size variants on the outer .sk-button.
+//----------------------------------------------------------------------------------------------------------------------
 
-        svg
-        {
-            width: 1em;
-            height: 1em;
-            display: block;
-        }
-    }
+.sk-button-chrome
+{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sk-button-gap);
+    height: var(--sk-button-current-height);
+    padding-left: var(--sk-button-current-padding-x);
+    padding-right: var(--sk-button-current-padding-x);
+    font-weight: var(--sk-button-font-weight);
+    font-size: var(--sk-button-current-font-size);
+    line-height: var(--sk-button-line-height);
+    border-width: var(--sk-button-border-width);
+    border-style: solid;
+    flex-shrink: 0;
+    box-sizing: border-box;
+
+    @include cut-border(
+        $cut: var(--sk-button-current-cut-size),
+        $border-width: var(--sk-button-border-width),
+        $border-color: var(--sk-button-border-color),
+        $corners: (top-left bottom-right)
+    );
 
-    // Button content wrapper
-    .sk-button-content
+    // Apply glow shadow (only works in modern browsers with corner-shape support)
+    // Fallback browsers clip the shadow due to clip-path limitations
+    @supports (corner-shape: bevel)
     {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--sk-button-gap);
+        box-shadow: var(--sk-button-glow-shadow);
+    }
 
-        &.loading
-        {
-            visibility: hidden;
-        }
+    transition:
+        color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
+        background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
+        border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing),
+        box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Inner content pieces (live inside .sk-button-chrome)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-button-loader
+{
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: sk-button-spin 0.6s linear infinite;
+}
+
+.sk-button-icon
+{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1;
+
+    svg
+    {
+        width: 1em;
+        height: 1em;
+        display: block;
     }
+}
 
-    // Button text wrapper
-    .sk-button-text
+.sk-button-content
+{
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sk-button-gap);
+
+    &.loading
     {
-        display: inline-flex;
-        align-items: center;
+        visibility: hidden;
     }
 }
 
+.sk-button-text
+{
+    display: inline-flex;
+    align-items: center;
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Animations
 //----------------------------------------------------------------------------------------------------------------------