From b709799279331aa71b091a62fbd44fdb96e0c627 Mon Sep 17 00:00:00 2001
From: heorhi-deriv <heorhi@binary.com>
Date: Fri, 4 Oct 2024 10:09:41 +0300
Subject: [PATCH] fix: :lipstick: add RTL mixin, improve Breadcrumbs styles

---
 src/components/Breadcrumbs/Breadcrumbs.scss | 29 +++++++++++++++------
 src/components/Breadcrumbs/index.tsx        | 17 +++++++-----
 src/styles/abstracts/_layout.scss           |  7 +++++
 src/styles/index.scss                       |  1 +
 4 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 src/styles/abstracts/_layout.scss

diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
index 7c7551bd..98208020 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -1,31 +1,40 @@
 .deriv-breadcrumbs {
+    width: 100%;
     margin: 0;
     padding: 0;
 
     &__item {
         float: left;
         list-style-type: none;
-    }
 
-    &__text {
-        color: var(--du-text-less-prominent, #999999);
-
-        &--active {
-            color: var(--du-text-prominent, #333333);
+        @include rtl {
+            float: right;
         }
 
         &:not(:last-child) {
             cursor: pointer;
 
-            &:hover {
+            .deriv-breadcrumbs__text:hover {
                 color: var(--du-text-general, #333333);
             }
         }
     }
 
+    &__text {
+        color: var(--du-text-less-prominent, #999999);
+
+        &--active {
+            color: var(--du-text-prominent, #333333);
+        }
+    }
+
+    &__separator-container {
+        cursor: default;
+    }
+
     &__chevron-icon {
         margin: 0 5px;
-        vertical-align: middle;
+        vertical-align: sub;
 
         path {
             fill: var(--du-text-less-prominent, #999999);
@@ -34,5 +43,9 @@
         @include mobile {
             margin: 0 2.5px;
         }
+
+        @include rtl {
+            transform: rotate(180deg);
+        }
     }
 }
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
index d70bf7f7..0b5fdd58 100644
--- a/src/components/Breadcrumbs/index.tsx
+++ b/src/components/Breadcrumbs/index.tsx
@@ -43,13 +43,16 @@ export const Breadcrumbs = ({
                         >
                             {item.text}
                         </Text>
-                        {!isLastItem &&
-                            (separator ?? (
-                                <LegacyChevronRight1pxIcon
-                                    className="deriv-breadcrumbs__chevron-icon"
-                                    iconSize="xs"
-                                />
-                            ))}
+                        {!isLastItem && (
+                            <span className="deriv-breadcrumbs__separator-container">
+                                {separator || (
+                                    <LegacyChevronRight1pxIcon
+                                        className="deriv-breadcrumbs__chevron-icon"
+                                        iconSize="xs"
+                                    />
+                                )}
+                            </span>
+                        )}
                     </li>
                 );
             })}
diff --git a/src/styles/abstracts/_layout.scss b/src/styles/abstracts/_layout.scss
new file mode 100644
index 00000000..a11ecbcf
--- /dev/null
+++ b/src/styles/abstracts/_layout.scss
@@ -0,0 +1,7 @@
+/*RTL Language Mixin*/
+
+@mixin rtl {
+    [dir="rtl"] & {
+        @content;
+    }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c8936e0c..48b22d6a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,5 @@
 @import "./base/reset";
+@import "./abstracts/layout";
 @import "./abstracts/variables";
 @import "./abstracts/typography";
 @import "./abstracts/devices";