/* ==============================================================================
   RTL (Right-to-Left) SUPPORT
   ==============================================================================
   The component is authored with CSS *logical properties* (margin-inline-*,
   inset-inline-*, border-*-start/end, text-align: start/end, …) throughout, so
   almost all RTL mirroring happens automatically once `direction: rtl` is in
   effect. Direction reaches every part of the component by inheritance: the host
   carries `dir="rtl"` (set from the `dir` attribute / an RTL ancestor, see
   multiselect.ts), and that inherits into the Shadow DOM — including the dropdown,
   hint, and selected-popover, which are appended to the shadow root rather than
   under the `.ms--rtl` container. That containment is exactly why the old
   `.ms--rtl .ms__dropdown …` override rules could never match; logical properties
   sidestep it entirely. Prefer logical properties in the feature files over adding
   rules here.

   What remains here is the ONE thing logical properties don't express: the
   `badges-position` / count-display **placement**, which is a deliberate physical
   side choice ("left" / "right") that the component mirrors at the CLASS level in
   JS (effectiveBadgesPosition swaps left↔right under RTL). These rules re-home the
   inline margin for the mirrored class so the group hugs the input on the correct
   side.
*/

/* ==============================================================================
   BADGES PLACEMENT (physical side, mirrored in JS)
   ============================================================================== */

.ms--rtl .ms__badges {
  direction: rtl;
}

/* In RTL, visual left/right are swapped, so the inline margin moves to the
   opposite side from the LTR rule. */
.ms--rtl .ms__badges--right {
  margin-left: 0;
  margin-right: var(--ms-badges-margin-right);
}

.ms--rtl .ms__badges--left {
  margin-right: 0;
  margin-left: var(--ms-badges-margin-left);
}

/* ==============================================================================
   COUNT-DISPLAY PLACEMENT (physical side, mirrored in JS)
   ============================================================================== */

.ms--rtl .ms__count-display {
  direction: rtl;
}

.ms--rtl .ms__count-display--right {
  margin-left: 0;
  margin-right: var(--ms-count-display-margin-right);
}

.ms--rtl .ms__count-display--left {
  margin-right: 0;
  margin-left: var(--ms-count-display-margin-left);
}