feat(theme): use native CSS for RTL instead of using `rtlcss` package

src/client/theme-default/components/VPDocOutlineItem.vue

@@ -27,8 +27,7 @@ defineProps<{
 }
 
 .nested {
-  padding-inline-end: 16px;
-  padding-inline-start: 16px;
+  padding-inline: 16px;
 }
 
 .outline-link {

src/client/theme-default/components/VPHomeContent.vue

@@ -39,8 +39,7 @@ const { width: vw } = useWindowSize({
 
 .vp-doc :deep(.VPHomeSponsors),
 .vp-doc :deep(.VPTeamPage) {
-  margin-inline-start: var(--vp-offset, calc(50% - 50vw));
-  margin-inline-end: var(--vp-offset, calc(50% - 50vw));
+  margin-inline: var(--vp-offset, calc(50% - 50vw));
 }
 
 .vp-doc :deep(.VPHomeSponsors h2) {

src/client/theme-default/components/VPNavBar.vue

@@ -215,8 +215,7 @@ watchPostEffect(() => {
 .menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
-  margin-inline-end: 8px;
-  margin-inline-start: 8px;
+  margin-inline: 8px;
   width: 1px;
   height: 24px;
   background-color: var(--vp-c-divider);

src/client/theme-default/components/VPSidebar.vue

@@ -124,8 +124,7 @@ watch(
     inset-inline-start: 0;
     z-index: 1;
     margin-block-start: calc(var(--vp-nav-height) * -1);
-    margin-inline-end: -32px;
-    margin-inline-start: -32px;
+    margin-inline: -32px;
     height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }

src/client/theme-default/components/VPSidebarItem.vue

@@ -128,8 +128,7 @@ function onCaretClick() {
 
 .indicator {
   position: absolute;
-  inset-block-start: 6px;
-  inset-block-end: 6px;
+  inset-block: 6px;
   inset-inline-start: -17px;
   width: 2px;
   border-radius: 2px;

src/client/theme-default/styles/components/vp-code-group.css

@@ -45,9 +45,8 @@
 
 .vp-code-group .tabs label::after {
   position: absolute;
-  inset-inline-end: 8px;
+  inset-inline: 8px;
   inset-block-end: -1px;
-  inset-inline-start: 8px;
   z-index: 1;
   height: 2px;
   border-radius: 2px;