From f3885aa7c3dd2aac2905f2a98b100d2578f6b6d5 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Tue, 18 Nov 2025 14:16:26 +0200
Subject: [PATCH] feat(theme): use native CSS for RTL instead of using `rtlcss`
 package

---
 src/client/theme-default/components/VPSidebarItem.vue | 2 +-
 src/client/theme-default/styles/components/vp-doc.css | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 7c3e5b60..934db177 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -232,7 +232,7 @@ function onCaretClick() {
 }
 
 .VPSidebarItem.collapsed .caret-icon {
-  transform: rotate(0)/*rtl:rotate(180deg)*/;
+  scale: calc(1 * var(--vp-direction-multiplier)) 1; /* Flip in RTL */
 }
 
 .VPSidebarItem.level-1 .items,
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 59a567cc..d0a67d11 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -317,7 +317,6 @@
   padding: 20px 0;
   background: transparent;
   overflow-x: auto;
-  /*rtl:ignore*/
   text-align: start;
 }
 
@@ -554,7 +553,7 @@
   --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
   -webkit-mask-image: var(--icon);
   mask-image: var(--icon);
-  /*rtl:raw:transform: scaleX(-1);*/
+  scale: calc(1 * var(--vp-direction-multiplier)) 1; /* Flip in RTL */
 }
 
 .vp-external-link-icon::after {