From 8284535757bcb2e59c7f7f80ab2081757e5e8cec Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <stephaniehobson@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:58:37 -0800
Subject: [PATCH] Fix remaining mixed-decls warnings

---
 .../sass/protocol/base/elements/_forms.scss   | 12 ++++-----
 .../sass/protocol/base/elements/_lists.scss   | 16 ++++++------
 .../sass/protocol/base/elements/_quotes.scss  |  2 +-
 .../sass/protocol/base/elements/_tables.scss  |  4 +--
 .../protocol/base/utilities/_rich-text.scss   |  6 ++---
 assets/sass/protocol/components/_article.scss |  4 +--
 .../sass/protocol/components/_breadcrumb.scss |  2 +-
 assets/sass/protocol/components/_card.scss    |  6 ++---
 assets/sass/protocol/components/_footer.scss  | 24 ++++++++---------
 .../components/_language-switcher.scss        |  2 +-
 .../sass/protocol/components/_menu-item.scss  |  6 ++---
 .../sass/protocol/components/_menu-list.scss  |  6 ++---
 assets/sass/protocol/components/_menu.scss    | 10 +++----
 assets/sass/protocol/components/_modal.scss   |  2 +-
 .../sass/protocol/components/_navigation.scss | 26 +++++++++++--------
 .../components/_notification-bar.scss         | 17 ++++++------
 assets/sass/protocol/components/_picto.scss   | 10 +++----
 .../protocol/components/_sidebar-menu.scss    | 18 ++++++-------
 .../protocol/components/_sticky-promo.scss    | 18 ++++++-------
 .../components/forms/_button-container.scss   |  6 ++---
 .../protocol/components/forms/_choice.scss    | 14 +++++-----
 .../sass/protocol/components/forms/_msg.scss  |  2 +-
 .../sass/protocol/components/logos/_logo.scss |  4 +--
 .../protocol/components/logos/_wordmark.scss  |  4 +--
 .../sass/protocol/includes/forms/index.scss   |  2 +-
 .../sass/protocol/includes/mixins/_bidi.scss  |  2 +-
 .../protocol/includes/mixins/_details.scss    |  2 +-
 .../sass/protocol/templates/_card-layout.scss | 10 +++----
 docs/02-usage/02-framework.md                 |  2 +-
 theme/assets/sass/components/_pen.scss        |  2 +-
 30 files changed, 122 insertions(+), 119 deletions(-)

diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index b00601d8c..d10a2a369 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -113,8 +113,8 @@ label {
     @include forms.field-label;
 
     &.mzp-u-inline {
-        @include bidi(((padding, 0 $spacing-sm 0 0, 0 0 0 $spacing-sm),));
         display: inline;
+        @include bidi(((padding, 0 $spacing-sm 0 0, 0 0 0 $spacing-sm),));
     }
 }
 
