From 979ca7fefb81869a4b3b7494c151062f62ec3661 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:08:25 -0500
Subject: [PATCH 01/18] Initial commit of migrated changes from revert.

---
 src/alert/styles.scss                         |  35 +++---
 src/anchor-navigation/styles.scss             |  33 +++--
 src/annotation-context/annotation/arrow.scss  |  35 +++---
 src/annotation-context/annotation/styles.scss |  13 +-
 src/app-layout/constants.scss                 |   5 +-
 src/app-layout/content-wrapper/styles.scss    |  14 +--
 src/app-layout/drawer/styles.scss             |  19 ++-
 src/app-layout/mobile-toolbar/styles.scss     |  19 +--
 src/app-layout/notifications/styles.scss      |   2 +-
 src/app-layout/split-panel/styles.scss        |   2 +-
 src/app-layout/styles.scss                    |  14 +--
 src/app-layout/toggles/styles.scss            |   7 +-
 src/app-layout/visual-refresh/background.scss |   6 +-
 src/app-layout/visual-refresh/drawers.scss    |  41 ++++---
 src/app-layout/visual-refresh/layout.scss     |   4 +-
 src/app-layout/visual-refresh/main.scss       |   7 +-
 .../visual-refresh/mobile-toolbar.scss        |  13 +-
 src/app-layout/visual-refresh/navigation.scss |  29 ++---
 .../visual-refresh/notifications.scss         |   2 +-
 .../visual-refresh/split-panel.scss           |  23 ++--
 src/app-layout/visual-refresh/tools.scss      |  33 +++--
 .../visual-refresh/trigger-button.scss        |  32 +++--
 src/area-chart/styles.scss                    |   5 +-
 src/attribute-editor/styles.scss              |  11 +-
 src/autosuggest/styles.scss                   |   4 +-
 src/badge/styles.scss                         |   8 +-
 src/box/base-styles.scss                      |   6 +-
 src/box/layout.scss                           |   2 +
 src/box/text.scss                             |   6 +-
 src/breadcrumb-group/item/styles.scss         |   5 +-
 src/breadcrumb-group/styles.scss              |  25 ++--
 .../category-elements/styles.scss             |  59 +++++----
 src/button-dropdown/item-element/styles.scss  |  35 +++---
 .../mobile-expandable-group/styles.scss       |   6 +-
 src/button-dropdown/styles.scss               |  31 ++---
 src/button/styles.scss                        |   3 +-
 src/calendar/styles.scss                      |  56 ++++++---
 src/cards/index.tsx                           |   3 +-
 src/cards/styles.scss                         |  94 +++++++--------
 src/code-editor/ace-editor.scss               |  24 ++--
 src/code-editor/pane.scss                     |  44 +++----
 src/code-editor/resizable-box/styles.scss     |  10 +-
 src/code-editor/styles.scss                   |  68 ++++++-----
 .../content-display-option.scss               |  28 +++--
 .../content-display/styles.scss               |   8 +-
 src/collection-preferences/styles.scss        |   2 +-
 .../visible-content.scss                      |  21 ++--
 .../flexible-column-layout/styles.scss        |   9 +-
 src/column-layout/styles.scss                 |  24 ++--
 src/container/shared.scss                     |   8 +-
 src/container/styles.scss                     | 114 ++++++++++--------
 src/content-layout/styles.scss                |   8 +-
 src/date-picker/styles.scss                   |   6 +-
 .../calendar/grids/styles.scss                |  47 +++++---
 .../relative-range/styles.scss                |  16 +--
 src/date-range-picker/styles.scss             |  47 ++++----
 src/drawer/styles.scss                        |  23 ++--
 src/expandable-section/styles.scss            |  77 ++++++------
 src/file-upload/dropzone/styles.scss          |   8 +-
 src/file-upload/file-option/styles.scss       |  14 +--
 src/file-upload/styles.scss                   |   2 +-
 src/flashbar/collapsible.scss                 |  50 ++++----
 src/flashbar/styles.scss                      |  48 +++++---
 src/form-field/styles.scss                    |  10 +-
 src/form/styles.scss                          |  20 +--
 65 files changed, 821 insertions(+), 662 deletions(-)

diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index 6847566ff4..562171b95f 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -25,9 +25,13 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
-  border-radius: awsui.$border-radius-alert;
   border: awsui.$border-field-width solid;
-  padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
+  border-start-start-radius: awsui.$border-radius-alert;
+  border-start-end-radius: awsui.$border-radius-alert;
+  border-end-start-radius: awsui.$border-radius-alert;
+  border-end-end-radius: awsui.$border-radius-alert;
+  padding-block: awsui.$space-alert-vertical;
+  padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
 
   &.with-dismiss,
@@ -52,7 +56,7 @@
 
 .action {
   white-space: nowrap;
-  margin-left: awsui.$space-alert-action-left;
+  margin-inline-start: awsui.$space-alert-action-left;
 }
 
 .action-slot,
@@ -73,14 +77,17 @@
 }
 
 .text {
-  min-width: 0;
-  padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
-  margin: awsui.$space-scaled-xxs awsui.$space-xxs;
+  min-inline-size: 0;
+  // To account for vertical misalignment due to button borders
+  padding-block: awsui.$border-field-width;
+  padding-inline: 0;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: awsui.$space-xxs;
   &.icon {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   &.message {
-    margin-right: awsui.$space-alert-message-right;
+    margin-inline-end: awsui.$space-alert-message-right;
   }
 }
 
@@ -88,18 +95,18 @@
   // Below the breakpoint, arrange actions below the content
   > .action {
     grid-row: 2;
-    margin-bottom: awsui.$space-xxs;
+    margin-block-end: awsui.$space-xxs;
   }
 
   // Indent actions according to the size of the alert icon
   &.icon-size-medium > .action {
-    margin-left: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
   }
   &.icon-size-big > .action {
-    margin-left: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
   }
   &.icon-size-normal > .action {
-    margin-left: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
   }
 }
 
