From 0106d6b7d2187c88600cfdb69b9b0eb302237c66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Sun, 23 Nov 2025 22:05:45 +0100
Subject: [PATCH] Update SCSS to use logical properties (#2537)

---
 .changeset/funny-kings-double.md          |  5 ++
 core/scss/_bootstrap-override.scss        |  8 +--
 core/scss/_utilities-marketing.scss       | 18 +++---
 core/scss/_utilities.scss                 |  6 +-
 core/scss/helpers/_index.scss             | 18 +++---
 core/scss/layout/_core.scss               |  4 +-
 core/scss/layout/_navbar.scss             | 56 +++++++++---------
 core/scss/layout/_page.scss               | 10 ++--
 core/scss/layout/_root.scss               |  4 +-
 core/scss/marketing/_browser.scss         |  4 +-
 core/scss/marketing/_pricing.scss         | 10 ++--
 core/scss/ui/_accordion.scss              | 12 ++--
 core/scss/ui/_alerts.scss                 |  4 +-
 core/scss/ui/_avatars.scss                |  6 +-
 core/scss/ui/_badges.scss                 |  2 +-
 core/scss/ui/_breadcrumbs.scss            |  6 +-
 core/scss/ui/_buttons.scss                | 14 ++---
 core/scss/ui/_calendars.scss              | 10 ++--
 core/scss/ui/_cards.scss                  | 72 +++++++++++------------
 core/scss/ui/_carousel.scss               | 10 ++--
 core/scss/ui/_charts.scss                 |  4 +-
 core/scss/ui/_dropdowns.scss              | 10 ++--
 core/scss/ui/_forms.scss                  | 20 +++----
 core/scss/ui/_grid.scss                   | 16 ++---
 core/scss/ui/_lists.scss                  | 10 ++--
 core/scss/ui/_loaders.scss                |  8 +--
 core/scss/ui/_modals.scss                 |  6 +-
 core/scss/ui/_nav.scss                    | 16 ++---
 core/scss/ui/_pagination.scss             | 10 ++--
 core/scss/ui/_progress.scss               | 18 +++---
 core/scss/ui/_ribbons.scss                | 58 +++++++++---------
 core/scss/ui/_segmented.scss              |  2 +-
 core/scss/ui/_stars.scss                  |  2 +-
 core/scss/ui/_status.scss                 |  2 +-
 core/scss/ui/_steps.scss                  | 12 ++--
 core/scss/ui/_switch-icon.scss            |  2 +-
 core/scss/ui/_tables.scss                 |  2 +-
 core/scss/ui/_tags.scss                   | 10 ++--
 core/scss/ui/_timeline.scss               |  6 +-
 core/scss/ui/_type.scss                   | 18 +++---
 core/scss/ui/forms/_form-check.scss       |  6 +-
 core/scss/ui/forms/_form-colorinput.scss  |  2 +-
 core/scss/ui/forms/_form-icon.scss        | 10 ++--
 core/scss/ui/forms/_form-imagecheck.scss  | 10 ++--
 core/scss/ui/forms/_form-selectgroup.scss |  8 +--
 core/scss/ui/typo/_hr.scss                | 16 ++---
 core/scss/vendor/_coloris.scss            |  6 +-
 core/scss/vendor/_nouislider.scss         |  2 +-
 48 files changed, 288 insertions(+), 283 deletions(-)
 create mode 100644 .changeset/funny-kings-double.md

diff --git a/.changeset/funny-kings-double.md b/.changeset/funny-kings-double.md
new file mode 100644
index 000000000..420a39bdf
--- /dev/null
+++ b/.changeset/funny-kings-double.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update SCSS to use logical properties
diff --git a/core/scss/_bootstrap-override.scss b/core/scss/_bootstrap-override.scss
index f57b90e3e..be7b309b6 100644
--- a/core/scss/_bootstrap-override.scss
+++ b/core/scss/_bootstrap-override.scss
@@ -14,13 +14,13 @@
     width: $caret-width;
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
-    border-left: 1px var(--#{$prefix}border-style);
-    margin-right: 0.1em;
+    border-inline-start: 1px var(--#{$prefix}border-style);
+    margin-inline-end: 0.1em;
 
     @if $direction != 'left' {
-      margin-left: $caret-spacing;
+      margin-inline-start: $caret-spacing;
     } @else {
-      margin-right: $caret-spacing;
+      margin-inline-end: $caret-spacing;
     }
 
     @if $direction == down {
diff --git a/core/scss/_utilities-marketing.scss b/core/scss/_utilities-marketing.scss
index ac09d38f3..cf0683b72 100644
--- a/core/scss/_utilities-marketing.scss
+++ b/core/scss/_utilities-marketing.scss
@@ -12,7 +12,7 @@ $utilities: (
     ),
   'margin-x': (
     responsive: true,
-    property: margin-right margin-left,
+    property: margin-inline-end margin-inline-start,
     class: mx,
     values: $spacers-extra,
   ),
@@ -30,7 +30,7 @@ $utilities: (
   ),
   'margin-end': (
     responsive: true,
-    property: margin-right,
+    property: margin-inline-end,
     class: me,
     values: $spacers-extra,
   ),
@@ -42,7 +42,7 @@ $utilities: (
   ),
   'margin-start': (
     responsive: true,
-    property: margin-left,
+    property: margin-inline-start,
     class: ms,
     values: $spacers-extra,
   ),
@@ -55,7 +55,7 @@ $utilities: (
     ),
   'negative-margin-x': (
     responsive: true,
-    property: margin-right margin-left,
+    property: margin-inline-end margin-inline-start,
     class: mx,
     values: $negative-spacers-extra,
   ),
@@ -73,7 +73,7 @@ $utilities: (
   ),
   'negative-margin-end': (
     responsive: true,
-    property: margin-right,
+    property: margin-inline-end,
     class: me,
     values: $negative-spacers-extra,
   ),
@@ -85,7 +85,7 @@ $utilities: (
   ),
   'negative-margin-start': (
     responsive: true,
-    property: margin-left,
+    property: margin-inline-start,
     class: ms,
     values: $negative-spacers-extra,
   ),
@@ -98,7 +98,7 @@ $utilities: (
     ),
   'padding-x': (
     responsive: true,
-    property: padding-right padding-left,
+    property: padding-inline-end padding-inline-start,
     class: px,
     values: $spacers-extra,
   ),
@@ -116,7 +116,7 @@ $utilities: (
   ),
   'padding-end': (
     responsive: true,
-    property: padding-right,
+    property: padding-inline-end,
     class: pe,
     values: $spacers-extra,
   ),
@@ -128,7 +128,7 @@ $utilities: (
   ),
   'padding-start': (
     responsive: true,
-    property: padding-left,
+    property: padding-inline-start,
     class: ps,
     values: $spacers-extra,
   ),
diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss
index 6e56dcfd7..7a4cc1d3c 100644
--- a/core/scss/_utilities.scss
+++ b/core/scss/_utilities.scss
@@ -164,7 +164,7 @@ $utilities: (
   ),
   'border-end': (
     class: border-end,
-    property: border-right,
+    property: border-inline-end,
     values: $border-values,
   ),
   'border-bottom': (
@@ -173,12 +173,12 @@ $utilities: (
   ),
   'border-start': (
     class: border-start,
-    property: border-left,
+    property: border-inline-start,
     values: $border-values,
   ),
   'border-x': (
     class: border-x,
-    property: border-left border-right,
+    property: border-inline-start border-inline-end,
     values: $border-values,
   ),
   'border-y': (
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index f3f313511..b06296e5b 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -33,9 +33,9 @@
   &::after {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     content: '';
   }
@@ -74,16 +74,16 @@
 .fixed-top {
   position: fixed;
   top: 0;
-  right: 0;
-  left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
 .fixed-bottom {
   position: fixed;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
@@ -119,10 +119,10 @@
     content: '';
   }
 
-  > * {
+  >* {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
   }
@@ -141,4 +141,4 @@
   outline: 0;
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
-}
+}
\ No newline at end of file
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index 334273a0c..6d60f6941 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -61,8 +61,8 @@ body {
     }
 
     > .navbar:first-child {
-      border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
     }
   }
 }
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 5d10b5959..61fcb2eda 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -11,12 +11,12 @@
     }
 
     .navbar-nav {
-      margin-left: 0;
-      margin-right: 0;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
 
       .nav-link {
         padding: 0.5rem calc(#{$container-padding-x} / 2);
-        justify-content: flex-start;
+        justify-content: start;
       }
     }
 
@@ -38,7 +38,7 @@
         min-width: 0;
         display: flex;
         width: auto;
-        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
         &.disabled {
@@ -54,22 +54,22 @@
       }
 
       .dropdown-menu .dropdown-item {
-        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
       }
 
       .dropdown-menu .dropdown-menu .dropdown-item {
-        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
       }
     }
 
     .dropdown-toggle:after {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-left-width: 3px;
-      right: auto;
+      border-inline-start-width: 3px;
+  inset-inline-end: auto;
       top: 0;
       bottom: 0;
     }
@@ -118,7 +118,7 @@ Navbar
       .badge {
         position: absolute;
         top: 0.5rem;
-        right: 0.5rem;
+  inset-inline-end: 0.5rem;
         transform: translate(50%, -50%);
       }
     }
@@ -151,8 +151,8 @@ Navbar
           &:after {
             content: '';
             position: absolute;
-            left: 0;
-            right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
             bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
@@ -171,7 +171,7 @@ Navbar
         &.navbar-vertical {
           ~ .navbar,
           ~ .page-wrapper {
-            margin-left: $sidebar-width;
+            margin-inline-start: $sidebar-width;
           }
         }
 
@@ -179,8 +179,8 @@ Navbar
         &.navbar-vertical.navbar-end {
           ~ .navbar,
           ~ .page-wrapper {
-            margin-left: 0;
-            margin-right: $sidebar-width;
+            margin-inline-start: 0;
+            margin-inline-end: $sidebar-width;
           }
         }
       }
@@ -235,7 +235,7 @@ Navbar toggler
     border-radius: inherit;
     background: inherit;
     position: absolute;
-    left: 0;
+  inset-inline-start: 0;
     @include transition(inherit);
   }
 
@@ -313,18 +313,18 @@ Navbar vertical
             width: $sidebar-width;
             position: fixed;
             top: 0;
-            left: 0;
+  inset-inline-start: 0;
             bottom: 0;
             z-index: $zindex-fixed;
-            align-items: flex-start;
+            align-items: start;
             overflow-y: scroll;
             padding: 0;
             @include transition(transform $transition-time);
 
             &.navbar-right,
             &.navbar-end {
-              left: auto;
-              right: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
             }
 
             .navbar-brand {
@@ -351,23 +351,23 @@ Navbar vertical
               flex-direction: column;
               align-items: stretch;
               min-height: 100%;
-              justify-content: flex-start;
+              justify-content: start;
               padding: 0;
             }
 
             ~ .page {
-              padding-left: $sidebar-width;
+              padding-inline-start: $sidebar-width;
 
               [class^='container'] {
-                padding-left: 1.5rem;
-                padding-right: 1.5rem;
+                padding-inline-start: 1.5rem;
+                padding-inline-end: 1.5rem;
               }
             }
 
             &.navbar-right ~ .page,
             &.navbar-end ~ .page {
-              padding-left: 0;
-              padding-right: $sidebar-width;
+              padding-inline-start: 0;
+              padding-inline-end: $sidebar-width;
             }
 
             @include navbar-vertical-nav;
@@ -384,8 +384,8 @@ Navbar vertical
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
     background: inherit;
     z-index: -1;
     box-shadow: inherit;
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index cdd20a737..9590b61da 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -67,8 +67,8 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
-    right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
     bottom: 0;
     background-image: $overlay-gradient;
   }
