Switched to logical CSS properties

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.23b6d78a.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f8ff4087.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

material/overrides/assets/stylesheets/main.bf23d911.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}
+{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}

material/overrides/main.html

@@ -3,7 +3,7 @@
 -#}
 {% extends "base.html" %}
 {% block extrahead %}
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.b745cb77.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.bf23d911.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

src/assets/stylesheets/main/_modifiers.scss

@@ -35,27 +35,22 @@
       float: left;
       width: px2rem(234px);
       margin-top: 0;
-      margin-right: px2rem(16px);
+      margin-inline-end: px2rem(16px);
       margin-bottom: px2rem(16px);
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
         float: right;
-        margin-right: 0;
-        margin-left: px2rem(16px);
       }
 
       // Modifier to move to end (ltr: right, rtl: left)
       &.end {
         float: right;
-        margin-right: 0;
+        margin-inline: px2rem(16px) 0;
-        margin-left: px2rem(16px);
 
         // Adjust for right-to-left languages
         [dir="rtl"] & {
           float: left;
-          margin-right: px2rem(16px);
-          margin-left: 0;
         }
       }
     }

src/assets/stylesheets/main/_typeset.scss

@@ -292,7 +292,7 @@ kbd {
       // Tooltip
       &[title]:where(:focus, :hover)::after {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         display: inline-block;
         width: auto;
         min-width: max-content;
@@ -316,28 +316,14 @@ kbd {
 
   // Superscript and subscript
   :where(sup, sub) {
-    margin-left: px2em(1px, 12.8px);
+    margin-inline-start: px2em(1px, 12.8px);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2em(1px, 12.8px);
-      margin-left: initial;
-    }
   }
 
   // Blockquotes, possibly nested
   blockquote {
-    padding-left: px2rem(12px);
+    padding-inline-start: px2rem(12px);
     color: var(--md-default-fg-color--light);
-    border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
+    border-inline-start: px2rem(4px) solid var(--md-default-fg-color--lighter);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding-right: px2rem(12px);
-      padding-left: initial;
-      border-right: px2rem(4px) solid var(--md-default-fg-color--lighter);
-      border-left: initial;
-    }
   }
 
   // Unordered list
@@ -347,7 +333,7 @@ kbd {
 
   // Unordered and ordered list
   :where(ul, ol) {
-    margin-left: px2em(10px);
+    margin-inline-start: px2em(10px);
     padding: 0;
 
     // Adjust display mode if not hidden
@@ -355,12 +341,6 @@ kbd {
       display: flow-root;
     }
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2em(10px);
-      margin-left: initial;
-    }
-
     // Nested ordered list
     ol {
       list-style-type: lower-alpha;
@@ -374,13 +354,7 @@ kbd {
     // List element
     li {
       margin-bottom: 0.5em;
-      margin-left: px2em(20px);
+      margin-inline-start: px2em(20px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2em(20px);
-        margin-left: initial;
-      }
 
       // Adjust spacing
       :where(p, blockquote) {
@@ -394,26 +368,16 @@ kbd {
 
       // Nested list
       :where(ul, ol) {
-        margin: 0.5em 0 0.5em px2em(10px);
+        margin-block: 0.5em;
-
+        margin-inline-start: px2em(10px);
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-right: px2em(10px);
-          margin-left: initial;
-        }
       }
     }
   }
 
   // Definition list
   dd {
-    margin: 1em 0 1.5em px2em(30px);
+    margin-block: 1em 1.5em;
-
+    margin-inline-start: px2em(30px);
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2em(30px);
-      margin-left: initial;
-    }
   }
 
   // Image or icon
@@ -563,7 +527,7 @@ kbd {
       display: inline-block;
       width: 1.2em;
       height: 1.2em;
-      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
       vertical-align: text-bottom;
       mask-image: var(--md-typeset-table-sort-icon);
       mask-repeat: no-repeat;

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -71,7 +71,7 @@ $admonitions: (
     page-break-inside: avoid;
     background-color: var(--md-admonition-bg-color);
     border: 0 solid $clr-blue-a200;
-    border-left-width: px2rem(4px);
+    border-inline-start-width: px2rem(4px);
     border-radius: px2rem(2px);
     box-shadow: var(--md-shadow-z1);
 
@@ -86,12 +86,6 @@ $admonitions: (
       box-sizing: border-box;
     }
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      border-right-width: px2rem(4px);
-      border-left-width: 0;
-    }
-
     // Adjust vertical spacing for nested admonitions
     :where(.admonition, details) {
       margin-top: 1em;
@@ -122,21 +116,15 @@ $admonitions: (
   // Admonition title
   :where(.admonition-title, summary) {
     position: relative;
-    margin: 0 px2rem(-12px) 0 px2rem(-16px);
+    margin-block: 0;
-    padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
+    margin-inline: px2rem(-16px) px2rem(-12px);
+    padding-block: px2rem(8px);
+    padding-inline: px2rem(40px) px2rem(12px);
     font-weight: 700;
     background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
     border: 0 solid $clr-blue-a200;
-    border-left-width: px2rem(4px);
+    border-inline-start-width: px2rem(4px);
-    border-top-left-radius: px2rem(2px);
+    border-start-start-radius: px2rem(2px);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin: 0 px2rem(-16px) 0 px2rem(-12px);
-      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
-      border-right-width: px2rem(4px);
-      border-left-width: 0;
-    }
 
     // Adjust spacing for title-only admonitions
     html &:last-child {
@@ -147,7 +135,7 @@ $admonitions: (
     &::before {
       position: absolute;
       top: px2em(10px);
-      left: px2rem(12px);
+      inset-inline-start: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
       background-color: $clr-blue-a200;
@@ -155,12 +143,6 @@ $admonitions: (
       mask-repeat: no-repeat;
       mask-size: contain;
       content: "";
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: px2rem(12px);
-        left: initial;
-      }
     }
   }
 }

src/assets/stylesheets/main/extensions/markdown/_footnotes.scss

@@ -41,7 +41,7 @@
 
     // Footnote list - omit left indentation
     > ol {
-      margin-left: 0;
+      margin-inline-start: 0;
 
       // Footnote item - footnote items can contain lists, so we need to scope
       // the spacing adjustments to the top-level footnote item.

src/assets/stylesheets/main/extensions/markdown/_toc.scss

@@ -30,7 +30,7 @@
   // Headerlink
   .headerlink {
     display: inline-block;
-    margin-left: px2rem(10px);
+    margin-inline-start: px2rem(10px);
     color: var(--md-default-fg-color--lighter);
     opacity: 0;
     transition:
@@ -41,12 +41,6 @@
     @media print {
       display: none;
     }
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2rem(10px);
-      margin-left: initial;
-    }
   }
 
   // Show headerlinks on parent hover

src/assets/stylesheets/main/extensions/pymdownx/_critic.scss

@@ -61,8 +61,7 @@
   .critic.block {
     display: block;
     margin: 1em 0;
-    padding-right: px2rem(16px);
+    padding-inline: px2rem(16px);
-    padding-left: px2rem(16px);
     overflow: auto;
     box-shadow: none;
 

src/assets/stylesheets/main/extensions/pymdownx/_details.scss

@@ -64,16 +64,11 @@
   summary {
     display: block;
     min-height: px2rem(20px);
-    padding-right: px2rem(36px);
+    padding-inline-end: px2rem(36px);
-    border-top-left-radius: px2rem(2px);
+    border-start-start-radius: px2rem(2px);
-    border-top-right-radius: px2rem(2px);
+    border-start-end-radius: px2rem(2px);
     cursor: pointer;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
-    }
-
     // Show outline for keyboard devices
     &.focus-visible {
       outline-color: var(--md-accent-fg-color);
@@ -90,7 +85,7 @@
     &::after {
       position: absolute;
       top: px2em(10px);
-      right: px2rem(8px);
+      inset-inline-end: px2rem(8px);
       width: px2rem(20px);
       height: px2rem(20px);
       background-color: currentColor;
@@ -103,8 +98,6 @@
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: initial;
-        left: px2rem(8px);
         transform: rotate(180deg);
       }
     }

src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss

@@ -191,8 +191,7 @@
     // don't overlay line numbers, as active annotations have a `z-index` of 2.
     z-index: 3;
     float: left;
-    margin-right: px2em(16px, 13.6px);
+    margin-inline: px2em(16px, 13.6px);
-    margin-left: px2em(-16px, 13.6px);
     padding-left: px2em(16px, 13.6px);
     color: var(--md-default-fg-color--light);
     background-color: var(--md-code-bg-color);

src/assets/stylesheets/main/extensions/pymdownx/_keys.scss

@@ -94,13 +94,11 @@
       "page-up":       "\21DE",
       "print-screen":  "\2399"
     ) {
-      .key-#{$name} {
+      .key-#{$name}::before {
-        &::before {
         padding-right: px2em(6.4px);
         content: $code;
       }
     }
-    }
 
     // Define keyboard keys with right icon
     @each $name, $code in (
@@ -108,12 +106,10 @@
       "num-enter":     "\2324",
       "enter":         "\23CE"
     ) {
-      .key-#{$name} {
+      .key-#{$name}::after {
-        &::after {
         padding-left: px2em(6.4px);
         content: $code;
       }
     }
   }
 }
-}

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -162,8 +162,8 @@
 
       // Omit rounded borders
       > code {
-        border-top-left-radius: 0;
+        border-start-start-radius: 0;
-        border-top-right-radius: 0;
+        border-start-end-radius: 0;
       }
     }
 
@@ -185,28 +185,14 @@
   .md-content__inner > .tabbed-set .tabbed-labels {
     max-width: 100vw;
     margin: 0 px2rem(-16px);
-    padding-left: px2rem(16px);
+    padding-inline-start: px2rem(16px);
-    scroll-padding-left: px2rem(16px);
+    scroll-padding-inline-start: px2rem(16px);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding-right: px2rem(16px);
-      padding-left: initial;
-      scroll-padding-right: px2rem(16px);
-      scroll-padding-left: initial;
-    }
 
     // Hack: some browsers ignore the right padding on flex containers,
     // see https://bit.ly/3lsPS3S
     &::after {
-      padding-right: px2rem(16px);
+      padding-inline-end: px2rem(16px);
       content: "";
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: initial;
-        padding-left: px2rem(16px);
-      }
     }
   }
 }

