@patternfly/react-templates 6.1.1-prerelease.2 → 6.2.0-prerelease.10

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 (35) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/esm/components/Select/CheckboxSelect.d.ts +2 -1
  6. package/dist/esm/components/Select/CheckboxSelect.d.ts.map +1 -1
  7. package/dist/esm/components/Select/CheckboxSelect.js +3 -1
  8. package/dist/esm/components/Select/CheckboxSelect.js.map +1 -1
  9. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts +2 -1
  10. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  11. package/dist/esm/components/Select/MultiTypeaheadSelect.js +5 -1
  12. package/dist/esm/components/Select/MultiTypeaheadSelect.js.map +1 -1
  13. package/dist/esm/components/Select/TypeaheadSelect.d.ts +2 -1
  14. package/dist/esm/components/Select/TypeaheadSelect.d.ts.map +1 -1
  15. package/dist/esm/components/Select/TypeaheadSelect.js +4 -1
  16. package/dist/esm/components/Select/TypeaheadSelect.js.map +1 -1
  17. package/dist/js/components/Select/CheckboxSelect.d.ts +2 -1
  18. package/dist/js/components/Select/CheckboxSelect.d.ts.map +1 -1
  19. package/dist/js/components/Select/CheckboxSelect.js +8 -6
  20. package/dist/js/components/Select/CheckboxSelect.js.map +1 -1
  21. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts +2 -1
  22. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  23. package/dist/js/components/Select/MultiTypeaheadSelect.js +15 -11
  24. package/dist/js/components/Select/MultiTypeaheadSelect.js.map +1 -1
  25. package/dist/js/components/Select/TypeaheadSelect.d.ts +2 -1
  26. package/dist/js/components/Select/TypeaheadSelect.d.ts.map +1 -1
  27. package/dist/js/components/Select/TypeaheadSelect.js +12 -9
  28. package/dist/js/components/Select/TypeaheadSelect.js.map +1 -1
  29. package/dist/umd/assets/output-BdZsLlTf.css +3465 -0
  30. package/dist/umd/react-templates.min.js +1 -1
  31. package/package.json +6 -6
  32. package/src/components/Select/CheckboxSelect.tsx +3 -5
  33. package/src/components/Select/MultiTypeaheadSelect.tsx +9 -10
  34. package/src/components/Select/TypeaheadSelect.tsx +8 -8
  35. package/dist/umd/assets/output-CWf9U_Ld.css +0 -23400
