@patternfly/react-core 6.1.0-prerelease.14 → 6.1.0-prerelease.15

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.
Files changed (129) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/Content/package.json +1 -1
  23. package/dist/dynamic/components/DataList/package.json +1 -1
  24. package/dist/dynamic/components/DatePicker/package.json +1 -1
  25. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  26. package/dist/dynamic/components/Divider/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/TextArea/package.json +1 -1
  71. package/dist/dynamic/components/TextInput/package.json +1 -1
  72. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  73. package/dist/dynamic/components/TimePicker/package.json +1 -1
  74. package/dist/dynamic/components/Timestamp/package.json +1 -1
  75. package/dist/dynamic/components/Title/package.json +1 -1
  76. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  77. package/dist/dynamic/components/Toolbar/package.json +1 -1
  78. package/dist/dynamic/components/Tooltip/package.json +1 -1
  79. package/dist/dynamic/components/TreeView/package.json +1 -1
  80. package/dist/dynamic/components/Truncate/package.json +1 -1
  81. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  82. package/dist/dynamic/components/Wizard/package.json +1 -1
  83. package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
  84. package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
  87. package/dist/dynamic/deprecated/components/Tile/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/package.json +1 -1
  90. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  91. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  92. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  93. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  94. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  95. package/dist/dynamic/helpers/constants/package.json +1 -1
  96. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  97. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  98. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  99. package/dist/dynamic/helpers/package.json +1 -1
  100. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  101. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  102. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  103. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  104. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  105. package/dist/dynamic/helpers/util/package.json +1 -1
  106. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  107. package/dist/dynamic/layouts/Flex/package.json +1 -1
  108. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  109. package/dist/dynamic/layouts/Grid/package.json +1 -1
  110. package/dist/dynamic/layouts/Level/package.json +1 -1
  111. package/dist/dynamic/layouts/Split/package.json +1 -1
  112. package/dist/dynamic/layouts/Stack/package.json +1 -1
  113. package/dist/dynamic/styles/package.json +1 -1
  114. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  115. package/dist/esm/components/CalendarMonth/CalendarMonth.js +7 -11
  116. package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
  117. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  118. package/dist/js/components/CalendarMonth/CalendarMonth.js +7 -11
  119. package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
  120. package/dist/umd/assets/{output-dM13h99q.css → output-DHZCvbdd.css} +1628 -1628
  121. package/dist/umd/react-core.min.js +1 -1
  122. package/helpers/package.json +1 -1
  123. package/layouts/package.json +1 -1
  124. package/next/package.json +1 -1
  125. package/package.json +2 -2
  126. package/src/components/CalendarMonth/CalendarMonth.tsx +7 -10
  127. package/src/components/Modal/examples/Modal.md +1 -1
  128. package/src/components/Wizard/examples/Wizard.md +2 -1
  129. package/src/components/Wizard/examples/WizardWithinModal.tsx +5 -8
@@ -656,26 +656,6 @@
656
656
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
657
657
  }
658
658
  }
659
- .pf-v6-c-backdrop {
660
- --pf-v6-c-backdrop--Position: fixed;
661
- --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
662
- --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
663
- }
664
-
665
- .pf-v6-c-backdrop {
666
- position: var(--pf-v6-c-backdrop--Position);
667
- inset-block-start: 0;
668
- inset-inline-start: 0;
669
- z-index: var(--pf-v6-c-backdrop--ZIndex);
670
- width: 100%;
671
- height: 100%;
672
- background-color: var(--pf-v6-c-backdrop--BackgroundColor);
673
- }
674
-
675
- .pf-v6-c-backdrop__open {
676
- overflow: hidden;
677
- }
678
-
679
659
  .pf-v6-c-back-to-top {
680
660
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
681
661
  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
@@ -712,6 +692,26 @@
712
692
  box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
713
693
  }
714
694
 
695
+ .pf-v6-c-backdrop {
696
+ --pf-v6-c-backdrop--Position: fixed;
697
+ --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
698
+ --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
699
+ }
700
+
701
+ .pf-v6-c-backdrop {
702
+ position: var(--pf-v6-c-backdrop--Position);
703
+ inset-block-start: 0;
704
+ inset-inline-start: 0;
705
+ z-index: var(--pf-v6-c-backdrop--ZIndex);
706
+ width: 100%;
707
+ height: 100%;
708
+ background-color: var(--pf-v6-c-backdrop--BackgroundColor);
709
+ }
710
+
711
+ .pf-v6-c-backdrop__open {
712
+ overflow: hidden;
713
+ }
714
+
715
715
  .pf-v6-c-background-image {
716
716
  --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
717
717
  --pf-v6-c-background-image--BackgroundImage: none;
@@ -813,6 +813,73 @@
813
813
  color: var(--pf-v6-c-badge__toggle-icon--Color);
814
814
  }
815
815
 
816
+ .pf-v6-c-brand {
817
+ --pf-v6-c-brand--Width: auto;
818
+ --pf-v6-c-brand--Height: auto;
819
+ }
820
+
821
+ .pf-v6-c-brand {
822
+ width: var(--pf-v6-c-brand--Width--base);
823
+ height: var(--pf-v6-c-brand--Height--base);
824
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
825
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
826
+ }
827
+
828
+ @media (min-width: 36rem) {
829
+ .pf-v6-c-brand {
830
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
831
+ }
832
+ }
833
+ @media (min-width: 48rem) {
834
+ .pf-v6-c-brand {
835
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
836
+ }
837
+ }
838
+ @media (min-width: 62rem) {
839
+ .pf-v6-c-brand {
840
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
841
+ }
842
+ }
843
+ @media (min-width: 75rem) {
844
+ .pf-v6-c-brand {
845
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
846
+ }
847
+ }
848
+ @media (min-width: 90.625rem) {
849
+ .pf-v6-c-brand {
850
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
851
+ }
852
+ }
853
+ @media (min-width: 36rem) {
854
+ .pf-v6-c-brand {
855
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
856
+ }
857
+ }
858
+ @media (min-width: 48rem) {
859
+ .pf-v6-c-brand {
860
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
861
+ }
862
+ }
863
+ @media (min-width: 62rem) {
864
+ .pf-v6-c-brand {
865
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
866
+ }
867
+ }
868
+ @media (min-width: 75rem) {
869
+ .pf-v6-c-brand {
870
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
871
+ }
872
+ }
873
+ @media (min-width: 90.625rem) {
874
+ .pf-v6-c-brand {
875
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
876
+ }
877
+ }
878
+ .pf-v6-c-brand.pf-m-picture {
879
+ display: inline-flex;
880
+ max-width: 100%;
881
+ }
882
+
816
883
  .pf-v6-c-banner {
817
884
  --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
818
885
  --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1087,73 +1154,6 @@ button.pf-v6-c-breadcrumb__link {
1087
1154
  display: none;
1088
1155
  }
1089
1156
 
1090
- .pf-v6-c-brand {
1091
- --pf-v6-c-brand--Width: auto;
1092
- --pf-v6-c-brand--Height: auto;
1093
- }
1094
-
1095
- .pf-v6-c-brand {
1096
- width: var(--pf-v6-c-brand--Width--base);
1097
- height: var(--pf-v6-c-brand--Height--base);
1098
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
1099
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1100
- }
1101
-
1102
- @media (min-width: 36rem) {
1103
- .pf-v6-c-brand {
1104
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
1105
- }
1106
- }
1107
- @media (min-width: 48rem) {
1108
- .pf-v6-c-brand {
1109
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
1110
- }
1111
- }
1112
- @media (min-width: 62rem) {
1113
- .pf-v6-c-brand {
1114
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
1115
- }
1116
- }
1117
- @media (min-width: 75rem) {
1118
- .pf-v6-c-brand {
1119
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
1120
- }
1121
- }
1122
- @media (min-width: 90.625rem) {
1123
- .pf-v6-c-brand {
1124
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
1125
- }
1126
- }
1127
- @media (min-width: 36rem) {
1128
- .pf-v6-c-brand {
1129
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
1130
- }
1131
- }
1132
- @media (min-width: 48rem) {
1133
- .pf-v6-c-brand {
1134
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
1135
- }
1136
- }
1137
- @media (min-width: 62rem) {
1138
- .pf-v6-c-brand {
1139
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
1140
- }
1141
- }
1142
- @media (min-width: 75rem) {
1143
- .pf-v6-c-brand {
1144
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
1145
- }
1146
- }
1147
- @media (min-width: 90.625rem) {
1148
- .pf-v6-c-brand {
1149
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
1150
- }
1151
- }
1152
- .pf-v6-c-brand.pf-m-picture {
1153
- display: inline-flex;
1154
- max-width: 100%;
1155
- }
1156
-
1157
1157
  .pf-v6-c-button {
1158
1158
  --pf-v6-c-button--Display: inline-flex;
1159
1159
  --pf-v6-c-button--AlignItems: baseline;
@@ -2022,88 +2022,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2022
2022
  pointer-events: none;
2023
2023
  }
2024
2024
 
2025
- .pf-v6-c-check {
2026
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2027
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2028
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2029
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2030
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2031
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2032
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2033
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2034
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2035
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2036
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2037
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2038
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2039
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2040
- }
2041
-
2042
- .pf-v6-c-check {
2043
- display: grid;
2044
- grid-template-columns: auto 1fr;
2045
- grid-gap: var(--pf-v6-c-check--GridGap);
2046
- accent-color: var(--pf-v6-c-check--AccentColor);
2047
- }
2048
-
2049
- .pf-v6-c-check.pf-m-standalone {
2050
- display: inline-grid;
2051
- grid-template-columns: auto;
2052
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2053
- }
2054
-
2055
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2056
- align-self: center;
2057
- transform: none;
2058
- }
2059
-
2060
- .pf-v6-c-check__input {
2061
- align-self: start;
2062
- font-size: var(--pf-v6-c-check__label--FontSize);
2063
- line-height: var(--pf-v6-c-check__label--LineHeight);
2064
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2065
- }
2066
-
2067
- .pf-v6-c-check__label {
2068
- font-size: var(--pf-v6-c-check__label--FontSize);
2069
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2070
- line-height: var(--pf-v6-c-check__label--LineHeight);
2071
- color: var(--pf-v6-c-check__label--Color);
2072
- }
2073
-
2074
- .pf-v6-c-check__description {
2075
- grid-column: 2;
2076
- font-size: var(--pf-v6-c-check__description--FontSize);
2077
- color: var(--pf-v6-c-check__description--Color);
2078
- }
2079
-
2080
- .pf-v6-c-check__body {
2081
- grid-column: 2;
2082
- }
2083
-
2084
- .pf-v6-c-check__label,
2085
- .pf-v6-c-check__input {
2086
- justify-self: start;
2087
- }
2088
-
2089
- label.pf-v6-c-check, .pf-v6-c-check__label,
2090
- .pf-v6-c-check__input {
2091
- cursor: pointer;
2092
- }
2093
-
2094
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2095
- .pf-v6-c-check__input:disabled,
2096
- .pf-v6-c-check__input.pf-m-disabled {
2097
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2098
- cursor: not-allowed;
2099
- }
2100
-
2101
- .pf-v6-c-check__label-required {
2102
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2103
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2104
- color: var(--pf-v6-c-check__label-required--Color);
2105
- }
2106
-
2107
2025
  .pf-v6-c-card {
2108
2026
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2109
2027
  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
@@ -2467,6 +2385,88 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2467
2385
  color: var(--pf-v6-c-card__footer--Color);
2468
2386
  }
2469
2387
 
2388
+ .pf-v6-c-check {
2389
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2390
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2391
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2392
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2393
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2394
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2395
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2396
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2397
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2398
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2399
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2400
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2401
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2402
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2403
+ }
2404
+
2405
+ .pf-v6-c-check {
2406
+ display: grid;
2407
+ grid-template-columns: auto 1fr;
2408
+ grid-gap: var(--pf-v6-c-check--GridGap);
2409
+ accent-color: var(--pf-v6-c-check--AccentColor);
2410
+ }
2411
+
2412
+ .pf-v6-c-check.pf-m-standalone {
2413
+ display: inline-grid;
2414
+ grid-template-columns: auto;
2415
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2416
+ }
2417
+
2418
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2419
+ align-self: center;
2420
+ transform: none;
2421
+ }
2422
+
2423
+ .pf-v6-c-check__input {
2424
+ align-self: start;
2425
+ font-size: var(--pf-v6-c-check__label--FontSize);
2426
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2427
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2428
+ }
2429
+
2430
+ .pf-v6-c-check__label {
2431
+ font-size: var(--pf-v6-c-check__label--FontSize);
2432
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2433
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2434
+ color: var(--pf-v6-c-check__label--Color);
2435
+ }
2436
+
2437
+ .pf-v6-c-check__description {
2438
+ grid-column: 2;
2439
+ font-size: var(--pf-v6-c-check__description--FontSize);
2440
+ color: var(--pf-v6-c-check__description--Color);
2441
+ }
2442
+
2443
+ .pf-v6-c-check__body {
2444
+ grid-column: 2;
2445
+ }
2446
+
2447
+ .pf-v6-c-check__label,
2448
+ .pf-v6-c-check__input {
2449
+ justify-self: start;
2450
+ }
2451
+
2452
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2453
+ .pf-v6-c-check__input {
2454
+ cursor: pointer;
2455
+ }
2456
+
2457
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2458
+ .pf-v6-c-check__input:disabled,
2459
+ .pf-v6-c-check__input.pf-m-disabled {
2460
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2461
+ cursor: not-allowed;
2462
+ }
2463
+
2464
+ .pf-v6-c-check__label-required {
2465
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2466
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2467
+ color: var(--pf-v6-c-check__label-required--Color);
2468
+ }
2469
+
2470
2470
  .pf-v6-c-clipboard-copy {
2471
2471
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2472
2472
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -4158,1185 +4158,1185 @@ ul) {
4158
4158
  --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows);