src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss

@@ -47,13 +47,7 @@
     [type="checkbox"] {
       position: absolute;
       top: 0.45em;
-      left: -2em;
+      inset-inline-start: -2em;
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: -2em;
-        left: initial;
-      }
     }
   }
 
@@ -67,7 +61,7 @@
   .task-list-indicator::before {
     position: absolute;
     top: 0.15em;
-    left: px2em(-24px);
+    inset-inline-start: px2em(-24px);
     width: px2em(20px);
     height: px2em(20px);
     background-color: var(--md-default-fg-color--lightest);
@@ -75,12 +69,6 @@
     mask-repeat: no-repeat;
     mask-size: contain;
     content: "";
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      right: px2em(-24px);
-      left: initial;
-    }
   }
 
   // Tasklist indicator in checked state

src/assets/stylesheets/main/layout/_base.scss

@@ -82,8 +82,7 @@ body {
 // to `1220px`, and they are rendered centered if the screen is larger.
 .md-grid {
   max-width: px2rem(1220px);
-  margin-right: auto;
+  margin-inline: auto;
-  margin-left: auto;
 }
 
 // Main container

src/assets/stylesheets/main/layout/_content.scss

@@ -42,30 +42,12 @@
 
       // Sidebar with navigation is visible
       .md-sidebar--primary:not([hidden]) ~ .md-content > & {
-
+        margin-inline-start: px2rem(24px);
-        // Adjust for left-to-right languages
-        [dir="ltr"] & {
-          margin-left: px2rem(24px);
-        }
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-right: px2rem(24px);
-        }
       }
 
       // Sidebar with table of contents is visible
       .md-sidebar--secondary:not([hidden]) ~ .md-content > & {
-
+        margin-inline-end: px2rem(24px);
-        // Adjust for left-to-right languages
-        [dir="ltr"] & {
-          margin-right: px2rem(24px);
-        }
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-left: px2rem(24px);
-        }
       }
     }
 
