@patternfly/patternfly 6.0.0-alpha.49 → 6.0.0-alpha.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7801,6 +7801,10 @@ button.pf-v5-c-breadcrumb__link {
7801
7801
  --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7802
7802
  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7803
7803
  --pf-v5-c-button--TextDecoration: none;
7804
+ --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
7805
+ --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
7806
+ --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
7807
+ --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
7804
7808
  --pf-v5-c-button--hover--BackgroundColor: transparent;
7805
7809
  --pf-v5-c-button--hover--BorderColor: transparent;
7806
7810
  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -8000,7 +8004,10 @@ button.pf-v5-c-breadcrumb__link {
8000
8004
 
8001
8005
  .pf-v5-c-button {
8002
8006
  position: relative;
8003
- display: inline-block;
8007
+ display: var(--pf-v5-c-button--Display, initial);
8008
+ flex: var(--pf-v5-c-button--Flex, initial);
8009
+ align-items: var(--pf-v5-c-button--AlignItems, initial);
8010
+ justify-content: var(--pf-v5-c-button--JustifyContent, initial);
8004
8011
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
8005
8012
  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
8006
8013
  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
@@ -8016,7 +8023,10 @@ button.pf-v5-c-breadcrumb__link {
8016
8023
  user-select: none;
8017
8024
  background-color: var(--pf-v5-c-button--BackgroundColor);
8018
8025
  border: 0;
8019
- border-radius: var(--pf-v5-c-button--BorderRadius);
8026
+ border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
8027
+ border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
8028
+ border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
8029
+ border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
8020
8030
  }
8021
8031
  .pf-v5-c-button::after {
8022
8032
  position: absolute;
@@ -19473,1017 +19483,335 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19473
19483
  color: var(--pf-v5-c-multiple-file-upload__status-item-progress-size--Color);
19474
19484
  }
19475
19485
 
19476
- .pf-v5-c-nav {
19477
- --pf-v5-c-nav--Transition: var(--pf-v5-global--Transition);
19478
- --pf-v5-c-nav--m-light__item--before--BorderColor: var(--pf-v5-global--BorderColor--300);
19479
- --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19480
- --pf-v5-c-nav--m-light__link--Color: var(--pf-t--global--text--color--subtle);
19481
- --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-t--global--text--color--subtle);
19482
- --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-t--global--text--color--subtle);
19483
- --pf-v5-c-nav--m-light__link--active--Color: var(--pf-t--global--text--color--subtle);
19484
- --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-t--global--text--color--regular);
19485
- --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19486
- --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19487
- --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19488
- --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19489
- --pf-v5-c-nav--m-light__link--before--BorderColor: var(--pf-v5-global--BorderColor--300);
19490
- --pf-v5-c-nav--m-light__link--after--BorderColor: var(--pf-v5-global--active-color--100);
19491
- --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
19492
- --pf-v5-c-nav--m-light__section-title--Color: var(--pf-t--global--text--color--regular);
19493
- --pf-v5-c-nav--m-light__section-title--BorderBottomColor: transparent;
19494
- --pf-v5-c-nav--m-light--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--300);
19495
- --pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19496
- --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19497
- --pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19498
- --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
19499
- --pf-v5-c-nav__list--PaddingTop: var(--pf-v5-global--spacer--sm);
19500
- --pf-v5-c-nav__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
19501
- --pf-v5-c-nav__item--MarginTop: 0;
19502
- --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19503
- --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
19504
- --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
19505
- --pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
19486
+ :root,
19487
+ :where(.pf-v5-c-nav) {
19488
+ --pf-v5-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19489
+ --pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19490
+ --pf-v5-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
19491
+ --pf-v5-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
19492
+ --pf-v5-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
19493
+ --pf-v5-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
19494
+ --pf-v5-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
19495
+ --pf-v5-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
19496
+ --pf-v5-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
19497
+ --pf-v5-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
19498
+ --pf-v5-c-nav--RowGap: var(--pf-t--global--spacer--lg);
19499
+ --pf-v5-c-nav--ColumnGap: var(--pf-t--global--spacer--sm);
19500
+ --pf-v5-c-nav--AlignItems: baseline;
19501
+ --pf-v5-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
19502
+ --pf-v5-c-nav--FontWeight: var(--pf-t--global--font--weight--body);
19503
+ --pf-v5-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
19504
+ --pf-v5-c-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19505
+ --pf-v5-c-nav--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
19506
+ --pf-v5-c-nav__list--ScrollSnapTypeAxis: x;
19507
+ --pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity;
19508
+ --pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis) var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness);
19509
+ --pf-v5-c-nav__item--ScrollSnapAlign: end;
19510
+ --pf-v5-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
19511
+ --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
19512
+ --pf-v5-c-nav__item--RowGap: var(--pf-v5-c-nav__list--RowGap);
19506
19513
  --pf-v5-c-nav__item__toggle-icon--Rotate: 0;
19507
19514
  --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
19508
- --pf-v5-c-nav__item--BorderRadius: var(--pf-t--global--border--radius--small);
19509
- --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
19510
- --pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19511
- --pf-v5-c-nav__link--FontSize: var(--pf-t--global--font--size--body--default);
19512
- --pf-v5-c-nav__link--FontWeight: var(--pf-t--global--font--weight--body);
19513
- --pf-v5-c-nav__link--PaddingTop: var(--pf-t--global--spacer--md);
19514
- --pf-v5-c-nav__link--PaddingRight: var(--pf-t--global--spacer--md);
19515
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-t--global--spacer--md);
19516
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-t--global--spacer--md);
19517
19515
  --pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
19518
- --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-t--global--spacer--lg);
19519
- --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
19516
+ --pf-v5-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
19517
+ --pf-v5-c-nav__link--WhiteSpace: normal;
19520
19518
  --pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
19521
- --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--subtle);
19522
- --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--subtle);
19523
- --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--subtle);
19519
+ --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular);
19520
+ --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--regular);
19521
+ --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--regular);
19522
+ --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
19523
+ --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
19524
+ --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
19525
+ --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
19524
19526
  --pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
