@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/Tabs/tabs.scss

@@ -2,70 +2,86 @@
 $pf-v5-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$tabs} {
+:where(:root),
+:where(.#{$tabs}) {
   --#{$tabs}--inset: 0;
   --#{$tabs}--Width: auto;
-  --#{$tabs}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$tabs}--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$tabs}--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$tabs}--before--border-width--base: var(--pf-t--global--border--width--regular);
   --#{$tabs}--before--BorderTopWidth: 0;
   --#{$tabs}--before--BorderRightWidth: 0;
   --#{$tabs}--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
   --#{$tabs}--before--BorderLeftWidth: 0;
-  --#{$tabs}--m-vertical--inset: var(--#{$pf-global}--spacer--lg);
+  --#{$tabs}--m-vertical--inset: var(--pf-t--global--spacer--sm);
 
-  // Page insets
-  --#{$tabs}--m-page-insets--inset: var(--#{$pf-global}--spacer--md); // make this the default inset at breaking change
-  --#{$tabs}--m-page-insets--xl--inset: var(--#{$pf-global}--spacer--lg); // make this the default inset at breaking change
+  // Tabs, Page insets modifier
+  --#{$tabs}--m-page-insets--inset: var(--pf-t--global--spacer--md);
 
-  // Vertical
+  // Tabs, Vertical modifier
   --#{$tabs}--m-vertical--Width: 100%;
   --#{$tabs}--m-vertical--MaxWidth: #{pf-size-prem(250px)};
-  --#{$tabs}--m-vertical--m-box--inset: var(--#{$pf-global}--spacer--xl);
+  --#{$tabs}--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
   --#{$tabs}--m-vertical__list--before--BorderColor: var(--#{$tabs}--before--BorderColor);
   --#{$tabs}--m-vertical__list--before--BorderTopWidth: 0;
   --#{$tabs}--m-vertical__list--before--BorderRightWidth: 0;
   --#{$tabs}--m-vertical__list--before--BorderBottomWidth: 0;
   --#{$tabs}--m-vertical__list--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
 
-  // Box
+  // Tabs, Box modifier
   --#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
   --#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
 
-  // Alt color scheme
-  --#{$tabs}--m-color-scheme--light-300__link--BackgroundColor: transparent;
-  --#{$tabs}--m-color-scheme--light-300__item--m-current__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-150);
-
-  // List
+  // Tabs List
   --#{$tabs}__list--Display: flex;
 
-  // Item
-  --#{$tabs}__item--m-action--before--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-
-  // Tab link
-  --#{$tabs}__link--Color: var(--#{$pf-global}--Color--200);
-  --#{$tabs}__link--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$tabs}__link--BackgroundColor: transparent;
-  --#{$tabs}__link--OutlineOffset: calc(-1 * #{pf-size-prem(6px)});
-  --#{$tabs}__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__link--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}__link--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__link--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-150);
-  --#{$tabs}__item--m-current__link--Color: var(--#{$pf-global}--Color--100);
-  --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$tabs}--m-vertical__link--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}--m-vertical__link--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}--m-box__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-  --#{$tabs}--m-box__item-action--c-button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-400);
-  --#{$tabs}--m-secondary__link--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$tabs}__item--m-action__link--PaddingRight: var(--#{$pf-global}--spacer--xs);
+  // Tabs Item
+  --#{$tabs}__item--BackgroundColor: transparent;
+  --#{$tabs}__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__item--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$tabs}--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$tabs}--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$tabs}__item--m-current--BackgroundColor: transparent;
+  --#{$tabs}--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+
+  // Tabs link
+  --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);
+  --#{$tabs}__link--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$tabs}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$tabs}__link--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$tabs}__link--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__link--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$tabs}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$tabs}__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$tabs}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$tabs}__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
+  --#{$tabs}__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}--m-vertical__link--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-vertical__link--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$tabs}--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$tabs}--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
 
   // Link before
-  --#{$tabs}__link--before--border-color--base: var(--#{$pf-global}--BorderColor--100);
-  --#{$tabs}__link--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
+  --#{$tabs}__link--before--border-width--base: var(--pf-t--global--border--width--regular);
   --#{$tabs}__link--before--BorderTopColor: var(--#{$tabs}__link--before--border-color--base);
   --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__link--before--border-color--base);
   --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