@@ -88,7 +70,7 @@
   &__button {
     float: right;
     margin: px2rem(8px) 0;
-    margin-left: px2rem(8px);
+    margin-inline-start: px2rem(8px);
     padding: 0;
 
     // [print]: Hide buttons
@@ -99,13 +81,6 @@
     // Adjust for right-to-left languages
     [dir="rtl"] & {
       float: left;
-      margin-right: px2rem(8px);
-      margin-left: initial;
-
-      // Flip icon vertically
-      svg {
-        transform: scaleX(-1);
-      }
     }
 
     // Adjust default link color for icons
@@ -117,6 +92,11 @@
     svg {
       display: inline;
       vertical-align: top;
+
+      // Adjust for right-to-left languages
+      [dir="rtl"] & {
+        transform: scaleX(-1);
+      }
     }
   }
 }

src/assets/stylesheets/main/layout/_dialog.scss

@@ -27,9 +27,8 @@
 // Dialog
 .md-dialog {
   position: fixed;
-  right: px2rem(16px);
+  inset-inline-end: px2rem(16px);
   bottom: px2rem(16px);
-  left: initial;
   z-index: 4;
   min-width: px2rem(222px);
   padding: px2rem(8px) px2rem(12px);
@@ -48,12 +47,6 @@
     display: none;
   }
 