19525
- --pf-v5-c-nav__link--BackgroundColor: transparent;
19526
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19527
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19528
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19529
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19530
- --pf-v5-c-nav__link--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
19531
- --pf-v5-c-nav__link--before--BorderColor: transparent;
19532
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
19533
- --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
19534
- --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
19535
- --pf-v5-c-nav__link--active--before--BorderBottomWidth: 0;
19536
- --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0;
19537
- --pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-global--active-color--400);
19538
- --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-global--active-color--400);
19539
- --pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-global--active-color--400);
19540
- --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-global--active-color--400);
19541
- --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
19542
- --pf-v5-c-nav__link--after--BorderLeftWidth: 0;
19543
- --pf-v5-c-nav__link--hover--after--BorderLeftWidth: 0;
19544
- --pf-v5-c-nav__link--focus--after--BorderLeftWidth: 0;
19545
- --pf-v5-c-nav__link--active--after--BorderLeftWidth: 0;
19546
- --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--xl);
19547
- --pf-v5-c-nav--m-horizontal__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19548
- --pf-v5-c-nav--m-horizontal__link--PaddingRight: var(--pf-v5-global--spacer--md);
19549
- --pf-v5-c-nav--m-horizontal__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
19550
- --pf-v5-c-nav--m-horizontal__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19551
- --pf-v5-c-nav--m-horizontal__link--lg--PaddingTop: var(--pf-v5-global--spacer--lg);
19552
- --pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom: var(--pf-v5-global--spacer--lg);
19553
- --pf-v5-c-nav--m-horizontal__link--Right: var(--pf-v5-global--spacer--md);
19554
- --pf-v5-c-nav--m-horizontal__link--Left: var(--pf-v5-global--spacer--md);
19555
- --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-200);
19556
- --pf-v5-c-nav--m-horizontal__link--hover--Color: var(--pf-v5-global--active-color--400);
19557
- --pf-v5-c-nav--m-horizontal__link--focus--Color: var(--pf-v5-global--active-color--400);
19558
- --pf-v5-c-nav--m-horizontal__link--active--Color: var(--pf-v5-global--active-color--400);
19559
- --pf-v5-c-nav--m-horizontal__link--m-current--Color: var(--pf-v5-global--active-color--400);
19560
- --pf-v5-c-nav--m-horizontal__link--BackgroundColor: transparent;
19561
- --pf-v5-c-nav--m-horizontal__link--hover--BackgroundColor: transparent;
19562
- --pf-v5-c-nav--m-horizontal__link--focus--BackgroundColor: transparent;
19563
- --pf-v5-c-nav--m-horizontal__link--active--BackgroundColor: transparent;
19564
- --pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor: transparent;
19565
- --pf-v5-c-nav--m-horizontal__link--before--BorderColor: var(--pf-v5-global--active-color--400);
19566
- --pf-v5-c-nav--m-horizontal__link--before--BorderWidth: 0;
19567
- --pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19568
- --pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19569
- --pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19570
- --pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19571
- --pf-v5-c-nav--m-tertiary__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19572
- --pf-v5-c-nav--m-tertiary__link--PaddingRight: var(--pf-v5-global--spacer--md);
19573
- --pf-v5-c-nav--m-tertiary__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
19574
- --pf-v5-c-nav--m-tertiary__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19575
- --pf-v5-c-nav--m-tertiary__link--Right: var(--pf-v5-global--spacer--md);
19576
- --pf-v5-c-nav--m-tertiary__link--Left: var(--pf-v5-global--spacer--md);
19577
- --pf-v5-c-nav--m-tertiary__link--Color: var(--pf-v5-global--Color--dark-100);
19578
- --pf-v5-c-nav--m-tertiary__link--hover--Color: var(--pf-v5-global--active-color--100);
19579
- --pf-v5-c-nav--m-tertiary__link--focus--Color: var(--pf-v5-global--active-color--100);
19580
- --pf-v5-c-nav--m-tertiary__link--active--Color: var(--pf-v5-global--active-color--100);
19581
- --pf-v5-c-nav--m-tertiary__link--m-current--Color: var(--pf-v5-global--active-color--100);
19582
- --pf-v5-c-nav--m-tertiary__link--BackgroundColor: transparent;
19583
- --pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor: transparent;
19584
- --pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor: transparent;
19585
- --pf-v5-c-nav--m-tertiary__link--active--BackgroundColor: transparent;
19586
- --pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor: transparent;
19587
- --pf-v5-c-nav--m-tertiary__link--before--BorderColor: var(--pf-v5-global--active-color--100);
19588
- --pf-v5-c-nav--m-tertiary__link--before--BorderWidth: 0;
19589
- --pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19590
- --pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19591
- --pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19592
- --pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
19593
- --pf-v5-c-nav--m-tertiary__scroll-button--Color: var(--pf-v5-global--Color--dark-100);
19594
- --pf-v5-c-nav--m-tertiary__scroll-button--hover--Color: var(--pf-v5-global--active-color--100);
19595
- --pf-v5-c-nav--m-tertiary__scroll-button--focus--Color: var(--pf-v5-global--active-color--100);
19596
- --pf-v5-c-nav--m-tertiary__scroll-button--active--Color: var(--pf-v5-global--active-color--100);
19597
- --pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--200);
19598
- --pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--300);
19599
- --pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor: var(--pf-v5-global--disabled-color--300);
19600
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19601
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-v5-global--spacer--md);
19602
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
19603
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19604
- --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop: var(--pf-v5-global--spacer--md);
19605
- --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19606
- --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom: var(--pf-v5-global--spacer--md);
19607
- --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19608
- --pf-v5-c-nav--m-horizontal-subnav__link--FontSize: var(--pf-v5-global--FontSize--sm);
19609
- --pf-v5-c-nav--m-horizontal-subnav__link--Color: var(--pf-v5-global--Color--light-200);
19610
- --pf-v5-c-nav--m-horizontal-subnav__link--hover--Color: var(--pf-v5-global--Color--light-100);
19611
- --pf-v5-c-nav--m-horizontal-subnav__link--focus--Color: var(--pf-v5-global--Color--light-100);
19612
- --pf-v5-c-nav--m-horizontal-subnav__link--active--Color: var(--pf-v5-global--Color--light-100);
19613
- --pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color: var(--pf-v5-global--Color--light-100);
19614
- --pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor: transparent;
19615
- --pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19616
- --pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19617
- --pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19618
- --pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19619
- --pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor: transparent;
19620
- --pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor: var(--pf-v5-global--palette--black-800);
19621
- --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor: var(--pf-v5-global--palette--black-800);
19622
- --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor: var(--pf-v5-global--palette--black-800);
19623
- --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor: var(--pf-v5-global--palette--black-800);
19624
- --pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19625
- --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19626
- --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19627
- --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19628
- --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm);
19629
- --pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft);
19630
- --pf-v5-c-nav__subnav__link--MarginTop: 0;
19631
- --pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19632
- --pf-v5-c-nav__subnav__link--PaddingRight: var(--pf-v5-global--spacer--lg);
19633
- --pf-v5-c-nav__subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
19634
- --pf-v5-c-nav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--lg);
19635
- --pf-v5-c-nav__subnav__link--FontSize: var(--pf-v5-global--FontSize--sm);
19636
- --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--200);
19637
- --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--200);
19638
- --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--200);
19639
- --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
19640
- --pf-v5-c-nav__subnav__link--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19641
- --pf-v5-c-nav__subnav__link--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19642
- --pf-v5-c-nav__subnav__link--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19643
- --pf-v5-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
19644
- --pf-v5-c-nav__subnav--MaxHeight: 0;
19645
- --pf-v5-c-nav__subnav__subnav--PaddingLeft: var(--pf-v5-global--spacer--lg);
19646
- --pf-v5-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19647
- --pf-v5-c-nav__subnav__subnav__link--FontSize: var(--pf-v5-global--FontSize--xs);
19648
- --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
19649
- --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
19650
- --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
19651
- --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
19652
- --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
19653
- --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
19654
- --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19655
- --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
19656
- --pf-v5-c-nav__section__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
19657
- --pf-v5-c-nav__section__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19658
- --pf-v5-c-nav__section__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19659
- --pf-v5-c-nav__section__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19660
- --pf-v5-c-nav__section__link--FontSize: var(--pf-v5-global--FontSize--md);
19661
- --pf-v5-c-nav__section__link--before--BorderBottomWidth: 0;
19662
- --pf-v5-c-nav__section__link--hover--after--BorderColor: transparent;
19663
- --pf-v5-c-nav__section__link--focus--after--BorderColor: transparent;
19664
- --pf-v5-c-nav__section__link--active--after--BorderColor: transparent;
19665
- --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
19666
- --pf-v5-c-nav__section__link--hover--after--BorderWidth: 0;
19667
- --pf-v5-c-nav__section__link--focus--after--BorderWidth: 0;
19668
- --pf-v5-c-nav__section__link--active--after--BorderWidth: 0;
19669
- --pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
19670
- --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl);
19671
- --pf-v5-c-nav__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
19672
- --pf-v5-c-nav__section-title--PaddingRight: var(--pf-t--global--spacer--md);
19673
- --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
19674
- --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
19675
- --pf-v5-c-nav__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
19676
- --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
19677
- --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
19678
- --pf-v5-c-nav__section-title--FontSize: var(--pf-t--global--font--size--body--default);
19679
- --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
19680
- --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
19681
- --pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
19682
- --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100);
19683
- --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400);
19684
- --pf-v5-c-nav__scroll-button--focus--Color: var(--pf-v5-global--active-color--400);
19685
- --pf-v5-c-nav__scroll-button--active--Color: var(--pf-v5-global--active-color--400);
19686
- --pf-v5-c-nav__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
19687
- --pf-v5-c-nav__scroll-button--BackgroundColor: transparent;
19688
- --pf-v5-c-nav__scroll-button--Width: var(--pf-v5-global--target-size--MinWidth);
19689
- --pf-v5-c-nav__scroll-button--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
19690
- --pf-v5-c-nav__scroll-button--Transition: margin .125s, transform .125s, opacity .125s;
19691
- --pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
19692
- --pf-v5-c-nav__scroll-button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19693
- --pf-v5-c-nav__scroll-button--before--BorderRightWidth: 0;
19694
- --pf-v5-c-nav__scroll-button--before--BorderLeftWidth: 0;
19695
- --pf-v5-c-nav__scroll-button--disabled--before--BorderColor: transparent;
19696
- --pf-v5-c-nav__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
19697
- --pf-v5-c-nav__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
19698
- --pf-v5-c-nav__toggle--FontSize: var(--pf-v5-global--icon--FontSize--md);
19699
- --pf-v5-c-nav__toggle-icon--Transition: var(--pf-v5-global--TransitionDuration);
19700
- --pf-v5-c-nav--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
19701
- --pf-v5-c-nav--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
19702
- --pf-v5-c-nav--c-divider--PaddingRight: 0;
19703
- --pf-v5-c-nav--c-divider--PaddingLeft: 0;
19704
- --pf-v5-c-nav--c-divider--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19705
- --pf-v5-c-nav__list--ScrollSnapTypeAxis: x;
19706
- --pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity;
19707
- --pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis) var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness);
19708
- --pf-v5-c-nav__item--ScrollSnapAlign: end;
19709
- --pf-v5-c-nav__item--m-flyout--c-menu--top-offset: 0px;
19710
- --pf-v5-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
19711
- --pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
19712
- --pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
19713
- --pf-v5-c-nav__item--m-flyout--MarginTop: 0;
19714
- --pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19715
- --pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19716
- --pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19717
- --pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
19718
- --pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
19719
- --pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
19720
- --pf-v5-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
19721
- --pf-v5-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-v5-c-nav__item--m-flyout--c-menu--top-offset));
19722
- --pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-v5-c-nav__item--m-flyout--c-menu--Top) - var(--pf-v5-c-nav__item--before--BorderWidth));
19723
- --pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
19724
- --pf-v5-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--left-offset));
19725
- --pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset));
19726
- --pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
19727
- --pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
19728
- --pf-v5-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-v5-c-nav__link--Color);
19729
- --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
19730
- --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--lg);
19731
- --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
19732
- --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
19733
- --pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-v5-global--Color--light-200);
19734
- --pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm);
19735
- --pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-v5-c-nav__link--OutlineOffset);
19736
- --pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth: var(--pf-v5-c-nav__item--before--BorderWidth);
19737
- --pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-v5-c-nav__item--before--BorderColor);
19738
- --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19739
- --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
19740
- --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
19741
- --pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav__link--hover--BackgroundColor);
19742
- --pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav__link--focus--BackgroundColor);
19743
- --pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-nav__link--active--BackgroundColor);
19744
- --pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
19745
- --pf-v5-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
19746
- --pf-v5-c-nav--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
19747
- --pf-v5-c-nav--c-menu__list--PaddingTop: 0;
19748
- --pf-v5-c-nav--c-menu__list--PaddingBottom: 0;
19749
- --pf-v5-c-nav--c-menu__list-item--Color: var(--pf-v5-global--Color--light-100);
19750
- --pf-v5-c-nav--c-menu__list-item--hover--Color: var(--pf-v5-global--Color--light-100);
19751
- --pf-v5-c-nav--c-menu__list-item--active--Color: var(--pf-v5-global--Color--light-100);
19752
- --pf-v5-c-nav--c-menu__list-item--focus-within--Color: var(--pf-v5-global--Color--light-100);
19753
- --pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19754
- --pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19755
- --pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--lg);
19756
- --pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-v5-global--FontWeight--bold);
19757
- --pf-v5-c-nav--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--md);
19758
- --pf-v5-c-nav--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
19759
- --pf-v5-c-nav--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--md);
19760
- --pf-v5-c-nav--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
19761
- --pf-v5-c-nav--c-menu__item--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19762
- --pf-v5-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19763
- --pf-v5-c-nav--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm);
19764
- --pf-v5-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
19765
- --pf-v5-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
19766
- --pf-v5-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
19767
- --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: 0;
19768
- --pf-v5-c-nav--c-menu__item--after--BorderLeftColor: transparent;
19769
- --pf-v5-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19770
- --pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--xl);
19771
- --pf-v5-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
19772
- --pf-v5-c-nav--c-menu__item-description--Color: var(--pf-v5-global--Color--400);
19773
- --pf-v5-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
19774
- --pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
19775
- --pf-v5-c-nav--c-menu--m-flyout--Top: 0;
19776
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-v5-c-nav--c-menu--m-flyout--Top) * -1);
19777
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: auto;
19778
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
19779
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--left-offset));
19780
- --pf-v5-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset));
19781
- --pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
19782
- --pf-v5-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
19783
- --pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-v5-global--spacer--sm);
19784
- --pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-v5-global--spacer--lg);
19785
- --pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
19786
- --pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
19787
- --pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19788
- --pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
19789
- --pf-v5-c-nav__toggle--m-start--MarginRight: var(--pf-v5-global--spacer--sm);
19790
- position: relative;
19527
+ --pf-v5-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
19528
+ --pf-v5-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
19529
+ --pf-v5-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
19530
+ --pf-v5-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
19531
+ --pf-v5-c-nav__scroll-button--BorderRadius: var(--pf-t--global--border--radius--pill);
19532
+ --pf-v5-c-nav__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm);
19533
+ --pf-v5-c-nav__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
19534
+ --pf-v5-c-nav__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
19535
+ --pf-v5-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19536
+ --pf-v5-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19537
+ --pf-v5-c-nav__toggle--TranslateY: calc((var(--pf-v5-c-nav--LineHeight) * var(--pf-v5-c-nav--FontSize) / 2) - 50%);
19538
+ --pf-v5-c-nav__link--clickable-inset--InlineStart: 0;
19539
+ --pf-v5-c-nav__link--clickable-inset--InlineEnd: 0;
19540
+ --pf-v5-c-nav__link--clickable-inset--Inline: var(--pf-v5-c-nav__link--clickable-inset--InlineStart) var(--pf-v5-c-nav__link--clickable-inset--InlineEnd);
19541
+ --pf-v5-c-nav--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
19542
+ --pf-v5-c-nav--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
19543
+ --pf-v5-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19544
+ --pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19545
+ --pf-v5-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
19546
+ --pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
19547
+ --pf-v5-c-nav--m-horizontal__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd);
19548
+ --pf-v5-c-nav--m-horizontal__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd);
19549
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19550
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19551
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
19552
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
19553
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
19554
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
19555
+ --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
19556
+ --pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
19557
+ }
19558
+
19559
+ .pf-v5-c-nav,
19560
+ .pf-v5-c-nav__section,
19561
+ .pf-v5-c-nav__subnav,
19562
+ .pf-v5-c-nav__list,
19563
+ .pf-v5-c-nav__item {
19564
+ display: grid;
19791
19565
  }
