diff --git a/.stylelintrc b/.stylelintrc
index 14d981086f..59d906deac 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -51,9 +51,12 @@
   },
   "overrides": [
     {
-      "files": ["./src/button/*.scss"],
+      "files": [
+        "./src/a*/*.scss",
+        "./src/button/*.scss"
+      ],
       "rules": {
-        "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
+        "property-disallowed-list": ["border-radius", "border-style", "border-width", "margin", "padding"],
         "csstools/use-logical": "always"
       }
     }
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 3d711cb2ef..3a18c389e6 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -12,10 +12,10 @@
   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 {
@@ -25,7 +25,7 @@
 
   @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})
     );
@@ -34,7 +34,7 @@
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     position: fixed;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1001;
 
     /*
@@ -45,7 +45,7 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -54,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 {
@@ -69,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);
   }
 }
 
@@ -82,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;
@@ -94,7 +94,8 @@
   }
 
   > .drawers-trigger-overflow {
-    padding: 0 1px;
+    padding-block: 0;
+    padding-inline: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -103,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;
   }
@@ -117,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 */
@@ -128,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;
@@ -151,20 +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-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 e1c720a449..1de142ab52 100644
--- a/src/app-layout/visual-refresh/mobile-toolbar.scss
+++ b/src/app-layout/visual-refresh/mobile-toolbar.scss
@@ -10,22 +10,23 @@
 section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-home-header;
-  border-bottom: 1px solid awsui.$color-border-divider-default;
+  border-block-end: 1px solid awsui.$color-border-divider-default;
   box-shadow: awsui.$shadow-panel-toggle;
   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;
 
   > .mobile-toolbar-nav {
     grid-column: 1;
-    margin-right: awsui.$space-m;
+    margin-inline-end: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
@@ -35,6 +36,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 951177e294..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 {
@@ -88,8 +89,8 @@ nav.show-navigation {
 nav.navigation {
   background-color: awsui.$color-background-container-content;
   box-shadow: awsui.$shadow-panel;
-  bottom: 0;
-  height: 100%;
+  inset-block-end: 0;
+  block-size: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -102,18 +103,18 @@ nav.navigation {
   @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 ccbd9d7bab..6f4515ae5e 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 {
@@ -93,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,7 +109,7 @@ section.split-panel-side {
   */
   &.is-split-panel-open.position-side {
     box-shadow: awsui.$shadow-panel;
-    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
-    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    max-inline-size: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-inline-size: var(#{custom-props.$splitPanelMinWidth}, 280px);
   }
 }
diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
index 62d4b9f11d..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,7 +54,7 @@ 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});
     }
   }
 }
@@ -63,7 +63,7 @@ viewport size and state of the Tools drawer.
   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 */
@@ -76,17 +76,17 @@ 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;
   }
@@ -106,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});
   }
 
   /*
@@ -117,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;
     }
   }
 
@@ -129,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;
 }
 
@@ -142,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 {
diff --git a/src/app-layout/visual-refresh/trigger-button.scss b/src/app-layout/visual-refresh/trigger-button.scss
index e898890b50..d4255d420a 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;
@@ -89,15 +91,21 @@ handleSplitPanelMaxWidth function in the context.
 .trigger-wrapper {
   position: relative;
   box-shadow: awsui.$shadow-panel-toggle;
-  border-radius: 50%;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
 }
 
 .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/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');