-  // Adjust for right-to-left languages
-  [dir="rtl"] & {
-    right: initial;
-    left: px2rem(16px);
-  }
-
   // Dialog in open state
   &[data-md-state="open"] {
     transform: translateY(0);

src/assets/stylesheets/main/layout/_footer.scss

@@ -61,6 +61,11 @@
       opacity: 0.7;
     }
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & svg {
+      transform: scaleX(-1);
+    }
+
     // Footer link to previous page
     &--prev {
 
@@ -72,32 +77,16 @@
           display: none;
         }
       }
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-
-        // Flip icon vertically
-        svg {
-          transform: scaleX(-1);
-        }
-      }
     }
 
     // Footer link to next page
     &--next {
-      margin-left: auto;
+      margin-inline-start: auto;
       text-align: right;
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: auto;
-        margin-left: initial;
         text-align: left;
-
-        // Flip icon vertically
-        svg {
-          transform: scaleX(-1);
-        }
       }
     }
   }
@@ -121,8 +110,7 @@
   // Footer link direction (i.e. prev and next)
   &__direction {
     position: absolute;
-    right: 0;
+    inset-inline: 0;
-    left: 0;
     margin-top: px2rem(-20px);
     padding: 0 px2rem(20px);
     font-size: px2rem(12.8px);

src/assets/stylesheets/main/layout/_form.scss

@@ -62,7 +62,8 @@
     padding: 0 px2rem(12px);
     font-size: px2rem(16px);
     border-bottom: px2rem(2px) solid var(--md-default-fg-color--lighter);
-    border-radius: px2rem(2px) px2rem(2px) 0 0;
+    border-start-start-radius: px2rem(2px);
+    border-start-end-radius: px2rem(2px);
     box-shadow: var(--md-shadow-z1);
     transition:
       border     250ms,

src/assets/stylesheets/main/layout/_header.scss

@@ -29,8 +29,7 @@
 .md-header {
   position: sticky;
   top: 0;
-  right: 0;
+  inset-inline: 0;
-  left: 0;
   z-index: 4;
   color: var(--md-primary-bg-color);
   background-color: var(--md-primary-fg-color);
@@ -131,14 +130,10 @@
       }
 
       // Adjust for right-to-left languages
-      [dir="rtl"] & {
+      [dir="rtl"] & svg {
-
-        // Flip icon vertically
-        svg {
         transform: scaleX(-1);
       }
     }
-    }
 
     // Button for drawer
     &[for="__drawer"] {
@@ -185,17 +180,11 @@
   &__title {
     flex-grow: 1;
     height: px2rem(48px);
-    margin-right: px2rem(8px);
+    margin-inline-end: px2rem(8px);
-    margin-left: px2rem(20px);
+    margin-inline-start: px2rem(20px);
     font-size: px2rem(18px);
     line-height: px2rem(48px);
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2rem(20px);
-      margin-left: px2rem(8px);
-    }
-
     // Header title in active state, i.e. page title is visible
     &[data-md-state="active"] .md-header__topic {
       z-index: -1;
@@ -260,23 +249,12 @@
       display: block;
       width: px2rem(234px);
       max-width: px2rem(234px);
-      margin-left: px2rem(20px);
+      margin-inline-start: px2rem(20px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(20px);
-        margin-left: initial;
-      }
     }
 
     // [screen +]: Adjust spacing of search bar
     @include break-from-device(screen) {
-      margin-left: px2rem(28px);
+      margin-inline-start: px2rem(28px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(28px);
-      }
     }
   }
 }