19792
- @media screen and (min-width: 1200px) {
19793
- .pf-v5-c-nav {
19794
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__link--xl--PaddingRight);
19795
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__link--xl--PaddingLeft);
19796
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
19797
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
19798
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
19799
- --pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
19800
- --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-c-nav__section__link--xl--PaddingRight);
19801
- --pf-v5-c-nav__section__link--PaddingLeft: var(--pf-v5-c-nav__section__link--xl--PaddingLeft);
19802
- --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-c-nav__section-title--xl--PaddingRight);
19803
- --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-c-nav__section-title--xl--PaddingLeft);
19804
- --pf-v5-c-nav__subnav--PaddingLeft: var(--pf-v5-c-nav__subnav--xl--PaddingLeft);
19805
- --pf-v5-c-nav--c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu__item--xl--PaddingRight);
19806
- --pf-v5-c-nav--c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu__item--xl--PaddingLeft);
19807
- }
19808
- }
19809
- .pf-v5-c-nav .pf-v5-c-menu {
19566
+
19567
+ .pf-v5-c-nav {
19810
19568
  --pf-v5-c-menu--MinWidth: 100%;
19811
- --pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-nav--c-menu--BackgroundColor);
19812
- --pf-v5-c-menu__list--PaddingTop: var(--pf-v5-c-nav--c-menu__list--PaddingTop);
19813
- --pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-c-nav--c-menu__list--PaddingBottom);
19814
- --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav--c-menu__item--PaddingTop);
19815
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu__item--PaddingRight);
19816
- --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav--c-menu__item--PaddingBottom);
19817
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu__item--PaddingLeft);
19818
- --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-nav--c-menu__list-item--Color);
19819
- --pf-v5-c-menu__list-item--hover--Color: var(--pf-v5-c-nav--c-menu__list-item--hover--Color);
19820
- --pf-v5-c-menu__list-item--active--Color: var(--pf-v5-c-nav--c-menu__list-item--active--Color);
19821
- --pf-v5-c-menu__list-item--focus-within--Color: var(--pf-v5-c-nav--c-menu__list-item--focus-within--Color);
19822
- --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor);
19823
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor);
19824
- --pf-v5-c-menu__item-description--Color: var(--pf-v5-c-nav--c-menu__item-description--Color);
19825
- }
19826
- .pf-v5-c-nav .pf-v5-c-menu:first-child > .pf-v5-c-menu__content {
19827
- border-block-end: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
19828
- }
19829
- .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
19830
- --pf-v5-c-menu--BoxShadow: var(--pf-v5-c-nav--c-menu--m-flyout--BoxShadow);
19831
- --pf-v5-c-menu__list--PaddingTop: 0;
19832
- --pf-v5-c-menu__list--PaddingBottom: 0;
19833
- --pf-v5-c-menu__item--FontSize: var(--pf-v5-c-nav--c-menu__item--FontSize);
19834
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-nav--c-menu__item--Color, inherit);
19835
- --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop);
19836
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight);
19837
- --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom);
19838
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft);
19839
- inset-block-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top);
19840
- inset-block-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom);
19841
- inset-inline-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left);
19842
- inset-inline-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right);
19843
- }
19844
- .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__item:hover {
19845
- --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
19846
- --pf-v5-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
19847
- }
19848
- .pf-v5-c-nav .pf-v5-c-menu.pf-m-top {
19849
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Top: auto;
19850
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom);
19851
- }
19852
- .pf-v5-c-nav .pf-v5-c-menu.pf-m-left {
19853
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-v5-c-nav--c-menu--m-flyout--m-left--Right);
19854
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: auto;
19855
- }
19856
- .pf-v5-c-nav .pf-v5-c-menu .pf-v5-c-divider {
19857
- margin-block-start: 0;
19858
- margin-block-end: 0;
19859
- }
19860
- .pf-v5-c-nav .pf-v5-c-menu__item {
19861
19569
  position: relative;
19862
- outline-offset: var(--pf-v5-c-nav--c-menu__item--OutlineOffset);
19863
- }
19864
- .pf-v5-c-nav .pf-v5-c-menu__item::before, .pf-v5-c-nav .pf-v5-c-menu__item::after {
19865
- position: absolute;
19866
- inset-block-start: 0;
19867
- content: "";
19868
- }
19869
- .pf-v5-c-nav .pf-v5-c-menu__item::before {
19870
- inset-block-end: calc(var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
19871
- inset-inline-start: 0;
19872
- inset-inline-end: 0;
19873
- border-block-end: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
19874
- }
19875
- .pf-v5-c-nav .pf-v5-c-menu__item::after {
19876
- inset-block-end: 0;
19877
- inset-inline-start: 0;
19878
- border-inline-start: var(--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-v5-c-nav--c-menu__item--after--BorderLeftColor);
19879
- }
19880
- .pf-v5-c-nav .pf-v5-c-menu__item.pf-m-current {
19881
- --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
19882
- --pf-v5-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-v5-c-nav--c-menu__item--m-current--after--BorderColor);
19883
- background-color: var(--pf-v5-c-nav--c-menu__item--m-current--BackgroundColor);
19884
- }
19885
- .pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up) {
19886
- --pf-v5-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
19887
- }
19888
- .pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up) > .pf-v5-c-menu__item {
19889
- --pf-v5-c-menu__item--FontWeight: var(--pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
19890
- }
19891
- .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19892
- margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19893
- }
19894
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19895
- scale: -1 1;
19896
- }
19897
-
19898
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
19899
- content: none;
19570
+ row-gap: var(--pf-v5-c-nav--RowGap);
19571
+ max-width: 100%;
19572
+ padding-block-start: var(--pf-v5-c-nav--PaddingBlockStart);
19573
+ padding-block-end: var(--pf-v5-c-nav--PaddingBlockEnd);
19574
+ padding-inline-start: var(--pf-v5-c-nav--PaddingInlineStart);
19575
+ padding-inline-end: var(--pf-v5-c-nav--PaddingInlineEnd);
19576
+ font-size: var(--pf-v5-c-nav--FontSize);
19577
+ font-weight: var(--pf-v5-c-nav--FontWeight);
19578
+ line-height: var(--pf-v5-c-nav--LineHeight);
19579
+ background-color: var(--pf-v5-c-nav--BackgroundColor);
19580
+ }
19581
+ .pf-v5-c-nav:where(.pf-m-scrollable) {
19582
+ padding-inline: var(--pf-v5-c-nav--m-scrollable__list--PaddingInline);
19900
19583
  }