4159
4159
  }
4160
4160
  }
4161
- .pf-v6-c-drawer {
4162
- --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4163
- --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4164
- --pf-v6-c-drawer__content--FlexBasis: 100%;
4165
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
4166
- --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4167
- --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4168
- --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--z-index--xs);
4169
- --pf-v6-c-drawer__panel--MinWidth: 50%;
4170
- --pf-v6-c-drawer__panel--MaxHeight: auto;
4171
- --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
4172
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
4173
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4174
- --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4175
- --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
4176
- --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4177
- --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4178
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
4179
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
4180
- --pf-v6-c-drawer__panel--FlexBasis: 100%;
4181
- --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
4182
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4183
- --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
4184
- --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
4185
- --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
4186
- --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
4187
- --pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
4188
- --pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
4189
- --pf-v6-c-drawer__panel--m-resizable--FlexDirection: row;
4190
- --pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
4191
- --pf-v6-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
4192
- --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
4193
- --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
4194
- --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
4195
- --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
4196
- --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4197
- --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4198
- --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
4199
- --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4200
- --pf-v6-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
4201
- --pf-v6-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4202
- --pf-v6-c-drawer__body--PaddingBlockStart--base: var(--pf-t--global--spacer--md);
4203
- --pf-v6-c-drawer__body--PaddingInlineEnd--base: var(--pf-t--global--spacer--md);
4204
- --pf-v6-c-drawer__body--PaddingBlockEnd--base: var(--pf-t--global--spacer--md);
4205
- --pf-v6-c-drawer__body--PaddingInlineStart--base: var(--pf-t--global--spacer--md);
4206
- --pf-v6-c-drawer__content__body--PaddingBlockStart: 0;
4207
- --pf-v6-c-drawer__content__body--PaddingInlineEnd: 0;
4208
- --pf-v6-c-drawer__content__body--PaddingBlockEnd: 0;
4209
- --pf-v6-c-drawer__content__body--PaddingInlineStart: 0;
4210
- --pf-v6-c-drawer__panel__body--PaddingBlockStart: var(--pf-v6-c-drawer__body--PaddingBlockStart--base);
4211
- --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-v6-c-drawer__body--PaddingInlineEnd--base);
4212
- --pf-v6-c-drawer__panel__body--PaddingBlockEnd: var(--pf-v6-c-drawer__body--PaddingBlockEnd--base);
4213
- --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-v6-c-drawer__body--PaddingInlineStart--base);
4214
- --pf-v6-c-drawer__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
4215
- --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4216
- --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
4217
- --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
4218
- --pf-v6-c-drawer__splitter--Height: 0.5625rem;
4219
- --pf-v6-c-drawer__splitter--Width: 100%;
4220
- --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4221
- --pf-v6-c-drawer__splitter--Cursor: row-resize;
4222
- --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
4223
- --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
4224
- --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
4225
- --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
4226
- --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
4227
- --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
4228
- --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
4229
- --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4230
- --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
4231
- --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4232
- --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4233
- --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4234
- --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
4235
- --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
4236
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
4237
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
4238
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4239
- --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
4240
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
4241
- --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
4242
- --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
4243
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
4244
- --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4245
- --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
4246
- --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4247
- --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
4248
- --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
4249
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
4250
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
4251
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
4252
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
4253
- --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
4254
- --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
4255
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
4256
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
4257
- --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
4258
- --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
4259
- --pf-v6-c-drawer__panel--BoxShadow: none;
4260
- --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
4261
- --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
4262
- --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
4263
- --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
4264
- --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
4265
- --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: var(--pf-v6-c-drawer__panel--after--Width);
4266
- --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
4267
- --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
4161
+ .pf-v6-c-divider {
4162
+ --pf-v6-c-divider--Display: flex;
4163
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
4164
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
4165
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4268
4166
  }
4269
4167
 
4270
- @media screen and (min-width: 75rem) {
4271
- .pf-v6-c-drawer {
4272
- --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
4273
- }
4274
- .pf-v6-c-drawer.pf-m-panel-bottom {
4275
- --pf-v6-c-drawer__panel--MinWidth: auto;
4276
- --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
4277
- }
4278
- }
4279
- .pf-v6-c-drawer {
4280
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
4281
- --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
4282
- display: flex;
4283
- flex-direction: column;
4284
- height: 100%;
4285
- overflow-x: hidden;
4168
+ .pf-v6-c-divider {
4169
+ flex-direction: row;
4170
+ width: 100%;
4171
+ height: var(--pf-v6-c-divider--Size);
4172
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
4173
+ --pf-v6-hidden-visible--hidden--Display: none;
4174
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4175
+ display: var(--pf-v6-hidden-visible--Display);
4176
+ flex-shrink: 0;
4177
+ align-items: stretch;
4178
+ align-self: stretch;
4179
+ justify-content: center;
4180
+ border: 0;
4286
4181
  }
4287
4182
 
4288
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
4289
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
4183
+ .pf-v6-c-divider.pf-m-hidden {
4184
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4290
4185
  }
4291
4186
 
4292
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
4293
- --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
4187
+ @media screen and (min-width: 36rem) {
4188
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
4189
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4190
+ }
4191
+ .pf-v6-c-divider.pf-m-visible-on-sm {
4192
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4193
+ }
4294
4194
  }
4295
-
4296
- .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
4297
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
4195
+ @media screen and (min-width: 48rem) {
4196
+ .pf-v6-c-divider.pf-m-hidden-on-md {
4197
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4198
+ }
4199
+ .pf-v6-c-divider.pf-m-visible-on-md {
4200
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4201
+ }
4298
4202
  }
4299
-
4300
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4301
- padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
4203
+ @media screen and (min-width: 62rem) {
4204
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
4205
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4206
+ }
4207
+ .pf-v6-c-divider.pf-m-visible-on-lg {
4208
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4209
+ }
4302
4210
  }
4303
-
4304
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4305
- order: 0;
4306
- margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4307
- transform: translateX(-100%);
4308
- }
4309
-
4310
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4311
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4312
- }
4313
-
4314
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4315
- order: 1;
4316
- }
4317
-
4318
- .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
4319
- flex-direction: column;
4320
- }
4321
-
4322
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4323
- transform: translateX(-100%);
4324
- }
4325
-
4326
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4327
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4328
- }
4329
-
4330
- .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4331
- transform: translateX(0);
4332
- }
4333
-
4334
- .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4335
- transform: translate(0, -100%);
4336
- }
4337
-
4338
- .pf-v6-c-drawer.pf-m-resizing {
4339
- --pf-v6-c-drawer__panel--TransitionProperty: none;
4340
- pointer-events: none;
4341
- }
4342
-
4343
- .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
4344
- pointer-events: auto;
4345
- }
4346
-
4347
- .pf-v6-c-drawer__section {
4348
- flex-grow: 0;
4349
- background-color: var(--pf-v6-c-drawer__section--BackgroundColor);
4211
+ @media screen and (min-width: 75rem) {
4212
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
4213
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4214
+ }
4215
+ .pf-v6-c-divider.pf-m-visible-on-xl {
4216
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4217
+ }
4350
4218
  }
4351
-
4352
- .pf-v6-c-drawer__section.pf-m-secondary {
4353
- --pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
4219
+ @media screen and (min-width: 90.625rem) {
4220
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
4221
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
4222
+ }
4223
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
4224
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4225
+ }
4354
4226
  }
4355
-
4356
- .pf-v6-c-drawer__section.pf-m-no-background {
4357
- --pf-v6-c-drawer__section--BackgroundColor: transparent;
4227
+ .pf-v6-c-divider::before {
4228
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
4229
+ content: "";
4230
+ background-color: var(--pf-v6-c-divider--Color);
4358
4231
  }
4359
4232
 
4360
- .pf-v6-c-drawer__main {
4361
- display: flex;
4362
- flex: 1;
4363
- overflow: hidden;
4233
+ .pf-v6-c-divider.pf-m-horizontal {
4234
+ flex-direction: row;
4235
+ width: 100%;
4236
+ height: var(--pf-v6-c-divider--Size);
4364
4237
  }
4365
4238
 
4366
- .pf-v6-c-drawer__content,
4367
- .pf-v6-c-drawer__panel,
4368
- .pf-v6-c-drawer__panel-main {
4369
- display: flex;
4239
+ .pf-v6-c-divider.pf-m-vertical {
4370
4240
  flex-direction: column;
4371
- flex-shrink: 0;
4372
- overflow: auto;
4241
+ width: var(--pf-v6-c-divider--Size);
4242
+ height: inherit;
4373
4243
  }
4374
4244
 
4375
- .pf-v6-c-drawer__content {
4376
- z-index: var(--pf-v6-c-drawer__content--ZIndex);
4377
- flex-basis: var(--pf-v6-c-drawer__content--FlexBasis);
4378
- order: 0;
4379
- background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
4245
+ .pf-v6-c-divider.pf-m-inset-none {
4246
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
4380
4247
  }
4381
4248
 
4382
- .pf-v6-c-drawer__content.pf-m-primary {
4383
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
4249
+ .pf-v6-c-divider.pf-m-inset-xs {
4250
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4384
4251
  }
4385
4252
 
4386
- .pf-v6-c-drawer__content.pf-m-secondary {
4387
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
4253
+ .pf-v6-c-divider.pf-m-inset-sm {
4254
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4388
4255
  }
4389
4256
 
4390
- .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
4391
- padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingBlockStart);
4392
- padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBlockEnd);
4393
- padding-inline-start: var(--pf-v6-c-drawer__content__body--PaddingInlineStart);
4394
- padding-inline-end: var(--pf-v6-c-drawer__content__body--PaddingInlineEnd);
4257
+ .pf-v6-c-divider.pf-m-inset-md {
4258
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4395
4259
  }
4396
4260
 
4397
- .pf-v6-c-drawer__panel {
4398
- position: relative;
4399
- z-index: var(--pf-v6-c-drawer__panel--ZIndex);
4400
- flex-basis: var(--pf-v6-c-drawer__panel--FlexBasis);
4401
- row-gap: var(--pf-v6-c-drawer__panel--RowGap);
4402
- order: 1;
4403
- max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
4404
- overflow: auto;
4405
- background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
4406
- box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
4407
- transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
4408
- transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
4409
- -webkit-overflow-scrolling: touch;
4261
+ .pf-v6-c-divider.pf-m-inset-lg {
4262
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4410
4263
  }
4411
4264
 
4412
- .pf-v6-c-drawer__panel::after {
4413
- position: absolute;
4414
- inset-block-start: 0;
4415
- inset-inline-start: 0;
4416
- width: var(--pf-v6-c-drawer__panel--after--Width);
4417
- height: 100%;
4418
- content: "";
4419
- background-color: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
4265
+ .pf-v6-c-divider.pf-m-inset-xl {
4266
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4420
4267
  }
4421
4268
 
4422
- .pf-v6-c-drawer__panel:not(.pf-m-resizable) {
4423
- padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
4424
- padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
4269
+ .pf-v6-c-divider.pf-m-inset-2xl {
4270
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4425
4271
  }
4426
4272
 
4427
- .pf-v6-c-drawer__panel.pf-m-secondary {
4428
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-secondary--BackgroundColor);
4273
+ .pf-v6-c-divider.pf-m-inset-3xl {
4274
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4429
4275
  }
4430
4276
 
4431
- .pf-v6-c-drawer__panel.pf-m-no-background {
4432
- --pf-v6-c-drawer__panel--BackgroundColor: transparent;
4277
+ @media (min-width: 36rem) {
4278
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
4279
+ flex-direction: row;
4280
+ width: 100%;
4281
+ height: var(--pf-v6-c-divider--Size);
4282
+ }
4433
4283
  }
4434
-
4435
- @media screen and (min-width: 48rem) {
4436
- .pf-v6-c-drawer__panel {
4437
- --pf-v6-c-drawer__panel--FlexBasis:
4438
- max(
4439
- var(--pf-v6-c-drawer__panel--md--FlexBasis--min),
4440
- min(var(--pf-v6-c-drawer__panel--md--FlexBasis), var(--pf-v6-c-drawer__panel--md--FlexBasis--max))
4441
- );
4284
+ @media (min-width: 36rem) {
4285
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
4286
+ flex-direction: column;
4287
+ width: var(--pf-v6-c-divider--Size);
4288
+ height: inherit;
4442
4289
  }
4443
4290
  }
4444
- @media screen and (min-width: 75rem) {
4445
- .pf-v6-c-drawer__panel {
4446
- --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
4291
+ @media (min-width: 36rem) {
4292
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
4293
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4447
4294
  }
4448
- .pf-v6-c-drawer.pf-m-panel-bottom .pf-v6-c-drawer__panel {
4449
- --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
4295
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
4296
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4297
+ }
4298
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
4299
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4300
+ }
4301
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
4302
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4303
+ }
4304
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
4305
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4306
+ }
4307
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
4308
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4309
+ }
4310
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
4311
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4312
+ }
4313
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
4314
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4450
4315
  }
4451
4316
  }
4452
- .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body,
4453
- .pf-v6-c-drawer__panel-main > .pf-v6-c-drawer__body {
4454
- padding-block-start: var(--pf-v6-c-drawer__panel__body--PaddingBlockStart);
4455
- padding-block-end: var(--pf-v6-c-drawer__panel__body--PaddingBlockEnd);
4456
- padding-inline-start: var(--pf-v6-c-drawer__panel__body--PaddingInlineStart);
4457
- padding-inline-end: var(--pf-v6-c-drawer__panel__body--PaddingInlineEnd);
4317
+ @media (min-width: 48rem) {
4318
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
4319
+ flex-direction: row;
4320
+ width: 100%;
4321
+ height: var(--pf-v6-c-divider--Size);
4322
+ }
4458
4323
  }
4459
-
4460
- .pf-v6-c-drawer__panel-main {
4461
- flex-grow: 1;
4462
- padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
4463
- padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
4324
+ @media (min-width: 48rem) {
4325
+ .pf-v6-c-divider.pf-m-vertical-on-md {
4326
+ flex-direction: column;
4327
+ width: var(--pf-v6-c-divider--Size);
4328
+ height: inherit;
4329
+ }
4464
4330
  }
4465
-
4466
- @keyframes pf-remove-tab-focus {
4467
- to {
4468
- visibility: hidden;
4331
+ @media (min-width: 48rem) {
4332
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
4333
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4334
+ }
4335
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
4336
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4337
+ }
4338
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
4339
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4340
+ }
4341
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
4342
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4343
+ }
4344
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
4345
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4346
+ }
4347
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
4348
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4349
+ }
4350
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
4351
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4352
+ }
4353
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
4354
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4469
4355
  }
