Right-to-left

How to activate right-to-left option/conceive right-to-left

1. In the global stylesheet (styles-pm.scss), set $rtl-option: true;, this will enable additionnal styles dedicated to RTL adaptations (and not in design system partials).
2. If an image has a real and important notion of next/previous (ex: an arrow showing something next to it), remember to flip it using mirror class (if mirrored version doesn't already exist).
   Example: becomes with class mirror on it.
3. For SVG sprites used in a CSS, you may create the use adapted to RTL combined with class mirror, ex. <use id="css-search-rtl" xlink:href="#symbol-search" class="black mirror" />
4. To adapt a component that is not yet adapted, do wrap your RTL styles like this:

   .myClass { text-align: left; }
   
   @if $rtl-option == true {
     [dir="rtl"] {
       .myClass { text-align: right; }
     }
   }
   

   This will ensure your module is RTL-ready, but does not load RTL styles if they are not needed for another project.
5. If you need to flip an image in RTL, you have the on-rtl-mirror class helper.