From 9c259018d52cd07d6dac45b72fb33d1b27865d15 Mon Sep 17 00:00:00 2001
From: brian teeman <brian@teeman.net>
Date: Sat, 13 Nov 2021 22:32:33 +0000
Subject: [PATCH 1/2] [4.0] Fancy selectbox fix

This is a replacement to the merged PR #30739

It does exactly the same thing but by using css logical properties we avoid the need to maintain both an LTR and an RTL version

There is no visual change.
---
 .../atum/scss/vendor/choicesjs/choices.scss         | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
index dd24671cd63d5..fc8fb0927d867 100644
--- a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
+++ b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
@@ -141,22 +141,15 @@
   .choices__button_joomla {
     position: absolute;
     top: 50%;
-    right: 0;
+    inset-inline-end: 0;
     width: 20px;
     height: 20px;
     padding: 0;
-    margin-top: -10px;
-    margin-right: 50px;
+    margin-block-start: -10px;
+    margin-inline-end: 50px;
     border-radius: 10em;
     opacity: .5;
 
-    [dir=rtl] & {
-      right: auto;
-      left: 0;
-      margin-right: 0;
-      margin-left: 50px;
-    }
-
     &:hover,
     &:focus {
       opacity: 1;

From b28279754dab33ee3dd932b3be5476233c8e7969 Mon Sep 17 00:00:00 2001
From: brian teeman <brian@teeman.net>
Date: Sun, 14 Nov 2021 16:20:25 +0000
Subject: [PATCH 2/2] same for cassiopeia

---
 .../cassiopeia/scss/vendor/choicesjs/choices.scss   | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/templates/cassiopeia/scss/vendor/choicesjs/choices.scss b/templates/cassiopeia/scss/vendor/choicesjs/choices.scss
index e5ff671689867..32b138c385fe3 100644
--- a/templates/cassiopeia/scss/vendor/choicesjs/choices.scss
+++ b/templates/cassiopeia/scss/vendor/choicesjs/choices.scss
@@ -136,22 +136,15 @@
   .choices__button_joomla {
     position: absolute;
     top: 50%;
-    right: 0;
+    inset-inline-end: 0;
     width: 20px;
     height: 20px;
     padding: 0;
-    margin-top: -10px;
-    margin-right: 50px;
+    margin-block-start: -10px;
+    margin-inline-end: 50px;
     border-radius: 10em;
     opacity: .5;
 
-    [dir=rtl] & {
-      right: auto;
-      left: 0;
-      margin-right: 0;
-      margin-left: 50px;
-    }
-
     &:hover,
     &:focus {
       opacity: 1;