4470
4356
  }
4471
- .pf-v6-c-drawer__panel[hidden] {
4472
- animation-name: pf-remove-tab-focus;
4473
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
4474
- animation-fill-mode: forwards;
4357
+ @media (min-width: 62rem) {
4358
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
4359
+ flex-direction: row;
4360
+ width: 100%;
4361
+ height: var(--pf-v6-c-divider--Size);
4362
+ }
4475
4363
  }
4476
-
4477
- .pf-v6-c-drawer__head {
4478
- display: grid;
4479
- grid-template-columns: auto;
4480
- grid-auto-columns: max-content;
4481
- column-gap: var(--pf-v6-c-drawer__head--ColumnGap);
4482
- padding-block-start: var(--pf-v6-c-drawer__head--PaddingBlockStart);
4483
- padding-block-end: var(--pf-v6-c-drawer__head--PaddingBlockEnd);
4484
- padding-inline-start: var(--pf-v6-c-drawer__head--PaddingInlineStart);
4485
- padding-inline-end: var(--pf-v6-c-drawer__head--PaddingInlineEnd);
4486
- }
4487
-
4488
- .pf-v6-c-drawer__head > * {
4489
- grid-column: 1;
4490
- }
4491
-
4492
- .pf-v6-c-drawer__actions {
4493
- display: flex;
4494
- grid-row: 1;
4495
- grid-column: 2;
4496
- align-self: baseline;
4497
- margin-block-start: var(--pf-v6-c-drawer__actions--MarginBlockStart);
4498
- margin-inline-end: var(--pf-v6-c-drawer__actions--MarginInlineEnd);
4499
- }
4500
-
4501
- .pf-v6-c-drawer__description {
4502
- padding-inline-start: var(--pf-v6-c-drawer__description--PaddingInlineStart);
4503
- padding-inline-end: var(--pf-v6-c-drawer__description--PaddingInlineEnd);
4504
- }
4505
-
4506
- .pf-v6-c-drawer__body.pf-m-no-padding {
4507
- padding: 0;
4508
- }
4509
-
4510
- .pf-v6-c-drawer__body.pf-m-padding {
4511
- padding-block-start: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockStart);
4512
- padding-block-end: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd);
4513
- padding-inline-start: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineStart);
4514
- padding-inline-end: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd);
4515
- }
4516
-
4517
- .pf-v6-c-drawer__body:not(.pf-m-no-padding) + * {
4518
- padding-block-start: 0;
4519
- }
4520
-
4521
- .pf-v6-c-drawer__body:last-child {
4522
- flex: 1 1;
4523
- }
4524
-
4525
- .pf-v6-c-drawer__splitter {
4526
- position: relative;
4527
- display: none;
4528
- width: var(--pf-v6-c-drawer__splitter--Width);
4529
- height: var(--pf-v6-c-drawer__splitter--Height);
4530
- cursor: var(--pf-v6-c-drawer__splitter--Cursor);
4531
- background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
4532
- }
4533
-
4534
- .pf-v6-c-drawer__splitter.pf-m-vertical {
4535
- --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
4536
- --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
4537
- --pf-v6-c-drawer__splitter--Cursor: var(--pf-v6-c-drawer__splitter--m-vertical--Cursor);
4538
- --pf-v6-c-drawer__splitter-handle--after--Width: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
4539
- --pf-v6-c-drawer__splitter-handle--after--Height: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
4540
- --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth);
4541
- --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth);
4542
- --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
4543
- --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
4544
- }
4545
-
4546
- .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
4547
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
4548
- }
4549
-
4550
- .pf-v6-c-drawer__splitter::after {
4551
- position: absolute;
4552
- inset-block-start: 0;
4553
- inset-block-end: 0;
4554
- inset-inline-start: 0;
4555
- inset-inline-end: 0;
4556
- content: "";
4557
- border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
4558
- border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
4559
- border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
4560
- border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
4561
- border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
4562
- }
4563
-
4564
- .pf-v6-c-drawer__splitter-handle {
4565
- position: absolute;
4566
- inset-block-start: var(--pf-v6-c-drawer__splitter-handle--InsetBlockStart);
4567
- inset-inline-start: var(--pf-v6-c-drawer__splitter-handle--InsetInlineStart);
4568
- transform: translate(-50%, -50%);
4569
- }
4570
-
4571
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer__splitter-handle {
4572
- transform: translate(calc(-50% * var(--pf-v6-global--inverse--multiplier)), -50%);
4573
- }
4574
-
4575
- .pf-v6-c-drawer__splitter-handle::after {
4576
- display: block;
4577
- width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
4578
- height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
4579
- content: "";
4580
- border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
4581
- border-style: solid;
4582
- border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
4583
- border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
4584
- border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
4585
- border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
4586
- }
4587
-
4588
- @media screen and (min-width: 48rem) {
4589
- .pf-v6-c-drawer {
4590
- min-width: var(--pf-v6-c-drawer__panel--MinWidth);
4364
+ @media (min-width: 62rem) {
4365
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
4366
+ flex-direction: column;
4367
+ width: var(--pf-v6-c-divider--Size);
4368
+ height: inherit;
4591
4369
  }
4592
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4593
- box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
4370
+ }
4371
+ @media (min-width: 62rem) {
4372
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
4373
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4594
4374
  }
4595
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
4596
- --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min);
4597
- flex-direction: var(--pf-v6-c-drawer__panel--m-resizable--FlexDirection);
4598
- min-width: var(--pf-v6-c-drawer__panel--m-resizable--MinWidth);
4375
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
4376
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4599
4377
  }
4600
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable::after {
4601
- width: 0;
4602
- height: 0;
4378
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
4379
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4603
4380
  }
4604
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4605
- flex-shrink: 0;
4381
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
4382
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4606
4383
  }
4607
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__panel-main {
4608
- flex-shrink: 1;
4384
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
4385
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4609
4386
  }
4610
- .pf-v6-c-drawer.pf-m-panel-left {
4611
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
4387
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
4388
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4612
4389
  }
4613
- .pf-v6-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-left.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4614
- padding-inline-start: 0;
4615
- padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
4390
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
4391
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4616
4392
  }
4617
- .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4618
- transform: translateX(0);
4393
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
4394
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4619
4395
  }
4620
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
4621
- inset-inline-start: auto;
4622
- inset-inline-end: 0;
4396
+ }
4397
+ @media (min-width: 75rem) {
4398
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
4399
+ flex-direction: row;
4400
+ width: 100%;
4401
+ height: var(--pf-v6-c-divider--Size);
4623
4402
  }
4624
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4625
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
4626
- order: 1;
4403
+ }
4404
+ @media (min-width: 75rem) {
4405
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
4406
+ flex-direction: column;
4407
+ width: var(--pf-v6-c-divider--Size);
4408
+ height: inherit;
4627
4409
  }
4628
- .pf-v6-c-drawer.pf-m-panel-bottom {
4629
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
4630
- --pf-v6-c-drawer__panel--MaxHeight: 100%;
4631
- --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
4632
- min-width: auto;
4633
- min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
4410
+ }
4411
+ @media (min-width: 75rem) {
4412
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
4413
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4634
4414
  }
4635
- .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4636
- padding-block-start: var(--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart);
4637
- padding-inline-start: 0;
4415
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
4416
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4638
4417
  }
4639
- .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
4640
- inset-block-start: 0;
4641
- inset-inline-start: auto;
4642
- width: 100%;
4643
- height: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
4418
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
4419
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4644
4420
  }
4645
- .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
4646
- --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
4647
- --pf-v6-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
4648
- --pf-v6-c-drawer__panel--m-resizable--MinWidth: 0;
4649
- min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
4421
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
4422
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4650
4423
  }
4651
- .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4652
- --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart);
4653
- --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth);
4654
- --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
4655
- --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth);
4656
- --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
4424
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
4425
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4657
4426
  }
4658
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4659
- --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width);
4660
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart);
4661
- outline-offset: var(--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset);
4427
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
4428
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4662
4429
  }
4663
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4664
- --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height);
4665
- --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart);
4666
- --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth);
4667
- --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
4668
- --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
4430
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
4431
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4669
4432
  }
4670
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border,
4671
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border {
4672
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4433
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
4434
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4673
4435
  }
4674
- .pf-v6-c-drawer__splitter {
4675
- display: block;
4436
+ }
4437
+ @media (min-width: 90.625rem) {
4438
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
4439
+ flex-direction: row;
4440
+ width: 100%;
4441
+ height: var(--pf-v6-c-divider--Size);
4676
4442
  }
4677
4443
  }
4678
- @media (min-width: 48rem) {
4679
- .pf-v6-c-drawer__panel.pf-m-width-25 {
4680
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4444
+ @media (min-width: 90.625rem) {
4445
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
4446
+ flex-direction: column;
4447
+ width: var(--pf-v6-c-divider--Size);
4448
+ height: inherit;
4681
4449
  }
4682
- .pf-v6-c-drawer__panel.pf-m-width-33 {
4683
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4450
+ }
4451
+ @media (min-width: 90.625rem) {
4452
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
4453
+ --pf-v6-c-divider--before--FlexBasis: 100%;
4684
4454
  }
4685
- .pf-v6-c-drawer__panel.pf-m-width-50 {
4686
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4455
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
4456
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
4687
4457
  }
4688
- .pf-v6-c-drawer__panel.pf-m-width-66 {
4689
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4690
- }
4691
- .pf-v6-c-drawer__panel.pf-m-width-75 {
4692
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
4693
- }
4694
- .pf-v6-c-drawer__panel.pf-m-width-100 {
4695
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
4696
- }
4697
- }
4698
- @media (min-width: 62rem) {
4699
- .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
4700
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4458
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
4459
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
4701
4460
  }
4702
- .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
4703
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4461
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
4462
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
4704
4463
  }
4705
- .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
4706
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4464
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
4465
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
4707
4466
  }
4708
- .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
4709
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4467
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
4468
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
4710
4469
  }
4711
- .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
4712
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
4470
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
4471
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
4713
4472
  }
4714
- .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
4715
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
4473
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
4474
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
4716
4475
  }
4717
4476
  }
4718
- @media (min-width: 75rem) {
4719
- .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
4720
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4721
- }
4722
- .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
4723
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4724
- }
4725
- .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
4726
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4727
- }
4728
- .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
4729
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4730
- }
4731
- .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
4732
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
4733
- }
4734
- .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
4735
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
4736
- }
4477
+ .pf-v6-c-drawer {
4478
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4479
+ --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4480
+ --pf-v6-c-drawer__content--FlexBasis: 100%;
4481
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
4482
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4483
+ --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4484
+ --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--z-index--xs);
4485
+ --pf-v6-c-drawer__panel--MinWidth: 50%;
4486
+ --pf-v6-c-drawer__panel--MaxHeight: auto;
4487
+ --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
4488
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
4489
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4490
+ --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4491
+ --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
4492
+ --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4493
+ --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4494
+ --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
4495
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
4496
+ --pf-v6-c-drawer__panel--FlexBasis: 100%;
4497
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
4498
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4499
+ --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
4500
+ --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
4501
+ --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
4502
+ --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
4503
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
4504
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
4505
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: row;
4506
+ --pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
4507
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
4508
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
4509
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
4510
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
4511
+ --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
4512
+ --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4513
+ --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4514
+ --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
4515
+ --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4516
+ --pf-v6-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
4517
+ --pf-v6-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4518
+ --pf-v6-c-drawer__body--PaddingBlockStart--base: var(--pf-t--global--spacer--md);
4519
+ --pf-v6-c-drawer__body--PaddingInlineEnd--base: var(--pf-t--global--spacer--md);
4520
+ --pf-v6-c-drawer__body--PaddingBlockEnd--base: var(--pf-t--global--spacer--md);
4521
+ --pf-v6-c-drawer__body--PaddingInlineStart--base: var(--pf-t--global--spacer--md);
4522
+ --pf-v6-c-drawer__content__body--PaddingBlockStart: 0;
4523
+ --pf-v6-c-drawer__content__body--PaddingInlineEnd: 0;
4524
+ --pf-v6-c-drawer__content__body--PaddingBlockEnd: 0;
4525
+ --pf-v6-c-drawer__content__body--PaddingInlineStart: 0;
4526
+ --pf-v6-c-drawer__panel__body--PaddingBlockStart: var(--pf-v6-c-drawer__body--PaddingBlockStart--base);
4527
+ --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-v6-c-drawer__body--PaddingInlineEnd--base);
4528
+ --pf-v6-c-drawer__panel__body--PaddingBlockEnd: var(--pf-v6-c-drawer__body--PaddingBlockEnd--base);
4529
+ --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-v6-c-drawer__body--PaddingInlineStart--base);
4530
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
4531
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4532
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
4533
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
4534
+ --pf-v6-c-drawer__splitter--Height: 0.5625rem;
4535
+ --pf-v6-c-drawer__splitter--Width: 100%;
4536
+ --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4537
+ --pf-v6-c-drawer__splitter--Cursor: row-resize;
4538
+ --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
4539
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
4540
+ --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
4541
+ --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
4542
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
4543
+ --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
4544
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
4545
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4546
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
4547
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4548
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4549
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4550
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
4551
+ --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
4552
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
4553
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
4554
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
4555
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
4556
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
4557
+ --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
4558
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
4559
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
4560
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4561
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
4562
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4563
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
4564
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
4565
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
4566
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
4567
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
4568
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
4569
+ --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
4570
+ --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
4571
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
4572
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
4573
+ --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
4574
+ --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
4575
+ --pf-v6-c-drawer__panel--BoxShadow: none;
4576
+ --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
4577
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
4578
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
4579
+ --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
4580
+ --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
4581
+ --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: var(--pf-v6-c-drawer__panel--after--Width);
4582
+ --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
4583
+ --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
4737
4584
  }
