Support RTL languages in the provided CSS

[delucis]

Describe the problem

Some languages, like Arabic, Hebrew, and Farsi among others, are written from right-to-left instead of left-to-right. Readers of “RTL” languages expect designs to follow that direction much like readers of “LTR” languages expect designs to flow in the direction of text.

The provided CSS often works poorly for RTL languages. With margins and paddings on the wrong sides of elements.

Describe the solution

We can use CSS logical properties like margin-inline-start instead of margin-left or inset-inline-end instead of right to set styles that are aware of writing direction. This allows the same styles to be used across LTR and RTL languages, just by setting a dir attribute to a parent element with the appropriate direction.

Alternatives you've considered

You could choose to toggle RTL styles via some other method either by overriding styles on .DocSearch-Container[dir="rtl"] or something and requiring the direction to be set that way. It’s more verbose and more complex to maintain but would be an alternative.