@@ -83,33 +99,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}__link--after--Top: auto;
   --#{$tabs}__link--after--Right: 0;
   --#{$tabs}__link--after--Bottom: 0;
-  --#{$tabs}__link--after--BorderColor: var(--#{$pf-global}--BorderColor--light-100);
+  --#{$tabs}__link--after--BorderColor: var(--pf-t--global--border--color--default);
   --#{$tabs}__link--after--BorderWidth: 0;
   --#{$tabs}__link--after--BorderTopWidth: 0;
   --#{$tabs}__link--after--BorderRightWidth: 0;
   --#{$tabs}__link--after--BorderLeftWidth: 0;
-  --#{$tabs}__link--hover--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$tabs}__link--focus--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$tabs}__link--active--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$tabs}__item--m-current__link--after--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$tabs}__item--m-current__link--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$tabs}__link--child--MarginRight: var(--#{$pf-global}--spacer--md);
+  --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$tabs}__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
 
   // Scroll buttons
-  --#{$tabs}__scroll-button--Color: var(--#{$pf-global}--Color--100);
-  --#{$tabs}__scroll-button--hover--Color: var(--#{$pf-global}--active-color--100);
-  --#{$tabs}__scroll-button--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$tabs}__scroll-button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$tabs}__scroll-button--Width: var(--#{$pf-global}--spacer--2xl);
-  --#{$tabs}__scroll-button--xl--Width: var(--#{$pf-global}--spacer--3xl);
-  --#{$tabs}__scroll-button--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$tabs}__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__scroll-button--Width: var(--pf-t--global--spacer--2xl);
   --#{$tabs}__scroll-button--TransitionDuration--margin: .125s;
   --#{$tabs}__scroll-button--TransitionDuration--transform: .125s;
   --#{$tabs}__scroll-button--TransitionDuration--opacity: .125s;
 
   // Scroll buttons before
   --#{$tabs}__scroll-button--before--BorderColor: var(--#{$tabs}--before--BorderColor);
-  --#{$tabs}__scroll-button--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$tabs}__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
   --#{$tabs}__scroll-button--before--BorderRightWidth: 0;
   --#{$tabs}__scroll-button--before--BorderBottomWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
   --#{$tabs}__scroll-button--before--BorderLeftWidth: 0;
@@ -123,70 +133,61 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
   // Expandable
   --#{$tabs}__toggle--Display: flex;
-  --#{$tabs}__toggle--MarginBottom: 0;
-  --#{$tabs}--m-expanded__toggle--MarginBottom: var(--#{$pf-global}--spacer--md);
   --#{$tabs}__toggle-icon--Color: currentcolor;
-  --#{$tabs}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
   --#{$tabs}__toggle-icon--Rotate: 0;
   --#{$tabs}__toggle-text--MarginLeft: 0;
-  --#{$tabs}__toggle-button__toggle-text--MarginLeft: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}__toggle-button__toggle-text--Color: var(--#{$pf-global}--Color--100);
-  --#{$tabs}__toggle-button--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$tabs}__toggle-button--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$tabs}__toggle-button--MarginLeft: calc(-1 * var(--#{$pf-global}--spacer--md));
-  --#{$tabs}--m-expanded__toggle-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$tabs}__toggle-button__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$tabs}__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
+  --#{$tabs}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
+  --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$tabs}--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 
   // Item action
-  --#{$tabs}__item-action--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$tabs}--m-secondary__item-action--c-button--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$tabs}__item-action--c-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__item-action--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__item-action--c-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__item-action--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$tabs}__item-action--last-child--c-button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$tabs}__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
+  --#{$tabs}__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$tabs}--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
   --#{$tabs}__item-action-icon--MarginTop: #{pf-size-prem(2px)};
 
   // Add button
   --#{$tabs}__add--before--BorderColor: var(--#{$tabs}__link--before--border-color--base);
   --#{$tabs}__add--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