4738
- @media (min-width: 90.625rem) {
4739
- .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
4740
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4741
- }
4742
- .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
4743
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4744
- }
4745
- .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
4746
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4747
- }
4748
- .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
4749
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4750
- }
4751
- .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
4752
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
4585
+
4586
+ @media screen and (min-width: 75rem) {
4587
+ .pf-v6-c-drawer {
4588
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
4753
4589
  }
4754
- .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
4755
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
4590
+ .pf-v6-c-drawer.pf-m-panel-bottom {
4591
+ --pf-v6-c-drawer__panel--MinWidth: auto;
4592
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
4756
4593
  }
4757
4594
  }
4758
- @media (min-width: 48rem) {
4759
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
4760
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4761
- flex-shrink: 1;
4762
- }
4763
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
4764
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4765
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4766
- }
4767
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
4768
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
4769
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
4770
- }
4771
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4772
- overflow-x: auto;
4773
- }
4774
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4775
- margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4776
- transform: translateX(100%);
4777
- }
4778
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4779
- transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
4780
- }
4781
- .pf-v6-c-drawer.pf-m-inline.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4782
- margin-inline-start: 0;
4783
- transform: translateX(0);
4784
- }
4785
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4786
- display: unset;
4787
- }
4788
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4789
- margin-inline-start: 0;
4790
- margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4791
- transform: translateX(-100%);
4792
- }
4793
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4794
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4795
- }
4796
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4797
- margin-inline-end: 0;
4798
- transform: translateX(0);
4799
- }
4800
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4801
- display: unset;
4802
- }
4803
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4804
- margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4805
- transform: translateY(100%);
4806
- }
4807
- .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4808
- margin-block-end: 0;
4809
- transform: translateY(0);
4810
- }
4811
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4812
- transform: translateX(0);
4813
- }
4814
- .pf-v6-c-drawer.pf-m-static.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4815
- margin-inline-end: 0;
4816
- transform: translateX(0);
4817
- }
4818
- .pf-v6-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4819
- transform: translateX(0);
4820
- }
4821
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4822
- display: none;
4823
- }
4595
+ .pf-v6-c-drawer {
4596
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
4597
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
4598
+ display: flex;
4599
+ flex-direction: column;
4600
+ height: 100%;
4601
+ overflow-x: hidden;
4824
4602
  }
4825
- @media (min-width: 62rem) {
4826
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
4827
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4828
- flex-shrink: 1;
4829
- }
4830
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
4831
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4832
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4833
- }
4834
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
4835
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
4836
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
4837
- }
4838
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4839
- overflow-x: auto;
4840
- }
4841
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4842
- margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4843
- transform: translateX(100%);
4844
- }
4845
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4846
- transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
4847
- }
4848
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4849
- margin-inline-start: 0;
4850
- transform: translateX(0);
4851
- }
4852
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4853
- display: unset;
4854
- }
4855
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4856
- margin-inline-start: 0;
4857
- margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4858
- transform: translateX(-100%);
4859
- }
4860
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4861
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4603
+
4604
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
4605
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
4606
+ }
4607
+
4608
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
4609
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
4610
+ }
4611
+
4612
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
4613
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
4614
+ }
4615
+
4616
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4617
+ padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
4618
+ }
4619
+
4620
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4621
+ order: 0;
4622
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4623
+ transform: translateX(-100%);
4624
+ }
4625
+
4626
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4627
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4628
+ }
4629
+
4630
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4631
+ order: 1;
4632
+ }
4633
+
4634
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
4635
+ flex-direction: column;
4636
+ }
4637
+
4638
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4639
+ transform: translateX(-100%);
4640
+ }
4641
+
4642
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4643
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4644
+ }
4645
+
4646
+ .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4647
+ transform: translateX(0);
4648
+ }
4649
+
4650
+ .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4651
+ transform: translate(0, -100%);
4652
+ }
4653
+
4654
+ .pf-v6-c-drawer.pf-m-resizing {
4655
+ --pf-v6-c-drawer__panel--TransitionProperty: none;
4656
+ pointer-events: none;
4657
+ }
4658
+
4659
+ .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
4660
+ pointer-events: auto;
4661
+ }
4662
+
4663
+ .pf-v6-c-drawer__section {
4664
+ flex-grow: 0;
4665
+ background-color: var(--pf-v6-c-drawer__section--BackgroundColor);
4666
+ }
4667
+
4668
+ .pf-v6-c-drawer__section.pf-m-secondary {
4669
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
4670
+ }
4671
+
4672
+ .pf-v6-c-drawer__section.pf-m-no-background {
4673
+ --pf-v6-c-drawer__section--BackgroundColor: transparent;
4674
+ }
4675
+
4676
+ .pf-v6-c-drawer__main {
4677
+ display: flex;
4678
+ flex: 1;
4679
+ overflow: hidden;
4680
+ }
4681
+
4682
+ .pf-v6-c-drawer__content,
4683
+ .pf-v6-c-drawer__panel,
4684
+ .pf-v6-c-drawer__panel-main {
4685
+ display: flex;
4686
+ flex-direction: column;
4687
+ flex-shrink: 0;
4688
+ overflow: auto;
4689
+ }
4690
+
4691
+ .pf-v6-c-drawer__content {
4692
+ z-index: var(--pf-v6-c-drawer__content--ZIndex);
4693
+ flex-basis: var(--pf-v6-c-drawer__content--FlexBasis);
4694
+ order: 0;
4695
+ background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
4696
+ }
4697
+
4698
+ .pf-v6-c-drawer__content.pf-m-primary {
4699
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
4700
+ }
4701
+
4702
+ .pf-v6-c-drawer__content.pf-m-secondary {
4703
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
4704
+ }
4705
+
4706
+ .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
4707
+ padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingBlockStart);
4708
+ padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBlockEnd);
4709
+ padding-inline-start: var(--pf-v6-c-drawer__content__body--PaddingInlineStart);
4710
+ padding-inline-end: var(--pf-v6-c-drawer__content__body--PaddingInlineEnd);
4711
+ }
4712
+
4713
+ .pf-v6-c-drawer__panel {
4714
+ position: relative;
4715
+ z-index: var(--pf-v6-c-drawer__panel--ZIndex);
4716
+ flex-basis: var(--pf-v6-c-drawer__panel--FlexBasis);
4717
+ row-gap: var(--pf-v6-c-drawer__panel--RowGap);
4718
+ order: 1;
4719
+ max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
4720
+ overflow: auto;
4721
+ background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
4722
+ box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
4723
+ transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
4724
+ transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
4725
+ -webkit-overflow-scrolling: touch;
4726
+ }
4727
+
4728
+ .pf-v6-c-drawer__panel::after {
4729
+ position: absolute;
4730
+ inset-block-start: 0;
4731
+ inset-inline-start: 0;
4732
+ width: var(--pf-v6-c-drawer__panel--after--Width);
4733
+ height: 100%;
4734
+ content: "";
4735
+ background-color: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
4736
+ }
4737
+
4738
+ .pf-v6-c-drawer__panel:not(.pf-m-resizable) {
4739
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
4740
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
4741
+ }
4742
+
4743
+ .pf-v6-c-drawer__panel.pf-m-secondary {
4744
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-secondary--BackgroundColor);
4745
+ }
4746
+
4747
+ .pf-v6-c-drawer__panel.pf-m-no-background {
4748
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
4749
+ }
4750
+
4751
+ @media screen and (min-width: 48rem) {
4752
+ .pf-v6-c-drawer__panel {
4753
+ --pf-v6-c-drawer__panel--FlexBasis:
4754
+ max(
4755
+ var(--pf-v6-c-drawer__panel--md--FlexBasis--min),
4756
+ min(var(--pf-v6-c-drawer__panel--md--FlexBasis), var(--pf-v6-c-drawer__panel--md--FlexBasis--max))
4757
+ );
4862
4758
  }
4863
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4864
- margin-inline-end: 0;
4865
- transform: translateX(0);
4759
+ }
4760
+ @media screen and (min-width: 75rem) {
4761
+ .pf-v6-c-drawer__panel {
4762
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
4866
4763
  }
4867
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4868
- display: unset;
4764
+ .pf-v6-c-drawer.pf-m-panel-bottom .pf-v6-c-drawer__panel {
4765
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
4869
4766
  }
4870
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4871
- margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4872
- transform: translateY(100%);
4767
+ }
4768
+ .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body,
4769
+ .pf-v6-c-drawer__panel-main > .pf-v6-c-drawer__body {
4770
+ padding-block-start: var(--pf-v6-c-drawer__panel__body--PaddingBlockStart);
4771
+ padding-block-end: var(--pf-v6-c-drawer__panel__body--PaddingBlockEnd);
4772
+ padding-inline-start: var(--pf-v6-c-drawer__panel__body--PaddingInlineStart);
4773
+ padding-inline-end: var(--pf-v6-c-drawer__panel__body--PaddingInlineEnd);
4774
+ }
4775
+
4776
+ .pf-v6-c-drawer__panel-main {
4777
+ flex-grow: 1;
4778
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
4779
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
4780
+ }
4781
+
4782
+ @keyframes pf-remove-tab-focus {
4783
+ to {
4784
+ visibility: hidden;
4873
4785
  }
4874
- .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4875
- margin-block-end: 0;
4876
- transform: translateY(0);
4786
+ }
4787
+ .pf-v6-c-drawer__panel[hidden] {
4788
+ animation-name: pf-remove-tab-focus;
4789
+ animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
4790
+ animation-fill-mode: forwards;
4791
+ }
4792
+
4793
+ .pf-v6-c-drawer__head {
4794
+ display: grid;
4795
+ grid-template-columns: auto;
4796
+ grid-auto-columns: max-content;
4797
+ column-gap: var(--pf-v6-c-drawer__head--ColumnGap);
4798
+ padding-block-start: var(--pf-v6-c-drawer__head--PaddingBlockStart);
4799
+ padding-block-end: var(--pf-v6-c-drawer__head--PaddingBlockEnd);
4800
+ padding-inline-start: var(--pf-v6-c-drawer__head--PaddingInlineStart);
4801
+ padding-inline-end: var(--pf-v6-c-drawer__head--PaddingInlineEnd);
4802
+ }
4803
+
4804
+ .pf-v6-c-drawer__head > * {
4805
+ grid-column: 1;
4806
+ }
4807
+
4808
+ .pf-v6-c-drawer__actions {
4809
+ display: flex;
4810
+ grid-row: 1;
4811
+ grid-column: 2;
4812
+ align-self: baseline;
4813
+ margin-block-start: var(--pf-v6-c-drawer__actions--MarginBlockStart);
4814
+ margin-inline-end: var(--pf-v6-c-drawer__actions--MarginInlineEnd);
4815
+ }
4816
+
4817
+ .pf-v6-c-drawer__description {
4818
+ padding-inline-start: var(--pf-v6-c-drawer__description--PaddingInlineStart);
4819
+ padding-inline-end: var(--pf-v6-c-drawer__description--PaddingInlineEnd);
4820
+ }
4821
+
4822
+ .pf-v6-c-drawer__body.pf-m-no-padding {
4823
+ padding: 0;
4824
+ }
4825
+
4826
+ .pf-v6-c-drawer__body.pf-m-padding {
4827
+ padding-block-start: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockStart);
4828
+ padding-block-end: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd);
4829
+ padding-inline-start: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineStart);
4830
+ padding-inline-end: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd);
4831
+ }
4832
+
4833
+ .pf-v6-c-drawer__body:not(.pf-m-no-padding) + * {
4834
+ padding-block-start: 0;
4835
+ }
4836
+
4837
+ .pf-v6-c-drawer__body:last-child {
4838
+ flex: 1 1;
4839
+ }
4840
+
4841
+ .pf-v6-c-drawer__splitter {
4842
+ position: relative;
4843
+ display: none;
4844
+ width: var(--pf-v6-c-drawer__splitter--Width);
4845
+ height: var(--pf-v6-c-drawer__splitter--Height);
4846
+ cursor: var(--pf-v6-c-drawer__splitter--Cursor);
4847
+ background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
4848
+ }
4849
+
4850
+ .pf-v6-c-drawer__splitter.pf-m-vertical {
4851
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
4852
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
4853
+ --pf-v6-c-drawer__splitter--Cursor: var(--pf-v6-c-drawer__splitter--m-vertical--Cursor);
4854
+ --pf-v6-c-drawer__splitter-handle--after--Width: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
4855
+ --pf-v6-c-drawer__splitter-handle--after--Height: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
4856
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth);
4857
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth);
4858
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
4859
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
4860
+ }
4861
+
4862
+ .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
4863
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
4864
+ }
4865
+
4866
+ .pf-v6-c-drawer__splitter::after {
4867
+ position: absolute;
4868
+ inset-block-start: 0;
4869
+ inset-block-end: 0;
4870
+ inset-inline-start: 0;
4871
+ inset-inline-end: 0;
4872
+ content: "";
4873
+ border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
4874
+ border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
4875
+ border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
4876
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
4877
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
4878
+ }
4879
+
4880
+ .pf-v6-c-drawer__splitter-handle {
4881
+ position: absolute;
4882
+ inset-block-start: var(--pf-v6-c-drawer__splitter-handle--InsetBlockStart);
4883
+ inset-inline-start: var(--pf-v6-c-drawer__splitter-handle--InsetInlineStart);
4884
+ transform: translate(-50%, -50%);
4885
+ }
4886
+
4887
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer__splitter-handle {
4888
+ transform: translate(calc(-50% * var(--pf-v6-global--inverse--multiplier)), -50%);
4889
+ }
4890
+
4891
+ .pf-v6-c-drawer__splitter-handle::after {
4892
+ display: block;
4893
+ width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
4894
+ height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
4895
+ content: "";
4896
+ border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
4897
+ border-style: solid;
4898
+ border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
4899
+ border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
4900
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
4901
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
4902
+ }
4903
+
4904
+ @media screen and (min-width: 48rem) {
4905
+ .pf-v6-c-drawer {
4906
+ min-width: var(--pf-v6-c-drawer__panel--MinWidth);
4877
4907
  }
4878
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4879
- transform: translateX(0);
4908
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4909
+ box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
4880
4910
  }
