Replace stylelint-config-rational-order with stylelint-config-recess-order (#5122)

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-rational-order",
+    "stylelint-config-recess-order",
     "stylelint-config-recommended",
     "stylelint-config-standard-scss"
   ],

package.json

@@ -93,7 +93,7 @@
     "sass": "^1.58.3",
     "simple-icons": "^8.6.0",
     "stylelint": "^15.2.0",
-    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended": "^10.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
     "stylelint-scss": "^4.4.0",

src/assets/stylesheets/main/_modifiers.scss

@@ -34,8 +34,8 @@
     .inline {
       float: inline-start;
       width: px2rem(234px);
-      margin-top: 0;
       margin-inline-end: px2rem(16px);
+      margin-top: 0;
       margin-bottom: px2rem(16px);
 
       // Modifier to move to end (ltr: right, rtl: left)

src/assets/stylesheets/main/_resets.scss

@@ -64,8 +64,8 @@ a {
 
 // Normalize horizontal separator styles
 hr {
-  display: block;
   box-sizing: content-box;
+  display: block;
   height: px2rem(1px);
   padding: 0;
   overflow: visible;
@@ -90,8 +90,8 @@ img {
 
 // Reset table styles
 table {
-  border-collapse: separate;
   border-spacing: 0;
+  border-collapse: separate;
 }
 
 // Reset table cell styles
@@ -103,10 +103,10 @@ th {
 
 // Reset button styles
 button {
-  margin: 0;
   padding: 0;
-  font-size: inherit;
+  margin: 0;
   font-family: inherit;
+  font-size: inherit;
   background: transparent;
   border: 0;
 }

src/assets/stylesheets/main/_typeset.scss

@@ -44,17 +44,17 @@ body {
 body,
 input,
 aside {
-  color: var(--md-typeset-color);
-  font-feature-settings: "kern", "liga";
   font-family: var(--md-text-font-family);
+  font-feature-settings: "kern", "liga";
+  color: var(--md-typeset-color);
 }
 
 // Define monospaced fonts
 code,
 pre,
 kbd {
-  font-feature-settings: "kern";
   font-family: var(--md-code-font-family);
+  font-feature-settings: "kern";
 }
 
 // ----------------------------------------------------------------------------
@@ -96,18 +96,18 @@ kbd {
   // Headline on level 1
   h1 {
     margin: 0 0 px2em(40px, 32px);
-    color: var(--md-default-fg-color--light);
-    font-weight: 300;
     font-size: px2em(32px);
+    font-weight: 300;
     line-height: 1.3;
+    color: var(--md-default-fg-color--light);
     letter-spacing: -0.01em;
   }
 
   // Headline on level 2
   h2 {
     margin: px2em(40px, 25px) 0 px2em(16px, 25px);
-    font-weight: 300;
     font-size: px2em(25px);
+    font-weight: 300;
     line-height: 1.4;
     letter-spacing: -0.01em;
   }
@@ -115,8 +115,8 @@ kbd {
   // Headline on level 3
   h3 {
     margin: px2em(32px, 20px) 0 px2em(16px, 20px);
-    font-weight: 400;
     font-size: px2em(20px);
+    font-weight: 400;
     line-height: 1.5;
     letter-spacing: -0.01em;
   }
@@ -137,9 +137,9 @@ kbd {
   h5,
   h6 {
     margin: px2em(16px, 12.8px) 0;
-    color: var(--md-default-fg-color--light);
-    font-weight: 700;
     font-size: px2em(12.8px);
+    font-weight: 700;
+    color: var(--md-default-fg-color--light);
     letter-spacing: -0.01em;
   }
 
@@ -193,9 +193,9 @@ kbd {
   code,
   pre,
   kbd {
+    font-variant-ligatures: none;
     color: var(--md-code-fg-color);
     direction: ltr;
-    font-variant-ligatures: none;
 
     // [print]: Wrap text and hide scollbars
     @media print {
@@ -228,14 +228,14 @@ kbd {
     // Code block
     > code {
       display: block;
-      margin: 0;
       padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
+      margin: 0;
       overflow: auto;
       word-break: normal;
+      touch-action: auto;
       outline-color: var(--md-accent-fg-color);
       box-shadow: none;
       box-decoration-break: slice;
-      touch-action: auto;
       scrollbar-width: thin;
       scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
@@ -266,10 +266,10 @@ kbd {
   kbd {
     display: inline-block;
     padding: 0 px2em(8px, 12px);
-    color: var(--md-default-fg-color);
     font-size: px2em(12px);
-    vertical-align: text-top;
+    color: var(--md-default-fg-color);
     word-break: break-word;
+    vertical-align: text-top;
     background-color: var(--md-typeset-kbd-color);
     border-radius: px2rem(2px);
     box-shadow:
@@ -289,8 +289,8 @@ kbd {
   // Abbreviation
   abbr {
     text-decoration: none;
-    border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
     cursor: help;
+    border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
 
     // Show tooltip for touch devices
     @media (hover: none) {
@@ -299,14 +299,14 @@ kbd {
       &[title]:is(:focus, :hover)::after {
         position: absolute;
         inset-inline: px2rem(16px);
-        margin-top: 2em;
         padding: px2rem(4px) px2rem(6px);
-        color: var(--md-default-bg-color);
+        margin-top: 2em;
         font-size: px2rem(14px);
+        color: var(--md-default-bg-color);
+        content: attr(title);
         background-color: var(--md-default-fg-color);
         border-radius: px2rem(2px);
         box-shadow: var(--md-shadow-z3);
-        content: attr(title);
       }
     }
   }
@@ -338,8 +338,8 @@ kbd {
   // Unordered and ordered list
   ul,
   ol {
-    margin-inline-start: px2em(10px);
     padding: 0;
+    margin-inline-start: px2em(10px);
 
     // Adjust display mode if not hidden
     &:not([hidden]) {
@@ -358,8 +358,8 @@ kbd {
 
     // List element
     li {
-      margin-bottom: 0.5em;
       margin-inline-start: px2em(20px);
+      margin-bottom: 0.5em;
 
       // Adjust spacing
       p,
@@ -453,10 +453,10 @@ kbd {
     max-width: 100%;
     overflow: auto;
     font-size: px2rem(12.8px);
+    touch-action: auto;
     background-color: var(--md-default-bg-color);
     border: px2rem(1px) solid var(--md-typeset-table-color);
     border-radius: px2rem(2px);
-    touch-action: auto;
 
     // [print]: Reset display mode so table header wraps when printing
     @media print {
@@ -537,11 +537,11 @@ kbd {
       height: 1.2em;
       margin-inline-start: 0.5em;
       vertical-align: text-bottom;
+      content: "";
+      transition: background-color 125ms;
       mask-image: var(--md-typeset-table-sort-icon);
       mask-repeat: no-repeat;
       mask-size: contain;
-      transition: background-color 125ms;
-      content: "";
     }
 
     // Show sort icon on hover
@@ -572,8 +572,8 @@ kbd {
   // Data table wrapper
   &__table {
     display: inline-block;
-    margin-bottom: 0.5em;
     padding: 0 px2rem(16px);
+    margin-bottom: 0.5em;
 
     // [print]: Reset display mode so table header wraps when printing
     @media print {

src/assets/stylesheets/main/components/_banner.scss

@@ -43,8 +43,8 @@
 
   // Banner wrapper
   &__inner {
-    margin: px2rem(12px) auto;
     padding: 0 px2rem(16px);
+    margin: px2rem(12px) auto;
     font-size: px2rem(14px);
   }
 

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

@@ -112,8 +112,8 @@ body {
 // Add ellipsis in case of overflowing text
 .md-ellipsis {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 // ----------------------------------------------------------------------------
@@ -152,24 +152,24 @@ body {
   // Hack: if we don't set the negative `z-index`, the skip link will force the
   // creation of new layers when code blocks are near the header on scrolling
   z-index: -1;
-  margin: px2rem(10px);
   padding: px2rem(6px) px2rem(10px);
-  color: var(--md-default-bg-color);
+  margin: px2rem(10px);
   font-size: px2rem(12.8px);
+  color: var(--md-default-bg-color);
   background-color: var(--md-default-fg-color);
   border-radius: px2rem(2px);
   outline-color: var(--md-accent-fg-color);
-  transform: translateY(px2rem(8px));
   opacity: 0;
+  transform: translateY(px2rem(8px));
 
   // Show skip link on focus
   &:focus {
     z-index: 10;
-    transform: translateY(0);
     opacity: 1;
     transition:
       transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
       opacity   175ms 75ms;
+    transform: translateY(0);
   }
 }
 

src/assets/stylesheets/main/components/_clipboard.scss

@@ -40,10 +40,10 @@
   width: px2em(24px);
   height: px2em(24px);
   color: var(--md-default-fg-color--lightest);
+  cursor: pointer;
   border-radius: px2rem(2px);
   outline-color: var(--md-accent-fg-color);
   outline-offset: px2rem(2px);
-  cursor: pointer;
   transition: color 250ms;
 
   // [print]: Hide button
@@ -74,12 +74,12 @@
     width: px2em(18px);
     height: px2em(18px);
     margin: 0 auto;
+    content: "";
     background-color: currentcolor;
     mask-image: var(--md-clipboard-icon);
     mask-position: center;
     mask-repeat: no-repeat;
     mask-size: contain;
-    content: "";
   }
 
   // Inline clipboard button

src/assets/stylesheets/main/components/_consent.scss

@@ -27,13 +27,13 @@
 // Show consent
 @keyframes consent {
   0% {
-    transform: translateY(100%);
     opacity: 0;
+    transform: translateY(100%);
   }
 
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }
 

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

@@ -34,8 +34,8 @@
 
   // Content wrapper
   &__inner {
-    margin: 0 px2rem(16px) px2rem(24px);
     padding-top: px2rem(12px);
+    margin: 0 px2rem(16px) px2rem(24px);
 
     // [screen +]: Adjust spacing between content area and sidebars
     @include break-from-device(screen) {
@@ -69,9 +69,9 @@
   // a document-level, i.e. linking to related source code files, printing etc.
   &__button {
     float: inline-end;
+    padding: 0;
     margin: px2rem(8px) 0;
     margin-inline-start: px2rem(8px);
-    padding: 0;
 
     // [print]: Hide buttons
     @media print {

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

@@ -27,20 +27,20 @@
 // Dialog
 .md-dialog {
   position: fixed;
-  inset-inline-end: px2rem(16px);
   bottom: px2rem(16px);
   z-index: 4;
   min-width: px2rem(222px);
   padding: px2rem(8px) px2rem(12px);
+  pointer-events: none;
   background-color: var(--md-default-fg-color);
   border-radius: px2rem(2px);
   box-shadow: var(--md-shadow-z3);
-  transform: translateY(100%);
   opacity: 0;
   transition:
     transform 0ms   400ms,
     opacity   400ms;
-  pointer-events: none;
+  transform: translateY(100%);
+  inset-inline-end: px2rem(16px);
 
   // [print]: Hide dialog
   @media print {
@@ -49,17 +49,17 @@
 
   // Active dialog
   &--active {
-    transform: translateY(0);
+    pointer-events: initial;
     opacity: 1;
     transition:
       transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
       opacity   400ms;
-    pointer-events: initial;
+    transform: translateY(0);
   }
 
   // Dialog wrapper
   &__inner {
-    color: var(--md-default-bg-color);
     font-size: px2rem(14px);
+    color: var(--md-default-bg-color);
   }
 }

src/assets/stylesheets/main/components/_feedback.scss

@@ -31,8 +31,8 @@
 
   // Feedback fieldset
   fieldset {
-    margin: 0;
     padding: 0;
+    margin: 0;
     border: none;
   }
 
@@ -89,11 +89,11 @@
   // Feedback note
   &__note {
     position: relative;
-    transform: translateY(px2rem(8px));
     opacity: 0;
     transition:
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   150ms;
+    transform: translateY(px2rem(8px));
 
     // Feedback note value
     > * {
@@ -103,8 +103,8 @@
 
     // Show after submission
     :disabled & {
-      transform: translateY(0);
       opacity: 1;
+      transform: translateY(0);
     }
   }
 }

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

@@ -108,16 +108,16 @@
 
   // Footer link button
   &__button {
-    margin: px2rem(4px);
     padding: px2rem(8px);
+    margin: px2rem(4px);
   }
 
   // Footer link direction (i.e. prev and next)
   &__direction {
     position: absolute;
     inset-inline: 0;
-    margin-top: px2rem(-20px);
     padding: 0 px2rem(20px);
+    margin-top: px2rem(-20px);
     font-size: px2rem(12.8px);
     opacity: 0.7;
   }
@@ -151,10 +151,10 @@
 // Copyright and theme information
 .md-copyright {
   width: 100%;
-  margin: auto px2rem(12px);
   padding: px2rem(8px) 0;
-  color: var(--md-footer-fg-color--lighter);
+  margin: auto px2rem(12px);
   font-size: px2rem(12.8px);
+  color: var(--md-footer-fg-color--lighter);
 
   // [tablet portrait +]: Show copyright and social links in one line
   @include break-from-device(tablet portrait) {
@@ -172,8 +172,8 @@
 
 // Social links
 .md-social {
-  margin: 0 px2rem(8px);
   padding: px2rem(4px) 0 px2rem(12px);
+  margin: 0 px2rem(8px);
 
   // [tablet portrait +]: Show copyright and social links in one line
   @include break-from-device(tablet portrait) {

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

@@ -31,11 +31,11 @@
   .md-button {
     display: inline-block;
     padding: px2em(10px) px2em(32px);
-    color: var(--md-primary-fg-color);
     font-weight: 700;
+    color: var(--md-primary-fg-color);
+    cursor: pointer;
     border: px2rem(2px) solid currentcolor;
     border-radius: px2rem(2px);
-    cursor: pointer;
     transition:
       color            125ms,
       background-color 125ms,

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

@@ -28,8 +28,8 @@
 // viewport. If this behavior is not desired, just set `position: static`.
 .md-header {
   position: sticky;
-  top: 0;
   inset-inline: 0;
+  top: 0;
   z-index: 4;
   display: block;
   color: var(--md-primary-bg-color);
@@ -47,10 +47,10 @@
 
   // Header is hidden
   &[hidden] {
-    transform: translateY(-100%);
     transition:
       transform  250ms cubic-bezier(0.8, 0, 0.6, 1),
       box-shadow 250ms;
+    transform: translateY(-100%);
   }
 
   // Header in shadow state, i.e. shadow is visible
@@ -74,12 +74,12 @@
   &__button {
     position: relative;
     z-index: 1;
-    margin: px2rem(4px);
     padding: px2rem(8px);
+    margin: px2rem(4px);
     color: currentcolor;
     vertical-align: middle;
-    outline-color: var(--md-accent-fg-color);
     cursor: pointer;
+    outline-color: var(--md-accent-fg-color);
     transition: opacity 250ms;
 
     // Button on hover
@@ -100,8 +100,8 @@
 
     // Button with logo, pointing to `config.site_url`
     &.md-logo {
-      margin: px2rem(4px);
       padding: px2rem(8px);
+      margin: px2rem(4px);
 
       // [tablet -]: Hide button
       @include break-to-device(tablet) {
@@ -159,12 +159,12 @@
     // Second header topic - title of the current page
     & + & {
       z-index: -1;
-      transform: translateX(px2rem(25px));
+      pointer-events: none;
       opacity: 0;
       transition:
         transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
         opacity   150ms;
-      pointer-events: none;
+      transform: translateX(px2rem(25px));
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -182,20 +182,20 @@
   &__title {
     flex-grow: 1;
     height: px2rem(48px);
-    margin-inline-end: px2rem(8px);
     margin-inline-start: px2rem(20px);
+    margin-inline-end: px2rem(8px);
     font-size: px2rem(18px);
     line-height: px2rem(48px);
 
     // Header title in active state, i.e. page title is visible
     &--active .md-header__topic {
       z-index: -1;
-      transform: translateX(px2rem(-25px));
+      pointer-events: none;
       opacity: 0;
       transition:
         transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
         opacity   150ms;
-      pointer-events: none;
+      transform: translateX(px2rem(-25px));
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -205,12 +205,12 @@
       // Second header topic - title of the current page
       + .md-header__topic {
         z-index: 0;
-        transform: translateX(0);
+        pointer-events: initial;
         opacity: 1;
         transition:
           transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
           opacity   150ms;
-        pointer-events: initial;
+        transform: translateX(0);
       }
     }
 

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

@@ -43,8 +43,8 @@
     display: block;
     padding: 0 px2rem(12px);
     overflow: hidden;
-    color: var(--md-default-fg-color--light);
     font-weight: 700;
+    color: var(--md-default-fg-color--light);
     text-overflow: ellipsis;
 
     // Navigaton button
@@ -75,8 +75,8 @@
 
   // Navigation list
   &__list {
-    margin: 0;
     padding: 0;
+    margin: 0;
     list-style: none;
   }
 
@@ -171,8 +171,8 @@
     &--primary,
     &--primary & {
       position: absolute;
-      top: 0;
       inset-inline: 0;
+      top: 0;
       z-index: 1;
       display: flex;
       flex-direction: column;
@@ -194,11 +194,11 @@
         position: relative;
         height: px2rem(112px);
         padding: px2rem(60px) px2rem(16px) px2rem(4px);
-        color: var(--md-default-fg-color--light);
         line-height: px2rem(48px);
+        color: var(--md-default-fg-color--light);
         white-space: nowrap;
-        background-color: var(--md-default-fg-color--lightest);
         cursor: pointer;
+        background-color: var(--md-default-fg-color--lightest);
 
         // Navigation icon
         .md-nav__icon {
@@ -215,23 +215,23 @@
             display: block;
             width: 100%;
             height: 100%;
+            content: "";
             background-color: currentcolor;
             mask-image: var(--md-nav-icon--prev);
             mask-position: center;
             mask-repeat: no-repeat;
             mask-size: contain;
-            content: "";
           }
         }
 
         // Navigation list
         ~ .md-nav__list {
           overflow-y: auto;
+          touch-action: pan-y;
           background-color: var(--md-default-bg-color);
           box-shadow:
             0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
           scroll-snap-type: y mandatory;
-          touch-action: pan-y;
 
           // Omit border on first child
           > :first-child {
@@ -241,19 +241,19 @@
 
         // Top-level navigation title
         &[for="__drawer"] {
-          color: var(--md-primary-bg-color);
           font-weight: 700;
+          color: var(--md-primary-bg-color);
           background-color: var(--md-primary-fg-color);
         }
 
         // Button with logo, pointing to `config.site_url`
         .md-logo {
           position: absolute;
-          top: px2rem(4px);
           inset-inline: px2rem(4px);
+          top: px2rem(4px);
           display: block;
-          margin: px2rem(4px);
           padding: px2rem(8px);
+          margin: px2rem(4px);
         }
       }
 
@@ -280,8 +280,8 @@
 
       // Navigation link
       .md-nav__link {
-        margin-top: 0;
         padding: px2rem(12px) px2rem(16px);
+        margin-top: 0;
 
         // Navigation icon
         .md-nav__icon {
@@ -295,12 +295,12 @@
             display: block;
             width: 100%;
             height: 100%;
+            content: "";
             background-color: currentcolor;
             mask-image: var(--md-nav-icon--next);
             mask-position: center;
             mask-repeat: no-repeat;
             mask-size: contain;
-            content: "";
           }
         }
       }
@@ -353,11 +353,11 @@
     // Toggle for nested navigation
     &__toggle ~ & {
       display: flex;
-      transform: translateX(100%);
       opacity: 0;
       transition:
         transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
         opacity   125ms 50ms;
+      transform: translateX(100%);
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -367,11 +367,11 @@
 
     // Show nested navigation when toggle is active
     &__toggle:checked ~ & {
-      transform: translateX(0);
       opacity: 1;
       transition:
         transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   125ms 125ms;
+      transform: translateX(0);
 
       // Navigation list
       > .md-nav__list {
@@ -562,14 +562,14 @@
         width: 100%;
         height: 100%;
         vertical-align: px2rem(-2px);
+        content: "";
         background-color: currentcolor;
+        border-radius: 100%;
+        transition: transform 250ms;
         mask-image: var(--md-nav-icon--next);
         mask-position: center;
         mask-repeat: no-repeat;
         mask-size: contain;
-        border-radius: 100%;
-        transition: transform 250ms;
-        content: "";
 
         // Adjust for right-to-left languages
         [dir="rtl"] & {
@@ -607,8 +607,8 @@
             position: sticky;
             top: 0;
             z-index: 1;
-            margin-top: 0;
             padding: 0 px2rem(12px);
+            margin-top: 0;
             font-weight: 700;
             background: var(--md-default-bg-color);
             box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);

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

@@ -54,17 +54,17 @@
     @include break-to-device(tablet portrait) {
       position: absolute;
       top: px2rem(-20px);
-      inset-inline-start: px2rem(-44px);
       width: px2rem(40px);
       height: px2rem(40px);
       overflow: hidden;
+      pointer-events: none;
       background-color: var(--md-default-bg-color);
       border-radius: px2rem(20px);
-      transform-origin: center;
       transition:
         transform 300ms 100ms,
         opacity   200ms 200ms;
-      pointer-events: none;
+      transform-origin: center;
+      inset-inline-start: px2rem(-44px);
 
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
@@ -79,15 +79,15 @@
     @include break-from-device(tablet landscape) {
       position: fixed;
       top: 0;
-      inset-inline-start: 0;
       width: 0;
       height: 0;
-      background-color: hsla(0, 0%, 0%, 0.54);
       cursor: pointer;
+      background-color: hsla(0, 0%, 0%, 0.54);
       transition:
         width     0ms 250ms,
         height    0ms 250ms,
         opacity 250ms;
+      inset-inline-start: 0;
 
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
@@ -134,18 +134,18 @@
     @include break-to-device(tablet portrait) {
       position: fixed;
       top: 0;
-      inset-inline-start: 0;
       z-index: 2;
       width: 0;
       height: 0;
       overflow: hidden;
-      transform: translateX(5%);
       opacity: 0;
       transition:
         width       0ms 300ms,
         height      0ms 300ms,
         transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   150ms 150ms;
+      transform: translateX(5%);
+      inset-inline-start: 0;
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -156,13 +156,13 @@
       [data-md-toggle="search"]:checked ~ .md-header & {
         width: 100%;
         height: 100%;
-        transform: translateX(0);
         opacity: 1;
         transition:
           width       0ms   0ms,
           height      0ms   0ms,
           transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
           opacity   150ms 150ms;
+        transform: translateX(0);
       }
     }
 
@@ -259,8 +259,8 @@
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
       padding-inline-start: px2rem(44px);
-      color: inherit;
       font-size: px2rem(16px);
+      color: inherit;
 
       // Search placeholder
       &::placeholder {
@@ -357,11 +357,11 @@
     > .md-icon {
       margin-inline-start: px2rem(4px);
       color: var(--md-default-fg-color--light);
-      transform: scale(0.75);
       opacity: 0;
       transition:
         transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
         opacity   150ms;
+      transform: scale(0.75);
 
       // Hide outline for pointer devices
       &:not(.focus-visible) {
@@ -372,9 +372,9 @@
       // Show buttons when search is active and input non-empty
       [data-md-toggle="search"]:checked ~ .md-header
       .md-search__input:valid ~ & {
-        transform: scale(1);
-        opacity: 1;
         pointer-events: initial;
+        opacity: 1;
+        transform: scale(1);
 
         // Search focus icon
         &:hover {
@@ -393,8 +393,8 @@
     width: 100%;
     height: 100%;
     padding-inline: px2rem(72px) px2rem(44px);
-    color: var(--md-default-fg-color--lighter);
     font-size: px2rem(18px);
+    color: var(--md-default-fg-color--lighter);
     white-space: nowrap;
     opacity: 0;
     transition: opacity 50ms;
@@ -445,13 +445,13 @@
   &__scrollwrap {
     height: 100%;
     overflow-y: auto;
-    background-color: var(--md-default-bg-color);
-    // Hack: promote to own layer to reduce jitter
-    backface-visibility: hidden;
     // Hack: Chrome 88+ has weird overscroll behavior. Overall, scroll snapping
     // seems to be something that is not ready for prime time on some browsers.
     // scroll-snap-type: y mandatory;
     touch-action: pan-y;
+    background-color: var(--md-default-bg-color);
+    // Hack: promote to own layer to reduce jitter
+    backface-visibility: hidden;
 
     // Mitigiate excessive repaints on non-retina devices
     @media (max-resolution: 1dppx) {
@@ -511,9 +511,9 @@
   // Search result metadata
   &__meta {
     padding: 0 px2rem(16px);
-    color: var(--md-default-fg-color--light);
     font-size: px2rem(12.8px);
     line-height: px2rem(36px);
+    color: var(--md-default-fg-color--light);
     background-color: var(--md-default-fg-color--lightest);
     scroll-snap-align: start;
 
@@ -525,8 +525,8 @@
 
   // Search result list
   &__list {
-    margin: 0;
     padding: 0;
+    margin: 0;
     list-style: none;
     // Hack: omit accidental text selection on fast toggle of more button
     user-select: none;
@@ -566,8 +566,8 @@
     top: 0;
     z-index: 1;
     display: block;
-    outline: none;
     cursor: pointer;
+    outline: none;
     scroll-snap-align: start;
 
     // Hide native details marker
@@ -584,8 +584,8 @@
     // Search result more button
     > div {
       padding: px2em(12px) px2rem(16px);
-      color: var(--md-typeset-a-color);
       font-size: px2rem(12.8px);
+      color: var(--md-typeset-a-color);
       transition:
         color            250ms,
         background-color 250ms;
@@ -640,12 +640,12 @@
       display: inline-block;
       width: 100%;
       height: 100%;
+      content: "";
       background-color: currentcolor;
       mask-image: var(--md-search-result-icon);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -656,17 +656,17 @@
 
   // Typesetted content
   .md-typeset {
-    color: var(--md-default-fg-color--light);
     font-size: px2rem(12.8px);
     line-height: 1.6;
+    color: var(--md-default-fg-color--light);
 
     // Search result article title
     h1 {
       margin: px2rem(11px) 0;
-      color: var(--md-default-fg-color);
-      font-weight: 400;
       font-size: px2rem(16px);
+      font-weight: 400;
       line-height: 1.4;
+      color: var(--md-default-fg-color);
 
       // Search term highlighting
       mark {
@@ -677,10 +677,10 @@
     // Search result section title
     h2 {
       margin: 0.5em 0;
-      color: var(--md-default-fg-color);
-      font-weight: 700;
       font-size: px2rem(12.8px);
+      font-weight: 700;
       line-height: 1.6;
+      color: var(--md-default-fg-color);
 
       // Search term highlighting
       mark {
@@ -693,9 +693,9 @@
   &__terms {
     display: block;
     margin: 0.5em 0;
-    color: var(--md-default-fg-color);
     font-size: px2rem(12.8px);
     font-style: italic;
+    color: var(--md-default-fg-color);
   }
 
   // Search term highlighting

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

@@ -40,22 +40,22 @@
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
     box-shadow: var(--md-shadow-z2);
-    transform: translate3d(-50%, px2rem(6px), 0);
     opacity: 0;
     transition:
       transform  250ms 375ms,
       opacity    250ms 250ms,
       max-height   0ms 500ms;
+    transform: translate3d(-50%, px2rem(6px), 0);
 
     // Selection bubble on parent focus/hover
     .md-select:is(:focus-within, :hover) & {
       max-height: px2rem(200px);
-      transform: translate3d(-50%, 0, 0);
       opacity: 1;
       transition:
         transform  250ms cubic-bezier(0.1, 0.7, 0.1, 1),
         opacity    250ms,
         max-height   0ms;
+      transform: translate3d(-50%, 0, 0);
     }
 
     // Selection bubble handle
@@ -67,18 +67,18 @@
       height: 0;
       margin-top: px2rem(-4px);
       margin-left: px2rem(-4px);
+      content: "";
       border: px2rem(4px) solid transparent;
       border-top: 0;
       border-bottom-color: var(--md-default-bg-color);
-      content: "";
     }
   }
 
   // Selection list
   &__list {
     max-height: inherit;
-    margin: 0;
     padding: 0;
+    margin: 0;
     overflow: auto;
     font-size: px2rem(16px);
     list-style-type: none;
@@ -95,8 +95,8 @@
     display: block;
     width: 100%;
     padding-inline: px2rem(12px) px2rem(24px);
-    outline: none;
     cursor: pointer;
+    outline: none;
     transition:
       background-color 250ms,
       color            250ms;

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

@@ -45,16 +45,16 @@
     @include break-to-device(tablet) {
       position: fixed;
       top: 0;
-      inset-inline-start: px2rem(-242px);
       z-index: 5;
       display: block;
       width: px2rem(242px);
       height: 100%;
       background-color: var(--md-default-bg-color);
-      transform: translateX(0);
       transition:
         transform  250ms cubic-bezier(0.4, 0, 0.2, 1),
         box-shadow 250ms;
+      transform: translateX(0);
+      inset-inline-start: px2rem(-242px);
 
       // Show sidebar when drawer is active
       [data-md-toggle="drawer"]:checked ~ .md-container & {

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

@@ -38,8 +38,8 @@
 // Show repository fact
 @keyframes fact {
   0% {
-    transform: translateY(100%);
     opacity: 0;
+    transform: translateY(100%);
   }
 
   50% {
@@ -47,8 +47,8 @@
   }
 
   100% {
-    transform: translateY(0%);
     opacity: 1;
+    transform: translateY(0%);
   }
 }
 
@@ -91,14 +91,14 @@
 
     // Align with margin only (as opposed to normal button alignment)
     svg {
-      margin-top: px2rem(12px);
       margin-inline-start: px2rem(12px);
+      margin-top: px2rem(12px);
     }
 
     // Adjust spacing if icon is present
     + .md-source__repository {
-      margin-inline-start: px2rem(-40px);
       padding-inline-start: px2rem(40px);
+      margin-inline-start: px2rem(-40px);
     }
   }
 
@@ -117,8 +117,8 @@
     display: flex;
     gap: px2rem(8px);
     width: 100%;
-    margin: px2rem(2px) 0 0;
     padding: 0;
+    margin: px2rem(2px) 0 0;
     overflow: hidden;
     font-size: px2rem(11px);
     list-style-type: none;
@@ -147,11 +147,11 @@
       height: px2rem(12px);
       margin-inline-end: px2rem(2px);
       vertical-align: text-top;
+      content: "";
       background-color: currentcolor;
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
     }
 
     // Adjust spacing for 2nd+ fact

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

@@ -32,8 +32,8 @@
   display: block;
   width: 100%;
   overflow: auto;
-  color: var(--md-primary-bg-color);
   line-height: 1.3;
+  color: var(--md-primary-bg-color);
   background-color: var(--md-primary-fg-color);
 
   // [print]: Hide tabs
@@ -53,9 +53,9 @@
 
   // Navigation tabs list
   &__list {
+    padding: 0;
     margin: 0;
     margin-inline-start: px2rem(4px);
-    padding: 0;
     overflow: auto;
     white-space: nowrap;
     list-style: none;
@@ -111,11 +111,11 @@
     // Hide tabs upon scrolling - disable transition to minimizes repaints
     // while scrolling down, while scrolling up seems to be okay
     .md-tabs[hidden] & {
-      transform: translateY(50%);
       opacity: 0;
       transition:
         transform 0ms 100ms,
         opacity 100ms;
+      transform: translateY(50%);
     }
   }
 }

src/assets/stylesheets/main/components/_tag.scss

@@ -43,11 +43,11 @@
   // Tag
   .md-tag {
     display: inline-block;
+    padding: px2em(4px, 12.8px) px2em(12px, 12.8px);
     margin-inline-end: 0.5em;
     margin-bottom: 0.5em;
-    padding: px2em(4px, 12.8px) px2em(12px, 12.8px);
-    font-weight: 700;
     font-size: px2rem(12.8px);
+    font-weight: 700;
     line-height: 1.6;
     letter-spacing: initial;
     vertical-align: middle;
@@ -86,13 +86,13 @@
       height: 1.2em;
       margin-right: 0.4em;
       vertical-align: text-bottom;
+      content: "";
       background-color: var(--md-default-fg-color--lighter);
+      transition: background-color 125ms;
       mask-image: var(--md-tag-icon);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      transition: background-color 125ms;
-      content: "";
     }
 
     // Linked tag on focus/hover

src/assets/stylesheets/main/components/_tooltip.scss

@@ -71,29 +71,29 @@
   z-index: 0;
   width: var(--md-tooltip-width);
   max-width: calc(100vw - 2 * #{px2rem(16px)});
-  color: var(--md-default-fg-color);
   font-family: var(--md-text-font-family);
+  color: var(--md-default-fg-color);
   background-color: var(--md-default-bg-color);
   border-radius: px2rem(2px);
   box-shadow: var(--md-shadow-z2);
-  transform: translateY(px2rem(-8px));
-  // Hack: promote to own layer to reduce jitter
-  backface-visibility: hidden;
   opacity: 0;
   transition:
     transform 0ms 250ms,
     opacity 250ms,
     z-index 250ms;
+  transform: translateY(px2rem(-8px));
+  // Hack: promote to own layer to reduce jitter
+  backface-visibility: hidden;
 
   // Active tooltip
   &--active {
     z-index: 2;
-    transform: translateY(0);
     opacity: 1;
     transition:
       transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   250ms,
       z-index     0ms;
+    transform: translateY(0);
   }
 
   // Show outline on target and for keyboard devices
@@ -144,11 +144,11 @@
     position: relative;
     z-index: 0;
     margin: 0 1ch;
-    font-size: px2em(13.6px, 16px);
     font-family: var(--md-code-font-family);
-    outline: none;
+    font-size: px2em(13.6px, 16px);
     cursor: pointer;
     user-select: none;
+    outline: none;
 
     // Hack: increase specificity to override default for anchors
     .md-annotation & {
@@ -175,14 +175,14 @@
       width: calc(100% + 1.2ch);
       width: max(2.2ch, 100% + 1.2ch);
       height: 2.2ch;
-      margin: 0 -0.4ch;
       padding: 0 0.4ch;
+      margin: 0 -0.4ch;
+      content: "";
       background-color: var(--md-default-fg-color--lighter);
       border-radius: 2ch;
       transition:
         color            250ms,
         background-color 250ms;
-      content: "";
 
       // [reduced motion]: Disable animation
       @media not all and (prefers-reduced-motion) {
@@ -204,8 +204,8 @@
 
     // Annotation index in code block
     code & {
-      font-size: inherit;
       font-family: var(--md-code-font-family);
+      font-size: inherit;
     }
 
     // Annotation index for active tooltip or on hover
@@ -235,9 +235,9 @@
         display: inline-block;
         padding-bottom: 0.1em;
         vertical-align: 0.065em;
-        transform: scale(1.15);
-        transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
         content: attr(data-md-annotation-id);
+        transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
+        transform: scale(1.15);
 
         // [not print]: if we're not in print mode, show a `+` sign instead of
         // the original numbers, as context is already given by the position.

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

@@ -30,20 +30,20 @@
   top: px2rem(48px + 16px);
   z-index: 2;
   display: block;
-  margin-inline-start: 50%;
   padding: px2rem(8px) px2rem(16px);
-  color: var(--md-default-fg-color--light);
+  margin-inline-start: 50%;
   font-size: px2rem(14px);
+  color: var(--md-default-fg-color--light);
   background-color: var(--md-default-bg-color);
   border-radius: px2rem(32px);
   outline: none;
   box-shadow: var(--md-shadow-z2);
-  transform: translate(-50%, 0);
   transition:
     color            125ms,
     background-color 125ms,
     transform        125ms cubic-bezier(0.4, 0, 0.2, 1),
     opacity          125ms;
+  transform: translate(-50%, 0);
 
   // [print]: Hide back-to-top button
   @media print {
@@ -57,10 +57,10 @@
 
   // Back-to-top button is hidden
   &[hidden] {
-    transform: translate(-50%, px2rem(4px));
+    pointer-events: none;
     opacity: 0;
     transition-duration: 0ms;
-    pointer-events: none;
+    transform: translate(-50%, px2rem(4px));
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {

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

@@ -58,8 +58,8 @@
     top: px2rem(1px);
     margin-inline: px2rem(28px) px2rem(8px);
     color: inherit;
-    outline: none;
     cursor: pointer;
+    outline: none;
 
     // Version selection icon
     &::after {
@@ -67,12 +67,12 @@
       width: px2rem(8px);
       height: px2rem(12px);
       margin-inline-start: px2rem(8px);
+      content: "";
       background-color: currentcolor;
       mask-image: var(--md-version-icon);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
     }
   }
 
@@ -82,8 +82,8 @@
     top: px2rem(3px);
     z-index: 3;
     max-height: 0;
-    margin: px2rem(4px) px2rem(16px);
     padding: 0;
+    margin: px2rem(4px) px2rem(16px);
     overflow: auto;
     color: var(--md-default-fg-color);
     list-style-type: none;
@@ -131,8 +131,8 @@
     width: 100%;
     padding-inline: px2rem(12px) px2rem(24px);
     white-space: nowrap;
-    outline: none;
     cursor: pointer;
+    outline: none;
     transition:
       color            250ms,
       background-color 250ms;

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

@@ -64,15 +64,15 @@ $admonitions: (
   // rendered as collapsible admonitions with summary elements as titles.
   .admonition {
     display: flow-root;
-    margin: px2em(20px, 12.8px) 0;
     padding: 0 px2rem(12px);
-    color: var(--md-admonition-fg-color);
+    margin: px2em(20px, 12.8px) 0;
     font-size: px2rem(12.8px);
-    page-break-inside: avoid;
+    color: var(--md-admonition-fg-color);
     background-color: var(--md-admonition-bg-color);
     border: px2rem(1px) solid $clr-blue-a200;
     border-radius: px2rem(4px);
     box-shadow: var(--md-shadow-z1);
+    page-break-inside: avoid;
 
     // [print]: Omit shadow as it may lead to rendering errors
     @media print {
@@ -115,10 +115,10 @@ $admonitions: (
   // Admonition title
   .admonition-title {
     position: relative;
-    margin-block: 0;
-    margin-inline: px2rem(-12px);
     padding-block: px2rem(8px);
     padding-inline: px2rem(40px) px2rem(12px);
+    margin-block: 0;
+    margin-inline: px2rem(-12px);
     font-weight: 700;
     background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
     border: none;
@@ -135,15 +135,15 @@ $admonitions: (
     &::before {
       position: absolute;
       top: px2em(10px);
-      inset-inline-start: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
+      content: "";
       background-color: $clr-blue-a200;
+      inset-inline-start: px2rem(12px);
       mask-image: var(--md-admonition-icon--note);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
     }
 
     // Inline code block

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

@@ -36,8 +36,8 @@
 
   // Footnote container
   .footnote {
-    color: var(--md-default-fg-color--light);
     font-size: px2rem(12.8px);
+    color: var(--md-default-fg-color--light);
 
     // Footnote list - omit left indentation
     > ol {
@@ -55,15 +55,15 @@
 
         // Show backreferences on footnote focus without transition
         &:focus-within .footnote-backref {
-          transform: translateX(0);
           opacity: 1;
           transition: none;
+          transform: translateX(0);
         }
 
         // Show backreferences on footnote hover/target
         &:is(:hover, :target) .footnote-backref {
-          transform: translateX(0);
           opacity: 1;
+          transform: translateX(0);
         }
 
         // Adjust spacing on first child
@@ -76,8 +76,8 @@
 
   // Footnote reference
   .footnote-ref {
-    font-weight: 700;
     font-size: px2em(12px, 16px);
+    font-weight: 700;
 
     // Hack: increase specificity to override default
     html & {
@@ -93,22 +93,22 @@
   // Footnote backreference
   .footnote-backref {
     display: inline-block;
-    color: var(--md-typeset-a-color);
     // Hack: omit Unicode arrow for replacement with icon
     font-size: 0;
+    color: var(--md-typeset-a-color);
     vertical-align: text-bottom;
-    transform: translateX(px2rem(5px));
     opacity: 0;
     transition:
       color     250ms,
       transform 250ms 250ms,
       opacity   125ms 250ms;
+    transform: translateX(px2rem(5px));
 
     // [print]: Show footnote backreferences
     @media print {
       color: var(--md-typeset-a-color);
-      transform: translateX(0);
       opacity: 1;
+      transform: translateX(0);
     }
 
     // Adjust for right-to-left languages
@@ -126,12 +126,12 @@
       display: inline-block;
       width: px2rem(16px);
       height: px2rem(16px);
+      content: "";
       background-color: currentcolor;
       mask-image: var(--md-footnotes-icon);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {

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

@@ -39,8 +39,8 @@
     // Arithmatex content
     > * {
       width: min-content;
-      margin-inline: auto !important; // stylelint-disable-line
       padding: 0 px2rem(16px);
+      margin-inline: auto !important; // stylelint-disable-line
       touch-action: auto;
 
       // MathJax container - see https://bit.ly/3HR8YJ5

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

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

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

@@ -69,9 +69,9 @@
     display: block;
     min-height: px2rem(20px);
     padding-inline-end: px2rem(36px);
+    cursor: pointer;
     border-start-start-radius: px2rem(2px);
     border-start-end-radius: px2rem(2px);
-    cursor: pointer;
 
     // Show outline for keyboard devices
     &.focus-visible {
@@ -89,17 +89,17 @@
     &::after {
       position: absolute;
       top: px2em(10px);
-      inset-inline-end: px2rem(8px);
       width: px2rem(20px);
       height: px2rem(20px);
+      content: "";
       background-color: currentcolor;
+      transition: transform 250ms;
+      transform: rotate(0deg);
+      inset-inline-end: px2rem(8px);
       mask-image: var(--md-details-icon);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      transform: rotate(0deg);
-      transition: transform 250ms;
-      content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {

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

@@ -143,8 +143,8 @@
   // .gd = Diff, delete
   // .gi = Diff, insert
   :is(.gd, .gi) {
-    margin: 0 px2em(-2px);
     padding: 0 px2em(2px);
+    margin: 0 px2em(-2px);
     border-radius: px2rem(2px);
   }
 
@@ -159,8 +159,8 @@
   // Highlighted line
   .hll {
     display: block;
-    margin: 0 px2em(-16px, 13.6px);
     padding: 0 px2em(16px, 13.6px);
+    margin: 0 px2em(-16px, 13.6px);
     background-color: var(--md-code-hl-color);
   }
 
@@ -168,10 +168,10 @@
   span.filename {
     position: relative;
     display: flow-root;
-    margin-top: 1em;
     padding: px2em(9px, 13.6px) px2em(16px, 13.6px);
-    font-weight: 700;
+    margin-top: 1em;
     font-size: px2em(13.6px);
+    font-weight: 700;
     background-color: var(--md-code-bg-color);
     border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
     border-top-left-radius: px2rem(2px);
@@ -197,14 +197,14 @@
     // don't overlay line numbers, as active annotations have a `z-index` of 2.
     z-index: 3;
     float: left;
+    padding-left: px2em(16px, 13.6px);
     margin-right: 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);
-    box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
     content: attr(data-linenos);
     user-select: none;
+    background-color: var(--md-code-bg-color);
+    box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
   }
 
   // Code block line anchors - Chrome and Safari seem to have a strange bug
@@ -279,10 +279,10 @@
     padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
     padding-right: 0;
     font-size: px2em(13.6px);
+    user-select: none;
     background-color: var(--md-code-bg-color);
     border-top-left-radius: px2rem(2px);
     border-bottom-left-radius: px2rem(2px);
-    user-select: none;
   }
 
   // Code block line numbers container
@@ -329,8 +329,8 @@
 
   // Code block result container
   .highlight + .result {
-    margin-top: calc(-1em + #{px2em(-2px)});
     padding: 0 px2em(16px);
+    margin-top: calc(-1em + #{px2em(-2px)});
     overflow: visible;
     border: px2rem(1px) solid var(--md-code-bg-color);
     border-top-width: px2rem(2px);

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

@@ -114,13 +114,13 @@
           display: block;
           width: var(--md-indicator-width);
           height: 2px;
+          content: "";
           background: var(--md-accent-fg-color);
-          transform: translateX(var(--md-indicator-x));
           transition:
             width     225ms,
             transform 250ms;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          content: "";
+          transform: translateX(var(--md-indicator-x));
         }
       }
     }
@@ -135,13 +135,13 @@
       flex-shrink: 0;
       width: auto;
       padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);
-      color: var(--md-default-fg-color--light);
-      font-weight: 700;
       font-size: px2rem(12.8px);
+      font-weight: 700;
+      color: var(--md-default-fg-color--light);
       white-space: nowrap;
+      cursor: pointer;
       border-bottom: px2rem(2px) solid transparent;
       border-radius: px2rem(2px) px2rem(2px) 0 0;
-      cursor: pointer;
       transition:
         background-color 250ms,
         color            250ms;
@@ -255,10 +255,10 @@
     height: px2rem(18px);
     margin-top: px2rem(2px);
     color: var(--md-default-fg-color--light);
-    border-radius: 100%;
-    cursor: pointer;
-    transition: background-color 250ms;
     pointer-events: initial;
+    cursor: pointer;
+    border-radius: 100%;
+    transition: background-color 250ms;
 
     // Tabbed button on hover
     &:hover {
@@ -271,6 +271,7 @@
       display: block;
       width: 100%;
       height: 100%;
+      content: "";
       background-color: currentcolor;
       transition:
         background-color 250ms,
@@ -279,7 +280,6 @@
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: contain;
-      content: "";
     }
   }
 
@@ -290,6 +290,7 @@
     justify-content: start;
     width: px2rem(24px);
     height: px2rem(38px);
+    pointer-events: none;
     background:
       linear-gradient(
         to right,
@@ -297,7 +298,6 @@
         transparent
       );
     transition: opacity 125ms;
-    pointer-events: none;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
@@ -338,8 +338,8 @@
   // Top-level tabbed labels
   .md-content__inner > .tabbed-set .tabbed-labels {
     max-width: 100vw;
-    margin: 0 px2rem(-16px);
     padding-inline-start: px2rem(16px);
+    margin: 0 px2rem(-16px);
     scroll-padding-inline-start: px2rem(16px);
 
     // Hack: some browsers ignore the right padding on flex containers,
@@ -352,15 +352,15 @@
     // Tabbed control previous
     ~ .tabbed-control--prev {
       width: px2rem(40px);
-      margin-inline-start: px2rem(-16px);
       padding-inline-start: px2rem(16px);
+      margin-inline-start: px2rem(-16px);
     }
 
     // Tabbed control next
     ~ .tabbed-control--next {
       width: px2rem(40px);
-      margin-inline-end: px2rem(-16px);
       padding-inline-end: px2rem(16px);
+      margin-inline-end: px2rem(-16px);
     }
   }
 }

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

@@ -61,15 +61,15 @@
   .task-list-indicator::before {
     position: absolute;
     top: 0.15em;
-    inset-inline-start: px2em(-24px);
     width: px2em(20px);
     height: px2em(20px);
+    content: "";
     background-color: var(--md-default-fg-color--lightest);
+    inset-inline-start: px2em(-24px);
     mask-image: var(--md-tasklist-icon);
     mask-position: center;
     mask-repeat: no-repeat;
     mask-size: contain;
-    content: "";
   }
 
   // Tasklist indicator in checked state