package/dist/umd/assets/output-BdZsLlTf.css ADDED
@@ -0,0 +1,3465 @@
1
+ .pf-v6-c-popover[data-popper-reference-hidden=true] {
2
+ visibility: hidden;
3
+ pointer-events: none;
4
+ }
5
+
6
+ .pf-v6-c-label-group {
7
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-label-group--MaxWidth: 100%;
10
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
11
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
15
+ --pf-v6-c-label-group__main--MinWidth: 0;
16
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
17
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
18
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
19
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
21
+ --pf-v6-c-label-group__list--MinWidth: 0;
22
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
23
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
25
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
27
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
29
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
30
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
31
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
32
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
34
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
35
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
38
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
40
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
41
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
42
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
43
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
44
+ }
45
+
46
+ .pf-v6-c-label-group {
47
+ display: inline-flex;
48
+ row-gap: var(--pf-v6-c-label-group--RowGap);
49
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
50
+ align-items: center;
51
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
52
+ }
53
+
54
+ .pf-v6-c-label-group.pf-m-category {
55
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
56
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
57
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
58
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
59
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
60
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
61
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
62
+ }
63
+
64
+ .pf-v6-c-label-group.pf-m-vertical {
65
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
66
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
67
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
68
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
69
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
70
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
71
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
72
+ }
73
+
74
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
+ align-items: flex-start;
76
+ }
77
+
78
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
79
+ flex-direction: column;
80
+ align-items: flex-start;
81
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
82
+ }
83
+
84
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
85
+ flex-direction: column;
86
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
87
+ }
88
+
89
+ .pf-v6-c-label-group.pf-m-editable,
90
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
91
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
92
+ display: flex;
93
+ }
94
+
95
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
96
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
97
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
98
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
99
+ flex: 1;
100
+ }
101
+
102
+ .pf-v6-c-label-group__main {
103
+ display: flex;
104
+ flex: 1;
105
+ flex-wrap: wrap;
106
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
107
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
108
+ align-items: baseline;
109
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
110
+ }
111
+
112
+ .pf-v6-c-label-group__list {
113
+ display: inline-flex;
114
+ flex-wrap: wrap;
115
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
116
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
117
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
118
+ }
119
+
120
+ .pf-v6-c-label-group__list-item {
121
+ display: inline-flex;
122
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
123
+ }
124
+
125
+ .pf-v6-c-label-group__label {
126
+ overflow: hidden;
127
+ text-overflow: ellipsis;
128
+ white-space: nowrap;
129
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
130
+ }
131
+
132
+ .pf-v6-c-label-group__close {
133
+ display: flex;
134
+ align-self: flex-start;
135
+ }
136
+
137
+ .pf-v6-c-label-group__close .pf-v6-c-button {
138
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
139
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
140
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
141
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
142
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
143
+ }
144
+
145
+ .pf-v6-c-label-group__textarea {
146
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
147
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
148
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
149
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
150
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
151
+ white-space: nowrap;
152
+ resize: none;
153
+ border: 0;
154
+ -ms-overflow-style: none;
155
+ scrollbar-width: none;
156
+ }
157
+
158
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
+ display: none;
160
+ }
161
+
162
+ .pf-v6-c-label {
163
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
164
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
165
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
166
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
167
+ --pf-v6-c-label--MaxWidth: 100%;
168
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
169
+ --pf-v6-c-label--BorderWidth: 0;
170
+ --pf-v6-c-label--BorderColor: transparent;
171
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
172
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
173
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
174
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
175
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
176
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
177
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
178
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
179
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
180
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
181
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
182
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
183
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
184
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
185
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
186
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
187
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
188
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
189
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
190
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
191
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
192
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
193
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
194
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
195
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
196
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
197
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
198
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
199
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
200
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
201
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
202
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
203
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
204
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
205
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
206
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
207
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
208
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
209
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
210
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
211
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
212
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
213
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
214
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
215
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
216
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
217
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
218
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
219
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
220
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
221
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
222
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
223
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
224
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
225
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
226
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
227
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
228
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
229
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
230
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
231
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
232
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
233
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
234
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
235
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
236
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
237
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
238
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
239
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
240
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
241
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
242
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
243
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
244
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
245
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
246
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
247
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
248
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
249
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
250
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
251
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
252
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
253
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
254
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
255
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
256
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
257
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
258
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
259
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
260
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
261
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
262
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
263
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
264
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
265
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
266
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
267
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
268
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
269
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
270
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
271
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
272
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
273
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
274
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
275
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
276
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
277
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
278
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
279
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
280
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
281
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
282
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
283
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
284
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
285
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
286
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
287
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
288
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
289
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
290
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
291
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
292
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
293
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
294
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
295
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
296
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
297
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
298
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
299
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
300
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
301
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
302
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
303
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
304
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
305
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
306
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
307
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
308
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
309
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
310
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
311
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
312
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
313
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
314
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
315
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
316
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
317
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
318
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
319
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
320
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
321
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
322
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
323
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
324
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
325
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
326
+ --pf-v6-c-label__content--MaxWidth: 100%;
327
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
328
+ --pf-v6-c-label__content--Cursor: initial;
329
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
330
+ --pf-v6-c-label__text--MaxWidth: 100%;
331
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
332
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
333
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
334
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
335
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
336
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
337
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
338
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
339
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
340
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
341
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
342
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
343
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
344
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
345
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
346
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
347
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
348
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
349
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
350
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
351
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
352
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
353
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
354
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
355
+ }
356
+
357
+ .pf-v6-c-label {
358
+ position: relative;
359
+ min-width: var(--pf-v6-c-label--MinWidth);
360
+ max-width: var(--pf-v6-c-label--MaxWidth);
361
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
362
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
363
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
364
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
365
+ font-size: var(--pf-v6-c-label--FontSize);
366
+ white-space: nowrap;
367
+ background: transparent;
368
+ isolation: isolate;
369
+ border: 0;
370
+ border-radius: var(--pf-v6-c-label--BorderRadius);
371
+ }
372
+
373
+ .pf-v6-c-label.pf-m-blue {
374
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
375
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
376
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
377
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
378
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
379
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
380
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
381
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
382
+ }
383
+
384
+ .pf-v6-c-label.pf-m-red {
385
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
386
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
387
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
388
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
389
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
390
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
391
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
392
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
393
+ }
394
+
395
+ .pf-v6-c-label.pf-m-orange {
396
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
397
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
398
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
399
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
400
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
401
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
402
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
403
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
404
+ }
405
+
406
+ .pf-v6-c-label.pf-m-orangered {
407
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
408
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
409
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
410
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
411
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
412
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
413
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
414
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
415
+ }
416
+
417
+ .pf-v6-c-label.pf-m-yellow {
418
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
419
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
420
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
421
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
422
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
423
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
424
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
425
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
426
+ }
427
+
428
+ .pf-v6-c-label.pf-m-green {
429
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
430
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
431
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
432
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
433
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
434
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
435
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
436
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
437
+ }
438
+
439
+ .pf-v6-c-label.pf-m-teal {
440
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
441
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
442
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
443
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
444
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
445
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
446
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
447
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
448
+ }
449
+
450
+ .pf-v6-c-label.pf-m-purple {
451
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
452
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
453
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
454
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
455
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
456
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
457
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
458
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
459
+ }
460
+
461
+ .pf-v6-c-label.pf-m-success {
462
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
463
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
464
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
465
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
466
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
467
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
468
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
469
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
470
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
471
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
472
+ }
473
+
474
+ .pf-v6-c-label.pf-m-warning {
475
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
476
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
477
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
478
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
479
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
480
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
481
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
482
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
483
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
484
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
485
+ }
486
+
487
+ .pf-v6-c-label.pf-m-danger {
488
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
489
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
490
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
491
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
492
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
493
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
494
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
495
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
496
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
497
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
498
+ }
499
+
500
+ .pf-v6-c-label.pf-m-info {
501
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
502
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
503
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
504
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
505
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
506
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
507
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
508
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
509
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
510
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
511
+ }
512
+
513
+ .pf-v6-c-label.pf-m-custom {
514
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
515
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
516
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
517
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
518
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
519
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
520
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
521
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
522
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
523
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
524
+ }
525
+
526
+ .pf-v6-c-label.pf-m-compact {
527
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
528
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
529
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
530
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
531
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
532
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
533
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
534
+ }
535
+
536
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
537
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
538
+ }
539
+
540
+ .pf-v6-c-label.pf-m-outline {
541
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
542
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
543
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
544
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
545
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
546
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
547
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
548
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
549
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
550
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
551
+ }
552
+
553
+ .pf-v6-c-label.pf-m-editable {
554
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
555
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
556
+ }
557
+
558
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
559
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
560
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
561
+ }
562
+
563
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
564
+ text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
565
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
566
+ }
567
+
568
+ .pf-v6-c-label.pf-m-editable-active {
569
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
570
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
571
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
572
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
573
+ }
574
+
575
+ .pf-v6-c-label.pf-m-overflow {
576
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
577
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
578
+ }
579
+
580
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
581
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
582
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
583
+ }
584
+
585
+ .pf-v6-c-label.pf-m-add {
586
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
587
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
588
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
589
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
590
+ }
591
+
592
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
593
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
594
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
595
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
596
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
597
+ }
598
+
599
+ .pf-v6-c-label.pf-m-clickable {
600
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
601
+ }
602
+
603
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
604
+ text-decoration: none;
605
+ }
606
+
607
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
608
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
609
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
610
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
611
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
612
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
613
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
614
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
615
+ }
616
+
617
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
618
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
619
+ }
620
+
621
+ .pf-v6-c-label.pf-m-disabled {
622
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
623
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
624
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
625
+ --pf-v6-c-label--BorderWidth: 0;
626
+ pointer-events: none;
627
+ }
628
+
629
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
630
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
631
+ }
632
+
633
+ .pf-v6-c-label,
634
+ .pf-v6-c-label__content {
635
+ display: inline-flex;
636
+ align-items: center;
637
+ justify-content: center;
638
+ }
639
+
640
+ .pf-v6-c-label__text {
641
+ overflow: hidden;
642
+ text-overflow: ellipsis;
643
+ white-space: nowrap;
644
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
645
+ }
646
+
647
+ .pf-v6-c-label__content {
648
+ gap: var(--pf-v6-c-label__content--Gap);
649
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
650
+ padding: 0;
651
+ overflow: hidden;
652
+ color: var(--pf-v6-c-label--Color);
653
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
654
+ background: transparent;
655
+ border-width: 0;
656
+ }
657
+
658
+ .pf-v6-c-label__content::before {
659
+ position: absolute;
660
+ inset: 0;
661
+ z-index: -1;
662
+ pointer-events: none;
663
+ content: "";
664
+ background-color: var(--pf-v6-c-label--BackgroundColor);
665
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
666
+ border-radius: var(--pf-v6-c-label--BorderRadius);
667
+ }
668
+
669
+ input.pf-v6-c-label__content {
670
+ overflow: hidden;
671
+ text-overflow: ellipsis;
672
+ white-space: nowrap;
673
+ }
674
+
675
+ .pf-v6-c-label__icon {
676
+ color: var(--pf-v6-c-label__icon--Color);
677
+ }
678
+
679
+ .pf-v6-c-label__actions {
680
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
681
+ }
682
+
683
+ .pf-v6-c-label__actions .pf-v6-c-button {
684
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
685
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
686
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
687
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
688
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
689
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
690
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
691
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
692
+ }
693
+
694
+ .pf-v6-c-check {
695
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
696
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
697
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
698
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
699
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
700
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
701
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
702
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
703
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
704
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
705
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
706
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
707
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
708
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
709
+ }
710
+
711
+ .pf-v6-c-check {
712
+ display: grid;
713
+ grid-template-columns: auto 1fr;
714
+ grid-gap: var(--pf-v6-c-check--GridGap);
715
+ accent-color: var(--pf-v6-c-check--AccentColor);
716
+ }
717
+
718
+ .pf-v6-c-check.pf-m-standalone {
719
+ display: inline-grid;
720
+ grid-template-columns: auto;
721
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
722
+ }
723
+
724
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
725
+ align-self: center;
726
+ transform: none;
727
+ }
728
+
729
+ .pf-v6-c-check__input {
730
+ align-self: start;
731
+ font-size: var(--pf-v6-c-check__label--FontSize);
732
+ line-height: var(--pf-v6-c-check__label--LineHeight);
733
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
734
+ }
735
+
736
+ .pf-v6-c-check__label {
737
+ font-size: var(--pf-v6-c-check__label--FontSize);
738
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
739
+ line-height: var(--pf-v6-c-check__label--LineHeight);
740
+ color: var(--pf-v6-c-check__label--Color);
741
+ }
742
+
743
+ .pf-v6-c-check__description {
744
+ grid-column: 2;
745
+ font-size: var(--pf-v6-c-check__description--FontSize);
746
+ color: var(--pf-v6-c-check__description--Color);
747
+ }
748
+
749
+ .pf-v6-c-check__body {
750
+ grid-column: 2;
751
+ }
752
+
753
+ .pf-v6-c-check__label,
754
+ .pf-v6-c-check__input {
755
+ justify-self: start;
756
+ }
757
+
758
+ label.pf-v6-c-check, .pf-v6-c-check__label,
759
+ .pf-v6-c-check__input {
760
+ cursor: pointer;
761
+ }
762
+
763
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
764
+ .pf-v6-c-check__input:disabled,
765
+ .pf-v6-c-check__input.pf-m-disabled {
766
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
767
+ cursor: not-allowed;
768
+ }
769
+
770
+ .pf-v6-c-check__label-required {
771
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
772
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
773
+ color: var(--pf-v6-c-check__label-required--Color);
774
+ }
775
+
776
+ .pf-v6-c-text-input-group {
777
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
778
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
779
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
780
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
781
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
782
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
783
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
784
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
785
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
786
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
787
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
788
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
789
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
790
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
791
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
792
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
793
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
794
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
795
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
796
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
797
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
798
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
799
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
800
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
801
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
802
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
803
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
804
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
805
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
806
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
807
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
808
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
809
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
810
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
811
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
812
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
813
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
814
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
815
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
816
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
817
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
818
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
819
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
820
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
821
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
822
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
823
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
824
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
825
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
826
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
827
+ }
828
+
829
+ .pf-v6-c-text-input-group {
830
+ position: relative;
831
+ display: flex;
832
+ width: 100%;
833
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
834
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
835
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
836
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
837
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
838
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
839
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
840
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
841
+ }
842
+
843
+ .pf-v6-c-text-input-group::before {
844
+ position: absolute;
845
+ inset: 0;
846
+ pointer-events: none;
847
+ content: "";
848
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
849
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
850
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
851
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
852
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
853
+ }
854
+
855
+ .pf-v6-c-text-input-group.pf-m-disabled {
856
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
857
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
858
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
859
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
860
+ pointer-events: none;
861
+ }
862
+
863
+ .pf-v6-c-text-input-group.pf-m-plain {
864
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
865
+ }
866
+
867
+ .pf-v6-c-text-input-group.pf-m-plain::before {
868
+ border: 0;
869
+ }
870
+
871
+ .pf-v6-c-text-input-group.pf-m-success {
872
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
873
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
874
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
875
+ }
876
+
877
+ .pf-v6-c-text-input-group.pf-m-warning {
878
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
879
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
880
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
881
+ }
882
+
883
+ .pf-v6-c-text-input-group.pf-m-error {
884
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
885
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
886
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
887
+ }
888
+
889
+ .pf-v6-c-text-input-group:hover {
890
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
891
+ }
892
+
893
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
894
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
895
+ }
896
+
897
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
898
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
899
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
900
+ }
901
+
902
+ .pf-v6-c-text-input-group__main {
903
+ display: flex;
904
+ flex: 1;
905
+ flex-wrap: wrap;
906
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
907
+ min-width: 0;
908
+ }
909
+
910
+ .pf-v6-c-text-input-group__main.pf-m-icon {
911
+ --pf-v6-c-text-input-group__text--Position: relative;
912
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
913
+ display: inline-flex;
914
+ align-items: center;
915
+ justify-content: center;
916
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
917
+ }
918
+
919
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
920
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
921
+ }
922
+
923
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
924
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
925
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
926
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
927
+ }
928
+
929
+ .pf-v6-c-text-input-group__text {
930
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
931
+ display: inline-grid;
932
+ flex: 1;
933
+ grid-template-areas: "text-input";
934
+ grid-template-columns: 1fr;
935
+ }
936
+
937
+ .pf-v6-c-text-input-group__icon {
938
+ position: absolute;
939
+ inset-block-start: 50%;
940
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
941
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
942
+ color: var(--pf-v6-c-text-input-group__icon--Color);
943
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
944
+ }
945
+
946
+ .pf-v6-c-text-input-group__icon.pf-m-status {
947
+ inset-inline-start: auto;
948
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
949
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
950
+ }
951
+
952
+ .pf-v6-c-text-input-group__text-input {
953
+ overflow: hidden;
954
+ text-overflow: ellipsis;
955
+ white-space: nowrap;
956
+ position: relative;
957
+ width: 100%;
958
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
959
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
960
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
961
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
962
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
963
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
964
+ border: 0;
965
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
966
+ }
967
+
968
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
969
+ grid-area: text-input;
970
+ }
971
+
972
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
973
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
974
+ }
975
+
976
+ .pf-v6-c-text-input-group__text-input::placeholder {
977
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
978
+ }
979
+
980
+ .pf-v6-c-text-input-group__utilities {
981
+ display: flex;
982
+ align-items: center;
983
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
984
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
985
+ }
986
+
987
+ .pf-v6-c-text-input-group__utilities > * + * {
988
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
989
+ }
990
+
991
+ .pf-v6-c-text-input-group__group {
992
+ display: flex;
993
+ }
994
+
995
+ .pf-v6-c-badge {
996
+ --pf-v6-c-badge--BorderColor: transparent;
997
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
998
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
999
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1000
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1001
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1002
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1003
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1004
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1005
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1006
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1007
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1008
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1009
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1010
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1011
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1012
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1013
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1014
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1015
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1016
+ }
1017
+
1018
+ .pf-v6-c-badge {
1019
+ position: relative;
1020
+ display: inline-block;
1021
+ min-width: var(--pf-v6-c-badge--MinWidth);
1022
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1023
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1024
+ font-size: var(--pf-v6-c-badge--FontSize);
1025
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1026
+ color: var(--pf-v6-c-badge--Color);
1027
+ text-align: center;
1028
+ white-space: nowrap;
1029
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1030
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1031
+ }
1032
+
1033
+ .pf-v6-c-badge::after {
1034
+ position: absolute;
1035
+ inset: 0;
1036
+ pointer-events: none;
1037
+ content: "";
1038
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1039
+ border-radius: inherit;
1040
+ }
1041
+
1042
+ .pf-v6-c-badge.pf-m-read {
1043
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1044
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1045
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1046
+ }
1047
+
1048
+ .pf-v6-c-badge.pf-m-unread {
1049
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1050
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1051
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1052
+ }
1053
+
1054
+ .pf-v6-c-badge.pf-m-disabled {
1055
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1056
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1057
+ }
1058
+
1059
+ .pf-v6-c-badge.pf-m-disabled::after {
1060
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1061
+ }
1062
+
1063
+ .pf-v6-c-badge__toggle-icon {
1064
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1065
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1066
+ }
1067
+
1068
+ .pf-v6-c-menu-toggle {
1069
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1070
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1071
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1072
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1073
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1074
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1075
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1076
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1077
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1078
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1079
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1080
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1081
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
1082
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1083
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1084
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1085
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1086
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1087
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1088
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
1089
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1090
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1091
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1092
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1093
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1094
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1095
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1096
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1097
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1098
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1099
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1100
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1101
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1102
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1103
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1104
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1105
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1106
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1107
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1108
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1109
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1110
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1111
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1112
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1113
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1114
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1115
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1116
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1117
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1118
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1119
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1120
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1121
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1122
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1123
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1124
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1125
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1126
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1127
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1128
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1129
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1130
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1131
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1132
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1133
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1134
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1135
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1136
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1137
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1138
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1139
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1140
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1141
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1142
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1143
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1144
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1145
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1146
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1147
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1148
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1149
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1150
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1151
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1152
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1153
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1154
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1155
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1156
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1157
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1158
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1159
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1160
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1161
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1162
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1163
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1164
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1165
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1166
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1167
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1168
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1169
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1170
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
1171
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1172
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1173
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1174
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1175
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1176
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1177
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1178
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1179
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1180
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1181
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1182
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1183
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1184
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1185
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1186
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1187
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1188
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1189
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1190
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1191
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1192
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1193
+ }
1194
+
1195
+ .pf-v6-c-menu-toggle {
1196
+ position: relative;
1197
+ display: inline-flex;
1198
+ gap: var(--pf-v6-c-menu-toggle--Gap);
1199
+ align-items: center;
1200
+ justify-content: center;
1201
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1202
+ max-width: 100%;
1203
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1204
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1205
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1206
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1207
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
1208
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1209
+ color: var(--pf-v6-c-menu-toggle--Color);
1210
+ cursor: pointer;
1211
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1212
+ border: 0;
1213
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1214
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1215
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1216
+ }
1217
+
1218
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1219
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1220
+ }
1221
+
1222
+ .pf-v6-c-menu-toggle::before {
1223
+ position: absolute;
1224
+ inset-block-start: 0;
1225
+ inset-block-end: 0;
1226
+ inset-inline-start: 0;
1227
+ inset-inline-end: 0;
1228
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1229
+ pointer-events: none;
1230
+ content: "";
1231
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1232
+ transition: inherit;
1233
+ }
1234
+
1235
+ .pf-v6-c-menu-toggle.pf-m-primary {
1236
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1237
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1238
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1239
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1240
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1241
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1242
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1243
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1244
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1245
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1246
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1247
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1248
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1249
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1250
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1251
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1252
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1253
+ }
1254
+
1255
+ .pf-v6-c-menu-toggle.pf-m-secondary {
1256
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1257
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1258
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1259
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1260
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1261
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1262
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1263
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1264
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1265
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1266
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1267
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1268
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1269
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1270
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1271
+ }
1272
+
1273
+ .pf-v6-c-menu-toggle.pf-m-full-height {
1274
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1275
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1276
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1277
+ align-items: center;
1278
+ height: 100%;
1279
+ }
1280
+
1281
+ .pf-v6-c-menu-toggle.pf-m-full-width {
1282
+ width: 100%;
1283
+ }
1284
+
1285
+ .pf-v6-c-menu-toggle.pf-m-plain {
1286
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1287
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1288
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1289
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1290
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1291
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1292
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1293
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1294
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1295
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1296
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1297
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1298
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1299
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1300
+ }
1301
+
1302
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
1303
+ border: none;
1304
+ }
1305
+
1306
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
1307
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1308
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1309
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1310
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1311
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1312
+ }
1313
+
1314
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1315
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1316
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1317
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1318
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1319
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1320
+ }
1321
+
1322
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1323
+ border: 0;
1324
+ }
1325
+
1326
+ .pf-v6-c-menu-toggle.pf-m-small {
1327
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1328
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1329
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1330
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1331
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1332
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1333
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1334
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1335
+ }
1336
+
1337
+ .pf-v6-c-menu-toggle.pf-m-success {
1338
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1339
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1340
+ }
1341
+
1342
+ .pf-v6-c-menu-toggle.pf-m-warning {
1343
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1344
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1345
+ }
1346
+
1347
+ .pf-v6-c-menu-toggle.pf-m-danger {
1348
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1349
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1350
+ }
1351
+
1352
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1353
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1354
+ }
1355
+
1356
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1357
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1358
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1359
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1360
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1361
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1362
+ }
1363
+
1364
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1365
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1366
+ pointer-events: none;
1367
+ }
1368
+
1369
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1370
+ --pf-v6-c-menu-toggle--Gap: 0;
1371
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1372
+ padding: 0;
1373
+ }
1374
+
1375
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1376
+ position: relative;
1377
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1378
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1379
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1380
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1381
+ }
1382
+
1383
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1384
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1385
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1386
+ }
1387
+
1388
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1389
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1390
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1391
+ }
1392
+
1393
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1394
+ --pf-v6-c-check__label--Color: currentcolor;
1395
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1396
+ align-items: center;
1397
+ align-self: stretch;
1398
+ }
1399
+
1400
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1401
+ --pf-v6-c-check__input--TranslateY: 0;
1402
+ align-self: center;
1403
+ }
1404
+
1405
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1406
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1407
+ }
1408
+
1409
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1410
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1411
+ }
1412
+
1413
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1414
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1415
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1416
+ }
1417
+
1418
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1419
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1420
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1421
+ }
1422
+
1423
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1424
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1425
+ }
1426
+
1427
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1428
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1429
+ }
1430
+
1431
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1432
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1433
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1434
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1435
+ }
1436
+
1437
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1438
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1439
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1440
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1441
+ }
1442
+
1443
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1444
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1445
+ }
1446
+
1447
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1448
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1449
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1450
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1451
+ }
1452
+
1453
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1454
+ content: none;
1455
+ }
1456
+
1457
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1458
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1459
+ --pf-v6-c-menu-toggle--Gap: 0;
1460
+ align-items: stretch;
1461
+ padding: 0;
1462
+ }
1463
+
1464
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1465
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1466
+ }
1467
+
1468
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1469
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1470
+ display: flex;
1471
+ align-items: stretch;
1472
+ }
1473
+
1474
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1475
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1476
+ flex: 1;
1477
+ }
1478
+
1479
+ .pf-v6-c-menu-toggle__button {
1480
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1481
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1482
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1483
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1484
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1485
+ color: inherit;
1486
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1487
+ border: 0;
1488
+ }
1489
+
1490
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1491
+ display: inline-flex;
1492
+ align-items: baseline;
1493
+ }
1494
+
1495
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1496
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1497
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1498
+ }
1499
+
1500
+ .pf-v6-c-menu-toggle__text {
1501
+ overflow: hidden;
1502
+ text-overflow: ellipsis;
1503
+ white-space: nowrap;
1504
+ min-width: 0;
1505
+ }
1506
+
1507
+ .pf-v6-c-menu-toggle__count {
1508
+ display: flex;
1509
+ flex-wrap: nowrap;
1510
+ }
1511
+
1512
+ .pf-v6-c-menu-toggle__icon {
1513
+ flex-shrink: 0;
1514
+ }
1515
+
1516
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1517
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1518
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
1519
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1520
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1521
+ }
1522
+
1523
+ .pf-v6-c-menu-toggle__controls {
1524
+ display: flex;
1525
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1526
+ align-items: center;
1527
+ justify-content: center;
1528
+ margin-inline-start: auto;
1529
+ }
1530
+
1531
+ .pf-v6-c-menu-toggle__toggle-icon {
1532
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1533
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1534
+ }
1535
+
1536
+ .pf-v6-c-menu-toggle__status-icon {
1537
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1538
+ }
1539
+
1540
+ .pf-v6-c-divider {
1541
+ --pf-v6-c-divider--Display: flex;
1542
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1543
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1544
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1545
+ }
1546
+
1547
+ .pf-v6-c-divider {
1548
+ flex-direction: row;
1549
+ width: 100%;
1550
+ height: var(--pf-v6-c-divider--Size);
1551
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1552
+ --pf-v6-hidden-visible--hidden--Display: none;
1553
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1554
+ display: var(--pf-v6-hidden-visible--Display);
1555
+ flex-shrink: 0;
1556
+ align-items: stretch;
1557
+ align-self: stretch;
1558
+ justify-content: center;
1559
+ border: 0;
1560
+ }
1561
+
1562
+ .pf-v6-c-divider.pf-m-hidden {
1563
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1564
+ }
1565
+
1566
+ @media screen and (min-width: 36rem) {
1567
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1568
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1569
+ }
1570
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1571
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1572
+ }
1573
+ }
1574
+ @media screen and (min-width: 48rem) {
1575
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1576
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1577
+ }
1578
+ .pf-v6-c-divider.pf-m-visible-on-md {
1579
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1580
+ }
1581
+ }
1582
+ @media screen and (min-width: 62rem) {
1583
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1584
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1585
+ }
1586
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1587
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1588
+ }
1589
+ }
1590
+ @media screen and (min-width: 75rem) {
1591
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1592
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1593
+ }
1594
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1595
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1596
+ }
1597
+ }
1598
+ @media screen and (min-width: 90.625rem) {
1599
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1600
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1601
+ }
1602
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1603
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1604
+ }
1605
+ }
1606
+ .pf-v6-c-divider::before {
1607
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1608
+ content: "";
1609
+ background-color: var(--pf-v6-c-divider--Color);
1610
+ }
1611
+
1612
+ .pf-v6-c-divider.pf-m-horizontal {
1613
+ flex-direction: row;
1614
+ width: 100%;
1615
+ height: var(--pf-v6-c-divider--Size);
1616
+ }
1617
+
1618
+ .pf-v6-c-divider.pf-m-vertical {
1619
+ flex-direction: column;
1620
+ width: var(--pf-v6-c-divider--Size);
1621
+ height: inherit;
1622
+ }
1623
+
1624
+ .pf-v6-c-divider.pf-m-inset-none {
1625
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1626
+ }
1627
+
1628
+ .pf-v6-c-divider.pf-m-inset-xs {
1629
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1630
+ }
1631
+
1632
+ .pf-v6-c-divider.pf-m-inset-sm {
1633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1634
+ }
1635
+
1636
+ .pf-v6-c-divider.pf-m-inset-md {
1637
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1638
+ }
1639
+
1640
+ .pf-v6-c-divider.pf-m-inset-lg {
1641
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1642
+ }
1643
+
1644
+ .pf-v6-c-divider.pf-m-inset-xl {
1645
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1646
+ }
1647
+
1648
+ .pf-v6-c-divider.pf-m-inset-2xl {
1649
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1650
+ }
1651
+
1652
+ .pf-v6-c-divider.pf-m-inset-3xl {
1653
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1654
+ }
1655
+
1656
+ @media (min-width: 36rem) {
1657
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1658
+ flex-direction: row;
1659
+ width: 100%;
1660
+ height: var(--pf-v6-c-divider--Size);
1661
+ }
1662
+ }
1663
+ @media (min-width: 36rem) {
1664
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1665
+ flex-direction: column;
1666
+ width: var(--pf-v6-c-divider--Size);
1667
+ height: inherit;
1668
+ }
1669
+ }
1670
+ @media (min-width: 36rem) {
1671
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1672
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1673
+ }
1674
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1675
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1676
+ }
1677
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1678
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1679
+ }
1680
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1681
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1682
+ }
1683
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1684
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1685
+ }
1686
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1687
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1688
+ }
1689
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1690
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1691
+ }
1692
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1693
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1694
+ }
1695
+ }
1696
+ @media (min-width: 48rem) {
1697
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1698
+ flex-direction: row;
1699
+ width: 100%;
1700
+ height: var(--pf-v6-c-divider--Size);
1701
+ }
1702
+ }
1703
+ @media (min-width: 48rem) {
1704
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1705
+ flex-direction: column;
1706
+ width: var(--pf-v6-c-divider--Size);
1707
+ height: inherit;
1708
+ }
1709
+ }
1710
+ @media (min-width: 48rem) {
1711
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1712
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1713
+ }
1714
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1715
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1716
+ }
1717
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1718
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1719
+ }
1720
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1721
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1722
+ }
1723
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1724
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1725
+ }
1726
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1727
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1728
+ }
1729
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1730
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1731
+ }
1732
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1733
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1734
+ }
1735
+ }
1736
+ @media (min-width: 62rem) {
1737
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1738
+ flex-direction: row;
1739
+ width: 100%;
1740
+ height: var(--pf-v6-c-divider--Size);
1741
+ }
1742
+ }
1743
+ @media (min-width: 62rem) {
1744
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1745
+ flex-direction: column;
1746
+ width: var(--pf-v6-c-divider--Size);
1747
+ height: inherit;
1748
+ }
1749
+ }
1750
+ @media (min-width: 62rem) {
1751
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1752
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1753
+ }
1754
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1755
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1756
+ }
1757
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1758
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1759
+ }
1760
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1761
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1762
+ }
1763
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1764
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1765
+ }
1766
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1767
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1768
+ }
1769
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1770
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1771
+ }
1772
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1773
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1774
+ }
1775
+ }
1776
+ @media (min-width: 75rem) {
1777
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1778
+ flex-direction: row;
1779
+ width: 100%;
1780
+ height: var(--pf-v6-c-divider--Size);
1781
+ }
1782
+ }
1783
+ @media (min-width: 75rem) {
1784
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1785
+ flex-direction: column;
1786
+ width: var(--pf-v6-c-divider--Size);
1787
+ height: inherit;
1788
+ }
1789
+ }
1790
+ @media (min-width: 75rem) {
1791
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1792
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1793
+ }
1794
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1795
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1796
+ }
1797
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1798
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1799
+ }
1800
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1801
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1802
+ }
1803
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1804
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1805
+ }
1806
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1807
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1808
+ }
1809
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1810
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1811
+ }
1812
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1813
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1814
+ }
1815
+ }
1816
+ @media (min-width: 90.625rem) {
1817
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1818
+ flex-direction: row;
1819
+ width: 100%;
1820
+ height: var(--pf-v6-c-divider--Size);
1821
+ }
1822
+ }
1823
+ @media (min-width: 90.625rem) {
1824
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1825
+ flex-direction: column;
1826
+ width: var(--pf-v6-c-divider--Size);
1827
+ height: inherit;
1828
+ }
1829
+ }
1830
+ @media (min-width: 90.625rem) {
1831
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1832
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1833
+ }
1834
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1836
+ }
1837
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1838
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1839
+ }
1840
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1841
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1842
+ }
1843
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1844
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1845
+ }
1846
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1847
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1848
+ }
1849
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1850
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1851
+ }
1852
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1853
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1854
+ }
1855
+ }
1856
+ .pf-v6-c-button {
1857
+ --pf-v6-c-button--Display: inline-flex;
1858
+ --pf-v6-c-button--AlignItems: baseline;
1859
+ --pf-v6-c-button--JustifyContent: center;
1860
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1861
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1862
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1863
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1864
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1865
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1866
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1867
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1868
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1869
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1870
+ --pf-v6-c-button--BackgroundColor: transparent;
1871
+ --pf-v6-c-button--BorderColor: transparent;
1872
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1873
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1874
+ --pf-v6-c-button--TextDecorationLine: none;
1875
+ --pf-v6-c-button--TextDecorationStyle: none;
1876
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1877
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1878
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1879
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1880
+ --pf-v6-c-button--hover--BorderColor: transparent;
1881
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1882
+ --pf-v6-c-button--hover--TextDecorationLine: none;
1883
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
1884
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1885
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
1886
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1887
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1888
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1889
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1890
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1891
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1892
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1893
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1894
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1895
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1896
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1897
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1898
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1899
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1900
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1901
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1902
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1903
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1904
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1905
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1906
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1907
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1908
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1909
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1910
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1911
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1912
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1913
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1914
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1915
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1916
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1917
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1918
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1919
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1920
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1921
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1922
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1923
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1924
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1925
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1926
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1927
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1928
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1929
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1930
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
1931
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
1932
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1933
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
1934
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1935
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1936
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1937
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1938
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1939
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1940
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1941
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
1942
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1943
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1944
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
1945
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1946
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1947
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
1948
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
1949
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
1950
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
1951
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
1952
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
1953
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
1954
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1955
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1956
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1957
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1958
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1959
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1960
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1961
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1962
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1963
+ --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
1964
+ --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1965
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
1966
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
1967
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1968
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1969
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1970
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1971
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1972
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
1973
+ --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1974
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
1975
+ --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1976
+ --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
1977
+ --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1978
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1979
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1980
+ --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
1981
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1982
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1983
+ --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
1984
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
1985
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
1986
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
1987
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
1988
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
1989
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
1990
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
1991
+ --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
1992
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1993
+ --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1994
+ --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1995
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1996
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1997
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1998
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1999
+ --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
2000
+ --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
2001
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
2002
+ --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
2003
+ --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
2004
+ --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
2005
+ --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2006
+ --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
2007
+ --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
2008
+ --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2009
+ --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
2010
+ --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
2011
+ --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
2012
+ --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
2013
+ --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
2014
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2015
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2016
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
2017
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2018
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2019
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2020
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2021
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
2022
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
2023
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2024
+ --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
2025
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
2026
+ --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
2027
+ --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
2028
+ --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
2029
+ --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
2030
+ --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
2031
+ --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
2032
+ --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
2033
+ --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
2034
+ --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
2035
+ --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
2036
+ --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
2037
+ --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
2038
+ --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
2039
+ --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
2040
+ --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
2041
+ --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
2042
+ --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
2043
+ --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
2044
+ --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
2045
+ --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2046
+ --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2047
+ --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2048
+ --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2049
+ --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2050
+ --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2051
+ --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
2052
+ --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
2053
+ --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
2054
+ --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2055
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2056
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2057
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2058
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2059
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2060
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
2061
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
2062
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
2063
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
2064
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
2065
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
2066
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
2067
+ --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
2068
+ --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
2069
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
2070
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2071
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
2072
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2073
+ --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2074
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2075
+ --pf-v6-c-button--disabled--BorderColor: transparent;
2076
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2077
+ --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
2078
+ --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2079
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
2080
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
2081
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
2082
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
2083
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
2084
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
2085
+ --pf-v6-c-button__progress--Opacity: 0;
2086
+ --pf-v6-c-button__progress--TranslateY: -50%;
2087
+ --pf-v6-c-button__progress--TranslateX: 0;
2088
+ --pf-v6-c-button__progress--InsetBlockStart: 50%;
2089
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2090
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
2091
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
2092
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
2093
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2094
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
2095
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
2096
+ --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
2097
+ --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2098
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
2099
+ --pf-v6-c-button--m-block--Display: flex;
2100
+ --pf-v6-c-button--m-block--Width: 100%;
2101
+ }
2102
+
2103
+ .pf-v6-c-button {
2104
+ position: relative;
2105
+ display: var(--pf-v6-c-button--Display);
2106
+ gap: var(--pf-v6-c-button--Gap);
2107
+ align-items: var(--pf-v6-c-button--AlignItems);
2108
+ justify-content: var(--pf-v6-c-button--JustifyContent);
2109
+ min-width: var(--pf-v6-c-button--MinWidth);
2110
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
2111
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
2112
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
2113
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
2114
+ font-size: var(--pf-v6-c-button--FontSize, inherit);
2115
+ font-weight: var(--pf-v6-c-button--FontWeight, inherit);
2116
+ line-height: var(--pf-v6-c-button--LineHeight, inherit);
2117
+ color: var(--pf-v6-c-button--Color);
2118
+ text-align: center;
2119
+ text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
2120
+ white-space: nowrap;
2121
+ cursor: pointer;
2122
+ user-select: none;
2123
+ background-color: var(--pf-v6-c-button--BackgroundColor);
2124
+ border: 0;
2125
+ border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
2126
+ border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
2127
+ border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
2128
+ border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
2129
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
2130
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
2131
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
2132
+ }
2133
+
2134
+ .pf-v6-c-button::after {
2135
+ position: absolute;
2136
+ inset: 0;
2137
+ pointer-events: none;
2138
+ content: "";
2139
+ border: var(--pf-v6-c-button--BorderWidth) solid;
2140
+ border-color: var(--pf-v6-c-button--BorderColor);
2141
+ border-radius: inherit;
2142
+ transition: inherit;
2143
+ }
2144
+
2145
+ .pf-v6-c-button.pf-m-primary {
2146
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
2147
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
2148
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
2149
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
2150
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
2151
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
2152
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color);
2153
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor);
2154
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
2155
+ }
2156
+
2157
+ .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
2158
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
2159
+ }
2160
+
2161
+ .pf-v6-c-button.pf-m-secondary {
2162
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
2163
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
2164
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
2165
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
2166
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
2167
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
2168
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color);
2169
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color);
2170
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor);
2171
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color);
2172
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color);
2173
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color);
2174
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color);
2175
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color);
2176
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color);
2177
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color);
2178
+ }
2179
+
2180
+ .pf-v6-c-button.pf-m-secondary.pf-m-danger {
2181
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor);
2182
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor);
2183
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor);
2184
+ --pf-v6-c-button--m-danger--BackgroundColor: transparent;
2185
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent;
2186
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent;
2187
+ }
2188
+
2189
+ .pf-v6-c-button.pf-m-tertiary {
2190
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
2191
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
2192
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
2193
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
2194
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
2195
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
2196
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color);
2197
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color);
2198
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor);
2199
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
2200
+ }
2201
+
2202
+ .pf-v6-c-button.pf-m-link {
2203
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
2204
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
2205
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
2206
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
2207
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
2208
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
2209
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
2210
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
2211
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
2212
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
2213
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
2214
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
2215
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
2216
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
2217
+ }
2218
+
2219
+ .pf-v6-c-button.pf-m-link.pf-m-inline {
2220
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
2221
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
2222
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
2223
+ --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
2224
+ --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
2225
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
2226
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2227
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2228
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2229
+ --pf-v6-c-button--BackgroundColor: transparent;
2230
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2231
+ --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2232
+ --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2233
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2234
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2235
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
2236
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2237
+ --pf-v6-c-button--disabled--BackgroundColor: transparent;
2238
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
2239
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
2240
+ text-align: start;
2241
+ white-space: normal;
2242
+ outline-offset: 0.125rem;
2243
+ }
2244
+
2245
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2246
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2247
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2248
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2249
+ }
2250
+
2251
+ .pf-v6-c-button.pf-m-link.pf-m-danger {
2252
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2253
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
2254
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
2255
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
2256
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
2257
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
2258
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
2259
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
2260
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
2261
+ }
2262
+
2263
+ .pf-v6-c-button.pf-m-link.pf-m-display-lg {
2264
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
2265
+ }
2266
+
2267
+ .pf-v6-c-button.pf-m-warning {
2268
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
2269
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
2270
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
2271
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
2272
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
2273
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
2274
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
2275
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
2276
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
2277
+ }
2278
+
2279
+ .pf-v6-c-button.pf-m-danger {
2280
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
2281
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
2282
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
2283
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
2284
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
2285
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
2286
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
2287
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
2288
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
2289
+ }
2290
+
2291
+ .pf-v6-c-button.pf-m-control {
2292
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
2293
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
2294
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
2295
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
2296
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
2297
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
2298
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
2299
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
2300
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
2301
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
2302
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
2303
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
2304
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
2305
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
2306
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
2307
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
2308
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
2309
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
2310
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
2311
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
2312
+ }
2313
+
2314
+ .pf-v6-c-button.pf-m-stateful {
2315
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
2316
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
2317
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
2318
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
2319
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
2320
+ }
2321
+
2322
+ .pf-v6-c-button.pf-m-read {
2323
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
2324
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
2325
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
2326
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
2327
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
2328
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
2329
+ }
2330
+
2331
+ .pf-v6-c-button.pf-m-unread {
2332
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
2333
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
2334
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
2335
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
2336
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
2337
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
2338
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
2339
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
2340
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
2341
+ }
2342
+
2343
+ .pf-v6-c-button.pf-m-attention {
2344
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
2345
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
2346
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
2347
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
2348
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
2349
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
2350
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
2351
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
2352
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
2353
+ }
2354
+
2355
+ .pf-v6-c-button.pf-m-plain {
2356
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
2357
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
2358
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
2359
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
2360
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
2361
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
2362
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
2363
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
2364
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
2365
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
2366
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
2367
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
2368
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
2369
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
2370
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
2371
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
2372
+ }
2373
+
2374
+ .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
2375
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
2376
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
2377
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
2378
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
2379
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
2380
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
2381
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
2382
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
2383
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2384
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2385
+ min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2386
+ }
2387
+
2388
+ .pf-v6-c-button.pf-m-block {
2389
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
2390
+ width: var(--pf-v6-c-button--m-block--Width);
2391
+ }
2392
+
2393
+ .pf-v6-c-button.pf-m-small {
2394
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
2395
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
2396
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
2397
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
2398
+ }
2399
+
2400
+ .pf-v6-c-button.pf-m-display-lg {
2401
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
2402
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
2403
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
2404
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
2405
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
2406
+ }
2407
+
2408
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2409
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2410
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
2411
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
2412
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2413
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2414
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2415
+ text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
2416
+ }
2417
+
2418
+ .pf-v6-c-button.pf-m-clicked {
2419
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2420
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2421
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2422
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2423
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2424
+ }
2425
+
2426
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2427
+ pointer-events: none;
2428
+ }
2429
+
2430
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2431
+ color: var(--pf-v6-c-button--disabled--Color);
2432
+ background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
2433
+ }
2434
+
2435
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2436
+ border-color: transparent;
2437
+ }
2438
+
2439
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2440
+ color: var(--pf-v6-c-button--disabled__icon--Color);
2441
+ }
2442
+
2443
+ .pf-v6-c-button.pf-m-aria-disabled {
2444
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2445
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2446
+ cursor: default;
2447
+ }
2448
+
2449
+ .pf-v6-c-button.pf-m-progress {
2450
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2451
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2452
+ }
2453
+
2454
+ .pf-v6-c-button.pf-m-in-progress {
2455
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2456
+ }
2457
+
2458
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2459
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2460
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2461
+ }
2462
+
2463
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2464
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2465
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2466
+ }
2467
+
2468
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2469
+ opacity: 0;
2470
+ }
2471
+
2472
+ .pf-v6-c-button__icon {
2473
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2474
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2475
+ color: var(--pf-v6-c-button__icon--Color);
2476
+ }
2477
+
2478
+ .pf-v6-c-button__icon.pf-m-start {
2479
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2480
+ }
2481
+
2482
+ .pf-v6-c-button__icon.pf-m-end {
2483
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2484
+ }
2485
+
2486
+ .pf-v6-c-button__progress {
2487
+ position: absolute;
2488
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2489
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2490
+ line-height: 1;
2491
+ color: var(--pf-v6-c-button__progress--Color);
2492
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2493
+ }
2494
+
2495
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2496
+ --pf-v6-c-spinner--Color: currentcolor;
2497
+ }
2498
+
2499
+ .pf-v6-c-button__count {
2500
+ display: inline-flex;
2501
+ align-items: center;
2502
+ }
2503
+
2504
+ .pf-v6-c-breadcrumb {
2505
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2506
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2507
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2508
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2509
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2510
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2511
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2512
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2513
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2514
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2515
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2516
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2517
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2518
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2519
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2520
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2521
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2522
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2523
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2524
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2525
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2526
+ }
2527
+
2528
+ .pf-v6-c-breadcrumb {
2529
+ display: inline-flex;
2530
+ }
2531
+
2532
+ .pf-v6-c-breadcrumb__list {
2533
+ display: flex;
2534
+ flex-wrap: wrap;
2535
+ align-items: center;
2536
+ }
2537
+
2538
+ .pf-v6-c-breadcrumb__item {
2539
+ display: flex;
2540
+ align-items: baseline;
2541
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2542
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2543
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2544
+ white-space: nowrap;
2545
+ list-style: none;
2546
+ }
2547
+
2548
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2549
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2550
+ }
2551
+
2552
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2553
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2554
+ }
2555
+
2556
+ .pf-v6-c-breadcrumb__item-divider {
2557
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2558
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2559
+ line-height: 1;
2560
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2561
+ }
2562
+
2563
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2564
+ scale: -1 1;
2565
+ }
2566
+
2567
+ .pf-v6-c-breadcrumb__link {
2568
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2569
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2570
+ font-size: inherit;
2571
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2572
+ line-height: inherit;
2573
+ color: var(--pf-v6-c-breadcrumb__link--Color);
2574
+ text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2575
+ word-break: break-word;
2576
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2577
+ }
2578
+
2579
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2580
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2581
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2582
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2583
+ }
2584
+
2585
+ .pf-v6-c-breadcrumb__link.pf-m-current {
2586
+ cursor: default;
2587
+ }
2588
+
2589
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2590
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2591
+ text-decoration: none;
2592
+ }
2593
+
2594
+ button.pf-v6-c-breadcrumb__link {
2595
+ border: none;
2596
+ }
2597
+
2598
+ .pf-v6-c-breadcrumb__dropdown {
2599
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2600
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2601
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2602
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2603
+ }
2604
+
2605
+ .pf-v6-c-breadcrumb__heading {
2606
+ display: inline;
2607
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2608
+ }
2609
+
2610
+ .pf-v6-c-breadcrumb__link,
2611
+ .pf-v6-c-breadcrumb__heading {
2612
+ white-space: normal;
2613
+ }
2614
+
2615
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2616
+ display: none;
2617
+ }
2618
+
2619
+ .pf-v6-c-menu {
2620
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2621
+ --pf-v6-c-menu--Width: auto;
2622
+ --pf-v6-c-menu--MinWidth: auto;
2623
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2624
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2625
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
2626
+ --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
2627
+ --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
2628
+ --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
2629
+ --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
2630
+ --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
2631
+ --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
2632
+ --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
2633
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
2634
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2635
+ --pf-v6-c-menu--m-plain--BoxShadow: none;
2636
+ --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
2637
+ --pf-v6-c-menu__content--Height: auto;
2638
+ --pf-v6-c-menu__content--MaxHeight: none;
2639
+ --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
2640
+ --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2641
+ --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2642
+ --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
2643
+ --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2644
+ --pf-v6-c-menu__footer--BoxShadow: none;
2645
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
2646
+ --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
2647
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2648
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2649
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2650
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
2651
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2652
+ --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
2653
+ --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
2654
+ --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2655
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
2656
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2657
+ --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2658
+ --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2659
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2660
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2661
+ --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
2662
+ --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
2663
+ --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
2664
+ --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
2665
+ --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2666
+ --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
2667
+ --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2668
+ --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2669
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2670
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2671
+ --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2672
+ --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2673
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2674
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2675
+ --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
2676
+ --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
2677
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2678
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2679
+ --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2680
+ --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2681
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2682
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2683
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
2684
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
2685
+ --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
2686
+ --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
2687
+ --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
2688
+ --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
2689
+ --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
2690
+ --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
2691
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
2692
+ --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
2693
+ --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
2694
+ --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
2695
+ --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
2696
+ --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
2697
+ --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
2698
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
2699
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
2700
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
2701
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
2702
+ --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
2703
+ --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
2704
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
2705
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2706
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
2707
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
2708
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2709
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
2710
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2711
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
2712
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
2713
+ }
2714
+
2715
+ .pf-v6-c-menu__content,
2716
+ .pf-v6-c-menu__list-item,
2717
+ .pf-v6-c-menu__item-main,
2718
+ .pf-v6-c-menu__breadcrumb,
2719
+ .pf-v6-c-menu__item-check,
2720
+ .pf-v6-c-menu__item-action,
2721
+ .pf-v6-c-menu__item-action-icon {
2722
+ display: flex;
2723
+ }
2724
+
2725
+ .pf-v6-c-menu__list,
2726
+ .pf-v6-c-menu__group {
2727
+ --pf-v6-hidden-visible--visible--Display: grid;
2728
+ --pf-v6-hidden-visible--hidden--Display: none;
2729
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2730
+ display: var(--pf-v6-hidden-visible--Display);
2731
+ }
2732
+
2733
+ .pf-v6-c-menu__list.pf-m-hidden,
2734
+ .pf-v6-c-menu__group.pf-m-hidden {
2735
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2736
+ }
2737
+
2738
+ @media screen and (min-width: 36rem) {
2739
+ .pf-v6-c-menu__list.pf-m-hidden-on-sm,
2740
+ .pf-v6-c-menu__group.pf-m-hidden-on-sm {
2741
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2742
+ }
2743
+ .pf-v6-c-menu__list.pf-m-visible-on-sm,
2744
+ .pf-v6-c-menu__group.pf-m-visible-on-sm {
2745
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2746
+ }
2747
+ }
2748
+ @media screen and (min-width: 48rem) {
2749
+ .pf-v6-c-menu__list.pf-m-hidden-on-md,
2750
+ .pf-v6-c-menu__group.pf-m-hidden-on-md {
2751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2752
+ }
2753
+ .pf-v6-c-menu__list.pf-m-visible-on-md,
2754
+ .pf-v6-c-menu__group.pf-m-visible-on-md {
2755
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2756
+ }
2757
+ }
2758
+ @media screen and (min-width: 62rem) {
2759
+ .pf-v6-c-menu__list.pf-m-hidden-on-lg,
2760
+ .pf-v6-c-menu__group.pf-m-hidden-on-lg {
2761
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2762
+ }
2763
+ .pf-v6-c-menu__list.pf-m-visible-on-lg,
2764
+ .pf-v6-c-menu__group.pf-m-visible-on-lg {
2765
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2766
+ }
2767
+ }
2768
+ @media screen and (min-width: 75rem) {
2769
+ .pf-v6-c-menu__list.pf-m-hidden-on-xl,
2770
+ .pf-v6-c-menu__group.pf-m-hidden-on-xl {
2771
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2772
+ }
2773
+ .pf-v6-c-menu__list.pf-m-visible-on-xl,
2774
+ .pf-v6-c-menu__group.pf-m-visible-on-xl {
2775
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2776
+ }
2777
+ }
2778
+ @media screen and (min-width: 90.625rem) {
2779
+ .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
2780
+ .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
2781
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2782
+ }
2783
+ .pf-v6-c-menu__list.pf-m-visible-on-2xl,
2784
+ .pf-v6-c-menu__group.pf-m-visible-on-2xl {
2785
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2786
+ }
2787
+ }
2788
+ .pf-v6-c-menu__list,
2789
+ .pf-v6-c-menu__list-item,
2790
+ .pf-v6-c-menu__breadcrumb,
2791
+ .pf-v6-c-menu__footer {
2792
+ position: relative;
2793
+ }
2794
+
2795
+ .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
2796
+ .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
2797
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
2798
+ --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
2799
+ --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
2800
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
2801
+ --pf-v6-c-menu__list-item--BackgroundColor: transparent;
2802
+ pointer-events: none;
2803
+ }
2804
+
2805
+ [class*=pf-v6-c-menu]:is([hidden]) {
2806
+ display: none;
2807
+ }
2808
+
2809
+ .pf-v6-c-menu {
2810
+ display: grid;
2811
+ row-gap: var(--pf-v6-c-menu--RowGap);
2812
+ width: var(--pf-v6-c-menu--Width);
2813
+ min-width: var(--pf-v6-c-menu--MinWidth);
2814
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
2815
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
2816
+ overflow: hidden;
2817
+ color: var(--pf-v6-c-menu--Color);
2818
+ background-color: var(--pf-v6-c-menu--BackgroundColor);
2819
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
2820
+ box-shadow: var(--pf-v6-c-menu--BoxShadow);
2821
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
2822
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
2823
+ }
2824
+
2825
+ .pf-v6-c-menu .pf-v6-c-menu {
2826
+ min-width: 100%;
2827
+ }
2828
+
2829
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
2830
+ overflow: visible;
2831
+ }
2832
+
2833
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
2834
+ min-width: 100%;
2835
+ border-radius: 0;
2836
+ }
2837
+
2838
+ .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
2839
+ overflow: visible;
2840
+ }
2841
+
2842
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
2843
+ position: absolute;
2844
+ inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
2845
+ inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
2846
+ inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
2847
+ inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
2848
+ z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
2849
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
2850
+ }
2851
+
2852
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content {
2853
+ overflow-y: visible;
2854
+ }
2855
+
2856
+ .pf-v6-c-menu.pf-m-top {
2857
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
2858
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
2859
+ }
2860
+
2861
+ .pf-v6-c-menu.pf-m-left {
2862
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
2863
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
2864
+ }
2865
+
2866
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
2867
+ overflow: hidden;
2868
+ transition: var(--pf-v6-c-menu--m-drilldown__content--Transition);
2869
+ }
2870
+
2871
+ .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
2872
+ padding: 0;
2873
+ }
2874
+
2875
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
2876
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
2877
+ transform: translateX(-100%);
2878
+ }
2879
+
2880
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
2881
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
2882
+ }
2883
+
2884
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
2885
+ position: absolute;
2886
+ inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
2887
+ inset-inline-start: 100%;
2888
+ width: 100%;
2889
+ box-shadow: none;
2890
+ transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
2891
+ }
2892
+
2893
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
2894
+ transform: translateX(-100%);
2895
+ }
2896
+
2897
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
2898
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
2899
+ }
2900
+
2901
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
2902
+ overflow: hidden;
2903
+ visibility: visible;
2904
+ transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
2905
+ }
2906
+
2907
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
2908
+ --pf-v6-c-menu__list--PaddingBlockStart: 0;
2909
+ --pf-v6-c-menu__list--PaddingBlockEnd: 0;
2910
+ }
2911
+
2912
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
2913
+ z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
2914
+ }
2915
+
2916
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
2917
+ overflow: visible;
2918
+ }
2919
+
2920
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
2921
+ position: static;
2922
+ }
2923
+
2924
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
2925
+ background-color: transparent;
2926
+ }
2927
+
2928
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
2929
+ display: none;
2930
+ }
2931
+
2932
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
2933
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
2934
+ }
2935
+
2936
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
2937
+ overflow: visible;
2938
+ visibility: hidden;
2939
+ }
2940
+
2941
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
2942
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
2943
+ display: none;
2944
+ }
2945
+
2946
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
2947
+ visibility: hidden;
2948
+ }
2949
+
2950
+ .pf-v6-c-menu.pf-m-plain {
2951
+ --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
2952
+ }
2953
+
2954
+ .pf-v6-c-menu.pf-m-scrollable {
2955
+ --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
2956
+ --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
2957
+ --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
2958
+ --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
2959
+ overflow: hidden;
2960
+ }
2961
+
2962
+ .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) {
2963
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
2964
+ }
2965
+
2966
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content,
2967
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
2968
+ overflow-y: auto;
2969
+ }
2970
+
2971
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
2972
+ position: relative;
2973
+ z-index: var(--pf-v6-c-menu--ZIndex);
2974
+ margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
2975
+ margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
2976
+ overflow: hidden;
2977
+ }
2978
+
2979
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
2980
+ padding-block-start: var(--pf-v6-c-menu--RowGap);
2981
+ padding-block-end: var(--pf-v6-c-menu--RowGap);
2982
+ }
2983
+
2984
+ .pf-v6-c-menu__header {
2985
+ padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart);
2986
+ padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd);
2987
+ padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart);
2988
+ padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd);
2989
+ }
2990
+
2991
+ .pf-v6-c-menu__search {
2992
+ padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart);
2993
+ padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd);
2994
+ padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart);
2995
+ padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd);
2996
+ }
2997
+
2998
+ .pf-v6-c-menu__footer {
2999
+ padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart);
3000
+ padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
3001
+ padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
3002
+ padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
3003
+ box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
3004
+ }
3005
+
3006
+ .pf-v6-c-menu__content {
3007
+ flex-direction: column;
3008
+ row-gap: var(--pf-v6-c-menu__content--RowGap);
3009
+ height: var(--pf-v6-c-menu__content--Height);
3010
+ max-height: var(--pf-v6-c-menu__content--MaxHeight);
3011
+ }
3012
+
3013
+ .pf-v6-c-menu__content .pf-v6-c-menu__content {
3014
+ --pf-v6-c-menu__content--Height: auto;
3015
+ }
3016
+
3017
+ .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
3018
+ margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
3019
+ margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
3020
+ }
3021
+
3022
+ .pf-v6-c-menu__list-item {
3023
+ align-items: baseline;
3024
+ min-width: 0;
3025
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
3026
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
3027
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
3028
+ }
3029
+
3030
+ .pf-v6-c-menu__list-item > * {
3031
+ position: relative;
3032
+ }
3033
+
3034
+ .pf-v6-c-menu__list-item::before {
3035
+ position: absolute;
3036
+ inset: 0;
3037
+ content: "";
3038
+ background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
3039
+ transition: inherit;
3040
+ }
3041
+
3042
+ .pf-v6-c-menu__list-item.pf-m-load {
3043
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
3044
+ }
3045
+
3046
+ .pf-v6-c-menu__list-item.pf-m-loading {
3047
+ justify-content: center;
3048
+ overflow: hidden;
3049
+ pointer-events: none;
3050
+ }
3051
+
3052
+ .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text {
3053
+ text-align: center;
3054
+ }
3055
+
3056
+ .pf-v6-c-menu__list-item.pf-m-danger {
3057
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color);
3058
+ }
3059
+
3060
+ .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
3061
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color));
3062
+ }
3063
+
3064
+ .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
3065
+ padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
3066
+ }
3067
+
3068
+ .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
3069
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
3070
+ }
3071
+
3072
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
3073
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
3074
+ .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
3075
+ .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
3076
+ opacity: 1;
3077
+ }
3078
+
3079
+ .pf-v6-c-menu__item {
3080
+ flex-basis: 100%;
3081
+ flex-direction: column;
3082
+ min-width: 0;
3083
+ padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
3084
+ padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
3085
+ padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
3086
+ padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
3087
+ font-size: var(--pf-v6-c-menu__item--FontSize);
3088
+ font-weight: var(--pf-v6-c-menu__item--FontWeight);
3089
+ line-height: var(--pf-v6-c-menu__item--LineHeight);
3090
+ color: var(--pf-v6-c-menu__item--Color);
3091
+ text-align: start;
3092
+ text-decoration: none;
3093
+ background-color: var(--pf-v6-c-menu__item--BackgroundColor);
3094
+ border: 0;
3095
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3096
+ --pf-v6-hidden-visible--visible--Display: flex;
3097
+ --pf-v6-hidden-visible--hidden--Display: none;
3098
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3099
+ display: var(--pf-v6-hidden-visible--Display);
3100
+ }
3101
+
3102
+ .pf-v6-c-menu__item.pf-m-hidden {
3103
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3104
+ }
3105
+
3106
+ @media screen and (min-width: 36rem) {
3107
+ .pf-v6-c-menu__item.pf-m-hidden-on-sm {
3108
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3109
+ }
3110
+ .pf-v6-c-menu__item.pf-m-visible-on-sm {
3111
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3112
+ }
3113
+ }
3114
+ @media screen and (min-width: 48rem) {
3115
+ .pf-v6-c-menu__item.pf-m-hidden-on-md {
3116
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3117
+ }
3118
+ .pf-v6-c-menu__item.pf-m-visible-on-md {
3119
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3120
+ }
3121
+ }
3122
+ @media screen and (min-width: 62rem) {
3123
+ .pf-v6-c-menu__item.pf-m-hidden-on-lg {
3124
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3125
+ }
3126
+ .pf-v6-c-menu__item.pf-m-visible-on-lg {
3127
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3128
+ }
3129
+ }
3130
+ @media screen and (min-width: 75rem) {
3131
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
3132
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3133
+ }
3134
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
3135
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3136
+ }
3137
+ }
3138
+ @media screen and (min-width: 90.625rem) {
3139
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3140
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3141
+ }
3142
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3143
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3144
+ }
3145
+ }
3146
+ :where(label).pf-v6-c-menu__item {
3147
+ cursor: pointer;
3148
+ }
3149
+
3150
+ .pf-v6-c-menu__item.pf-m-selected {
3151
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3152
+ }
3153
+
3154
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3155
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3156
+ opacity: 1;
3157
+ }
3158
+
3159
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3160
+ color: var(--pf-v6-c-menu__item-external--Color);
3161
+ }
3162
+
3163
+ .pf-v6-c-menu__item-select-icon {
3164
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
3165
+ }
3166
+
3167
+ .pf-v6-c-menu__item-main {
3168
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3169
+ align-items: center;
3170
+ width: 100%;
3171
+ }
3172
+
3173
+ .pf-v6-c-menu__item-text {
3174
+ overflow: hidden;
3175
+ text-overflow: ellipsis;
3176
+ white-space: nowrap;
3177
+ flex-grow: 1;
3178
+ }
3179
+
3180
+ .pf-v6-c-menu__group-title {
3181
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3182
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3183
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3184
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3185
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3186
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3187
+ color: var(--pf-v6-c-menu__group-title--Color);
3188
+ }
3189
+
3190
+ .pf-v6-c-menu__item-description {
3191
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3192
+ color: var(--pf-v6-c-menu__item-description--Color);
3193
+ word-break: break-word;
3194
+ }
3195
+
3196
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3197
+ --pf-v6-c-check__input--TranslateY: none;
3198
+ }
3199
+
3200
+ .pf-v6-c-menu__item-toggle-icon {
3201
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3202
+ }
3203
+
3204
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3205
+ scale: -1 1;
3206
+ }
3207
+
3208
+ .pf-v6-c-menu__item-icon {
3209
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3210
+ }
3211
+
3212
+ .pf-v6-c-menu__item-select-icon,
3213
+ .pf-v6-c-menu__item-external-icon {
3214
+ opacity: 0;
3215
+ }
3216
+
3217
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
3218
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3219
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3220
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
3221
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3222
+ }
3223
+
3224
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
3225
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3226
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3227
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
3228
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3229
+ }
3230
+
3231
+ .pf-v6-c-menu__breadcrumb {
3232
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3233
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3234
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3235
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3236
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3237
+ }
3238
+
3239
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3240
+ min-width: auto;
3241
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3242
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3243
+ }
3244
+
3245
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3246
+ height: auto;
3247
+ }
3248
+
3249
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3250
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3251
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3252
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3253
+ }
3254
+
3255
+ .pf-v6-c-spinner {
3256
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3257
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3258
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3259
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3260
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3261
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3262
+ --pf-v6-c-spinner--StrokeWidth: 10;
3263
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3264
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3265
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3266
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3267
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3268
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3269
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3270
+ }
3271
+
3272
+ .pf-v6-c-spinner {
3273
+ width: var(--pf-v6-c-spinner--Width);
3274
+ height: var(--pf-v6-c-spinner--Height);
3275
+ overflow: hidden;
3276
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3277
+ }
3278
+
3279
+ .pf-v6-c-spinner.pf-m-inline {
3280
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3281
+ }
3282
+
3283
+ .pf-v6-c-spinner.pf-m-sm {
3284
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3285
+ }
3286
+
3287
+ .pf-v6-c-spinner.pf-m-md {
3288
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3289
+ }
3290
+
3291
+ .pf-v6-c-spinner.pf-m-lg {
3292
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3293
+ }
3294
+
3295
+ .pf-v6-c-spinner.pf-m-xl {
3296
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3297
+ }
3298
+
3299
+ .pf-v6-c-spinner__path {
3300
+ width: 100%;
3301
+ height: 100%;
3302
+ stroke: var(--pf-v6-c-spinner--Color);
3303
+ stroke-dasharray: 283;
3304
+ stroke-dashoffset: 280;
3305
+ stroke-linecap: round;
3306
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3307
+ transform-origin: 50% 50%;
3308
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3309
+ }
3310
+
3311
+ @keyframes pf-v6-c-spinner-animation-rotate {
3312
+ 0% {
3313
+ transform: rotate(0deg);
3314
+ }
3315
+ 100% {
3316
+ transform: rotate(360deg);
3317
+ }
3318
+ }
3319
+ @keyframes pf-v6-c-spinner-animation-dash {
3320
+ 0% {
3321
+ stroke-dashoffset: 280;
3322
+ transform: rotate(0);
3323
+ }
3324
+ 15% {
3325
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3326
+ }
3327
+ 40% {
3328
+ stroke-dasharray: 220;
3329
+ stroke-dashoffset: 150;
3330
+ }
3331
+ 100% {
3332
+ stroke-dashoffset: 280;
3333
+ transform: rotate(720deg);
3334
+ }
3335
+ }
3336
+ .pf-v6-c-tooltip {
3337
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3338
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3339
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3340
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3341
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3342
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3343
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3344
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3345
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3346
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3347
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3348
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3349
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3350
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3351
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3352
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3353
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3354
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3355
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3356
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3357
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3358
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3359
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3360
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3361
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3362
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3363
+ }
3364
+
3365
+ .pf-v6-c-tooltip {
3366
+ position: relative;
3367
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3368
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3369
+ }
3370
+
3371
+ .pf-v6-c-tooltip:is(.pf-m-top,
3372
+ .pf-m-top-left,
3373
+ .pf-m-top-right) {
3374
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3375
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3376
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3377
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3378
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3379
+ }
3380
+
3381
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3382
+ .pf-m-bottom-left,
3383
+ .pf-m-bottom-right) {
3384
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3385
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3386
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3387
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3388
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3389
+ }
3390
+
3391
+ .pf-v6-c-tooltip:is(.pf-m-left,
3392
+ .pf-m-left-top,
3393
+ .pf-m-left-bottom) {
3394
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3395
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3396
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3397
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3398
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3399
+ }
3400
+
3401
+ .pf-v6-c-tooltip:is(.pf-m-right,
3402
+ .pf-m-right-top,
3403
+ .pf-m-right-bottom) {
3404
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3405
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3406
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3407
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3408
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3409
+ }
3410
+
3411
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
3412
+ .pf-m-right-top) {
3413
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3414
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3415
+ }
3416
+
3417
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3418
+ .pf-m-right-bottom) {
3419
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3420
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3421
+ }
3422
+
3423
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
3424
+ .pf-m-bottom-left) {
3425
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3426
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3427
+ }
3428
+
3429
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
3430
+ .pf-m-bottom-right) {
3431
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3432
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3433
+ }
3434
+
3435
+ .pf-v6-c-tooltip__content {
3436
+ position: relative;
3437
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3438
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3439
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3440
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3441
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
3442
+ color: var(--pf-v6-c-tooltip__content--Color);
3443
+ text-align: center;
3444
+ word-break: break-word;
3445
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3446
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3447
+ }
3448
+
3449
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
3450
+ text-align: start;
3451
+ }
3452
+
3453
+ .pf-v6-c-tooltip__arrow {
3454
+ position: absolute;
3455
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3456
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3457
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3458
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3459
+ width: var(--pf-v6-c-tooltip__arrow--Width);
3460
+ height: var(--pf-v6-c-tooltip__arrow--Height);
3461
+ pointer-events: none;
3462
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3463
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3464
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3465
+ }