@@ -301,11 +301,6 @@ input[type='file'] {
 select {
     appearance: none;
     box-sizing: border-box;
-    @include bidi((
-        (background-position, right 8px top 50%, left 8px top 50%),
-        (padding, forms.$field-padding forms.$symbol-spacing forms.$field-padding forms.$field-padding, forms.$field-padding forms.$field-padding forms.$field-padding forms.$symbol-spacing),
-    ));
-    @include forms.form-input;
     background-image: $url-image-caret-down-form, forms.$select-bg;
     background-repeat: no-repeat, repeat;
     background-size: 1em auto, 100%;
@@ -314,6 +309,11 @@ select {
     max-width: 100%;
     min-width: forms.$field-min-width;
     text-overflow: ellipsis;
+    @include forms.form-input;
+    @include bidi((
+        (background-position, right 8px top 50%, left 8px top 50%),
+        (padding, forms.$field-padding forms.$symbol-spacing forms.$field-padding forms.$field-padding, forms.$field-padding forms.$field-padding forms.$field-padding forms.$symbol-spacing),
+    ));
 
     // no down arrow on multi selects
     &[multiple] {
diff --git a/assets/sass/protocol/base/elements/_lists.scss b/assets/sass/protocol/base/elements/_lists.scss
index 7b40621d5..6140dce2b 100644
--- a/assets/sass/protocol/base/elements/_lists.scss
+++ b/assets/sass/protocol/base/elements/_lists.scss
@@ -13,44 +13,44 @@ ol {
 }
 
 ul.mzp-u-list-styled {
-    @include bidi(((margin-left, $layout-sm, margin-right, 0),));
     list-style: disc;
+    @include bidi(((margin-left, $layout-sm, margin-right, 0),));
 
     li {
         margin-bottom: 0.25em;
     }
 
     ul {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         list-style: circle;
         margin-bottom: 0;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 
     ol {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         list-style: decimal;
         margin-bottom: 0;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 }
 
 ol.mzp-u-list-styled {
-    @include bidi(((margin-left, $layout-sm, margin-right, 0),));
     list-style: decimal;
+    @include bidi(((margin-left, $layout-sm, margin-right, 0),));
 
     li {
         margin-bottom: 0.25em;
     }
 
     ol {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         list-style: lower-alpha;
         margin-bottom: 0;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 
     ul {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         list-style: disc;
         margin-bottom: 0;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 }
 
@@ -61,14 +61,14 @@ dl.mzp-u-list-styled {
     }
 
     dd {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         margin-bottom: 0.25em;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 
     ul,
     ol {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         margin-bottom: 0;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 
     ul {
diff --git a/assets/sass/protocol/base/elements/_quotes.scss b/assets/sass/protocol/base/elements/_quotes.scss
index 1fd48007b..fa3cc74ad 100644
--- a/assets/sass/protocol/base/elements/_quotes.scss
+++ b/assets/sass/protocol/base/elements/_quotes.scss
@@ -5,7 +5,6 @@
 @use '../../includes/lib' as *;
 
 blockquote {
-    @include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),));
     @include text-heading-sm;
     border-color: $color-marketing-gray-20;
     border-style: solid;
@@ -13,6 +12,7 @@ blockquote {
     font-weight: bold;
     margin: $spacing-lg auto;
     padding: $spacing-sm $spacing-lg;
+    @include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),));
 
     cite {
         @include text-heading-xs;
diff --git a/assets/sass/protocol/base/elements/_tables.scss b/assets/sass/protocol/base/elements/_tables.scss
index 1b952282a..98896b672 100644
--- a/assets/sass/protocol/base/elements/_tables.scss
+++ b/assets/sass/protocol/base/elements/_tables.scss
@@ -12,17 +12,17 @@
     border-spacing: 0;
 
     caption {
-        @include bidi(((text-align, left, right),));
         margin-bottom: 0.25em;
         width: 100%;
+        text-align: start;
     }
 
     th,
     td {
-        @include bidi(((text-align, left, right),));
         border-top: 1px solid rgb(0, 0, 0, 0.2);
         padding: 0.5em 10px;
         text-align: left;
+        text-align: start;
     }
 
     thead th,
diff --git a/assets/sass/protocol/base/utilities/_rich-text.scss b/assets/sass/protocol/base/utilities/_rich-text.scss
index 7b1aadc92..a95b5a2d1 100644
--- a/assets/sass/protocol/base/utilities/_rich-text.scss
+++ b/assets/sass/protocol/base/utilities/_rich-text.scss
@@ -54,8 +54,8 @@
     }
 
     ul {
-        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
         list-style-type: disc;
+        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
 
         ul {
             list-style-type: circle;
@@ -63,8 +63,8 @@
     }
 
     ol {
-        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
         list-style-type: decimal;
+        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
 
         ol {
             list-style-type: lower-roman;
@@ -85,8 +85,8 @@
     }
 
     dd {
-        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
         margin-bottom: 0.25em;
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
     }
 
     pre {
diff --git a/assets/sass/protocol/components/_article.scss b/assets/sass/protocol/components/_article.scss
index 881261ce5..77705418b 100644
--- a/assets/sass/protocol/components/_article.scss
+++ b/assets/sass/protocol/components/_article.scss
@@ -11,12 +11,12 @@
     @media #{$mq-md} {
         // Float left when sidebar is on the left
         .mzp-l-sidebar-left .mzp-l-main & {
-            @include bidi(((float, left, right),));
+            float: inline-start;
         }
 
         // Float right when sidebar is on the right
         .mzp-l-sidebar-right .mzp-l-main & {
-            @include bidi(((float, right, left),));
+            float: inline-end;
         }
     }
 }
diff --git a/assets/sass/protocol/components/_breadcrumb.scss b/assets/sass/protocol/components/_breadcrumb.scss
index 43d2434e8..4d084605a 100644
--- a/assets/sass/protocol/components/_breadcrumb.scss
+++ b/assets/sass/protocol/components/_breadcrumb.scss
@@ -28,9 +28,9 @@
 
         + .mzp-c-breadcrumb-item {
             &::before {
-                @include bidi(((content, '\2192', '\2190'),));
                 font-weight: normal;
                 margin: 0 0.25em;
+                @include bidi(((content, '\2192', '\2190'),));
             }
         }
 
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index 8615559a2..5d86e0c52 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -54,13 +54,13 @@
 
     &.mzp-has-video .mzp-c-card-tag,
     &.mzp-has-audio .mzp-c-card-tag {
+        background-repeat: no-repeat;
+        line-height: 1.8;
+        min-height: 25px;
         @include bidi((
             (background-position, center left, center right),
             (padding-left, $spacing-xl, padding-right, 0),
         ));
-        background-repeat: no-repeat;
-        line-height: 1.8;
-        min-height: 25px;
     }
 
     &.mzp-has-video .mzp-c-card-tag {
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index adc582e48..22912a75d 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -72,9 +72,9 @@
 // Footer section containing list and heading
 
 .mzp-c-footer-sections {
-    @include clearfix;
-    @include footer-line;
     padding-bottom: $layout-sm;
+    @include footer-line;
+    @include clearfix;
 
     @media #{$mq-sm} {
         padding-bottom: 0;
@@ -100,11 +100,11 @@
     }
 
     @media (min-width: #{$screen-sm}) and (max-width: #{$screen-lg - 1px}) {
-        @include bidi(((float, left, right),));
         @include grid-half;
+        float: inline-start;
 
         &:nth-child(odd) {
-            @include bidi(((clear, left, right),));
+            clear: inline-start;
             @include bidi(((padding, 0 ($layout-md * 0.5) 0 0, 0 0 0 ($layout-md * 0.5)),));
         }
 
@@ -116,8 +116,8 @@
 
 @media #{$mq-lg} {
     .mzp-c-footer-section {
-        @include bidi(((float, left, right),));
         padding: 0 ($layout-md * 0.5);
+        float: inline-start;
 
         &:first-child {
             @include bidi(((padding, 0 ($layout-md * 0.5) 0 0, 0 0 0 ($layout-md * 0.5)),));
@@ -151,10 +151,10 @@
         padding: $spacing-md 0;
         position: relative;
         width: 100%;
-        @include bidi(((text-align, left, right),));
         @include footer-line;
         @include text-body-md;
         @include font-mozilla-text;
+        text-align: start;
 
         /* stylelint-disable-next-line no-duplicate-selectors */
         & {
@@ -178,7 +178,6 @@
         button::before {
             background: $url-image-expand-white top left no-repeat;
             background-size: 24px, 24px;
-            @include bidi(((right, 8px, left, auto),));
             transition: transform 100ms ease-in-out;
             content: '';
             height: 24px;
@@ -186,6 +185,7 @@
             position: absolute;
             top: 50%;
             width: 24px;
+            @include bidi(((right, 8px, left, auto),));
         }
 
         button[aria-expanded='true']::before {
@@ -255,7 +255,7 @@
     margin-bottom: $layout-sm;
 
     @media #{$mq-md} {
-        @include bidi(((float, right, left),));
+        float: inline-end;
     }
 }
 
@@ -266,9 +266,9 @@
     margin-bottom: $layout-sm;
 
     li {
-        @include bidi(((margin, 0 $spacing-md 0 0, 0 0 0 $spacing-md),));
         display: inline-block;
         vertical-align: bottom;
+        @include bidi(((margin, 0 $spacing-md 0 0, 0 0 0 $spacing-md),));
 
         a {
             @include image-replaced;
@@ -298,12 +298,12 @@
     }
 
     @media #{$mq-md} {
-        @include bidi(((right, 0, left, auto),));
-        @include bidi(((text-align, right, left),));
         bottom: 0;
         margin-bottom: 0;
         max-width: 33%; // don't over lap with legal links
         position: absolute;
+        @include bidi(((right, 0, left, auto),));
+        text-align: end;
 
         li {
             @include bidi((
@@ -329,8 +329,8 @@
 
     @media #{$mq-md} {
         li {
-            @include bidi(((padding, 0 $spacing-lg 0 0, 0 0 0 $spacing-lg),));
             display: inline-block;
+            @include bidi(((padding, 0 $spacing-lg 0 0, 0 0 0 $spacing-lg),));
 
             &:last-child {
                 @include bidi(((padding-right, 0, padding-left, 0),));
diff --git a/assets/sass/protocol/components/_language-switcher.scss b/assets/sass/protocol/components/_language-switcher.scss
index 2a67994af..1d0f37a80 100644
--- a/assets/sass/protocol/components/_language-switcher.scss
+++ b/assets/sass/protocol/components/_language-switcher.scss
@@ -11,8 +11,8 @@
     label,
     .mzp-c-language-switcher-link {
         display: inline-block;
-        @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),));
         font-size: var(--theme-body-font-size-sm); // just want smaller text size, so don't use full mixin
+        @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),));
     }
 
     // hide the <label> visually should a language link be shown instead.
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 1633e936e..da6f88e74 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -41,16 +41,16 @@ $icon-size: 24px;
     &.mzp-has-icon {
         .mzp-c-menu-item-head,
         .mzp-c-menu-item-link {
-            @include bidi(((padding-left, $icon-size + $spacing-lg, padding-right, 0),));
             position: relative;
+            @include bidi(((padding-left, $icon-size + $spacing-lg, padding-right, 0),));
 
             .mzp-c-menu-item-icon {
-                @include bidi(((left, $spacing-sm, right, auto),));
                 height: $icon-size;
                 margin: 0;
                 position: absolute;
                 top: $spacing-sm;
                 width: $icon-size;
+                @include bidi(((left, $spacing-sm, right, auto),));
             }
         }
     }
@@ -91,8 +91,8 @@ $icon-size: 24px;
 
         @media #{$mq-sm} {
             li {
-                @include bidi(((float, left, right),));
                 width: calc(50% - #{$spacing-sm});
+                float: inline-start;
 
                 &:nth-child(odd) {
                     @include bidi((
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index 08a4ac205..e4a7f3b25 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -35,13 +35,13 @@
 
             &::after {
                 background-size: 20px, 20px;
-                @include bidi(((right, $spacing-sm, left, auto),));
                 bottom: $spacing-sm;
                 content: '';
                 display: block;
                 position: absolute;
                 top: $spacing-sm;
                 width: 14px;
+                @include bidi(((right, $spacing-sm, left, auto),));
             }
         }
 
@@ -69,7 +69,6 @@
 
     .mzp-c-menu-list-title {
         button {
-            @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
             background: transparent;
             border: 0;
             color: var(--theme-link-color);
@@ -81,9 +80,9 @@
             text-align: inherit;
             text-decoration: underline;
             width: 100%;
+            @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
 
             &::after {
-                @include bidi(((right, 0, left, auto),));
                 background: $url-image-caret-down-link center bottom no-repeat;
                 bottom: 1px;
                 content: '';
@@ -92,6 +91,7 @@
                 top: 0;
                 width: 16px;
                 transition: transform 200ms ease-in-out;
+                @include bidi(((right, 0, left, auto),));
             }
 
             &[aria-expanded='true']::after {
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index a06a428f1..7af4bd7a5 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -76,7 +76,6 @@
         &::before {
             background: $url-image-expand-black top left no-repeat;
             background-size: 20px 20px;
-            @include bidi(((right, 8px, left, auto),));
             transition: transform 100ms ease-in-out;
             content: '';
             height: 20px;
@@ -84,6 +83,7 @@
             position: absolute;
             top: 50%;
             width: 20px;
+            @include bidi(((right, 8px, left, auto),));
         }
     }
 
@@ -95,8 +95,8 @@
     }
 
     @media #{$mq-md} {
-        @include bidi(((float, left, right),));
         display: inline-block;
+        float: inline-start;
 
         .mzp-c-menu-title {
             border-bottom: none;
@@ -285,9 +285,9 @@
             position: relative;
 
             & > ul {
-                @include bidi(((float, left, right),));
                 margin-bottom: 0;
                 width: calc(50% - (#{$spacing-lg} * 0.5));
+                float: inline-start;
 
                 &:first-child {
                     @include bidi(((margin-right, $spacing-lg * 0.5, margin-left, 0),));
@@ -307,13 +307,13 @@
     @media #{$mq-lg} {
         &.mzp-has-card {
             .mzp-c-menu-panel-content {
-                @include bidi(((float, left, right),));
                 width: calc(100% - (300px + #{$spacing-lg}));
+                float: inline-start;
             }
 
             .mzp-c-menu-panel-card {
-                @include bidi(((float, right, left),));
                 display: block;
+                float: inline-end;
             }
         }
     }
diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss
index 8a88f1ce1..c4043f5e7 100644
--- a/assets/sass/protocol/components/_modal.scss
+++ b/assets/sass/protocol/components/_modal.scss
@@ -72,10 +72,10 @@ html.mzp-is-noscroll {
 }
 
 .mzp-c-modal-close {
-    @include bidi(((right, $spacing-sm, left, auto),));
     position: absolute;
     top: 9px;
     z-index: 99;
+    @include bidi(((right, $spacing-sm, left, auto),));
 
     .mzp-c-modal-button-close {
         @include image-replaced;
diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss
index 7fa695b6a..eee3adce0 100644
--- a/assets/sass/protocol/components/_navigation.scss
+++ b/assets/sass/protocol/components/_navigation.scss
@@ -71,7 +71,7 @@
 // Mozilla Logo
 
 .mzp-c-navigation-logo {
-    @include bidi(((float, left, right),));
+    float: inline-start;
 
     a {
         background-size: 101px, 24px;
@@ -133,9 +133,9 @@
     vertical-align: bottom;
 
     @media #{$mq-md} {
-        @include bidi(((margin-left, -$spacing-sm, margin-right, 0),));
         display: inline-block;
         width: auto;
+        @include bidi(((margin-left, -$spacing-sm, margin-right, 0),));
     }
 
     @media #{$mq-lg} {
@@ -164,12 +164,12 @@
     }
 
     @media #{$mq-md} {
+        display: block;
+        float: inline-end;
+        margin: $spacing-lg 0;
         @include bidi((
-            (float, right, left),
             (margin, $spacing-lg 0 $spacing-lg $spacing-sm, $spacing-lg $spacing-sm $spacing-lg 0)
         ));
-        display: block;
-        margin: $spacing-lg 0;
     }
 
     @media #{$mq-lg} {
@@ -185,9 +185,6 @@
 // Mobile Navigation Icon
 
 .mzp-c-navigation-menu-button {
-    @include bidi(((background-position, right 6px center, left 6px center ),));
-    @include bidi(((float, right, left),));
-    @include bidi(((padding, 0 32px 0 6px, 0 6px 0 32px),));
     background-color: transparent;
     background-image: url('#{$image-path}/icons/menu.svg');
     background-repeat: no-repeat;
@@ -195,6 +192,11 @@
     border: none;
     display: none;
     height: 32px;
+    float: inline-end;
+    @include bidi((
+        (background-position, right 6px center, left 6px center ),
+        (padding, 0 32px 0 6px, 0 6px 0 32px)
+    ));
 
     &:hover,
     &:active,
@@ -205,11 +207,13 @@
 }
 
 .mzp-c-navigation-menu-button:not(.has-label) {
-    @include bidi(((background-position, center center, center center ),));
-    @include bidi(((padding, 0, 0),));
-    @include image-replaced;
     cursor: pointer;
     width: 32px;
+    @include image-replaced;
+    @include bidi((
+        (background-position, center center, center center ),
+        (padding, 0, 0),
+    ));
 }
 
 .js .mzp-c-navigation-menu-button {
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
index 5c2b1f1b1..38348208c 100644
--- a/assets/sass/protocol/components/_notification-bar.scss
+++ b/assets/sass/protocol/components/_notification-bar.scss
@@ -61,19 +61,19 @@
     }
 
     .mzp-c-notification-bar-button {
-        @include bidi((
-            (right, 0, auto),
-            (left, auto, 0),
-        ));
         @include image-replaced;
         background: url('#{$image-path}/icons/close.svg') center center/18px 18px no-repeat;
         border: 0;
+        float: inline-end;
         height: 20px;
         margin: $spacing-sm;
         padding: 0;
         position: absolute;
         top: 0;
         width: 20px;
+        @include bidi((
+            (left, auto, 0),
+        ));
 
         &:hover {
             cursor: pointer;
@@ -84,16 +84,15 @@
         }
 
         @media #{$mq-sm} {
-            @include bidi((
-                (float, right, left),
-                (border-radius, 0 $border-radius-sm $border-radius-sm 0, $border-radius-sm 0 0 $border-radius-sm),
-            ));
             background-color: $color-marketing-gray-40;
             padding: 0;
             margin: 0;
             height: 100%;
             width: 40px;
-            float: right;
+            float: inline-end;
+            @include bidi((
+                (border-radius, 0 $border-radius-sm $border-radius-sm 0, $border-radius-sm 0 0 $border-radius-sm),
+            ));
 
             &:hover,
             &:focus {
diff --git a/assets/sass/protocol/components/_picto.scss b/assets/sass/protocol/components/_picto.scss
index d24523e62..d83af7056 100644
--- a/assets/sass/protocol/components/_picto.scss
+++ b/assets/sass/protocol/components/_picto.scss
@@ -36,23 +36,23 @@
 @media #{$mq-sm} {
     .mzp-t-picto-side {
         .mzp-c-picto {
+            position: relative;
             @include bidi((
                 (padding-left, $layout-xl, 0),
                 (padding-right, 0, $layout-xl),
             ));
-            position: relative;
         }
 
         .mzp-c-picto-image {
-            @include bidi((
-                (left, 0, auto),
-                (right, auto, 0),
-            ));
             display: block;
             margin: 0 auto;
             position: absolute;
             text-align: center;
             width: $layout-lg;
+            @include bidi((
+                (left, 0, auto),
+                (right, auto, 0),
+            ));
         }
     }
 }
diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss
index 54f78877f..1af31260c 100644
--- a/assets/sass/protocol/components/_sidebar-menu.scss
+++ b/assets/sass/protocol/components/_sidebar-menu.scss
@@ -21,19 +21,19 @@
     }
 
     li {
+        color: $color-marketing-gray-80;
+        display: inline-block;
         @include bidi((
             (margin-right, $spacing-xs, margin-left, 0),
         ));
-        color: $color-marketing-gray-80;
-        display: inline-block;
 
         &::after {
+            content: '\25B8'; // right pointing triangle
+            display: inline-block;
             @include bidi((
                 (margin-left, $spacing-xs, margin-right, 0),
                 (transform, none, translateY(3px) rotate(180deg)),
             ));
-            content: '\25B8'; // right pointing triangle
-            display: inline-block;
         }
 
         &:last-child::after {
@@ -79,22 +79,22 @@
 
 .mzp-c-sidemenu-label {
     position: relative;
+    @include text-body-sm;
+    @include font-base;
     @include bidi((
         (padding-right, $spacing-lg, padding-left, 0),
     ));
-    @include text-body-sm;
-    @include font-base;
 
     &::after {
-        @include bidi((
-            (right, 0, left, auto),
-        ));
         transform: rotate(90deg);
         color: $color-marketing-gray-80;
         content: none;
         font-size: 1.5em;
         position: absolute;
         top: 0;
+        @include bidi((
+            (right, 0, left, auto),
+        ));
     }
 }
 
diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss
index 6df67f7f6..cad61663c 100644
--- a/assets/sass/protocol/components/_sticky-promo.scss
+++ b/assets/sass/protocol/components/_sticky-promo.scss
@@ -27,10 +27,6 @@ $logos: (
 }
 
 .mzp-c-sticky-promo {
-    @include bidi((
-        (right, $spacing-md, auto),
-        (left, auto, $spacing-md),
-    ));
     background-color: var(--theme-background-color);
     border-radius: $border-radius-sm;
     bottom: 0;
@@ -43,6 +39,10 @@ $logos: (
     z-index: 10;
     animation: 600ms ease 300ms both;
     opacity: 0;
+    @include bidi((
+        (right, $spacing-md, auto),
+        (left, auto, $spacing-md),
+    ));
 
     &.mzp-js-show-on-load {
         animation-delay: 1000ms;
@@ -77,11 +77,11 @@ $logos: (
     &.mzp-t-product-developer,
     &.mzp-t-product-nightly {
         .mzp-c-sticky-promo-title {
-            @include bidi(((background-position, top left, top right),));
             background-size: auto 40px;
             background-position: top left;
             background-repeat: no-repeat;
             padding: (40px + $spacing-lg) 0 0;
+            @include bidi(((background-position, top left, top right),));
         }
     }
 }
@@ -92,10 +92,6 @@ $logos: (
 }
 
 .mzp-c-sticky-promo-close {
-    @include bidi((
-        (right, 0, auto),
-        (left, auto, 0),
-    ));
     @include image-replaced;
     background: transparent url('#{$image-path}/icons/close.svg') center center no-repeat;
     background-size: 20px 20px;
@@ -106,6 +102,10 @@ $logos: (
     right: 0;
     top: 0;
     width: 20px;
+    @include bidi((
+        (right, 0, auto),
+        (left, auto, 0),
+    ));
 
     &:hover,
     &:focus {
diff --git a/assets/sass/protocol/components/forms/_button-container.scss b/assets/sass/protocol/components/forms/_button-container.scss
index 3c0aa1180..9f26778fe 100644
--- a/assets/sass/protocol/components/forms/_button-container.scss
+++ b/assets/sass/protocol/components/forms/_button-container.scss
@@ -38,23 +38,23 @@
     }
 
     @media #{$mq-sm} {
-        @include bidi(((text-align, left, right),));
         align-items: start;
         justify-content: start;
+        text-align: start;
 
         .mzp-c-button {
             width: auto;
         }
 
         .mzp-c-button + .mzp-c-button {
-            @include bidi(((margin-left, forms.$field-h-spacing, margin-right, 0),));
             margin-top: 0;
+            @include bidi(((margin-left, forms.$field-h-spacing, margin-right, 0),));
         }
 
         // align end
         &.mzp-l-align-end {
-            @include bidi(((text-align, right, left),));
             justify-content: flex-end;
+            text-align: end;
         }
 
         &.mzp-l-stretch {
diff --git a/assets/sass/protocol/components/forms/_choice.scss b/assets/sass/protocol/components/forms/_choice.scss
index dca6f2878..6dbdea3df 100644
--- a/assets/sass/protocol/components/forms/_choice.scss
+++ b/assets/sass/protocol/components/forms/_choice.scss
@@ -42,11 +42,11 @@
 
 // label
 .mzp-c-choice-label {
-    @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
     margin-bottom: 0;
     padding-top: 3px;
     padding-bottom: 0;
     vertical-align: top;
+    @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
 
     .mzp-c-choices & {
         font-weight: normal;
@@ -62,11 +62,11 @@
     // position real controls
     &[type='checkbox'],
     &[type='radio'] {
-        @include bidi(((left, 0, right, auto),));
         box-sizing: border-box;
         position: absolute;
         top: 0;
         z-index: 1;
+        @include bidi(((left, 0, right, auto),));
     }
 
     // IE8 and lower don't support some of this, but they also don't support media queries
@@ -85,7 +85,6 @@
 
         &[type='checkbox'] + label::before,
         &[type='radio'] + label::before {
-            @include bidi(((left, 0, right, auto),));
             box-sizing: border-box;
             background: var(--theme-background-color);
             border-radius: 2px;
@@ -98,6 +97,7 @@
             text-align: center;
             top: 0;
             width: forms.$choice-height;
+            @include bidi(((left, 0, right, auto),));
         }
 
         &[type='radio'] + label::before {
@@ -113,10 +113,6 @@
 
         &[type='checkbox']:checked + label::after {
             // checkmark is defined with rems so it scales on zoom
-            @include bidi((
-                (left, 0.03rem, auto),
-                (right, auto, 0.83rem),
-            ));
             border-bottom: remify(3px) solid var(--theme-background-color);
             border-right: remify(3px) solid var(--theme-background-color);
             content: '';
@@ -127,6 +123,10 @@
             transform: rotate(45deg);
             transform-origin: bottom right;
             width: 0.35rem;
+            @include bidi((
+                (left, 0.03rem, auto),
+                (right, auto, 0.83rem),
+            ));
         }
 
         &[type='radio']:checked + label::before {
diff --git a/assets/sass/protocol/components/forms/_msg.scss b/assets/sass/protocol/components/forms/_msg.scss
index ba77096b3..4dac2a889 100644
--- a/assets/sass/protocol/components/forms/_msg.scss
+++ b/assets/sass/protocol/components/forms/_msg.scss
@@ -29,8 +29,8 @@
 
 .mzp-c-field-control + .mzp-c-field-msg::after,
 .mzp-c-choice-label + .mzp-c-choice-msg::after {
-    @include forms.form-msg-pointer;
     margin-top: forms.$field-v-spacing * -1 + forms.$label-v-spacing;
+    @include forms.form-msg-pointer;
 }
 
 .mzp-c-field-set > .mzp-c-form-msg:last-child {
diff --git a/assets/sass/protocol/components/logos/_logo.scss b/assets/sass/protocol/components/logos/_logo.scss
index c206b6c9e..cdaf763f2 100644
--- a/assets/sass/protocol/components/logos/_logo.scss
+++ b/assets/sass/protocol/components/logos/_logo.scss
@@ -17,13 +17,13 @@ $logo-sizes: (
 );
 
 .mzp-c-logo {
-    @include bidi(((background-position, top left, top right),));
     @include image-replaced;
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
     margin-bottom: $layout-sm;
     margin-top: 0;
+    @include bidi(((background-position, top left, top right),));
 
     &.mzp-t-logo-xs {
         height: $layout-xs;
@@ -65,9 +65,9 @@ $logo-sizes: (
         margin-right: auto;
 
         @media #{$mq-md} {
-            @include bidi(((background-position, top left, top right),));
             margin-left: 0;
             margin-right: 0;
+            @include bidi(((background-position, top left, top right),));
         }
     }
 }
diff --git a/assets/sass/protocol/components/logos/_wordmark.scss b/assets/sass/protocol/components/logos/_wordmark.scss
index bd313c9e0..7d13313a7 100644
--- a/assets/sass/protocol/components/logos/_wordmark.scss
+++ b/assets/sass/protocol/components/logos/_wordmark.scss
@@ -14,7 +14,6 @@ $logo-sizes: (
 );
 
 .mzp-c-wordmark {
-    @include bidi(((background-position, top left, top right),));
     @include image-replaced;
     background-size: contain;
     background-repeat: no-repeat;
@@ -22,6 +21,7 @@ $logo-sizes: (
     margin-bottom: $layout-sm;
     margin-top: 0;
     max-width: 100%;
+    @include bidi(((background-position, top left, top right),));
 
     &.mzp-t-wordmark-xs {
         height: $layout-xs;
@@ -63,9 +63,9 @@ $logo-sizes: (
         margin-right: auto;
 
         @media #{$mq-md} {
-            @include bidi(((background-position, top left, top right),));
             margin-left: 0;
             margin-right: 0;
+            @include bidi(((background-position, top left, top right),));
         }
     }
 }
diff --git a/assets/sass/protocol/includes/forms/index.scss b/assets/sass/protocol/includes/forms/index.scss
index 03e714c37..c4917d088 100644
--- a/assets/sass/protocol/includes/forms/index.scss
+++ b/assets/sass/protocol/includes/forms/index.scss
@@ -112,7 +112,6 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 }
 
 @mixin form-msg-pointer() {
-    @include bidi(((left, 6px, right, auto),));
     border: 7px solid transparent;
     border-bottom: 8px solid var(--theme-field-border-color-error-hover);
     bottom: 100%;
@@ -121,4 +120,5 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
     position: absolute;
     width: 0;
     z-index: 1;
+    @include bidi(((left, 6px, right, auto),));
 }
diff --git a/assets/sass/protocol/includes/mixins/_bidi.scss b/assets/sass/protocol/includes/mixins/_bidi.scss
index 3f4783717..a933eff84 100644
--- a/assets/sass/protocol/includes/mixins/_bidi.scss
+++ b/assets/sass/protocol/includes/mixins/_bidi.scss
@@ -51,7 +51,7 @@
                 // Trouble shooting:
                 // - Check that you have the right number of nested (((parentheses)))
                 // - Check that there is a trailing comma:
-                //   @include bidi(((float, left, right),));
+                //   @include bidi(((content, '\2192', '\2190'),));
             }
             #{$property}: $ltr-value;
         }
diff --git a/assets/sass/protocol/includes/mixins/_details.scss b/assets/sass/protocol/includes/mixins/_details.scss
index de14d150b..d6f4d7e2a 100644
--- a/assets/sass/protocol/includes/mixins/_details.scss
+++ b/assets/sass/protocol/includes/mixins/_details.scss
@@ -34,7 +34,6 @@
     &::before {
         background: images.$url-image-expand-black top left no-repeat;
         background-size: 20px, 20px;
-        @include bidi.bidi(((right, 8px, left, auto),));
         transition: transform 100ms ease-in-out;
         content: '';
         height: 20px;
@@ -42,6 +41,7 @@
         position: absolute;
         top: 50%;
         width: 20px;
+        @include bidi.bidi(((right, 8px, left, auto),));
     }
 }
 
diff --git a/assets/sass/protocol/templates/_card-layout.scss b/assets/sass/protocol/templates/_card-layout.scss
index 86bd25c42..26512adc2 100644
--- a/assets/sass/protocol/templates/_card-layout.scss
+++ b/assets/sass/protocol/templates/_card-layout.scss
@@ -17,12 +17,12 @@
         @include clearfix;
 
         .mzp-c-card {
+            float: inline-start;
+            width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
             @include bidi((
-                (float, left, right),
                 (margin-left, 0, var(--theme-spacing-between-inline)),
                 (margin-right, var(--theme-spacing-between-inline), 0),
             ));
-            width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
 
             &:nth-child(odd) {
                 margin-left: 0;
@@ -72,12 +72,12 @@
         @include clearfix;
 
         .mzp-c-card {
+            float: inline-start;
+            width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
             @include bidi((
-                (float, left, right),
                 (margin-left, 0, var(--theme-spacing-between-inline)),
                 (margin-right, var(--theme-spacing-between-inline), 0),
             ));
-            width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
 
             &:nth-child(even) {
                 margin-left: 0;
@@ -88,11 +88,11 @@
 
     @media #{$mq-lg} {
         .mzp-c-card {
+            width: calc(25% - (var(--theme-spacing-between-inline) - var(--theme-spacing-between-inline) * 0.25));
             @include bidi((
                 (margin-left, 0, var(--theme-spacing-between-inline)),
                 (margin-right, var(--theme-spacing-between-inline), 0),
             ));
-            width: calc(25% - (var(--theme-spacing-between-inline) - var(--theme-spacing-between-inline) * 0.25));
 
             &:nth-child(even) {
                 @include bidi((
diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md
index bbf723433..a153b5551 100644
--- a/docs/02-usage/02-framework.md
+++ b/docs/02-usage/02-framework.md
@@ -41,7 +41,7 @@ bidi mixin to reverse that direction for other languages. Refer to
 `/includes/mixins/_bidi.scss` for more documentation and usage.
 
 ```scss
-@include bidi(((float, left, right),));
+@include bidi(((content, '\2192', '\2190'),));
 ```
 
 ### at2x
diff --git a/theme/assets/sass/components/_pen.scss b/theme/assets/sass/components/_pen.scss
index 6b29238ce..add1394e0 100755
--- a/theme/assets/sass/components/_pen.scss
+++ b/theme/assets/sass/components/_pen.scss
@@ -42,8 +42,8 @@
 .Pen-previewButton {
     color: var(--theme-link-color);
     font-weight: bold;
-    @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
     @include text-body-sm;
+    @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
 
     &:hover,
     &:active {