From f91ef15cefee5cec8d6a7157efd83b88a266a7ce Mon Sep 17 00:00:00 2001
From: drmason13 <drmason13@users.noreply.github.com>
Date: Sat, 31 Aug 2024 10:28:35 +0100
Subject: [PATCH] fix: scss uses logical properties

---
 scss/components/_accordion.scss        |  4 ++--
 scss/components/_card.scss             | 26 +++++++++++-----------
 scss/components/_dropdown.scss         | 16 +++++++-------
 scss/components/_group.scss            | 24 ++++++++++-----------
 scss/components/_modal.scss            | 16 +++++++-------
 scss/components/_nav.scss              | 12 +++++------
 scss/components/_progress.scss         |  2 +-
 scss/components/_tooltip.scss          | 14 ++++++------
 scss/content/_button.scss              |  2 +-
 scss/content/_code.scss                |  2 +-
 scss/content/_miscs.scss               |  2 +-
 scss/content/_table.scss               |  6 +++---
 scss/content/_typography.scss          | 30 +++++++++++++-------------
 scss/forms/_basics.scss                | 26 +++++++++++-----------
 scss/forms/_checkbox-radio-switch.scss |  4 ++--
 scss/forms/_input-date.scss            |  8 +++----
 scss/forms/_input-file.scss            |  6 +++---
 scss/forms/_input-range.scss           |  2 +-
 scss/layout/_container.scss            | 12 +++++------
 scss/layout/_landmarks.scss            |  8 +++----
 scss/layout/_section.scss              |  2 +-
 21 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 3ffabb80..376fd264 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -8,7 +8,7 @@
 
   #{$parent-selector} details {
     display: block;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
 
     summary {
       line-height: 1rem;
@@ -86,7 +86,7 @@
     // Open
     &[open] {
       > summary {
-        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-block-end: var(#{$css-var-prefix}spacing);
 
         &:not([role]) {
           &:not(:focus) {
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 19d8358f..2fa070e5 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -7,7 +7,7 @@
    */
 
   #{$parent-selector} article {
-    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);
     border-radius: var(#{$css-var-prefix}border-radius);
@@ -16,31 +16,31 @@
 
     > header,
     > footer {
-      margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
-      margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
       padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
         var(#{$css-var-prefix}block-spacing-horizontal);
       background-color: var(#{$css-var-prefix}card-sectioning-background-color);
     }
 
     > header {
-      margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
-      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
-      border-bottom: var(#{$css-var-prefix}border-width)
+      margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
+      border-block-end: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}card-border-color);
-      border-top-right-radius: var(#{$css-var-prefix}border-radius);
-      border-top-left-radius: var(#{$css-var-prefix}border-radius);
+      border-end-start-radius: var(#{$css-var-prefix}border-radius);
+      border-start-start-radius: var(#{$css-var-prefix}border-radius);
     }
 
     > footer {
-      margin-top: var(#{$css-var-prefix}block-spacing-vertical);
-      margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
-      border-top: var(#{$css-var-prefix}border-width)
+      margin-block-start: var(#{$css-var-prefix}block-spacing-vertical);
+      margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      border-block-start: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}card-border-color);
-      border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
-      border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
+      border-end-end-radius: var(#{$css-var-prefix}border-radius);
+      border-start-end-radius: var(#{$css-var-prefix}border-radius);
     }
   }
 }
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index 95eb0d06..35e3ed55 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -10,7 +10,7 @@
   // ––––––––––––––––––––
   #{$parent-selector} details.dropdown {
     position: relative;
-    border-bottom: none;
+    border-block-end: none;
 
     // Marker
     // ––––––––––––––––––––
@@ -40,7 +40,7 @@
   // ––––––––––––––––––––
   #{$parent-selector} nav details.dropdown {
     // Override height
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   // Bouton as a select
@@ -165,7 +165,7 @@
     width: 100%;
     min-width: fit-content;
     margin: 0;
-    margin-top: var(#{$css-var-prefix}outline-width);
+    margin-block-start: var(#{$css-var-prefix}outline-width);
     padding: 0;
     border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
     border-radius: var(#{$css-var-prefix}border-radius);
@@ -188,17 +188,17 @@
 
     li {
       width: 100%;
-      margin-bottom: 0;
+      margin-block-end: 0;
       padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
         var(#{$css-var-prefix}form-element-spacing-horizontal);
       list-style: none;
 
       &:first-of-type {
-        margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+        margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
       }
 
       &:last-of-type {
-        margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+        margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
       }
 
       a {
@@ -237,7 +237,7 @@
   // inside container type accordion
   // ––––––––––––––––––––
   #{$parent-selector} details.dropdown[open] summary {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   // Menu opened
@@ -275,6 +275,6 @@
   // Label
   // ––––––––––––––––––––
   #{$parent-selector} label > details.dropdown {
-    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
   }
 }
diff --git a/scss/components/_group.scss b/scss/components/_group.scss
index 8b2631bf..37f75698 100644
--- a/scss/components/_group.scss
+++ b/scss/components/_group.scss
@@ -11,7 +11,7 @@
     display: inline-flex;
     position: relative;
     width: 100%;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
     border-radius: var(#{$css-var-prefix}border-radius);
     box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
     vertical-align: middle;
@@ -22,17 +22,17 @@
     select {
       position: relative;
       flex: 1 1 auto;
-      margin-bottom: 0;
+      margin-block-end: 0;
 
       &:not(:first-child) {
-        margin-left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        margin-inline-start: 0;
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
       }
 
       &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
       }
 
       &:focus {
@@ -48,7 +48,7 @@
     input:not([type="checkbox"], [type="radio"]),
     select {
       &:not(:first-child) {
-        margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
+        margin-inline-start: calc(var(#{$css-var-prefix}border-width) * -1);
       }
     }
 
@@ -107,13 +107,13 @@
   #{$parent-selector} [role="search"] {
     > * {
       &:first-child {
-        border-top-left-radius: 5rem;
-        border-bottom-left-radius: 5rem;
+        border-start-start-radius: 5rem;
+        border-start-end-radius: 5rem;
       }
 
       &:last-child {
-        border-top-right-radius: 5rem;
-        border-bottom-right-radius: 5rem;
+        border-end-start-radius: 5rem;
+        border-end-end-radius: 5rem;
       }
     }
   }
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 9ed05b6b..7df312c4 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -56,12 +56,12 @@
 
       > header {
         > * {
-          margin-bottom: 0;
+          margin-block-end: 0;
         }
 
         #{$close-selector} {
           margin: 0;
-          margin-left: var(#{$css-var-prefix}spacing);
+          margin-inline-start: var(#{$css-var-prefix}spacing);
           padding: 0;
           float: right;
         }
@@ -72,10 +72,10 @@
 
         button,
         [role="button"] {
-          margin-bottom: 0;
+          margin-block-end: 0;
 
           &:not(:first-of-type) {
-            margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
+            margin-inline-start: calc(var(#{$css-var-prefix}spacing) * 0.5);
           }
         }
       }
@@ -85,9 +85,9 @@
         display: block;
         width: 1rem;
         height: 1rem;
-        margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
-        margin-bottom: var(#{$css-var-prefix}spacing);
-        margin-left: auto;
+        margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1);
+        margin-block-end: var(#{$css-var-prefix}spacing);
+        margin-inline-start: auto;
         border: none;
         background-image: var(#{$css-var-prefix}icon-close);
         background-position: center;
@@ -116,7 +116,7 @@
   // Utilities
   @if $enable-classes {
     .modal-is-open {
-      padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
+      padding-inline-end: var(#{$css-var-prefix}scrollbar-width, 0px);
       overflow: hidden;
       pointer-events: none;
       touch-action: none;
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index c14dc4a8..049187c4 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -30,15 +30,15 @@
     ol,
     ul {
       align-items: center;
-      margin-bottom: 0;
+      margin-block-end: 0;
       padding: 0;
       list-style: none;
 
       &:first-of-type {
-        margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+        margin-inline-start: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
       }
       &:last-of-type {
-        margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+        margin-inline-end: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
       }
     }
 
@@ -68,9 +68,9 @@
       input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
       select {
         height: auto;
-        margin-right: inherit;
-        margin-bottom: 0;
-        margin-left: inherit;
+        margin-inline-end: inherit;
+        margin-block-end: 0;
+        margin-inline-start: inherit;
         padding: calc(
             var(#{$css-var-prefix}nav-link-spacing-vertical) -
               (var(#{$css-var-prefix}border-width) * 2)
diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss
index 576b8e46..bb2bcc20 100644
--- a/scss/components/_progress.scss
+++ b/scss/components/_progress.scss
@@ -31,7 +31,7 @@
     appearance: none;
     width: 100%;
     height: 0.5rem;
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
     overflow: hidden;
 
     // Remove Firefox and Opera border
diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index 2076438d..1a142f14 100644
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -10,7 +10,7 @@
     position: relative;
 
     &:not(a, button, input) {
-      border-bottom: 1px dotted;
+      border-block-end: 1px dotted;
       text-decoration: none;
       cursor: help;
     }
@@ -46,9 +46,9 @@
     &::after {
       padding: 0;
       transform: translate(-50%, 0rem);
-      border-top: 0.3rem solid;
-      border-right: 0.3rem solid transparent;
-      border-left: 0.3rem solid transparent;
+      border-block-start: 0.3rem solid;
+      border-inline-end: 0.3rem solid transparent;
+      border-inline-start: 0.3rem solid transparent;
       border-radius: 0;
       background-color: transparent;
       content: "";
@@ -66,7 +66,7 @@
       &:after {
         transform: translate(-50%, -0.3rem);
         border: 0.3rem solid transparent;
-        border-bottom: 0.3rem solid;
+        border-block-end: 0.3rem solid;
       }
     }
 
@@ -83,7 +83,7 @@
       &:after {
         transform: translate(0.3rem, -50%);
         border: 0.3rem solid transparent;
-        border-left: 0.3rem solid;
+        border-inline-start: 0.3rem solid;
       }
     }
 
@@ -100,7 +100,7 @@
       &:after {
         transform: translate(-0.3rem, -50%);
         border: 0.3rem solid transparent;
-        border-right: 0.3rem solid;
+        border-inline-end: 0.3rem solid;
       }
     }
 
diff --git a/scss/content/_button.scss b/scss/content/_button.scss
index 2887e7e9..01085ed6 100644
--- a/scss/content/_button.scss
+++ b/scss/content/_button.scss
@@ -88,7 +88,7 @@
   #{$parent-selector} [type="submit"],
   #{$parent-selector} [type="reset"],
   #{$parent-selector} [type="button"] {
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
   }
 
   // .secondary, .contrast & .outline
diff --git a/scss/content/_code.scss b/scss/content/_code.scss
index a16afd07..3fa0d35d 100644
--- a/scss/content/_code.scss
+++ b/scss/content/_code.scss
@@ -53,7 +53,7 @@
 
   #{$parent-selector} pre {
     display: block;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
     overflow-x: auto;
 
     > code {
diff --git a/scss/content/_miscs.scss b/scss/content/_miscs.scss
index cf6de13e..80b48559 100644
--- a/scss/content/_miscs.scss
+++ b/scss/content/_miscs.scss
@@ -17,7 +17,7 @@
     height: 0; // 2
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     border: 0;
-    border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
+    border-block-start: 1px solid var(#{$css-var-prefix}muted-border-color);
     color: inherit; // 1
   }
 
diff --git a/scss/content/_table.scss b/scss/content/_table.scss
index 1239bc6f..06303ba8 100644
--- a/scss/content/_table.scss
+++ b/scss/content/_table.scss
@@ -27,7 +27,7 @@
   #{$parent-selector} th,
   #{$parent-selector} td {
     padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
-    border-bottom: var(#{$css-var-prefix}border-width)
+    border-block-end: var(#{$css-var-prefix}border-width)
       solid
       var(#{$css-var-prefix}table-border-color);
     background-color: var(#{$css-var-prefix}background-color);
@@ -41,10 +41,10 @@
   #{$parent-selector} tfoot {
     th,
     td {
-      border-top: var(#{$css-var-prefix}border-width)
+      border-block-start: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}table-border-color);
-      border-bottom: 0;
+      border-block-end: 0;
     }
   }
 
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index d22956a7..327ff828 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -43,8 +43,8 @@
   #{$parent-selector} pre,
   #{$parent-selector} table,
   #{$parent-selector} ul {
-    margin-top: 0;
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-start: 0;
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
     font-style: normal;
     font-weight: var(#{$css-var-prefix}font-weight);
@@ -57,8 +57,8 @@
   #{$parent-selector} h4,
   #{$parent-selector} h5,
   #{$parent-selector} h6 {
-    margin-top: 0;
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-start: 0;
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}font-weight);
     font-size: var(#{$css-var-prefix}font-size);
@@ -89,22 +89,22 @@
   #{$parent-selector}
     :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
     ~ :is(h1, h2, h3, h4, h5, h6) {
-      margin-top: var(#{$css-var-prefix}typography-spacing-top);
+      margin-block-start: var(#{$css-var-prefix}typography-spacing-top);
     }
   }
 
   // Paragraphs
   #{$parent-selector} p {
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
   }
 
   // Heading group
   #{$parent-selector} hgroup {
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
 
     > * {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
     }
 
     > *:not(:first-child):last-child {
@@ -117,7 +117,7 @@
   // Lists
   #{$parent-selector} :where(ol, ul) {
     li {
-      margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+      margin-block-end: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
     }
   }
 
@@ -125,7 +125,7 @@
   // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
   #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
     margin: 0; // 1
-    margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+    margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
   }
 
   #{$parent-selector} ul li {
@@ -145,13 +145,13 @@
     display: block;
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     padding: var(#{$css-var-prefix}spacing);
-    border-right: none;
-    border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-end: none;
+    border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
     border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
     border-inline-end: none;
 
     footer {
-      margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
+      margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
       color: var(#{$css-var-prefix}blockquote-footer-color);
     }
   }
@@ -159,7 +159,7 @@
   // Abbreviations
   // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
   #{$parent-selector} abbr[title] {
-    border-bottom: 1px dotted;
+    border-block-end: 1px dotted;
     text-decoration: none; // 1
     cursor: help;
   }
diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss
index 39fbe1e5..0e607e8b 100644
--- a/scss/forms/_basics.scss
+++ b/scss/forms/_basics.scss
@@ -127,7 +127,7 @@
   #{$parent-selector} fieldset {
     width: 100%;
     margin: 0;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
     padding: 0;
     border: 0;
   }
@@ -136,13 +136,13 @@
   #{$parent-selector} label,
   #{$parent-selector} fieldset legend {
     display: block;
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.375);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
   }
 
   #{$parent-selector} fieldset legend {
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
   }
 
   // Blocks, 100%
@@ -264,17 +264,17 @@
       ) {
       &[aria-invalid] {
         @if $enable-important {
-          padding-right: calc(
+          padding-inline-end: calc(
             var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
           ) !important;
-          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
           padding-inline-end: calc(
             var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
           ) !important;
         } @else {
-          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
-          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
         }
@@ -381,7 +381,7 @@
   #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
   #{$parent-selector} select,
   #{$parent-selector} textarea {
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
   }
 
   // Select
@@ -393,8 +393,8 @@
     }
 
     &:not([multiple], [size]) {
-      padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
-      padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
       padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
       padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
       background-image: var(#{$css-var-prefix}icon-chevron);
@@ -446,8 +446,8 @@
     + small {
       display: block;
       width: 100%;
-      margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
-      margin-bottom: var(#{$css-var-prefix}spacing);
+      margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75);
+      margin-block-end: var(#{$css-var-prefix}spacing);
       color: var(#{$css-var-prefix}muted-color);
     }
     &[aria-invalid="false"] {
@@ -465,7 +465,7 @@
   // Styles for Input inside a label
   #{$parent-selector} label {
     > :where(input, select, textarea) {
-      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+      margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
     }
   }
 }
diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss
index 9e53aa5c..e2c395b4 100644
--- a/scss/forms/_checkbox-radio-switch.scss
+++ b/scss/forms/_checkbox-radio-switch.scss
@@ -22,7 +22,7 @@
     appearance: none;
     width: 1.25em;
     height: 1.25em;
-    margin-top: -0.125em;
+    margin-block-start: -0.125em;
     margin-inline-end: 0.5em;
     border-width: var(#{$css-var-prefix}border-width);
     vertical-align: middle;
@@ -45,7 +45,7 @@
 
     & ~ label {
       display: inline-block;
-      margin-bottom: 0;
+      margin-block-end: 0;
       cursor: pointer;
 
       &:not(:last-of-type) {
diff --git a/scss/forms/_input-date.scss b/scss/forms/_input-date.scss
index c1e1c20a..9d0c57d8 100644
--- a/scss/forms/_input-date.scss
+++ b/scss/forms/_input-date.scss
@@ -11,7 +11,7 @@
     &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
       #{$css-var-prefix}icon-position: 0.75rem;
       #{$css-var-prefix}icon-width: 1rem;
-      padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
+      padding-inline-end: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
       background-image: var(#{$css-var-prefix}icon-date);
       background-position: center right var(#{$css-var-prefix}icon-position);
       background-size: var(#{$css-var-prefix}icon-width) auto;
@@ -32,8 +32,8 @@
   #{$parent-selector} [type="week"] {
     &::-webkit-calendar-picker-indicator {
       width: var(#{$css-var-prefix}icon-width);
-      margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
-      margin-left: var(#{$css-var-prefix}icon-position);
+      margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
+      margin-inline-start: var(#{$css-var-prefix}icon-position);
       opacity: 0;
     }
   }
@@ -46,7 +46,7 @@
       #{$parent-selector} [type="month"],
       #{$parent-selector} [type="time"],
       #{$parent-selector} [type="week"] {
-        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+        padding-inline-end: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
         background-image: none !important;
       }
     }
diff --git a/scss/forms/_input-file.scss b/scss/forms/_input-file.scss
index a5505089..fad00ec3 100644
--- a/scss/forms/_input-file.scss
+++ b/scss/forms/_input-file.scss
@@ -10,15 +10,15 @@
   //    with the forced overflow hidden on the input[type="file"] element.
   #{$parent-selector} [type="file"] {
     #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
-    margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
+    margin-inline-start: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
     padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
-    padding-left: var(#{$css-var-prefix}outline-width); // 1
+    padding-inline-start: var(#{$css-var-prefix}outline-width); // 1
     border: 0;
     border-radius: 0;
     background: none;
 
     &::file-selector-button {
-      margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
+      margin-inline-end: calc(var(#{$css-var-prefix}spacing) / 2);
       padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
         var(#{$css-var-prefix}form-element-spacing-horizontal);
     }
diff --git a/scss/forms/_input-range.scss b/scss/forms/_input-range.scss
index 08b81245..52f05a2b 100644
--- a/scss/forms/_input-range.scss
+++ b/scss/forms/_input-range.scss
@@ -25,7 +25,7 @@ $border-thumb: 2px;
   -webkit-appearance: none;
   width: $height-thumb;
   height: $height-thumb;
-  margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+  margin-block-start: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
   border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
   border-radius: 50%;
   background-color: var(#{$css-var-prefix}range-thumb-color);
diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss
index 0efa9ad3..f9a584d9 100644
--- a/scss/layout/_container.scss
+++ b/scss/layout/_container.scss
@@ -9,10 +9,10 @@
   .container,
   .container-fluid {
     width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: var(#{$css-var-prefix}spacing);
-    padding-left: var(#{$css-var-prefix}spacing);
+    margin-inline-end: auto;
+    margin-inline-start: auto;
+    padding-inline-end: var(#{$css-var-prefix}spacing);
+    padding-inline-start: var(#{$css-var-prefix}spacing);
   }
 
   .container {
@@ -23,8 +23,8 @@
           max-width: map.get($values, "viewport");
           @if $first-breakpoint {
             $first-breakpoint: false;
-            padding-right: 0;
-            padding-left: 0;
+            padding-inline-end: 0;
+            padding-inline-start: 0;
           }
         }
       }
diff --git a/scss/layout/_landmarks.scss b/scss/layout/_landmarks.scss
index b5d5a4e4..a16602d3 100644
--- a/scss/layout/_landmarks.scss
+++ b/scss/layout/_landmarks.scss
@@ -32,8 +32,8 @@
       @if $enable-semantic-container {
         $first-breakpoint: true;
         width: 100%;
-        margin-right: auto;
-        margin-left: auto;
+        margin-inline-end: auto;
+        margin-inline-start: auto;
         padding: var(#{$css-var-prefix}block-spacing-vertical)
           var(#{$css-var-prefix}block-spacing-horizontal);
 
@@ -44,8 +44,8 @@
                 max-width: map.get($values, "viewport");
                 @if $first-breakpoint {
                   $first-breakpoint: false;
-                  padding-right: 0;
-                  padding-left: 0;
+                  padding-inline-end: 0;
+                  padding-inline-start: 0;
                 }
               }
             }
diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss
index 4f884967..08d902c6 100644
--- a/scss/layout/_section.scss
+++ b/scss/layout/_section.scss
@@ -7,6 +7,6 @@
    */
 
   #{$parent-selector} section {
-    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
   }
 }