Issue #3518192 by joville, igorgoncalves, sandip, ressa: Dropdown does not...

Issue #3518192 by joville, igorgoncalves, sandip, ressa: Dropdown does not show desired arrow on open state

core/themes/olivero/css/components/dropbutton.css

@@ -75,6 +75,10 @@
   outline-offset: -2px;
 }
 
+.dropbutton-toggle button:dir(rtl) {
+  border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+}
+
 .dropbutton-toggle button::before {
   display: block;
   width: var(--sp0-5);
@@ -85,14 +89,10 @@
   border-bottom: solid 2px var(--dropbutton--outline-color);
 }
 
-.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) {
+.dropbutton-wrapper.open :is(.dropbutton-toggle button)::before {
   transform: translateY(25%) rotate(225deg);
 }
 
-.dropbutton-toggle button:dir(rtl) {
-  border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
-}
-
 /* This is the first <li> element in the list of actions. */
 
 .dropbutton-action:first-child {

core/themes/olivero/css/components/dropbutton.pcss.css

@@ -66,6 +66,10 @@
     outline-offset: -2px;
   }
 
+  &:dir(rtl) {
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+  }
+
   &::before {
     display: block;
     width: var(--sp0-5);
@@ -74,15 +78,13 @@
     transform: translateY(-25%) rotate(45deg);
     border-right: solid 2px var(--dropbutton--outline-color);
     border-bottom: solid 2px var(--dropbutton--outline-color);
+  }
 
   .dropbutton-wrapper.open & {
+    &::before {
       transform: translateY(25%) rotate(225deg);
     }
   }
-
-  &:dir(rtl) {
-    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
-  }
 }
 
 /* This is the first <li> element in the list of actions. */