From 8fbfcf79735e2165f75f0a38f927342bf2a9faa3 Mon Sep 17 00:00:00 2001
From: Trevor Burnham <trevorburnham@gmail.com>
Date: Sun, 4 Jan 2026 13:56:00 -0500
Subject: [PATCH] fix: Deduplicate CSS by hoisting shared styles to base
 selectors

Move repeated declarations from size/variant-specific selectors to base
classes, reducing compiled CSS output:

- icon: box-sizing and vertical-align to .icon base class
- spinner: remove redundant box-sizing from size loop (already on .root)
- tiles: remove redundant box-sizing from column loop (already on .tile-container)
- button: hoist text-decoration and position to .button base class

Total savings: ~1.3KB across affected components.
---
 src/button/styles.scss  | 5 +----
 src/icon/mixins.scss    | 3 +--
 src/icon/styles.scss    | 8 +++++++-
 src/spinner/mixins.scss | 1 -
 src/tiles/styles.scss   | 1 -
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/button/styles.scss b/src/button/styles.scss
index 2875849457..87c253c534 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -18,8 +18,6 @@
   box-shadow: var(#{custom-props.$styleBoxShadowDefault});
   border-block-width: map.get($variant, 'border-width');
   border-inline-width: map.get($variant, 'border-width');
-  position: relative;
-  text-decoration: none;
   padding-block: map.get($variant, 'padding');
   padding-inline: map.get($variant, 'padding');
   font-weight: map.get($variant, 'font-weight');
@@ -29,7 +27,6 @@
     border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
     color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
     box-shadow: var(#{custom-props.$styleBoxShadowHover});
-    text-decoration: none;
   }
 
   &:active {
@@ -44,7 +41,6 @@
     border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
     color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
     box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
-    text-decoration: none;
     cursor: auto;
   }
 }
@@ -69,6 +65,7 @@
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
+  position: relative;
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
     var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
     var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
diff --git a/src/icon/mixins.scss b/src/icon/mixins.scss
index 59b29343b0..a12439783b 100644
--- a/src/icon/mixins.scss
+++ b/src/icon/mixins.scss
@@ -67,7 +67,7 @@ $_icon-sizes: (
 
     &.size-#{$name} {
       inline-size: $size;
-      box-sizing: border-box;
+
       &-mapped-height {
         block-size: $supportedLineHeight;
         padding-block: $padding;
@@ -78,7 +78,6 @@ $_icon-sizes: (
       > img {
         inline-size: $size;
         block-size: $size;
-        vertical-align: top;
       }
 
       > svg {
diff --git a/src/icon/styles.scss b/src/icon/styles.scss
index ee42466115..be894768f0 100644
--- a/src/icon/styles.scss
+++ b/src/icon/styles.scss
@@ -11,6 +11,8 @@
   position: relative;
   display: inline-block;
   vertical-align: top;
+  box-sizing: border-box;
+
   &-flex-height {
     display: inline-flex;
     align-items: center;
@@ -23,8 +25,12 @@
     pointer-events: none;
   }
 
-  @include mixins.style-svg();
+  > svg,
+  > img {
+    vertical-align: top;
+  }
 
+  @include mixins.style-svg();
   @include mixins.make-icon-sizes;
   @include mixins.make-icon-variants;
 
diff --git a/src/spinner/mixins.scss b/src/spinner/mixins.scss
index cd37361973..c205ef1423 100644
--- a/src/spinner/mixins.scss
+++ b/src/spinner/mixins.scss
@@ -49,7 +49,6 @@ $_spinner-variants: (
       padding-block: $padding;
       padding-inline: $padding;
       margin-block: $margin;
-      box-sizing: border-box;
     }
   }
 }
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index 06d534f12d..a99f688541 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -89,7 +89,6 @@ $gutter: awsui.$space-tile-gutter;
       & > .tile-container {
         margin-block: calc((#{$gutter} / 4));
         margin-inline: calc((#{$gutter} / 4));
-        box-sizing: border-box;
         @include make-column(12);
         &.breakpoint-xs {
           @include make-column(map.get($columns-setting, 'xs'));