fix: Logical properties improve rtl support

[drmason13]

This is similar to #560 by shuuji3 but it edits the scss files, runs the build to generate css and isn't limited to only left/right properties. It modifies top/bottom properties too.

I haven't tested I'm afraid, but I believe this will fix #591 (albeit, the button will still be on the "wrong" side, the order of HTML elements being reversed is intended behavior.)

First time contributing, so let me know if I can clean up the commits (probably wants squashing) to improve this.

And finally, thank you for this framework, it is very beautiful with good semantics.

FYI: this is a find/replace job if you want to do this yourself:

• s/border-top-left-/border-start-start-/
• s/border-top-right-/border-end-start-/
• s/border-bottom-left-/border-start-end-/
• s/border-bottom-right-/border-end-end-/
• s/-left:/-inline-start:/
• s/-right:/-inline-end:/
• s/-top:/-block-start:/
• s/-bottom:/-block-end:/
• s/text-align: left/text-align: start/
• s/text-align: right/text-align: end/

There's probably a postcss plugin for this now that I think about it. And yeah, the border-radius logical properties do look backwards but they're correct: https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius

[SRachamim]

Is this code review in progress? How can I help progress it?

[ssevertson]

Would it make sense to also rename the Pico variables matching --*-spacing-horizontal, --*-spacing-vertical, and --*-spacing-top to --*-spacing-inline, --*-spacing-block, and --*-spacing-block-start, respectively?

I'm using @drmason13's PR for a project, and in my mind, this additional change would complete the conversion from physical layout to logical layout.