diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss index 6e61524f08..ba02d29a9e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon.scss @@ -209,3 +209,8 @@ $-icon-beside-type: ( --background-color: #{sage-color-combo($-color, default, background)}; } } + +// flip icons with directional names for RTL - MUST LIVE IN PINE +[dir="rtl"] pds-icon[name*="left"], [dir="rtl"] pds-icon[name*="right"] { + transform: scale(-1); +} diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 3d326c5707..fbf1afc1f4 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -78,10 +78,6 @@ .sage-link--icon-right-#{$icon-name} { flex-direction: row-reverse; - [dir="rtl"] & { - flex-direction: row; - } - &::before { @include sage-icon-base($icon-name, md, pine); @@ -101,10 +97,6 @@ .sage-link--icon-left-#{$icon-name} { flex-direction: row; - [dir="rtl"] & { - flex-direction: row-reverse; - } - &::before { @include sage-icon-base($icon-name, md, pine);