-  --#{$tabs}__add--c-button--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$tabs}--m-secondary__add--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$tabs}__add--c-button--PaddingTop: var(--#{$tabs}__link--PaddingTop);
-  --#{$tabs}__add--c-button--PaddingBottom: var(--#{$tabs}__link--PaddingBottom);
-  --#{$tabs}__add--c-button--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$tabs}__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$tabs}--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
+  --#{$tabs}__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Overflow menu toggle icon
-  --#{$tabs}__link-toggle-icon--Color: var(--#{$pf-global}--Color--200);
+  --#{$tabs}__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$tabs}__link-toggle-icon--Transition: .2s ease-in 0s;
   --#{$tabs}__link-toggle-icon--Rotate: 0;
-  --#{$tabs}__link-toggle-icon--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$tabs}__link--m-expanded__toggle-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$tabs}__link-toggle-icon--FontSize: var(--pf-t--global--FontSize--sm);
   --#{$tabs}__link--m-expanded__toggle-icon--Rotate: 90deg;
-  --#{$tabs}__link--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
-  --#{$tabs}__link--active__toggle-icon--Color: var(--#{$pf-global}--Color--100);
-  --#{$tabs}__link--focus__toggle-icon--Color: var(--#{$pf-global}--Color--100);
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$tabs}__scroll-button--Width: var(--#{$tabs}__scroll-button--xl--Width);
-    --#{$tabs}--m-page-insets--inset: var(--#{$tabs}--m-page-insets--xl--inset);
-  }
+}
 
+.#{$tabs} {
   position: relative;
   display: flex;
   width: var(--#{$tabs}--Width);
-  padding-right: var(--#{$tabs}--inset);
-  padding-left: var(--#{$tabs}--inset);
+  padding-inline-start: var(--#{$tabs}--inset);
+  padding-inline-end: var(--#{$tabs}--inset);
   overflow: hidden; // needed for scroll button animation. limit to pf-m-scrollable in breaking change. may need new modifier so this is applied to a menu that supports scrolling, regardless of whether the scroll buttons are shown.
 
   &::before {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     border: solid var(--#{$tabs}--before--BorderColor);
-    border-width: var(--#{$tabs}--before--BorderTopWidth) var(--#{$tabs}--before--BorderRightWidth) var(--#{$tabs}--before--BorderBottomWidth) var(--#{$tabs}--before--BorderLeftWidth);
+    border-block-start-width: var(--#{$tabs}--before--BorderTopWidth);
+    border-block-end-width: var(--#{$tabs}--before--BorderBottomWidth);
+    border-inline-start-width: var(--#{$tabs}--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$tabs}--before--BorderRightWidth);
   }
 
   // Filled style
@@ -194,7 +195,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     .#{$tabs}__list {
       flex-basis: 100%;
     }
-
+    
     .#{$tabs}__item {
       flex-grow: 1;
 
@@ -221,12 +222,12 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     // Scroll buttons
     .#{$tabs}__scroll-button:nth-of-type(1) {
-      margin-right: 0;
+      margin-inline-end: 0;
       transform: translateX(0);
     }
 
     .#{$tabs}__scroll-button:nth-of-type(2) {
-      margin-left: 0;
+      margin-inline-start: 0;
       transform: translateX(0);
     }
   }
@@ -246,15 +247,17 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
   // Box
   &.pf-m-box {
+    --#{$tabs}__item--BackgroundColor: var(--#{$tabs}--m-box__item--BackgroundColor);
+    --#{$tabs}__item--m-current--BackgroundColor: var(--#{$tabs}--m-box__item--m-current--BackgroundColor);
     --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-box__link--BackgroundColor);
+    --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-box__link--disabled--Color);
     --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-box__link--disabled--BackgroundColor);
+    --#{$tabs}__link--hover--BackgroundColor: var(--#{$tabs}--m-box__link--hover--BackgroundColor);
+    --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-box__item--m-current__link--BackgroundColor);
     --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--before--border-width--base);
-    --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
-    --#{$tabs}__link--disabled--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
     --#{$tabs}__link--after--Top: 0;
     --#{$tabs}__link--after--Bottom: auto;
 
-    // Set hover on top border
     .#{$tabs}__link {
       --#{$tabs}__link--after--BorderTopWidth: var(--#{$tabs}__link--after--BorderWidth);
     }
@@ -272,22 +275,22 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     // stylelint-disable
     // Add border to first-child
     .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
-      border-left-width: var(--#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
+      border-inline-start-width: var(--#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
     }
 
     // Add border to last-child
     .#{$tabs}__item.pf-m-current:last-child .#{$tabs}__link::before {
-      border-right-width: var(--#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth);
+      border-inline-end-width: var(--#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth);
     }
 
     // Collapse left border into scroll button when expanded
     &.pf-m-scrollable .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
-      left: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-inline-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
 
     // Collapse left border into list when expanded
     &.pf-m-scrollable .#{$tabs}__scroll-button:nth-of-type(2)::before {
-      left: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-inline-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
     // stylelint-enable
 
@@ -298,14 +301,14 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     }
     // stylelint-enable
 
-    &.pf-m-color-scheme--light-300 {
-      --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__link--BackgroundColor);
-      --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
-      --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor);
-    }
-
-    .#{$tabs}__item-action .#{$button} {
-      --#{$button}--m-plain--disabled--Color: var(--#{$tabs}--m-box__item-action--c-button--disabled--BackgroundColor);
+    &.pf-m-secondary {
+      --#{$tabs}__item--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--BackgroundColor);
+      --#{$tabs}__item--m-current--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor);
+      --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--BackgroundColor);
+      --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-box--m-secondary__link--disabled--Color);
+      --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor);
+      --#{$tabs}__link--hover--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor);
+      --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor);
     }
   }
 
@@ -314,8 +317,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     --#{$tabs}--Width: var(--#{$tabs}--m-vertical--Width);
     --#{$tabs}--inset: var(--#{$tabs}--m-vertical--inset);
     --#{$tabs}--before--BorderBottomWidth: 0;
-    --#{$tabs}__link--PaddingTop: var(--#{$tabs}--m-vertical__link--PaddingTop);
-    --#{$tabs}__link--PaddingBottom: var(--#{$tabs}--m-vertical__link--PaddingBottom);
+    --#{$tabs}__item--PaddingInlineStart: var(--#{$tabs}--m-vertical__item--PaddingInlineStart);
+    --#{$tabs}__item--PaddingInlineEnd: var(--#{$tabs}--m-vertical__item--PaddingInlineEnd);
+    --#{$tabs}__link--PaddingLeft: var(--#{$tabs}--m-vertical__link--PaddingLeft);
+    --#{$tabs}__link--PaddingRight: var(--#{$tabs}--m-vertical__link--PaddingRight);
     --#{$tabs}__link--before--Left: 0;
     --#{$tabs}__link--disabled--before--BorderBottomWidth: 0;
     --#{$tabs}__link--disabled--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
@@ -338,28 +343,30 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
       &::before {
         position: absolute;
-        right: auto;
+        inset-inline-end: auto;
         border: solid var(--#{$tabs}--m-vertical__list--before--BorderColor);
-        border-width: var(--#{$tabs}--m-vertical__list--before--BorderTopWidth) var(--#{$tabs}--m-vertical__list--before--BorderRightWidth) var(--#{$tabs}--m-vertical__list--before--BorderBottomWidth) var(--#{$tabs}--m-vertical__list--before--BorderLeftWidth);
+        border-block-start-width: var(--#{$tabs}--m-vertical__list--before--BorderTopWidth);
+        border-block-end-width: var(--#{$tabs}--m-vertical__list--before--BorderBottomWidth);
+        border-inline-start-width: var(--#{$tabs}--m-vertical__list--before--BorderLeftWidth);
+        border-inline-end-width: var(--#{$tabs}--m-vertical__list--before--BorderRightWidth);
       }
     }
 
     // Because vertical variant has no scroll buttons, move inset to first/last __item to prevent default scrolling behavior
     .#{$tabs}__item:first-child {
-      margin-top: var(--#{$tabs}--inset);
+      margin-block-start: var(--#{$tabs}--inset);
     }
 
     .#{$tabs}__item:last-child {
-      margin-bottom: var(--#{$tabs}--inset);
+      margin-block-end: var(--#{$tabs}--inset);
     }
 
-    // Set hover on left border
     .#{$tabs}__link {
       --#{$tabs}__link--after--BorderTopWidth: 0;
       --#{$tabs}__link--after--BorderLeftWidth: var(--#{$tabs}__link--after--BorderWidth);
 
       max-width: 100%;
-      text-align: left;
+      text-align: start;
     }
 
     .#{$tabs}__item-text {
@@ -385,9 +392,16 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       }
     }
 
+    &.pf-m-expandable {
+      row-gap: var(--#{$tabs}--m-expandable--RowGap);
+      padding-block-start: var(--#{$tabs}--m-expandable--PaddingBlockStart);
+      padding-block-end: var(--#{$tabs}--m-expandable--PaddingBlockEnd);
+      padding-inline-start: var(--#{$tabs}--m-expandable--PaddingInlineStart);
+      padding-inline-end: var(--#{$tabs}--m-expandable--PaddingInlineEnd);
+    }
+
     &.pf-m-expanded {
       --#{$tabs}__list--Display: flex;
-      --#{$tabs}__toggle--MarginBottom: var(--#{$tabs}--m-expanded__toggle--MarginBottom);
       --#{$tabs}__toggle-icon--Color: var(--#{$tabs}--m-expanded__toggle-icon--Color);
       --#{$tabs}__toggle-icon--Rotate: var(--#{$tabs}--m-expanded__toggle-icon--Rotate);
     }
@@ -398,31 +412,28 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     --#{$tabs}--inset: var(--#{$tabs}--m-vertical--m-box--inset);
     --#{$tabs}--m-vertical__list--before--BorderLeftWidth: 0;
     --#{$tabs}--m-vertical__list--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
+    --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
     --#{$tabs}__link--disabled--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
     --#{$tabs}__link--disabled--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
     --#{$tabs}__link--disabled--before--BorderLeftWidth: 0;
 
     .#{$tabs}__list::before {
-      right: 0;
-      left: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
     }
 
     // stylelint-disable selector-max-class
-    // Remove border from last-child
     .#{$tabs}__item:last-child {
-      --#{$tabs}__link--before--BorderBottomWidth: 0;
       --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
     }
+    .#{$tabs}__item:first-child {
+      --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
+    }
 
     // Add border right color and weight
     .#{$tabs}__item.pf-m-current {
       --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
       --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
-      --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--before--border-width--base);
-
-      &:first-child {
-        --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
-      }
     }
 
     // Add border right color and weight
@@ -432,21 +443,21 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     // Offset vertical border to overlap horizontal border
     .#{$tabs}__link::after {
-      top: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-block-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
 
     // Undo offset to .pf-m-current adjacent item
     .#{$tabs}__item:first-child .#{$tabs}__link::after,
     .#{$tabs}__item.pf-m-current + .#{$tabs}__item .#{$tabs}__link::after {
-      top: 0;
+      inset-block-start: 0;
     }
     // stylelint-enable
   }
 
-  &.pf-m-secondary {
-    --#{$tabs}__link--FontSize: var(--#{$tabs}--m-secondary__link--FontSize);
-    --#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-secondary__item-action--c-button--FontSize);
-    --#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-secondary__add--c-button--FontSize);
+  &.pf-m-subtab {
+    --#{$tabs}__link--FontSize: var(--#{$tabs}--m-subtab__link--FontSize);
+    --#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-subtab__item-action--c-button--FontSize);
+    --#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-subtab__add--c-button--FontSize);
   }
 
   &.pf-m-page-insets {
@@ -465,25 +476,22 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__toggle {
   display: var(--#{$tabs}__toggle--Display);
   align-items: center;
-  margin-bottom: var(--#{$tabs}__toggle--MarginBottom);
 }
 
 .#{$tabs}__toggle-button {
   --#{$tabs}__toggle-text--MarginLeft: var(--#{$tabs}__toggle-button__toggle-text--MarginLeft);
   --#{$tabs}__toggle-text--Color: var(--#{$tabs}__toggle-button__toggle-text--Color);
 
-  margin-top: var(--#{$tabs}__toggle-button--MarginTop);
-  margin-bottom: var(--#{$tabs}__toggle-button--MarginBottom);
-  margin-left: var(--#{$tabs}__toggle-button--MarginLeft);
-
   .#{$button} {
     display: flex;
-    text-align: left;
+    text-align: start;
     white-space: normal;
   }
 }
 
 .#{$tabs}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   color: var(--#{$tabs}__toggle-icon--Color);
   transition: var(--#{$tabs}__toggle-icon--Transition);
@@ -491,7 +499,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-text {
-  margin-left: var(--#{$tabs}__toggle-text--MarginLeft);
+  margin-inline-start: var(--#{$tabs}__toggle-text--MarginLeft);
   color: var(--#{$tabs}__toggle-text--Color, inherit);
 }
 
@@ -511,21 +519,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 // Tabs item
 .#{$tabs}__item {
+  position: relative;
   display: flex;
   flex: none;
+  column-gap: var(--#{$tabs}__item--ColumnGap);
   scroll-snap-align: var(--#{$tabs}__item--ScrollSnapAlign);
+  padding-block-start: var(--#{$tabs}__item--PaddingBlockStart);
+  padding-block-end: var(--#{$tabs}__item--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tabs}__item--PaddingInlineStart);
+  padding-inline-end: var(--#{$tabs}__item--PaddingInlineEnd);
+  background-color: var(--#{$tabs}__item--BackgroundColor);
 
   // Current
   &.pf-m-current {
     --#{$tabs}__link--Color: var(--#{$tabs}__item--m-current__link--Color);
     --#{$tabs}__link--after--BorderColor: var(--#{$tabs}__item--m-current__link--after--BorderColor);
     --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__item--m-current__link--after--BorderWidth);
+    --#{$tabs}__item--BackgroundColor: var(--#{$tabs}__item--m-current--BackgroundColor);
   }
 
   // Action
   &.pf-m-action {
-    --#{$tabs}__link--PaddingRight: var(--#{$tabs}__item--m-action__link--PaddingRight);
-
     position: relative;
 
     &::before {
@@ -548,9 +562,9 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__scroll-button::before,
 .#{$tabs}__add::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border-style: solid;
 }
@@ -562,7 +576,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__item.pf-m-action::after,
 .#{$tabs}__scroll-button::before,
 .#{$tabs}__add::before {
-  top: 0;
+  inset-block-start: 0;
 }
 
 .#{$tabs}__link,
@@ -577,74 +591,56 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     --#{$tabs}__link--after--BorderBottomWidth: var(--#{$tabs}__link--after--BorderWidth); // Set default border target
-
-    background-color: var(--#{$tabs}__link--BackgroundColor);
   }
-
-  position: relative;
+  
   display: flex;
   flex: 1;
-  padding: var(--#{$tabs}__link--PaddingTop) var(--#{$tabs}__link--PaddingRight) var(--#{$tabs}__link--PaddingBottom) var(--#{$tabs}__link--PaddingLeft);
+  column-gap: var(--#{$tabs}__link--ColumnGap);
+  align-items: center;
+  padding-block-start: var(--#{$tabs}__link--PaddingTop);
+  padding-block-end: var(--#{$tabs}__link--PaddingBottom);
+  padding-inline-start: var(--#{$tabs}__link--PaddingLeft);
+  padding-inline-end: var(--#{$tabs}__link--PaddingRight);
   font-size: var(--#{$tabs}__link--FontSize);
   color: var(--#{$tabs}__link--Color);
   text-decoration: none;
-  outline-offset: var(--#{$tabs}__link--OutlineOffset);
-
+  background-color: var(--#{$tabs}__link--BackgroundColor);
+  border-radius: var(--#{$tabs}__link--BorderRadius);
+  
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::before {
       pointer-events: none;
-      border-width: var(--#{$tabs}__link--before--BorderTopWidth) var(--#{$tabs}__link--before--BorderRightWidth) var(--#{$tabs}__link--before--BorderBottomWidth) var(--#{$tabs}__link--before--BorderLeftWidth);
-      border-top-color: var(--#{$tabs}__link--before--BorderTopColor);
-      border-right-color: var(--#{$tabs}__link--before--BorderRightColor);
-      border-bottom-color: var(--#{$tabs}__link--before--BorderBottomColor);
-      border-left-color: var(--#{$tabs}__link--before--BorderLeftColor);
+      border-block-start-color: var(--#{$tabs}__link--before--BorderTopColor);
+      border-block-start-width: var(--#{$tabs}__link--before--BorderTopWidth);
+      border-block-end-color: var(--#{$tabs}__link--before--BorderBottomColor);
+      border-block-end-width: var(--#{$tabs}__link--before--BorderBottomWidth);
+      border-inline-start-color: var(--#{$tabs}__link--before--BorderLeftColor);
+      border-inline-start-width: var(--#{$tabs}__link--before--BorderLeftWidth);
+      border-inline-end-color: var(--#{$tabs}__link--before--BorderRightColor);
+      border-inline-end-width: var(--#{$tabs}__link--before--BorderRightWidth);
     }
   }
 
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::after {
-      top: var(--#{$tabs}__link--after--Top);
-      right: var(--#{$tabs}__link--after--Right);
-      bottom: var(--#{$tabs}__link--after--Bottom);
-      left: var(--#{$tabs}__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
+      inset-block-start: var(--#{$tabs}__link--after--Top);
+      inset-block-end: var(--#{$tabs}__link--after--Bottom);
+      inset-inline-start: var(--#{$tabs}__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
+      inset-inline-end: var(--#{$tabs}__link--after--Right);
       border-color: var(--#{$tabs}__link--after--BorderColor);
-      border-width: var(--#{$tabs}__link--after--BorderTopWidth) var(--#{$tabs}__link--after--BorderRightWidth) var(--#{$tabs}__link--after--BorderBottomWidth) var(--#{$tabs}__link--after--BorderLeftWidth);
-    }
-  }
-
-  // Tab item hover state
-  @at-root .#{$tabs}__item.pf-m-action,
-  & {
-    &:hover {
-      --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--hover--after--BorderWidth);
-    }
-  }
-
-  @at-root .#{$tabs}__item.pf-m-action:focus-within,
-  &:focus {
-    --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--focus--after--BorderWidth);
-  }
-
-  @at-root .#{$tabs}__item.pf-m-action,
-  & {
-    &:active {
-      --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--active--after--BorderWidth);
+      border-block-start-width: var(--#{$tabs}__link--after--BorderTopWidth);
+      border-block-end-width: var(--#{$tabs}__link--after--BorderBottomWidth);
+      border-inline-start-width: var(--#{$tabs}__link--after--BorderLeftWidth);
+      border-inline-end-width: var(--#{$tabs}__link--after--BorderRightWidth);
     }
   }
 
-  &:hover {
-    --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--hover__toggle-icon--Color);
-  }
-
-  &:focus {
-    --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--focus__toggle-icon--Color);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--active__toggle-icon--Color);
+  &:where(:hover, :focus) {
+    --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--hover--BackgroundColor);
+    
+    mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
   }
 
   &:disabled,
@@ -657,34 +653,34 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
     --#{$tabs}__link--Color: var(--#{$tabs}__link--disabled--Color);
-    --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor);
     --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--disabled--before--BorderRightWidth);
     --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--disabled--before--BorderBottomWidth);
     --#{$tabs}__link--before--BorderLeftWidth: var(--#{$tabs}__link--disabled--before--BorderLeftWidth);
     --#{$tabs}__link--after--BorderWidth: 0;
   }
 
+  &:disabled,
+  &.pf-m-disabled,
   &.pf-m-aria-disabled {
-    cursor: default;
+    --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor);
   }
 
-  // un-nest these selectors in a breaking change release
-  .#{$tabs}__item-icon,
-  .#{$tabs}__item-text {
-    margin-right: var(--#{$tabs}__link--child--MarginRight);
+  @at-root .#{$tabs}__item.pf-m-action.pf-m-disabled {
+    --#{$tabs}__link--BackgroundColor: transparent;
+  }
 
-    &:last-child {
-      --#{$tabs}__link--child--MarginRight: 0;
-    }
+  &.pf-m-aria-disabled {
+    cursor: default;
   }
 
   &.pf-m-expanded {
-    --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--m-expanded__toggle-icon--Color);
     --#{$tabs}__link-toggle-icon--Rotate: var(--#{$tabs}__link--m-expanded__toggle-icon--Rotate);
   }
 }
 
 .#{$tabs}__link-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
   color: var(--#{$tabs}__link-toggle-icon--Color);
@@ -697,81 +693,60 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$tabs}__item-action--c-button--FontSize);
-    --#{$button}--PaddingTop: var(--#{$tabs}__item-action--c-button--PaddingTop);
-    --#{$button}--PaddingRight: var(--#{$tabs}__item-action--c-button--PaddingRight);
-    --#{$button}--PaddingBottom: var(--#{$tabs}__item-action--c-button--PaddingBottom);
-    --#{$button}--PaddingLeft: var(--#{$tabs}__item-action--c-button--PaddingLeft);
-
-    outline-offset: var(--#{$tabs}__item-action--c-button--OutlineOffset);
-  }
-
-  &:last-child {
-    --#{$tabs}__item-action--c-button--PaddingRight: var(--#{$tabs}__item-action--last-child--c-button--PaddingRight);
   }
 }
 
 .#{$tabs}__item-action-icon {
   display: inline-block;
-  margin-top: var(--#{$tabs}__item-action-icon--MarginTop);
+  margin-block-start: var(--#{$tabs}__item-action-icon--MarginTop);
 }
 
 // Scroll buttons
 .#{$tabs}__scroll-button {
-  flex: none;
-  width: var(--#{$tabs}__scroll-button--Width);
-  line-height: 1;
-  color: var(--#{$tabs}__scroll-button--Color);
-  background-color: var(--#{$tabs}__scroll-button--BackgroundColor);
-  outline-offset: var(--#{$tabs}__scroll-button--OutlineOffset);
+  padding-block-start: var(--#{$tabs}__scroll-button--PaddingBlockStart);
+  padding-block-end: var(--#{$tabs}__scroll-button--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tabs}__scroll-button--PaddingInlineStart);
+  padding-inline-end: var(--#{$tabs}__scroll-button--PaddingInlineEnd);
   opacity: 0;
   transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
-
-  &:hover,
-  &:active,
-  &:focus {
-    --#{$tabs}__scroll-button--Color: var(--#{$tabs}__scroll-button--hover--Color);
-  }
-
-  &::before {
+  
+    &::before {
     border-color: var(--#{$tabs}__scroll-button--before--BorderColor);
-    border-width: 0 var(--#{$tabs}__scroll-button--before--BorderRightWidth) var(--#{$tabs}__scroll-button--before--BorderBottomWidth) var(--#{$tabs}__scroll-button--before--BorderLeftWidth);
+    border-block-start-width: 0;
+    border-block-end-width: var(--#{$tabs}__scroll-button--before--BorderBottomWidth);
+    border-inline-start-width: var(--#{$tabs}__scroll-button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$tabs}__scroll-button--before--BorderRightWidth);
   }
 
   &:nth-of-type(1) {
     --#{$tabs}__scroll-button--before--BorderRightWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
-    margin-right: calc(var(--#{$tabs}__scroll-button--Width) * -1);
+    margin-inline-end: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(-100%);
   }
 
   &:nth-of-type(2) {
     --#{$tabs}__scroll-button--before--BorderLeftWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
-    margin-left: calc(var(--#{$tabs}__scroll-button--Width) * -1);
+    margin-inline-start: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(100%);
   }
-
-  &:disabled {
-    --#{$tabs}__scroll-button--Color: var(--#{$tabs}__scroll-button--disabled--Color);
-
-    pointer-events: none;
-  }
 }
 
 .#{$tabs}__add {
   position: relative;
   display: flex;
+  padding-block-start: var(--#{$tabs}__add--PaddingBlockStart);
+  padding-block-end: var(--#{$tabs}__add--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tabs}__add--PaddingInlineStart);
+  padding-inline-end: var(--#{$tabs}__add--PaddingInlineEnd);
 
   &::before {
-    border-left: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
+    border-inline-start: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
   }
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$tabs}__add--c-button--FontSize);
-    --#{$button}--PaddingTop: var(--#{$tabs}__add--c-button--PaddingTop);
-    --#{$button}--PaddingBottom: var(--#{$tabs}__add--c-button--PaddingBottom);
-
-    outline-offset: var(--#{$tabs}__add--c-button--OutlineOffset);
   }
 }
 
@@ -792,10 +767,3 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   }
 }
 // stylelint-enable
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/tabs";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-tabs;
-}