4881
- .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4882
- margin-inline-end: 0;
4883
- transform: translateX(0);
4911
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
4912
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min);
4913
+ flex-direction: var(--pf-v6-c-drawer__panel--m-resizable--FlexDirection);
4914
+ min-width: var(--pf-v6-c-drawer__panel--m-resizable--MinWidth);
4884
4915
  }
4885
- .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4886
- transform: translateX(0);
4916
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable::after {
4917
+ width: 0;
4918
+ height: 0;
4887
4919
  }
4888
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4889
- display: none;
4920
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4921
+ flex-shrink: 0;
4890
4922
  }
4891
- }
4892
- @media (min-width: 75rem) {
4893
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
4894
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4923
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__panel-main {
4895
4924
  flex-shrink: 1;
4896
4925
  }
4897
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
4898
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4899
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4900
- }
4901
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
4902
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
4903
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
4904
- }
4905
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4906
- overflow-x: auto;
4907
- }
4908
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4909
- margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4910
- transform: translateX(100%);
4926
+ .pf-v6-c-drawer.pf-m-panel-left {
4927
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
4911
4928
  }
4912
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4913
- transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
4929
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-left.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4930
+ padding-inline-start: 0;
4931
+ padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
4914
4932
  }
4915
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4916
- margin-inline-start: 0;
4933
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4917
4934
  transform: translateX(0);
4918
4935
  }
4919
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4920
- display: unset;
4936
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
4937
+ inset-inline-start: auto;
4938
+ inset-inline-end: 0;
4921
4939
  }
4922
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4923
- margin-inline-start: 0;
4924
- margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4925
- transform: translateX(-100%);
4940
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4941
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
4942
+ order: 1;
4926
4943
  }
4927
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4928
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
4944
+ .pf-v6-c-drawer.pf-m-panel-bottom {
4945
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
4946
+ --pf-v6-c-drawer__panel--MaxHeight: 100%;
4947
+ --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
4948
+ min-width: auto;
4949
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
4929
4950
  }
4930
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4931
- margin-inline-end: 0;
4932
- transform: translateX(0);
4951
+ .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
4952
+ padding-block-start: var(--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart);
4953
+ padding-inline-start: 0;
4933
4954
  }
4934
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4935
- display: unset;
4955
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
4956
+ inset-block-start: 0;
4957
+ inset-inline-start: auto;
4958
+ width: 100%;
4959
+ height: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
4936
4960
  }
4937
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4938
- margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4939
- transform: translateY(100%);
4961
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
4962
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
4963
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
4964
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 0;
4965
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
4940
4966
  }
4941
- .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4942
- margin-block-end: 0;
4943
- transform: translateY(0);
4967
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4968
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart);
4969
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth);
4970
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
4971
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth);
4972
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
4944
4973
  }
4945
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4946
- transform: translateX(0);
4974
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4975
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width);
4976
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart);
4977
+ outline-offset: var(--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset);
4947
4978
  }
4948
- .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4949
- margin-inline-end: 0;
4950
- transform: translateX(0);
4979
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
4980
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height);
4981
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart);
4982
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth);
4983
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
4984
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
4951
4985
  }
4952
- .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4953
- transform: translateX(0);
4986
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border,
4987
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border {
4988
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4954
4989
  }
4955
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4956
- display: none;
4990
+ .pf-v6-c-drawer__splitter {
4991
+ display: block;
4957
4992
  }
4958
4993
  }
4959
- @media (min-width: 90.625rem) {
4960
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
4961
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4962
- flex-shrink: 1;
4994
+ @media (min-width: 48rem) {
4995
+ .pf-v6-c-drawer__panel.pf-m-width-25 {
4996
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4963
4997
  }
4964
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
4965
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4966
- --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
4998
+ .pf-v6-c-drawer__panel.pf-m-width-33 {
4999
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4967
5000
  }
4968
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
4969
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
4970
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
5001
+ .pf-v6-c-drawer__panel.pf-m-width-50 {
5002
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4971
5003
  }
4972
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
4973
- overflow-x: auto;
5004
+ .pf-v6-c-drawer__panel.pf-m-width-66 {
5005
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4974
5006
  }
4975
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4976
- margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4977
- transform: translateX(100%);
5007
+ .pf-v6-c-drawer__panel.pf-m-width-75 {
5008
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
4978
5009
  }
4979
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4980
- transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
5010
+ .pf-v6-c-drawer__panel.pf-m-width-100 {
5011
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
4981
5012
  }
4982
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4983
- margin-inline-start: 0;
4984
- transform: translateX(0);
5013
+ }
5014
+ @media (min-width: 62rem) {
5015
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
5016
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
4985
5017
  }
4986
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
4987
- display: unset;
5018
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
5019
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
4988
5020
  }
4989
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4990
- margin-inline-start: 0;
4991
- margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
4992
- transform: translateX(-100%);
5021
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
5022
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
4993
5023
  }
4994
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4995
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
5024
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
5025
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
4996
5026
  }
4997
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
4998
- margin-inline-end: 0;
4999
- transform: translateX(0);
5027
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
5028
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
5000
5029
  }
5001
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5002
- display: unset;
5030
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
5031
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
5003
5032
  }
5004
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5005
- margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5006
- transform: translateY(100%);
5033
+ }
5034
+ @media (min-width: 75rem) {
5035
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
5036
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
5007
5037
  }
5008
- .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5009
- margin-block-end: 0;
5010
- transform: translateY(0);
5038
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
5039
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
5011
5040
  }
5012
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5013
- transform: translateX(0);
5041
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
5042
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
5014
5043
  }
5015
- .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5016
- margin-inline-end: 0;
5017
- transform: translateX(0);
5044
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
5045
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
5018
5046
  }
5019
- .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5020
- transform: translateX(0);
5047
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
5048
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
5021
5049
  }
5022
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5023
- display: none;
5050
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
5051
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
5024
5052
  }
5025
5053
  }
5026
- .pf-v6-c-divider {
5027
- --pf-v6-c-divider--Display: flex;
5028
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
5029
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
5030
- --pf-v6-c-divider--before--FlexBasis: 100%;
5031
- }
5032
-
5033
- .pf-v6-c-divider {
5034
- flex-direction: row;
5035
- width: 100%;
5036
- height: var(--pf-v6-c-divider--Size);
5037
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
5038
- --pf-v6-hidden-visible--hidden--Display: none;
5039
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5040
- display: var(--pf-v6-hidden-visible--Display);
5041
- flex-shrink: 0;
5042
- align-items: stretch;
5043
- align-self: stretch;
5044
- justify-content: center;
5045
- border: 0;
5046
- }
5047
-
5048
- .pf-v6-c-divider.pf-m-hidden {
5049
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5050
- }
5051
-
5052
- @media screen and (min-width: 36rem) {
5053
- .pf-v6-c-divider.pf-m-hidden-on-sm {
5054
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5054
+ @media (min-width: 90.625rem) {
5055
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
5056
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
5055
5057
  }
5056
- .pf-v6-c-divider.pf-m-visible-on-sm {
5057
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5058
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
5059
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
5058
5060
  }
5059
- }
5060
- @media screen and (min-width: 48rem) {
5061
- .pf-v6-c-divider.pf-m-hidden-on-md {
5062
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5061
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
5062
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
5063
5063
  }
5064
- .pf-v6-c-divider.pf-m-visible-on-md {
5065
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5064
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
5065
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
5066
5066
  }
5067
- }
5068
- @media screen and (min-width: 62rem) {
5069
- .pf-v6-c-divider.pf-m-hidden-on-lg {
5070
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5067
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
5068
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
5071
5069
  }
5072
- .pf-v6-c-divider.pf-m-visible-on-lg {
5073
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5070
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
5071
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
5074
5072
  }
5075
5073
  }
5076
- @media screen and (min-width: 75rem) {
5077
- .pf-v6-c-divider.pf-m-hidden-on-xl {
5078
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5079
- }
5080
- .pf-v6-c-divider.pf-m-visible-on-xl {
5081
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5074
+ @media (min-width: 48rem) {
5075
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
5076
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5077
+ flex-shrink: 1;
5082
5078
  }
5083
- }
5084
- @media screen and (min-width: 90.625rem) {
5085
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
5086
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
5079
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
5080
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5081
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
5087
5082
  }
5088
- .pf-v6-c-divider.pf-m-visible-on-2xl {
5089
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5083
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
5084
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
5085
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
5090
5086
  }
5091
- }
5092
- .pf-v6-c-divider::before {
5093
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
5094
- content: "";
5095
- background-color: var(--pf-v6-c-divider--Color);
5096
- }
5097
-
5098
- .pf-v6-c-divider.pf-m-horizontal {
5099
- flex-direction: row;
5100
- width: 100%;
5101
- height: var(--pf-v6-c-divider--Size);
5102
- }
5103
-
5104
- .pf-v6-c-divider.pf-m-vertical {
5105
- flex-direction: column;
5106
- width: var(--pf-v6-c-divider--Size);
5107
- height: inherit;
5108
- }
5109
-
5110
- .pf-v6-c-divider.pf-m-inset-none {
5111
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
5112
- }
5113
-
5114
- .pf-v6-c-divider.pf-m-inset-xs {
5115
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5116
- }
5117
-
5118
- .pf-v6-c-divider.pf-m-inset-sm {
5119
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5120
- }
5121
-
5122
- .pf-v6-c-divider.pf-m-inset-md {
5123
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5124
- }
5125
-
5126
- .pf-v6-c-divider.pf-m-inset-lg {
5127
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5128
- }
5129
-
5130
- .pf-v6-c-divider.pf-m-inset-xl {
5131
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5132
- }
5133
-
5134
- .pf-v6-c-divider.pf-m-inset-2xl {
5135
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5136
- }
5137
-
5138
- .pf-v6-c-divider.pf-m-inset-3xl {
5139
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5140
- }
5141
-
5142
- @media (min-width: 36rem) {
5143
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
5144
- flex-direction: row;
5145
- width: 100%;
5146
- height: var(--pf-v6-c-divider--Size);
5087
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5088
+ overflow-x: auto;
5147
5089
  }
5148
- }
5149
- @media (min-width: 36rem) {
5150
- .pf-v6-c-divider.pf-m-vertical-on-sm {
5151
- flex-direction: column;
5152
- width: var(--pf-v6-c-divider--Size);
5153
- height: inherit;
5090
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5091
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5092
+ transform: translateX(100%);
5154
5093
  }
5155
- }
5156
- @media (min-width: 36rem) {
5157
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
5158
- --pf-v6-c-divider--before--FlexBasis: 100%;
5094
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5095
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
5159
5096
  }
5160
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
5161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5097
+ .pf-v6-c-drawer.pf-m-inline.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5098
+ margin-inline-start: 0;
5099
+ transform: translateX(0);
5162
5100
  }
5163
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
5164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5101
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5102
+ display: unset;
5165
5103
  }
5166
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
5167
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5104
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5105
+ margin-inline-start: 0;
5106
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5107
+ transform: translateX(-100%);
5168
5108
  }
5169
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
5170
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5109
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5110
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
5171
5111
  }
5172
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
5173
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5112
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5113
+ margin-inline-end: 0;
5114
+ transform: translateX(0);
5174
5115
  }
5175
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
5176
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5116
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5117
+ display: unset;
5177
5118
  }
5178
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
5179
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5119
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5120
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5121
+ transform: translateY(100%);
5180
5122
  }
