From 54083dc661039ce3aa4d4cb65265eeadbd88da83 Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Wed, 27 Jul 2022 22:36:22 +0200
Subject: [PATCH] improve rtl styling

---
 packages/overlayscrollbars/src/classnames.ts         |  1 +
 .../src/setups/scrollbarsSetup/scrollbarsSetup.ts    |  4 +++-
 .../overlayscrollbars/src/styles/scrollbars.scss     | 12 ++++++------
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts
index 78a3642..723adc8 100644
--- a/packages/overlayscrollbars/src/classnames.ts
+++ b/packages/overlayscrollbars/src/classnames.ts
@@ -25,6 +25,7 @@ export const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverLi
 export const classNameTrinsicObserver = 'os-trinsic-observer';
 
 export const classNameScrollbar = 'os-scrollbar';
+export const classNameScrollbarRtl = `${classNameScrollbar}-rtl`;
 export const classNameScrollbarHorizontal = `${classNameScrollbar}-horizontal`;
 export const classNameScrollbarVertical = `${classNameScrollbar}-vertical`;
 export const classNameScrollbarTrack = `${classNameScrollbar}-track`;
diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
index 96cafe1..e7f1897 100644
--- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
+++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
@@ -24,6 +24,7 @@ import {
   classNamesScrollbarAutoHidden,
   classNamesScrollbarHandleInteractive,
   classNamesScrollbarTrackInteractive,
+  classNameScrollbarRtl,
 } from 'classnames';
 import type { StructureSetupUpdateHints } from 'setups/structureSetup/structureSetup.update';
 import type {
@@ -181,7 +182,7 @@ export const createScrollbarsSetup = (
       } = structureUpdateHints;
       const checkOption = createOptionCheck(options, changedOptions, force);
       const currStructureSetupState = structureSetupState();
-      const { _overflowAmount, _overflowStyle } = currStructureSetupState;
+      const { _overflowAmount, _overflowStyle, _directionIsRTL } = currStructureSetupState;
       const [theme, themeChanged] = checkOption<string | null>('scrollbars.theme');
       const [visibility, visibilityChanged] =
         checkOption<ScrollbarVisibilityBehavior>('scrollbars.visibility');
@@ -234,6 +235,7 @@ export const createScrollbarsSetup = (
 
         scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
         scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
+        scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL);
       }
     },
     scrollbarsSetupState,
diff --git a/packages/overlayscrollbars/src/styles/scrollbars.scss b/packages/overlayscrollbars/src/styles/scrollbars.scss
index 9f0457e..9a86296 100644
--- a/packages/overlayscrollbars/src/styles/scrollbars.scss
+++ b/packages/overlayscrollbars/src/styles/scrollbars.scss
@@ -44,10 +44,10 @@ body > .os-scrollbar {
   top: 0;
   right: 0;
 }
-.os-scrollbar-horizontal-rtl {
+.os-scrollbar-rtl.os-scrollbar-horizontal {
   right: 0;
 }
-.os-scrollbar-vertical-rtl {
+.os-scrollbar-rtl.os-scrollbar-vertical {
   right: auto;
   left: 0;
 }
@@ -95,8 +95,8 @@ THEMES:
   bottom: 10px;
   width: 10px;
 }
-.os-theme-dark.os-scrollbar-horizontal-rtl,
-.os-theme-light.os-scrollbar-horizontal-rtl {
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
   left: 10px;
   right: 0;
 }
@@ -175,8 +175,8 @@ THEMES:
   left: -6px;
   right: -2px;
 }
-.os-theme-dark.os-scrollbar-vertical-rtl .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-vertical-rtl .os-scrollbar-handle:before {
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
   right: -6px;
   left: -2px;
 }