Fix outstanding quirks with RTL mode after converting to CSS Logical Proeprties

[tw15egan]

Refs #14580

• - Checkbox - Skeleton example
  When using the margin in this format: margin: 1px 1px 1px 1px the values don’t get translate to “RTL”. Maybe we won't be able to use this method to write margin, padding, etc...

• - CodeSnippet - Multiline, Singleline
  Horizontal scrollbar getting a blur in the left and right side

• - Pagination
  Those arrow should change directions? I search a little bit and found these examples: 

  https://github.com/mui/mui-x/issues/8665

  https://bootstrap.rtlcss.com/docs/4.0/components/pagination/#working-with-icons
  From my understanding it shouldn’t, or am I wrong? Take PaginationNav as an example maybe. There the arrows kept the directions

• - ProgressBar
  The ProgressBar should switch the side where it starts or kept the same side (left)

• - Slider
  Seems like the Slider is getting the wrong value, maybe a logic would have to be written to switch the max and min values when in RTL mode (idk if we can track that in JS).

Originally posted by @guidari in #14580 (review)