diff --git a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue
index c286640bf3ff..457eab584fab 100644
--- a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue
+++ b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue
@@ -50,15 +50,16 @@ function removeSpaces(str: string) {
 }
 
 .VPApiPreference:first-child {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .VPApiPreference:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .VPApiPreference.screen-menu {
-  margin: 12px 0 0 12px;
+  margin-block: 12px 0;
+  margin-inline: 12px 0;
 }
 
 .VPApiPreference input[type='radio'] {
diff --git a/__tests__/unit/node/markdown/plugins/snippet.test.ts b/__tests__/unit/node/markdown/plugins/snippet.test.ts
index aa940784a0f3..f0704fe80657 100644
--- a/__tests__/unit/node/markdown/plugins/snippet.test.ts
+++ b/__tests__/unit/node/markdown/plugins/snippet.test.ts
@@ -208,16 +208,16 @@ describe('node/markdown/plugins/snippet', () => {
       const lines = [
         '.body-content {',
         '/* #region foo */',
-        '  padding-left: 15px;',
+        '  padding-inline-start: 15px;',
         '/* #endregion foo */',
-        '  padding-right: 15px;',
+        '  padding-inline-end: 15px;',
         '}'
       ]
       const result = findRegion(lines, 'foo')
       expect(result).not.toBeNull()
       if (result) {
         expect(lines.slice(result.start, result.end).join('\n')).toBe(
-          '  padding-left: 15px;'
+          '  padding-inline-start: 15px;'
         )
       }
     })
diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue
index 93dbab8f641f..58e9e76476e8 100644
--- a/docs/components/ModalDemo.vue
+++ b/docs/components/ModalDemo.vue
@@ -26,8 +26,8 @@ const showModal = ref(false)
 .modal-mask {
   position: fixed;
   z-index: 200;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -48,8 +48,8 @@ const showModal = ref(false)
 }
 
 .model-footer {
-  margin-top: 8px;
-  text-align: right;
+  margin-block-start: 8px;
+  text-align: end;
 }
 
 .modal-button {
diff --git a/docs/ru/components/ModalDemo.vue b/docs/ru/components/ModalDemo.vue
index 85c9dec127b3..54c580f9f2fa 100644
--- a/docs/ru/components/ModalDemo.vue
+++ b/docs/ru/components/ModalDemo.vue
@@ -28,8 +28,8 @@ const showModal = ref(false)
 .modal-mask {
   position: fixed;
   z-index: 200;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -50,8 +50,8 @@ const showModal = ref(false)
 }
 
 .model-footer {
-  margin-top: 8px;
-  text-align: right;
+  margin-block-start: 8px;
+  text-align: end;
 }
 
 .modal-button {
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
index f65d3a6db458..a2dd2ceba0aa 100644
--- a/src/client/theme-default/NotFound.vue
+++ b/src/client/theme-default/NotFound.vue
@@ -50,7 +50,7 @@ const { currentLang } = useLangs()
 }
 
 .title {
-  padding-top: 12px;
+  padding-block-start: 12px;
   letter-spacing: 2px;
   line-height: 20px;
   font-size: 20px;
@@ -73,7 +73,7 @@ const { currentLang } = useLangs()
 }
 
 .action {
-  padding-top: 20px;
+  padding-block-start: 20px;
 }
 
 .link {
diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue
index 8b0757d40122..e28437a1d3af 100644
--- a/src/client/theme-default/components/VPBackdrop.vue
+++ b/src/client/theme-default/components/VPBackdrop.vue
@@ -13,12 +13,7 @@ defineProps<{
 <style scoped>
 .VPBackdrop {
   position: fixed;
-  top: 0;
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
   transition: opacity 0.5s;
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 8c80fe931738..1669b7a40f8c 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
 <style>
 .VPBadge {
   display: inline-block;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 0 10px;
@@ -40,12 +40,12 @@ withDefaults(defineProps<Props>(), {
 }
 
 .vp-doc h1 > .VPBadge {
-  margin-top: 4px;
+  margin-block-start: 4px;
   vertical-align: top;
 }
 
 .vp-doc h2 > .VPBadge {
-  margin-top: 3px;
+  margin-block-start: 3px;
   padding: 0 8px;
   vertical-align: top;
 }
diff --git a/src/client/theme-default/components/VPCarbonAds.vue b/src/client/theme-default/components/VPCarbonAds.vue
index a233d1eff02f..acd9e0b43a72 100644
--- a/src/client/theme-default/components/VPCarbonAds.vue
+++ b/src/client/theme-default/components/VPCarbonAds.vue
@@ -76,7 +76,7 @@ if (carbonOptions) {
 .VPCarbonAds :deep(.carbon-text) {
   display: block;
   margin: 0 auto;
-  padding-top: 12px;
+  padding-block-start: 12px;
   color: var(--vp-carbon-ads-text-color);
   transition: color 0.25s;
 }
@@ -87,7 +87,7 @@ if (carbonOptions) {
 
 .VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
-  padding-top: 6px;
+  padding-block-start: 6px;
   font-size: 11px;
   font-weight: 500;
   color: var(--vp-carbon-ads-poweredby-color);
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index b0eb5fc8de51..b8374b466ee5 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -77,19 +77,19 @@ const { isHome, hasSidebar } = useLayout()
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-block-start: var(--vp-nav-height);
   }
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 }
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2);
+    padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 4ac18bd93d91..62a7a6f0e276 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -121,21 +121,21 @@ const pageName = computed(() =>
   display: none;
   order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  padding-inline-start: 32px;
   width: 100%;
   max-width: 256px;
 }
 
 .left-aside {
   order: 1;
-  padding-left: unset;
-  padding-right: 32px;
+  padding-inline-start: unset;
+  padding-inline-end: 32px;
 }
 
 .aside-container {
   position: fixed;
-  top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  inset-block-start: 0;
+  padding-block-start: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
   width: 224px;
   height: 100vh;
   overflow-x: hidden;
@@ -149,7 +149,7 @@ const pageName = computed(() =>
 
 .aside-curtain {
   position: fixed;
-  bottom: 0;
+  inset-block-end: 0;
   z-index: 10;
   width: 224px;
   height: 32px;
@@ -161,7 +161,7 @@ const pageName = computed(() =>
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
-  padding-bottom: 32px;
+  padding-block-end: 32px;
 }
 
 .content {
diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue
index 314e8a4b5d73..1df2fe1c2fc0 100644
--- a/src/client/theme-default/components/VPDocAside.vue
+++ b/src/client/theme-default/components/VPDocAside.vue
@@ -37,10 +37,10 @@ const { theme } = useData()
 
 .VPDocAside :deep(.spacer + .VPDocAsideSponsors),
 .VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index efaadc095275..a038990893dc 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -50,16 +50,16 @@ useActiveAnchor(container, marker)
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 16px;
   font-size: 13px;
   font-weight: 500;
 }
 
 .outline-marker {
   position: absolute;
-  top: 32px;
-  left: -1px;
+  inset-block-start: 32px;
+  inset-inline-start: -1px;
   z-index: 0;
   opacity: 0;
   width: 2px;
@@ -67,7 +67,7 @@ useActiveAnchor(container, marker)
   height: 18px;
   background-color: var(--vp-c-brand-1);
   transition:
-    top 0.25s cubic-bezier(0, 1, 0.5, 1),
+    inset-block-start 0.25s cubic-bezier(0, 1, 0.5, 1),
     background-color 0.5s,
     opacity 0.25s;
 }
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 0b6ff2a885d6..1d17846c41fe 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -80,11 +80,11 @@ const showFooter = computed(
 
 <style scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-block-start: 64px;
 }
 
 .edit-info {
-  padding-bottom: 18px;
+  padding-block-end: 18px;
 }
 
 @media (min-width: 640px) {
@@ -92,7 +92,7 @@ const showFooter = computed(
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 14px;
+    padding-block-end: 14px;
   }
 }
 
@@ -112,12 +112,12 @@ const showFooter = computed(
 }
 
 .edit-link-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  border-block-start: 1px solid var(--vp-c-divider);
+  padding-block-start: 24px;
   display: grid;
   grid-row-gap: 8px;
 }
@@ -144,8 +144,8 @@ const showFooter = computed(
 }
 
 .pager-link.next {
-  margin-left: auto;
-  text-align: right;
+  margin-inline-start: auto;
+  text-align: end;
 }
 
 .desc {
diff --git a/src/client/theme-default/components/VPDocOutlineItem.vue b/src/client/theme-default/components/VPDocOutlineItem.vue
index 4cff1b3849d0..89ac9c597fbe 100644
--- a/src/client/theme-default/components/VPDocOutlineItem.vue
+++ b/src/client/theme-default/components/VPDocOutlineItem.vue
@@ -27,8 +27,7 @@ defineProps<{
 }
 
 .nested {
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-inline: 16px;
 }
 
 .outline-link {
@@ -50,6 +49,6 @@ defineProps<{
 }
 
 .outline-link.nested {
-  padding-left: 13px;
+  padding-inline-start: 13px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index ff36fe978b0b..9032168487ac 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -74,14 +74,14 @@ defineProps<{
 }
 
 .box > :deep(.VPImage) {
-  margin-bottom: 20px;
+  margin-block-end: 20px;
 }
 
 .icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  margin-block-end: 20px;
   border-radius: 6px;
   background-color: var(--vp-c-default-soft);
   width: 48px;
@@ -98,7 +98,7 @@ defineProps<{
 
 .details {
   flex-grow: 1;
-  padding-top: 8px;
+  padding-block-start: 8px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
@@ -106,7 +106,7 @@ defineProps<{
 }
 
 .link-text {
-  padding-top: 8px;
+  padding-block-start: 8px;
 }
 
 .link-text-value {
@@ -118,6 +118,6 @@ defineProps<{
 }
 
 .link-text-icon {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index c05c579cfe23..4c6c0f6b8144 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -112,12 +112,12 @@ function onBlur() {
 }
 
 .option-icon {
-  margin-right: 0px;
+  margin-inline-end: 0px;
   font-size: 16px;
 }
 
 .text-icon {
-  margin-left: 4px;
+  margin-inline-start: 4px;
   font-size: 14px;
 }
 
@@ -128,8 +128,8 @@ function onBlur() {
 
 .menu {
   position: absolute;
-  top: calc(var(--vp-nav-height) / 2 + 20px);
-  right: 0;
+  inset-block-start: calc(var(--vp-nav-height) / 2 + 20px);
+  inset-inline-end: 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index 636380448810..d1f088fd006f 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -19,7 +19,7 @@ const { hasSidebar } = useLayout()
 .VPFooter {
   position: relative;
   z-index: var(--vp-z-index-footer);
-  border-top: 1px solid var(--vp-c-gutter);
+  border-block-start: 1px solid var(--vp-c-gutter);
   padding: 32px 24px;
   background-color: var(--vp-c-bg);
 }
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 4e1e2e9b083e..06a2204c5be1 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -68,7 +68,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 
 <style scoped>
 .VPHero {
-  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  margin-block-start: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
   padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
@@ -111,7 +111,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 
 @media (min-width: 960px) {
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: start;
   }
 }
 
@@ -181,7 +181,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 }
 
 .tagline {
-  padding-top: 8px;
+  padding-block-start: 8px;
   max-width: 392px;
   line-height: 28px;
   font-size: 18px;
@@ -196,7 +196,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 
 @media (min-width: 640px) {
   .tagline {
-    padding-top: 12px;
+    padding-block-start: 12px;
     max-width: 576px;
     line-height: 32px;
     font-size: 20px;
@@ -218,7 +218,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
   display: flex;
   flex-wrap: wrap;
   margin: -6px;
-  padding-top: 24px;
+  padding-block-start: 24px;
 }
 
 .VPHero.has-image .actions {
@@ -227,7 +227,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 
 @media (min-width: 640px) {
   .actions {
-    padding-top: 32px;
+    padding-block-start: 32px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index 0467e5f72938..5187a5497ee9 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/src/client/theme-default/components/VPHome.vue
@@ -36,12 +36,12 @@ const { frontmatter, theme } = useData()
 
 <style scoped>
 .VPHome {
-  margin-bottom: 96px;
+  margin-block-end: 96px;
 }
 
 @media (min-width: 768px) {
   .VPHome {
-    margin-bottom: 128px;
+    margin-block-end: 128px;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPHomeContent.vue b/src/client/theme-default/components/VPHomeContent.vue
index 3e0262351977..14a9c6b9edd8 100644
--- a/src/client/theme-default/components/VPHomeContent.vue
+++ b/src/client/theme-default/components/VPHomeContent.vue
@@ -39,12 +39,11 @@ const { width: vw } = useWindowSize({
 
 .vp-doc :deep(.VPHomeSponsors),
 .vp-doc :deep(.VPTeamPage) {
-  margin-left: var(--vp-offset, calc(50% - 50vw));
-  margin-right: var(--vp-offset, calc(50% - 50vw));
+  margin-inline: var(--vp-offset, calc(50% - 50vw));
 }
 
 .vp-doc :deep(.VPHomeSponsors h2) {
-  border-top: none;
+  border-block-start: none;
   letter-spacing: normal;
 }
 
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index d4eaacd29966..04abce7ff364 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -48,8 +48,8 @@ withDefaults(defineProps<Props>(), {
 
 <style scoped>
 .VPHomeSponsors {
-  border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+  border-block-start: 1px solid var(--vp-c-gutter);
+  padding-block-start: 88px !important;
 }
 
 .VPHomeSponsors {
@@ -96,7 +96,7 @@ withDefaults(defineProps<Props>(), {
 
 .message {
   margin: 0 auto;
-  padding-top: 10px;
+  padding-block-start: 10px;
   max-width: 320px;
   text-align: center;
   line-height: 24px;
@@ -106,11 +106,11 @@ withDefaults(defineProps<Props>(), {
 }
 
 .sponsors {
-  padding-top: 32px;
+  padding-block-start: 32px;
 }
 
 .action {
-  padding-top: 40px;
+  padding-block-start: 40px;
   text-align: center;
 }
 </style>
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index f80bb3611844..8e5930cd46a9 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -68,8 +68,8 @@ const classes = computed(() => {
   /*rtl:ignore*/
   left: 0;
   z-index: var(--vp-z-index-local-nav);
-  border-bottom: 1px solid var(--vp-c-gutter);
-  padding-top: var(--vp-layout-top-height, 0px);
+  border-block-end: 1px solid var(--vp-c-gutter);
+  padding-block-start: var(--vp-layout-top-height, 0px);
   width: 100%;
   background-color: var(--vp-local-nav-bg-color);
 }
@@ -84,7 +84,7 @@ const classes = computed(() => {
   }
 
   .VPLocalNav.has-sidebar {
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 
   .VPLocalNav.empty {
@@ -126,7 +126,7 @@ const classes = computed(() => {
 }
 
 .menu-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   font-size: 14px;
 }
 
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index cf842baa3292..a322e53bf98d 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -114,10 +114,11 @@ function scrollToTop() {
 .icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   font-size: 14px;
-  transform: rotate(0) /*rtl:rotate(180deg)*/;
-  transition: transform 0.25s;
+  /*rtl:ignore*/
+  scale: calc(1 * var(--vp-direction-multiplier)) 1; /* Flip in RTL */
+  transition: scale 0.25s;
 }
 
 @media (min-width: 960px) {
@@ -137,9 +138,8 @@ function scrollToTop() {
 
 .items {
   position: absolute;
-  top: 40px;
-  right: 16px;
-  left: 16px;
+  inset-block-start: 40px;
+  inset-inline: 16px;
   display: grid;
   gap: 1px;
   border: 1px solid var(--vp-c-border);
@@ -152,8 +152,8 @@ function scrollToTop() {
 
 @media (min-width: 960px) {
   .items {
-    right: auto;
-    left: calc(var(--vp-sidebar-width) + 32px);
+    inset-inline-end: auto;
+    inset-inline-start: calc(var(--vp-sidebar-width) + 32px);
     width: 320px;
   }
 }
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 825a22b5867a..208e82e7bafc 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -812,7 +812,7 @@ function onMouseMove(e: MouseEvent) {
   max-height: 140px;
   overflow: hidden;
   position: relative;
-  margin-top: 4px;
+  margin-block-start: 4px;
 }
 
 .result.selected .excerpt {
@@ -842,8 +842,8 @@ function onMouseMove(e: MouseEvent) {
 
 .excerpt-gradient-bottom {
   position: absolute;
-  bottom: -1px;
-  left: 0;
+  inset-block-end: -1px;
+  inset-inline-start: 0;
   width: 100%;
   height: 8px;
   background: linear-gradient(transparent, var(--vp-local-search-result-bg));
@@ -852,8 +852,8 @@ function onMouseMove(e: MouseEvent) {
 
 .excerpt-gradient-top {
   position: absolute;
-  top: -1px;
-  left: 0;
+  inset-block-start: -1px;
+  inset-inline-start: 0;
   width: 100%;
   height: 8px;
   background: linear-gradient(var(--vp-local-search-result-bg), transparent);
diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 91ebb404dccc..93c1bed24a16 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -45,16 +45,16 @@ defineProps<{
 }
 
 .VPMenu :deep(.group + .group) {
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
   padding: 11px 12px 12px;
 }
 
 .VPMenu :deep(.group:last-child) {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 .VPMenu :deep(.group + .item) {
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
   padding: 11px 16px 0;
 }
 
@@ -73,6 +73,6 @@ defineProps<{
 }
 
 .VPMenu :deep(.action) {
-  padding-left: 24px;
+  padding-inline-start: 24px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index 7d12eb7570e6..3e480471126e 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -21,19 +21,19 @@ defineProps<{
 <style scoped>
 .VPMenuGroup {
   margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
 
 .VPMenuGroup:first-child {
-  margin-top: 0;
-  border-top: 0;
-  padding-top: 0;
+  margin-block-start: 0;
+  border-block-start: 0;
+  padding-block-start: 0;
 }
 
 .VPMenuGroup + .VPMenuGroup {
-  margin-top: 12px;
-  border-top: 1px solid var(--vp-c-divider);
+  margin-block-start: 12px;
+  border-block-start: 1px solid var(--vp-c-divider);
 }
 
 .title {
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 249b7eee9f4a..ceb8aa816573 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -44,7 +44,7 @@ defineOptions({ inheritAttrs: false })
 <style scoped>
 .VPMenuGroup + .VPMenuLink {
   margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
 
@@ -56,7 +56,7 @@ defineOptions({ inheritAttrs: false })
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   transition:
     background-color 0.25s,
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 527bbb3f0e65..c55626692937 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -79,7 +79,7 @@ watchPostEffect(() => {
 .VPNavBar.screen-open {
   transition: none;
   background-color: var(--vp-nav-bg-color);
-  border-bottom: 1px solid var(--vp-c-divider);
+  border-block-end: 1px solid var(--vp-c-divider);
 }
 
 .VPNavBar:not(.home) {
@@ -97,7 +97,8 @@ watchPostEffect(() => {
 }
 
 .wrapper {
-  padding: 0 8px 0 24px;
+  padding-block: 0;
+  padding-inline: 24px 8px;
 }
 
 @media (min-width: 768px) {
@@ -145,8 +146,8 @@ watchPostEffect(() => {
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar .title {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     z-index: 2;
     padding: 0 32px;
     width: var(--vp-sidebar-width);
@@ -157,7 +158,7 @@ watchPostEffect(() => {
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .title {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    padding-inline-start: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
     width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
@@ -170,15 +171,15 @@ watchPostEffect(() => {
   .VPNavBar.has-sidebar .content {
     position: relative;
     z-index: 1;
-    padding-left: var(--vp-sidebar-width);
-    padding-right: 32px;
+    padding-inline-start: var(--vp-sidebar-width);
+    padding-inline-end: 32px;
   }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
   }
 }
 
@@ -187,8 +188,8 @@ watchPostEffect(() => {
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
-  margin-right: -100vw;
-  padding-right: 100vw;
+  margin-inline-end: -100vw;
+  padding-inline-end: 100vw;
   transition: background-color 0.5s;
 }
 
@@ -214,8 +215,7 @@ watchPostEffect(() => {
 .menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
-  margin-right: 8px;
-  margin-left: 8px;
+  margin-inline: 8px;
   width: 1px;
   height: 24px;
   background-color: var(--vp-c-divider);
@@ -224,15 +224,15 @@ watchPostEffect(() => {
 
 .menu + .appearance::before,
 .translations + .appearance::before {
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }
 
 .appearance + .social-links::before {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 .social-links {
-  margin-right: -8px;
+  margin-inline-end: -8px;
 }
 
 .divider {
@@ -242,13 +242,13 @@ watchPostEffect(() => {
 
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar .divider {
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .divider {
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index 3903cfa226b9..07d696dee3e0 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -64,7 +64,7 @@ const hasExtraContent = computed(
 <style scoped>
 .VPNavBarExtra {
   display: none;
-  margin-right: -12px;
+  margin-inline-end: -12px;
 }
 
 @media (min-width: 768px) {
@@ -80,7 +80,8 @@ const hasExtraContent = computed(
 }
 
 .trans-title {
-  padding: 0 24px 0 12px;
+  padding-block: 0;
+  padding-inline: 12px 24px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 700;
@@ -99,7 +100,7 @@ const hasExtraContent = computed(
 }
 
 .appearance-action {
-  margin-right: -2px;
+  margin-inline-end: -2px;
 }
 
 .social-links-list {
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 67c49300c5dc..af3a122099f3 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -160,13 +160,13 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 @media (min-width: 768px) {
   .VPNavBarSearch {
     flex-grow: 1;
-    padding-left: 24px;
+    padding-inline-start: 24px;
   }
 }
 
 @media (min-width: 960px) {
   .VPNavBarSearch {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 9679f8a5c592..75af74f0f3c4 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -50,7 +50,7 @@ const target = computed(() =>
 .title {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid transparent;
+  border-block-end: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
   font-size: 16px;
@@ -70,7 +70,7 @@ const target = computed(() =>
 }
 
 :deep(.logo) {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   height: var(--vp-nav-logo-height);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index 4f61458a13c3..41100c633c3e 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -38,7 +38,8 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 }
 
 .title {
-  padding: 0 24px 0 12px;
+  padding-block: 0;
+  padding-inline: 12px 24px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 700;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index fec143d86481..6e89dd1f41ae 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -37,12 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0;
   padding: 0 32px;
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
@@ -86,14 +81,14 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 .menu + .translations,
 .menu + .appearance,
 .translations + .appearance {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .menu + .social-links {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .appearance + .social-links {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue
index 4f7d26403d27..eee5ee641544 100644
--- a/src/client/theme-default/components/VPNavScreenAppearance.vue
+++ b/src/client/theme-default/components/VPNavScreenAppearance.vue
@@ -27,7 +27,8 @@ const { site, theme } = useData()
   justify-content: space-between;
   align-items: center;
   border-radius: 8px;
-  padding: 12px 14px 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px 14px;
   background-color: var(--vp-c-bg-soft);
 }
 
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index f5d78e663b6f..91540041b905 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -51,7 +51,7 @@ function toggle() {
 
 <style scoped>
 .VPNavScreenMenuGroup {
-  border-bottom: 1px solid var(--vp-c-divider);
+  border-block-end: 1px solid var(--vp-c-divider);
   height: 48px;
   overflow: hidden;
   transition: border-color 0.5s;
@@ -66,12 +66,12 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
   height: auto;
 }
 
 .VPNavScreenMenuGroup.open .button {
-  padding-bottom: 6px;
+  padding-block-end: 6px;
   color: var(--vp-c-brand-1);
 }
 
@@ -84,7 +84,8 @@ function toggle() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 4px 11px 0;
+  padding-block: 12px 11px;
+  padding-inline: 0 4px;
   width: 100%;
   line-height: 24px;
   font-size: 14px;
@@ -102,11 +103,11 @@ function toggle() {
 }
 
 .group:first-child {
-  padding-top: 0px;
+  padding-block-start: 0px;
 }
 
 .group + .group,
 .group + .item {
-  padding-top: 4px;
+  padding-block-start: 4px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 32e97c83babd..03c769f6ffbe 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -36,7 +36,7 @@ const { closeScreen } = inject(navInjectionKey)!
 <style scoped>
 .VPNavScreenMenuGroupLink {
   display: block;
-  margin-left: 12px;
+  margin-inline-start: 12px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 400;
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index d9ad7aaa11b8..59d96d51dbda 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -36,7 +36,7 @@ const { closeScreen } = inject(navInjectionKey)!
 <style scoped>
 .VPNavScreenMenuLink {
   display: block;
-  border-bottom: 1px solid var(--vp-c-divider);
+  border-block-end: 1px solid var(--vp-c-divider);
   padding: 12px 0 11px;
   line-height: 24px;
   font-size: 14px;
diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index 02722fdc8532..178c4e873fb4 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -61,15 +61,16 @@ function toggle() {
 }
 
 .icon.lang {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .icon.chevron {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 
 .list {
-  padding: 4px 0 0 24px;
+  padding-block: 4px 0;
+  padding-inline: 24px 0;
 }
 
 .link {
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 7e6e25287e58..cfa6dd719838 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -67,9 +67,9 @@ watch(
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: var(--vp-layout-top-height, 0px);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--vp-layout-top-height, 0px);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-sidebar);
   padding: 32px 32px 96px;
   width: calc(100vw - 64px);
@@ -79,7 +79,8 @@ watch(
   box-shadow: var(--vp-c-shadow-3);
   overflow-x: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% * var(--vp-direction-multiplier)));
   transition: opacity 0.5s, transform 0.25s ease;
   overscroll-behavior: contain;
 }
@@ -98,7 +99,7 @@ watch(
 
 @media (min-width: 960px) {
   .VPSidebar {
-    padding-top: var(--vp-nav-height);
+    padding-block-start: var(--vp-nav-height);
     width: var(--vp-sidebar-width);
     max-width: 100%;
     background-color: var(--vp-sidebar-bg-color);
@@ -111,7 +112,7 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    padding-inline-start: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
     width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
@@ -119,12 +120,11 @@ watch(
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
-    top: calc(var(--vp-nav-height) * -1);
-    left: 0;
+    inset-block-start: calc(var(--vp-nav-height) * -1);
+    inset-inline-start: 0;
     z-index: 1;
-    margin-top: calc(var(--vp-nav-height) * -1);
-    margin-right: -32px;
-    margin-left: -32px;
+    margin-block-start: calc(var(--vp-nav-height) * -1);
+    margin-inline: -32px;
     height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }
diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 0c20017416c3..6df574406ee8 100644
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/src/client/theme-default/components/VPSidebarGroup.vue
@@ -43,13 +43,13 @@ onBeforeUnmount(() => {
 }
 
 .group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  border-block-start: 1px solid var(--vp-c-divider);
+  padding-block-start: 10px;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
+    padding-block-start: 10px;
     width: calc(var(--vp-sidebar-width) - 64px);
   }
 }
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index d71d10621dcd..4af32f071e31 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -109,11 +109,11 @@ function onCaretClick() {
 
 <style scoped>
 .VPSidebarItem.level-0 {
-  padding-bottom: 24px;
+  padding-block-end: 24px;
 }
 
 .VPSidebarItem.collapsed.level-0 {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .item {
@@ -128,9 +128,8 @@ function onCaretClick() {
 
 .indicator {
   position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -17px;
+  inset-block: 6px;
+  inset-inline-start: -17px;
   width: 2px;
   border-radius: 2px;
   transition: background-color 0.25s;
@@ -208,7 +207,7 @@ function onCaretClick() {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: -7px;
+  margin-inline-end: -7px;
   width: 32px;
   height: 32px;
   color: var(--vp-c-text-3);
@@ -233,7 +232,13 @@ function onCaretClick() {
 }
 
 .VPSidebarItem.collapsed .caret-icon {
-  transform: rotate(0)/*rtl:rotate(180deg)*/;
+  /*rtl:ignore*/
+  transform: rotate(0);
+}
+
+[dir="rtl"] .VPSidebarItem.collapsed .caret-icon {
+  /*rtl:ignore*/
+  transform: rotate(180deg);
 }
 
 .VPSidebarItem.level-1 .items,
@@ -241,8 +246,8 @@ function onCaretClick() {
 .VPSidebarItem.level-3 .items,
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 16px;
 }
 
 .VPSidebarItem.collapsed .items {
diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
index 965ffdcc2b5d..690b6b9774fc 100644
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/src/client/theme-default/components/VPSkipLink.vue
@@ -20,8 +20,8 @@ watch(() => route.path, () => backToTop.value.focus())
 <style scoped>
 .VPSkipLink {
   position: fixed;
-  top: 8px;
-  left: 8px;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
   padding: 8px 16px;
   z-index: 999;
   border-radius: 8px;
@@ -42,8 +42,8 @@ watch(() => route.path, () => backToTop.value.focus())
 
 @media (min-width: 1280px) {
   .VPSkipLink {
-    top: 14px;
-    left: 16px;
+    inset-block-start: 14px;
+    inset-inline-start: 16px;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index a4dc411b0a45..034df23a7a5a 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -68,7 +68,7 @@ withDefaults(defineProps<Props>(), {
 }
 
 .VPTeamMembersItem.small .data {
-  padding-top: 20px;
+  padding-block-start: 20px;
 }
 
 .VPTeamMembersItem.small .avatar {
@@ -82,13 +82,13 @@ withDefaults(defineProps<Props>(), {
 }
 
 .VPTeamMembersItem.small .affiliation {
-  padding-top: 4px;
+  padding-block-start: 4px;
   line-height: 20px;
   font-size: 14px;
 }
 
 .VPTeamMembersItem.small .desc {
-  padding-top: 12px;
+  padding-block-start: 12px;
   line-height: 20px;
   font-size: 14px;
 }
@@ -103,7 +103,7 @@ withDefaults(defineProps<Props>(), {
 }
 
 .VPTeamMembersItem.medium .data {
-  padding-top: 24px;
+  padding-block-start: 24px;
   text-align: center;
 }
 
@@ -119,12 +119,12 @@ withDefaults(defineProps<Props>(), {
 }
 
 .VPTeamMembersItem.medium .affiliation {
-  padding-top: 4px;
+  padding-block-start: 4px;
   font-size: 16px;
 }
 
 .VPTeamMembersItem.medium .desc {
-  padding-top: 16px;
+  padding-block-start: 16px;
   max-width: 288px;
   font-size: 16px;
 }
@@ -153,10 +153,7 @@ withDefaults(defineProps<Props>(), {
 
 .avatar-img {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   border-radius: 50%;
   object-fit: cover;
 }
@@ -219,7 +216,7 @@ withDefaults(defineProps<Props>(), {
 }
 
 .sp-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   font-size: 16px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamPage.vue b/src/client/theme-default/components/VPTeamPage.vue
index 71d9bdb51007..408a29b5e9b1 100644
--- a/src/client/theme-default/components/VPTeamPage.vue
+++ b/src/client/theme-default/components/VPTeamPage.vue
@@ -16,27 +16,27 @@
 }
 
 .VPHome :slotted(.VPTeamPageTitle) {
-  border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+  border-block-start: 1px solid var(--vp-c-gutter);
+  padding-block-start: 88px !important;
 }
 
 :slotted(.VPTeamPageSection + .VPTeamPageSection),
 :slotted(.VPTeamMembers + .VPTeamPageSection) {
-  margin-top: 64px;
+  margin-block-start: 64px;
 }
 
 :slotted(.VPTeamMembers + .VPTeamMembers) {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 @media (min-width: 768px) {
   :slotted(.VPTeamPageTitle + .VPTeamPageSection) {
-    margin-top: 16px;
+    margin-block-start: 16px;
   }
 
   :slotted(.VPTeamPageSection + .VPTeamPageSection),
   :slotted(.VPTeamMembers + .VPTeamPageSection) {
-    margin-top: 96px;
+    margin-block-start: 96px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index 2bb52ab9aefe..a51bbce3b8ad 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -42,8 +42,8 @@
 
 .title-line {
   position: absolute;
-  top: 16px;
-  left: 0;
+  inset-block-start: 16px;
+  inset-inline-start: 0;
   width: 100%;
   height: 1px;
   background-color: var(--vp-c-divider);
@@ -63,7 +63,7 @@
 .lead {
   margin: 0 auto;
   max-width: 480px;
-  padding-top: 12px;
+  padding-block-start: 12px;
   text-align: center;
   line-height: 24px;
   font-size: 16px;
@@ -72,6 +72,6 @@
 }
 
 .members {
-  padding-top: 40px;
+  padding-block-start: 40px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamPageTitle.vue b/src/client/theme-default/components/VPTeamPageTitle.vue
index 9751a1886aa5..84292c41ed57 100644
--- a/src/client/theme-default/components/VPTeamPageTitle.vue
+++ b/src/client/theme-default/components/VPTeamPageTitle.vue
@@ -45,7 +45,7 @@
 .lead {
   margin: 0 auto;
   max-width: 512px;
-  padding-top: 12px;
+  padding-block-start: 12px;
   line-height: 24px;
   font-size: 16px;
   font-weight: 500;
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 8041b6bc37a2..4b443351c986 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -249,3 +249,11 @@ mjx-container > svg {
   display: inline-block;
   margin: auto;
 }
+
+:root {
+  --vp-direction-multiplier: 1; /* 1 for LTR, -1 for RTL */
+}
+
+[dir='rtl'] {
+  --vp-direction-multiplier: -1;
+}
diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css
index 4f23a41692da..82ec6139174c 100644
--- a/src/client/theme-default/styles/components/vp-code-group.css
+++ b/src/client/theme-default/styles/components/vp-code-group.css
@@ -1,12 +1,11 @@
 .vp-code-group {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .vp-code-group .tabs {
   position: relative;
   display: flex;
-  margin-right: -24px;
-  margin-left: -24px;
+  margin-inline: -24px;
   padding: 0 12px;
   background-color: var(--vp-code-tab-bg);
   overflow-x: auto;
@@ -16,9 +15,11 @@
 
 @media (min-width: 640px) {
   .vp-code-group .tabs {
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 8px 8px 0 0;
+    margin-inline: 0;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
   }
 }
 
@@ -31,7 +32,7 @@
 .vp-code-group .tabs label {
   position: relative;
   display: inline-block;
-  border-bottom: 1px solid transparent;
+  border-block-end: 1px solid transparent;
   padding: 0 12px;
   line-height: 48px;
   font-size: 14px;
@@ -44,9 +45,8 @@
 
 .vp-code-group .tabs label::after {
   position: absolute;
-  right: 8px;
-  bottom: -1px;
-  left: 8px;
+  inset-inline: 8px;
+  inset-block-end: -1px;
   z-index: 1;
   height: 2px;
   border-radius: 2px;
@@ -70,9 +70,9 @@
 .vp-code-group div[class*='language-'],
 .vp-block {
   display: none;
-  margin-top: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+  margin-block-start: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
 }
 
 .vp-code-group div[class*='language-'].active,
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index abc58243eddb..bb48d7b2db14 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -21,8 +21,8 @@
 
 .vp-doc h2 {
   margin: 48px 0 16px;
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  border-block-start: 1px solid var(--vp-c-divider);
+  padding-block-start: 24px;
   letter-spacing: -0.02em;
   line-height: 32px;
   font-size: 24px;
@@ -44,9 +44,9 @@
 
 .vp-doc .header-anchor {
   position: absolute;
-  top: 0;
-  left: 0;
-  margin-left: -0.87em;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  margin-inline-start: -0.87em;
   font-weight: 500;
   user-select: none;
   opacity: 0;
@@ -84,7 +84,7 @@
 }
 
 .vp-doc h2 .header-anchor {
-  top: 24px;
+  inset-block-start: 24px;
 }
 
 /**
@@ -102,8 +102,8 @@
 
 .vp-doc blockquote {
   margin: 16px 0;
-  border-left: 2px solid var(--vp-c-divider);
-  padding-left: 16px;
+  border-inline-start: 2px solid var(--vp-c-divider);
+  padding-inline-start: 16px;
   transition: border-color 0.5s;
   color: var(--vp-c-text-2);
 }
@@ -138,7 +138,7 @@
 
 .vp-doc ul,
 .vp-doc ol {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
   margin: 16px 0;
 }
 
@@ -151,7 +151,7 @@
 }
 
 .vp-doc li + li {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 
 .vp-doc li > ol,
@@ -172,7 +172,7 @@
 
 .vp-doc tr {
   background-color: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
   transition: background-color 0.5s;
 }
 
@@ -187,7 +187,7 @@
 }
 
 .vp-doc th {
-  text-align: left;
+  text-align: start;
   font-size: 14px;
   font-weight: 600;
   color: var(--vp-c-text-2);
@@ -205,7 +205,7 @@
 .vp-doc hr {
   margin: 16px 0;
   border: none;
-  border-top: 1px solid var(--vp-c-divider);
+  border-block-start: 1px solid var(--vp-c-divider);
 }
 
 /**
@@ -237,7 +237,10 @@
 
 .vp-doc .custom-block .vp-code-group .tabs {
   margin: 0;
-  border-radius: 8px 8px 0 0;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
 }
 
 /**
@@ -293,14 +296,17 @@
 
 @media (max-width: 639px) {
   .vp-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 8px;
   }
 }
 
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -8px;
+  margin-block-start: -8px;
 }
 
 .vp-doc [class*='language-'] pre,
@@ -317,8 +323,7 @@
   padding: 20px 0;
   background: transparent;
   overflow-x: auto;
-  /*rtl:ignore*/
-  text-align: left;
+  text-align: start;
 }
 
 .vp-doc [class*='language-'] code {
@@ -359,7 +364,7 @@
 
 .vp-doc [class*='language-'] code .diff::before {
   position: absolute;
-  left: 10px;
+  inset-inline-start: 10px;
 }
 
 .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
@@ -415,7 +420,7 @@
   z-index: 3;
   /*rtl:ignore*/
   border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 20px;
+  padding-block-start: 20px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
@@ -465,8 +470,10 @@
 
 .vp-doc [class*='language-'] > button.copy.copied,
 .vp-doc [class*='language-'] > button.copy:hover.copied {
-  /*rtl:ignore*/
-  border-radius: 0 4px 4px 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
 }
@@ -483,8 +490,10 @@
   border: 1px solid var(--vp-code-copy-code-hover-border-color);
   /*rtl:ignore*/
   border-right: 0;
-  /*rtl:ignore*/
-  border-radius: 4px 0 0 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 4px;
   padding: 0 10px;
   width: fit-content;
   height: 40px;
@@ -522,7 +531,7 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc .VPTeamMembers {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .vp-doc .VPTeamMembers.small.count-1 .container {
@@ -547,8 +556,8 @@
 /* prettier-ignore */
 :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
   display: inline-block;
-  margin-top: -1px;
-  margin-left: 4px;
+  margin-block-start: -1px;
+  margin-inline-start: 4px;
   width: 11px;
   height: 11px;
   background: currentColor;
@@ -557,7 +566,8 @@
   --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);*/
+  /*rtl:ignore*/
+  transform: scaleX(var(--vp-direction-multiplier));
 }
 
 .vp-external-link-icon::after {
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index 9e677ab9bc9a..aee65d37284c 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -12,7 +12,7 @@
 }
 
 .vp-sponsor-section + .vp-sponsor-section {
-  margin-top: 4px;
+  margin-block-start: 4px;
 }
 
 .vp-sponsor-tier {
@@ -37,7 +37,7 @@
 }
 
 .vp-sponsor-grid + .vp-sponsor-tier {
-  margin-top: 4px;
+  margin-block-start: 4px;
 }
 
 .vp-sponsor-grid {