src/assets/stylesheets/main/layout/_nav.scss

@@ -83,13 +83,7 @@
 
     // Navigation item on level 2
     & & {
-      padding-right: 0;
+      padding-inline-end: 0;
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(12px);
-        padding-left: 0;
-      }
     }
   }
 
@@ -175,8 +169,7 @@
     &--primary & {
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline: 0;
-      left: 0;
       z-index: 1;
       display: flex;
       flex-direction: column;
@@ -209,18 +202,12 @@
         .md-nav__icon {
           position: absolute;
           top: px2rem(8px);
-          left: px2rem(8px);
+          inset-inline-start: px2rem(8px);
           display: block;
           width: px2rem(24px);
           height: px2rem(24px);
           margin: px2rem(4px);
 
-          // Adjust for right-to-left languages
-          [dir="rtl"] & {
-            right: px2rem(8px);
-            left: initial;
-          }
-
           // Navigation icon in link to previous level
           &::after {
             display: block;
@@ -260,16 +247,10 @@
         .md-logo {
           position: absolute;
           top: px2rem(4px);
-          left: px2rem(4px);
+          inset-inline-start: px2rem(4px);
           display: block;
           margin: px2rem(4px);
           padding: px2rem(8px);
-
-          // Adjust for right-to-left languages
-          [dir="rtl"] & {
-            right: px2rem(4px);
-            left: initial;
-          }
         }
       }
 
@@ -303,15 +284,9 @@
         .md-nav__icon {
           width: px2rem(24px);
           height: px2rem(24px);
-          margin-right: px2rem(-4px);
+          margin-inline-end: px2rem(-4px);
           font-size: px2rem(24px);
 
-          // Adjust for right-to-left languages
-          [dir="rtl"] & {
-            margin-right: 0;
-            margin-left: px2rem(-4px);
-          }
-
           // Navigation icon in link to next level
           &::after {
             display: block;
@@ -345,46 +320,22 @@
 
           // Navigation link on level 3
           .md-nav__link {
-            padding-left: px2rem(28px);
+            padding-inline-start: px2rem(28px);
-
-            // Adjust for right-to-left languages
-            [dir="rtl"] & {
-              padding-right: px2rem(28px);
-              padding-left: initial;
-            }
           }
 
           // Navigation link on level 4
           .md-nav .md-nav__link {
-            padding-left: px2rem(40px);
+            padding-inline-start: px2rem(40px);
-
-            // Adjust for right-to-left languages
-            [dir="rtl"] & {
-              padding-right: px2rem(40px);
-              padding-left: initial;
-            }
           }
 
           // Navigation link on level 5
           .md-nav .md-nav .md-nav__link {
-            padding-left: px2rem(52px);
+            padding-inline-start: px2rem(52px);
-
-            // Adjust for right-to-left languages
-            [dir="rtl"] & {
-              padding-right: px2rem(52px);
-              padding-left: initial;
-            }
           }
 
           // Navigation link on level 6
           .md-nav .md-nav .md-nav .md-nav__link {
-            padding-left: px2rem(64px);
+            padding-inline-start: px2rem(64px);
-
-            // Adjust for right-to-left languages
-            [dir="rtl"] & {
-              padding-right: px2rem(64px);
-              padding-left: initial;
-            }
           }
         }
       }
@@ -648,7 +599,7 @@
 
         // Adjust spacing for level 1 navigation items
         > .md-nav__list > .md-nav__item {
-          padding-right: px2rem(12px);
+          padding-inline-end: px2rem(12px);
         }
       }
     }