@@ -108,8 +115,8 @@
 }
 
 .dismiss {
-  margin-right: calc(-1 * #{awsui.$space-xxs});
-  margin-left: awsui.$space-s;
+  margin-inline-end: calc(-1 * #{awsui.$space-xxs});
+  margin-inline-start: awsui.$space-s;
 }
 
 .dismiss-button {
diff --git a/src/anchor-navigation/styles.scss b/src/anchor-navigation/styles.scss
index 09475a5126..75dc394ccf 100644
--- a/src/anchor-navigation/styles.scss
+++ b/src/anchor-navigation/styles.scss
@@ -16,20 +16,25 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 
 .anchor-list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   position: relative;
   text-indent: 0;
 
   &::before {
     content: '';
     background-color: awsui.$color-border-divider-default;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
-    bottom: $guide-line-offset;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
+    inset-block-end: $guide-line-offset;
     pointer-events: none;
     position: absolute;
-    top: $guide-line-offset;
-    width: $guide-line-width;
+    inset-block-start: $guide-line-offset;
+    inline-size: $guide-line-width;
   }
 }
 
@@ -42,7 +47,8 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 
   color: awsui.$color-text-body-secondary;
   font-weight: styles.$font-weight-normal;
-  margin: awsui.$space-scaled-xxs 0;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: 0;
 
   &--active {
     position: relative;
@@ -50,12 +56,15 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     &::before {
       content: '';
       background-color: awsui.$color-text-accent;
-      border-radius: awsui.$border-radius-tabs-focus-ring;
-      bottom: $guide-line-offset;
+      border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+      border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+      border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+      border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
+      inset-block-end: $guide-line-offset;
       pointer-events: none;
       position: absolute;
-      top: $guide-line-offset;
-      width: $guide-line-width;
+      inset-block-start: $guide-line-offset;
+      inline-size: $guide-line-width;
     }
   }
 }
@@ -104,7 +113,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 
 .anchor-link-info {
-  margin-left: awsui.$space-xs;
+  margin-inline-start: awsui.$space-xs;
   @include styles.font-body-s;
   @include styles.font-smoothing;
   font-weight: awsui.$font-button-weight;
diff --git a/src/annotation-context/annotation/arrow.scss b/src/annotation-context/annotation/arrow.scss
index 5771fa55ff..d2124a93fc 100644
--- a/src/annotation-context/annotation/arrow.scss
+++ b/src/annotation-context/annotation/arrow.scss
@@ -26,31 +26,33 @@
   $arrow-width: 2 * styles.$base-size;
   $arrow-height: $arrow-width * 0.5;
 
-  width: $arrow-width;
-  height: $arrow-height;
+  inline-size: $arrow-width;
+  block-size: $arrow-height;
 
   &-outer,
   &-inner {
     position: absolute;
     overflow: hidden;
-    width: $arrow-width;
-    height: $arrow-height;
+    inline-size: $arrow-width;
+    block-size: $arrow-height;
 
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 
     &::after {
       content: '';
       box-sizing: border-box;
       display: inline-block;
       position: absolute;
-      border-radius: 2px 0 0 0;
-
-      bottom: 0;
-      left: 0;
-
-      width: $arrow-edge-length;
-      height: $arrow-edge-length;
+      border-start-start-radius: 2px;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+
+      inline-size: $arrow-edge-length;
+      block-size: $arrow-edge-length;
       transform: rotate(45deg);
       transform-origin: 0 100%;
     }
@@ -63,10 +65,13 @@
   }
 
   &-inner {
-    top: 2px;
+    inset-block-start: 2px;
 
     &::after {
-      border-radius: 1px 0 0 0;
+      border-start-start-radius: 1px;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
       background-color: awsui.$color-background-status-info;
     }
   }
diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
index dcf7969078..4d54d4be35 100644
--- a/src/annotation-context/annotation/styles.scss
+++ b/src/annotation-context/annotation/styles.scss
@@ -22,7 +22,7 @@
 
 .description {
   overflow: hidden;
-  margin-top: awsui.$space-xxs;
+  margin-block-start: awsui.$space-xxs;
 }
 
 .actionBar {
@@ -33,24 +33,25 @@
 }
 
 .stepCounter {
-  margin-right: 2 * styles.$base-size;
+  margin-inline-end: 2 * styles.$base-size;
 }
 
 .divider {
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .hotspot {
   @include styles.styles-reset;
   background: transparent;
   border: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   cursor: pointer;
   scroll-margin: var(#{custom-props.$contentScrollMargin}, 40px 0 0 0);
 
   // These dimensions match the dimensions of the contained SVG icon.
-  width: 16px;
-  height: 16px;
+  inline-size: 16px;
+  block-size: 16px;
 
   &:focus {
     outline: none;
diff --git a/src/app-layout/constants.scss b/src/app-layout/constants.scss
index fd81fec8c6..8da0ae21e5 100644
--- a/src/app-layout/constants.scss
+++ b/src/app-layout/constants.scss
@@ -8,9 +8,8 @@
 
 // Toggle should have 40px width, whereas button is 26px wide.
 // 40 - 26 = 14px in total or 7px on each side
-$_toggle-padding-horizontal: 0.7 * styles.$base-size;
-$_toggle-padding-vertical: awsui.$space-xxs;
-$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
+$toggle-padding-horizontal: 0.7 * styles.$base-size;
+$toggle-padding-vertical: awsui.$space-xxs;
 
 $sidebar-size-closed: 4 * styles.$base-size;
 
diff --git a/src/app-layout/content-wrapper/styles.scss b/src/app-layout/content-wrapper/styles.scss
index dacfcec727..0fa283d7f4 100644
--- a/src/app-layout/content-wrapper/styles.scss
+++ b/src/app-layout/content-wrapper/styles.scss
@@ -8,20 +8,20 @@
 @use '../constants' as constants;
 
 .content-wrapper {
-  padding-left: awsui.$space-layout-content-horizontal;
-  padding-right: awsui.$space-layout-content-horizontal;
+  padding-inline-start: awsui.$space-layout-content-horizontal;
+  padding-inline-end: awsui.$space-layout-content-horizontal;
   &-mobile {
-    padding-left: awsui.$space-l;
-    padding-right: awsui.$space-l;
+    padding-inline-start: awsui.$space-l;
+    padding-inline-end: awsui.$space-l;
   }
 }
 
 .content-type-dashboard {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   @each $breakpoint, $width in constants.$dashboard-content-widths {
     @include styles.media-breakpoint-up($breakpoint) {
-      max-width: $width;
+      max-inline-size: $width;
     }
   }
 }
diff --git a/src/app-layout/drawer/styles.scss b/src/app-layout/drawer/styles.scss
index b8c0390cbb..8bbc15bbe4 100644
--- a/src/app-layout/drawer/styles.scss
+++ b/src/app-layout/drawer/styles.scss
@@ -14,7 +14,8 @@ $drawer-z-index-mobile: 1001;
 
 .toggle {
   box-sizing: border-box;
-  padding: constants.$toggle-padding;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
 }
 
 .drawer-triggers {
@@ -30,7 +31,7 @@ $drawer-z-index-mobile: 1001;
     z-index: $drawer-z-index;
   }
   &-closed {
-    min-width: constants.$sidebar-size-closed;
+    min-inline-size: constants.$sidebar-size-closed;
     &.drawer-mobile {
       display: none;
     }
@@ -42,13 +43,10 @@ $drawer-z-index-mobile: 1001;
   background-color: awsui.$color-background-layout-panel-content;
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
   }
   .drawer-closed > & {
-    width: constants.$sidebar-size-closed;
+    inline-size: constants.$sidebar-size-closed;
     &.drawer-content-clickable {
       cursor: pointer;
       color: awsui.$color-text-interactive-default;
@@ -62,7 +60,7 @@ $drawer-z-index-mobile: 1001;
   }
   > .drawer-resize-content {
     overflow: auto;
-    height: 100%;
+    block-size: 100%;
     position: relative;
   }
 }
@@ -75,11 +73,12 @@ $drawer-z-index-mobile: 1001;
 }
 
 .drawer-trigger {
-  padding: constants.$toggle-padding;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
   cursor: pointer;
   color: awsui.$color-text-interactive-default;
   &:not(:first-child) {
-    border-top: 1px solid awsui.$color-border-layout;
+    border-block-start: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     color: awsui.$color-text-layout-toggle-hover;
diff --git a/src/app-layout/mobile-toolbar/styles.scss b/src/app-layout/mobile-toolbar/styles.scss
index 37e6798b25..dad3cd1ca8 100644
--- a/src/app-layout/mobile-toolbar/styles.scss
+++ b/src/app-layout/mobile-toolbar/styles.scss
@@ -17,33 +17,34 @@
   align-items: center;
   flex-shrink: 0;
   z-index: 1000;
-  width: 100%;
+  inline-size: 100%;
   box-sizing: border-box;
   background-color: awsui.$color-background-layout-mobile-panel;
   box-shadow: awsui.$shadow-panel;
-  height: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
+  block-size: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
 }
 
 .mobile-bar-breadcrumbs {
-  min-width: 0;
+  min-inline-size: 0;
   flex: 1;
-  margin-left: awsui.$space-m;
-  margin-right: awsui.$space-m;
+  margin-inline-start: awsui.$space-m;
+  margin-inline-end: awsui.$space-m;
 }
 
 .mobile-toggle {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
-  padding: constants.$toggle-padding;
-  width: constants.$sidebar-size-closed;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
+  inline-size: constants.$sidebar-size-closed;
   color: awsui.$color-text-interactive-default;
   &-type-navigation {
-    border-right: 1px solid awsui.$color-border-layout;
+    border-inline-end: 1px solid awsui.$color-border-layout;
   }
   &-type-tools,
   &-type-drawer {
-    border-left: 1px solid awsui.$color-border-layout;
+    border-inline-start: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     background: awsui.$color-background-layout-panel-hover;
diff --git a/src/app-layout/notifications/styles.scss b/src/app-layout/notifications/styles.scss
index 9f9bae4d3e..24574f8e7f 100644
--- a/src/app-layout/notifications/styles.scss
+++ b/src/app-layout/notifications/styles.scss
@@ -17,7 +17,7 @@
 }
 
 .notifications-sticky {
-  top: 0;
+  inset-block-start: 0;
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }
diff --git a/src/app-layout/split-panel/styles.scss b/src/app-layout/split-panel/styles.scss
index bd023b21df..26913eb543 100644
--- a/src/app-layout/split-panel/styles.scss
+++ b/src/app-layout/split-panel/styles.scss
@@ -5,7 +5,7 @@
 @use '../constants' as constants;
 
 .drawer-displayed {
-  min-width: constants.$sidebar-size-closed;
+  min-inline-size: constants.$sidebar-size-closed;
 }
 
 .drawer-content {
diff --git a/src/app-layout/styles.scss b/src/app-layout/styles.scss
index 8fe634fa42..4c80a3aa74 100644
--- a/src/app-layout/styles.scss
+++ b/src/app-layout/styles.scss
@@ -58,7 +58,7 @@
 
 .layout-main {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   background-color: awsui.$color-background-layout-main;
   position: relative;
   &-scrollable {
@@ -73,24 +73,24 @@
 }
 
 .breadcrumbs-desktop {
-  padding-top: awsui.$space-scaled-m;
-  padding-bottom: awsui.$space-scaled-s;
+  padding-block-start: awsui.$space-scaled-m;
+  padding-block-end: awsui.$space-scaled-s;
 }
 
 .content-header-wrapper {
-  padding-bottom: awsui.$space-content-header-padding-bottom;
+  padding-block-end: awsui.$space-content-header-padding-bottom;
 }
 
 .content-wrapper {
-  padding-bottom: awsui.$space-layout-content-bottom;
+  padding-block-end: awsui.$space-layout-content-bottom;
 }
 
 .content-overlapped {
-  margin-top: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
+  margin-block-start: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
 }
 
 .content-extra-top-padding {
   // extra top padding when there are no breadcrumbs above,
   // applied to content or content header, whatever comes first
-  padding-top: awsui.$space-scaled-m;
+  padding-block-start: awsui.$space-scaled-m;
 }
diff --git a/src/app-layout/toggles/styles.scss b/src/app-layout/toggles/styles.scss
index 2e8b46f825..bba6b739f6 100644
--- a/src/app-layout/toggles/styles.scss
+++ b/src/app-layout/toggles/styles.scss
@@ -13,7 +13,8 @@
   // resemble button styles with an extra 1px offset for non-existing here border width
   $padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
   $padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
-  padding: $padding-vertical $padding-horizontal;
+  padding-block: $padding-vertical;
+  padding-inline: $padding-horizontal;
   background: transparent;
   color: currentColor;
   &:focus {
@@ -28,7 +29,7 @@
 .close-button {
   position: absolute;
   outline: none;
-  right: awsui.$space-m;
-  top: awsui.$size-vertical-panel-icon-offset;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: awsui.$size-vertical-panel-icon-offset;
   z-index: 1;
 }
diff --git a/src/app-layout/visual-refresh/background.scss b/src/app-layout/visual-refresh/background.scss
index 0ea69feee2..23fa3cdcba 100644
--- a/src/app-layout/visual-refresh/background.scss
+++ b/src/app-layout/visual-refresh/background.scss
@@ -21,15 +21,15 @@ div.background {
     grid-column: 1 / span 5;
     grid-row: 1 / 10;
     position: sticky;
-    top: var(#{custom-props.$headerHeight});
+    inset-block-start: var(#{custom-props.$headerHeight});
     z-index: 799;
 
     &:not(.has-sticky-notifications) {
-      height: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
+      block-size: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
     }
 
     &.has-sticky-notifications {
-      height: calc(
+      block-size: calc(
         var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight})
       );
     }
diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 2f46cea8d2..3a18c389e6 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -12,19 +12,20 @@
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   pointer-events: none;
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
+    box-shadow: awsui.$shadow-panel;
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     /* stylelint-disable scss/operator-no-newline-after */
-    max-width: calc(
+    max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) -
         var(#{custom-props.$defaultMinContentWidth}) - var(#{custom-props.$contentGapRight})
     );
@@ -33,7 +34,7 @@
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     position: fixed;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1001;
 
     /*
@@ -44,7 +45,7 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -53,14 +54,14 @@
   @include styles.styles-reset;
   background-color: transparent;
   box-sizing: border-box;
-  height: 100%;
+  block-size: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
 
   &:not(.has-multiple-triggers).has-open-drawer {
-    width: 0;
+    inline-size: 0;
   }
 
   &.has-multiple-triggers.has-open-drawer {
@@ -68,7 +69,7 @@
   }
 
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
-    width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+    inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
 }
 
@@ -81,8 +82,8 @@
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xs;
-  padding-top: awsui.$space-scaled-s;
-  width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+  padding-block-start: awsui.$space-scaled-s;
+  inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
 
   &:not(.has-multiple-triggers).has-open-drawer {
     opacity: 0;
@@ -93,7 +94,8 @@
   }
 
   > .drawers-trigger-overflow {
-    padding: 0 1px;
+    padding-block: 0;
+    padding-inline: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -102,7 +104,7 @@
 
 .drawers-trigger {
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    width: constants.$sidebar-size-closed;
+    inline-size: constants.$sidebar-size-closed;
     display: flex;
     justify-content: center;
   }
@@ -116,7 +118,7 @@
   grid-template-columns: awsui.$space-m 1fr;
   flex-shrink: 0;
 
-  height: 100%;
+  block-size: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -127,7 +129,7 @@
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;
-    width: var(#{custom-props.$drawerSize});
+    inline-size: var(#{custom-props.$drawerSize});
     display: grid;
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
     grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
@@ -150,21 +152,20 @@
   > .drawer-slider {
     grid-column: 1;
     grid-row: 1;
-    height: 100%;
+    block-size: 100%;
     display: flex;
     align-items: center;
   }
 
   &:not(.is-drawer-open) {
     opacity: 0;
-    width: 0;
+    inline-size: 0;
   }
 
   &.is-drawer-open {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     opacity: 1;
-    width: var(#{custom-props.$drawerSize});
+    inline-size: var(#{custom-props.$drawerSize});
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
@@ -176,7 +177,7 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     &.is-drawer-open {
       #{custom-props.$drawerSize}: 100vw;
-      width: 100vw;
+      inline-size: 100vw;
     }
   }
 }
diff --git a/src/app-layout/visual-refresh/layout.scss b/src/app-layout/visual-refresh/layout.scss
index a671c849a8..4e75497a39 100644
--- a/src/app-layout/visual-refresh/layout.scss
+++ b/src/app-layout/visual-refresh/layout.scss
@@ -76,7 +76,7 @@ explicitly set in script.
     var(#{custom-props.$mainGap})
     var(#{custom-props.$overlapHeight}) // main template area with overlap
     var(#{custom-props.$mainTemplateRows}); // main template area
-  min-height: var(#{custom-props.$contentHeight});
+  min-block-size: var(#{custom-props.$contentHeight});
   position: relative;
 
   /*
@@ -302,7 +302,7 @@ notifications top margin and some additional vertical space for aesthetics.
 .layout.disable-body-scroll {
   #{custom-props.$mainTemplateRows}: 1fr auto;
   #{custom-props.$offsetTop}: 0px;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   overflow-y: scroll;
 
   &.has-split-panel.split-panel-position-bottom {
diff --git a/src/app-layout/visual-refresh/main.scss b/src/app-layout/visual-refresh/main.scss
index 72c4b137b6..fce5219aa3 100644
--- a/src/app-layout/visual-refresh/main.scss
+++ b/src/app-layout/visual-refresh/main.scss
@@ -9,7 +9,7 @@
 
 .container {
   grid-area: main;
-  padding-bottom: awsui.$space-layout-content-bottom;
+  padding-block-end: awsui.$space-layout-content-bottom;
 
   /*
   If the split panel is in the bottom position additional padding will need to be
@@ -18,7 +18,7 @@
   sticky position of the split panel.
   */
   &.has-split-panel.split-panel-position-bottom {
-    padding-bottom: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
+    padding-block-end: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
   }
 
   /*
@@ -30,7 +30,8 @@
   */
   &.disable-content-paddings {
     grid-column: 1 / 6;
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
 
     @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
       &.is-navigation-open {
diff --git a/src/app-layout/visual-refresh/mobile-toolbar.scss b/src/app-layout/visual-refresh/mobile-toolbar.scss
index 6c364fd3e0..7c12acde94 100644
--- a/src/app-layout/visual-refresh/mobile-toolbar.scss
+++ b/src/app-layout/visual-refresh/mobile-toolbar.scss
@@ -10,17 +10,18 @@
 section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-layout-main;
-  border-bottom: 1px solid awsui.$color-border-divider-default;
+  border-block-end: 1px solid awsui.$color-border-divider-default;
   box-shadow: awsui.$shadow-sticky;
   box-sizing: border-box;
-  height: var(#{custom-props.$mobileBarHeight});
+  block-size: var(#{custom-props.$mobileBarHeight});
   display: grid;
   grid-area: mobileToolbar;
   grid-column: 1 / span 5;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 1000;
   &:not(.remove-high-contrast-header) {
     background-color: awsui.$color-background-layout-main;
@@ -29,7 +30,7 @@ section.mobile-toolbar {
 
   > .mobile-toolbar-nav {
     grid-column: 1;
-    margin-right: awsui.$space-m;
+    margin-inline-end: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
@@ -39,6 +40,6 @@ section.mobile-toolbar {
 
   > .mobile-toolbar-tools {
     grid-column: 3;
-    margin-left: awsui.$space-m;
+    margin-inline-start: awsui.$space-m;
   }
 }
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index ad31b59127..0049d9df2d 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -12,9 +12,9 @@
   display: flex;
   grid-column: 1;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   /*
@@ -34,7 +34,7 @@
   }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    left: 0;
+    inset-inline-start: 0;
     position: fixed;
     z-index: 1001;
 
@@ -46,13 +46,14 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
 
 nav.show-navigation {
-  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {
@@ -87,8 +88,9 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  bottom: 0;
-  height: 100%;
+  box-shadow: awsui.$shadow-panel;
+  inset-block-end: 0;
+  block-size: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -96,24 +98,23 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
-  border-right: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {
     from {
       opacity: 0;
-      width: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+      inline-size: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
     }
 
     to {
       opacity: 1;
-      width: var(#{custom-props.$navigationWidth});
+      inline-size: var(#{custom-props.$navigationWidth});
     }
   }
 
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
-    width: 0;
+    inline-size: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
@@ -133,7 +134,7 @@ nav.navigation {
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    width: var(#{custom-props.$navigationWidth});
+    inline-size: var(#{custom-props.$navigationWidth});
   }
 
   // The Navigation drawer will take up the entire viewport on mobile
@@ -144,6 +145,6 @@ nav.navigation {
 
 .hide-navigation {
   position: absolute;
-  right: awsui.$space-m;
-  top: awsui.$size-vertical-panel-icon-offset;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: awsui.$size-vertical-panel-icon-offset;
 }
diff --git a/src/app-layout/visual-refresh/notifications.scss b/src/app-layout/visual-refresh/notifications.scss
index 10f5000139..33761c4a99 100644
--- a/src/app-layout/visual-refresh/notifications.scss
+++ b/src/app-layout/visual-refresh/notifications.scss
@@ -16,7 +16,7 @@
     &.sticky-notifications {
       #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
       position: sticky;
-      top: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+      inset-block-start: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
     }
   }
 }
diff --git a/src/app-layout/visual-refresh/split-panel.scss b/src/app-layout/visual-refresh/split-panel.scss
index 745a4f9c19..e53a0b352c 100644
--- a/src/app-layout/visual-refresh/split-panel.scss
+++ b/src/app-layout/visual-refresh/split-panel.scss
@@ -19,11 +19,11 @@ section.split-panel-bottom {
   This could be off the viewport if the content area has enough content to be scrollable.
   */
   align-self: end;
-  bottom: var(#{custom-props.$footerHeight});
+  inset-block-end: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
   grid-row: 10;
-  height: auto;
+  block-size: auto;
   overflow-y: hidden;
 
   /*
@@ -37,17 +37,17 @@ section.split-panel-bottom {
   // Animation for the height when opening the split panel
   @keyframes openSplitPanelBottom {
     from {
-      height: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
+      block-size: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
     }
 
     to {
-      height: var(#{custom-props.$splitPanelReportedSize});
+      block-size: var(#{custom-props.$splitPanelReportedSize});
     }
   }
 
   // If the Layout is the scrollable element then the footer height is not relevant
   &.disable-body-scroll {
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   &.is-navigation-open.position-bottom {
@@ -84,7 +84,6 @@ section.split-panel-bottom {
   */
   &.is-split-panel-open.position-bottom {
     box-shadow: awsui.$shadow-split-bottom;
-
     &.animating {
       @include styles.with-motion {
         animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
@@ -94,13 +93,13 @@ section.split-panel-bottom {
 }
 
 section.split-panel-side {
-  height: 100%;
+  block-size: 100%;
   overflow-x: hidden;
   pointer-events: auto;
 
   &:not(.is-split-panel-open),
   &.position-bottom {
-    width: 0;
+    inline-size: 0;
   }
 
   /*
@@ -109,12 +108,12 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
-    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
-    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    max-inline-size: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-inline-size: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
     &:not(.has-open-drawer) {
-      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
     }
   }
 }
diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
index b19ee13663..4049d9b72b 100644
--- a/src/app-layout/visual-refresh/tools.scss
+++ b/src/app-layout/visual-refresh/tools.scss
@@ -27,10 +27,10 @@ viewport size and state of the Tools drawer.
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
-  max-width: var(#{custom-props.$toolsMaxWidth});
+  block-size: var(#{custom-props.$contentHeight});
+  max-inline-size: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   pointer-events: none;
@@ -43,7 +43,7 @@ viewport size and state of the Tools drawer.
     #{custom-props.$toolsMaxWidth}: none;
     #{custom-props.$toolsWidth}: auto;
     position: fixed;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1001;
 
     /*
@@ -54,15 +54,16 @@ viewport size and state of the Tools drawer.
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
 
 .tools {
   background-color: awsui.$color-background-container-content;
+  box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
-  height: 100%;
+  block-size: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -75,25 +76,23 @@ viewport size and state of the Tools drawer.
   @keyframes openTools {
     from {
       opacity: var(#{custom-props.$toolsAnimationStartingOpacity}, 0);
-      width: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+      inline-size: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
     }
 
     to {
       opacity: 1;
-      width: var(#{custom-props.$toolsWidth});
+      inline-size: var(#{custom-props.$toolsWidth});
     }
   }
 
   &:not(.is-tools-open) {
-    width: 0;
+    inline-size: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
-    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-
     &.animating {
       @include styles.with-motion {
         animation: openTools awsui.$motion-duration-refresh-only-fast;
@@ -107,7 +106,7 @@ viewport size and state of the Tools drawer.
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    width: var(#{custom-props.$toolsWidth});
+    inline-size: var(#{custom-props.$toolsWidth});
   }
 
   /*
@@ -118,7 +117,7 @@ viewport size and state of the Tools drawer.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     &.is-tools-open.has-tools-form-persistence {
-      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     }
   }
 
@@ -130,8 +129,8 @@ viewport size and state of the Tools drawer.
 
 .hide-tools {
   position: absolute;
-  right: awsui.$space-m;
-  top: awsui.$size-vertical-panel-icon-offset;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: awsui.$size-vertical-panel-icon-offset;
   z-index: 1;
 }
 
@@ -143,7 +142,8 @@ handleSplitPanelMaxWidth function in the context.
 .show-tools {
   @include styles.styles-reset;
   box-sizing: border-box;
-  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {
@@ -169,7 +169,6 @@ handleSplitPanelMaxWidth function in the context.
       display: flex;
       flex-direction: column;
       gap: awsui.$space-xs;
-
       &.animating {
         @include styles.with-motion {
           animation: showButtons awsui.$motion-duration-refresh-only-fast;
diff --git a/src/app-layout/visual-refresh/trigger-button.scss b/src/app-layout/visual-refresh/trigger-button.scss
index 2664419906..591b10fdf9 100644
--- a/src/app-layout/visual-refresh/trigger-button.scss
+++ b/src/app-layout/visual-refresh/trigger-button.scss
@@ -21,9 +21,12 @@
 
 @mixin trigger-button-styles {
   background: awsui.$color-background-layout-toggle-default;
-  border-radius: 50%;
-  height: awsui.$space-layout-toggle-diameter;
-  width: awsui.$space-layout-toggle-diameter;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: awsui.$space-layout-toggle-diameter;
+  inline-size: awsui.$space-layout-toggle-diameter;
 
   &:hover {
     background: awsui.$color-background-layout-toggle-hover;
@@ -38,8 +41,8 @@
   @include trigger-button-styles();
 
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -56,7 +59,6 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
-
   border: none;
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
@@ -88,7 +90,10 @@ handleSplitPanelMaxWidth function in the context.
 
 .trigger-wrapper {
   position: relative;
-  border-radius: 50%;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
 
   &:not(.remove-high-contrast-header) {
     box-shadow: awsui.$shadow-panel-toggle;
@@ -97,10 +102,13 @@ handleSplitPanelMaxWidth function in the context.
 
 .dot {
   position: absolute;
-  width: 9px;
-  height: 9px;
-  border-radius: 8px;
+  inline-size: 9px;
+  block-size: 9px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
   background-color: awsui.$color-background-badge-icon;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
diff --git a/src/area-chart/styles.scss b/src/area-chart/styles.scss
index e063e5821d..8b481005cc 100644
--- a/src/area-chart/styles.scss
+++ b/src/area-chart/styles.scss
@@ -32,6 +32,7 @@
 }
 
 .popover-divider {
-  margin: awsui.$space-xs 0;
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block: awsui.$space-xs;
+  margin-inline: 0;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/attribute-editor/styles.scss b/src/attribute-editor/styles.scss
index f32173cfdf..6a9873b978 100644
--- a/src/attribute-editor/styles.scss
+++ b/src/attribute-editor/styles.scss
@@ -42,22 +42,22 @@
   // The value is calculated as follows:
   // padding-top = awsui-form-field-controls: 4px +
   // line height (also applies to icon size) awsui-form-field-label: 22px
-  padding-top: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
+  padding-block-start: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
 }
 
 .button-container-nolabel {
-  padding-top: #{awsui.$space-xxs};
+  padding-block-start: #{awsui.$space-xxs};
 }
 
 .divider {
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .additional-info {
   @include styles.form-control-description;
   display: block;
   word-wrap: break-word;
-  margin-top: awsui.$space-xxs;
+  margin-block-start: awsui.$space-xxs;
 
   /* stylelint-disable-next-line selector-max-type */
   > a {
@@ -66,5 +66,6 @@
 }
 
 .right-align {
-  float: right;
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/src/autosuggest/styles.scss b/src/autosuggest/styles.scss
index eba73b3cdc..f1baf15f6d 100644
--- a/src/autosuggest/styles.scss
+++ b/src/autosuggest/styles.scss
@@ -4,11 +4,11 @@
 */
 
 .root {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .layout-strut {
-  width: 100%;
+  inline-size: 100%;
   position: relative;
   // Prevent incorrect layer ordering in Safari by making sure
   // this element is also offloaded to the GPU along with the virtual items
diff --git a/src/badge/styles.scss b/src/badge/styles.scss
index 3b8ddd7260..c3aadc7eb1 100644
--- a/src/badge/styles.scss
+++ b/src/badge/styles.scss
@@ -12,8 +12,12 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-radius: awsui.$border-radius-badge;
-  padding: 0 awsui.$space-xs;
+  border-start-start-radius: awsui.$border-radius-badge;
+  border-start-end-radius: awsui.$border-radius-badge;
+  border-end-start-radius: awsui.$border-radius-badge;
+  border-end-end-radius: awsui.$border-radius-badge;
+  padding-block: 0;
+  padding-inline: awsui.$space-xs;
   color: awsui.$color-text-notification-default;
 
   &.badge-color-grey {
diff --git a/src/box/base-styles.scss b/src/box/base-styles.scss
index 4fa369ba83..c58d92d8c0 100644
--- a/src/box/base-styles.scss
+++ b/src/box/base-styles.scss
@@ -129,9 +129,11 @@ $font-styles: (
 }
 
 @mixin headings-paragraphs-extra-defaults {
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   text-decoration: none;
-  padding: awsui.$space-xxs 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
 }
 
 @mixin code-extra-defaults {
diff --git a/src/box/layout.scss b/src/box/layout.scss
index c847d1dc37..557d1630bb 100644
--- a/src/box/layout.scss
+++ b/src/box/layout.scss
@@ -24,9 +24,11 @@
   }
 }
 
+/* stylelint-disable csstools/use-logical */
 .f-left {
   float: left;
 }
 .f-right {
   float: right;
 }
+/* stylelint-enable csstools/use-logical */
diff --git a/src/box/text.scss b/src/box/text.scss
index 1740ea469e..ea38a96af2 100644
--- a/src/box/text.scss
+++ b/src/box/text.scss
@@ -41,7 +41,7 @@
     &.key-label-variant {
       @include styles.font-label;
       color: awsui.$color-text-label;
-      margin-bottom: awsui.$space-key-value-gap;
+      margin-block-end: awsui.$space-key-value-gap;
     }
     &.value-large-variant {
       @include styles.font-display-l;
@@ -90,10 +90,10 @@
 }
 
 .t-left {
-  text-align: left;
+  text-align: start;
 }
 .t-right {
-  text-align: right;
+  text-align: end;
 }
 .t-center {
   text-align: center;
diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
index aef0c86796..468e9b747f 100644
--- a/src/breadcrumb-group/item/styles.scss
+++ b/src/breadcrumb-group/item/styles.scss
@@ -15,7 +15,8 @@
   display: flex;
 
   > .icon {
-    margin: 0 awsui.$space-xs;
+    margin-block: 0;
+    margin-inline: awsui.$space-xs;
     color: awsui.$color-text-breadcrumb-icon;
   }
 
@@ -40,7 +41,7 @@
   }
 }
 .compressed {
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   > .text {
     overflow: hidden;
diff --git a/src/breadcrumb-group/styles.scss b/src/breadcrumb-group/styles.scss
index e84491afa0..d964578907 100644
--- a/src/breadcrumb-group/styles.scss
+++ b/src/breadcrumb-group/styles.scss
@@ -8,8 +8,10 @@
 
 .breadcrumb-group {
   @include styles.styles-reset;
-  margin: 0;
-  padding: awsui.$space-xxs 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
 
   > .item {
     @include styles.styles-reset;
@@ -19,24 +21,29 @@
   > .breadcrumb-group-list {
     display: flex;
     align-items: center;
-    padding: 0;
-    margin: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
     list-style: none;
-    width: 100%;
+    inline-size: 100%;
     flex-wrap: wrap;
 
     > .item,
     > .ellipsis {
       display: inline-block;
-      padding: 0;
-      margin: 0;
+      padding-block: 0;
+      padding-inline: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
 
     > .ellipsis {
       display: none;
 
       > .icon {
-        margin: 0 styles.$base-size;
+        margin-block: 0;
+        margin-inline: styles.$base-size;
         color: awsui.$color-text-breadcrumb-icon;
       }
     }
@@ -54,7 +61,7 @@
         flex-shrink: 0;
       }
       > .item {
-        min-width: 0;
+        min-inline-size: 0;
         &:not(:first-child):not(:last-child) {
           display: none;
         }
diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
index 9b8ebadd92..3f911ae322 100644
--- a/src/button-dropdown/category-elements/styles.scss
+++ b/src/button-dropdown/category-elements/styles.scss
@@ -8,19 +8,20 @@
 
 .header {
   position: relative;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   color: awsui.$color-text-dropdown-group-label;
-  border: awsui.$border-divider-list-width solid transparent;
+  border-block: awsui.$border-divider-list-width solid transparent;
+  border-inline: awsui.$border-divider-list-width solid transparent;
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-left: 0;
-  border-right: 0;
+  border-inline-width: 0;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
-  padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
+  padding-block: styles.$option-padding-with-border-placeholder-vertical;
+  padding-inline: calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
 
   &.disabled {
@@ -29,8 +30,8 @@
   }
 
   &.expandable-header {
-    border-top-color: awsui.$color-border-dropdown-group;
-    border-bottom-color: awsui.$color-border-dropdown-group;
+    border-block-start-color: awsui.$color-border-dropdown-group;
+    border-block-end-color: awsui.$color-border-dropdown-group;
     cursor: pointer;
     &.disabled {
       cursor: default;
@@ -39,23 +40,29 @@
       outline: none;
     }
     &.rolled-down {
-      border-bottom-color: transparent;
+      border-block-end-color: transparent;
     }
     &.highlighted {
       background-color: awsui.$color-background-dropdown-item-hover;
       color: awsui.$color-text-dropdown-item-highlighted;
       // reset padding when adding border back in
-      padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
-      border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      padding-block: styles.$option-padding-vertical;
+      padding-inline: awsui.$space-button-horizontal;
+      border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       z-index: 2;
+
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-dropdown-item-focused;
+        border-color: awsui.$color-border-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
@@ -77,33 +84,34 @@
 
 .category {
   list-style: none;
-  margin-top: calc(-1 * #{awsui.$border-divider-list-width});
-  padding: 0;
+  margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
+  padding-block: 0;
+  padding-inline: 0;
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   &.expandable {
-    border-top: 0;
+    border-block-start: 0;
   }
 
   &:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   &.variant-navigation {
-    padding-top: awsui.$space-xxs;
+    padding-block-start: awsui.$space-xxs;
 
     &.expandable {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 }
 
 .expand-icon {
   position: relative;
-  left: awsui.$space-s;
-  width: awsui.$space-m;
+  inset-inline-start: awsui.$space-s;
+  inline-size: awsui.$space-m;
   display: inline-block;
 
   &-up {
@@ -119,7 +127,10 @@
 }
 
 .items-list-container {
-  padding: 0;
-  margin: -1px 0 0 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block-start: -1px;
+  margin-block-end: 0;
+  margin-inline: 0;
   overflow-y: auto;
 }
diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index d9e0007bac..0be47c79c5 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -9,11 +9,13 @@
 .item-element {
   position: relative;
   z-index: 1;
-  border: awsui.$border-item-width solid transparent;
+  border-block: awsui.$border-item-width solid transparent;
+  border-inline: awsui.$border-item-width solid transparent;
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   color: awsui.$color-text-dropdown-item-default;
-  margin-top: calc(-1 * #{styles.$control-border-width});
+  margin-block-start: calc(-1 * #{styles.$control-border-width});
   cursor: pointer;
 
   &.disabled {
@@ -21,7 +23,7 @@
     color: awsui.$color-text-dropdown-item-disabled;
   }
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
   &.last {
     border-bottom: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
@@ -36,7 +38,10 @@
     &.variant-primary {
       background-color: awsui.$color-background-dropdown-item-hover;
       border-color: awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
 
       &.disabled {
         color: awsui.$color-text-dropdown-item-dimmed;
@@ -45,7 +50,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-dropdown-item-focused;
+        border-color: awsui.$color-border-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
@@ -58,18 +63,17 @@
 
     // Additional spacing for groups of items
     &.first:not(.has-category-header) {
-      padding-top: styles.$option-padding-vertical;
+      padding-block-start: styles.$option-padding-vertical;
     }
     &.last {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
     &.first.last {
-      padding-bottom: styles.$option-padding-vertical;
-      padding-top: styles.$option-padding-vertical;
+      padding-block: styles.$option-padding-vertical;
     }
     // Additional spacing for the very last item in the list
     &.last:last-child {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
   }
 }
@@ -78,7 +82,8 @@
   @include styles.text-wrapping;
   display: flex;
   align-items: flex-start;
-  padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
+  padding-block: styles.$option-padding-vertical;
+  padding-inline: awsui.$space-button-horizontal;
   color: inherit;
   text-decoration: none;
 
@@ -89,15 +94,15 @@
   /* stylelint-disable-next-line selector-max-type */
   .has-category-header > &,
   .has-category-header > span > & {
-    padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
+    padding-inline-start: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
   }
 }
 
 .icon {
-  padding-right: awsui.$space-xs;
+  padding-inline-end: awsui.$space-xs;
   flex-shrink: 0;
 }
 
 .external-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
diff --git a/src/button-dropdown/mobile-expandable-group/styles.scss b/src/button-dropdown/mobile-expandable-group/styles.scss
index 79341af142..601d7366e0 100644
--- a/src/button-dropdown/mobile-expandable-group/styles.scss
+++ b/src/button-dropdown/mobile-expandable-group/styles.scss
@@ -20,12 +20,12 @@
     user-select: none;
     background-color: awsui.$color-background-dropdown-item-default;
     outline: none;
-    border-top: none;
-    border-bottom: none;
+    border-block-start: none;
+    border-block-end: none;
 
     display: flex;
     flex-direction: column;
-    width: 100%;
+    inline-size: 100%;
 
     &.nowrap {
       white-space: nowrap;
diff --git a/src/button-dropdown/styles.scss b/src/button-dropdown/styles.scss
index ef305a085d..312afb0dc1 100644
--- a/src/button-dropdown/styles.scss
+++ b/src/button-dropdown/styles.scss
@@ -13,8 +13,10 @@ $dropdown-trigger-icon-offset: 2px;
 }
 
 .items-list-container {
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 
   @include styles.with-motion {
     animation: awsui-motion-fade-in-0 500ms awsui.$motion-easing-show-quick;
@@ -40,9 +42,11 @@ $dropdown-trigger-icon-offset: 2px;
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: awsui.$space-s awsui.$space-l;
-  border: styles.$control-border-width solid transparent;
-  border-bottom: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  padding-block: awsui.$space-s;
+  padding-inline: awsui.$space-l;
+  border-block-start: styles.$control-border-width solid transparent;
+  border-block-end: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  border-inline: styles.$control-border-width solid transparent;
 }
 
 .title,
@@ -61,24 +65,23 @@ $dropdown-trigger-icon-offset: 2px;
 
   & > .trigger-item:not(:last-child) {
     & > .trigger-button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      padding-right: awsui.$space-m;
-      margin-right: awsui.$space-xxxs;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding-inline-end: awsui.$space-m;
+      margin-inline-end: awsui.$space-xxxs;
     }
   }
 
   & > .trigger-item:not(:first-child) {
     & > .trigger-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      padding-left: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
-      padding-right: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
     }
 
     &.visual-refresh {
       & > .trigger-button {
-        padding-right: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
+        padding-inline-end: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
       }
     }
   }
diff --git a/src/button/styles.scss b/src/button/styles.scss
index 82d77398b2..9f0bc3ed59 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -13,7 +13,8 @@
   background: map.get($variant, 'default-background');
   color: map.get($variant, 'default-color');
   border-color: map.get($variant, 'default-border-color');
-  border-width: map.get($variant, 'border-width');
+  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');
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
index c33b29f0f0..753a78674a 100644
--- a/src/calendar/styles.scss
+++ b/src/calendar/styles.scss
@@ -18,11 +18,12 @@
 .calendar {
   display: block;
   // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
-  width: awsui.$size-calendar-grid-width;
+  inline-size: awsui.$size-calendar-grid-width;
   overflow: auto;
 
   &-inner {
-    margin: awsui.$space-xs;
+    margin-block: awsui.$space-xs;
+    margin-inline: awsui.$space-xs;
   }
 
   &-header {
@@ -35,7 +36,8 @@
     @include styles.font-body-m;
     font-weight: typographyConstants.$font-weight-bold;
     color: calendar.$header-color;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
 
   &-next-month-btn {
@@ -47,39 +49,45 @@
   }
 
   &-grid {
-    width: 100%;
+    inline-size: 100%;
     border-spacing: 0;
   }
 
   &-grid-cell {
-    width: calc(100% / 7);
+    inline-size: calc(100% / 7);
     word-break: break-word;
     text-align: center;
     font-weight: unset;
   }
 
   &-day-header {
-    padding: awsui.$space-s 0 awsui.$space-xxs;
+    padding-block-start: awsui.$space-s;
+    padding-block-end: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-day-name-color;
     @include styles.font-body-s;
   }
 
   &-day {
-    border-bottom: calendar.$grid-border;
-    border-right: calendar.$grid-border;
-    padding: awsui.$space-xxs 0;
+    border-block-end: calendar.$grid-border;
+    border-inline-end: calendar.$grid-border;
+    padding-block: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-disabled-day-color;
     position: relative;
 
     &:first-child {
-      border-left: calendar.$grid-border;
+      border-inline-start: calendar.$grid-border;
     }
 
     &-enabled {
       cursor: pointer;
       color: calendar.$grid-nonmonth-day-color;
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       &.calendar-day-current-month {
         color: calendar.$grid-day-color;
@@ -88,7 +96,8 @@
           background-color: calendar.$grid-hover-background-color;
           &:not(.calendar-day-selected) {
             &::after {
-              border: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
             }
           }
         }
@@ -97,7 +106,10 @@
 
     &-today {
       background-color: calendar.$grid-today-background-color;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       font-weight: styles.$font-weight-bold;
     }
 
@@ -105,10 +117,10 @@
       content: '';
       position: absolute;
       z-index: 1;
-      top: calc(-1 * #{awsui.$border-item-width});
-      left: -1px;
-      bottom: -1px;
-      right: calc(-1 * #{awsui.$border-item-width});
+      inset-block-start: calc(-1 * #{awsui.$border-item-width});
+      inset-block-end: -1px;
+      inset-inline-start: -1px;
+      inset-inline-end: calc(-1 * #{awsui.$border-item-width});
       background-color: transparent;
     }
     > .day-inner {
@@ -148,8 +160,12 @@
       }
       &::after {
         background-color: calendar.$grid-selected-background-color;
-        border: awsui.$border-item-width solid calendar.$grid-selected-border-color;
-        border-radius: awsui.$border-radius-item;
+        border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       > .day-inner {
         z-index: 2;
@@ -162,7 +178,7 @@
   &-week {
     &:first-child {
       > .calendar-day {
-        border-top: calendar.$grid-border;
+        border-block-start: calendar.$grid-border;
       }
     }
   }
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 568bdbc13d..4fe43337c2 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -239,7 +239,6 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
-  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -278,7 +277,7 @@ const CardsList = <T,>({
           role={listItemRole}
         >
           <div
-            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
+            className={styles['card-inner']}
             onClick={
               canClickEntireCard
                 ? event => {
diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index ca64f1bc10..ff07f5bd2b 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -10,31 +10,6 @@
 @use '../container/shared' as container;
 @use './motion';
 
-@mixin card-style {
-  border-radius: awsui.$border-radius-container;
-  box-sizing: border-box;
-
-  &::before {
-    @include styles.base-pseudo-element;
-    // Reset border color to prevent it from flashing black during card selection animation
-    border-color: transparent;
-    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-radius: awsui.$border-radius-container;
-    z-index: 1;
-  }
-
-  &::after {
-    @include styles.base-pseudo-element;
-    border-radius: awsui.$border-radius-container;
-  }
-  &:not(.refresh)::after {
-    box-shadow: awsui.$shadow-container;
-  }
-  &.refresh::after {
-    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-  }
-}
-
 .root {
   @include styles.styles-reset();
   @include styles.default-text-style;
@@ -42,10 +17,12 @@
 
 .header {
   &-variant-full-page.header-refresh {
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
+    @include container.borders-and-shadows;
+    padding-block-start: 0;
+    padding-block-end: calc(
+      #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
+    );
+    padding-inline: 0;
   }
 }
 
@@ -54,14 +31,17 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   // reset styles from OL
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
-  margin: 0 0 0 calc(#{awsui.$space-grid-gutter} * -1);
+  margin-block: 0;
+  margin-inline-start: calc(#{awsui.$space-grid-gutter} * -1);
+  margin-inline-end: 0;
 
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        width: math.div(100%, $i);
+        inline-size: math.div(100%, $i);
       }
     }
   }
@@ -70,10 +50,11 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
-  top: 0;
-  right: 0;
-  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: awsui.$space-card-vertical;
+  padding-inline: awsui.$space-card-horizontal;
 }
 
 .loading,
@@ -81,17 +62,17 @@
   overflow: hidden;
   text-align: center;
   color: awsui.$color-text-empty;
-  margin-bottom: awsui.$space-scaled-l;
+  margin-block-end: awsui.$space-scaled-l;
 }
 
 .has-header {
   // Unfortunately, we don't have access to the header of InternalContainer
   // in order to use margin-bottom instead.
-  margin-top: awsui.$space-grid-gutter;
+  margin-block-start: awsui.$space-grid-gutter;
   &.refresh {
     &.header-variant-full-page {
       &.remove-high-contrast-header {
-        margin-top: awsui.$space-scaled-s;
+        margin-block-start: awsui.$space-scaled-s;
       }
     }
   }
@@ -101,35 +82,42 @@
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
   &-inner {
     position: relative;
     background-color: awsui.$color-background-container-content;
-    margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
-    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
-    width: 100%;
-    min-width: 0;
-    @include card-style;
+    margin-block-start: 0;
+    margin-block-end: awsui.$space-grid-gutter;
+    margin-inline-start: awsui.$space-grid-gutter;
+    margin-inline-end: 0;
+    padding-block: awsui.$space-card-vertical;
+    padding-inline: awsui.$space-card-horizontal;
+    @include styles.container-shadow;
+    inline-size: 100%;
+    min-inline-size: 0;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      width: 100%;
+      inline-size: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      width: 90%;
+      inline-size: 90%;
     }
   }
   &-selected {
     > .card-inner {
       background-color: awsui.$color-background-item-selected;
       &::before {
-        border: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
     }
   }
@@ -139,7 +127,9 @@
   display: inline-block;
   box-sizing: border-box;
   // only scale bottom padding to reduce padding between sections and after the last section.
-  padding: awsui.$space-xs 0 awsui.$space-scaled-xs 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: awsui.$space-scaled-xs;
+  padding-inline: 0;
   vertical-align: top;
   &-header {
     @include styles.font-label;
@@ -150,7 +140,9 @@
   }
 }
 .section:last-child {
-  padding: awsui.$space-xs 0 0 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: 0;
+  padding-inline: 0;
 }
 
 .footer-pagination {
diff --git a/src/code-editor/ace-editor.scss b/src/code-editor/ace-editor.scss
index 5481674234..da211f9e33 100644
--- a/src/code-editor/ace-editor.scss
+++ b/src/code-editor/ace-editor.scss
@@ -12,10 +12,10 @@
 
 .code-editor-refresh :global .ace_editor {
   .ace_gutter {
-    border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
   .ace_scroller {
-    border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
 }
 
@@ -50,8 +50,7 @@
   }
 
   .ace_gutter-cell {
-    padding-left: $gutter-padding-left;
-    padding-right: $gutter-padding-right;
+    padding-inline: $gutter-padding-left $gutter-padding-right;
   }
 
   .ace_fold-widget {
@@ -59,16 +58,17 @@
        <<html<<<<
        </html>
     */
-    width: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
-    margin-right: -$gutter-padding-right + 1px; // leave 1px margin on each side
+    inline-size: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
+    margin-inline-end: -$gutter-padding-right + 1px; // leave 1px margin on each side
     background-color: transparent;
-    border: none;
+    border-block: none;
+    border-inline: none;
   }
 
   .ace_gutter_annotation {
     // To align our custom icon with the annotation clickable/focus area.
     // Based on -19px in ace's default stylesheet.
-    margin-left: -21px;
+    margin-inline-start: -21px;
   }
 
   .ace_fold-widget,
@@ -85,13 +85,13 @@
   .ace_marker-layer > .ace_active-line {
     background: transparent;
     box-sizing: border-box;
-    border-top: 1px solid $active-line-border-color-light;
-    border-bottom: 1px solid $active-line-border-color-light;
+    border-block-start: 1px solid $active-line-border-color-light;
+    border-block-end: 1px solid $active-line-border-color-light;
   }
 
   &.ace_dark .ace_marker-layer > .ace_active-line {
-    border-top: 1px solid $active-line-border-color-dark;
-    border-bottom: 1px solid $active-line-border-color-dark;
+    border-block-start: 1px solid $active-line-border-color-dark;
+    border-block-end: 1px solid $active-line-border-color-dark;
   }
 
   .ace_gutter {
diff --git a/src/code-editor/pane.scss b/src/code-editor/pane.scss
index e6a5e2a090..e8620dcbc1 100644
--- a/src/code-editor/pane.scss
+++ b/src/code-editor/pane.scss
@@ -11,17 +11,17 @@
   $border: awsui.$border-item-width solid $border-color;
   $radius: awsui.$border-radius-item;
   > .pane__cell {
-    border-top: $border;
-    border-bottom: $border;
+    border-block-start: $border;
+    border-block-end: $border;
     &:first-child {
-      border-left: $border;
-      border-top-left-radius: $radius;
-      border-bottom-left-radius: $radius;
+      border-inline-start: $border;
+      border-start-start-radius: $radius;
+      border-end-start-radius: $radius;
     }
     &:last-child {
-      border-right: $border;
-      border-top-right-radius: $radius;
-      border-bottom-right-radius: $radius;
+      border-inline-end: $border;
+      border-start-end-radius: $radius;
+      border-end-end-radius: $radius;
     }
   }
 }
@@ -32,30 +32,31 @@
   flex-direction: row;
   flex: 1;
 
-  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-bottom-left-radius: awsui.$border-radius-code-editor;
-  border-bottom-right-radius: awsui.$border-radius-code-editor;
+  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
   background: awsui.$color-background-code-editor-status-bar;
   color: awsui.$color-text-body-default;
 
   &__close-container {
     position: absolute;
-    top: 0;
-    right: calc(#{awsui.$space-s} / 2);
+    inset-block-start: 0;
+    inset-inline-end: calc(#{awsui.$space-s} / 2);
   }
 
   &__list {
     flex: 1;
     overflow: auto;
-    max-height: 100%;
+    max-block-size: 100%;
     box-sizing: border-box;
-    margin-right: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
+    margin-inline-end: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
   }
 
   &__table {
-    width: 100%;
+    inline-size: 100%;
     border-spacing: 0;
-    margin: awsui.$space-s 0;
+    margin-block: awsui.$space-s;
+    margin-inline: 0;
   }
 
   &__item {
@@ -75,21 +76,22 @@
 
   &__location,
   &__description {
-    padding: awsui.$space-xxs awsui.$space-s;
+    padding-block: awsui.$space-xxs;
+    padding-inline: awsui.$space-s;
   }
 
   &__location {
     vertical-align: baseline;
     white-space: nowrap;
-    padding-left: calc(#{awsui.$space-l} + #{awsui.$space-s});
+    padding-inline-start: calc(#{awsui.$space-l} + #{awsui.$space-s});
   }
 
   &__description {
-    padding-right: 0;
+    padding-inline-end: 0;
     @include styles.text-wrapping;
   }
 }
 
 .focus-lock {
-  height: 100%;
+  block-size: 100%;
 }
diff --git a/src/code-editor/resizable-box/styles.scss b/src/code-editor/resizable-box/styles.scss
index e1bb7fcf93..3c1420526c 100644
--- a/src/code-editor/resizable-box/styles.scss
+++ b/src/code-editor/resizable-box/styles.scss
@@ -7,17 +7,17 @@
 
 .resizable-box {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .resizable-box-handle {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   z-index: 10; // above editor, when editor is overflowing
 
-  width: awsui.$space-l;
-  height: awsui.$space-l;
+  inline-size: awsui.$space-l;
+  block-size: awsui.$space-l;
 
   background-repeat: no-repeat;
   background-origin: content-box;
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 3c0f77a21d..c0541b771b 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -13,17 +13,18 @@
 .code-editor {
   @include styles.styles-reset;
   display: inline-block;
-  border: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-radius: awsui.$border-radius-code-editor;
-  width: 100%;
+  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-start-start-radius: awsui.$border-radius-code-editor;
+  border-start-end-radius: awsui.$border-radius-code-editor;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
+  inline-size: 100%;
 }
 
 .editor {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 
   &:focus {
     @include styles.focus-highlight(3px);
@@ -33,19 +34,19 @@
 }
 
 .editor-refresh {
-  border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
-  border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+  border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+  border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
 }
 
 .status-bar {
   display: flex;
   vertical-align: middle;
 
-  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   &-with-hidden-pane {
-    border-bottom-left-radius: awsui.$border-radius-code-editor;
-    border-bottom-right-radius: awsui.$border-radius-code-editor;
+    border-end-start-radius: awsui.$border-radius-code-editor;
+    border-end-end-radius: awsui.$border-radius-code-editor;
   }
 
   @include styles.text-wrapping;
@@ -54,8 +55,8 @@
     flex: 1;
     display: flex;
     flex-wrap: wrap;
-    padding-left: awsui.$space-l;
-    border-right: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+    padding-inline-start: awsui.$space-l;
+    border-inline-end: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   }
 
   &__left-virtual {
@@ -72,11 +73,13 @@
   &__cursor-position {
     display: inline-block;
     color: awsui.$color-text-body-default;
-    padding: awsui.$space-scaled-xs awsui.$space-s;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: awsui.$space-s;
   }
 
   &__cog-button {
-    padding: calc(#{awsui.$space-scaled-xxs} - 1px) calc(#{awsui.$space-xs} - 2px);
+    padding-block: calc(#{awsui.$space-scaled-xxs} - 1px);
+    padding-inline: calc(#{awsui.$space-xs} - 2px);
   }
 }
 
@@ -87,11 +90,13 @@
 .tab-button {
   position: relative;
   display: inline-block;
-  padding: awsui.$space-scaled-xs awsui.$space-s;
+  padding-block: awsui.$space-scaled-xs;
+  padding-inline: awsui.$space-s;
   line-height: inherit;
   color: awsui.$color-text-status-error;
   background: none;
-  border: none;
+  border-block: none;
+  border-inline: none;
   font-weight: bold;
   outline: none;
   cursor: pointer;
@@ -105,17 +110,19 @@
   &::after {
     content: '';
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: awsui.$border-active-width;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: awsui.$border-active-width;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-text-status-error;
     opacity: 0;
   }
 
   &--refresh {
-    padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
+    padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
   }
 
   &--warnings {
@@ -161,8 +168,8 @@
 
   &--divider {
     display: inline-block;
-    height: awsui.$line-height-body-m;
-    width: awsui.$border-code-editor-status-divider-width;
+    block-size: awsui.$line-height-body-m;
+    inline-size: awsui.$border-code-editor-status-divider-width;
     background: awsui.$color-border-tabs-divider;
     vertical-align: middle;
   }
@@ -178,12 +185,13 @@ $default-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  height: $default-height;
-
+  block-size: $default-height;
   color: awsui.$color-text-body-secondary;
   background: awsui.$color-background-code-editor-loading;
-  border-radius: awsui.$border-radius-code-editor;
+  border-start-start-radius: awsui.$border-radius-code-editor;
+  border-start-end-radius: awsui.$border-radius-code-editor;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
 }
 
 .error-screen {
diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index 7f7349016b..baae07fa07 100644
--- a/src/collection-preferences/content-display/content-display-option.scss
+++ b/src/collection-preferences/content-display/content-display-option.scss
@@ -29,15 +29,20 @@ $border-radius: awsui.$border-radius-item;
   @include styles.styles-reset;
   display: flex;
   align-items: flex-start;
-  padding: awsui.$space-xs awsui.$space-scaled-xs awsui.$space-xs 0;
+  padding-block: awsui.$space-xs;
+  padding-inline-start: 0;
+  padding-inline-end: awsui.$space-scaled-xs;
   background-color: awsui.$color-background-container-content;
-  border-radius: $border-radius;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
 }
 
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   &:not(.placeholder).sorting {
     @include animated;
   }
@@ -47,12 +52,12 @@ $border-radius: awsui.$border-radius-item;
       &:after {
         content: ' ';
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         background: awsui.$color-drag-placeholder-hover;
-        border-radius: $border-radius;
+        border-start-start-radius: $border-radius;
+        border-start-end-radius: $border-radius;
+        border-end-start-radius: $border-radius;
+        border-end-end-radius: $border-radius;
       }
     }
   }
@@ -61,12 +66,15 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option-label {
   flex-grow: 1;
   @include styles.text-wrapping;
-  padding-right: awsui.$space-l;
+  padding-inline-end: awsui.$space-l;
 }
 
 .drag-overlay {
   box-shadow: awsui.$shadow-container-active;
-  border-radius: $border-radius;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
   @include focus-visible {
     @include styles.focus-highlight(0px, $border-radius);
   }
diff --git a/src/collection-preferences/content-display/styles.scss b/src/collection-preferences/content-display/styles.scss
index a572c7d095..c0a8aaa8f7 100644
--- a/src/collection-preferences/content-display/styles.scss
+++ b/src/collection-preferences/content-display/styles.scss
@@ -15,16 +15,18 @@
 .content-display-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .content-display-description {
   @include styles.form-control-description;
-  margin-top: awsui.$space-scaled-xxxs;
+  margin-block-start: awsui.$space-scaled-xxxs;
 }
 
 .content-display-option-list {
   position: relative;
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 }
diff --git a/src/collection-preferences/styles.scss b/src/collection-preferences/styles.scss
index de29117501..f330f773b4 100644
--- a/src/collection-preferences/styles.scss
+++ b/src/collection-preferences/styles.scss
@@ -18,7 +18,7 @@
 }
 
 .second-column-small {
-  padding-top: calc(2 * #{awsui.$space-scaled-l});
+  padding-block-start: calc(2 * #{awsui.$space-scaled-l});
 }
 
 .wrap-lines,
diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
index 9e0e13ad83..e0a180c051 100644
--- a/src/collection-preferences/visible-content.scss
+++ b/src/collection-preferences/visible-content.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
 
 .visible-content,
 .visible-content-toggle,
@@ -18,30 +18,33 @@ $border: awsui.$border-divider-list-width solid awsui.$color-border-divider-seco
 .visible-content-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin: 0;
-  margin-bottom: awsui.$space-scaled-l;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-scaled-l;
+  margin-inline: 0;
 }
 
 .visible-content-group-label {
   color: awsui.$color-text-group-label;
-  padding-bottom: awsui.$space-xs;
-  border-bottom: $border;
+  padding-block-end: awsui.$space-xs;
+  border-block-end: $border;
 }
 
 .visible-content-option {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding: awsui.$space-xs 0px awsui.$space-xs awsui.$space-scaled-l;
-  border-bottom: $border;
+  padding-block: awsui.$space-xs;
+  padding-inline-start: awsui.$space-scaled-l;
+  padding-inline-end: 0px;
+  border-block-end: $border;
   &:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 }
 
 .visible-content-option-label {
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-right: awsui.$space-l;
+  padding-inline-end: awsui.$space-l;
   flex-grow: 1;
 }
diff --git a/src/column-layout/flexible-column-layout/styles.scss b/src/column-layout/flexible-column-layout/styles.scss
index 51e31ff8b1..d51d73fe1e 100644
--- a/src/column-layout/flexible-column-layout/styles.scss
+++ b/src/column-layout/flexible-column-layout/styles.scss
@@ -14,13 +14,12 @@
 
   &.grid-variant-text-grid {
     > .item {
-      border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-      padding-left: awsui.$space-grid-gutter;
-      padding-right: awsui.$space-grid-gutter;
+      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      padding-inline: awsui.$space-grid-gutter;
 
       &.first-column {
-        border-left: 0;
-        padding-left: 0;
+        border-inline-start: 0;
+        padding-inline-start: 0;
       }
     }
   }
diff --git a/src/column-layout/styles.scss b/src/column-layout/styles.scss
index e342a85704..1d1e2000bc 100644
--- a/src/column-layout/styles.scss
+++ b/src/column-layout/styles.scss
@@ -63,10 +63,10 @@ $column-breakpoint-spans: (
 @mixin make-horizontal-borders() {
   /* stylelint-disable selector-max-universal */
   > * {
-    border-bottom: $column-layout-border;
+    border-block-end: $column-layout-border;
 
     &:last-child {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
   }
   /* stylelint-enable selector-max-universal */
@@ -89,7 +89,7 @@ $column-breakpoint-spans: (
       @for $h from 1 through $items-per-row - $m + 1 {
         @if $h > 0 {
           > *:nth-last-child(#{$m}):nth-child(#{$items-per-row}n + #{$h}) {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
           }
         }
       }
@@ -103,25 +103,31 @@ div.column-layout {
   word-wrap: break-word;
 
   > .grid {
-    margin: calc(#{$grid-gutter-width} / -2);
+    margin-block: calc(#{$grid-gutter-width} / -2);
+    margin-inline: calc(#{$grid-gutter-width} / -2);
 
     &.grid-no-gutters {
-      margin: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
 
     &.grid-variant-text-grid {
       @include make-vertical-borders('left');
-      margin: calc(-1 * #{$grid-gutter-width} / 2) calc(-1 * #{$grid-gutter-width});
+      margin-block: calc(-1 * #{$grid-gutter-width} / 2);
+      margin-inline: calc(-1 * #{$grid-gutter-width});
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {
-      padding: calc(#{$grid-gutter-width} / 2);
+      padding-block: calc(#{$grid-gutter-width} / 2);
+      padding-inline: calc(#{$grid-gutter-width} / 2);
     }
 
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters).grid-variant-text-grid > * {
-      padding: 0 $grid-gutter-width;
-      margin: calc(#{$grid-gutter-width} / 2) 0;
+      padding-block: 0;
+      padding-inline: $grid-gutter-width;
+      margin-block: calc(#{$grid-gutter-width} / 2);
+      margin-inline: 0;
     }
 
     &.grid-vertical-borders {
diff --git a/src/container/shared.scss b/src/container/shared.scss
index a6e71236d2..03a99ecdb2 100644
--- a/src/container/shared.scss
+++ b/src/container/shared.scss
@@ -7,14 +7,16 @@
 @use '../internal/styles/tokens' as awsui;
 
 $header-padding-horizontal: awsui.$space-container-horizontal;
-$header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
-  awsui.$space-container-header-bottom;
 $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 
 // HACK: Remediate focus border for expandable section
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
+@mixin borders-and-shadows {
+  @include styles.container-shadow;
+}
+
 @mixin divider {
-  border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/container/styles.scss b/src/container/styles.scss
index 57d2bfa683..0e401b80a3 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -15,7 +15,7 @@
   &.fit-height {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    block-size: 100%;
     &.with-side-media {
       flex-direction: row;
     }
@@ -24,38 +24,42 @@
   &.variant {
     &-default,
     &-stacked {
-      background-color: awsui.$color-background-container-content;
       // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include styles.container-style;
+      @include shared.borders-and-shadows;
+      background-color: awsui.$color-background-container-content;
     }
+
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
     &-stacked:not(:last-child)::after {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-width: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
     &-stacked + &-stacked::before,
     &-stacked + &-stacked::after {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked:not(.refresh)::before {
+    &-stacked + &-stacked::before {
       @include shared.divider;
     }
+    // Reset container shadow to prevent unwanted overflow
+    &-stacked + &-stacked::after {
+      box-shadow: awsui.$shadow-container-stacked;
+    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
-  &.sticky-enabled:not(.refresh) {
+  &.sticky-enabled {
     &::before {
-      top: calc(-1 * #{awsui.$border-container-top-width});
+      inset-block-start: calc(-1 * #{awsui.$border-container-top-width});
     }
     &.variant-stacked::before {
-      top: calc(-1 * #{awsui.$border-divider-section-width});
+      inset-block-start: calc(-1 * #{awsui.$border-divider-section-width});
     }
   }
 }
@@ -73,9 +77,9 @@
 .content-wrapper {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   &-fit-height {
-    height: 100%;
+    block-size: 100%;
     overflow: hidden;
   }
 }
@@ -88,42 +92,43 @@
   img,
   video,
   picture {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     object-fit: cover;
     object-position: center;
   }
 
   // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
   iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border-block: 0;
+    border-inline: 0;
   }
 
   // reduce border-radius size to fill the visual gap between the parent border and image
   &-top {
-    max-height: 66%;
-    border-top-left-radius: calc(awsui.$border-radius-container - 1px);
-    border-top-right-radius: calc(awsui.$border-radius-container - 1px);
+    max-block-size: 66%;
+    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
+    border-start-end-radius: calc(awsui.$border-radius-container - 1px);
   }
 
   &-side {
-    max-width: 66%;
-    border-top-left-radius: calc(awsui.$border-radius-container - 1px);
-    border-bottom-left-radius: calc(awsui.$border-radius-container - 1px);
+    max-inline-size: 66%;
+    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
+    border-end-start-radius: calc(awsui.$border-radius-container - 1px);
   }
 }
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-top-left-radius: awsui.$border-radius-container;
-  border-top-right-radius: awsui.$border-radius-container;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
 
   &.header-with-media {
     background: none;
     &:not(:empty) {
-      border-bottom: none;
+      border-block-end: none;
     }
   }
 
@@ -135,16 +140,21 @@
   }
 
   &-sticky-enabled {
-    top: 0;
+    inset-block-start: 0;
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     position: sticky;
     z-index: 800;
   }
 
   &-stuck {
-    border-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+
     &::before {
-      border: 0;
+      border-block: 0;
+      border-inline: 0;
     }
     &:not(.header-variant-cards) {
       box-shadow: awsui.$shadow-sticky-embedded;
@@ -153,36 +163,41 @@
 
   &-dynamic-height.header-stuck {
     // to prevent the block from changing its height when variant dynamically changes
-    margin-bottom: calc(#{awsui.$line-height-heading-xl} - #{awsui.$line-height-heading-l});
+    margin-block-end: calc(#{awsui.$line-height-heading-xl} - #{awsui.$line-height-heading-l});
   }
 
   &:not(:empty) {
-    border-bottom: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
+    border-block-end: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
   }
 
   &.with-paddings {
-    padding: shared.$header-padding;
+    padding-block-start: awsui.$space-container-header-top;
+    padding-block-end: awsui.$space-container-header-bottom;
+    padding-inline: awsui.$space-container-horizontal;
+
     &.header-variant-cards {
-      padding: awsui.$space-container-header-top awsui.$space-container-horizontal;
+      padding-block: awsui.$space-container-header-top;
+      padding-inline: awsui.$space-container-horizontal;
     }
   }
 
   &.with-hidden-content {
-    border-bottom-left-radius: awsui.$border-radius-container;
-    border-bottom-right-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
   }
 
   &-variant-cards {
-    // Border and shadows are applied with ::before and ::after elements (respectively)
-    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }
+    @include shared.borders-and-shadows;
+
     &.header-stuck::after,
     &.header-stuck::before {
-      border: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-block: 0;
+      border-inline: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
     }
   }
 
@@ -205,10 +220,7 @@
       content: '';
 
       position: absolute;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      top: 0;
+      inset: 0;
 
       box-shadow: awsui.$shadow-sticky;
       // This polygon only shows the part of the shadow that is lower than the element itself.
@@ -239,12 +251,13 @@ the default white background of the container component.
     overflow: auto;
   }
   &.with-paddings {
-    padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
+    padding-block: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
 
     .header + & {
-      padding-top: awsui.$space-container-content-top;
+      padding-block-start: awsui.$space-container-content-top;
       &.content-with-media {
-        padding-top: 0;
+        padding-block-start: 0;
       }
     }
   }
@@ -252,7 +265,8 @@ the default white background of the container component.
 
 .footer {
   &.with-paddings {
-    padding: shared.$footer-padding;
+    padding-block: awsui.$space-scaled-s;
+    padding-inline: awsui.$space-container-horizontal;
   }
 
   &.with-divider {
diff --git a/src/content-layout/styles.scss b/src/content-layout/styles.scss
index fa8f6e1cd1..6738e300de 100644
--- a/src/content-layout/styles.scss
+++ b/src/content-layout/styles.scss
@@ -20,7 +20,7 @@ nodes will directly touch with no gap between them.
   }
 
   > .header {
-    padding-bottom: awsui.$space-content-header-padding-bottom;
+    padding-block-end: awsui.$space-content-header-padding-bottom;
   }
 }
 
@@ -28,7 +28,7 @@ nodes will directly touch with no gap between them.
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto #{awsui.$space-dark-header-overlap-distance} 1fr;
-  min-height: 100%;
+  min-block-size: 100%;
 
   > .background {
     background-color: awsui.$color-background-layout-main;
@@ -44,7 +44,7 @@ nodes will directly touch with no gap between them.
   > .header {
     grid-column: 1;
     grid-row: 1;
-    padding-bottom: awsui.$space-content-header-padding-bottom;
+    padding-block-end: awsui.$space-content-header-padding-bottom;
   }
 
   > .content {
@@ -60,7 +60,7 @@ nodes will directly touch with no gap between them.
       1fr;
 
     > .content {
-      padding-top: var(#{custom-props.$containerFirstGap}, 0px);
+      padding-block-start: var(#{custom-props.$containerFirstGap}, 0px);
     }
   }
 
diff --git a/src/date-picker/styles.scss b/src/date-picker/styles.scss
index 6accfac3f5..b0c158ee03 100644
--- a/src/date-picker/styles.scss
+++ b/src/date-picker/styles.scss
@@ -29,7 +29,7 @@
 
 .date-picker-container {
   position: relative;
-  max-width: 234px;
+  max-inline-size: 234px;
 }
 
 .date-picker-trigger {
@@ -37,8 +37,8 @@
 }
 
 .date-picker-input {
-  padding-right: awsui.$space-xs;
-  width: 100%;
+  padding-inline-end: awsui.$space-xs;
+  inline-size: 100%;
 }
 
 .open-calendar-button {
diff --git a/src/date-range-picker/calendar/grids/styles.scss b/src/date-range-picker/calendar/grids/styles.scss
index 2218fcbe91..5894b62c89 100644
--- a/src/date-range-picker/calendar/grids/styles.scss
+++ b/src/date-range-picker/calendar/grids/styles.scss
@@ -31,17 +31,19 @@
 }
 
 .grid {
-  width: awsui.$size-calendar-grid-width;
+  inline-size: awsui.$size-calendar-grid-width;
   border-spacing: 0;
 }
 .grid-cell {
-  width: calc(100% / 7);
+  inline-size: calc(100% / 7);
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
 .day-header {
-  padding: awsui.$space-s 0 awsui.$space-xxs;
+  padding-block-start: awsui.$space-s;
+  padding-block-end: awsui.$space-xxs;
+  padding-inline: 0;
   color: calendar.$grid-day-name-color;
   @include styles.font-body-s;
 }
@@ -51,9 +53,10 @@
 }
 
 .day {
-  border-bottom: calendar.$grid-border;
-  border-right: calendar.$grid-border;
-  padding: awsui.$space-xxs 0;
+  border-block-end: calendar.$grid-border;
+  border-inline-end: calendar.$grid-border;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
   color: calendar.$grid-disabled-day-color;
   position: relative;
 
@@ -65,10 +68,10 @@
     content: '';
     position: absolute;
     z-index: 1;
-    top: calc(-1 * #{awsui.$border-item-width});
-    left: -1px;
-    bottom: -1px;
-    right: calc(-1 * #{awsui.$border-item-width});
+    inset-block-start: calc(-1 * #{awsui.$border-item-width});
+    inset-block-end: -1px;
+    inset-inline-start: -1px;
+    inset-inline-end: calc(-1 * #{awsui.$border-item-width});
     background-color: transparent;
   }
 
@@ -87,11 +90,11 @@
 }
 
 .in-first-row:not(.in-previous-month) {
-  border-top: calendar.$grid-border;
+  border-block-start: calendar.$grid-border;
 }
 
 .in-previous-month:not(.last-day-of-month) {
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
 }
 
 .in-next-month {
@@ -99,10 +102,10 @@
 }
 
 .in-first-column {
-  border-left: 1px solid transparent;
+  border-inline-start: 1px solid transparent;
 
   &.in-current-month {
-    border-left: calendar.$grid-border;
+    border-inline-start: calendar.$grid-border;
   }
 }
 
@@ -116,7 +119,10 @@
     &.no-range {
       &,
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
     }
     &:hover {
@@ -124,7 +130,8 @@
       background-color: calendar.$grid-hover-background-color;
       &:not(.selected) {
         &::after {
-          border: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+          border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+          border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
         }
       }
     }
@@ -133,7 +140,10 @@
 
 .today:not(.in-range) {
   background-color: calendar.$grid-today-background-color;
-  border-radius: awsui.$border-radius-item;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
   font-weight: styles.$font-weight-bold;
 }
 
@@ -155,7 +165,8 @@
 
   &::after {
     background-color: calendar.$grid-selected-background-color;
-    border: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+    border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+    border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
     z-index: 0;
   }
 
diff --git a/src/date-range-picker/relative-range/styles.scss b/src/date-range-picker/relative-range/styles.scss
index d7a7b4ad37..95c7be9e4a 100644
--- a/src/date-range-picker/relative-range/styles.scss
+++ b/src/date-range-picker/relative-range/styles.scss
@@ -9,26 +9,26 @@
 
 .custom-range {
   // This padding aligns the custom range selection with the radio labels
-  padding-left: calc(#{1.4 * styles.$base-size} + #{awsui.$space-xs});
+  padding-inline-start: calc(#{1.4 * styles.$base-size} + #{awsui.$space-xs});
 
   display: flex;
-  width: 80%;
+  inline-size: 80%;
 }
 .custom-range--no-padding {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .custom-range-form-controls {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 
   > .custom-range-duration,
   > .custom-range-unit {
-    width: 50%;
+    inline-size: 50%;
   }
 
   > .custom-range-duration {
-    margin-right: awsui.$space-xs;
+    margin-inline-end: awsui.$space-xs;
   }
 
   &.vertical {
@@ -36,11 +36,11 @@
 
     > .custom-range-duration,
     > .custom-range-unit {
-      width: 100%;
+      inline-size: 100%;
     }
 
     > .custom-range-unit {
-      margin-top: awsui.$space-s;
+      margin-block-start: awsui.$space-s;
     }
   }
 }
diff --git a/src/date-range-picker/styles.scss b/src/date-range-picker/styles.scss
index 03ff338c7d..b9fda09b72 100644
--- a/src/date-range-picker/styles.scss
+++ b/src/date-range-picker/styles.scss
@@ -14,7 +14,7 @@ $calendar-header-color: awsui.$color-text-body-default;
 
 .root {
   @include styles.styles-reset;
-  max-width: 32em;
+  max-inline-size: 32em;
 }
 
 .focus-lock {
@@ -22,7 +22,7 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .trigger-wrapper {
-  min-width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+  min-inline-size: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
 }
 
 .trigger-flexbox {
@@ -30,10 +30,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .calendar-container {
-  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs});
+  inline-size: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs});
 
   &.one-grid {
-    width: $calendar-grid-width;
+    inline-size: $calendar-grid-width;
   }
 }
 
@@ -47,12 +47,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 
   &-header-months-wrapper {
     position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
 
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
 
     display: flex;
     justify-content: space-around;
@@ -92,7 +90,7 @@ $calendar-header-color: awsui.$color-text-body-default;
   gap: awsui.$space-xs;
 }
 .date-and-time-wrapper {
-  width: $calendar-grid-width;
+  inline-size: $calendar-grid-width;
   display: grid;
   gap: awsui.$space-xs;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -102,29 +100,33 @@ $calendar-header-color: awsui.$color-text-body-default;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  border-top: 1px solid #{awsui.$color-border-dropdown-item-default};
-  padding: 0 awsui.$space-l awsui.$space-s;
+  border-block-start: 1px solid #{awsui.$color-border-dropdown-item-default};
+  padding-block-start: 0;
+  padding-block-end: awsui.$space-s;
+  padding-inline: awsui.$space-l;
 
   &.has-clear-button {
     justify-content: space-between;
   }
 
   &.one-grid {
-    padding: 0 awsui.$space-xs awsui.$space-s;
+    padding-block-start: 0;
+    padding-block-end: awsui.$space-s;
+    padding-inline: awsui.$space-xs;
   }
 }
 
 .footer-button-wrapper {
-  padding-top: awsui.$space-s;
+  padding-block-start: awsui.$space-s;
 
   &:last-child {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
 .icon-wrapper {
   color: awsui.$color-text-interactive-default;
-  margin-right: awsui.$space-xs;
+  margin-inline-end: awsui.$space-xs;
 }
 
 .label {
@@ -154,9 +156,12 @@ $calendar-header-color: awsui.$color-text-body-default;
   // widths.
   overflow: auto;
 
-  border-top: 1px solid #{awsui.$color-border-container-top};
-  border-bottom: 1px solid #{awsui.$color-border-container-top};
-  border-radius: awsui.$border-radius-dropdown;
+  border-block-start: 1px solid #{awsui.$color-border-container-top};
+  border-block-end: 1px solid #{awsui.$color-border-container-top};
+  border-start-start-radius: awsui.$border-radius-dropdown;
+  border-start-end-radius: awsui.$border-radius-dropdown;
+  border-end-start-radius: awsui.$border-radius-dropdown;
+  border-end-end-radius: awsui.$border-radius-dropdown;
 
   &:focus {
     outline: none;
@@ -169,10 +174,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 .dropdown-content {
   user-select: text;
   background-color: awsui.$color-background-container-content;
-  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
+  inline-size: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
 
   &.one-grid {
-    width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+    inline-size: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
   }
 }
 
diff --git a/src/drawer/styles.scss b/src/drawer/styles.scss
index 82af1b8b99..5632c9e47e 100644
--- a/src/drawer/styles.scss
+++ b/src/drawer/styles.scss
@@ -10,18 +10,23 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding: awsui.$space-scaled-l awsui.$space-panel-side-right awsui.$space-scaled-xxxl awsui.$space-panel-side-left;
+  padding-block-start: awsui.$space-scaled-l;
+  padding-block-end: awsui.$space-scaled-xxxl;
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
 }
 
 .header {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
-  padding-bottom: awsui.$space-scaled-l;
-  padding-left: awsui.$space-panel-side-left;
+  padding-block-end: awsui.$space-scaled-l;
+  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
-  padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin: 0 calc(-1 * #{awsui.$space-panel-side-right}) awsui.$space-scaled-l calc(-1 * #{awsui.$space-panel-side-left});
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-scaled-l;
+  margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
+  margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
 
   h2,
   h3,
@@ -29,10 +34,8 @@
   h5,
   h6 {
     @include styles.font-panel-header;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 0;
-    margin-bottom: 0;
+    padding-block: 0;
+    margin-block: 0;
   }
 }
 
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
index 0caa94d27c..6cc1d67433 100644
--- a/src/expandable-section/styles.scss
+++ b/src/expandable-section/styles.scss
@@ -40,28 +40,29 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
 .icon-container {
   position: relative;
-  margin-left: calc(#{$icon-margin-left});
+  margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
   // For vertical alignment of text in side navigation items
-  margin-right: calc(#{$icon-margin-right-normal});
   &-container {
-    margin-right: $icon-margin-right-medium;
+    margin-inline-end: $icon-margin-right-medium;
   }
 }
 
 .wrapper {
   box-sizing: border-box;
-  border: none;
-  width: 100%;
+  border-block: none;
+  border-inline: none;
+  inline-size: 100%;
   line-height: awsui.$line-height-body-m;
-  text-align: left;
+  text-align: start;
 
   &-default,
   &-footer {
-    border: awsui.$border-divider-section-width solid transparent;
+    border-block: awsui.$border-divider-section-width solid transparent;
+    border-inline: awsui.$border-divider-section-width solid transparent;
   }
   &-navigation {
     // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together
-    border-left: awsui.$border-divider-section-width solid transparent;
+    border-inline-start: awsui.$border-divider-section-width solid transparent;
   }
 
   &-navigation,
@@ -86,57 +87,55 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-default {
-    padding-top: awsui.$space-scaled-xxs;
-    padding-bottom: awsui.$space-scaled-xxs;
-    padding-right: awsui.$space-xxs;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline-end: awsui.$space-xxs;
     &.header-deprecated {
-      padding-left: awsui.$space-xxs;
+      padding-inline-start: awsui.$space-xxs;
     }
     &:not(.header-deprecated) {
-      padding-left: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
+      padding-inline-start: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
     }
   }
 
   &-footer {
-    padding-top: awsui.$space-scaled-xxs;
-    padding-bottom: awsui.$space-scaled-xxs;
+    padding-block: awsui.$space-scaled-xxs;
   }
 
   &-footer,
   &-compact {
-    padding-right: 0;
+    padding-inline-end: 0;
     &.header-deprecated {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
     &:not(.header-deprecated) {
-      padding-left: $icon-total-space-normal;
+      padding-inline-start: $icon-total-space-normal;
     }
   }
 
   &-container {
-    padding-top: awsui.$space-container-header-top;
-    padding-bottom: awsui.$space-container-header-bottom;
-    padding-right: container.$header-padding-horizontal;
+    padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
+    padding-inline-end: container.$header-padding-horizontal;
 
     &:not(.wrapper-expanded) {
       // Equal top and bottom padding so standalone header has vertical symmetry.
-      padding-bottom: awsui.$space-container-header-top;
+      padding-block-end: awsui.$space-container-header-top;
     }
     &.header-deprecated {
-      padding-left: container.$header-padding-horizontal;
+      padding-inline-start: container.$header-padding-horizontal;
     }
     &:not(.header-deprecated) {
-      padding-left: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
+      padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
 
     @include focus-visible.when-visible {
       // HACK: Remediate focus border
-      padding: container.$header-focus-visible-padding;
+      padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
+      padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
     }
   }
 
   &-default.wrapper-expanded {
-    border-bottom-color: awsui.$color-border-divider-default;
+    border-block-end-color: awsui.$color-border-divider-default;
   }
 }
 
@@ -152,8 +151,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-wrapper {
     font-size: inherit;
     letter-spacing: inherit;
-    margin: 0;
-    padding: 0;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 
   &-actions-wrapper {
@@ -172,18 +173,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-button {
     box-sizing: border-box;
     display: flex;
-    margin-left: calc(-1 * #{$icon-total-space-normal});
+    margin-inline-start: calc(-1 * #{$icon-total-space-normal});
   }
 
   &-container-button {
-    margin-left: calc(-1 * #{$icon-total-space-medium});
+    margin-inline-start: calc(-1 * #{$icon-total-space-medium});
   }
 
   &-container {
-    width: 100%;
+    inline-size: 100%;
     // The icon-container style is kept for variant='container' and header
     > .icon-container {
-      margin-top: awsui.$space-expandable-section-icon-offset-top;
+      margin-block-start: awsui.$space-expandable-section-icon-offset-top;
     }
   }
 
@@ -192,8 +193,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       display: inline-flex;
       cursor: pointer;
       color: awsui.$color-text-expandable-section-navigation-icon-default;
-      border: 0;
-      padding: 0;
+      border-block: 0;
+      border-inline: 0;
+      padding-block: 0;
+      padding-inline: 0;
       background: transparent;
       outline: none;
       text-decoration: none;
@@ -218,11 +221,13 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   display: none;
 
   &-default {
-    padding: awsui.$space-scaled-xs 0;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: 0;
   }
 
   &-footer {
-    padding: awsui.$space-xs 0;
+    padding-block: awsui.$space-xs;
+    padding-inline: 0;
   }
 
   &-expanded {
diff --git a/src/file-upload/dropzone/styles.scss b/src/file-upload/dropzone/styles.scss
index 38544ccb95..6dad819634 100644
--- a/src/file-upload/dropzone/styles.scss
+++ b/src/file-upload/dropzone/styles.scss
@@ -12,8 +12,12 @@
   align-items: center;
   justify-content: center;
   gap: awsui.$space-static-xxs;
-  padding: awsui.$space-static-l;
-  border-radius: awsui.$border-radius-dropzone;
+  padding-block: awsui.$space-static-l;
+  padding-inline: awsui.$space-static-l;
+  border-start-start-radius: awsui.$border-radius-dropzone;
+  border-start-end-radius: awsui.$border-radius-dropzone;
+  border-end-start-radius: awsui.$border-radius-dropzone;
+  border-end-end-radius: awsui.$border-radius-dropzone;
   color: awsui.$color-dropzone-text-active;
   background-color: awsui.$color-dropzone-background-active;
   font-weight: styles.$font-weight-bold;
diff --git a/src/file-upload/file-option/styles.scss b/src/file-upload/file-option/styles.scss
index c7753b2bb1..dce4393930 100644
--- a/src/file-upload/file-option/styles.scss
+++ b/src/file-upload/file-option/styles.scss
@@ -13,22 +13,22 @@
 }
 
 .file-option {
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   display: flex;
   gap: awsui.$space-scaled-xs;
 }
 
 .file-option-thumbnail {
-  margin-top: awsui.$space-static-xxs;
-  max-width: 60px;
+  margin-block-start: awsui.$space-static-xxs;
+  max-inline-size: 60px;
 }
 
 .file-option-thumbnail-image {
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
 }
 
 .file-option-metadata {
-  width: 100%;
+  inline-size: 100%;
 }
diff --git a/src/file-upload/styles.scss b/src/file-upload/styles.scss
index c0f0ee372e..64d5e70dfa 100644
--- a/src/file-upload/styles.scss
+++ b/src/file-upload/styles.scss
@@ -11,5 +11,5 @@
 }
 
 .hints {
-  margin-top: awsui.$space-static-xxs;
+  margin-block-start: awsui.$space-static-xxs;
 }
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
index 8007152515..cea928aef9 100644
--- a/src/flashbar/collapsible.scss
+++ b/src/flashbar/collapsible.scss
@@ -83,7 +83,7 @@ the grid layout will be:
        with one single line of text.
        This makes them look better during the collapse animation, in which they are already empty.
      */
-    min-height: calc(
+    min-block-size: calc(
       #{awsui.$line-height-body-m} + (
           #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
         ) * 2
@@ -114,7 +114,7 @@ the grid layout will be:
   #{custom-props.$stackedNotificationsDefaultBottomMargin}: calc(
     #{$notification-bar-line-height} + 2 * #{$notification-bar-padding-vertical} + 2 * #{$border-width} - #{$top-overlap}
   );
-  margin-bottom: calc(
+  margin-block-end: calc(
     var(
         #{custom-props.$stackedNotificationsBottomMargin},
         var(#{custom-props.$stackedNotificationsDefaultBottomMargin})
@@ -122,16 +122,15 @@ the grid layout will be:
   );
 
   > .notification-bar {
-    margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
+    margin-block-start: calc(-1 * #{$top-overlap} + #{$offset-bottom});
     /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
     is the full height of the notification bar */
     /* stylelint-disable scss/operator-no-newline-after */
-    margin-bottom: calc(
+    margin-block-end: calc(
       #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
         #{$offset-bottom}
     );
-    padding-top: $notification-bar-padding-vertical;
-    padding-bottom: $notification-bar-padding-vertical;
+    padding-block: $notification-bar-padding-vertical;
   }
 }
 
@@ -201,8 +200,12 @@ the grid layout will be:
   @include styles.text-wrapping;
   background: awsui.$color-background-notification-stack-bar;
   border-color: awsui.$color-border-notification-stack-bar;
-  border-radius: awsui.$border-radius-button;
-  border-style: solid;
+  border-start-start-radius: awsui.$border-radius-button;
+  border-start-end-radius: awsui.$border-radius-button;
+  border-end-start-radius: awsui.$border-radius-button;
+  border-end-end-radius: awsui.$border-radius-button;
+  border-block-style: solid;
+  border-inline-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
   color: awsui.$color-text-notification-stack-bar;
   cursor: pointer;
@@ -214,8 +217,7 @@ the grid layout will be:
   column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
   justify-content: center;
   letter-spacing: awsui.$font-button-letter-spacing;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   row-gap: 0;
   text-align: center;
   text-decoration: none;
@@ -227,10 +229,8 @@ the grid layout will be:
     @include typography.default-text-style;
     color: awsui.$color-text-notification-stack-bar;
     cursor: pointer;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-block: 0;
+    padding-block: 0;
   }
 
   > .status {
@@ -255,7 +255,7 @@ the grid layout will be:
       row-gap: 0;
 
       > .type-count > .count-number {
-        margin-left: awsui.$space-xxs;
+        margin-inline-start: awsui.$space-xxs;
       }
     }
   }
@@ -271,16 +271,16 @@ the grid layout will be:
 
   &.visual-refresh {
     $border-width: map.get($notification-bar-border-width, 'visual-refresh');
-    border-width: $border-width;
-    padding-left: awsui.$space-l;
-    padding-right: awsui.$space-l;
+    border-block-width: $border-width;
+    border-inline-width: $border-width;
+    padding-inline: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
     $border-width: map.get($notification-bar-border-width, 'classic');
-    border-width: $border-width;
-    padding-left: awsui.$space-s;
-    padding-right: awsui.$space-s;
+    border-block-width: $border-width;
+    border-inline-width: $border-width;
+    padding-inline: awsui.$space-s;
 
     &:focus {
       text-decoration: none;
@@ -295,9 +295,9 @@ the grid layout will be:
     display: inline-block;
     flex-grow: 1;
     background: none;
-    border: 0 none;
-    padding-top: 0;
-    padding-bottom: 0;
+    border-block: 0;
+    border-inline: none;
+    padding-block: 0;
 
     > .icon {
       @include styles.with-motion {
@@ -321,5 +321,5 @@ the grid layout will be:
 // Prevent the sticky Flashbar from reaching the end of the window by leaving some space below.
 .stack.expanded:not(.floating) {
   // Default to 0 so that this does not apply to non-sticky Flashbar.
-  padding-bottom: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
+  padding-block-end: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
 }
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
index 137703f6cf..af2520c1fb 100644
--- a/src/flashbar/styles.scss
+++ b/src/flashbar/styles.scss
@@ -15,7 +15,7 @@
   /* stylelint-disable-next-line selector-max-type */
   > li + li {
     // Avoid Flashbar list gets additional padding to fix issue AWSUI-20382
-    padding-top: 0;
+    padding-block-start: 0;
   }
 }
 
@@ -29,15 +29,22 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
-  border-radius: awsui.$border-radius-flashbar;
+  padding-block: awsui.$space-scaled-xs;
+  padding-inline: awsui.$space-flashbar-horizontal;
+  border-start-start-radius: awsui.$border-radius-flashbar;
+  border-start-end-radius: awsui.$border-radius-flashbar;
+  border-end-start-radius: awsui.$border-radius-flashbar;
+  border-end-end-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
 
   &::before {
     @include styles.base-pseudo-element;
-    border-radius: awsui.$border-radius-flashbar;
+    border-start-start-radius: awsui.$border-radius-flashbar;
+    border-start-end-radius: awsui.$border-radius-flashbar;
+    border-end-start-radius: awsui.$border-radius-flashbar;
+    border-end-end-radius: awsui.$border-radius-flashbar;
     box-shadow: awsui.$shadow-flash-sticky;
   }
   &-refresh::before {
@@ -47,12 +54,14 @@
 
 .flash-list {
   list-style: none;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 
   &:not(.collapsed) {
     > li:not(:last-child) {
-      margin-bottom: awsui.$space-xxxs;
+      margin-block-end: awsui.$space-xxxs;
     }
   }
 }
@@ -60,13 +69,13 @@
 .flash-body {
   display: flex;
   flex-grow: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .flash-focus-container {
   display: flex;
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 
   &:focus {
     outline: none;
@@ -77,13 +86,15 @@
 }
 
 .flash-text {
-  margin: awsui.$border-field-width 0;
-  padding: awsui.$space-scaled-xxs awsui.$space-xxs;
+  margin-block: awsui.$border-field-width;
+  margin-inline: 0;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-xxs;
 }
 
 .flash-icon {
   flex: 0 0 auto;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .flash-message {
@@ -101,9 +112,8 @@
 
 .dismiss-button-wrapper {
   flex: 0 0 auto;
-  margin-left: awsui.$space-s;
-  margin-right: calc(-1 * #{awsui.$space-xxs});
-  padding-right: awsui.$space-flashbar-dismiss-right;
+  margin-inline: awsui.$space-s calc(-1 * #{awsui.$space-xxs});
+  padding-inline-end: awsui.$space-flashbar-dismiss-right;
 }
 
 .dismiss-button {
@@ -112,15 +122,15 @@
 
 .action-button-wrapper {
   white-space: nowrap;
-  margin-left: awsui.$space-flashbar-action-left;
+  margin-inline-start: awsui.$space-flashbar-action-left;
 }
 
 .flashbar.breakpoint-default > .flash-list > .flash-list-item > .flash > .flash-body {
   display: block;
   & > .action-button-wrapper {
-    margin-left: awsui.$space-l;
-    padding-left: awsui.$space-xxs;
-    margin-bottom: awsui.$space-xxs;
+    margin-inline-start: awsui.$space-l;
+    padding-inline-start: awsui.$space-xxs;
+    margin-block-end: awsui.$space-xxs;
   }
 }
 
diff --git a/src/form-field/styles.scss b/src/form-field/styles.scss
index ce9d6d12c7..ff1f2a7672 100644
--- a/src/form-field/styles.scss
+++ b/src/form-field/styles.scss
@@ -24,8 +24,8 @@
 }
 
 .info {
-  padding-left: awsui.$space-xs;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  padding-inline-start: awsui.$space-xs;
+  border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .description,
@@ -35,7 +35,7 @@
 
 .hints,
 .constraint-has-error {
-  padding-top: awsui.$space-xxs;
+  padding-block-start: awsui.$space-xxs;
 }
 
 .secondary-control {
@@ -44,7 +44,7 @@
 
 .controls {
   &:not(.label-hidden) {
-    padding-top: awsui.$space-xxs;
+    padding-block-start: awsui.$space-xxs;
   }
 }
 
@@ -61,7 +61,7 @@
 }
 
 .error__message {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
 
 .visually-hidden {
diff --git a/src/form/styles.scss b/src/form/styles.scss
index 499df80680..b4deea70fa 100644
--- a/src/form/styles.scss
+++ b/src/form/styles.scss
@@ -11,7 +11,7 @@
 }
 
 .header:not(.full-page) {
-  margin-bottom: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }
 
 .content {
@@ -23,23 +23,23 @@
 }
 
 .footer {
-  margin-top: awsui.$space-scaled-l;
+  margin-block-start: awsui.$space-scaled-l;
 }
 .actions-section {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-left: calc(-1 * #{awsui.$space-scaled-m});
-  margin-bottom: calc(-1 * #{awsui.$space-scaled-m});
+  margin-inline-start: calc(-1 * #{awsui.$space-scaled-m});
+  margin-block-end: calc(-1 * #{awsui.$space-scaled-m});
 }
 .secondary-actions {
-  min-width: 1px;
-  margin-left: awsui.$space-scaled-m;
-  margin-bottom: awsui.$space-scaled-m;
+  min-inline-size: 1px;
+  margin-inline-start: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }
 .actions {
-  min-width: 1px;
-  margin-left: awsui.$space-scaled-m;
-  margin-bottom: awsui.$space-scaled-m;
+  min-inline-size: 1px;
+  margin-inline-start: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }

From 07e1666175d35b3a13cb85ee2878e7a19444b6af Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:10:19 -0500
Subject: [PATCH 02/18] Update stylelint.

---
 .stylelintrc | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.stylelintrc b/.stylelintrc
index 92213295a5..f163765f97 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -52,7 +52,12 @@
   "overrides": [
     {
       "files": [
-        "./src/button/*.scss",
+        "./src/a*/**/*.scss",
+        "./src/b*/**/*.scss",
+        "./src/c*/**/*.scss",
+        "./src/d*/**/*.scss",
+        "./src/e*/**/*.scss",
+        "./src/f*/**/*.scss",
         "./src/g*/**/*.scss",
         "./src/h*/**/*.scss",
         "./src/i*/**/*.scss",

From a54ef335dad11032c9dfc001279dbb48d0361186 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:12:32 -0500
Subject: [PATCH 03/18] Revert unintended cards change.

---
 src/cards/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 4fe43337c2..568bdbc13d 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -239,6 +239,7 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
+  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -277,7 +278,7 @@ const CardsList = <T,>({
           role={listItemRole}
         >
           <div
-            className={styles['card-inner']}
+            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
             onClick={
               canClickEntireCard
                 ? event => {

From 6e93a047c10e49c42f42a9c280c076b822eab52d Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:42:55 -0500
Subject: [PATCH 04/18] Revert card styles.

---
 src/cards/styles.scss | 57 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index ff07f5bd2b..07465c64e8 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -10,6 +10,41 @@
 @use '../container/shared' as container;
 @use './motion';
 
+@mixin card-style {
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: awsui.$border-radius-container;
+  border-end-end-radius: awsui.$border-radius-container;
+  box-sizing: border-box;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
+  }
+  &:not(.refresh)::after {
+    box-shadow: awsui.$shadow-container;
+  }
+  &.refresh::after {
+    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+}
+
 .root {
   @include styles.styles-reset();
   @include styles.default-text-style;
@@ -17,12 +52,12 @@
 
 .header {
   &-variant-full-page.header-refresh {
-    @include container.borders-and-shadows;
     padding-block-start: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     padding-block-end: calc(
       #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
     );
-    padding-inline: 0;
   }
 }
 
@@ -41,7 +76,7 @@
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        inline-size: math.div(100%, $i);
+        width: math.div(100%, $i);
       }
     }
   }
@@ -50,9 +85,9 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
-  inset-block-start: 0;
-  inset-inline-end: 0;
+  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  top: 0;
+  right: 0;
   padding-block: awsui.$space-card-vertical;
   padding-inline: awsui.$space-card-horizontal;
 }
@@ -96,20 +131,20 @@
     margin-inline-end: 0;
     padding-block: awsui.$space-card-vertical;
     padding-inline: awsui.$space-card-horizontal;
-    @include styles.container-shadow;
-    inline-size: 100%;
-    min-inline-size: 0;
+    width: 100%;
+    min-width: 0;
+    @include card-style;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      inline-size: 100%;
+      width: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      inline-size: 90%;
+      width: 90%;
     }
   }
   &-selected {

From 9c18f05d90db441b34acc3c273172fea7337c3f6 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:51:31 -0500
Subject: [PATCH 05/18] Miscellaneous fixes.

---
 src/app-layout/visual-refresh/drawers.scss      | 2 +-
 src/app-layout/visual-refresh/navigation.scss   | 1 -
 src/app-layout/visual-refresh/tools.scss        | 3 ++-
 src/collection-preferences/visible-content.scss | 2 +-
 src/container/styles.scss                       | 4 ----
 5 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 3a18c389e6..48651bb238 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -20,7 +20,6 @@
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-    box-shadow: awsui.$shadow-panel;
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -163,6 +162,7 @@
   }
 
   &.is-drawer-open {
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     opacity: 1;
     inline-size: var(#{custom-props.$drawerSize});
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index 0049d9df2d..7286e2f8a9 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -88,7 +88,6 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   inset-block-end: 0;
   block-size: 100%;
   overflow-x: hidden;
diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
index 4049d9b72b..18d2efe8a1 100644
--- a/src/app-layout/visual-refresh/tools.scss
+++ b/src/app-layout/visual-refresh/tools.scss
@@ -61,7 +61,6 @@ viewport size and state of the Tools drawer.
 
 .tools {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
   block-size: 100%;
   overflow-y: auto;
@@ -93,6 +92,8 @@ viewport size and state of the Tools drawer.
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
     &.animating {
       @include styles.with-motion {
         animation: openTools awsui.$motion-duration-refresh-only-fast;
diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
index e0a180c051..6548c54881 100644
--- a/src/collection-preferences/visible-content.scss
+++ b/src/collection-preferences/visible-content.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
 
 .visible-content,
 .visible-content-toggle,
diff --git a/src/container/styles.scss b/src/container/styles.scss
index 0e401b80a3..8142bc457c 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -47,10 +47,6 @@
     &-stacked + &-stacked::before {
       @include shared.divider;
     }
-    // Reset container shadow to prevent unwanted overflow
-    &-stacked + &-stacked::after {
-      box-shadow: awsui.$shadow-container-stacked;
-    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index

From e5bd6383af238f89e32530f74c72f83e57a75f53 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 16:55:24 -0500
Subject: [PATCH 06/18] Resolve build errors.

---
 src/container/shared.scss | 4 ----
 src/container/styles.scss | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/container/shared.scss b/src/container/shared.scss
index 03a99ecdb2..8b55487f98 100644
--- a/src/container/shared.scss
+++ b/src/container/shared.scss
@@ -13,10 +13,6 @@ $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
-@mixin borders-and-shadows {
-  @include styles.container-shadow;
-}
-
 @mixin divider {
   border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/container/styles.scss b/src/container/styles.scss
index 8142bc457c..8e00805c1c 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -25,7 +25,7 @@
     &-default,
     &-stacked {
       // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include shared.borders-and-shadows;
+      @include styles.container-style;
       background-color: awsui.$color-background-container-content;
     }
 
@@ -186,7 +186,6 @@
     &:not(.header-sticky-enabled) {
       position: relative;
     }
-    @include shared.borders-and-shadows;
 
     &.header-stuck::after,
     &.header-stuck::before {

From 10f10da23c1177bc48dea399d104116d4f563f97 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 17:04:13 -0500
Subject: [PATCH 07/18] Resolve build issues.

---
 src/alert/styles.scss |  3 ++-
 src/cards/styles.scss | 18 +++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index 562171b95f..bb93457ce1 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -25,7 +25,8 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
-  border: awsui.$border-field-width solid;
+  border-block: awsui.$border-field-width solid;
+  border-inline: awsui.$border-field-width solid;
   border-start-start-radius: awsui.$border-radius-alert;
   border-start-end-radius: awsui.$border-radius-alert;
   border-end-start-radius: awsui.$border-radius-alert;
diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index 07465c64e8..51adf14384 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -21,7 +21,7 @@
     @include styles.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
-    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
     border-start-start-radius: awsui.$border-radius-container;
     border-start-end-radius: awsui.$border-radius-container;
     border-end-start-radius: awsui.$border-radius-container;
@@ -76,7 +76,7 @@
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        width: math.div(100%, $i);
+        inline-size: math.div(100%, $i);
       }
     }
   }
@@ -85,9 +85,9 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
-  top: 0;
-  right: 0;
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inset-block-start: 0;
+  inset-inline-end: 0;
   padding-block: awsui.$space-card-vertical;
   padding-inline: awsui.$space-card-horizontal;
 }
@@ -131,20 +131,20 @@
     margin-inline-end: 0;
     padding-block: awsui.$space-card-vertical;
     padding-inline: awsui.$space-card-horizontal;
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     @include card-style;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      width: 100%;
+      inline-size: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      width: 90%;
+      inline-size: 90%;
     }
   }
   &-selected {

From 2aa88e753c0135689f979967a5caa4183b205925 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 17:38:57 -0500
Subject: [PATCH 08/18] Fix screenshot bugs.

---
 src/container/styles.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/container/styles.scss b/src/container/styles.scss
index 8e00805c1c..296113a36e 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -24,9 +24,9 @@
   &.variant {
     &-default,
     &-stacked {
+      background-color: awsui.$color-background-container-content;
       // Border and shadows are applied with ::before and ::after elements (respectively)
       @include styles.container-style;
-      background-color: awsui.$color-background-container-content;
     }
 
     // Meld container bottom corners into next adjoining container
@@ -153,7 +153,8 @@
       border-inline: 0;
     }
     &:not(.header-variant-cards) {
-      box-shadow: awsui.$shadow-sticky-embedded;
+      // Border and shadows are applied with ::before and ::after elements (respectively)
+      @include styles.container-style;
     }
   }
 
@@ -183,6 +184,8 @@
   }
 
   &-variant-cards {
+    // Border and shadows are applied with ::before and ::after elements (respectively)
+    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }

From 854bd5e32bf1c360bd98b42aa97270a512bf6a25 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 2 Jan 2024 18:08:34 -0500
Subject: [PATCH 09/18] Fix border issue.

---
 src/app-layout/visual-refresh/drawers.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 48651bb238..1896d83e82 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -162,8 +162,8 @@
   }
 
   &.is-drawer-open {
-    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     opacity: 1;
     inline-size: var(#{custom-props.$drawerSize});
   }

From 115e21be7371fd2c651e71cbb33b4a04ff7d56d5 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Wed, 3 Jan 2024 12:53:05 -0500
Subject: [PATCH 10/18] Fixed app layout border issue.

---
 src/app-layout/visual-refresh/drawers.scss    | 4 ++--
 src/app-layout/visual-refresh/navigation.scss | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 1896d83e82..d62e13a16b 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -162,8 +162,8 @@
   }
 
   &.is-drawer-open {
-    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-    border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     opacity: 1;
     inline-size: var(#{custom-props.$drawerSize});
   }
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index 7286e2f8a9..3365d0c4f0 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -97,6 +97,7 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
+  border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {

From 37356de1f6696d9cf744ceab98f7f8a16566be04 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Wed, 3 Jan 2024 13:22:12 -0500
Subject: [PATCH 11/18] Fixed container bug.

---
 src/container/styles.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/container/styles.scss b/src/container/styles.scss
index 296113a36e..e8c59aec23 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -35,6 +35,7 @@
     &-stacked:not(:last-child)::after {
       border-end-end-radius: 0;
       border-end-start-radius: 0;
+      border-block-end-width: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
@@ -44,7 +45,7 @@
       border-start-end-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked::before {
+    &-stacked + &-stacked:not(.refresh)::before {
       @include shared.divider;
     }
   }
@@ -153,8 +154,7 @@
       border-inline: 0;
     }
     &:not(.header-variant-cards) {
-      // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include styles.container-style;
+      box-shadow: awsui.$shadow-sticky-embedded;
     }
   }
 

From 9b0a11be07ce3b029397451730b92642ac933b65 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Fri, 26 Jan 2024 11:37:34 -0800
Subject: [PATCH 12/18] Resolved build errors.

---
 src/container/styles.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/container/styles.scss b/src/container/styles.scss
index e8c59aec23..ae43667530 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -207,11 +207,11 @@
 
       position: absolute;
       pointer-events: none;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      top: 0;
-      border-bottom: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      border-block-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     }
 
     &::after {
@@ -228,7 +228,7 @@
     &:not(.remove-high-contrast-header) {
       &::before {
         content: '';
-        border-bottom: none;
+        border-block-end: none;
       }
     }
   }

From 5551f69936f3a198b9df00a134e5ba2c9ffbba73 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 6 Feb 2024 13:53:00 -0500
Subject: [PATCH 13/18] Fix build issues.

---
 src/annotation-context/annotation/styles.scss     | 3 ++-
 src/app-layout/toggles/styles.scss                | 3 ++-
 src/app-layout/visual-refresh/trigger-button.scss | 3 ++-
 src/button-dropdown/category-elements/styles.scss | 8 ++++----
 src/button-dropdown/item-element/styles.scss      | 2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
index 4d54d4be35..c6ee334967 100644
--- a/src/annotation-context/annotation/styles.scss
+++ b/src/annotation-context/annotation/styles.scss
@@ -43,7 +43,8 @@
 .hotspot {
   @include styles.styles-reset;
   background: transparent;
-  border: none;
+  border-block: none;
+  border-inline: none;
   padding-block: 0;
   padding-inline: 0;
   cursor: pointer;
diff --git a/src/app-layout/toggles/styles.scss b/src/app-layout/toggles/styles.scss
index bba6b739f6..beecb7e33b 100644
--- a/src/app-layout/toggles/styles.scss
+++ b/src/app-layout/toggles/styles.scss
@@ -9,7 +9,8 @@
 
 .toggle-button {
   cursor: pointer;
-  border: 0;
+  border-block: 0;
+  border-inline: 0;
   // resemble button styles with an extra 1px offset for non-existing here border width
   $padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
   $padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
diff --git a/src/app-layout/visual-refresh/trigger-button.scss b/src/app-layout/visual-refresh/trigger-button.scss
index 591b10fdf9..dc3dfba6c2 100644
--- a/src/app-layout/visual-refresh/trigger-button.scss
+++ b/src/app-layout/visual-refresh/trigger-button.scss
@@ -59,7 +59,8 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
-  border: none;
+  border-block: none;
+  border-inline: none;
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
   pointer-events: auto;
diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
index 3f911ae322..b1843e1e73 100644
--- a/src/button-dropdown/category-elements/styles.scss
+++ b/src/button-dropdown/category-elements/styles.scss
@@ -67,13 +67,13 @@
       }
     }
     &.variant-navigation {
-      padding-top: awsui.$space-xs;
-      padding-bottom: awsui.$space-xs;
+      padding-block-start: awsui.$space-xs;
+      padding-block-end: awsui.$space-xs;
 
       &.highlighted {
         border-color: transparent;
-        border-top-color: awsui.$color-border-dropdown-group;
-        border-bottom-color: awsui.$color-border-dropdown-group;
+        border-block-start-color: awsui.$color-border-dropdown-group;
+        border-block-end-color: awsui.$color-border-dropdown-group;
 
         background-color: transparent;
         color: awsui.$color-text-accent;
diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index 0be47c79c5..1f30668025 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -26,7 +26,7 @@
     margin-block-start: 0;
   }
   &.last {
-    border-bottom: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
+    border-block-end: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
   }
   &.highlighted {
     color: awsui.$color-text-dropdown-item-highlighted;

From e5747c72ce533411080db47fe66e1ad105e3ca60 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Tue, 6 Feb 2024 13:54:53 -0500
Subject: [PATCH 14/18] Incorporate PR feedback.

---
 src/container/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/container/styles.scss b/src/container/styles.scss
index ae43667530..21499a1529 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -51,7 +51,7 @@
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
-  &.sticky-enabled {
+  &.sticky-enabled:not(.refresh) {
     &::before {
       inset-block-start: calc(-1 * #{awsui.$border-container-top-width});
     }

From dcc83838a4fb9ae8861d2fb2bc53cd83b9c90c30 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Sun, 11 Feb 2024 12:45:42 -0500
Subject: [PATCH 15/18] Update stylelint.

---
 .stylelintrc | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index f163765f97..5aee6062e4 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -52,32 +52,7 @@
   "overrides": [
     {
       "files": [
-        "./src/a*/**/*.scss",
-        "./src/b*/**/*.scss",
-        "./src/c*/**/*.scss",
-        "./src/d*/**/*.scss",
-        "./src/e*/**/*.scss",
-        "./src/f*/**/*.scss",
-        "./src/g*/**/*.scss",
-        "./src/h*/**/*.scss",
-        "./src/i*/**/*.scss",
-        "./src/j*/**/*.scss",
-        "./src/k*/**/*.scss",
-        "./src/l*/**/*.scss",
-        "./src/m*/**/*.scss",
-        "./src/n*/**/*.scss",
-        "./src/o*/**/*.scss",
-        "./src/p*/**/*.scss",
-        "./src/q*/**/*.scss",
-        "./src/r*/**/*.scss",
-        "./src/s*/**/*.scss",
-        "./src/t*/**/*.scss",
-        "./src/u*/**/*.scss",
-        "./src/v*/**/*.scss",
-        "./src/w*/**/*.scss",
-        "./src/x*/**/*.scss",
-        "./src/y*/**/*.scss",
-        "./src/z*/**/*.scss"
+        "./src/**/*.scss"
       ],
       "rules": {
         "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],

From 0bbbde9930ddc8d293a7af0712e8e884b5a5e5e3 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Sun, 11 Feb 2024 17:32:33 -0500
Subject: [PATCH 16/18] Resolve screenshot errors.

---
 src/button-dropdown/category-elements/styles.scss | 2 +-
 src/button-dropdown/item-element/styles.scss      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
index b1843e1e73..6d571def31 100644
--- a/src/button-dropdown/category-elements/styles.scss
+++ b/src/button-dropdown/category-elements/styles.scss
@@ -62,7 +62,7 @@
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index 1f30668025..337c206ffa 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -50,7 +50,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

From c3285cd274dc61761d557652e8719d81cbaab84c Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Sun, 11 Feb 2024 17:35:49 -0500
Subject: [PATCH 17/18] Fix screenshot errors.

---
 .../content-display/content-display-option.scss                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index baae07fa07..5fe3bd886e 100644
--- a/src/collection-preferences/content-display/content-display-option.scss
+++ b/src/collection-preferences/content-display/content-display-option.scss
@@ -42,7 +42,7 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option {
   list-style: none;
   position: relative;
-  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   &:not(.placeholder).sorting {
     @include animated;
   }

From 6fcdc00227ce0acea1392bc973d63a41709b2f68 Mon Sep 17 00:00:00 2001
From: Scott O'Brien <scottob@amazon.com>
Date: Mon, 12 Feb 2024 10:30:08 -0500
Subject: [PATCH 18/18] Remove outdated comment.

---
 src/calendar/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
index 753a78674a..b190abb843 100644
--- a/src/calendar/styles.scss
+++ b/src/calendar/styles.scss
@@ -17,7 +17,6 @@
 
 .calendar {
   display: block;
-  // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
   inline-size: awsui.$size-calendar-grid-width;
   overflow: auto;