Fix leftover physical CSS properties that break RTL layout (#2846)

Co-authored-by: codecalm <codecalm@gmail.com>

core/scss/ui/_cards.scss

@@ -209,7 +209,8 @@ Stacked card
 .card-actions {
   --card-actions-gutter: #{$card-actions-gutter};
   padding-inline-start: var(--card-actions-gutter);
-  margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
+  margin-block: calc(-1 * var(--card-actions-gutter));
+  margin-inline: auto calc(-1 * var(--card-actions-gutter));
 
   a {
     text-decoration: none;
@@ -347,7 +348,8 @@ Stacked card
   }
 
   .card-title & {
-    margin: 0 0 0 var(--card-subtitle-margin-start);
+    margin-block: 0;
+    margin-inline: var(--card-subtitle-margin-start) 0;
     font-size: $h4-font-size;
   }
 }

core/scss/ui/_carousel.scss

@@ -6,7 +6,8 @@
   inset-inline-start: auto;
   top: 0;
   flex-direction: column;
-  margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
+  margin-block: 0;
+  margin-inline: 0 var(--carousel-indicators-vertical-margin-inline-end);
 
   [data-bs-target],
   [data-target] {

core/scss/ui/_lists.scss

@@ -111,11 +111,6 @@ Inline list
   margin: 0;
 }
 
-.list-inline-item:not(:last-child) {
-  margin-inline-end: auto;
-  margin-inline-end: $list-inline-padding;
-}
-
 .list-inline-dots {
   .list-inline-item + .list-inline-item::before {
     margin-inline-end: $list-inline-padding;

core/scss/ui/_modals.scss

@@ -39,7 +39,8 @@
 .modal-header {
   align-items: center;
   min-height: $modal-header-height;
-  padding: 0 $modal-header-height 0 $modal-inner-padding;
+  padding-block: 0;
+  padding-inline: $modal-inner-padding $modal-header-height;
   background: $modal-header-bg;
 }
 

core/scss/ui/_progress.scss

@@ -69,7 +69,7 @@ Progress bar
     bottom: 0;
     content: '';
     background-color: inherit;
-    will-change: left, right;
+    will-change: inset-inline-start, inset-inline-end;
   }
 
   &::before {

core/scss/ui/_ribbons.scss

@@ -136,7 +136,7 @@
     border-inline-end-width: 0;
   }
 
-  &.ribbon-left {
+  &.ribbon-start {
     padding-inline-end: var(--ribbon-bookmark-notch-width);
 
     &::after {

core/scss/vendor/_nouislider.scss

@@ -37,7 +37,8 @@
     top: calc($form-range-thumb-height * -0.5);
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    margin: 1px 1px 0 0;
+    margin-block: 1px 0;
+    margin-inline: 0 1px;
   }
 
   &.noUi-active,