19901
- .pf-v5-c-nav.pf-m-horizontal, .pf-v5-c-nav.pf-m-tertiary, .pf-v5-c-nav.pf-m-horizontal-subnav {
19584
+ .pf-v5-c-nav.pf-m-overflow-hidden {
19902
19585
  overflow: hidden;
19903
19586
  }
19904
- .pf-v5-c-nav.pf-m-horizontal,
19905
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-tertiary,
19906
- .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav,
19907
- .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
19908
- position: relative;
19909
- display: flex;
19587
+ .pf-v5-c-nav.pf-m-full-width {
19588
+ width: 100%;
19910
19589
  }
19911
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
19912
- --pf-v5-c-nav__list--PaddingTop: 0;
19913
- --pf-v5-c-nav__list--PaddingBottom: 0;
19914
- flex: 1;
19915
- max-width: 100%;
19916
- overflow-x: auto;
19917
- white-space: nowrap;
19918
- scroll-snap-type: var(--pf-v5-c-nav__list--ScrollSnapType);
19919
- -webkit-overflow-scrolling: touch;
19920
- scrollbar-width: none;
19921
- -ms-overflow-style: -ms-autohiding-scrollbar;
19590
+ .pf-v5-c-nav.pf-m-fill {
19591
+ flex-grow: 1;
19922
19592
  }
19923
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list::-webkit-scrollbar, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list::-webkit-scrollbar, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list::-webkit-scrollbar {
19593
+
19594
+ [class^=pf-v5-c-nav][hidden] {
19924
19595
  display: none;
19925
19596
  }
19926
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__item, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__item, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__item {
19927
- display: flex;
19928
- scroll-snap-align: var(--pf-v5-c-nav__item--ScrollSnapAlign);
19929
- }
19930
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__link {
19931
- align-items: center;
19932
- align-self: stretch;
19933
- white-space: nowrap;
19934
- }
19935
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__link::before {
19936
- inset-block-start: auto;
19937
- inset-block-end: 0;
19938
- }
19939
- .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before {
19940
- inset-inline-start: var(--pf-v5-c-nav--m-horizontal__link--Left);
19941
- inset-inline-end: var(--pf-v5-c-nav--m-horizontal__link--Right);
19942
- }
19943
- .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before {
19944
- inset-inline-start: var(--pf-v5-c-nav--m-tertiary__link--Left);
19945
- inset-inline-end: var(--pf-v5-c-nav--m-tertiary__link--Right);
19946
- }
19947
- .pf-v5-c-nav.pf-m-light {
19948
- --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-c-nav--m-light__item--before--BorderColor);
19949
- --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
19950
- --pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-light__link--Color);
19951
- --pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-light__link--hover--Color);
19952
- --pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-light__link--focus--Color);
19953
- --pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-light__link--active--Color);
19954
- --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-light__link--m-current--Color);
19955
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-light__link--hover--BackgroundColor);
19956
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-light__link--focus--BackgroundColor);
19957
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-light__link--active--BackgroundColor);
19958
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-light__link--m-current--BackgroundColor);
19959
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-light__link--before--BorderColor);
19960
- --pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-c-nav--m-light__link--after--BorderColor);
19961
- --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-light__link--m-current--after--BorderColor);
19962
- --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor);
19963
- --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor);
19964
- --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor);
19965
- --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor);
19966
- --pf-v5-c-nav__section-title--Color: var(--pf-v5-c-nav--m-light__section-title--Color);
19967
- --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-c-nav--m-light__section-title--BorderBottomColor);
19968
- }
19969
- .pf-v5-c-nav.pf-m-light .pf-v5-c-divider {
19970
- --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-nav--m-light--c-divider--BackgroundColor);
19971
- }
19972
- .pf-v5-c-nav.pf-m-horizontal {
19973
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal__link--PaddingTop);
19974
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal__link--PaddingRight);
19975
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal__link--PaddingBottom);
19976
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal__link--PaddingLeft);
19977
- --pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-horizontal__link--Right);
19978
- --pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-horizontal__link--Left);
19979
- --pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-horizontal__link--Color);
19980
- --pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-horizontal__link--hover--Color);
19981
- --pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-horizontal__link--active--Color);
19982
- --pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-horizontal__link--focus--Color);
19983
- --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-horizontal__link--m-current--Color);
19984
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--BackgroundColor);
19985
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--hover--BackgroundColor);
19986
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--focus--BackgroundColor);
19987
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--active--BackgroundColor);
19988
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor);
19989
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-horizontal__link--before--BorderColor);
19990
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--before--BorderWidth);
19991
- --pf-v5-c-nav__link--hover--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth);
19992
- --pf-v5-c-nav__link--focus--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth);
19993
- --pf-v5-c-nav__link--active--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth);
19994
- --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth);
19995
- }
19996
- .pf-v5-c-nav.pf-m-tertiary {
19997
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-tertiary__link--PaddingTop);
19998
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-tertiary__link--PaddingRight);
19999
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-tertiary__link--PaddingBottom);
20000
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-tertiary__link--PaddingLeft);
20001
- --pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-tertiary__link--Right);
20002
- --pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-tertiary__link--Left);
20003
- --pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-tertiary__link--Color);
20004
- --pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-tertiary__link--hover--Color);
20005
- --pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-tertiary__link--active--Color);
20006
- --pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-tertiary__link--focus--Color);
20007
- --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-tertiary__link--m-current--Color);
20008
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--BackgroundColor);
20009
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor);
20010
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor);
20011
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--active--BackgroundColor);
20012
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor);
20013
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__link--before--BorderColor);
20014
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--before--BorderWidth);
20015
- --pf-v5-c-nav__link--hover--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth);
20016
- --pf-v5-c-nav__link--focus--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth);
20017
- --pf-v5-c-nav__link--active--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth);
20018
- --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth);
20019
- --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--Color);
20020
- --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--hover--Color);
20021
- --pf-v5-c-nav__scroll-button--focus--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--focus--Color);
20022
- --pf-v5-c-nav__scroll-button--active--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--active--Color);
20023
- --pf-v5-c-nav__scroll-button--disabled--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color);
20024
- --pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor);
20025
- --pf-v5-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
20026
- }
20027
- .pf-v5-c-nav.pf-m-horizontal-subnav {
20028
- --pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav--m-horizontal-subnav__link--FontSize);
20029
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop);
20030
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight);
20031
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom);
20032
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft);
20033
- --pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--Color);
20034
- --pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-horizontal-subnav__link--Right);
20035
- --pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-horizontal-subnav__link--Left);
20036
- --pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--Color);
20037
- --pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--Color);
20038
- --pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--focus--Color);
20039
- --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color);
20040
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor);
20041
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
20042
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
20043
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
20044
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
20045
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor);
20046
- --pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor);
20047
- --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
20048
- --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
20049
- --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
20050
- --pf-v5-c-nav__link--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
20051
- --pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
20052
- --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
20053
- --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
20054
- }
20055
- .pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child {
20056
- --pf-v5-c-nav__link--after--BorderLeftWidth: 0;
20057
- --pf-v5-c-nav__link--hover--after--BorderLeftWidth: 0;
20058
- --pf-v5-c-nav__link--active--after--BorderLeftWidth: 0;
20059
- --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 0;
20060
- }
20061
- .pf-v5-c-nav .pf-v5-c-divider {
20062
- --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-nav--c-divider--BackgroundColor);
20063
- padding-inline-start: var(--pf-v5-c-nav--c-divider--PaddingLeft);
20064
- padding-inline-end: var(--pf-v5-c-nav--c-divider--PaddingRight);
20065
- margin-block-start: var(--pf-v5-c-nav--c-divider--MarginTop);
20066
- margin-block-end: var(--pf-v5-c-nav--c-divider--MarginBottom);
20067
- }
20068
- .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button {
20069
- opacity: 1;
20070
- }
20071
- .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20072
- margin-inline-end: 0;
20073
- transform: translateX(0);
20074
- }
20075
- .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20076
- margin-inline-start: 0;
20077
- transform: translateX(0);
20078
- }
20079
- .pf-v5-c-nav.pf-m-overflow-hidden {
20080
- overflow: hidden;
19597
+
19598
+ .pf-v5-c-nav__nav,
19599
+ .pf-v5-c-nav__list,
19600
+ .pf-v5-c-nav__subnav {
19601
+ --pf-v5-c-nav__item--RowGap--row-offset: calc(var(--pf-v5-c-nav__list--RowGap) / 2 * -1);
19602
+ --pf-v5-c-nav__link--clickable-inset--Block: var(--pf-v5-c-nav__item--RowGap--row-offset);
19603
+ --pf-v5-c-nav__button--RowGap--row-offset: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
20081
19604
  }
20082
19605
 
20083
19606
  .pf-v5-c-nav__list {
20084
- position: relative;
20085
- display: block;
20086
- padding-block-start: var(--pf-v5-c-nav__list--PaddingTop);
20087
- padding-block-end: var(--pf-v5-c-nav__list--PaddingBottom);
19607
+ row-gap: var(--pf-v5-c-nav__list--RowGap);
19608
+ column-gap: var(--pf-v5-c-nav__list--ColumnGap);
20088
19609
  }
20089
19610
 
20090
- .pf-v5-c-nav__item {
20091
- position: relative;
20092
- }
20093
- .pf-v5-c-nav__item.pf-m-expandable {
20094
- --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
20095
- }
20096
- .pf-v5-c-nav__item.pf-m-expandable::before {
20097
- position: absolute;
20098
- inset-block-end: calc(var(--pf-v5-c-nav__item--before--BorderWidth) * -1);
20099
- inset-inline-start: 0;
20100
- inset-inline-end: 0;
20101
- content: "";
20102
- border-block-end: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
20103
- }
20104
- .pf-v5-c-nav__item:not(:first-child) {
20105
- margin-block-start: var(--pf-v5-c-nav__item--MarginTop);
20106
- }
20107
- .pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
20108
- transform: rotate(0);
20109
- }
20110
- .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable {
20111
- --pf-v5-c-nav__toggle--FontSize: var(--pf-v5-c-nav__item__item__toggle--FontSize);
20112
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__item__item__link--PaddingRight);
20113
- }
20114
- @media screen and (min-width: 1200px) {
20115
- .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable::before {
20116
- border-block-end: none;
20117
- }
20118
- }
20119
- .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__list::before {
20120
- position: absolute;
20121
- inset-block-start: 0;
20122
- inset-block-end: 0;
20123
- inset-inline-start: 0;
20124
- inset-inline-end: 0;
20125
- pointer-events: none;
20126
- content: "";
20127
- border-inline-start: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
20128
- }
20129
- .pf-v5-c-nav__item .pf-v5-c-nav__toggle-icon {
20130
- transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
20131
- }
20132
- .pf-v5-c-nav__item.pf-m-flyout:hover {
20133
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor);
20134
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth);
20135
- }
20136
- .pf-v5-c-nav__item.pf-m-flyout:focus {
20137
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor);
20138
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth);
20139
- }
20140
- .pf-v5-c-nav__item.pf-m-flyout:active {
20141
- --pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor);
20142
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth);
19611
+ .pf-v5-c-nav__subnav {
19612
+ --pf-v5-c-nav__list--RowGap: var(--pf-v5-c-nav__subnav--RowGap);
19613
+ padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingInlineStart);
20143
19614
  }