@@ -670,7 +621,7 @@
       .md-nav--secondary {
         display: block;
         margin-bottom: 1.25em;
-        border-left: px2rem(1px) solid var(--md-primary-fg-color);
+        border-inline-start: px2rem(1px) solid var(--md-primary-fg-color);
 
         // Hide table of contents title
         > .md-nav__title {

src/assets/stylesheets/main/layout/_search.scss

@@ -54,7 +54,7 @@
     @include break-to-device(tablet portrait) {
       position: absolute;
       top: px2rem(-20px);
-      left: px2rem(-44px);
+      inset-inline-start: px2rem(-44px);
       width: px2rem(40px);
       height: px2rem(40px);
       overflow: hidden;
@@ -66,12 +66,6 @@
         opacity   200ms 200ms;
       pointer-events: none;
 
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: px2rem(-44px);
-        left: initial;
-      }
-
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
         opacity: 1;
@@ -85,7 +79,7 @@
     @include break-from-device(tablet landscape) {
       position: fixed;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       width: 0;
       height: 0;
       background-color: hsla(0, 0%, 0%, 0.54);
@@ -95,12 +89,6 @@
         height    0ms 250ms,
         opacity 250ms;
 
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: 0;
-        left: initial;
-      }
-
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
         width: 100%;
@@ -146,7 +134,7 @@
     @include break-to-device(tablet portrait) {
       position: fixed;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       z-index: 2;
       width: 0;
       height: 0;
@@ -161,8 +149,6 @@
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: 0;
-        left: initial;
         transform: translateX(-5%);
       }
 
@@ -247,16 +233,11 @@
     z-index: 2;
     width: 100%;
     height: 100%;
-    padding: 0 px2rem(44px) 0 px2rem(72px);
+    padding-inline: px2rem(72px) px2rem(44px);
     font-size: px2rem(18px);
     text-overflow: ellipsis;
     background: transparent;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding: 0 px2rem(72px) 0 px2rem(44px);
-    }
-
     // Search placeholder
     &::placeholder {
       transition: color 250ms;
@@ -282,15 +263,10 @@
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
-      padding-left: px2rem(44px);
+      padding-inline-start: px2rem(44px);
       color: inherit;
       font-size: px2rem(16px);
 
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(44px);
-      }
-
       // Search placeholder
       &::placeholder {
         color: var(--md-primary-bg-color--light);
@@ -333,30 +309,18 @@
     &[for="__search"] {
       position: absolute;
       top: px2rem(6px);
-      left: px2rem(10px);
+      inset-inline-start: px2rem(10px);
       z-index: 2;
 
       // Adjust for right-to-left languages
-      [dir="rtl"] & {
+      [dir="rtl"] & svg {
-        right: px2rem(10px);
-        left: initial;
-
-        // Flip icon vertically
-        svg {
         transform: scaleX(-1);
       }
-      }
 
       // [tablet portrait -]: Search modal
       @include break-to-device(tablet portrait) {
         top: px2rem(12px);
-        left: px2rem(16px);
+        inset-inline-start: px2rem(16px);
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          right: px2rem(16px);
-          left: initial;
-        }
 
         // Hide the magnifying glass
         svg:first-child {
@@ -380,31 +344,19 @@
   &__options {
     position: absolute;
     top: px2rem(6px);
-    right: px2rem(10px);
+    inset-inline-end: px2rem(10px);
     z-index: 2;
     pointer-events: none;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      right: initial;
-      left: px2rem(10px);
-    }
-
     // [tablet portrait -]: Search modal
     @include break-to-device(tablet portrait) {
       top: px2rem(12px);
-      right: px2rem(16px);
+      inset-inline-end: px2rem(16px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: initial;
-        left: px2rem(16px);
-      }
     }
 
     // Search option buttons
     > * {
-      margin-left: px2rem(4px);
+      margin-inline-start: px2rem(4px);
       color: var(--md-default-fg-color--light);
       transform: scale(0.75);
       opacity: 0;
@@ -441,27 +393,17 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    padding: 0 px2rem(44px) 0 px2rem(72px);
+    padding-inline: px2rem(72px) px2rem(44px);
     color: var(--md-default-fg-color--lighter);
     font-size: px2rem(18px);
     white-space: nowrap;
     opacity: 0;
     transition: opacity 50ms;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding: 0 px2rem(72px) 0 px2rem(44px);
-    }
-
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
-      padding-left: px2rem(44px);
+      padding-inline-start: px2rem(44px);
       font-size: px2rem(16px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(44px);
-      }
     }
 
     // Show suggestions when search is active
@@ -477,7 +419,8 @@
     z-index: 1;
     width: 100%;
     overflow: hidden;
-    border-radius: 0 0 px2rem(2px) px2rem(2px);
+    border-end-start-radius: px2rem(2px);
+    border-end-end-radius: px2rem(2px);
 
     // [tablet portrait -]: Search modal
     @include break-to-device(tablet portrait) {
@@ -577,13 +520,7 @@
 
     // [tablet landscape +]: Adjust spacing
     @include break-from-device(tablet landscape) {
-      padding-left: px2rem(44px);
+      padding-inline-start: px2rem(44px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(44px);
-        padding-left: initial;
-      }
     }
   }
 
@@ -637,13 +574,7 @@
 
     // [tablet landscape +]: Adjust spacing
     @include break-from-device(tablet landscape) {
-      padding-left: px2rem(44px);
+      padding-inline-start: px2rem(44px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(44px);
-        padding-left: px2rem(16px);
-      }
     }
 
     // Search result more link on focus/hover
@@ -672,13 +603,7 @@
 
     // [tablet landscape +]: Adjust spacing
     @include break-from-device(tablet landscape) {
-      padding-left: px2rem(44px);
+      padding-inline-start: px2rem(44px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(44px);
-        padding-left: px2rem(16px);
-      }
     }
 
     // Search result article document
@@ -697,7 +622,7 @@
   // Search result icon
   &__icon {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     width: px2rem(24px);
     height: px2rem(24px);
     margin: px2rem(10px);
@@ -718,15 +643,9 @@
       mask-repeat: no-repeat;
       mask-size: contain;
       content: "";
-    }
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-      right: 0;
-      left: initial;
-
-      // Flip icon vertically
-      &::after {
         transform: scaleX(-1);
       }
     }

src/assets/stylesheets/main/layout/_select.scss

@@ -94,8 +94,7 @@
   &__link {
     display: block;
     width: 100%;
-    padding-right: px2rem(24px);
+    padding-inline: px2rem(12px) px2rem(24px);
-    padding-left: px2rem(12px);
     outline: none;
     cursor: pointer;
     transition:
@@ -103,12 +102,6 @@
       color            250ms;
     scroll-snap-align: start;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding-right: px2rem(12px);
-      padding-left: px2rem(24px);
-    }
-
     // Link on focus/hover
     &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);

src/assets/stylesheets/main/layout/_sidebar.scss

@@ -45,7 +45,7 @@
     &--primary {
       position: fixed;
       top: 0;
-      left: px2rem(-242px);
+      inset-inline-start: px2rem(-242px);
       z-index: 5;
       display: block;
       width: px2rem(242px);
@@ -56,12 +56,6 @@
         transform  250ms cubic-bezier(0.4, 0, 0.2, 1),
         box-shadow 250ms;
 
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        right: px2rem(-242px);
-        left: initial;
-      }
-
       // Show sidebar when drawer is active
       [data-md-toggle="drawer"]:checked ~ .md-container & {
         box-shadow: var(--md-shadow-z3);
@@ -76,10 +70,7 @@
       // Stretch scroll wrapper for primary sidebar
       .md-sidebar__scrollwrap {
         position: absolute;
-        top: 0;
+        inset: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
         margin: 0;
         scroll-snap-type: none;
         overflow: hidden;

src/assets/stylesheets/main/layout/_source.scss

@@ -92,27 +92,13 @@
     // Align with margin only (as opposed to normal button alignment)
     svg {
       margin-top: px2rem(12px);
-      margin-left: px2rem(12px);
+      margin-inline-start: px2rem(12px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(12px);
-        margin-left: initial;
-      }
     }
 
     // Adjust spacing if icon is present
     + .md-source__repository {
-      margin-left: px2rem(-40px);
+      margin-inline-start: px2rem(-40px);
-      padding-left: px2rem(40px);
+      padding-inline-start: px2rem(40px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(-40px);
-        margin-left: initial;
-        padding-right: px2rem(40px);
-        padding-left: initial;
-      }
     }
   }
 
@@ -120,7 +106,7 @@
   &__repository {
     display: inline-block;
     max-width: calc(100% - #{px2rem(24px)});
-    margin-left: px2rem(12px);
+    margin-inline-start: px2rem(12px);
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
@@ -155,29 +141,17 @@
       display: inline-block;
       width: px2rem(12px);
       height: px2rem(12px);
-      margin-right: px2rem(2px);
+      margin-inline-end: px2rem(2px);
       vertical-align: text-top;
       background-color: currentColor;
       mask-repeat: no-repeat;
       mask-size: contain;
       content: "";
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: initial;
-        margin-left: px2rem(2px);
-      }
     }
 
     // Adjust spacing for repository fact icon
     &:nth-child(1n+2)::before {
-      margin-left: px2rem(8px);
+      margin-inline-start: px2rem(8px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(8px);
-        margin-left: px2rem(2px);
-      }
     }
 
     // Repository fact: version

src/assets/stylesheets/main/layout/_tabs.scss

@@ -49,25 +49,18 @@
   // Navigation tabs list
   &__list {
     margin: 0;
-    margin-left: px2rem(4px);
+    margin-inline-start: px2rem(4px);
     padding: 0;
     white-space: nowrap;
     list-style: none;
     contain: content;
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2rem(4px);
-      margin-left: initial;
-    }
   }
 
   // Navigation tabs item
   &__item {
     display: inline-block;
     height: px2rem(48px);
-    padding-right: px2rem(12px);
+    padding-inline: px2rem(12px);
-    padding-left: px2rem(12px);
   }
 
   // Navigation tabs link - could be defined as block elements and aligned via

src/assets/stylesheets/main/layout/_top.scss

@@ -29,7 +29,7 @@
   position: fixed;
   top: px2rem(48px + 16px);
   z-index: 2;
-  margin-left: 50%;
+  margin-inline-start: 50%;
   padding: px2rem(8px) px2rem(16px);
   color: var(--md-default-fg-color--light);
   font-size: px2rem(14px);
@@ -51,8 +51,6 @@
 
   // Adjust for right-to-left languages
   [dir="rtl"] & {
-    margin-right: 50%;
-    margin-left: initial;
     transform: translate(50%, 0);
   }
 

src/assets/stylesheets/main/layout/_version.scss

@@ -56,34 +56,21 @@
     // this won't work consistently. Furthermore, we would need to use inline
     // positioning to align the links, which looks jagged.
     top: px2rem(1px);
-    margin-right: px2rem(8px);
+    margin-inline: px2rem(28px) px2rem(8px);
-    margin-left: px2rem(28px);
     color: inherit;
     outline: none;
     cursor: pointer;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2rem(28px);
-      margin-left: px2rem(8px);
-    }
-
     // Version selection icon
     &::after {
       display: inline-block;
       width: px2rem(8px);
       height: px2rem(12px);
-      margin-left: px2rem(8px);
+      margin-inline-start: px2rem(8px);
       background-color: currentColor;
       mask-image: var(--md-version-icon);
       mask-repeat: no-repeat;
       content: "";
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(8px);
-        margin-left: initial;
-      }
     }
   }
 
@@ -140,8 +127,7 @@
   &__link {
     display: block;
     width: 100%;
-    padding-right: px2rem(24px);
+    padding-inline: px2rem(12px) px2rem(24px);
-    padding-left: px2rem(12px);
     white-space: nowrap;
     outline: none;
     cursor: pointer;
@@ -150,12 +136,6 @@
       background-color 250ms;
     scroll-snap-align: start;
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding-right: px2rem(12px);
-      padding-left: px2rem(24px);
-    }
-
     // Link on focus/hover
     &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);

src/overrides/assets/stylesheets/main/layout/_banner.scss

@@ -41,6 +41,6 @@
 
   // Twitter icon
   .twitter {
-    margin-left: 0.2em;
+    margin-inline-start: 0.2em;
   }
 }