@@ -110,7 +110,7 @@
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
   }
 }
 
@@ -139,8 +139,8 @@
 .page-cover-img {
   position: absolute;
   top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
-  left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
-  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   pointer-events: none;
   filter: blur(var(--#{$prefix}page-cover-blur));
diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss
index 135539dc7..d5516dc92 100644
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -4,8 +4,8 @@
   height: 100%;
 
   @include media-breakpoint-up(lg) {
-    margin-left: calc(100vw - 100%);
-    margin-right: 0;
+    margin-inline-start: calc(100vw - 100%);
+    margin-inline-end: 0;
   }
 }
 
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index 9dc287d76..b6cd54dd5 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -16,7 +16,7 @@
 }
 
 .browser-dots {
-  margin-right: 3rem;
+  margin-inline-end: 3rem;
   display: flex;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .browser-dot {
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
   width: 0.75rem;
   min-width: 0.75rem;
   height: 0.75rem;
diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss
index ab69ce1c9..727f7a05e 100644
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -60,10 +60,10 @@ $pricing-card-width: 22rem;
 .pricing-label {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   transform: translateY(-50%);
   vertical-align: bottom;
-  right: 0;
+  inset-inline-end: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -86,7 +86,7 @@ $pricing-card-width: 22rem;
 .pricing-price-currency {
   font-size: $h2-font-size;
   line-height: 1.5;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
   font-weight: $font-weight-bold;
 }
 
@@ -96,14 +96,14 @@ $pricing-card-width: 22rem;
   font-weight: $font-weight-normal;
   color: $text-secondary;
   align-self: center;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .pricing-features {
   margin: 1rem 0 0;
   padding: 0;
   list-style: none;
-  text-align: left;
+  text-align: start;
 
   > li:not(:first-child) {
     margin-top: 0.25rem;
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 50c737fc3..d7acca5e7 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -49,7 +49,7 @@
   align-items: center;
   width: 100%;
   color: var(--#{$prefix}accordion-btn-color);
-  text-align: left;
+  text-align: start;
   background-color: transparent;
   border: 0;
   overflow-anchor: none;
@@ -79,8 +79,8 @@
   display: flex;
   line-height: 1;
   transition: $transition-time transform;
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-start: auto;
+  margin-inline-end: 0;
   color: var(--#{$prefix}secondary);
   width: var(--#{$prefix}accordion-btn-toggle-width);
   height: var(--#{$prefix}accordion-btn-toggle-width);
@@ -141,8 +141,8 @@
 
 .accordion-flush {
   > .accordion-item {
-    border-right: 0;
-    border-left: 0;
+    border-inline-end: 0;
+    border-inline-start: 0;
     @include border-radius(0);
 
     &:first-child {
@@ -172,6 +172,6 @@
 .accordion-inverted {
   .accordion-button-toggle {
     order: -1;
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 0f5eb9861..4d1971225 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -61,12 +61,12 @@
 }
 
 .alert-dismissible {
-  padding-right: 3rem; //todo: use variable
+  padding-inline-end: 3rem; //todo: use variable
 
   .btn-close {
     position: absolute;
     top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
-    right: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+  inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index 2df3f358d..dfb67c3bc 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -38,7 +38,7 @@
 
   .badge {
     position: absolute;
-    right: 0;
+  inset-inline-end: 0;
     bottom: 0;
     border-radius: $border-radius-pill;
     box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -96,7 +96,7 @@
   --#{$prefix}list-gap: 0;
 
   .avatar {
-    margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
+    margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
     box-shadow:
       var(--#{$prefix}avatar-box-shadow),
       0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -147,7 +147,7 @@
   width: var(--#{$prefix}avatar-brand-size);
   height: var(--#{$prefix}avatar-brand-size);
   position: absolute;
-  right: -2px;
+  inset-inline-end: -2px;
   bottom: -2px;
   z-index: 1000;
   background: var(--#{$prefix}bg-surface);
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index 1f3fc8fd3..6c613c736 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -79,7 +79,7 @@
 .badge-notification {
   position: absolute !important;
   top: 0 !important;
-  right: 0 !important;
+  inset-inline-end: 0 !important;
   transform: translate(50%, -50%);
   z-index: 1;
 }
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index 0effa5a88..e267e7282 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -60,11 +60,11 @@
   }
 
   & + & {
-    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+    padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
     &::before {
-      float: left;
-      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      float: inline-start;
+      padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
       color: var(--#{$prefix}breadcrumb-divider-color);
       content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
       /*rtl:raw:
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 6bfa8d893..7dc82a2e3 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -171,8 +171,8 @@
 // Button shapes
 //
 .btn-pill {
-  padding-right: 1.5em;
-  padding-left: 1.5em;
+  padding-inline-end: 1.5em;
+  padding-inline-start: 1.5em;
   border-radius: 10rem;
 
   &[class*='btn-icon'] {
@@ -189,8 +189,8 @@
 //
 .btn-icon,
 .btn-action {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 
   .icon {
     margin: calc(-1 * var(--#{$prefix}btn-padding-x));
@@ -214,7 +214,7 @@
   position: fixed;
   z-index: $zindex-fixed;
   bottom: 1rem;
-  left: 1rem;
+  inset-inline-start: 1rem;
   box-shadow: var(--#{$prefix}shadow-dropdown);
 
   @include media-print {
@@ -240,13 +240,13 @@
     display: inline-block;
     vertical-align: text-bottom;
     border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
-    border-right-color: transparent;
+    border-inline-end-color: transparent;
     border-radius: $border-radius-pill;
     color: var(--#{$prefix}btn-color);
     position: absolute;
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
-    left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+  inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border 0.75s linear infinite;
   }
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index 8f5707623..94787b5e1 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -19,7 +19,7 @@
 .calendar-header {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: start;
   padding: 0.5rem 0;
 }
 
@@ -77,8 +77,8 @@
   &:before {
     position: absolute;
     top: 50%;
-    right: 0;
-    left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
     height: 1.4rem;
     content: '';
     background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
   }
 
   &.range-start:before {
-    left: 50%;
+  inset-inline-start: 50%;
   }
 
   &.range-end:before {
-    right: 50%;
+  inset-inline-end: 50%;
   }
 }
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index 0d7cdcfb5..18e9cdfe2 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -34,11 +34,11 @@
   --#{$prefix}stamp-size: 7rem;
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   width: calc(var(--#{$prefix}stamp-size) * 1);
   height: calc(var(--#{$prefix}stamp-size) * 1);
   max-height: 100%;
-  border-top-right-radius: $border-radius;
+  border-start-end-radius: $border-radius;
   opacity: $card-stamp-opacity;
   overflow: hidden;
   pointer-events: none;
@@ -59,7 +59,7 @@
   height: calc(var(--#{$prefix}stamp-size) * 1);
   position: relative;
   top: calc(var(--#{$prefix}stamp-size) * -0.25);
-  right: calc(var(--#{$prefix}stamp-size) * -0.25);
+  inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
   font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
   transform: rotate(10deg);
 
@@ -84,7 +84,7 @@
 .card-img-overlay {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: end;
 }
 
 .card-img-overlay-dark {
@@ -123,7 +123,7 @@
   }
 
   & + & {
-    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
 
@@ -137,8 +137,8 @@ Stacked card
   &:after {
     position: absolute;
     top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-    right: var(--#{$prefix}card-stacked-offset);
-    left: var(--#{$prefix}card-stacked-offset);
+  inset-inline-end: var(--#{$prefix}card-stacked-offset);
+  inset-inline-start: var(--#{$prefix}card-stacked-offset);
     height: var(--#{$prefix}card-stacked-offset);
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +155,9 @@ Stacked card
   &:before {
     position: absolute;
     top: 0;
-    right: 0;
+  inset-inline-end: 0;
     bottom: 0;
-    left: 0;
+  inset-inline-start: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
@@ -176,7 +176,7 @@ Stacked card
 
 .card-actions {
   margin: -0.5rem -0.5rem -0.5rem auto;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 
   a {
     text-decoration: none;
@@ -359,15 +359,15 @@ Card optinos
  */
 .card-options {
   top: 1.5rem;
-  right: 0.75rem;
+  inset-inline-end: 0.75rem;
   display: flex;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .card-options-link {
   display: inline-block;
   min-width: 1rem;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
   color: var(--#{$prefix}secondary);
 }
 
@@ -377,15 +377,15 @@ Card status
 .card-status-top {
   position: absolute;
   top: 0;
-  right: 0;
-  left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
   height: $card-status-size;
   border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
 }
 
 .card-status-start {
   position: absolute;
-  right: auto;
+  inset-inline-end: auto;
   bottom: 0;
   width: $card-status-size;
   height: 100%;
@@ -411,13 +411,13 @@ Card table
     td,
     th {
       &:first-child {
-        padding-left: $card-spacer-x;
-        border-left: 0;
+        padding-inline-start: $card-spacer-x;
+        border-inline-start: 0;
       }
 
       &:last-child {
-        padding-right: $card-spacer-x;
-        border-right: 0;
+        padding-inline-end: $card-spacer-x;
+        border-inline-end: 0;
       }
     }
   }
@@ -428,11 +428,11 @@ Card table
     &:last-child {
       tr:last-child {
         > *:last-child {
-          border-bottom-right-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
+          border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
         > *:first-child {
-          border-bottom-left-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
+          border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
     }
@@ -502,8 +502,8 @@ Card chart
 Card avatar
  */
 .card-avatar {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
 }
@@ -517,10 +517,10 @@ Card list group
   }
 
   .list-group-item {
-    padding-right: $card-spacer-x;
-    padding-left: $card-spacer-x;
-    border-right: 0;
-    border-left: 0;
+    padding-inline-end: $card-spacer-x;
+    padding-inline-start: $card-spacer-x;
+    border-inline-end: 0;
+    border-inline-start: 0;
     border-radius: 0;
 
     &:last-child {
@@ -561,18 +561,18 @@ Card list group
     .nav-item {
       &:not(:first-child) {
         .nav-link {
-          border-top-left-radius: 0;
+          border-start-start-radius: 0;
         }
       }
 
       &:not(:last-child) {
         .nav-link {
-          border-top-right-radius: 0;
+          border-start-end-radius: 0;
         }
       }
 
       + .nav-item {
-        margin-left: calc(-1 * #{$card-border-width});
+        margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
   }
@@ -598,22 +598,22 @@ Card list group
       }
 
       &:not(:first-child) .nav-link {
-        border-bottom-left-radius: 0;
+        border-end-start-radius: 0;
       }
 
       &:not(:last-child) .nav-link {
-        border-bottom-right-radius: 0;
+        border-end-end-radius: 0;
       }
     }
   }
 
   .card {
-    border-bottom-left-radius: 0;
+    border-end-start-radius: 0;
   }
 
   .nav-tabs + .tab-content .card {
-    border-bottom-left-radius: var(--#{$prefix}card-border-radius);
-    border-top-left-radius: 0;
+    border-end-start-radius: var(--#{$prefix}card-border-radius);
+    border-start-start-radius: 0;
   }
 }
 
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index e03a88a71..372660ef4 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -2,7 +2,7 @@
 }
 
 .carousel-indicators-vertical {
-  left: auto;
+  inset-inline-start: auto;
   top: 0;
   margin: 0 1rem 0 0;
   flex-direction: column;
@@ -12,8 +12,8 @@
     width: $carousel-indicator-height;
     height: $carousel-indicator-width;
     border: 0;
-    border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
-    border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+    border-inline-start: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+    border-inline-end: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
   }
 }
 
@@ -59,8 +59,8 @@
 .carousel-caption-background {
   background: red;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   height: 90%;
   background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index d5bd25493..fd6e757a1 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -45,9 +45,9 @@ Chart sparkline
 .chart-sparkline-label {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 3ca63d0bd..7de0de096 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -74,7 +74,7 @@
     content: '';
     position: absolute;
     top: -0.25rem;
-    left: 0.75rem;
+  inset-inline-start: 0.75rem;
     display: block;
     background: inherit;
     width: 14px;
@@ -90,8 +90,8 @@
 
   &.dropdown-menu-end {
     &:before {
-      right: 0.75rem;
-      left: auto;
+  inset-inline-end: 0.75rem;
+  inset-inline-start: auto;
     }
   }
 }
@@ -99,12 +99,12 @@
 .dropend {
   > .dropdown-menu {
     margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
-    margin-left: -0.25rem;
+    margin-inline-start: -0.25rem;
   }
 
   .dropdown-toggle {
     &:after {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
   }
 }
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index 4cc8bada5..194f07a1d 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -15,14 +15,14 @@ Form label
   &.required {
     &:after {
       content: '*';
-      margin-left: 0.25rem;
+      margin-inline-start: 0.25rem;
       color: $red;
     }
   }
 }
 
 .form-label-description {
-  float: right;
+  float: inline-end;
   font-weight: var(--#{$prefix}font-weight-normal);
   color: $form-secondary-color;
 }
@@ -196,11 +196,11 @@ Input group
     }
 
     &:not(:last-child) {
-      border-right: 0;
+      border-inline-end: 0;
     }
 
     &:not(:first-child) {
-      border-left: 0;
+      border-inline-start: 0;
     }
   }
 
@@ -210,13 +210,13 @@ Input group
     @include transition($input-transition);
 
     &:first-child {
-      padding-right: 0;
-      border-right: 0;
+      padding-inline-end: 0;
+      border-inline-end: 0;
     }
 
     &:last-child {
-      padding-left: 0;
-      border-left: 0;
+      padding-inline-start: 0;
+      border-inline-start: 0;
     }
   }
 }
@@ -225,8 +225,8 @@ Input group
 Upload files
  */
 .form-file-button {
-  margin-left: 0;
-  border-left: 0;
+  margin-inline-start: 0;
+  border-inline-start: 0;
 }
 
 /**
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index 5c11306fb..77a164c6d 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -5,7 +5,7 @@
 }
 
 .col-separator {
-  border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 .container {
@@ -19,13 +19,13 @@
 
 @each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
   .row-#{$name} {
-    margin-right: calc(-1 * $value);
-    margin-left: calc(-1 * $value);
+    margin-inline-end: calc(-1 * $value);
+    margin-inline-start: calc(-1 * $value);
 
     > .col,
     > [class*='col-'] {
-      padding-right: $value;
-      padding-left: $value;
+      padding-inline-end: $value;
+      padding-inline-start: $value;
     }
 
     .card {
@@ -106,15 +106,15 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
+      border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
     }
 
     > :not(template):not(:first-child) {
-      padding-left: $size !important;
+      padding-inline-start: $size !important;
     }
 
     > :not(template):not(:last-child) {
-      padding-right: $size !important;
+      padding-inline-end: $size !important;
     }
   }
 }
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 54da004e5..d0ffd4554 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -1,6 +1,6 @@
 .list-group {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 .list-group-header {
@@ -26,8 +26,8 @@
 
 .list-group-item.active {
   background-color: $dropdown-link-hover-bg;
-  border-left-color: $component-active-bg;
-  border-left-width: $border-width-wide;
+  border-inline-start-color: $component-active-bg;
+  border-inline-start-width: $border-width-wide;
 }
 
 .list-group-item {
@@ -110,7 +110,7 @@ Inline list
 }
 
 .list-inline-item:not(:last-child) {
-  margin-right: auto;
+  margin-inline-end: auto;
   margin-inline-end: $list-inline-padding;
 }
 
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index 16e352f4a..4891ee517 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -9,14 +9,14 @@
   &:after {
     position: absolute;
     top: 0;
-    left: 0;
+  inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';
     border: 1px var(--#{$prefix}border-style);
     border-color: transparent;
     border-top-color: currentColor;
-    border-left-color: currentColor;
+    border-inline-start-color: currentColor;
 
     border-radius: $border-radius-pill;
     animation: rotate-360 0.6s linear;
@@ -33,8 +33,8 @@ Dimmer
   .loader {
     position: absolute;
     top: 50%;
-    right: 0;
-    left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
     display: none;
     margin: 0 auto;
     transform: translateY(-50%);
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index 9480bbce8..cc65034f8 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -3,7 +3,7 @@
   > .btn-close {
     position: absolute;
     top: 0;
-    right: 0;
+  inset-inline-end: 0;
     width: $modal-header-height;
     height: $modal-header-height;
     margin: 0;
@@ -27,8 +27,8 @@
 .modal-status {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   height: $modal-status-size;
   background: var(--#{$prefix}secondary);
   border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index a401ecd4c..6208557e4 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -10,9 +10,9 @@
   }
 
   .nav {
-    margin-left: 1.25rem;
-    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    padding-left: 0.5rem;
+    margin-inline-start: 1.25rem;
+    border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    padding-inline-start: 0.5rem;
   }
 
   .nav-link.active,
@@ -34,13 +34,13 @@
 
   .nav-item {
     + .nav-item {
-      margin-left: $nav-bordered-margin-x;
+      margin-inline-start: $nav-bordered-margin-x;
     }
   }
 
   .nav-link {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
@@ -75,7 +75,7 @@
 }
 
 .nav-link-toggle {
-  margin-left: auto;
+  margin-inline-start: auto;
   padding: 0 0.25rem;
   @include transition(transform $transition-time);
   @include caret();
@@ -92,7 +92,7 @@
 .nav-link-icon {
   width: $nav-link-icon-size;
   height: $nav-link-icon-size;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
   color: $nav-link-icon-color;
 
   svg {
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index ab96720ed..48a8fede4 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -20,8 +20,8 @@
 }
 
 .page-text {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
 }
 
 .page-item {
@@ -30,12 +30,12 @@
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
-    text-align: left;
+    text-align: start;
   }
 
   &.page-next {
-    margin-left: auto;
-    text-align: right;
+    margin-inline-start: auto;
+    text-align: end;
   }
 }
 
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 22688500b..af08ec406 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -1,13 +1,13 @@
 @keyframes progress-indeterminate {
   0% {
-    right: 100%;
-    left: -35%;
+  inset-inline-end: 100%;
+  inset-inline-start: -35%;
   }
 
   100%,
   60% {
-    right: -90%;
-    left: 100%;
+  inset-inline-end: -90%;
+  inset-inline-start: 100%;
   }
 }
 
@@ -64,7 +64,7 @@ Progress bar
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 0;
+  inset-inline-start: 0;
     content: '';
     background-color: inherit;
     will-change: left, right;
@@ -99,9 +99,9 @@ Progressbg
 .progressbg-progress {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 0;
   height: 100%;
   background: transparent;
@@ -110,8 +110,8 @@ Progressbg
 
 .progressbg-value {
   font-weight: var(--#{$prefix}font-weight-medium);
-  margin-left: auto;
-  padding-left: 2rem;
+  margin-inline-start: auto;
+  padding-inline-start: 2rem;
 }
 
 /**
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index 524913c7e..813198b25 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -5,7 +5,7 @@
   --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
   position: absolute;
   top: 0.75rem;
-  right: calc(-1 * var(--#{$prefix}ribbon-margin));
+  inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
   z-index: 1;
   padding: 0.25rem 0.75rem;
   font-size: $card-ribbon-font-size;
@@ -25,7 +25,7 @@
 
   &:before {
     position: absolute;
-    right: 0;
+  inset-inline-end: 0;
     bottom: 100%;
     width: 0;
     height: 0;
@@ -34,7 +34,7 @@
     border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
     border-color: inherit;
     border-top-color: transparent;
-    border-right-color: transparent;
+    border-inline-end-color: transparent;
   }
 
   @if $enable-extra-colors {
@@ -58,44 +58,44 @@
 
 .ribbon-top {
   top: calc(-1 * var(--#{$prefix}ribbon-margin));
-  right: 0.75rem;
+  inset-inline-end: 0.75rem;
   width: 2rem;
   padding: 0.5rem 0;
   border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
 
   &:before {
     top: 0;
-    right: 100%;
+  inset-inline-end: 100%;
     bottom: auto;
     border-color: inherit;
     border-top-color: transparent;
-    border-left-color: transparent;
+    border-inline-start-color: transparent;
   }
 
   &.ribbon-start {
-    right: auto;
-    left: 0.75rem;
+  inset-inline-end: auto;
+  inset-inline-start: 0.75rem;
 
     &:before {
       top: 0;
-      right: 100%;
-      left: auto;
+  inset-inline-end: 100%;
+  inset-inline-start: auto;
     }
   }
 }
 
 .ribbon-start {
-  right: auto;
-  left: calc(-1 * var(--#{$prefix}ribbon-margin));
+  inset-inline-end: auto;
+  inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
   border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
 
   &:before {
     top: auto;
     bottom: 100%;
-    left: 0;
+  inset-inline-start: 0;
     border-color: inherit;
     border-top-color: transparent;
-    border-left-color: transparent;
+    border-inline-start-color: transparent;
   }
 }
 
@@ -105,47 +105,47 @@
 }
 
 .ribbon-bookmark {
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
   border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
 
   &:after {
     position: absolute;
     top: 0;
-    right: 100%;
+  inset-inline-end: 100%;
     display: block;
     width: 0;
     height: 0;
     content: '';
     border: 1rem var(--#{$prefix}border-style);
     border-color: inherit;
-    border-right-width: 0;
-    border-left-color: transparent;
-    border-left-width: 0.5rem;
+    border-inline-end-width: 0;
+    border-inline-start-color: transparent;
+    border-inline-start-width: 0.5rem;
   }
 
   &.ribbon-left {
-    padding-right: 0.5rem;
+    padding-inline-end: 0.5rem;
 
     &:after {
-      right: auto;
-      left: 100%;
-      border-right-color: transparent;
+  inset-inline-end: auto;
+  inset-inline-start: 100%;
+      border-inline-end-color: transparent;
 
-      border-right-width: 0.5rem;
-      border-left-width: 0;
+      border-inline-end-width: 0.5rem;
+      border-inline-start-width: 0;
     }
   }
 
   &.ribbon-top {
-    padding-right: 0;
+    padding-inline-end: 0;
     padding-bottom: 0.25rem;
-    padding-left: 0;
+    padding-inline-start: 0;
     border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
 
     &:after {
       top: 100%;
-      right: 0;
-      left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
       border-color: inherit;
       border-width: 1rem;
       border-top-width: 0;
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index 9abd9a9eb..79fd4e5d4 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -79,7 +79,7 @@
   flex-direction: column;
 
   .nav-link {
-    justify-content: flex-start;
+    justify-content: start;
   }
 }
 
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 24b6a974d..7f4831c82 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -4,6 +4,6 @@
   font-size: $h5-font-size;
 
   .star:not(:first-child) {
-    margin-left: 0.25rem;
+    margin-inline-start: 0.25rem;
   }
 }
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index 44e0fcc65..df3add4d6 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -123,7 +123,7 @@
 .status-indicator-circle {
   --#{$prefix}status-circle-size: 0.75rem;
   position: absolute;
-  left: 50%;
+  inset-inline-start: 50%;
   top: 50%;
   margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
   width: var(--#{$prefix}status-circle-size);
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index de18cde56..af5bd167f 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -52,7 +52,7 @@
 
   &:not(:last-child):after {
     position: absolute;
-    left: 50%;
+  inset-inline-start: 50%;
     width: 100%;
     content: '';
     transform: translateY(-50%);
@@ -67,7 +67,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 50%;
+  inset-inline-start: 50%;
     z-index: 1;
     box-sizing: content-box;
     display: flex;
@@ -126,9 +126,9 @@
   }
 
   .step-item {
-    text-align: left;
+    text-align: start;
     padding-top: 0;
-    padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + 1rem);
     min-height: auto;
 
     &:not(:first-child) {
@@ -137,7 +137,7 @@
 
     &:before {
       top: var(--#{$prefix}steps-dot-offset);
-      left: 0;
+  inset-inline-start: 0;
       transform: translate(0, 0);
     }
 
@@ -147,7 +147,7 @@
         content: '';
         transform: translateX(-50%);
         top: var(--#{$prefix}steps-dot-offset);
-        left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+  inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
         width: var(--#{$prefix}steps-border-width);
         height: calc(100% + 1rem);
       }
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index 65d1c9a89..df0d512b9 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -39,7 +39,7 @@
   .switch-icon-b {
     position: absolute;
     top: 0;
-    left: 0;
+  inset-inline-start: 0;
     opacity: 0;
   }
 
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 63efb7c95..4c5316917 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -125,7 +125,7 @@ Table sort
     vertical-align: bottom;
     mask-image: $table-sort-bg-image;
     background: currentColor;
-    margin-left: 0.25rem;
+    margin-inline-start: 0.25rem;
   }
 
   &.asc:after {
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index 2632fd913..dc0ab7c8f 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -11,8 +11,8 @@
   gap: 0.5rem;
 
   .btn-close {
-    margin-right: -0.25rem;
-    margin-left: -0.125rem;
+    margin-inline-end: -0.25rem;
+    margin-inline-start: -0.125rem;
     padding: 0;
     width: 1rem;
     height: 1rem;
@@ -24,7 +24,7 @@
   --#{$prefix}badge-font-size: #{$h6-font-size};
   --#{$prefix}badge-padding-x: 0.25rem;
   --#{$prefix}badge-padding-y: 0.125rem;
-  margin-right: -0.25rem;
+  margin-inline-end: -0.25rem;
 }
 
 .tag-avatar,
@@ -32,12 +32,12 @@
 .tag-payment,
 .tag-icon,
 .tag-check {
-  margin-left: -0.25rem;
+  margin-inline-start: -0.25rem;
 }
 
 .tag-icon {
   color: var(--#{$prefix}secondary);
-  margin-right: -0.125rem;
+  margin-inline-end: -0.125rem;
   width: 1rem;
   height: 1rem;
 }
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index 365adcc1c..ad587f741 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -21,7 +21,7 @@
       content: '';
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
-      left: calc(var(--#{$prefix}timeline-icon-size) / 2);
+  inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
       bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);
@@ -44,7 +44,7 @@
 }
 
 .timeline-event-card {
-  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
+  margin-inline-start: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
 }
 
 //
@@ -56,6 +56,6 @@
   }
 
   .timeline-event-card {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 5ddc0aa22..4975ad53b 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -83,7 +83,7 @@ b {
 
 blockquote {
   padding: 1rem 1rem 1rem;
-  border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
     margin-bottom: 1rem;
@@ -91,7 +91,7 @@ blockquote {
 
   cite {
     display: block;
-    text-align: right;
+    text-align: end;
 
     &:before {
       content: '— ';
@@ -101,7 +101,7 @@ blockquote {
 
 ul,
 ol {
-  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 hr {
@@ -163,7 +163,7 @@ img {
 }
 
 .list-unstyled {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 /**
@@ -258,7 +258,7 @@ Mentions
 
 .mention-count {
   color: var(--#{$prefix}secondary);
-  margin-left: calc(8em / 12);
+  margin-inline-start: calc(8em / 12);
 }
 
 $text-variants: (
@@ -279,10 +279,10 @@ $text-variants: (
 .steps {
   --#{$prefix}steps-padding: 2rem;
   --#{$prefix}steps-item-size: 1.5rem;
-  margin-left: 1rem;
-  padding-left: var(--#{$prefix}steps-padding);
+  margin-inline-start: 1rem;
+  padding-inline-start: var(--#{$prefix}steps-padding);
   counter-reset: step;
-  border-left: 1px solid var(--#{$prefix}border-color);
+  border-inline-start: 1px solid var(--#{$prefix}border-color);
   margin-bottom: 2rem;
 
   h3 {
@@ -297,7 +297,7 @@ $text-variants: (
       display: inline-block;
       position: absolute;
       margin-top: 1px;
-      margin-left: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
+      margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
       width: var(--#{$prefix}steps-item-size);
       height: var(--#{$prefix}steps-item-size);
       text-align: center;
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index 6827d1982..14d4e581d 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -37,7 +37,7 @@ Form check
   &.required {
     &:after {
       content: '*';
-      margin-left: 0.25rem;
+      margin-inline-start: 0.25rem;
       color: $red;
     }
   }
@@ -69,14 +69,14 @@ Form switch
 }
 
 .form-switch-lg {
-  padding-left: 3.5rem;
+  padding-inline-start: 3.5rem;
   min-height: 1.5rem;
 
   .form-check-input {
     height: 1.5rem;
     width: 2.75rem;
     background-size: 1.5rem;
-    margin-left: -3.5rem;
+    margin-inline-start: -3.5rem;
   }
 
   .form-check-label {
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index 026f4faf7..54c9bed90 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -27,7 +27,7 @@ Color Input
   &:before {
     position: absolute;
     top: 0;
-    left: 0;
+  inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index 4c605b4e2..17d699b78 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -6,12 +6,12 @@ Icon input
 
   .form-control:not(:last-child),
   .form-select:not(:last-child) {
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
   }
 
   .form-control:not(:first-child),
   .form-select:not(:last-child) {
-    padding-left: 2.5rem;
+    padding-inline-start: 2.5rem;
   }
 }
 
@@ -19,7 +19,7 @@ Icon input
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 10;
   display: flex;
   align-items: center;
@@ -31,7 +31,7 @@ Icon input
   font-size: 1.2em;
 
   &:last-child {
-    right: 0;
-    left: auto;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
   }
 }
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index d28800295..2fffd8afc 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -34,7 +34,7 @@ Image check
   &:before {
     position: absolute;
     top: 0.25rem;
-    left: 0.25rem;
+  inset-inline-start: 0.25rem;
     z-index: 1;
     display: block;
     width: $form-check-input-width;
@@ -74,13 +74,13 @@ Image check
   @include transition(opacity $transition-time);
 
   &:first-child {
-    border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
-    border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-start-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-start-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   &:last-child {
-    border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
-    border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-end-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 53f6cf38e..2f9524f19 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -24,7 +24,7 @@ Select group
 .form-selectgroup-input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: -1;
   opacity: 0;
 }
@@ -92,7 +92,7 @@ Select group
 .form-selectgroup-check-floated {
   position: absolute;
   top: $input-btn-padding-y;
-  right: $input-btn-padding-y;
+  inset-inline-end: $input-btn-padding-y;
 }
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
@@ -117,7 +117,7 @@ Alternate version of form select group
  */
 .form-selectgroup-boxes {
   .form-selectgroup-label {
-    text-align: left;
+    text-align: start;
     padding: $card-spacer-x $card-spacer-y;
     color: inherit;
   }
@@ -142,7 +142,7 @@ Select group
  */
 .form-selectgroup-pills {
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: start;
 
   .form-selectgroup-item {
     flex-grow: 0;
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index 2b72cb291..a78b823c8 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -24,17 +24,17 @@ Hr text
 
   &:before {
     content: '';
-    margin-right: 0.5rem;
+    margin-inline-end: 0.5rem;
   }
 
   &:after {
     content: '';
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
   }
 
   > *:first-child {
-    padding-right: 0.5rem;
-    padding-left: 0;
+    padding-inline-end: 0.5rem;
+    padding-inline-start: 0;
     color: var(--#{$prefix}secondary);
   }
 
@@ -45,8 +45,8 @@ Hr text
     }
 
     & > *:first-child {
-      padding-right: 0.5rem;
-      padding-left: 0.5rem;
+      padding-inline-end: 0.5rem;
+      padding-inline-start: 0.5rem;
     }
   }
 
@@ -61,8 +61,8 @@ Hr text
     }
 
     & > *:first-child {
-      padding-right: 0;
-      padding-left: 0.5rem;
+      padding-inline-end: 0;
+      padding-inline-start: 0.5rem;
     }
   }
 
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index 96ead5da4..749fb3ab0 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -53,8 +53,8 @@ input.clr-color {
   button {
     width: 1.5rem;
     height: 1.5rem;
-    left: 6px;
-    right: auto;
+  inset-inline-start: 6px;
+  inset-inline-end: auto;
     border-radius: var(--#{$prefix}border-radius);
 
     &:after {
@@ -67,6 +67,6 @@ input.clr-color {
   }
 
   input {
-    padding-left: 2.5rem;
+    padding-inline-start: 2.5rem;
   }
 }
diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss
index a7d2f70ec..24df08014 100644
--- a/core/scss/vendor/_nouislider.scss
+++ b/core/scss/vendor/_nouislider.scss
@@ -34,7 +34,7 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     top: calc($form-range-thumb-height * -0.5);
-    right: calc($form-range-thumb-height * -0.5);
+    inset-inline-end: calc($form-range-thumb-height * -0.5);
     margin: 1px 1px 0 0;
   }