20144
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu {
20145
- --pf-v5-c-menu--MinWidth: 100%;
20146
- --pf-v5-c-menu--BoxShadow: var(--pf-v5-c-nav__item--m-flyout--c-menu--BoxShadow);
20147
- --pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor);
20148
- --pf-v5-c-menu__list--PaddingTop: 0;
20149
- --pf-v5-c-menu__list--PaddingBottom: 0;
20150
- --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
20151
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
20152
- --pf-v5-c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
20153
- --pf-v5-c-menu__item--FontSize: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize);
20154
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--Color);
20155
- --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop);
20156
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight);
20157
- --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
20158
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
20159
- --pf-v5-c-menu__item-description--Color: var(--pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color);
20160
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom);
20161
- --pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right);
20162
- position: absolute;
20163
- inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Top);
20164
- inset-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Left);
19615
+
19616
+ .pf-v5-c-nav__item {
19617
+ row-gap: var(--pf-v5-c-nav__item--RowGap);
19618
+ scroll-snap-align: var(--pf-v5-c-nav__item--ScrollSnapAlign);
20165
19619
  }
20166
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu {
20167
- inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top);
19620
+ .pf-v5-c-nav__item > .pf-v5-c-nav__link[button] {
19621
+ margin-block-end: var(--pf-v5-c-nav__button--RowGap--row-offset);
20168
19622
  }