5181
- }
5182
- @media (min-width: 48rem) {
5183
- .pf-v6-c-divider.pf-m-horizontal-on-md {
5184
- flex-direction: row;
5185
- width: 100%;
5186
- height: var(--pf-v6-c-divider--Size);
5123
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5124
+ margin-block-end: 0;
5125
+ transform: translateY(0);
5187
5126
  }
5188
- }
5189
- @media (min-width: 48rem) {
5190
- .pf-v6-c-divider.pf-m-vertical-on-md {
5191
- flex-direction: column;
5192
- width: var(--pf-v6-c-divider--Size);
5193
- height: inherit;
5127
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5128
+ transform: translateX(0);
5129
+ }
5130
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5131
+ margin-inline-end: 0;
5132
+ transform: translateX(0);
5133
+ }
5134
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5135
+ transform: translateX(0);
5136
+ }
5137
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5138
+ display: none;
5194
5139
  }
5195
5140
  }
5196
- @media (min-width: 48rem) {
5197
- .pf-v6-c-divider.pf-m-inset-none-on-md {
5198
- --pf-v6-c-divider--before--FlexBasis: 100%;
5141
+ @media (min-width: 62rem) {
5142
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
5143
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5144
+ flex-shrink: 1;
5199
5145
  }
5200
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
5201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5146
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
5147
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5148
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
5202
5149
  }
5203
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
5204
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5150
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
5151
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
5152
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
5205
5153
  }
5206
- .pf-v6-c-divider.pf-m-inset-md-on-md {
5207
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5154
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5155
+ overflow-x: auto;
5208
5156
  }
5209
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
5210
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5157
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5158
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5159
+ transform: translateX(100%);
5211
5160
  }
5212
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
5213
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5161
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5162
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
5214
5163
  }
5215
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
5216
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5164
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5165
+ margin-inline-start: 0;
5166
+ transform: translateX(0);
5217
5167
  }
5218
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
5219
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5168
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5169
+ display: unset;
5220
5170
  }
5221
- }
5222
- @media (min-width: 62rem) {
5223
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
5224
- flex-direction: row;
5225
- width: 100%;
5226
- height: var(--pf-v6-c-divider--Size);
5171
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5172
+ margin-inline-start: 0;
5173
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5174
+ transform: translateX(-100%);
5227
5175
  }
5228
- }
5229
- @media (min-width: 62rem) {
5230
- .pf-v6-c-divider.pf-m-vertical-on-lg {
5231
- flex-direction: column;
5232
- width: var(--pf-v6-c-divider--Size);
5233
- height: inherit;
5176
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5177
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
5234
5178
  }
5235
- }
5236
- @media (min-width: 62rem) {
5237
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
5238
- --pf-v6-c-divider--before--FlexBasis: 100%;
5179
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5180
+ margin-inline-end: 0;
5181
+ transform: translateX(0);
5239
5182
  }
5240
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
5241
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5183
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5184
+ display: unset;
5242
5185
  }
5243
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
5244
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5186
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5187
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5188
+ transform: translateY(100%);
5245
5189
  }
5246
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
5247
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5190
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5191
+ margin-block-end: 0;
5192
+ transform: translateY(0);
5248
5193
  }
5249
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
5250
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5194
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5195
+ transform: translateX(0);
5251
5196
  }
5252
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
5253
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5197
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5198
+ margin-inline-end: 0;
5199
+ transform: translateX(0);
5254
5200
  }
5255
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
5256
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5201
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5202
+ transform: translateX(0);
5257
5203
  }
5258
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
5259
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5204
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5205
+ display: none;
5260
5206
  }
5261
5207
  }
5262
5208
  @media (min-width: 75rem) {
5263
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
5264
- flex-direction: row;
5265
- width: 100%;
5266
- height: var(--pf-v6-c-divider--Size);
5209
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
5210
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5211
+ flex-shrink: 1;
5267
5212
  }
5268
- }
5269
- @media (min-width: 75rem) {
5270
- .pf-v6-c-divider.pf-m-vertical-on-xl {
5271
- flex-direction: column;
5272
- width: var(--pf-v6-c-divider--Size);
5273
- height: inherit;
5213
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
5214
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5215
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
5216
+ }
5217
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
5218
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
5219
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
5220
+ }
5221
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5222
+ overflow-x: auto;
5223
+ }
5224
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5225
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5226
+ transform: translateX(100%);
5227
+ }
5228
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5229
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
5230
+ }
5231
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5232
+ margin-inline-start: 0;
5233
+ transform: translateX(0);
5234
+ }
5235
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5236
+ display: unset;
5237
+ }
5238
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5239
+ margin-inline-start: 0;
5240
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5241
+ transform: translateX(-100%);
5242
+ }
5243
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5244
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
5245
+ }
5246
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5247
+ margin-inline-end: 0;
5248
+ transform: translateX(0);
5249
+ }
5250
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5251
+ display: unset;
5252
+ }
5253
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5254
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5255
+ transform: translateY(100%);
5256
+ }
5257
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5258
+ margin-block-end: 0;
5259
+ transform: translateY(0);
5260
+ }
5261
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5262
+ transform: translateX(0);
5263
+ }
5264
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5265
+ margin-inline-end: 0;
5266
+ transform: translateX(0);
5267
+ }
5268
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5269
+ transform: translateX(0);
5270
+ }
5271
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5272
+ display: none;
5274
5273
  }
5275
5274
  }
5276
- @media (min-width: 75rem) {
5277
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
5278
- --pf-v6-c-divider--before--FlexBasis: 100%;
5275
+ @media (min-width: 90.625rem) {
5276
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
5277
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5278
+ flex-shrink: 1;
5279
5279
  }
5280
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
5281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5280
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
5281
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5282
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
5282
5283
  }
5283
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
5284
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5284
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
5285
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
5286
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
5285
5287
  }
5286
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
5287
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5288
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
5289
+ overflow-x: auto;
5288
5290
  }
5289
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
5290
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5291
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5292
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5293
+ transform: translateX(100%);
5291
5294
  }
5292
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
5293
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5295
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5296
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
5294
5297
  }
5295
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
5296
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5298
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5299
+ margin-inline-start: 0;
5300
+ transform: translateX(0);
5297
5301
  }
5298
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
5299
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5302
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5303
+ display: unset;
5300
5304
  }
5301
- }
5302
- @media (min-width: 90.625rem) {
5303
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
5304
- flex-direction: row;
5305
- width: 100%;
5306
- height: var(--pf-v6-c-divider--Size);
5305
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5306
+ margin-inline-start: 0;
5307
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5308
+ transform: translateX(-100%);
5307
5309
  }
5308
- }
5309
- @media (min-width: 90.625rem) {
5310
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
5311
- flex-direction: column;
5312
- width: var(--pf-v6-c-divider--Size);
5313
- height: inherit;
5310
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5311
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
5314
5312
  }
5315
- }
5316
- @media (min-width: 90.625rem) {
5317
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
5318
- --pf-v6-c-divider--before--FlexBasis: 100%;
5313
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5314
+ margin-inline-end: 0;
5315
+ transform: translateX(0);
5319
5316
  }
5320
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
5321
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
5317
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5318
+ display: unset;
5322
5319
  }
5323
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
5324
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
5320
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5321
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
5322
+ transform: translateY(100%);
5325
5323
  }
5326
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
5327
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
5324
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5325
+ margin-block-end: 0;
5326
+ transform: translateY(0);
5328
5327
  }
5329
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
5330
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5328
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5329
+ transform: translateX(0);
5331
5330
  }
5332
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
5333
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
5331
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5332
+ margin-inline-end: 0;
5333
+ transform: translateX(0);
5334
5334
  }
5335
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
5336
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
5335
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5336
+ transform: translateX(0);
5337
5337
  }
5338
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
5339
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
5338
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
5339
+ display: none;
5340
5340
  }
5341
5341
  }
5342
5342
  .pf-v6-c-dual-list-selector {
@@ -5689,94 +5689,6 @@ ul) {
5689
5689
  --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
5690
5690
  }
5691
5691
 
5692
- .pf-v6-c-expandable-section {
5693
- --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
5694
- --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
5695
- --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
5696
- --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
5697
- --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
5698
- --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
5699
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
5700
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
5701
- --pf-v6-c-expandable-section__content--MaxWidth: auto;
5702
- --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
5703
- --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5704
- --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5705
- --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
5706
- --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
5707
- --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
5708
- --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5709
- --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
5710
- --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
5711
- --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
5712
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
5713
- --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
5714
- --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
5715
- }
5716
-
5717
- .pf-v6-c-expandable-section {
5718
- display: flex;
5719
- flex-direction: column;
5720
- gap: var(--pf-v6-c-expandable-section--Gap);
5721
- }
5722
-
5723
- .pf-v6-c-expandable-section.pf-m-expanded {
5724
- --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
5725
- --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
5726
- --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
5727
- }
5728
-
5729
- .pf-v6-c-expandable-section.pf-m-limit-width {
5730
- --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
5731
- }
5732
-
5733
- .pf-v6-c-expandable-section.pf-m-display-lg {
5734
- padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
5735
- padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
5736
- padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
5737
- padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
5738
- background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
5739
- border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
5740
- border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
5741
- }
5742
-
5743
- .pf-v6-c-expandable-section.pf-m-indented {
5744
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
5745
- }
5746
-
5747
- .pf-v6-c-expandable-section.pf-m-truncate {
5748
- --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
5749
- }
5750
-
5751
- .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
5752
- display: -webkit-box;
5753
- -webkit-box-orient: vertical;
5754
- -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
5755
- overflow: hidden;
5756
- }
5757
-
5758
- .pf-v6-c-expandable-section__toggle-icon {
5759
- display: inline-block;
5760
- min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
5761
- color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
5762
- transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
5763
- transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
5764
- }
5765
-
5766
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
5767
- scale: -1 1;
5768
- }
5769
-
5770
- .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
5771
- --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
5772
- }
5773
-
5774
- .pf-v6-c-expandable-section__content {
5775
- max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
5776
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
5777
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
5778
- }
5779
-
5780
5692
  .pf-v6-c-empty-state {
5781
5693
  --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-t--global--spacer--xl);
5782
5694
  --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
@@ -5867,63 +5779,151 @@ ul) {
5867
5779
  height: 100%;
5868
5780
  }
5869
5781
 
5870
- .pf-v6-c-empty-state.pf-m-danger {
5871
- --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-danger__icon--Color);
5782
+ .pf-v6-c-empty-state.pf-m-danger {
5783
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-danger__icon--Color);
5784
+ }
5785
+
5786
+ .pf-v6-c-empty-state.pf-m-warning {
5787
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-warning__icon--Color);
5788
+ }
5789
+
5790
+ .pf-v6-c-empty-state.pf-m-success {
5791
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-success__icon--Color);
5792
+ }
5793
+
5794
+ .pf-v6-c-empty-state.pf-m-info {
5795
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-info__icon--Color);
5796
+ }
5797
+
5798
+ .pf-v6-c-empty-state.pf-m-custom {
5799
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-custom__icon--Color);
5800
+ }
5801
+
5802
+ .pf-v6-c-empty-state__content {
5803
+ max-width: var(--pf-v6-c-empty-state__content--MaxWidth);
5804
+ }
5805
+
5806
+ .pf-v6-c-empty-state__icon {
5807
+ margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBlockEnd);
5808
+ font-size: var(--pf-v6-c-empty-state__icon--FontSize);
5809
+ line-height: 1;
5810
+ color: var(--pf-v6-c-empty-state__icon--Color);
5811
+ }
5812
+
5813
+ .pf-v6-c-empty-state__title-text {
5814
+ font-family: var(--pf-v6-c-empty-state__title-text--FontFamily);
5815
+ font-size: var(--pf-v6-c-empty-state__title-text--FontSize);
5816
+ font-weight: var(--pf-v6-c-empty-state__title-text--FontWeight);
5817
+ line-height: var(--pf-v6-c-empty-state__title-text--LineHeight);
5818
+ }
5819
+
5820
+ .pf-v6-c-empty-state__body {
5821
+ margin-block-start: var(--pf-v6-c-empty-state__body--MarginBlockStart);
5822
+ font-size: var(--pf-v6-c-empty-state--body--FontSize);
5823
+ color: var(--pf-v6-c-empty-state__body--Color);
5824
+ }
5825
+
5826
+ .pf-v6-c-empty-state__footer {
5827
+ display: flex;
5828
+ flex-direction: column;
5829
+ row-gap: var(--pf-v6-c-empty-state__footer--RowGap);
5830
+ align-items: center;
5831
+ margin-block-start: var(--pf-v6-c-empty-state__footer--MarginBlockStart);
5832
+ }
5833
+
5834
+ .pf-v6-c-empty-state__actions {
5835
+ display: flex;
5836
+ flex-wrap: wrap;
5837
+ gap: var(--pf-v6-c-empty-state__actions--RowGap) var(--pf-v6-c-empty-state__actions--ColumnGap);
5838
+ justify-content: center;
5839
+ }
5840
+
5841
+ .pf-v6-c-expandable-section {
5842
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
5843
+ --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
5844
+ --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
5845
+ --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
5846
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
5847
+ --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
5848
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
5849
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
5850
+ --pf-v6-c-expandable-section__content--MaxWidth: auto;
5851
+ --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
5852
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5853
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5854
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
5855
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
5856
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
5857
+ --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5858
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
5859
+ --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
5860
+ --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
5861
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
5862
+ --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
5863
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
5864
+ }
5865
+
5866
+ .pf-v6-c-expandable-section {
5867
+ display: flex;
5868
+ flex-direction: column;
5869
+ gap: var(--pf-v6-c-expandable-section--Gap);
5872
5870
  }
