style: add rtl.less of Carousel\Descriptions\Empty (#22330)

components/carousel/style/index.less

@@ -1,15 +1,12 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
 
 .@{carousel-prefix-cls} {
   .reset-component;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   .slick-slider {
     position: relative;
     display: block;
@@ -53,11 +50,6 @@
     left: 0;
     display: block;
 
-    .@{carousel-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
-
     &::before,
     &::after {
       display: table;
@@ -144,15 +136,6 @@
     &::before {
       content: '←';
     }
-
-    .@{carousel-prefix-cls}-rtl & {
-      right: -25px;
-      left: auto;
-
-      &::before {
-        content: '→';
-      }
-    }
   }
 
   .slick-next {
@@ -160,14 +143,6 @@
     &::before {
       content: '→';
     }
-
-    .@{carousel-prefix-cls}-rtl & {
-      right: auto;
-      left: -25px;
-      &::before {
-        content: '←';
-      }
-    }
   }
 
   // Dots
@@ -184,10 +159,6 @@
     padding-left: 0;
     list-style: none;
 
-    .@{carousel-prefix-cls}-rtl& {
-      flex-direction: row-reverse;
-    }
-
     &-bottom {
       bottom: 12px;
     }
@@ -253,10 +224,6 @@
     margin: 0;
     transform: translateY(-50%);
 
-    .@{carousel-prefix-cls}-rtl& {
-      flex-direction: column;
-    }
-
     &-left {
       right: auto;
       left: 12px;

components/carousel/style/rtl.less

@@ -0,0 +1,52 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
+
+.@{carousel-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  .slick-track {
+    .@{carousel-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  .slick-prev {
+    .@{carousel-prefix-cls}-rtl & {
+      right: -25px;
+      left: auto;
+      &::before {
+        content: '→';
+      }
+    }
+  }
+
+  .slick-next {
+    .@{carousel-prefix-cls}-rtl & {
+      right: auto;
+      left: -25px;
+      &::before {
+        content: '←';
+      }
+    }
+  }
+
+  // Dots
+  .slick-dots {
+    .@{carousel-prefix-cls}-rtl& {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.@{ant-prefix}-carousel-vertical {
+  .slick-dots {
+    .@{carousel-prefix-cls}-rtl& {
+      flex-direction: column;
+    }
+  }
+}

components/descriptions/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/default';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 
@@ -8,10 +9,6 @@
 @descriptions-small-padding: 8px 16px;
 
 .@{descriptions-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
   &-title {
     margin-bottom: 20px;
     color: @heading-color;
@@ -52,10 +49,6 @@
       top: -0.5px;
       margin: 0 8px 0 2px;
       content: ' ';
-
-      .@{descriptions-prefix-cls}-rtl & {
-        margin: 0 2px 0 8px;
-      }
     }
   }
 

components/descriptions/style/rtl.less

@@ -0,0 +1,18 @@
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+
+@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
+
+.@{descriptions-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-item-label {
+    &::after {
+      .@{descriptions-prefix-cls}-rtl & {
+        margin: 0 2px 0 8px;
+      }
+    }
+  }
+}

components/empty/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @empty-prefix-cls: ~'@{ant-prefix}-empty';
 @empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';
@@ -10,10 +11,6 @@
   line-height: 22px;
   text-align: center;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-image {
     height: 100px;
     margin-bottom: 8px;

components/empty/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@empty-prefix-cls: ~'@{ant-prefix}-empty';
+
+.@{empty-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}