20169
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
20170
- --pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
20171
- --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
19623
+ .pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
19624
+ margin-block-end: var(--pf-v5-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v5-c-nav__item--RowGap));
20172
19625
  }
20173
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item {
20174
- position: relative;
20175
- outline-offset: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
19626
+ .pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v5-c-nav__item > .pf-v5-c-nav__link::before {
19627
+ inset-block-start: calc(var(--pf-v5-c-nav__item--RowGap) * -1 - var(--pf-v5-c-nav__list--RowGap));
20176
19628
  }
20177
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item::before {
20178
- position: absolute;
20179
- inset-block-end: 0;
20180
- inset-inline-start: 0;
20181
- inset-inline-end: 0;
20182
- content: "";
20183
- border-block-end: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
20184
- }
20185
- .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
20186
- position: absolute;
20187
- inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
20188
- inset-block-end: 0;
20189
- inset-inline-start: 0;
20190
- content: "";
20191
- border-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
19629
+
19630
+ .pf-v5-c-nav__section {
19631
+ row-gap: var(--pf-v5-c-nav__section--RowGap, var(--pf-v5-c-nav__list--RowGap));
20192
19632
  }
20193
- .pf-v5-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-v5-c-nav__subnav {
20194
- inset-inline-start: 0;
20195
- z-index: var(--pf-v5-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
19633
+
19634
+ .pf-v5-c-nav__section-title {
19635
+ padding-block-start: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockStart));
19636
+ padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockEnd));
19637
+ padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineStart));
19638
+ padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineEnd));
19639
+ font-size: var(--pf-v5-c-nav__section-title--FontSize, inherit);
19640
+ font-weight: var(--pf-v5-c-nav__section-title--FontWeight);
19641
+ color: var(--pf-v5-c-nav__section-title--Color);
20196
19642
  }
20197
19643
 
20198
19644
  .pf-v5-c-nav__link {
20199
19645
  position: relative;
20200
19646
  display: flex;
20201
- align-items: baseline;
20202
- padding-block-start: var(--pf-v5-c-nav__link--PaddingTop);
20203
- padding-block-end: var(--pf-v5-c-nav__link--PaddingBottom);
20204
- padding-inline-start: var(--pf-v5-c-nav__link--PaddingLeft);
20205
- padding-inline-end: var(--pf-v5-c-nav__link--PaddingRight);
20206
- font-size: var(--pf-v5-c-nav__link--FontSize);
20207
- font-weight: var(--pf-v5-c-nav__link--FontWeight);
19647
+ column-gap: var(--pf-v5-c-nav__link--ColumnGap, var(--pf-v5-c-nav--ColumnGap));
19648
+ align-items: var(--pf-v5-c-nav__link--AlignItems, var(--pf-v5-c-nav--AlignItems));
19649
+ padding-block-start: var(--pf-v5-c-nav__link--PaddingBlockStart);
19650
+ padding-block-end: var(--pf-v5-c-nav__link--PaddingBlockEnd);
19651
+ padding-inline-start: var(--pf-v5-c-nav__link--PaddingInlineStart);
19652
+ padding-inline-end: var(--pf-v5-c-nav__link--PaddingInlineEnd);
19653
+ font-size: var(--pf-v5-c-nav__link--FontSize, inherit);
19654
+ font-weight: var(--pf-v5-c-nav__link--FontWeight, inherit);
19655
+ line-height: var(--pf-v5-c-nav__link--LineHeight, inherit);
20208
19656
  color: var(--pf-v5-c-nav__link--Color);
19657
+ text-align: start;
20209
19658
  background-color: var(--pf-v5-c-nav__link--BackgroundColor);
20210
- outline-offset: var(--pf-v5-c-nav__link--OutlineOffset);
19659
+ border: none;
19660
+ border-radius: var(--pf-v5-c-nav__link--BorderRadius);
20211
19661
  }