5873
5871
 
5874
- .pf-v6-c-empty-state.pf-m-warning {
5875
- --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-warning__icon--Color);
5872
+ .pf-v6-c-expandable-section.pf-m-expanded {
5873
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
5874
+ --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
5875
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
5876
5876
  }
5877
5877
 
5878
- .pf-v6-c-empty-state.pf-m-success {
5879
- --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-success__icon--Color);
5878
+ .pf-v6-c-expandable-section.pf-m-limit-width {
5879
+ --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
5880
5880
  }
5881
5881
 
5882
- .pf-v6-c-empty-state.pf-m-info {
5883
- --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-info__icon--Color);
5882
+ .pf-v6-c-expandable-section.pf-m-display-lg {
5883
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
5884
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
5885
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
5886
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
5887
+ background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
5888
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
5889
+ border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
5884
5890
  }
5885
5891
 
5886
- .pf-v6-c-empty-state.pf-m-custom {
5887
- --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-custom__icon--Color);
5892
+ .pf-v6-c-expandable-section.pf-m-indented {
5893
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
5888
5894
  }
5889
5895
 
5890
- .pf-v6-c-empty-state__content {
5891
- max-width: var(--pf-v6-c-empty-state__content--MaxWidth);
5896
+ .pf-v6-c-expandable-section.pf-m-truncate {
5897
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
5892
5898
  }
5893
5899
 
5894
- .pf-v6-c-empty-state__icon {
5895
- margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBlockEnd);
5896
- font-size: var(--pf-v6-c-empty-state__icon--FontSize);
5897
- line-height: 1;
5898
- color: var(--pf-v6-c-empty-state__icon--Color);
5900
+ .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
5901
+ display: -webkit-box;
5902
+ -webkit-box-orient: vertical;
5903
+ -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
5904
+ overflow: hidden;
5899
5905
  }
5900
5906
 
5901
- .pf-v6-c-empty-state__title-text {
5902
- font-family: var(--pf-v6-c-empty-state__title-text--FontFamily);
5903
- font-size: var(--pf-v6-c-empty-state__title-text--FontSize);
5904
- font-weight: var(--pf-v6-c-empty-state__title-text--FontWeight);
5905
- line-height: var(--pf-v6-c-empty-state__title-text--LineHeight);
5907
+ .pf-v6-c-expandable-section__toggle-icon {
5908
+ display: inline-block;
5909
+ min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
5910
+ color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
5911
+ transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
5912
+ transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
5906
5913
  }
5907
5914
 
5908
- .pf-v6-c-empty-state__body {
5909
- margin-block-start: var(--pf-v6-c-empty-state__body--MarginBlockStart);
5910
- font-size: var(--pf-v6-c-empty-state--body--FontSize);
5911
- color: var(--pf-v6-c-empty-state__body--Color);
5915
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
5916
+ scale: -1 1;
5912
5917
  }
5913
5918
 
5914
- .pf-v6-c-empty-state__footer {
5915
- display: flex;
5916
- flex-direction: column;
5917
- row-gap: var(--pf-v6-c-empty-state__footer--RowGap);
5918
- align-items: center;
5919
- margin-block-start: var(--pf-v6-c-empty-state__footer--MarginBlockStart);
5919
+ .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
5920
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
5920
5921
  }
5921
5922
 
5922
- .pf-v6-c-empty-state__actions {
5923
- display: flex;
5924
- flex-wrap: wrap;
5925
- gap: var(--pf-v6-c-empty-state__actions--RowGap) var(--pf-v6-c-empty-state__actions--ColumnGap);
5926
- justify-content: center;
5923
+ .pf-v6-c-expandable-section__content {
5924
+ max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
5925
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
5926
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
5927
5927
  }
5928
5928
 
5929
5929
  .pf-v6-c-file-upload {
@@ -14673,270 +14673,108 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14673
14673
  position: absolute;
14674
14674
  inset-block-start: 0;
14675
14675
  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
14676
- z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
14677
- }
14678
-
14679
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
14680
- transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
14681
- }
14682
-
14683
- .pf-v6-c-slider__value .pf-v6-c-form-control {
14684
- width: var(--pf-v6-c-slider__value--c-form-control--Width);
14685
- }
14686
-
14687
- .pf-v6-c-slider__actions {
14688
- display: flex;
14689
- margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
14690
- }
14691
-
14692
- .pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
14693
- --pf-v6-c-slider__actions--MarginInlineEnd: 0;
14694
- margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
14695
- }
14696
-
14697
- .pf-v6-c-spinner {
14698
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
14699
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
14700
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
14701
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
14702
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
14703
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
14704
- --pf-v6-c-spinner--StrokeWidth: 10;
14705
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
14706
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
14707
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
14708
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
14709
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
14710
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
14711
- --pf-v6-c-spinner--m-inline--diameter: 1em;
14712
- }
14713
-
14714
- .pf-v6-c-spinner {
14715
- width: var(--pf-v6-c-spinner--Width);
14716
- height: var(--pf-v6-c-spinner--Height);
14717
- overflow: hidden;
14718
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
14719
- }
14720
-
14721
- .pf-v6-c-spinner.pf-m-inline {
14722
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
14723
- }
14724
-
14725
- .pf-v6-c-spinner.pf-m-sm {
14726
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
14727
- }
14728
-
14729
- .pf-v6-c-spinner.pf-m-md {
14730
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
14731
- }
14732
-
14733
- .pf-v6-c-spinner.pf-m-lg {
14734
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
14735
- }
14736
-
14737
- .pf-v6-c-spinner.pf-m-xl {
14738
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
14739
- }
14740
-
14741
- .pf-v6-c-spinner__path {
14742
- width: 100%;
14743
- height: 100%;
14744
- stroke: var(--pf-v6-c-spinner--Color);
14745
- stroke-dasharray: 283;
14746
- stroke-dashoffset: 280;
14747
- stroke-linecap: round;
14748
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
14749
- transform-origin: 50% 50%;
14750
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
14751
- }
14752
-
14753
- @keyframes pf-v6-c-spinner-animation-rotate {
14754
- 0% {
14755
- transform: rotate(0deg);
14756
- }
14757
- 100% {
14758
- transform: rotate(360deg);
14759
- }
14760
- }
14761
- @keyframes pf-v6-c-spinner-animation-dash {
14762
- 0% {
14763
- stroke-dashoffset: 280;
14764
- transform: rotate(0);
14765
- }
14766
- 15% {
14767
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
14768
- }
14769
- 40% {
14770
- stroke-dasharray: 220;
14771
- stroke-dashoffset: 150;
14772
- }
14773
- 100% {
14774
- stroke-dashoffset: 280;
14775
- transform: rotate(720deg);
14776
- }
14777
- }
14778
- .pf-v6-c-switch {
14779
- --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
14780
- --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
14781
- --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
14782
- --pf-v6-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
14783
- --pf-v6-c-switch__toggle-icon--InsetInlineStart: calc(var(--pf-v6-c-switch--FontSize) * .4);
14784
- --pf-v6-c-switch__toggle-icon--Offset: 0.125rem;
14785
- --pf-v6-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
14786
- --pf-v6-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
14787
- --pf-v6-c-switch--Height: auto;
14788
- --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
14789
- --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
14790
- --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
14791
- --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
14792
- --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
14793
- --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
14794
- --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
14795
- --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
14796
- --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
14797
- --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
14798
- --pf-v6-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
14799
- --pf-v6-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
14800
- --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
14801
- --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
14802
- --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
14803
- --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
14804
- --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
14805
- --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
14806
- --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
14807
- --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
14808
- --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
14809
- --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
14810
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
14811
- --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
14812
- }
14813
-
14814
- .pf-v6-c-switch {
14815
- position: relative;
14816
- display: inline-grid;
14817
- grid-template-columns: auto;
14818
- grid-auto-columns: 1fr;
14819
- column-gap: var(--pf-v6-c-switch--ColumnGap);
14820
- height: var(--pf-v6-c-switch--Height);
14821
- font-size: var(--pf-v6-c-switch--FontSize);
14822
- line-height: var(--pf-v6-c-switch--LineHeight);
14823
- vertical-align: middle;
14824
- cursor: pointer;
14825
- }
14826
-
14827
- .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label,
14828
- .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__toggle {
14829
- grid-row: 1;
14830
- }
14831
-
14832
- .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label {
14833
- grid-column: 1;
14834
- }
14835
-
14836
- .pf-v6-c-switch__input {
14837
- position: absolute;
14838
- cursor: pointer;
14839
- opacity: 0;
14840
- }
14841
-
14842
- .pf-v6-c-switch__input:focus-visible ~ .pf-v6-c-switch__toggle {
14843
- outline: var(--pf-v6-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v6-c-switch__input--focus__toggle--OutlineColor);
14844
- outline-offset: var(--pf-v6-c-switch__input--focus__toggle--OutlineOffset);
14845
- }
14846
-
14847
- .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__label {
14848
- color: var(--pf-v6-c-switch__input--checked__label--Color);
14849
- }
14850
-
14851
- .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
14852
- --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
14853
- background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
14676
+ z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
14854
14677
  }
14855
14678
 
14856
- .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
14857
- transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
14858
- background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
14679
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
14680
+ transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
14859
14681
  }
14860
14682
 
14861
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
14862
- transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
14683
+ .pf-v6-c-slider__value .pf-v6-c-form-control {
14684
+ width: var(--pf-v6-c-slider__value--c-form-control--Width);
14863
14685
  }
14864
14686
 
14865
- .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
14866
- color: var(--pf-v6-c-switch__input--not-checked__label--Color);
14687
+ .pf-v6-c-slider__actions {
14688
+ display: flex;
14689
+ margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
14867
14690
  }
14868
14691
 
14869
- .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__toggle .pf-v6-c-switch__toggle-icon {
14870
- display: none;
14692
+ .pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
14693
+ --pf-v6-c-slider__actions--MarginInlineEnd: 0;
14694
+ margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
14871
14695
  }
14872
14696
 
