diff --git a/.stylelintrc b/.stylelintrc
index 8eba4359dc..886a275a83 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -58,7 +58,14 @@
         "./src/p*/*.scss",
         "./src/q*/*.scss",
         "./src/r*/*.scss",
-        "./src/s*/*.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"
       ],
       "rules": {
         "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index b819b62f3d..fac4aec58b 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -27,10 +27,12 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
 .body-cell {
   box-sizing: border-box;
-  padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
-  border-top: awsui.$border-divider-list-width solid transparent;
+  padding-block-start: $cell-vertical-padding;
+  padding-block-end: $cell-vertical-padding-w-border;
+  padding-inline: $cell-horizontal-padding;
+  border-block-start: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
-  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   font-weight: inherit;
   text-align: start;
   &:not(.body-cell-wrap) {
@@ -39,17 +41,17 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     text-overflow: ellipsis;
   }
   &:first-child {
-    border-left: $border-placeholder;
+    border-inline-start: $border-placeholder;
   }
   &:last-child {
-    border-right: $border-placeholder;
-    padding-right: $cell-edge-horizontal-padding;
+    border-inline-end: $border-placeholder;
+    padding-inline-end: $cell-edge-horizontal-padding;
   }
   &.is-visual-refresh:first-child {
     &:not(.has-striped-rows) {
-      padding-left: awsui.$space-xxxs;
+      padding-inline-start: awsui.$space-xxxs;
       &:not(.body-cell-edit-active).body-cell-editable:hover {
-        padding-left: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
+        padding-inline-start: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
       }
     }
 
@@ -59,9 +61,9 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       to the table edge.
       */
     &:first-child.has-striped-rows {
-      padding-left: awsui.$space-xxs;
+      padding-inline-start: awsui.$space-xxs;
       &-sticky-cell-pad-left {
-        padding-left: awsui.$space-table-horizontal;
+        padding-inline-start: awsui.$space-table-horizontal;
       }
     }
 
@@ -71,19 +73,19 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       that the placeholder border would consume.
       */
     &:not(.has-selection):not(.body-cell-editable) {
-      border-left: none;
+      border-inline-start: none;
     }
   }
   &:first-child:not(.is-visual-refresh) {
-    padding-left: $cell-edge-horizontal-padding;
+    padding-inline-start: $cell-edge-horizontal-padding;
   }
   &-first-row {
-    border-top: $border-placeholder;
+    border-block-start: $border-placeholder;
   }
   &-last-row:not(.body-cell-selected) {
     &:not(.has-footer) {
       // skip the border for the last row because the container already has a border
-      border-bottom: $border-placeholder;
+      border-block-end: $border-placeholder;
     }
 
     &.has-footer {
@@ -91,7 +93,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       Add a bottom border to the body cells of the last row as a separator between the
       table and the footer
       */
-      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;
     }
   }
   &-shaded {
@@ -99,23 +101,29 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   }
   &-selected {
     background-color: awsui.$color-background-item-selected;
-    border-top: $selected-border;
-    border-bottom: $selected-border;
-    padding-bottom: $cell-vertical-padding;
+    border-block-start: $selected-border;
+    border-block-end: $selected-border;
+    padding-block-end: $cell-vertical-padding;
 
     // Last selected row has a fixed border-bottom width which do not change on selection in visual refresh.
     // Adjust padding-bottom prevents a slight jump in the table height.
     &.body-cell-last-row.is-visual-refresh {
-      padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+      padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
     }
 
     &:first-child {
-      border-left: $selected-border;
-      border-radius: awsui.$border-radius-item 0 0 awsui.$border-radius-item;
+      border-inline-start: $selected-border;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: 0;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: 0;
     }
     &:last-child {
-      border-right: $selected-border;
-      border-radius: 0 awsui.$border-radius-item awsui.$border-radius-item 0;
+      border-inline-end: $selected-border;
+      border-start-start-radius: 0;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: 0;
+      border-end-end-radius: awsui.$border-radius-item;
     }
   }
 
@@ -124,7 +132,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     background: awsui.$color-background-container-content;
     z-index: 798; // Our sticky elements should have z-index in the range of 800-850, this value needs to be lower
     &-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
@@ -163,51 +171,54 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
   // Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)
   &-selected:not(:first-child) {
-    padding-top: $cell-vertical-padding-w-border;
+    padding-block-start: $cell-vertical-padding-w-border;
   }
   &:not(.body-cell-selected).body-cell-next-selected {
-    border-bottom: 0;
-    padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+    border-block-end: 0;
+    padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
   }
   &-selected.body-cell-prev-selected {
-    padding-top: $cell-vertical-padding-w-border;
-    border-top: $selected-border-placeholder;
+    padding-block-start: $cell-vertical-padding-w-border;
+    border-block-start: $selected-border-placeholder;
   }
   &-selected.body-cell-next-selected {
-    border-bottom-width: awsui.$border-divider-list-width;
+    border-block-end-width: awsui.$border-divider-list-width;
   }
   // Remove border radii for consecutive selected rows (visual refresh)
   &-selected.body-cell-next-selected:first-child {
-    border-bottom-left-radius: 0;
+    border-end-start-radius: 0;
   }
   &-selected.body-cell-next-selected:last-child {
-    border-bottom-right-radius: 0;
+    border-end-end-radius: 0;
   }
   &-selected.body-cell-prev-selected:first-child {
-    border-top-left-radius: 0;
+    border-start-start-radius: 0;
   }
   &-selected.body-cell-prev-selected:last-child {
-    border-top-right-radius: 0;
+    border-start-end-radius: 0;
   }
   // Reset padding for selected rows with no adjacent selected row above it,
   // because rows reuse adjacent selected borders (visual refresh)
   &-selected:not(.body-cell-prev-selected) {
-    padding-top: $cell-vertical-padding;
+    padding-block-start: $cell-vertical-padding;
   }
 
   &-editor {
-    padding: 0 $edit-button-padding-right 0 0;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: $edit-button-padding-right;
   }
 
   &-success {
-    padding: 0 $success-icon-padding-right 0 0;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: $success-icon-padding-right;
   }
 
   &-success,
   &-editor {
-    top: 0;
-    right: 0;
-    bottom: 0;
+    inset-block: 0;
+    inset-inline-end: 0;
     position: absolute;
 
     display: flex;
@@ -218,7 +229,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     cursor: pointer;
     outline: 0;
     background: 0;
-    border: 0;
+    border-block: 0;
+    border-inline: 0;
 
     color: awsui.$color-text-button-normal-default;
 
@@ -230,13 +242,15 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     }
 
     &-form {
-      margin: calc(-1 * #{awsui.$space-xs}) calc(-1.5 * #{awsui.$space-xs});
+      margin-block: calc(-1 * #{awsui.$space-xs});
+      margin-inline: calc(-1.5 * #{awsui.$space-xs});
+
       .is-visual-refresh.body-cell:first-child.has-striped-rows > & {
-        margin-left: calc(-1 * #{awsui.$space-xxs});
+        margin-inline-start: calc(-1 * #{awsui.$space-xxs});
       }
 
       .is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
-        margin-left: calc(-1 * #{awsui.$space-xxxs});
+        margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
       }
     }
 
@@ -276,7 +290,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
     &:not(.body-cell-edit-active) {
       @mixin focused-editor-styles {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
         & > .body-cell-editor {
           opacity: 1;
         }
@@ -315,35 +329,31 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
       &:hover {
         background-color: awsui.$color-background-dropdown-item-hover;
-        border: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
-        left: calc(-1 * #{awsui.$border-divider-list-width});
-        right: calc(-1 * #{awsui.$border-divider-list-width});
-
+        border-block: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
+        border-inline: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
+        inset-inline: calc(-1 * #{awsui.$border-divider-list-width});
         position: relative;
 
         &:first-child {
-          left: 0;
-          right: 0;
+          inset-inline: 0;
         }
 
         & > .body-cell-editor {
-          padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          padding-inline-end: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         & > .body-cell-success {
           // Update padding to avoid a jumping icon because of the additional borders added when hovering an editable cell.
-          padding-right: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          padding-inline-end: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         &.body-cell-last-row.body-cell-selected,
         &.body-cell-next-selected {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
-          padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
+          padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
         }
         &.body-cell-last-row:not(.body-cell-selected) {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          padding-block-start: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
         &.body-cell-first-row:not(.body-cell-selected) {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
-          padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
         &.sticky-cell {
           position: sticky;
@@ -354,16 +364,16 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   }
   &-editable.is-visual-refresh:not(.body-cell-edit-active):hover {
     &:first-child {
-      border-top-left-radius: awsui.$border-radius-item;
-      border-bottom-left-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
     }
     &:last-child {
-      border-top-right-radius: awsui.$border-radius-item;
-      border-bottom-right-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
     }
     &.body-cell-first-row > .body-cell-success,
     &.body-cell-first-row > .body-cell-editor {
-      padding-top: awsui.$border-divider-list-width;
+      padding-block-start: awsui.$border-divider-list-width;
     }
   }
 }
diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
index be46f887f9..bfb880aa58 100644
--- a/src/table/header-cell/styles.scss
+++ b/src/table/header-cell/styles.scss
@@ -9,26 +9,28 @@
 
 .header-cell {
   position: relative;
-  text-align: left;
+  text-align: start;
   box-sizing: border-box;
-  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;
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-weight-heading-s;
   @include styles.font-smoothing;
-  padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-scaled-xs;
+
   &-sticky {
-    border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
   }
   &-stuck:not(.header-cell-variant-full-page) {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
   &-variant-full-page.header-cell-hidden {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
   &:last-child,
   &.header-cell-sortable {
-    padding-right: awsui.$space-xs;
+    padding-inline-end: awsui.$space-xs;
   }
 
   &.sticky-cell {
@@ -36,7 +38,7 @@
     background: awsui.$color-background-table-header;
     z-index: 798; // Lower than the AppLayout's notification slot z-index(799)
     &-pad-left:not(.has-selection) {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
     &-last-left {
       box-shadow: awsui.$shadow-sticky-column-first;
@@ -59,24 +61,25 @@
 
 .sorting-icon {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
-  right: awsui.$space-xxs;
+  inset-inline-end: awsui.$space-xxs;
   color: awsui.$color-text-column-sorting-icon;
 }
 
 .edit-icon {
-  margin-left: awsui.$space-xxs;
-  margin-top: awsui.$space-scaled-xxs;
+  margin-inline-start: awsui.$space-xxs;
+  margin-block-start: awsui.$space-scaled-xxs;
   color: inherit;
 }
 
 .header-cell-content {
   position: relative;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-s;
 
-  padding: awsui.$space-scaled-xxs awsui.$space-s;
   .header-cell-sortable > & {
-    padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
   }
   &:focus {
     outline: none;
@@ -115,8 +118,7 @@
 .header-cell-text {
   line-height: awsui.$line-height-heading-xs;
 
-  padding-top: calc(#{awsui.$space-xxxs} / 2);
-  padding-bottom: calc(#{awsui.$space-xxxs} / 2);
+  padding-block: calc(#{awsui.$space-xxxs} / 2);
 
   &:not(.header-cell-text-wrap) {
     white-space: nowrap;
@@ -138,15 +140,15 @@ settings icon in the pagination slot.
 */
 .header-cell:not(.is-visual-refresh) {
   &:first-child {
-    padding-left: awsui.$space-xs;
+    padding-inline-start: awsui.$space-xs;
   }
 }
 
 .header-cell.is-visual-refresh {
   &:first-child:not(.has-striped-rows) {
-    padding-left: awsui.$space-xxxs;
+    padding-inline-start: awsui.$space-xxxs;
     &.sticky-cell-pad-left {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
   }
 
@@ -156,14 +158,14 @@ settings icon in the pagination slot.
   to the table edge.
   */
   &:first-child.has-striped-rows {
-    padding-left: awsui.$space-xxs;
+    padding-inline-start: awsui.$space-xxs;
   }
 
   &:first-child > .header-cell-content {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   &:last-child.header-cell-sortable {
-    padding-right: awsui.$space-xxxs;
+    padding-inline-end: awsui.$space-xxxs;
   }
 }
diff --git a/src/table/resizer/styles.scss b/src/table/resizer/styles.scss
index e1f4f02ede..200de12331 100644
--- a/src/table/resizer/styles.scss
+++ b/src/table/resizer/styles.scss
@@ -40,14 +40,14 @@ th:not(:last-child) > .divider {
 
 .resizer {
   @include styles.styles-reset;
-  border: none;
+  border-block: none;
+  border-inline: none;
   background: none;
-  bottom: 0;
+  inset-block: 0;
   cursor: col-resize;
   position: absolute;
-  right: calc(-1 * #{$handle-width} / 2);
-  top: 0;
-  width: $handle-width;
+  inset-inline-end: calc(-1 * #{$handle-width} / 2);
+  inline-size: $handle-width;
   z-index: 10;
   &:focus {
     outline: none;
@@ -58,11 +58,11 @@ th:not(:last-child) > .divider {
     pointer-events: none;
   }
   th:last-child > & {
-    width: calc(#{$handle-width} / 2);
-    right: 0;
+    inline-size: calc(#{$handle-width} / 2);
+    inset-inline-end: 0;
   }
   &:hover + .divider {
-    border-left: $active-separator-width solid awsui.$color-border-divider-active;
+    border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
   // stylelint-disable-next-line selector-combinator-disallowed-list
   body[data-awsui-focus-visible='true'] &.has-focus {
@@ -74,10 +74,9 @@ th:not(:last-child) > .divider {
 .tracker {
   display: none;
   position: absolute;
-  border-left: awsui.$border-divider-list-width dashed awsui.$color-border-divider-active;
-  width: 0;
-  top: 0;
-  bottom: 0;
+  border-inline-start: awsui.$border-divider-list-width dashed awsui.$color-border-divider-active;
+  inline-size: 0;
+  inset-block: 0;
   //stylelint-disable-next-line selector-combinator-disallowed-list
   .resize-active & {
     display: block;
diff --git a/src/table/selection/styles.scss b/src/table/selection/styles.scss
index adf5b27cc6..40db6ab611 100644
--- a/src/table/selection/styles.scss
+++ b/src/table/selection/styles.scss
@@ -15,13 +15,13 @@
   align-items: center;
   justify-content: center;
   position: absolute;
-  padding-bottom: awsui.$space-xxs;
-  height: 100%;
-  top: 0;
-  width: 100%;
-  left: 0;
+  padding-block-end: awsui.$space-xxs;
+  block-size: 100%;
+  inset-block-start: 0;
+  inline-size: 100%;
+  inset-inline-start: 0;
   box-sizing: border-box;
-  border-right: 0.1 * styles.$base-size solid transparent;
+  border-inline-end: 0.1 * styles.$base-size solid transparent;
 }
 
 .stud {
diff --git a/src/table/sticky-scrollbar/styles.scss b/src/table/sticky-scrollbar/styles.scss
index dea9c93ca4..3a661ade9f 100644
--- a/src/table/sticky-scrollbar/styles.scss
+++ b/src/table/sticky-scrollbar/styles.scss
@@ -6,16 +6,16 @@
 @use '../../internal/styles' as styles;
 
 .sticky-scrollbar {
-  height: 15px;
+  block-size: 15px;
   position: sticky;
   display: none;
   overflow-x: auto;
   overflow-y: hidden;
-  bottom: 0;
-  width: 100%;
+  inset-block-end: 0;
+  inline-size: 100%;
 
   &-content {
-    height: 15px;
+    block-size: 15px;
   }
   &-visible {
     display: block;
@@ -23,7 +23,7 @@
   &-native-invisible {
     // Native scrollbar does not take space when it is not always invisible
     // For example it is set as "show when scrolling"
-    margin-top: -15px;
+    margin-block-start: -15px;
   }
 
   &-offset {
@@ -33,14 +33,14 @@
     z-index: 799; // Higher than sticky columns (798) and lower than table sticky header (800)
     &:not(.is-visual-refresh) {
       background-color: awsui.$color-background-container-content;
-      height: 15px;
-      margin-top: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
-      border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      block-size: 15px;
+      margin-block-start: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
+      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     }
 
     &.is-visual-refresh {
       // Needed to avoid sticky scrollbar overlapping with interactive elements in VR compact mode
-      margin-top: -5px;
+      margin-block-start: -5px;
     }
   }
 }
diff --git a/src/table/styles.scss b/src/table/styles.scss
index 4ec9270bb6..1257c5e92f 100644
--- a/src/table/styles.scss
+++ b/src/table/styles.scss
@@ -10,14 +10,16 @@
 
 .root {
   @include styles.default-text-style;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .tools {
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
-  padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
+  padding-block-start: awsui.$space-scaled-xs;
+  padding-block-end: awsui.$space-table-header-tools-bottom;
+  padding-inline: 0;
 
   &-filtering {
     @supports (flex-basis: fit-content) {
@@ -26,31 +28,31 @@
     @supports not (flex-basis: fit-content) {
       flex: 1 1 auto;
     }
-    max-width: 100%;
-    margin-right: awsui.$space-l;
+    max-inline-size: 100%;
+    margin-inline-end: awsui.$space-l;
   }
 
   &-align-right {
     display: flex;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   &-pagination + &-preferences {
-    border-left: 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;
     box-sizing: border-box;
-    margin-left: awsui.$space-xs;
-    padding-left: awsui.$space-xs;
+    margin-inline-start: awsui.$space-xs;
+    padding-inline-start: awsui.$space-xs;
   }
 
   &-small > &-filtering {
-    margin-right: 0;
-    margin-bottom: awsui.$space-scaled-xs;
+    margin-inline-end: 0;
+    margin-block-end: awsui.$space-scaled-xs;
     flex-basis: 100%;
   }
 }
 
 .table {
-  width: 100%;
+  inline-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;
@@ -62,7 +64,7 @@
 .wrapper {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
+  inline-size: 100%;
   overflow-x: auto;
 
   scrollbar-width: none; /* Hide scrollbar in Firefox */
@@ -70,16 +72,15 @@
   &.variant-container {
     & > .table,
     & > .wrapper-content-measure {
-      padding-left: awsui.$space-table-horizontal;
-      padding-right: awsui.$space-table-horizontal;
+      padding-inline: awsui.$space-table-horizontal;
     }
   }
   &.variant-container:not(.has-footer) {
-    padding-bottom: awsui.$space-table-content-bottom;
+    padding-block-end: awsui.$space-table-content-bottom;
   }
   &:not(.has-header) {
-    border-top-right-radius: awsui.$border-radius-container;
-    border-top-left-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-start-start-radius: awsui.$border-radius-container;
   }
   &::-webkit-scrollbar {
     display: none; /* Hide scrollbar in Safari and Chrome */
@@ -92,24 +93,28 @@
 
 .cell-merged {
   text-align: center;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   &.has-footer {
     /*
     Add a bottom border to the body cell of an empty table as a separator between the 
     table and the footer
     */
-    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;
   }
   &-content {
     box-sizing: border-box;
-    width: 100%;
-    padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l;
+    inline-size: 100%;
+    padding-block-start: awsui.$space-scaled-m;
+    padding-block-end: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-l;
     /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (position: sticky) {
       position: sticky;
-      left: 0;
+      inset-inline-start: 0;
       // Offset table paddings to position centered when sticky
-      margin: 0 calc(-2 * #{awsui.$space-table-horizontal});
+      margin-block: 0;
+      margin-inline: calc(-2 * #{awsui.$space-table-horizontal});
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
   }
@@ -130,14 +135,15 @@ filter search icon.
 */
 .selection-control {
   box-sizing: border-box;
-  max-width: awsui.$size-table-selection-horizontal;
-  min-width: awsui.$size-table-selection-horizontal;
+  max-inline-size: awsui.$size-table-selection-horizontal;
+  min-inline-size: awsui.$size-table-selection-horizontal;
   position: relative;
-  width: awsui.$size-table-selection-horizontal;
+  inline-size: awsui.$size-table-selection-horizontal;
 
   &.selection-control-header {
-    padding: awsui.$space-scaled-xs awsui.$space-scaled-l;
-    border-left: awsui.$border-item-width solid transparent;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: awsui.$space-scaled-l;
+    border-inline-start: awsui.$border-item-width solid transparent;
   }
 }
 
@@ -155,55 +161,54 @@ the default white background of the container component.
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
   box-sizing: border-box;
-  width: 100%;
-  border-radius: 0;
+  inline-size: 100%;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   background: awsui.$color-background-table-header;
   &.variant-stacked,
   &.variant-container {
     & > .table {
-      padding-left: awsui.$space-table-horizontal;
-      padding-right: awsui.$space-table-horizontal;
+      padding-inline: awsui.$space-table-horizontal;
     }
   }
   &::-webkit-scrollbar {
     display: none; /* Safari and Chrome */
   }
   &.table-has-header {
-    border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
+    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
   }
 }
 
 .header-controls {
-  padding-top: awsui.$space-container-header-top;
-  padding-bottom: awsui.$space-container-header-bottom;
+  padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
 
   &.variant-full-page {
-    padding-top: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
+    padding-block: 0 calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
   &.variant-stacked,
   &.variant-container {
-    padding-left: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
-    padding-right: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
+    padding-inline: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
   }
   &.variant-embedded,
   &.variant-borderless {
-    padding-left: awsui.$space-table-header-horizontal;
-    padding-right: awsui.$space-table-header-horizontal;
-    padding-top: awsui.$space-table-embedded-header-top;
+    padding-inline: awsui.$space-table-header-horizontal;
+    padding-block-start: awsui.$space-table-embedded-header-top;
   }
 }
 
 .footer-wrapper {
   &.variant-stacked,
   &.variant-container {
-    padding-left: awsui.$space-table-horizontal;
-    padding-right: awsui.$space-table-horizontal;
+    padding-inline: awsui.$space-table-horizontal;
   }
 }
 
 .footer {
-  padding: awsui.$space-scaled-s awsui.$space-table-footer-horizontal;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-table-footer-horizontal;
+
   &-with-pagination {
     display: flex;
     flex-direction: row;
@@ -214,7 +219,7 @@ the default white background of the container component.
   }
   &-pagination {
     // Align the footer pagination on the right
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
diff --git a/src/tabs/styles.scss b/src/tabs/styles.scss
index 0ed2408f9a..b71911de49 100644
--- a/src/tabs/styles.scss
+++ b/src/tabs/styles.scss
@@ -16,7 +16,7 @@
 .tabs {
   @include styles.styles-reset;
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .tabs-content {
@@ -32,12 +32,15 @@
 
 .tabs-content-wrapper {
   &.with-paddings > .tabs-content {
-    padding: awsui.$space-scaled-m 0;
+    padding-block: awsui.$space-scaled-m;
+    padding-inline: 0;
   }
 }
 
 .tabs-container-content-wrapper {
   &.with-paddings > .tabs-content {
-    padding: awsui.$space-tabs-content-top awsui.$space-container-horizontal awsui.$space-scaled-l;
+    padding-block-start: awsui.$space-tabs-content-top;
+    padding-block-end: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
   }
 }
diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index 2253e95779..39517bd880 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -12,19 +12,23 @@ $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-l;
 
 .tabs-header {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   display: flex;
 }
 
 .tabs-header-list {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   // do not use pointer-events none because it disables scroll by sliding
 
   // Hide scrollbar in all browsers
@@ -36,18 +40,20 @@ $label-horizontal-spacing: awsui.$space-l;
 }
 
 .pagination-button {
-  margin: awsui.$space-scaled-s 0;
-  padding: 0 awsui.$space-xxs;
+  margin-block: awsui.$space-scaled-s;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   display: flex;
   &-left {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
     &-scrollable {
       z-index: 1;
       box-shadow: 5px 0px 4px -3px awsui.$color-border-tabs-shadow, 1px 0px 0px 0px awsui.$color-border-tabs-shadow;
     }
   }
   &-right {
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
     &-scrollable {
       z-index: 1;
       box-shadow: -5px 0px 4px -3px awsui.$color-border-tabs-shadow, -1px 0px 0px 0 awsui.$color-border-tabs-shadow;
@@ -58,11 +64,12 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab {
   // Clear list formatting that comes with list item
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 
   flex-shrink: 0;
   display: flex;
-  max-width: calc(90% - #{$label-horizontal-spacing});
+  max-inline-size: calc(90% - #{$label-horizontal-spacing});
 
   & > button {
     background-color: transparent;
@@ -72,8 +79,9 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab-label {
   display: flex;
   align-items: center;
-  padding: awsui.$space-scaled-2x-xxs $label-horizontal-spacing;
-  text-align: left;
+  padding-block: awsui.$space-scaled-2x-xxs;
+  padding-inline: $label-horizontal-spacing;
+  text-align: start;
   position: relative;
 
   @include styles.text-wrapping;
@@ -82,8 +90,8 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab:not(:last-child) {
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    margin-right: calc(-1 * #{awsui.$border-divider-section-width});
-    border-right: awsui.$border-divider-section-width solid $separator-color;
+    margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
+    border-inline-end: awsui.$border-divider-section-width solid $separator-color;
   }
 }
 
@@ -93,16 +101,21 @@ $label-horizontal-spacing: awsui.$space-l;
   align-items: stretch;
   text-decoration: none;
   cursor: pointer;
-  padding: calc(#{awsui.$space-scaled-s} - 1px) 0 awsui.$space-scaled-s 0;
-  margin-top: 1px;
-  border: awsui.$border-divider-section-width solid transparent;
+  padding-block-start: calc(#{awsui.$space-scaled-s} - 1px);
+  padding-block-end: awsui.$space-scaled-s;
+  padding-inline: 0;
+  margin-block-start: 1px;
+  border-block: awsui.$border-divider-section-width solid transparent;
+  border-inline: awsui.$border-divider-section-width solid transparent;
 
   font-size: awsui.$font-tabs-size;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
   color: awsui.$color-text-interactive-default;
   &.refresh {
-    padding: calc(awsui.$space-static-xs - 1px) 0 awsui.$space-static-xs 0;
+    padding-block-start: calc(awsui.$space-static-xs - 1px);
+    padding-block-end: awsui.$space-static-xs;
+    padding-inline: 0;
   }
 
   &:hover {
@@ -119,26 +132,26 @@ $label-horizontal-spacing: awsui.$space-l;
     @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
     & > a > .tabs-tab-label,
     & > button > .tabs-tab-label {
-      border-right-color: transparent;
+      border-inline-end-color: transparent;
     }
   }
 }
 
 // Remediate focus shadow
 .tabs-tab:first-child {
-  margin-left: 1px;
+  margin-inline-start: 1px;
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    padding-left: calc(#{$label-horizontal-spacing} - 1px);
+    padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
 
 // Remediate focus shadow
 .tabs-tab:last-child {
-  margin-right: 1px;
+  margin-inline-end: 1px;
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    padding-right: calc(#{$label-horizontal-spacing} - 1px);
+    padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
 
@@ -157,13 +170,15 @@ $label-horizontal-spacing: awsui.$space-l;
   &:after {
     content: '';
     position: absolute;
-    left: 0;
-    width: 100%;
-    bottom: calc(-1 * #{awsui.$border-divider-section-width});
-    height: awsui.$border-active-width;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
+    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-border-tabs-underline;
-
     opacity: 0;
   }
 
@@ -184,5 +199,5 @@ $label-horizontal-spacing: awsui.$space-l;
 }
 
 .tabs-header-with-divider {
-  border-bottom: awsui.$border-divider-section-width solid $separator-color;
+  border-block-end: awsui.$border-divider-section-width solid $separator-color;
 }
diff --git a/src/text-content/styles.scss b/src/text-content/styles.scss
index e297bf907b..c3979a2587 100644
--- a/src/text-content/styles.scss
+++ b/src/text-content/styles.scss
@@ -18,8 +18,10 @@
     font-family: inherit;
     font-weight: normal;
     text-decoration: none;
-    margin: 0;
-    padding: awsui.$space-xxs 0;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-block: awsui.$space-xxs;
+    padding-inline: 0;
   }
   h1,
   h2,
@@ -82,8 +84,9 @@
 
   ul,
   ol {
-    padding-left: awsui.$space-l;
-    margin: awsui.$space-scaled-xs 0;
+    padding-inline-start: awsui.$space-l;
+    margin-block: awsui.$space-scaled-xs;
+    margin-inline: 0;
     list-style-position: outside;
 
     + ul,
@@ -93,12 +96,13 @@
     > li + ol,
     > li > ul,
     > li > ol {
-      padding-top: awsui.$space-scaled-xxs;
+      padding-block-start: awsui.$space-scaled-xxs;
     }
 
     > li > ul,
     > li > ol {
-      margin: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
   }
 }
diff --git a/src/text-filter/styles.scss b/src/text-filter/styles.scss
index 4e0d966d70..750ffc1e09 100644
--- a/src/text-filter/styles.scss
+++ b/src/text-filter/styles.scss
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   // The xs breakpoint, minus the table tools container padding
-  max-width: calc(688px - 2 * #{awsui.$space-l});
+  max-inline-size: calc(688px - 2 * #{awsui.$space-l});
 }
 
 .input {
@@ -23,5 +23,5 @@
   display: inline-block;
   box-sizing: border-box;
   white-space: nowrap;
-  padding-left: awsui.$space-s;
+  padding-inline-start: awsui.$space-s;
 }
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index 838e33a25d..690d3d8b9d 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -19,15 +19,21 @@
   // Allow multi-line placeholders
   white-space: pre-wrap;
 
-  padding: styles.$control-padding;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
+
   color: awsui.$color-text-body-default;
-  max-width: 100%;
-  width: 100%;
+  max-inline-size: 100%;
+  inline-size: 100%;
   display: block;
   box-sizing: border-box;
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-start-start-radius: styles.$control-border-radius;
+  border-start-end-radius: styles.$control-border-radius;
+  border-end-start-radius: styles.$control-border-radius;
+  border-end-end-radius: styles.$control-border-radius;
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index 084515d9dd..c4693bffcd 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -25,35 +25,44 @@ $gutter: awsui.$space-grid-gutter;
   // IE11 ignores calc functions in flex shorthand declarations
   // https://github.com/philipwalton/flexbugs#flexbug-8
   flex-basis: calc(#{$p} - #{$gutter});
-  max-width: calc(#{$p} - #{$gutter});
+  max-inline-size: calc(#{$p} - #{$gutter});
 }
 
 .tile-container {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-radius: awsui.$border-radius-tiles;
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-start-start-radius: awsui.$border-radius-tiles;
+  border-start-end-radius: awsui.$border-radius-tiles;
+  border-end-start-radius: awsui.$border-radius-tiles;
+  border-end-end-radius: awsui.$border-radius-tiles;
   background: awsui.$color-background-input-default;
-  padding: awsui.$space-xs awsui.$space-scaled-m;
+  padding-block: awsui.$space-xs;
+  padding-inline: awsui.$space-scaled-m;
+
   &.refresh {
-    padding: awsui.$space-xs awsui.$space-s;
+    padding-block: awsui.$space-xs;
+    padding-inline: awsui.$space-s;
   }
 
   &.has-metadata {
-    padding-bottom: awsui.$space-s;
+    padding-block-end: awsui.$space-s;
     &.refresh {
-      padding-bottom: awsui.$space-scaled-s;
+      padding-block-end: awsui.$space-scaled-s;
     }
   }
 
   &.selected {
-    border: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-block: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-inline: styles.$control-border-width solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
   }
 
   &.disabled {
-    border: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-block: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-inline: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
     background: awsui.$color-background-tiles-disabled;
   }
 
@@ -66,11 +75,13 @@ $gutter: awsui.$space-grid-gutter;
 .columns {
   display: flex;
   flex-wrap: wrap;
-  margin: calc(#{$gutter} / -2);
+  margin-block: calc(#{$gutter} / -2);
+  margin-inline: calc(#{$gutter} / -2);
   @each $i, $columns-setting in mixins.$column-breakpoint-spans {
     &.column-#{$i} {
       & > .tile-container {
-        margin: calc(#{$gutter} / 2);
+        margin-block: calc(#{$gutter} / 2);
+        margin-inline: calc(#{$gutter} / 2);
         box-sizing: border-box;
         @include make-column(12);
         &.breakpoint-xs {
@@ -86,10 +97,10 @@ $gutter: awsui.$space-grid-gutter;
 
 .control {
   flex-grow: 1;
-  margin-bottom: awsui.$space-s;
+  margin-block-end: awsui.$space-s;
 
   &.no-image {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
@@ -101,7 +112,7 @@ $gutter: awsui.$space-grid-gutter;
   // an item. We do not have control over the img element.
   // stylelint-disable-next-line selector-max-type
   & > img {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 
   &.disabled {
diff --git a/src/toggle/styles.scss b/src/toggle/styles.scss
index 72d1926edd..3f1fb5c725 100644
--- a/src/toggle/styles.scss
+++ b/src/toggle/styles.scss
@@ -28,7 +28,10 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   forced-color-adjust: none;
   @include styles.make-control-size($toggle-height, $toggle-width);
   background: awsui.$color-background-toggle-default;
-  border-radius: 0.8 * styles.$base-size;
+  border-start-start-radius: 0.8 * styles.$base-size;
+  border-start-end-radius: 0.8 * styles.$base-size;
+  border-end-start-radius: 0.8 * styles.$base-size;
+  border-end-end-radius: 0.8 * styles.$base-size;
   &-checked {
     background: awsui.$color-background-control-checked;
   }
@@ -43,14 +46,16 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 .toggle-handle {
   display: block;
   position: absolute;
-
-  border-radius: 0.6 * styles.$base-size;
+  border-start-start-radius: 0.6 * styles.$base-size;
+  border-start-end-radius: 0.6 * styles.$base-size;
+  border-end-start-radius: 0.6 * styles.$base-size;
+  border-end-end-radius: 0.6 * styles.$base-size;
   background: awsui.$color-foreground-control-default;
   box-shadow: 1px 1px $shadow-color;
-  width: $handle-size;
-  height: $handle-size;
-  top: $handle-offset;
-  left: $handle-offset;
+  inline-size: $handle-size;
+  block-size: $handle-size;
+  inset-block-start: $handle-offset;
+  inset-inline-start: $handle-offset;
 
   &-checked {
     transform: translateX(0.8 * styles.$base-size);
diff --git a/src/token-group/styles.scss b/src/token-group/styles.scss
index 950e588818..f036c43de8 100644
--- a/src/token-group/styles.scss
+++ b/src/token-group/styles.scss
@@ -12,14 +12,19 @@
   @include styles.styles-reset;
 
   &.has-items:not(.no-padding) {
-    padding-top: awsui.$space-xs;
+    padding-block-start: awsui.$space-xs;
   }
 }
 
 .dismiss-button {
-  margin: -1px -1px 0 awsui.$space-xxs;
-  border: 1px solid transparent;
-  padding: 0 awsui.$space-xxs;
+  margin-block-start: -1px;
+  margin-block-end: 0;
+  margin-inline-start: awsui.$space-xxs;
+  margin-inline-end: -1px;
+  border-block: 1px solid transparent;
+  border-inline: 1px solid transparent;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   color: awsui.$color-text-button-inline-icon-default;
   background-color: transparent;
 
@@ -39,26 +44,33 @@
 }
 
 .token {
-  height: 100%;
+  block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xxs;
 }
+
 .token-box {
-  height: 100%;
-  border: awsui.$border-field-width solid constants.$token-border-color;
-  padding: styles.$control-padding-vertical awsui.$space-xxs styles.$control-padding-vertical
-    styles.$control-padding-horizontal;
+  block-size: 100%;
+  border-block: awsui.$border-field-width solid constants.$token-border-color;
+  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  padding-block-start: styles.$control-padding-vertical;
+  padding-block-end: styles.$control-padding-vertical;
+  padding-inline-start: styles.$control-padding-horizontal;
+  padding-inline-end: awsui.$space-xxs;
   display: flex;
   align-items: flex-start;
   background: constants.$token-background;
-  border-radius: awsui.$border-radius-token;
+  border-start-start-radius: awsui.$border-radius-token;
+  border-start-end-radius: awsui.$border-radius-token;
+  border-end-start-radius: awsui.$border-radius-token;
+  border-end-end-radius: awsui.$border-radius-token;
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
 }
 .token-box-error {
   border-color: awsui.$color-border-status-error;
-  border-left-width: awsui.$border-invalid-width;
+  border-inline-start-width: awsui.$border-invalid-width;
 
   > .dismiss-button {
     color: awsui.$color-text-interactive-default;
diff --git a/src/top-navigation/1.0-beta/styles.scss b/src/top-navigation/1.0-beta/styles.scss
index e4ff6434ea..a9ee0aa731 100644
--- a/src/top-navigation/1.0-beta/styles.scss
+++ b/src/top-navigation/1.0-beta/styles.scss
@@ -18,25 +18,29 @@
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
-    padding: 0 0 0 awsui.$space-l;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
+    padding-block: 0;
+    padding-inline-start: awsui.$space-l;
+    padding-inline-end: 0;
   }
 
   &.medium > .padding-box,
   &.narrow > .padding-box {
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
   }
 
   &.narrow > .padding-box {
-    height: awsui.$space-xxxl;
-    padding: 0 0 0 awsui.$space-xs;
+    block-size: awsui.$space-xxxl;
+    padding-block: 0;
+    padding-inline-start: awsui.$space-xs;
+    padding-inline-end: 0;
   }
 }
 
 .hidden {
   @include styles.awsui-util-hide;
   visibility: hidden;
-  width: 9000px;
+  inline-size: 9000px;
 }
 
 // Ensures that tabbable child elements are hidden to a11y software.
@@ -64,27 +68,27 @@
 
   &.no-logo {
     // Prevent responsiveness from completely hiding the title.
-    min-width: 100px;
+    min-inline-size: 100px;
   }
 }
 
 .logo {
   display: block;
-  max-height: awsui.$space-xxl;
-  margin-left: awsui.$space-s;
-  width: auto;
+  max-block-size: awsui.$space-xxl;
+  margin-inline-start: awsui.$space-s;
+  inline-size: auto;
 
   // Setting an arbitrary min-width here discourages browser from lazy rendering
-  min-width: 10px;
+  min-inline-size: 10px;
 
   &.narrow {
-    max-height: awsui.$space-xl;
+    max-block-size: awsui.$space-xl;
   }
 }
 
 .title {
   @include styles.font-heading-m;
-  margin-left: awsui.$space-s;
+  margin-inline-start: awsui.$space-s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -96,19 +100,19 @@
 
 .inputs {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   justify-content: center;
 }
 
 .search {
-  width: 100%;
-  max-width: 340px;
-  padding-left: awsui.$space-xxxl;
+  inline-size: 100%;
+  max-inline-size: 340px;
+  padding-inline-start: awsui.$space-xxxl;
 
   &-expanded {
-    max-width: none;
-    padding-left: awsui.$space-s;
+    max-inline-size: none;
+    padding-inline-start: awsui.$space-s;
   }
 }
 
@@ -117,14 +121,14 @@
   flex-shrink: 0;
   flex-direction: row;
   align-items: stretch;
-  padding-left: awsui.$space-m;
+  padding-inline-start: awsui.$space-m;
 
   // Expand height of utilies fully so that the dropdown is anchored directly underneath it.
-  height: 100%;
+  block-size: 100%;
 
   .medium > .padding-box > &,
   .narrow > .padding-box > & {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
@@ -139,16 +143,15 @@
     position: absolute;
     content: '';
 
-    width: 1px;
-    right: 0;
-    top: awsui.$space-s;
-    bottom: awsui.$space-s;
+    inline-size: 1px;
+    inset-inline-end: 0;
+    inset-block: awsui.$space-s;
 
     background: awsui.$color-border-divider-default;
   }
 
   &.utility-wrapper-last:not(.utility-type-button-primary-button) {
-    padding-right: 0;
+    padding-inline-end: 0;
 
     &::after {
       display: none;
@@ -157,53 +160,54 @@
 
   .medium > .padding-box > .utilities > &::after,
   .narrow > .padding-box > .utilities > &::after {
-    top: awsui.$space-xs;
-    bottom: awsui.$space-xs;
+    inset-block: awsui.$space-xs;
   }
 }
 
 .utility-wrapper-last {
   // Add appropriate space to the right for the last utility
-  margin-right: awsui.$space-s;
+  margin-inline-end: awsui.$space-s;
 
   &.utility-type-menu-dropdown {
     // Remove the margin in case of a dropdown, because it's added as padding to the trigger.
     // This makes sure that the dropdown trigger (and therefore the dropdown itself)
     // will expand completely to the right edge of the top nav.
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   // Adjust spacing in the smaller variant
   .narrow > .padding-box > .utilities > & {
-    margin-right: 0;
+    margin-inline-end: 0;
 
     &.utility-type-button-primary-button {
-      padding-right: awsui.$space-l;
+      padding-inline-end: awsui.$space-l;
     }
   }
 }
 
 .utility-type-menu-dropdown {
-  padding: 0 awsui.$space-s;
+  padding-block: 0;
+  padding-inline: awsui.$space-s;
   align-items: stretch;
 }
 
 .utility-type-button-link,
 .utility-type-button-primary-button {
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
 }
 
 .utility-type-button-primary-button {
   // Hide dividers around primary buttons.
-  left: -1px;
-  border-left: 1px solid awsui.$color-background-container-content;
+  inset-inline-start: -1px;
+  border-inline-start: 1px solid awsui.$color-background-container-content;
   &::after {
     display: none;
   }
 }
 
 .utility-link-icon {
-  margin-right: awsui.$space-xxs;
+  margin-inline-end: awsui.$space-xxs;
 }
 
 .utility-button-external-icon {
diff --git a/src/top-navigation/styles.scss b/src/top-navigation/styles.scss
index 0c3ad0d343..3781e60ee0 100644
--- a/src/top-navigation/styles.scss
+++ b/src/top-navigation/styles.scss
@@ -20,27 +20,27 @@
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
-    padding-left: awsui.$space-xxl;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
+    padding-inline-start: awsui.$space-xxl;
   }
 
   &.medium > .padding-box,
   &.narrow > .padding-box {
-    padding-left: awsui.$space-l;
+    padding-inline-start: awsui.$space-l;
   }
 
   &.medium > .padding-box {
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
-    padding-right: 0;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
+    padding-inline-end: 0;
   }
 
   &.narrow > .padding-box {
-    height: awsui.$space-xxxl;
+    block-size: awsui.$space-xxxl;
   }
 }
 
 .virtual {
-  width: 9000px;
+  inline-size: 9000px;
 }
 
 .hidden {
@@ -57,7 +57,7 @@
 }
 
 .identity {
-  min-width: 0;
+  min-inline-size: 0;
 
   > .identity-link {
     display: flex;
@@ -76,22 +76,22 @@
 
   &.no-logo {
     // Prevent responsiveness from completely hiding the title.
-    min-width: 100px;
+    min-inline-size: 100px;
   }
 }
 
 .logo {
   display: block;
-  max-height: awsui.$space-xxl;
-  margin-right: awsui.$space-s;
-  width: auto;
+  max-block-size: awsui.$space-xxl;
+  margin-inline-end: awsui.$space-s;
+  inline-size: auto;
   flex-shrink: 0;
 
   // Setting an arbitrary min-width here discourages browser from lazy rendering
-  min-width: 10px;
+  min-inline-size: 10px;
 
   &.narrow {
-    max-height: awsui.$space-xl;
+    max-block-size: awsui.$space-xl;
   }
 }
 
@@ -109,16 +109,17 @@
 .inputs {
   display: flex;
   flex: 1;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
   justify-content: center;
 }
 
 .search {
-  width: 100%;
-  max-width: 340px;
+  inline-size: 100%;
+  max-inline-size: 340px;
 
   &-expanded {
-    max-width: none;
+    max-inline-size: none;
   }
 }
 
@@ -129,11 +130,11 @@
   align-items: stretch;
 
   // Expand height of utilies fully so that the dropdown is anchored directly underneath it.
-  height: 100%;
+  block-size: 100%;
 
   .medium > .padding-box > &,
   .narrow > .padding-box > & {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
@@ -142,17 +143,17 @@
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
 
   &::after {
     display: block;
     position: absolute;
     content: '';
 
-    width: 1px;
-    right: 0;
-    top: awsui.$space-s;
-    bottom: awsui.$space-s;
+    inline-size: 1px;
+    inset-inline-end: 0;
+    inset-block: awsui.$space-s;
 
     background: awsui.$color-border-divider-default;
   }
@@ -163,30 +164,32 @@
 }
 
 .utility-type-button-link {
-  padding: 0 awsui.$space-l;
+  padding-block: 0;
+  padding-inline: awsui.$space-l;
 }
 
 .utility-type-menu-dropdown {
-  padding: 0 awsui.$space-s;
+  padding-block: 0;
+  padding-inline: awsui.$space-s;
   align-items: stretch;
 
   &:not(.narrow):last-of-type,
   &:not(.medium):last-of-type {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
 .utility-type-button-primary-button {
   // Hide dividers around primary buttons.
-  left: -1px;
-  border-left: 1px solid awsui.$color-background-container-content;
+  inset-inline-start: -1px;
+  border-inline-start: 1px solid awsui.$color-background-container-content;
   &::after {
     display: none;
   }
 }
 
 .utility-link-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
 
 .utility-button-external-icon {
@@ -194,43 +197,45 @@
 }
 
 .offset-right-none {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 .offset-right-l {
-  margin-right: awsui.$space-xxs;
+  margin-inline-end: awsui.$space-xxs;
 }
 
 .offset-right-xxl {
-  margin-right: awsui.$space-m;
+  margin-inline-end: awsui.$space-m;
 }
 
 /* Overflow Menu */
 .overflow-menu-drawer {
   position: fixed;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   z-index: 1001;
 }
 
 .overflow-menu {
   @include styles.styles-reset;
   background: awsui.$color-background-container-content;
-  height: 100%;
+  block-size: 100%;
 }
 
 .overflow-menu-header {
   display: flex;
   align-items: center;
-  min-height: awsui.$font-panel-header-line-height;
-  padding: awsui.$space-scaled-m;
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  min-block-size: awsui.$font-panel-header-line-height;
+  padding-block: awsui.$space-scaled-m;
+  padding-inline: awsui.$space-scaled-m;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 
   &-text {
     @include styles.font-panel-header;
     color: awsui.$color-text-heading-default;
     flex: 1;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
     text-align: center;
 
     &--secondary {
@@ -256,13 +261,16 @@
 .overflow-menu-control {
   @include styles.styles-reset;
   display: flex;
-  width: 100%;
-  padding: 0;
+  inline-size: 100%;
+  padding-block: 0;
+  padding-inline: 0;
   background: none;
-  border: none;
+  border-block: none;
+  border-inline: none;
 
   .overflow-menu-list-item-utility > & {
-    padding: awsui.$space-scaled-m;
+    padding-block: awsui.$space-scaled-m;
+    padding-inline: awsui.$space-scaled-m;
   }
 
   &:hover {
@@ -292,11 +300,14 @@
 
 .overflow-menu-list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
 
   &-submenu {
-    margin: awsui.$space-scaled-xxs 0;
+    margin-block: awsui.$space-scaled-xxs;
+    margin-inline: 0;
   }
 }
 
@@ -305,7 +316,7 @@
   letter-spacing: awsui.$font-button-letter-spacing;
 
   &-icon {
-    margin-right: awsui.$space-xxs;
+    margin-inline-end: awsui.$space-xxs;
   }
 
   &-text {
@@ -314,22 +325,24 @@
 
   &-utility {
     @include styles.font-button;
-    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;
   }
 
   &-submenu {
-    border-top: awsui.$border-divider-section-width solid transparent;
-    border-bottom: awsui.$border-divider-section-width solid transparent;
-    padding: awsui.$space-scaled-xxs awsui.$space-scaled-l;
+    border-block-start: awsui.$border-divider-section-width solid transparent;
+    border-block-end: awsui.$border-divider-section-width solid transparent;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline: awsui.$space-scaled-l;
   }
 
   &-dropdown-menu {
-    padding: awsui.$space-scaled-xxs awsui.$space-scaled-s;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline: awsui.$space-scaled-s;
   }
 
   &-expandable {
-    border-top-color: awsui.$color-border-divider-default;
-    border-bottom-color: awsui.$color-border-divider-default;
+    border-block-start-color: awsui.$color-border-divider-default;
+    border-block-end-color: awsui.$color-border-divider-default;
   }
 }
 
diff --git a/src/tutorial-panel/components/tutorial-detail-view/styles.scss b/src/tutorial-panel/components/tutorial-detail-view/styles.scss
index 770dad80b6..44749dd953 100644
--- a/src/tutorial-panel/components/tutorial-detail-view/styles.scss
+++ b/src/tutorial-panel/components/tutorial-detail-view/styles.scss
@@ -8,29 +8,31 @@
 
 .tutorial-list {
   @include styles.styles-reset;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .tutorial-title {
   display: flex;
   align-items: flex-start;
-  margin-left: calc(-1 * #{awsui.$space-xxs});
-  padding-bottom: awsui.$space-xxxs;
+  margin-inline-start: calc(-1 * #{awsui.$space-xxs});
+  padding-block-end: awsui.$space-xxxs;
 }
 
 .task {
   list-style: none;
-  padding-top: 0;
+  padding-block-start: 0;
   &:not(:first-child) {
-    margin-top: awsui.$space-xl;
+    margin-block-start: awsui.$space-xl;
   }
 }
 
 .task-title {
   display: flex;
   align-items: flex-start;
-  padding-left: awsui.$border-divider-section-width;
+  padding-inline-start: awsui.$border-divider-section-width;
   @include styles.font(heading-s);
 
   &--status {
@@ -62,20 +64,22 @@
 }
 
 .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;
 }
 
 .step-list {
   list-style: none;
-  padding: 0 0 0 awsui.$space-xxxs;
+  padding-block: 0;
+  padding-inline-start: awsui.$space-xxxs;
+  padding-inline-end: 0;
 }
 
 .step:not(:first-child) {
-  padding-top: awsui.$space-xxs;
+  padding-block-start: awsui.$space-xxs;
 }
 
 .expandable-section-wrapper {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .expandable-section-header {
diff --git a/src/tutorial-panel/components/tutorial-list/styles.scss b/src/tutorial-panel/components/tutorial-list/styles.scss
index e77e03f55a..d891371901 100644
--- a/src/tutorial-panel/components/tutorial-list/styles.scss
+++ b/src/tutorial-panel/components/tutorial-list/styles.scss
@@ -11,19 +11,26 @@
 
 .tutorial-list {
   @include styles.styles-reset;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .tutorial-box {
   @include styles.styles-reset;
   list-style: none;
-  border: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
-  border-radius: awsui.$border-radius-tutorial-panel-item;
-  padding: awsui.$space-m;
+  border-block: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
+  border-inline: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
+  border-start-start-radius: awsui.$border-radius-tutorial-panel-item;
+  border-start-end-radius: awsui.$border-radius-tutorial-panel-item;
+  border-end-start-radius: awsui.$border-radius-tutorial-panel-item;
+  border-end-end-radius: awsui.$border-radius-tutorial-panel-item;
+  padding-block: awsui.$space-m;
+  padding-inline: awsui.$space-m;
 
   &:not(:first-child) {
-    margin-top: awsui.$space-l;
+    margin-block-start: awsui.$space-l;
   }
 }
 
@@ -47,7 +54,7 @@
 
 .expandable-section {
   display: none;
-  margin-top: awsui.$space-m;
+  margin-block-start: awsui.$space-m;
 
   &.expanded {
     display: block;
@@ -55,7 +62,8 @@
 }
 
 .button-wrapper {
-  margin: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-block: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
 }
 
 .start {
diff --git a/src/tutorial-panel/styles.scss b/src/tutorial-panel/styles.scss
index 412c87df20..c03d16c09f 100644
--- a/src/tutorial-panel/styles.scss
+++ b/src/tutorial-panel/styles.scss
@@ -8,5 +8,7 @@
 
 .tutorial-panel {
   @include styles.styles-reset;
-  padding: 0 awsui.$space-l awsui.$space-m;
+  padding-block-start: 0;
+  padding-block-end: awsui.$space-m;
+  padding-inline: awsui.$space-l;
 }
diff --git a/src/wizard/styles.scss b/src/wizard/styles.scss
index fd6e7f6ae5..c6fcdb83cb 100644
--- a/src/wizard/styles.scss
+++ b/src/wizard/styles.scss
@@ -36,14 +36,17 @@
 .navigation.refresh {
   grid-column: 1;
   grid-row: 1 / span 2;
-  padding-top: var(#{custom-props.$containerFirstGap}, 0px);
+  padding-block-start: var(#{custom-props.$containerFirstGap}, 0px);
 
   > ul.refresh {
     background: awsui.$color-background-container-content;
     position: relative;
-    margin: 0;
-    padding: awsui.$space-scaled-xxs 0 0 0;
-    width: 260px;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-block-start: awsui.$space-scaled-xxs;
+    padding-block-end: 0;
+    padding-inline: 0;
+    inline-size: 260px;
     box-sizing: border-box;
     &:not(.remove-high-contrast-header) {
       @include styles.container-style;
@@ -56,14 +59,16 @@
       column-gap: awsui.$space-xs;
       grid-template-columns: awsui.$space-l 1fr;
       grid-template-rows: repeat(2, auto);
-      padding: 0;
+      padding-block: 0;
+      padding-inline: 0;
 
       > hr {
         background-color: awsui.$color-border-divider-default;
-        border: 0;
+        border-block: 0;
+        border-inline: 0;
         grid-column: 1;
-        height: 100%;
-        width: awsui.$space-xxxs;
+        block-size: 100%;
+        inline-size: awsui.$space-xxxs;
       }
 
       > .number {
@@ -84,12 +89,15 @@
         grid-template-columns: awsui.$space-l 1fr;
 
         > .circle {
-          border-radius: 100%;
+          border-start-start-radius: 100%;
+          border-start-end-radius: 100%;
+          border-end-start-radius: 100%;
+          border-end-end-radius: 100%;
           grid-column: 1;
-          height: 10px;
+          block-size: 10px;
           justify-self: center;
-          margin-top: 6px;
-          width: 10px;
+          margin-block-start: 6px;
+          inline-size: 10px;
         }
 
         > .title {
@@ -108,7 +116,7 @@
     }
 
     > li:not(:first-child) > .number {
-      margin-top: awsui.$space-m;
+      margin-block-start: awsui.$space-m;
     }
 
     > li:last-child > hr {
@@ -174,39 +182,40 @@
 .navigation:not(.refresh) {
   color: awsui.$color-text-disabled;
   display: inline-block;
-  margin-right: calc(2 * #{awsui.$space-xxxl});
-  min-width: 20 * styles.$base-size;
-  padding-top: awsui.$space-xxs;
-  width: 20 * styles.$base-size;
+  margin-inline-end: calc(2 * #{awsui.$space-xxxl});
+  min-inline-size: 20 * styles.$base-size;
+  padding-block-start: awsui.$space-xxs;
+  inline-size: 20 * styles.$base-size;
 
   > ul:not(.refresh) {
     list-style: none;
-    padding: 0;
-    margin: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
 
     > li {
       @include styles.text-wrapping;
-      padding-bottom: awsui.$space-scaled-m;
-      padding-top: 0;
+      padding-block: 0 awsui.$space-scaled-m;
     }
 
     > li:not(:first-child) {
-      margin-top: awsui.$space-scaled-m;
+      margin-block-start: awsui.$space-scaled-m;
     }
 
     > li:not(:last-child) {
-      border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-layout;
+      border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-layout;
     }
   }
 }
 
 .form:not(.refresh) {
   @include styles.text-wrapping;
-  width: 100%;
+  inline-size: 100%;
 
   > .form-header {
     position: relative;
-    margin-bottom: awsui.$space-scaled-m;
+    margin-block-end: awsui.$space-scaled-m;
   }
 }
 
@@ -229,14 +238,14 @@
   }
 
   > .form-header > .form-header-content {
-    padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-m - awsui.$space-xxxs);
-    padding-bottom: awsui.$space-scaled-s;
+    padding-block-start: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-m - awsui.$space-xxxs);
+    padding-block-end: awsui.$space-scaled-s;
   }
 
   &:not(.remove-high-contrast-header) {
     > .form-header > .form-header-content {
-      padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
-      padding-bottom: awsui.$space-scaled-m;
+      padding-block-start: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
+      padding-block-end: awsui.$space-scaled-m;
     }
   }
 
@@ -251,7 +260,7 @@
     }
 
     > .form-header > .form-header-content {
-      padding-top: 0;
+      padding-block-start: 0;
     }
 
     > .form-component {
@@ -267,7 +276,7 @@
 .collapsed-steps {
   color: awsui.$color-text-heading-secondary;
   font-weight: styles.$font-weight-bold;
-  padding-top: awsui.$space-scaled-xxs;
+  padding-block-start: awsui.$space-scaled-xxs;
   &-hidden {
     display: none;
   }