20212
- .pf-v5-c-nav__link::after, .pf-v5-c-nav__link::before {
19662
+ .pf-v5-c-nav__link::before {
20213
19663
  position: absolute;
19664
+ inset-block: var(--pf-v5-c-nav__link--clickable-inset--Block);
19665
+ inset-inline: var(--pf-v5-c-nav__link--clickable-inset--Inline);
20214
19666
  content: "";
20215
- border: 0 solid;
20216
- }
20217
- .pf-v5-c-nav__link::before {
20218
- inset-block-end: calc(var(--pf-v5-c-nav__link--before--BorderBottomWidth) * -1);
20219
- inset-inline-start: 0;
20220
- inset-inline-end: 0;
20221
- border-color: var(--pf-v5-c-nav__link--before--BorderColor);
20222
- border-block-end-width: var(--pf-v5-c-nav__link--before--BorderBottomWidth);
20223
19667
  }
20224
- .pf-v5-c-nav__link::after {
20225
- inset-block-start: 0;
20226
- inset-block-end: 0;
20227
- inset-inline-start: 0;
20228
- border: 0 solid;
20229
- border-color: var(--pf-v5-c-nav__link--after--BorderColor);
20230
- border-inline-start-width: var(--pf-v5-c-nav__link--after--BorderLeftWidth);
19668
+ .pf-v5-c-nav__link[aria-expanded=true]::before {
19669
+ inset-block-end: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
20231
19670
  }
20232
19671
  .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link.pf-m-hover {
20233
19672
  color: var(--pf-v5-c-nav__link--hover--Color);
20234
19673
  background-color: var(--pf-v5-c-nav__link--hover--BackgroundColor);
20235
19674
  }
20236
- .pf-v5-c-nav__link:hover::before, .pf-v5-c-nav__link.pf-m-hover::before {
20237
- border-block-end-width: var(--pf-v5-c-nav__link--hover--before--BorderBottomWidth);
20238
- }
20239
- .pf-v5-c-nav__link:hover::after, .pf-v5-c-nav__link.pf-m-hover::after {
20240
- border-color: var(--pf-v5-c-nav__link--hover--after--BorderColor);
20241
- border-inline-start-width: var(--pf-v5-c-nav__link--hover--after--BorderLeftWidth);
20242
- }
20243
19675
  .pf-v5-c-nav__link:focus {
20244
19676
  color: var(--pf-v5-c-nav__link--focus--Color);
20245
19677
  background-color: var(--pf-v5-c-nav__link--focus--BackgroundColor);
20246
19678
  }
20247
- .pf-v5-c-nav__link:focus::before {
20248
- border-block-end-width: var(--pf-v5-c-nav__link--focus--before--BorderBottomWidth);
20249
- }
20250
- .pf-v5-c-nav__link:focus::after {
20251
- border-color: var(--pf-v5-c-nav__link--focus--after--BorderColor);
20252
- border-inline-start-width: var(--pf-v5-c-nav__link--focus--after--BorderLeftWidth);
20253
- }
20254
19679
  .pf-v5-c-nav__link:active {
20255
19680
  color: var(--pf-v5-c-nav__link--active--Color);
20256
19681
  background-color: var(--pf-v5-c-nav__link--active--BackgroundColor);
20257
19682
  }
20258
- .pf-v5-c-nav__link:active::before {
20259
- border-block-end-width: var(--pf-v5-c-nav__link--active--before--BorderBottomWidth);
20260
- }
20261
- .pf-v5-c-nav__link:active::after {
20262
- border-color: var(--pf-v5-c-nav__link--active--after--BorderColor);
20263
- border-inline-start-width: var(--pf-v5-c-nav__link--active--after--BorderLeftWidth);
20264
- }
20265
- .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link {
19683
+ .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover {
20266
19684
  color: var(--pf-v5-c-nav__link--m-current--Color);
20267
19685
  background-color: var(--pf-v5-c-nav__link--m-current--BackgroundColor);
20268
19686
  }
20269
- .pf-v5-c-nav__link.pf-m-current::before, .pf-v5-c-nav__link.pf-m-current:hover::before, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::before {
20270
- border-block-end-width: var(--pf-v5-c-nav__link--m-current--before--BorderBottomWidth);
20271
- }
20272
- .pf-v5-c-nav__link.pf-m-current::after, .pf-v5-c-nav__link.pf-m-current:hover::after, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after {
20273
- border-color: var(--pf-v5-c-nav__link--m-current--after--BorderColor);
20274
- border-inline-start-width: var(--pf-v5-c-nav__link--m-current--after--BorderLeftWidth);
20275
- }
20276
- .pf-v5-c-nav__link, .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link:focus, .pf-v5-c-nav__link:active {
20277
- width: 100%;
20278
- text-decoration: none;
20279
- border: none;
20280
- }
20281
-
20282
- .pf-v5-c-nav__subnav {
20283
- --pf-v5-c-nav__list--PaddingTop: 0;
20284
- --pf-v5-c-nav__list--PaddingBottom: 0;
20285
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop);
20286
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight);
20287
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom);
20288
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__subnav__link--PaddingLeft);
20289
- --pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__subnav__link--FontSize);
20290
- --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav__subnav__link--hover--after--BorderColor);
20291
- --pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-c-nav__subnav__link--focus--after--BorderColor);
20292
- --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav__subnav__link--active--after--BorderColor);
20293
- --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderColor);
20294
- --pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--hover--after--BorderWidth);
20295
- --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--focus--after--BorderWidth);
20296
- --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--active--after--BorderWidth);
20297
- --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderWidth);
20298
- --pf-v5-c-nav--c-divider--PaddingRight: var(--pf-v5-c-nav__subnav--c-divider--PaddingRight);
20299
- --pf-v5-c-nav--c-divider--PaddingLeft: var(--pf-v5-c-nav__subnav--c-divider--PaddingLeft);
20300
- max-height: var(--pf-v5-c-nav__subnav--MaxHeight);
20301
- padding-block-end: var(--pf-v5-c-nav__subnav--PaddingBottom);
20302
- padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingLeft);
20303
- transition: var(--pf-v5-c-nav--Transition);
20304
- scrollbar-width: none;
20305
- -ms-overflow-style: -ms-autohiding-scrollbar;
20306
- }
20307
- .pf-v5-c-nav__subnav .pf-v5-c-nav__subnav {
20308
- --pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__subnav__subnav__link--FontSize);
20309
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__subnav__subnav__link--PaddingLeft);
20310
- --pf-v5-c-nav__subnav--PaddingLeft: var(--pf-v5-c-nav__subnav__subnav--PaddingLeft);
20311
- }
20312
- .pf-v5-c-nav__subnav.pf-m-flyout {
20313
- width: 100%;
20314
- }
20315
- .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__subnav {
20316
- --pf-v5-c-nav__subnav--MaxHeight: var(--pf-v5-c-nav__item--m-expanded__subnav--MaxHeight);
20317
- overflow-y: auto;
20318
- opacity: 1;
20319
- }
20320
- .pf-v5-c-nav__subnav::-webkit-scrollbar {
20321
- display: none;
20322
- }
20323
19687
 
20324
19688
  .pf-v5-c-nav__toggle {
20325
19689
  flex: none;
20326
- padding-inline-start: var(--pf-v5-c-nav__toggle--PaddingLeft);
20327
- padding-inline-end: var(--pf-v5-c-nav__toggle--PaddingRight);
19690
+ align-self: start;
20328
19691
  margin-inline-start: auto;
20329
- font-size: var(--pf-v5-c-nav__toggle--FontSize);
20330
- line-height: 1;
20331
- }
20332
- .pf-v5-c-nav__toggle.pf-m-start {
20333
- margin-inline-start: calc(var(--pf-v5-c-nav__toggle--PaddingRight) * -1);
20334
- margin-inline-end: var(--pf-v5-c-nav__toggle--m-start--MarginRight);
19692
+ transform: translateY(var(--pf-v5-c-nav__toggle--TranslateY));
20335
19693
  }
20336
19694
 
20337
19695
  .pf-v5-c-nav__toggle-icon {
20338
19696
  display: inline-block;
20339
- transition: var(--pf-v5-c-nav__toggle-icon--Transition);
19697
+ transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
20340
19698
  }
20341
19699
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20342
19700
  scale: -1 1;
20343
19701
  }
20344
19702
 
20345
- .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
20346
- transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
19703
+ .pf-v5-c-nav__item:where(.pf-m-flyout) .pf-v5-c-nav__toggle-icon {
19704
+ --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
20347
19705
  }
20348
-
20349
- .pf-v5-c-nav__section {
20350
- --pf-v5-c-nav__item--MarginTop: var(--pf-v5-c-nav__section__item--MarginTop);
20351
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__section__link--PaddingTop);
20352
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__section__link--PaddingRight);
20353
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__section__link--PaddingBottom);
20354
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__section__link--PaddingLeft);
20355
- --pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__section__link--FontSize);
20356
- --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__section__link--before--BorderBottomWidth);
20357
- --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav__section__link--hover--after--BorderColor);
20358
- --pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-c-nav__section__link--focus--after--BorderColor);
20359
- --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav__section__link--active--after--BorderColor);
20360
- --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav__section__link--m-current--after--BorderColor);
20361
- --pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--hover--after--BorderWidth);
20362
- --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
20363
- --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
20364
- --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
20365
- --pf-v5-c-nav__list--PaddingTop: 0;
20366
- --pf-v5-c-nav__list--PaddingBottom: 0;
20367
- --pf-v5-c-nav--c-divider--MarginBottom: 0;
20368
- }
20369
- .pf-v5-c-nav__section:first-child {
20370
- padding-block-start: var(--pf-v5-c-nav__section--first-child--PaddingTop);
20371
- }
20372
- .pf-v5-c-nav__section + .pf-v5-c-nav__section {
20373
- margin-block-start: var(--pf-v5-c-nav__section--section--MarginTop);
20374
- }
20375
- .pf-v5-c-nav__section:last-child {
20376
- padding-block-end: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
20377
- }
20378
-
20379
- .pf-v5-c-nav__section-title {
20380
- padding-block-start: var(--pf-v5-c-nav__section-title--PaddingTop);
20381
- padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBottom);
20382
- padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingLeft);
20383
- padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingRight);
20384
- margin-block-end: var(--pf-v5-c-nav__section-title--MarginBottom);
20385
- font-size: var(--pf-v5-c-nav__section-title--FontSize);
20386
- color: var(--pf-v5-c-nav__section-title--Color);
20387
- border-block-end: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
19706
+ .pf-v5-c-nav__link:where([aria-expanded=true]) .pf-v5-c-nav__toggle-icon {
19707
+ transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
20388
19708
  }
20389
19709
 