14873
- .pf-v6-c-switch__input:disabled {
14874
- cursor: not-allowed;
14697
+ .pf-v6-c-spinner {
14698
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
14699
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
14700
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
14701
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
14702
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
14703
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
14704
+ --pf-v6-c-spinner--StrokeWidth: 10;
14705
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
14706
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
14707
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
14708
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
14709
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
14710
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
14711
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
14875
14712
  }
14876
14713
 
14877
- .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__label {
14878
- color: var(--pf-v6-c-switch__input--disabled__label--Color);
14879
- cursor: not-allowed;
14714
+ .pf-v6-c-spinner {
14715
+ width: var(--pf-v6-c-spinner--Width);
14716
+ height: var(--pf-v6-c-spinner--Height);
14717
+ overflow: hidden;
14718
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
14880
14719
  }
14881
14720
 
14882
- .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
14883
- --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
14884
- cursor: not-allowed;
14885
- background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
14721
+ .pf-v6-c-spinner.pf-m-inline {
14722
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
14886
14723
  }
14887
14724
 
14888
- .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle::before {
14889
- background-color: var(--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor);
14725
+ .pf-v6-c-spinner.pf-m-sm {
14726
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
14890
14727
  }
14891
14728
 
14892
- .pf-v6-c-switch__toggle {
14893
- position: relative;
14894
- display: inline-block;
14895
- width: var(--pf-v6-c-switch__toggle--Width);
14896
- height: var(--pf-v6-c-switch__toggle--Height);
14897
- background-color: var(--pf-v6-c-switch__toggle--BackgroundColor);
14898
- border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
14729
+ .pf-v6-c-spinner.pf-m-md {
14730
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
14899
14731
  }
14900
14732
 
14901
- .pf-v6-c-switch__toggle::before {
14902
- position: absolute;
14903
- inset-block-start: 50%;
14904
- inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart);
14905
- display: block;
14906
- width: var(--pf-v6-c-switch__toggle--before--Width);
14907
- height: var(--pf-v6-c-switch__toggle--before--Height);
14908
- content: "";
14909
- background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
14910
- border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
14911
- transition: var(--pf-v6-c-switch__toggle--before--Transition);
14912
- transform: translateY(-50%);
14733
+ .pf-v6-c-spinner.pf-m-lg {
14734
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
14913
14735
  }
14914
14736
 
14915
- .pf-v6-c-switch__toggle::after {
14916
- position: absolute;
14917
- inset: 0;
14918
- content: "";
14919
- border: var(--pf-v6-c-switch__toggle--BorderWidth) solid var(--pf-v6-c-switch__toggle--BorderColor);
14920
- border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
14737
+ .pf-v6-c-spinner.pf-m-xl {
14738
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
14921
14739
  }
14922
14740
 
14923
- .pf-v6-c-switch__toggle-icon {
14924
- position: absolute;
14925
- inset-block-start: 0;
14926
- inset-block-end: 0;
14927
- inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart);
14928
- display: flex;
14929
- align-items: center;
14930
- font-size: var(--pf-v6-c-switch__toggle-icon--FontSize);
14931
- color: var(--pf-v6-c-switch__toggle-icon--Color);
14741
+ .pf-v6-c-spinner__path {
14742
+ width: 100%;
14743
+ height: 100%;
14744
+ stroke: var(--pf-v6-c-spinner--Color);
14745
+ stroke-dasharray: 283;
14746
+ stroke-dashoffset: 280;
14747
+ stroke-linecap: round;
14748
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
14749
+ transform-origin: 50% 50%;
14750
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
14932
14751
  }
14933
14752
 
14934
- .pf-v6-c-switch__label {
14935
- display: inline-block;
14936
- grid-column: 2;
14937
- vertical-align: top;
14753
+ @keyframes pf-v6-c-spinner-animation-rotate {
14754
+ 0% {
14755
+ transform: rotate(0deg);
14756
+ }
14757
+ 100% {
14758
+ transform: rotate(360deg);
14759
+ }
14760
+ }
14761
+ @keyframes pf-v6-c-spinner-animation-dash {
14762
+ 0% {
14763
+ stroke-dashoffset: 280;
14764
+ transform: rotate(0);
14765
+ }
14766
+ 15% {
14767
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
14768
+ }
14769
+ 40% {
14770
+ stroke-dasharray: 220;
14771
+ stroke-dashoffset: 150;
14772
+ }
14773
+ 100% {
14774
+ stroke-dashoffset: 280;
14775
+ transform: rotate(720deg);
14776
+ }
14938
14777
  }
14939
-
14940
14778
  .pf-v6-c-tabs {
14941
14779
  --pf-v6-c-tabs--inset: 0;
14942
14780
  --pf-v6-c-tabs--Width: auto;
@@ -15813,51 +15651,213 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15813
15651
  --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15814
15652
  }
15815
15653
  }
15816
- .pf-v6-c-tab-content {
15817
- --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
15818
- --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
15819
- --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
15820
- --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
15821
- --pf-v6-c-tab-content--BackgroundColor: transparent;
15822
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
15823
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15824
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15825
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
15826
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
15827
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
15828
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
15829
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15830
- --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15654
+ .pf-v6-c-tab-content {
15655
+ --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
15656
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
15657
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
15658
+ --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
15659
+ --pf-v6-c-tab-content--BackgroundColor: transparent;
15660
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
15661
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15662
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15663
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
15664
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
15665
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
15666
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
15667
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15668
+ --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15669
+ }
15670
+
15671
+ .pf-v6-c-tab-content {
15672
+ background-color: var(--pf-v6-c-tab-content--BackgroundColor);
15673
+ }
15674
+
15675
+ @media screen and (min-width: 75rem) {
15676
+ .pf-v6-c-tab-content {
15677
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
15678
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
15679
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
15680
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
15681
+ }
15682
+ }
15683
+ .pf-v6-c-tab-content.pf-m-secondary {
15684
+ --pf-v6-c-tab-content--BackgroundColor: var(--pf-v6-c-tab-content--m-secondary--BackgroundColor);
15685
+ }
15686
+
15687
+ .pf-v6-c-tab-content__body {
15688
+ padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
15689
+ padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
15690
+ padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
15691
+ padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
15692
+ }
15693
+
15694
+ .pf-v6-c-tab-content__body.pf-m-padding {
15695
+ --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
15696
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
15697
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
15698
+ --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
15699
+ }
15700
+
15701
+ .pf-v6-c-switch {
15702
+ --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
15703
+ --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
15704
+ --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
15705
+ --pf-v6-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
15706
+ --pf-v6-c-switch__toggle-icon--InsetInlineStart: calc(var(--pf-v6-c-switch--FontSize) * .4);
15707
+ --pf-v6-c-switch__toggle-icon--Offset: 0.125rem;
15708
+ --pf-v6-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
15709
+ --pf-v6-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
15710
+ --pf-v6-c-switch--Height: auto;
15711
+ --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
15712
+ --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
15713
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
15714
+ --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
15715
+ --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
15716
+ --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
15717
+ --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15718
+ --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
15719
+ --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
15720
+ --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
15721
+ --pf-v6-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
15722
+ --pf-v6-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
15723
+ --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
15724
+ --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
15725
+ --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
15726
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
15727
+ --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
15728
+ --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
15729
+ --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
15730
+ --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
15731
+ --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
15732
+ --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
15733
+ --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
15734
+ --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
15735
+ }
15736
+
15737
+ .pf-v6-c-switch {
15738
+ position: relative;
15739
+ display: inline-grid;
15740
+ grid-template-columns: auto;
15741
+ grid-auto-columns: 1fr;
15742
+ column-gap: var(--pf-v6-c-switch--ColumnGap);
15743
+ height: var(--pf-v6-c-switch--Height);
15744
+ font-size: var(--pf-v6-c-switch--FontSize);
15745
+ line-height: var(--pf-v6-c-switch--LineHeight);
15746
+ vertical-align: middle;
15747
+ cursor: pointer;
15748
+ }
15749
+
15750
+ .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label,
15751
+ .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__toggle {
15752
+ grid-row: 1;
15753
+ }
15754
+
15755
+ .pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label {
15756
+ grid-column: 1;
15757
+ }
15758
+
15759
+ .pf-v6-c-switch__input {
15760
+ position: absolute;
15761
+ cursor: pointer;
15762
+ opacity: 0;
15763
+ }
15764
+
15765
+ .pf-v6-c-switch__input:focus-visible ~ .pf-v6-c-switch__toggle {
15766
+ outline: var(--pf-v6-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v6-c-switch__input--focus__toggle--OutlineColor);
15767
+ outline-offset: var(--pf-v6-c-switch__input--focus__toggle--OutlineOffset);
15768
+ }
15769
+
15770
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__label {
15771
+ color: var(--pf-v6-c-switch__input--checked__label--Color);
15772
+ }
15773
+
15774
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
15775
+ --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
15776
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
15777
+ }
15778
+
15779
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15780
+ transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
15781
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
15831
15782
  }
15832
15783
 
15833
- .pf-v6-c-tab-content {
15834
- background-color: var(--pf-v6-c-tab-content--BackgroundColor);
15784
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15785
+ transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
15835
15786
  }
15836
15787
 
15837
- @media screen and (min-width: 75rem) {
15838
- .pf-v6-c-tab-content {
15839
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
15840
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
15841
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
15842
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
15843
- }
15788
+ .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
15789
+ color: var(--pf-v6-c-switch__input--not-checked__label--Color);
15844
15790
  }
15845
- .pf-v6-c-tab-content.pf-m-secondary {
15846
- --pf-v6-c-tab-content--BackgroundColor: var(--pf-v6-c-tab-content--m-secondary--BackgroundColor);
15791
+
15792
+ .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__toggle .pf-v6-c-switch__toggle-icon {
15793
+ display: none;
15847
15794
  }
15848
15795
 
15849
- .pf-v6-c-tab-content__body {
15850
- padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
15851
- padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
15852
- padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
15853
- padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
15796
+ .pf-v6-c-switch__input:disabled {
15797
+ cursor: not-allowed;
15854
15798
  }
15855
15799
 
15856
- .pf-v6-c-tab-content__body.pf-m-padding {
15857
- --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
15858
- --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
15859
- --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
15860
- --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
15800
+ .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__label {
15801
+ color: var(--pf-v6-c-switch__input--disabled__label--Color);
15802
+ cursor: not-allowed;
15803
+ }
15804
+
15805
+ .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
15806
+ --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
15807
+ cursor: not-allowed;
15808
+ background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
15809
+ }
15810
+
15811
+ .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle::before {
15812
+ background-color: var(--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor);
15813
+ }
15814
+
15815
+ .pf-v6-c-switch__toggle {
15816
+ position: relative;
15817
+ display: inline-block;
15818
+ width: var(--pf-v6-c-switch__toggle--Width);
15819
+ height: var(--pf-v6-c-switch__toggle--Height);
15820
+ background-color: var(--pf-v6-c-switch__toggle--BackgroundColor);
15821
+ border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
15822
+ }
15823
+
15824
+ .pf-v6-c-switch__toggle::before {
15825
+ position: absolute;
15826
+ inset-block-start: 50%;
15827
+ inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart);
15828
+ display: block;
15829
+ width: var(--pf-v6-c-switch__toggle--before--Width);
15830
+ height: var(--pf-v6-c-switch__toggle--before--Height);
15831
+ content: "";
15832
+ background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
15833
+ border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
15834
+ transition: var(--pf-v6-c-switch__toggle--before--Transition);
15835
+ transform: translateY(-50%);
15836
+ }
15837
+
15838
+ .pf-v6-c-switch__toggle::after {
15839
+ position: absolute;
15840
+ inset: 0;
15841
+ content: "";
15842
+ border: var(--pf-v6-c-switch__toggle--BorderWidth) solid var(--pf-v6-c-switch__toggle--BorderColor);
15843
+ border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
15844
+ }
15845
+
15846
+ .pf-v6-c-switch__toggle-icon {
15847
+ position: absolute;
15848
+ inset-block-start: 0;
15849
+ inset-block-end: 0;
15850
+ inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart);
15851
+ display: flex;
15852
+ align-items: center;
15853
+ font-size: var(--pf-v6-c-switch__toggle-icon--FontSize);
15854
+ color: var(--pf-v6-c-switch__toggle-icon--Color);
15855
+ }
15856
+
15857
+ .pf-v6-c-switch__label {
15858
+ display: inline-block;
15859
+ grid-column: 2;
15860
+ vertical-align: top;
15861
15861
  }
15862
15862
 
15863
15863
  .pf-v6-c-timestamp {
@@ -19595,78 +19595,6 @@ label.pf-v6-c-tree-view__node-text {
19595
19595
  margin: 0;
19596
19596
  }
19597
19597
 
19598
- .pf-v6-l-gallery {
19599
- --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
19600
- --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
19601
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
19602
- --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
19603
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
19604
- --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
19605
- --pf-v6-l-gallery--GridTemplateRows: auto;
19606
- }
19607
-
19608
- .pf-v6-l-gallery {
19609
- display: grid;
19610
- grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
19611
- grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
19612
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
19613
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
19614
- }
19615
-
19616
- .pf-v6-l-gallery.pf-m-gutter {
19617
- grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
19618
- }
19619
-
19620
- @media (min-width: 36rem) {
19621
- .pf-v6-l-gallery {
19622
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
19623
- }
19624
- }
19625
- @media (min-width: 48rem) {
19626
- .pf-v6-l-gallery {
19627
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
19628
- }
19629
- }
19630
- @media (min-width: 62rem) {
19631
- .pf-v6-l-gallery {
19632
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
19633
- }
19634
- }
19635
- @media (min-width: 75rem) {
19636
- .pf-v6-l-gallery {
19637
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
19638
- }
19639
- }
19640
- @media (min-width: 90.625rem) {
19641
- .pf-v6-l-gallery {
19642
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
19643
- }
19644
- }
19645
- @media (min-width: 36rem) {
19646
- .pf-v6-l-gallery {
19647
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
19648
- }
19649
- }
19650
- @media (min-width: 48rem) {
19651
- .pf-v6-l-gallery {
19652
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
19653
- }
19654
- }
19655
- @media (min-width: 62rem) {
19656
- .pf-v6-l-gallery {
19657
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
19658
- }
19659
- }
19660
- @media (min-width: 75rem) {
19661
- .pf-v6-l-gallery {
19662
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
19663
- }
19664
- }
19665
- @media (min-width: 90.625rem) {
19666
- .pf-v6-l-gallery {
19667
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
19668
- }
19669
- }
19670
19598
  .pf-v6-l-flex {
19671
19599
  --pf-v6-l-flex--Display: flex;
19672
19600
  --pf-v6-l-flex--FlexWrap: wrap;
@@ -22163,6 +22091,78 @@ label.pf-v6-c-tree-view__node-text {
22163
22091
  --pf-v6-l-flex--spacer--column: 0;
22164
22092
  }
22165
22093
  }
22094
+ .pf-v6-l-gallery {
22095
+ --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
22096
+ --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
22097
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
22098
+ --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
22099
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
22100
+ --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
22101
+ --pf-v6-l-gallery--GridTemplateRows: auto;
22102
+ }
22103
+
22104
+ .pf-v6-l-gallery {
22105
+ display: grid;
22106
+ grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
22107
+ grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
22108
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
22109
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
22110
+ }
22111
+
22112
+ .pf-v6-l-gallery.pf-m-gutter {
22113
+ grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
22114
+ }
22115
+
22116
+ @media (min-width: 36rem) {
22117
+ .pf-v6-l-gallery {
22118
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
22119
+ }
22120
+ }
22121
+ @media (min-width: 48rem) {
22122
+ .pf-v6-l-gallery {
22123
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
22124
+ }
22125
+ }
22126
+ @media (min-width: 62rem) {
22127
+ .pf-v6-l-gallery {
22128
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
22129
+ }
22130
+ }
22131
+ @media (min-width: 75rem) {
22132
+ .pf-v6-l-gallery {
22133
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
22134
+ }
22135
+ }
22136
+ @media (min-width: 90.625rem) {
22137
+ .pf-v6-l-gallery {
22138
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
22139
+ }
22140
+ }
22141
+ @media (min-width: 36rem) {
22142
+ .pf-v6-l-gallery {
22143
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
22144
+ }
22145
+ }
22146
+ @media (min-width: 48rem) {
22147
+ .pf-v6-l-gallery {
22148
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
22149
+ }
22150
+ }
22151
+ @media (min-width: 62rem) {
22152
+ .pf-v6-l-gallery {
22153
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
22154
+ }
22155
+ }
22156
+ @media (min-width: 75rem) {
22157
+ .pf-v6-l-gallery {
22158
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
22159
+ }
22160
+ }
22161
+ @media (min-width: 90.625rem) {
22162
+ .pf-v6-l-gallery {
22163
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
22164
+ }
22165
+ }
22166
22166
  .pf-v6-c-about-modal-box {
22167
22167
  --pf-v6-c-about-modal-box--BackgroundImage: none;
22168
22168
  --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);