From 9e235fad5722cced7fb46fe0f27a1dbad01b602a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrey=20Ca=C3=B1on?=
 <36200299+andrey-canon@users.noreply.github.com>
Date: Thu, 16 Jul 2026 15:44:30 -0500
Subject: [PATCH] fix(rtl): use CSS logical properties for problem blocks and
 remove hardcoded LTR import (#81)

- Removed the explicit `@import 'vendor/bi-app/bi-app-ltr';` in `_builtin-block-variables.scss` that was overriding RTL configurations.
- Replaced physical CSS properties (`left`, `padding-left`, `margin-right`) with their logical equivalents (`inset-inline-start`, `padding-inline-start`, `margin-inline-end`) in `ProblemBlockDisplay.css` to natively support bidirectional layouts.
---
 common/static/sass/_builtin-block-variables.scss          | 1 -
 xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
index 22c5c259056e..da6eec96ec26 100644
--- a/common/static/sass/_builtin-block-variables.scss
+++ b/common/static/sass/_builtin-block-variables.scss
@@ -12,7 +12,6 @@
 @import 'cms/static/sass/partials/cms/theme/_variables';
 @import 'cms/static/sass/partials/cms/theme/_variables-v1';
 @import 'bootstrap/scss/variables';
-@import 'vendor/bi-app/bi-app-ltr';
 @import 'edx-pattern-library-shims/base/_variables.scss';
 
 :root {
diff --git a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css
index aeb9348048ee..cf6269f92617 100644
--- a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css
+++ b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css
@@ -322,7 +322,7 @@
 .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"],
 .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="checkbox"] {
     margin: calc((var(--baseline, 20px) / 4));
-    margin-right: calc((var(--baseline, 20px) / 2));
+    margin-inline-end: calc((var(--baseline, 20px) / 2));
 }
 
 .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label,
@@ -885,7 +885,7 @@
 
 .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label {
     padding: calc((var(--baseline, 20px) / 2));
-    padding-left: calc((var(--baseline, 20px) * 2.3));
+    padding-inline-start: calc((var(--baseline, 20px) * 2.3));
     position: relative;
     font-size: var(--base-font-size, 18px);
     line-height: normal;
@@ -894,7 +894,7 @@
 
 .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"],
 .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] {
-    left: 0.5625em;
+    inset-inline-start: 0.5625em;
     position: absolute;
     top: 0.43em;
     width: calc(var(--baseline, 20px) * 1.1);