20390
19710
  .pf-v5-c-nav__scroll-button {
19711
+ position: relative;
19712
+ display: flex;
20391
19713
  flex: none;
20392
- width: var(--pf-v5-c-nav__scroll-button--Width);
20393
- color: var(--pf-v5-c-nav__scroll-button--Color);
20394
- background-color: var(--pf-v5-c-nav__scroll-button--BackgroundColor);
20395
- border: 0;
20396
- outline-offset: var(--pf-v5-c-nav__scroll-button--OutlineOffset);
20397
- opacity: 0;
20398
- transition: var(--pf-v5-c-nav__scroll-button--Transition);
19714
+ align-items: stretch;
19715
+ justify-items: stretch;
19716
+ min-width: var(--pf-v5-c-nav__scroll-button--MinWidth);
19717
+ }
19718
+ .pf-v5-c-nav__scroll-button :is(button) {
19719
+ --pf-v5-c-button--Display: flex;
19720
+ --pf-v5-c-button--Flex: 1;
19721
+ --pf-v5-c-button--AlignItems: center;
19722
+ --pf-v5-c-button--JustifyContent: center;
19723
+ padding-inline: var(--pf-v5-c-nav__scroll-button--button--InlinePadding);
20399
19724
  }
20400
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
19725
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button :is(button) .pf-v5-c-button__icon {
20401
19726
  scale: -1 1;
20402
19727
  }
20403
19728
 
19729
+ .pf-v5-c-nav__scroll-button :is(button) > * {
19730
+ display: inline-block;
19731
+ padding-inline: var(--pf-v5-c-nav__scroll-button--button--icon--InlinePadding);
19732
+ }
19733
+ .pf-v5-c-nav__scroll-button :is(button) > * > * {
19734
+ min-width: var(--pf-v5-c-nav__scroll-button--button--icon--IconSize);
19735
+ }
20404
19736
  .pf-v5-c-nav__scroll-button::before {
20405
19737
  position: absolute;
20406
- inset-block-start: 0;
20407
- inset-block-end: 0;
19738
+ inset-block: 0;
19739
+ inset-inline: 0;
20408
19740
  content: "";
20409
- border: 0 solid var(--pf-v5-c-nav__scroll-button--before--BorderColor);
20410
- border-inline-start-width: var(--pf-v5-c-nav__scroll-button--before--BorderLeftWidth);
20411
- border-inline-end-width: var(--pf-v5-c-nav__scroll-button--before--BorderRightWidth);
19741
+ outline-offset: var(--pf-v5-c-nav--OutlineOffset);
20412
19742
  }
20413
- .pf-v5-c-nav__scroll-button:hover {
20414
- color: var(--pf-v5-c-nav__scroll-button--hover--Color);
19743
+ .pf-v5-c-nav__scroll-button:first-of-type {
19744
+ border-start-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
19745
+ border-end-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
20415
19746
  }
20416
- .pf-v5-c-nav__scroll-button:focus {
20417
- color: var(--pf-v5-c-nav__scroll-button--focus--Color);
19747
+ .pf-v5-c-nav__scroll-button:first-of-type button {
19748
+ --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
19749
+ --pf-v5-c-button--BorderStartEndRadius: 0;
19750
+ --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
19751
+ --pf-v5-c-button--BorderEndEndRadius: 0;
20418
19752
  }
20419
- .pf-v5-c-nav__scroll-button:active {
20420
- color: var(--pf-v5-c-nav__scroll-button--active--Color);
19753
+ .pf-v5-c-nav__scroll-button:first-of-type::before {
19754
+ border-inline-end: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
20421
19755
  }
20422
- .pf-v5-c-nav__scroll-button:disabled {
20423
- color: var(--pf-v5-c-nav__scroll-button--disabled--Color);
20424
- border-color: var(--pf-v5-c-nav__scroll-button--disabled--before--BorderColor);
19756
+ .pf-v5-c-nav__scroll-button:last-of-type {
19757
+ border-start-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
19758
+ border-end-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
20425
19759
  }
20426
- .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20427
- --pf-v5-c-nav__scroll-button--before--BorderRightWidth: var(--pf-v5-c-nav__scroll-button--before--BorderWidth);
20428
- margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20429
- transform: translateX(-100%);
19760
+ .pf-v5-c-nav__scroll-button:last-of-type button {
19761
+ --pf-v5-c-button--BorderStartStartRadius: 0;
19762
+ --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
19763
+ --pf-v5-c-button--BorderEndStartRadius: 0;
19764
+ --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
20430
19765
  }
20431
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20432
- transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
19766
+ .pf-v5-c-nav__scroll-button:last-of-type::before {
19767
+ border-inline-start: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
20433
19768
  }
20434
19769
 
20435
- .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20436
- inset-inline-end: 0;
20437
- }
20438
- .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20439
- --pf-v5-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-nav__scroll-button--before--BorderWidth);
20440
- margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20441
- transform: translateX(100%);
19770
+ .pf-v5-c-nav:where(.pf-m-horizontal) {
19771
+ padding: 0;
19772
+ overflow: hidden;
19773
+ border-radius: var(--pf-v5-c-nav--m-horizontal--BorderRadius);
20442
19774
  }
20443
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20444
- transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
19775
+ .pf-v5-c-nav:where(.pf-m-horizontal),
19776
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__section,
19777
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__subnav,
19778
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list,
19779
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__item {
19780
+ display: flex;
20445
19781
  }
20446
-
20447
- .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20448
- inset-inline-start: 0;
19782
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list {
19783
+ padding-block: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlock);
19784
+ padding-inline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInline);
19785
+ overflow-x: auto;
19786
+ white-space: nowrap;
19787
+ scroll-snap-type: var(--pf-v5-c-nav__list--ScrollSnapType);
19788
+ -webkit-overflow-scrolling: touch;
19789
+ scrollbar-width: none;
19790
+ -ms-overflow-style: -ms-autohiding-scrollbar;
20449
19791
  }
20450
-
20451
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
20452
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
19792
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list::-webkit-scrollbar {
19793
+ display: none;
20453
19794
  }
20454
-
20455
- :where(.pf-v5-theme-dark) .pf-v5-c-nav {
20456
- --pf-v5-c-nav__item--item__link--after--Top: -1px;
20457
- --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BorderColor--100);
20458
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
20459
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
20460
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
20461
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
20462
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BorderColor--100);
20463
- --pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
20464
- --pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--200);
20465
- --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
20466
- --pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
20467
- --pf-v5-c-nav--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
20468
- --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
20469
- --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
20470
- --pf-v5-c-nav__link--active--before--BorderBottomWidth: 0;
20471
- --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0;
20472
- }
20473
- :where(.pf-v5-theme-dark) .pf-v5-c-nav__link::before {
20474
- inset-block-end: 0;
19795
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link {
19796
+ outline-offset: var(--pf-v5-c-nav--OutlineOffset);
20475
19797
  }
20476
- :where(.pf-v5-theme-dark) .pf-v5-c-nav__link::after {
20477
- inset-block-start: var(--pf-v5-c-nav__item--item__link--after--Top);
19798
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link::before {
19799
+ inset-block-start: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) * -1);
19800
+ inset-block-end: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd) * -1);
19801
+ inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
19802
+ inset-inline-end: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
20478
19803
  }
20479
- :where(.pf-v5-theme-dark) .pf-v5-c-nav__item + .pf-v5-c-nav__item {
20480
- --pf-v5-c-nav__link--after--Top: var(--pf-v5-c-nav__item--item__link--after--Top);
19804
+ .pf-v5-c-nav:where(.pf-m-horizontal).pf-m-subnav {
19805
+ --pf-v5-c-nav__link--PaddingBlockStart: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
19806
+ --pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
19807
+ --pf-v5-c-nav__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
19808
+ --pf-v5-c-nav__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
20481
19809
  }
20482
- :where(.pf-v5-theme-dark) .pf-v5-c-nav__subnav {
20483
- --pf-v5-c-nav__item--item__link--after--Top: 0;
19810
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list {
19811
+ padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
20484
19812
  }
20485
- :where(.pf-v5-theme-dark) .pf-v5-c-nav__section {
20486
- --pf-v5-c-nav__item--item__link--after--Top: 0;
19813
+ .pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list > :first-child .pf-v5-c-nav__link::before {
19814
+ inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1 - var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart));
20487
19815
  }
20488
19816
 
20489
19817
  :root {