vdesign-ui 0.3.0 → 0.3.1

package/dist/components/tabs/style.less

@@ -1,505 +1,512 @@
-@tabs-prefix-cls: vd-tabs;
-@tab-prefix-cls: vd-tab;
-
-.@{tabs-prefix-cls} {
-
-  &__wrap {
-    position: relative;
-    width: 100%;
-  }
-
-  &--sticky {
-    position: sticky;
-    top: 0;
-    z-index: 99;
-  }
-  
-  &__nav{
-    display: flex;
-    align-items: center;
-    &--primary {
-      position: relative;
-      white-space: nowrap;
-      padding-inline-start: var(--spacing-tab-primary-margin_left);
-      height: var(--height-super-large);
-      line-height: var(--height-super-large);
-      
-      .@{tab-prefix-cls}{
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        padding-inline-start: var(--spacing-tab-primary-padding_left);
-        padding-inline-end: var(--spacing-tab-primary-padding_right);
-        color: var(--color-tab-primary-text-default);
-        font-size: var(--en-single-f-d-r-fontSize);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-
-        &--active {
-          color: var(--color-tab-primary-text-active);
-          font-size: var(--en-single-f-e-s-fontSize);
-          font-weight: var(--en-single-f-e-s-fontWeight);
-      
-          &::before {
-            content: "";
-            bottom: 11px;
-            height: var(--height-tab-primary-bar);
-            width: var(--width-tab-primary-bar);
-            display: block;
-            position: absolute;
-            background-color: var(--color-tab-primary-bar-active);
-            left: 50%;
-            transform: translateX(-50%);
-            border-radius: var(--radius-tab-primary_bar);
-          }
-        }
-        &__none--line {
-          &::before {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &--card {
-      position: relative;
-      display: flex;
-      padding-inline-start: 20px;
-      padding-inline-end: 20px;
-      height: var(--height-super-large);
-      line-height: var(--height-super-large);
-
-      .@{tab-prefix-cls}{
-        min-width: 1%;
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
-        text-align: center;
-        color: var(--color-tab-primary-text-default);
-        font-size: var(--en-single-f-d-r-fontSize);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        
-          &--active {
-          color: var(--color-tab-primary-text-active);
-          font-size: var(--en-single-f-e-s-fontSize);
-          font-weight: var(--en-single-f-e-s-fontWeight);
-      
-          &::before {
-            content: "";
-            bottom: 11px;
-            height: var(--height-tab-primary-bar);
-            width: var(--width-tab-primary-bar);
-            display: block;
-            position: absolute;
-            background-color: var(--color-tab-primary-bar-active);
-            left: 50%;
-            transform: translateX(-50%);
-            border-radius: 1px;
-          }
-        }
-        &__none--line {
-          &::before {
-            display: none;
-          }
-        }
-      }
-    }
-    
-    &--secondary {
-      display: flex;
-      align-items: center;
-      position: relative;
-      padding-inline-start: var(--spacing-tab-secondary-margin_left);
-      height: var(--height-tab-secondary);
-      line-height: var(--height-tab-secondary);
-
-      .@{tab-prefix-cls}{
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        margin-inline-start: var(--spacing-tab-secondary-padding_left);
-        margin-inline-end: var(--spacing-tab-secondary-padding_right);
-        color: var(--color-tab-primary-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-         &--active {
-          color: var(--color-tab-primary-text-active);
-          font-size: var(--en-single-f-c-s-fontSize);
-          font-weight: var(--en-single-f-c-s-fontWeight);
-
-          &::before {
-            content: "";
-            bottom: 0;
-            height: var(--height-tab-secondary-bar);
-            display: block;
-            position: absolute;
-            background-color: var(--color-tab-secondary-bar-active);
-            left: 0;
-            right: 0;
-            width: 100%;
-            border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
-          }
-        }
-        &__none--line {
-          &::before {
-            display: none;
-          }
-        }
-      }
-
-    }
-
-
-  
-    &--capsule  {
-      position: relative;
-      white-space: nowrap;
-      align-items: center;
-      padding-inline-start: var(--spacing-tab-capsule-margin_left);
-      height: var(--height-tab-capsule);
-      line-height: var(--height-tab-capsule);
-  
-
-      .@{tab-prefix-cls}{
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        vertical-align: middle;
-        height: var(--height-tab-capsule_btn);
-        line-height: var(--height-tab-capsule_btn);
-        padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
-        padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
-        margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
-        margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
-        background-color: var(--color-tab-capsule_btn-bg-default);
-        color: var(--color-tab-capsule-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-        border-radius: var(--radius-tab-capsule_button);
-  
-        &--active {
-          color: var(--color-tab-capsule-text-active);
-          font-size: var(--en-single-f-c-s-fontSize);
-          font-weight: var(--en-single-f-c-s-fontWeight);
-          background-color: var(--color-tab-capsule_btn-bg-active);
-        }
-      }
-    }
-    
-    
-    &--selector-l  {
-        position: relative;
-        display: flex;
-        background-color: var(--color-tab-selector-bg-default);
-        border-radius: var(--radius-tab-selector_card);
-        padding-inline-start: var(--spacing-tab-selector-margin_left);
-        padding-inline-end: var(--spacing-tab-selector-margin_right);
-        padding-block-start: var(--spacing-tab-selector-margin_top);
-        padding-block-end: var(--spacing-tab-selector-margin_bottom);
-    
-        .@{tab-prefix-cls}{
-          flex: 1;
-          position: relative;
-          display: inline-block;
-          text-align: center;
-          cursor: pointer;
-          height: var(--height-tab-selector_l_btn);
-          line-height: var(--height-tab-selector_l_btn);
-          color: var(--color-tab-selector-text-default);
-          font-size: var(--en-single-f-c-r-fontSize);
-          font-weight: var(--en-single-f-c-r-fontWeight);
-        
-          &--active {
-          color: var(--color-tab-selector-text-active);
-          font-size: var(--en-single-f-c-s-fontSize);
-          font-weight: var(--en-single-f-c-s-fontWeight);
-          background-color: var(--color-tab-selector-bg-active);
-          box-shadow: var(--shadow-s1);
-          border-radius: var(--radius-tab-selector_card);
-        }
-      }
-
-    }
-    
-
-
-    &--selector-m{
-        position: relative;
-        display: flex;
-        background-color: var(--color-tab-selector-bg-default);
-        border-radius: var(--radius-tab-selector_card);
-        padding-inline-start: var(--spacing-tab-selector-margin_left);
-        padding-inline-end: var(--spacing-tab-selector-margin_right);
-        padding-block-start: var(--spacing-tab-selector-margin_top);
-        padding-block-end: var(--spacing-tab-selector-margin_bottom);
-    
-        .@{tab-prefix-cls}{
-          flex: 1;
-          position: relative;
-          display: inline-block;
-          text-align: center;
-          cursor: pointer;
-          height: var(--height-tab-selector_m_btn);
-          line-height: var(--height-tab-selector_m_btn);
-          color: var(--color-tab-selector-text-default);
-          font-size: var(--en-single-f-b-r-fontSize);
-          font-weight: var(--en-single-f-b-r-fontWeight);
-        
-          &--active {
-            color: var(--color-tab-selector-text-active);
-            font-size: var(--en-single-f-b-s-fontSize);
-            font-weight: var(--en-single-f-b-s-fontWeight);
-            background-color: var(--color-tab-selector-bg-active);
-            box-shadow: var(--shadow-s1);
-            border-radius: var(--radius-tab-selector_card);
-          }
-        }
-
-    }
-    
-    
-    &--filter {
-        position: relative;
-        display: flex;
-        height: var(--height-tab-filter);
-        line-height: var(--height-tab-filter);
-        padding-inline-start: var(--spacing-tab-filter-margin_y);
-        padding-inline-end: var(--spacing-tab-filter-margin_y);
-
-        .@{tab-prefix-cls}{
-          flex: 1;
-          position: relative;
-          cursor: pointer;
-          text-align: center;
-          color: var(--color-tab-filter-text-default);
-          font-size: var(--en-single-f-c-r-fontSize);
-          font-weight: var(--en-single-f-c-r-fontWeight);
-          &--active {
-          color: var(--color-tab-filter-text-active);
-          font-size: var(--en-single-f-c-s-fontSize);
-          font-weight: var(--en-single-f-c-s-fontWeight);
-    
-        }
-      }
-    
-
-    }
-    
-    &--click-filter {
-        position: relative;
-        display: flex;
-        height: var(--height-tab-filter);
-        line-height: var(--height-tab-filter);
-
-        .@{tab-prefix-cls}{
-          flex: 1;
-          position: relative;
-          cursor: pointer;
-          text-align: center;
-          color: var(--color-tab-double_click_filter-text-default);
-          font-size: var(--en-single-f-c-r-fontSize);
-          font-weight: var(--en-single-f-c-r-fontWeight);
-          &--active {
-          color: var(--color-tab-double_click_filter-text-active);
-          font-size: var(--en-single-f-c-s-fontSize);
-          font-weight: var(--en-single-f-c-s-fontWeight);
-        }
-      }
-    
-
-    }
-  }
-  
-  &__scroll {
-    overflow-x: auto;
-    position: relative;
-    height: 100%;
-    &--left{
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      z-index: 10;
-      &::before {
-        content: '';
-        position: absolute;
-        z-index: 1;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 0;
-        width: 20px;
-        height: 48px;
-        background-color: var(--bg-color-1);
-      }
-      &::after {
-        content: '';
-        box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 0;
-        width: 20px;
-        height: 30px;
-        background-color: transparent;
-      } 
-    }
-    &--right{
-      position: absolute;
-      right: 0;
-      top: 0;
-      height: 100%;
-      z-index: 10;
-      &::before {
-        content: '';
-        position: absolute;
-        z-index: 1;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        width: 20px;
-        height: 48px;
-        background-color: var(--bg-color-1);
-      }
-      &::after {
-        content: '';
-        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        width: 20px;
-        height: 30px;
-        background-color: transparent;
-      } 
-  }
-
-
-  }
-  
-  &__menu {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-
-    &--right {
-      position: relative;
-      z-index: 11;
-      // margin-inline-start: -12px;
-      display: flex;
-      height: var(--icon-large);
-      padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
-      color: var(--text-color-h1);
-
-      // &::before {
-      //   content: '';
-      //   position: absolute;
-      //   margin-inline-start: -16px;
-      //   width: 16px;
-      //   height: 100%;
-      //   background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
-      // }
-
-    }
-    &--margin{
-      margin-inline-start: -12px;
-    }
-    &--btn {
-      cursor: pointer;
-      font-size: var(--icon-large)!important;
-    }
-
-  }
-
-  &__wrap--bg {
-    background-color: transparent;
-  }
-
-  &--complete {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  
-  &__content--animated {
-    overflow: hidden;
-  }
-  &__track {
-    display: flex;
-    transition: transform 0.3s;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    will-change: left;
-  }
-
-
-}
-
-.@{tab-prefix-cls}{
-
-  &__text {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__text--ellipsis {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-
-  &__pane {
-    flex-shrink: 0;
-    width: 100%;
-    &--inactive {
-      height: 0;
-      overflow: hidden;
-    }
-  }
-
-}
-
-
-
-[lang|='ar'] , [dir='rtl']{
-  // .@{tabs-prefix-cls}__scroll {
-  //   &::before {
-  //     right: 0;
-  //     left: auto;
-  //   }
-  //   &::after {
-  //     right: 0;
-  //     left: auto;
-  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
-  //   } 
-  // }
-  .@{tabs-prefix-cls}__menu--right::before {
-    transform: scaleX(-1);
-  }
-}
-
-[theme='dark'] {
-  .@{tabs-prefix-cls}__scroll {
-    &::after {
-      box-shadow: 4px 0 6px rgba(0, 0, 0, 0.35);
-    } 
-  }
-}
-
-[theme='dark'][lang|='ar'], [dir='rtl']{
-  // .@{tabs-prefix-cls}__scroll {
-  //   &::after {
-  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
-  //   } 
-  // }
+@tabs-prefix-cls: vd-tabs;
+@tab-prefix-cls: vd-tab;
+
+.@{tabs-prefix-cls} {
+
+  &__wrap {
+    position: relative;
+    width: 100%;
+  }
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+  }
+  
+  &__nav{
+    display: flex;
+    align-items: center;
+    &--primary {
+      position: relative;
+      white-space: nowrap;
+      padding-inline-start: var(--spacing-tab-primary-margin_left);
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
+      
+      .@{tab-prefix-cls}{
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        padding-inline-start: var(--spacing-tab-primary-padding_left);
+        padding-inline-end: var(--spacing-tab-primary-padding_right);
+        color: var(--color-tab-primary-text-default);
+        font-size: var(--en-single-f-d-r-fontSize);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+
+        &--active {
+          color: var(--color-tab-primary-text-active);
+          font-size: var(--en-single-f-e-s-fontSize);
+          font-weight: var(--en-single-f-e-s-fontWeight);
+      
+          &::before {
+            content: "";
+            bottom: 11px;
+            height: var(--height-tab-primary-bar);
+            width: var(--width-tab-primary-bar);
+            display: block;
+            position: absolute;
+            background-color: var(--color-tab-primary-bar-active);
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: var(--radius-tab-primary_bar);
+          }
+        }
+        &__none--line {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &--card {
+      position: relative;
+      display: flex;
+      padding-inline-start: 20px;
+      padding-inline-end: 20px;
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
+
+      .@{tab-prefix-cls}{
+        min-width: 1%;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+        text-align: center;
+        color: var(--color-tab-primary-text-default);
+        font-size: var(--en-single-f-d-r-fontSize);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        
+          &--active {
+          color: var(--color-tab-primary-text-active);
+          font-size: var(--en-single-f-e-s-fontSize);
+          font-weight: var(--en-single-f-e-s-fontWeight);
+      
+          &::before {
+            content: "";
+            bottom: 11px;
+            height: var(--height-tab-primary-bar);
+            width: var(--width-tab-primary-bar);
+            display: block;
+            position: absolute;
+            background-color: var(--color-tab-primary-bar-active);
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 1px;
+          }
+        }
+        &__none--line {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+    
+    &--secondary {
+      display: flex;
+      align-items: center;
+      position: relative;
+      padding-inline-start: var(--spacing-tab-secondary-margin_left);
+      height: var(--height-tab-secondary);
+      line-height: var(--height-tab-secondary);
+
+      .@{tab-prefix-cls}{
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        margin-inline-start: var(--spacing-tab-secondary-padding_left);
+        margin-inline-end: var(--spacing-tab-secondary-padding_right);
+        color: var(--color-tab-primary-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+         &--active {
+          color: var(--color-tab-primary-text-active);
+          font-size: var(--en-single-f-c-s-fontSize);
+          font-weight: var(--en-single-f-c-s-fontWeight);
+
+          &::before {
+            content: "";
+            bottom: 0;
+            height: var(--height-tab-secondary-bar);
+            display: block;
+            position: absolute;
+            background-color: var(--color-tab-secondary-bar-active);
+            left: 0;
+            right: 0;
+            width: 100%;
+            border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
+          }
+        }
+        &__none--line {
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+    }
+
+
+  
+    &--capsule  {
+      position: relative;
+      white-space: nowrap;
+      align-items: center;
+      padding-inline-start: var(--spacing-tab-capsule-margin_left);
+      height: var(--height-tab-capsule);
+      line-height: var(--height-tab-capsule);
+  
+
+      .@{tab-prefix-cls}{
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        vertical-align: middle;
+        height: var(--height-tab-capsule_btn);
+        line-height: var(--height-tab-capsule_btn);
+        padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
+        padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
+        margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
+        margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
+        background-color: var(--color-tab-capsule_btn-bg-default);
+        color: var(--color-tab-capsule-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+        border-radius: var(--radius-tab-capsule_button);
+  
+        &--active {
+          color: var(--color-tab-capsule-text-active);
+          font-size: var(--en-single-f-c-s-fontSize);
+          font-weight: var(--en-single-f-c-s-fontWeight);
+          background-color: var(--color-tab-capsule_btn-bg-active);
+        }
+      }
+    }
+    
+    
+    &--selector-l  {
+        position: relative;
+        display: flex;
+        background-color: var(--color-tab-selector-bg-default);
+        border-radius: var(--radius-tab-selector_card);
+        padding-inline-start: var(--spacing-tab-selector-margin_left);
+        padding-inline-end: var(--spacing-tab-selector-margin_right);
+        padding-block-start: var(--spacing-tab-selector-margin_top);
+        padding-block-end: var(--spacing-tab-selector-margin_bottom);
+    
+        .@{tab-prefix-cls}{
+          flex: 1;
+          position: relative;
+          display: inline-block;
+          text-align: center;
+          cursor: pointer;
+          height: var(--height-tab-selector_l_btn);
+          line-height: var(--height-tab-selector_l_btn);
+          color: var(--color-tab-selector-text-default);
+          font-size: var(--en-single-f-c-r-fontSize);
+          font-weight: var(--en-single-f-c-r-fontWeight);
+        
+          &--active {
+          color: var(--color-tab-selector-text-active);
+          font-size: var(--en-single-f-c-s-fontSize);
+          font-weight: var(--en-single-f-c-s-fontWeight);
+          background-color: var(--color-tab-selector-bg-active);
+          box-shadow: var(--shadow-s1);
+          border-radius: var(--radius-tab-selector_card);
+        }
+      }
+
+    }
+    
+
+
+    &--selector-m{
+        position: relative;
+        display: flex;
+        background-color: var(--color-tab-selector-bg-default);
+        border-radius: var(--radius-tab-selector_card);
+        padding-inline-start: var(--spacing-tab-selector-margin_left);
+        padding-inline-end: var(--spacing-tab-selector-margin_right);
+        padding-block-start: var(--spacing-tab-selector-margin_top);
+        padding-block-end: var(--spacing-tab-selector-margin_bottom);
+    
+        .@{tab-prefix-cls}{
+          flex: 1;
+          position: relative;
+          display: inline-block;
+          text-align: center;
+          cursor: pointer;
+          height: var(--height-tab-selector_m_btn);
+          line-height: var(--height-tab-selector_m_btn);
+          color: var(--color-tab-selector-text-default);
+          font-size: var(--en-single-f-b-r-fontSize);
+          font-weight: var(--en-single-f-b-r-fontWeight);
+        
+          &--active {
+            color: var(--color-tab-selector-text-active);
+            font-size: var(--en-single-f-b-s-fontSize);
+            font-weight: var(--en-single-f-b-s-fontWeight);
+            background-color: var(--color-tab-selector-bg-active);
+            box-shadow: var(--shadow-s1);
+            border-radius: var(--radius-tab-selector_card);
+          }
+        }
+
+    }
+    
+    
+    &--filter {
+        position: relative;
+        display: flex;
+        height: var(--height-tab-filter);
+        line-height: var(--height-tab-filter);
+        padding-inline-start: var(--spacing-tab-filter-margin_y);
+        padding-inline-end: var(--spacing-tab-filter-margin_y);
+
+        .@{tab-prefix-cls}{
+          flex: 1;
+          position: relative;
+          cursor: pointer;
+          text-align: center;
+          color: var(--color-tab-filter-text-default);
+          font-size: var(--en-single-f-c-r-fontSize);
+          font-weight: var(--en-single-f-c-r-fontWeight);
+          &--active {
+          color: var(--color-tab-filter-text-active);
+          font-size: var(--en-single-f-c-s-fontSize);
+          font-weight: var(--en-single-f-c-s-fontWeight);
+    
+        }
+      }
+    
+
+    }
+    
+    &--click-filter {
+        position: relative;
+        display: flex;
+        height: var(--height-tab-filter);
+        line-height: var(--height-tab-filter);
+
+        .@{tab-prefix-cls}{
+          flex: 1;
+          position: relative;
+          cursor: pointer;
+          text-align: center;
+          color: var(--color-tab-double_click_filter-text-default);
+          font-size: var(--en-single-f-c-r-fontSize);
+          font-weight: var(--en-single-f-c-r-fontWeight);
+          &--active {
+          color: var(--color-tab-double_click_filter-text-active);
+          font-size: var(--en-single-f-c-s-fontSize);
+          font-weight: var(--en-single-f-c-s-fontWeight);
+        }
+      }
+    
+
+    }
+  }
+  
+  &__scroll {
+    overflow-x: auto;
+    position: relative;
+    height: 100%;
+    &--left{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      z-index: 10;
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
+    }
+    &--right{
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      z-index: 10;
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
+  }
+
+
+  }
+  
+  &__menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+
+    &--right {
+      position: relative;
+      z-index: 11;
+      // margin-inline-start: -12px;
+      display: flex;
+      height: var(--icon-large);
+      padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
+      color: var(--text-color-h1);
+
+      // &::before {
+      //   content: '';
+      //   position: absolute;
+      //   margin-inline-start: -16px;
+      //   width: 16px;
+      //   height: 100%;
+      //   background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
+      // }
+
+    }
+    &--margin{
+      margin-inline-start: -12px;
+    }
+    &--btn {
+      cursor: pointer;
+      font-size: var(--icon-large)!important;
+    }
+
+  }
+
+  &__wrap--bg {
+    background-color: transparent;
+  }
+
+  &--complete {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  
+  &__content--animated {
+    overflow: hidden;
+  }
+  &__track {
+    display: flex;
+    transition: transform 0.3s;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    will-change: left;
+  }
+
+
+}
+
+.@{tab-prefix-cls}{
+
+  &__text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__text--ellipsis {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  &__pane {
+    flex-shrink: 0;
+    width: 100%;
+    &--inactive {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
+}
+
+
+
+[lang|='ar'] , [dir='rtl']{
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::before {
+  //     right: 0;
+  //     left: auto;
+  //   }
+  //   &::after {
+  //     right: 0;
+  //     left: auto;
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+  //   } 
+  // }
+  .@{tabs-prefix-cls}__menu--right::before {
+    transform: scaleX(-1);
+  }
+}
+
+[theme='dark'] {
+  .@{tabs-prefix-cls}__scroll {
+    &--left{
+      &::after {
+        box-shadow: 4px 0 6px rgba(0, 0, 0, 0.7);
+      }
+    }
+    &--right{
+      &::after {
+        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.7);
+      }
+    }
+  }
+}
+
+[theme='dark'][lang|='ar'], [dir='rtl']{
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::after {
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
+  //   } 
+  // }
 }