Bidi support: The tick is inverted in Carbon Checkbox component with RTLCSS

[DavidSCChen]

Bidi support: The tick is inverted in Carbon Checkbox component with RTLCSS.

What package(s) are you using?

• carbon-components
• carbon-components-react
• @carbon/icons-react

Detailed description

Describe in detail the issue you're having.
While using the RTLCSS to address bidi layout issues, found that the tick in the checkbox is inverted, the tick should be kept from left to right.

Is this issue related to a specific component?
Checkbox

What did you expect to happen? What happened instead? What would you like to
see changed?
Expect the tick is from left to right that same as the LTR layout, but the tick became right to left with RTLCSS, and would like to see the tick from left to right while the CSS was processed by RTLCSS.

What browser are you working in?
Firefox 84.0.1 & Chrome 87.0.4280.141

What version of the Carbon Design System are you using?
10.26.0

Steps to reproduce the issue

1. Create a Checkbox component
2. Process the carbon-components.min.css with RTLCSS

Codesandbox in React:
https://codesandbox.io/s/webpack-react-rtlcss-carbon-checkbox-v4i6z

Additional information

• Checkbox with RTLCSS:
  

• Expected Checkbox: