@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

package/components/Pagination/pagination.css

@@ -6,116 +6,80 @@
   appearance: none;
 }
 
-.pf-v5-c-pagination {
+:where(:root),
+:where(.pf-v5-c-pagination) {
   --pf-v5-c-pagination--inset: 0;
-  --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
-  --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
-  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
-  --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
-  --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
+  --pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v5-c-form-control--PaddingRight) + var(--pf-v5-c-form-control--PaddingLeft)) + (var(--pf-v5-c-form-control--before--BorderWidth) * 2));
   --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-v5-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-v5-c-pagination__total-items--Display: block;
   --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
   --pf-v5-c-pagination--m-display-full__total-items--Display: none;
-  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
-  --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --pf-v5-c-pagination--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-sticky--ZIndex: 100;
   --pf-v5-c-pagination--m-sticky--Top: 0;
-  --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
+  --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v5-c-pagination--m-bottom--Bottom: 0;
-  --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-pagination--c-menu-toggle--Display: none;
-  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
+  --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+  --pf-v5-c-pagination__page-menu--Display: none;
+  --pf-v5-c-pagination--m-display-summary__page-menu--Display: none;
+  --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  .pf-v5-c-pagination {
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
-    --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
+    --pf-v5-c-pagination__page-menu--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-pagination {
-    --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
-    --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
-    --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
   }
 }
-.pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
-  margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
+
+.pf-v5-c-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--pf-v5-c-pagination--ColumnGap);
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline-start: var(--pf-v5-c-pagination--inset);
+  padding-inline-end: var(--pf-v5-c-pagination--inset);
 }
-.pf-v5-c-pagination .pf-v5-c-menu-toggle {
-  display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
-  font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
+.pf-v5-c-pagination .pf-v5-c-pagination__page-menu {
+  display: var(--pf-v5-c-pagination__page-menu--Display);
 }
 .pf-v5-c-pagination.pf-m-bottom {
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
   --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
   --pf-v5-c-pagination--m-sticky--Top: auto;
   position: sticky;
   inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
   justify-content: center;
+  padding-inline-start: var(--pf-v5-c-pagination--m-bottom--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--m-bottom--PaddingRight);
   background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
-  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
-  outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
-}
 .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
   --pf-v5-c-pagination--m-bottom--MarginTop: 0;
   --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -127,7 +91,7 @@
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
   display: none;
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
+.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
   position: absolute;
   display: block;
 }
@@ -143,10 +107,6 @@
     --pf-v5-c-pagination--m-bottom--Bottom: auto;
     position: relative;
     justify-content: flex-end;
-    padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
-    padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
-    padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
-    padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -156,7 +116,7 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: inline-flex;
   }
-  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
     position: relative;
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -176,23 +136,13 @@
   background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
 }
-@media screen and (min-width: 768px) {
-  .pf-v5-c-pagination.pf-m-sticky {
-    padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
-    padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
-    padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
-    padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
-  }
-}
-.pf-v5-c-pagination.pf-m-compact {
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
-}
 .pf-v5-c-pagination.pf-m-page-insets {
   --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
 }
 
 .pf-v5-c-pagination__nav {
   display: var(--pf-v5-c-pagination__nav--Display);
+  column-gap: var(--pf-v5-c-pagination__nav--ColumnGap);
   justify-content: flex-end;
 }
 
@@ -200,28 +150,15 @@
   scale: -1 1;
 }
 
-.pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
-  font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
-}
-.pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
-  margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
-}
-
 .pf-v5-c-pagination__nav-page-select {
   display: flex;
+  column-gap: var(--pf-v5-c-pagination__nav-page-select--ColumnGap);
   align-items: center;
-  padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
 }
 .pf-v5-c-pagination__nav-page-select > * {
   font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
   white-space: nowrap;
 }
-.pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
-  margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
-}
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
@@ -231,12 +168,12 @@
 
 .pf-v5-c-pagination.pf-m-display-summary {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+  --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-display-full {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+  --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-inset-none {
@@ -260,12 +197,12 @@
 @media (min-width: 576px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -290,12 +227,12 @@
 @media (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -320,12 +257,12 @@
 @media (min-width: 992px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -350,12 +287,12 @@
 @media (min-width: 1200px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -380,12 +317,12 @@
 @media (min-width: 1450px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
@@ -406,8 +343,4 @@
   .pf-v5-c-pagination.pf-m-inset-2xl-on-2xl {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
   }
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
-  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Pagination/pagination.scss

@@ -2,49 +2,24 @@
 $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$pagination} {
+:where(:root),
+:where(.#{$pagination}) {
   --#{$pagination}--inset: 0;
-  --#{$pagination}--PaddingRight: var(--#{$pagination}--inset);
-  --#{$pagination}--PaddingLeft: var(--#{$pagination}--inset);
+  --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
 
   // Page insets
-  --#{$pagination}--m-page-insets--inset: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-page-insets--xl--inset: var(--#{$pf-global}--spacer--lg);
-
-  // children
-  --#{$pagination}--child--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--child--MarginRight: 0;
-  --#{$pagination}--m-bottom--child--md--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
-
-  // dropdown
-  --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--lg);
 
   // nav
   --#{$pagination}__nav--Display: none;
   --#{$pagination}--m-display-summary__nav--Display: none;
   --#{$pagination}--m-display-full__nav--Display: inline-flex;
-
-  // nav control
-  --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}__nav-control--c-button--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}--m-compact__nav-control--nav-control--MarginLeft: var(--#{$pf-global}--spacer--md);
+  --#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // nav page select
-  --#{$pagination}__nav-page-select--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$pagination}__nav-page-select--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}__nav-page-select--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}__nav-page-select--child--MarginRight: var(--#{$pf-global}--spacer--xs);
-  --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--sm) * 2 + var(--#{$pf-global}--BorderWidth--sm) * 2);
+  --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$pagination}__nav-page-select--c-form-control--width-base: calc((var(--#{$form-control}--PaddingRight) + var(--#{$form-control}--PaddingLeft)) + (var(--#{$form-control}--before--BorderWidth) * 2));
   --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
   --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));
 
@@ -54,89 +29,62 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-display-full__total-items--Display: none;
 
   // top
-  --#{$pagination}--m-sticky--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$pagination}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$pagination}--m-sticky--md--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$pagination}--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-sticky--ZIndex: 100; // TODO: replace with z-index token
   --#{$pagination}--m-sticky--Top: 0;
 
   // bottom
-  --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$pagination}--m-bottom--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
+  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$pagination}--m-bottom--Bottom: 0;
-  --#{$pagination}--m-bottom--md--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
+  --#{$pagination}--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
 
   // options menu
-  --#{$pagination}--c-menu-toggle--Display: none;
-  --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
-  --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
+  --#{$pagination}__page-menu--Display: none;
+  --#{$pagination}--m-display-summary__page-menu--Display: none;
+  --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft);
-    --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
-    --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --#{$pagination}--m-bottom--BoxShadow: none;
-    --#{$pagination}--c-menu-toggle--Display: inline-flex;
+    --#{$pagination}__page-menu--Display: inline-flex;
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pagination}--m-bottom--xl--PaddingRight);
-    --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pagination}--m-bottom--xl--PaddingLeft);
     --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
-    --#{$pagination}--m-page-insets--inset: var(--#{$pagination}--m-page-insets--xl--inset);
   }
+}
 
+.#{$pagination} {
   display: flex;
   flex-wrap: wrap;
+  column-gap: var(--#{$pagination}--ColumnGap);
   align-items: center;
   justify-content: flex-end;
-  padding-inline-start: var(--#{$pagination}--PaddingLeft);
-  padding-inline-end: var(--#{$pagination}--PaddingRight);
+  padding-inline-start: var(--#{$pagination}--inset);
+  padding-inline-end: var(--#{$pagination}--inset);
 
-  // stylelint-disable selector-not-notation
-  // update to single :not() in breaking change
-  > *:not(:last-child):not(.#{$pagination}__total-items) {
-    margin-inline-end: var(--#{$pagination}--child--MarginRight);
-  }
-
-  .#{$menu-toggle} {
-    display: var(--#{$pagination}--c-menu-toggle--Display);
-    font-size: var(--#{$pagination}--c-menu-toggle--FontSize);
+  .#{$pagination}__page-menu {
+    display: var(--#{$pagination}__page-menu--Display);
   }
 
   &.pf-m-bottom {
-    --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-bottom--child--MarginRight);
-    --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
-    --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
     --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
     --#{$pagination}--m-sticky--Top: auto;
 
-    .#{$pagination}__nav-control {
-      .#{$button} {
-        --#{$button}--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingTop);
-        --#{$button}--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom);
-
-        outline-offset: var(--#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset);
-      }
-    }
-
     position: sticky;
-   inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
+    inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
     justify-content: center;
+    padding-inline-start: var(--#{$pagination}--m-bottom--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}--m-bottom--PaddingRight);
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
 
@@ -154,7 +102,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
       display: none;
     }
 
-    .#{$menu-toggle} {
+    .#{$pagination}__page-menu {
       position: absolute;
       display: block;
     }
@@ -172,10 +120,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
       position: relative;
       justify-content: flex-end;
-      padding-block-start: var(--#{$pagination}--m-bottom--md--PaddingTop);
-      padding-block-end: var(--#{$pagination}--m-bottom--md--PaddingBottom);
-      padding-inline-start: var(--#{$pagination}--m-bottom--md--PaddingLeft);
-      padding-inline-end: var(--#{$pagination}--m-bottom--md--PaddingRight);
 
       .#{$pagination}__nav-control.pf-m-first,
       .#{$pagination}__nav-control.pf-m-last,
@@ -187,7 +131,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
         display: inline-flex;
       }
 
-      .#{$menu-toggle} {
+      .#{$pagination}__page-menu {
         position: relative;
       }
 
@@ -210,17 +154,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     padding-inline-end: var(--#{$pagination}--m-sticky--PaddingRight);
     background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
-
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      padding-block-start: var(--#{$pagination}--m-sticky--md--PaddingTop);
-      padding-block-end: var(--#{$pagination}--m-sticky--md--PaddingBottom);
-      padding-inline-start: var(--#{$pagination}--m-sticky--md--PaddingLeft);
-      padding-inline-end: var(--#{$pagination}--m-sticky--md--PaddingRight);
-    }
-  }
-
-  &.pf-m-compact {
-    --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-compact--child--MarginRight);
   }
 
   &.pf-m-page-insets {
@@ -232,38 +165,24 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 // nav
 .#{$pagination}__nav {
   display: var(--#{$pagination}__nav--Display);
+  column-gap: var(--#{$pagination}__nav--ColumnGap);
   justify-content: flex-end;
 }
 
 // nav control
 .#{$pagination}__nav-control {
   @include pf-v5-mirror-inline-on-rtl;
-
-  .#{$button} {
-    padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
-    padding-inline-end: var(--#{$pagination}__nav-control--c-button--PaddingRight);
-    font-size: var(--#{$pagination}__nav-control--c-button--FontSize);
-  }
-
-  .#{$pagination}.pf-m-compact & + & {
-    margin-inline-start: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
-  }
 }
 
 // nav page element
 .#{$pagination}__nav-page-select {
   display: flex;
+  column-gap: var(--#{$pagination}__nav-page-select--ColumnGap);
   align-items: center;
-  padding-inline-start: var(--#{$pagination}__nav-page-select--PaddingLeft);
-  padding-inline-end: var(--#{$pagination}__nav-page-select--PaddingRight);
 
   > * {
     font-size: var(--#{$pagination}__nav-page-select--FontSize);
     white-space: nowrap;
-
-    &:not(:last-child) {
-      margin-inline-end: var(--#{$pagination}__nav-page-select--child--MarginRight);
-    }
   }
 
   .#{$form-control} {
@@ -288,13 +207,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     @include pf-v5-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
-        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-summary--c-menu-toggle--Display);
+        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-summary__total-items--Display);
       }
 
       &.pf-m-display-full#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-full__nav--Display);
-        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-full--c-menu-toggle--Display);
+        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-full__page-menu--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
       }
 
@@ -307,10 +226,3 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   }
 }
 // stylelint-enable
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/pagination";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-pagination;
-}