@patternfly/react-templates 6.5.0-prerelease.24 → 6.5.0-prerelease.25

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 (6) hide show
  1. package/CHANGELOG.md +4 -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/umd/assets/{output-DxDjiwEo.css → output-BT__y4-5.css} +1038 -1038
  6. package/package.json +3 -3
package/dist/umd/assets/{output-DxDjiwEo.css → output-BT__y4-5.css} RENAMED
@@ -3,6 +3,250 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-text-input-group {
7
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
+ --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));
21
+ --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));
22
+ --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));
23
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ }
59
+
60
+ .pf-v6-c-text-input-group {
61
+ position: relative;
62
+ display: flex;
63
+ width: 100%;
64
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
65
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
67
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
+ }
73
+
74
+ .pf-v6-c-text-input-group::before {
75
+ position: absolute;
76
+ inset: 0;
77
+ pointer-events: none;
78
+ content: "";
79
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
+ }
85
+
86
+ .pf-v6-c-text-input-group.pf-m-disabled {
87
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
+ pointer-events: none;
94
+ }
95
+
96
+ .pf-v6-c-text-input-group.pf-m-plain {
97
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
+ }
99
+
100
+ .pf-v6-c-text-input-group.pf-m-plain::before {
101
+ border: 0;
102
+ }
103
+
104
+ .pf-v6-c-text-input-group.pf-m-success {
105
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
+ }
109
+
110
+ .pf-v6-c-text-input-group.pf-m-warning {
111
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
+ }
115
+
116
+ .pf-v6-c-text-input-group.pf-m-error {
117
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
+ }
121
+
122
+ @media (prefers-reduced-motion: no-preference) {
123
+ .pf-v6-c-text-input-group.pf-m-error {
124
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
+ animation-name: pf-v6-global-danger-jiggle-motion;
126
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
+ animation-fill-mode: both;
129
+ }
130
+ }
131
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
+ animation-name: pf-v6-global-fade-in;
135
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
+ }
138
+
139
+ .pf-v6-c-text-input-group:hover {
140
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
+ }
142
+
143
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
+ }
146
+
147
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
+ --pf-v6-c-text-input-group__text--Position: relative;
149
+ }
150
+
151
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
+ }
155
+
156
+ .pf-v6-c-text-input-group__main {
157
+ display: flex;
158
+ flex: 1;
159
+ flex-wrap: wrap;
160
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
+ min-width: 0;
162
+ }
163
+
164
+ .pf-v6-c-text-input-group__main.pf-m-icon {
165
+ --pf-v6-c-text-input-group__text--Position: relative;
166
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
+ }
172
+
173
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
+ }
176
+
177
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
+ }
182
+
183
+ .pf-v6-c-text-input-group__text {
184
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
+ display: inline-grid;
186
+ flex: 1;
187
+ grid-template-areas: "text-input";
188
+ grid-template-columns: 1fr;
189
+ }
190
+
191
+ .pf-v6-c-text-input-group__icon {
192
+ position: absolute;
193
+ inset-block-start: 50%;
194
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
+ color: var(--pf-v6-c-text-input-group__icon--Color);
197
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
198
+ }
199
+
200
+ .pf-v6-c-text-input-group__icon.pf-m-status {
201
+ inset-inline-start: auto;
202
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
204
+ }
205
+
206
+ .pf-v6-c-text-input-group__text-input {
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ white-space: nowrap;
210
+ position: relative;
211
+ width: 100%;
212
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
218
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
+ border: 0;
220
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
+ }
222
+
223
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
+ grid-area: text-input;
225
+ }
226
+
227
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
229
+ }
230
+
231
+ .pf-v6-c-text-input-group__text-input::placeholder {
232
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
233
+ }
234
+
235
+ .pf-v6-c-text-input-group__utilities {
236
+ display: flex;
237
+ align-items: center;
238
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
240
+ }
241
+
242
+ .pf-v6-c-text-input-group__utilities > * + * {
243
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
244
+ }
245
+
246
+ .pf-v6-c-text-input-group__group {
247
+ display: flex;
248
+ }
249
+
6
250
  .pf-v6-c-menu-toggle {
7
251
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
252
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -570,563 +814,6 @@
570
814
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
571
815
  }
572
816
 
573
- .pf-v6-c-check {
574
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
575
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
576
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
577
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
578
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
579
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
580
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
581
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
582
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
583
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
584
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
585
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
586
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
587
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
588
- }
589
-
590
- .pf-v6-c-check {
591
- display: grid;
592
- grid-template-columns: auto 1fr;
593
- grid-gap: var(--pf-v6-c-check--GridGap);
594
- accent-color: var(--pf-v6-c-check--AccentColor);
595
- }
596
-
597
- .pf-v6-c-check.pf-m-standalone {
598
- display: inline-grid;
599
- grid-template-columns: auto;
600
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
601
- }
602
-
603
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
604
- align-self: center;
605
- transform: none;
606
- }
607
-
608
- .pf-v6-c-check__input {
609
- align-self: start;
610
- font-size: var(--pf-v6-c-check__label--FontSize);
611
- line-height: var(--pf-v6-c-check__label--LineHeight);
612
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
613
- }
614
-
615
- .pf-v6-c-check__label {
616
- font-size: var(--pf-v6-c-check__label--FontSize);
617
- font-weight: var(--pf-v6-c-check__label--FontWeight);
618
- line-height: var(--pf-v6-c-check__label--LineHeight);
619
- color: var(--pf-v6-c-check__label--Color);
620
- }
621
-
622
- .pf-v6-c-check__description {
623
- grid-column: 2;
624
- font-size: var(--pf-v6-c-check__description--FontSize);
625
- color: var(--pf-v6-c-check__description--Color);
626
- }
627
-
628
- .pf-v6-c-check__body {
629
- grid-column: 2;
630
- }
631
-
632
- .pf-v6-c-check__label,
633
- .pf-v6-c-check__input {
634
- justify-self: start;
635
- }
636
-
637
- label.pf-v6-c-check, .pf-v6-c-check__label,
638
- .pf-v6-c-check__input {
639
- cursor: pointer;
640
- }
641
-
642
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
643
- .pf-v6-c-check__input:disabled,
644
- .pf-v6-c-check__input.pf-m-disabled {
645
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
646
- cursor: not-allowed;
647
- }
648
-
649
- .pf-v6-c-check__label-required {
650
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
651
- font-size: var(--pf-v6-c-check__label-required--FontSize);
652
- color: var(--pf-v6-c-check__label-required--Color);
653
- }
654
-
655
- .pf-v6-c-label-group {
656
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
657
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
658
- --pf-v6-c-label-group--MaxWidth: 100%;
659
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
660
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
661
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
662
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
663
- --pf-v6-c-label-group__main--MaxWidth: 100%;
664
- --pf-v6-c-label-group__main--MinWidth: 0;
665
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
666
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
667
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
668
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
669
- --pf-v6-c-label-group__list--MaxWidth: 100%;
670
- --pf-v6-c-label-group__list--MinWidth: 0;
671
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
672
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
673
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
674
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
675
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
676
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
677
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
678
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
679
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
680
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
681
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
682
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
683
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
684
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
685
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
686
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
687
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
688
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
689
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
690
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
691
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
692
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
693
- }
694
-
695
- .pf-v6-c-label-group {
696
- display: inline-flex;
697
- row-gap: var(--pf-v6-c-label-group--RowGap);
698
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
699
- align-items: center;
700
- max-width: var(--pf-v6-c-label-group--MaxWidth);
701
- }
702
-
703
- .pf-v6-c-label-group.pf-m-category {
704
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
705
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
706
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
707
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
708
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
709
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
710
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
711
- }
712
-
713
- .pf-v6-c-label-group.pf-m-vertical {
714
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
715
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
716
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
717
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
718
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
719
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
720
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
721
- }
722
-
723
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
724
- align-items: flex-start;
725
- }
726
-
727
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
728
- flex-direction: column;
729
- align-items: flex-start;
730
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
731
- }
732
-
733
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
734
- flex-direction: column;
735
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
736
- }
737
-
738
- .pf-v6-c-label-group.pf-m-editable,
739
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
740
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
741
- display: flex;
742
- }
743
-
744
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
745
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
746
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
747
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
748
- flex: 1;
749
- }
750
-
751
- .pf-v6-c-label-group__main {
752
- display: flex;
753
- flex: 1;
754
- flex-wrap: wrap;
755
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
756
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
757
- align-items: baseline;
758
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
759
- }
760
-
761
- .pf-v6-c-label-group__list {
762
- display: inline-flex;
763
- flex-wrap: wrap;
764
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
765
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
766
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
767
- }
768
-
769
- .pf-v6-c-label-group__list-item {
770
- display: inline-flex;
771
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
772
- }
773
-
774
- .pf-v6-c-label-group__label {
775
- overflow: hidden;
776
- text-overflow: ellipsis;
777
- white-space: nowrap;
778
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
779
- }
780
-
781
- .pf-v6-c-label-group__close {
782
- display: flex;
783
- align-self: flex-start;
784
- }
785
-
786
- .pf-v6-c-label-group__close .pf-v6-c-button {
787
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
788
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
789
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
790
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
791
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
792
- }
793
-
794
- .pf-v6-c-label-group__textarea {
795
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
796
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
797
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
798
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
799
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
800
- white-space: nowrap;
801
- resize: none;
802
- border: 0;
803
- -ms-overflow-style: none;
804
- scrollbar-width: none;
805
- }
806
-
807
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
808
- display: none;
809
- }
810
-
811
- .pf-v6-c-text-input-group {
812
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
813
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
814
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
815
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
816
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
817
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
818
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
819
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
820
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
821
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
822
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
823
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
824
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
825
- --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));
826
- --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));
827
- --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));
828
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
829
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
830
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
831
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
832
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
833
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
834
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
835
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
836
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
837
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
838
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
839
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
840
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
841
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
842
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
843
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
844
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
845
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
846
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
847
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
848
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
849
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
850
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
851
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
852
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
853
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
854
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
855
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
856
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
857
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
858
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
859
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
860
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
861
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
862
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
863
- }
864
-
865
- .pf-v6-c-text-input-group {
866
- position: relative;
867
- display: flex;
868
- width: 100%;
869
- font-size: var(--pf-v6-c-text-input-group__FontSize);
870
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
871
- color: var(--pf-v6-c-text-input-group--Color, inherit);
872
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
873
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
874
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
875
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
876
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
877
- }
878
-
879
- .pf-v6-c-text-input-group::before {
880
- position: absolute;
881
- inset: 0;
882
- pointer-events: none;
883
- content: "";
884
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
885
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
886
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
887
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
888
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
889
- }
890
-
891
- .pf-v6-c-text-input-group.pf-m-disabled {
892
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
893
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
894
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
895
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
896
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
897
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
898
- pointer-events: none;
899
- }
900
-
901
- .pf-v6-c-text-input-group.pf-m-plain {
902
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
903
- }
904
-
905
- .pf-v6-c-text-input-group.pf-m-plain::before {
906
- border: 0;
907
- }
908
-
909
- .pf-v6-c-text-input-group.pf-m-success {
910
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
911
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
912
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
913
- }
914
-
915
- .pf-v6-c-text-input-group.pf-m-warning {
916
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
917
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
918
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
919
- }
920
-
921
- .pf-v6-c-text-input-group.pf-m-error {
922
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
923
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
924
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
925
- }
926
-
927
- @media (prefers-reduced-motion: no-preference) {
928
- .pf-v6-c-text-input-group.pf-m-error {
929
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
930
- animation-name: pf-v6-global-danger-jiggle-motion;
931
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
932
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
933
- animation-fill-mode: both;
934
- }
935
- }
936
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
937
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
938
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
939
- animation-name: pf-v6-global-fade-in;
940
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
941
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
942
- }
943
-
944
- .pf-v6-c-text-input-group:hover {
945
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
946
- }
947
-
948
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
949
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
950
- }
951
-
952
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
953
- --pf-v6-c-text-input-group__text--Position: relative;
954
- }
955
-
956
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
957
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
958
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
959
- }
960
-
961
- .pf-v6-c-text-input-group__main {
962
- display: flex;
963
- flex: 1;
964
- flex-wrap: wrap;
965
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
966
- min-width: 0;
967
- }
968
-
969
- .pf-v6-c-text-input-group__main.pf-m-icon {
970
- --pf-v6-c-text-input-group__text--Position: relative;
971
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
972
- display: inline-flex;
973
- align-items: center;
974
- justify-content: center;
975
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
976
- }
977
-
978
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
979
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
980
- }
981
-
982
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
983
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
984
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
985
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
986
- }
987
-
988
- .pf-v6-c-text-input-group__text {
989
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
990
- display: inline-grid;
991
- flex: 1;
992
- grid-template-areas: "text-input";
993
- grid-template-columns: 1fr;
994
- }
995
-
996
- .pf-v6-c-text-input-group__icon {
997
- position: absolute;
998
- inset-block-start: 50%;
999
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1000
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1001
- color: var(--pf-v6-c-text-input-group__icon--Color);
1002
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1003
- }
1004
-
1005
- .pf-v6-c-text-input-group__icon.pf-m-status {
1006
- inset-inline-start: auto;
1007
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1008
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1009
- }
1010
-
1011
- .pf-v6-c-text-input-group__text-input {
1012
- overflow: hidden;
1013
- text-overflow: ellipsis;
1014
- white-space: nowrap;
1015
- position: relative;
1016
- width: 100%;
1017
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1018
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1019
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1020
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1021
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1022
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1023
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1024
- border: 0;
1025
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1026
- }
1027
-
1028
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1029
- grid-area: text-input;
1030
- }
1031
-
1032
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1033
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1034
- }
1035
-
1036
- .pf-v6-c-text-input-group__text-input::placeholder {
1037
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1038
- }
1039
-
1040
- .pf-v6-c-text-input-group__utilities {
1041
- display: flex;
1042
- align-items: center;
1043
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1044
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1045
- }
1046
-
1047
- .pf-v6-c-text-input-group__utilities > * + * {
1048
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1049
- }
1050
-
1051
- .pf-v6-c-text-input-group__group {
1052
- display: flex;
1053
- }
1054
-
1055
- .pf-v6-c-badge {
1056
- --pf-v6-c-badge--BorderColor: transparent;
1057
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1058
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1059
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1060
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1061
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1062
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1063
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1064
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1065
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1066
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1067
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1068
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1069
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1070
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1071
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1072
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1073
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1074
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1075
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1076
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1077
- }
1078
-
1079
- .pf-v6-c-badge {
1080
- position: relative;
1081
- display: inline-block;
1082
- min-width: var(--pf-v6-c-badge--MinWidth);
1083
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1084
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1085
- font-size: var(--pf-v6-c-badge--FontSize);
1086
- font-weight: var(--pf-v6-c-badge--FontWeight);
1087
- color: var(--pf-v6-c-badge--Color);
1088
- text-align: center;
1089
- white-space: nowrap;
1090
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1091
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1092
- }
1093
-
1094
- .pf-v6-c-badge::after {
1095
- position: absolute;
1096
- inset: 0;
1097
- pointer-events: none;
1098
- content: "";
1099
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1100
- border-radius: inherit;
1101
- }
1102
-
1103
- .pf-v6-c-badge.pf-m-read {
1104
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1105
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1106
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1107
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1108
- }
1109
-
1110
- .pf-v6-c-badge.pf-m-unread {
1111
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1112
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1113
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1114
- }
1115
-
1116
- .pf-v6-c-badge.pf-m-disabled {
1117
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1118
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1119
- }
1120
-
1121
- .pf-v6-c-badge.pf-m-disabled::after {
1122
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1123
- }
1124
-
1125
- .pf-v6-c-badge__toggle-icon {
1126
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1127
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1128
- }
1129
-
1130
817
  .pf-v6-c-button {
1131
818
  --pf-v6-c-button--Display: inline-flex;
1132
819
  --pf-v6-c-button--AlignItems: baseline;
@@ -1786,273 +1473,673 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1786
1473
  width: var(--pf-v6-c-button--m-block--Width);
1787
1474
  }
1788
1475
 
1789
- .pf-v6-c-button.pf-m-small {
1790
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
1791
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
1792
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
1793
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
1476
+ .pf-v6-c-button.pf-m-small {
1477
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
1478
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
1479
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
1480
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
1481
+ }
1482
+
1483
+ .pf-v6-c-button.pf-m-display-lg {
1484
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
1485
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
1486
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
1487
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1488
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1489
+ }
1490
+
1491
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1492
+ display: grid;
1493
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1494
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1495
+ transition-property: color;
1496
+ }
1497
+
1498
+ .pf-v6-c-button.pf-m-favorited {
1499
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1500
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1501
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1502
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1503
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1504
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1505
+ }
1506
+
1507
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
1508
+ animation-name: pf-v6-c-button-icon-favorited;
1509
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
1510
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1511
+ }
1512
+
1513
+ .pf-v6-c-button.pf-m-settings {
1514
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
1515
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1516
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1517
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1518
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1519
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1520
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1521
+ }
1522
+
1523
+ .pf-v6-c-button.pf-m-hamburger {
1524
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1525
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1526
+ --pf-v6-c-button__icon--TransitionProperty: scale;
1527
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1528
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1529
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1530
+ }
1531
+
1532
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1533
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1534
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1535
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1536
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1537
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1538
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1539
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1540
+ }
1541
+
1542
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1543
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1544
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1545
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1546
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1547
+ --pf-v6-c-button__icon--ScaleX: 1;
1548
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1549
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1550
+ }
1551
+
1552
+ .pf-v6-c-button.pf-m-circle {
1553
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
1554
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
1555
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
1556
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
1557
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
1558
+ }
1559
+
1560
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
1561
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
1562
+ }
1563
+
1564
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1565
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1566
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1567
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1568
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1569
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1570
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1571
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1572
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1573
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1574
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1575
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1576
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1577
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1578
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1579
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1580
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1581
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1582
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
1583
+ }
1584
+
1585
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1586
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1587
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1588
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1589
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1590
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1591
+ }
1592
+
1593
+ .pf-v6-c-button:active {
1594
+ background-size: 100% 100%;
1595
+ transition-duration: 0s;
1596
+ }
1597
+
1598
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1599
+ pointer-events: none;
1600
+ }
1601
+
1602
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1603
+ color: var(--pf-v6-c-button--disabled--Color);
1604
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1605
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
1606
+ }
1607
+
1608
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1609
+ border-color: transparent;
1610
+ }
1611
+
1612
+ .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 {
1613
+ color: var(--pf-v6-c-button--disabled__icon--Color);
1614
+ }
1615
+
1616
+ .pf-v6-c-button.pf-m-aria-disabled {
1617
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1618
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1619
+ cursor: default;
1620
+ }
1621
+
1622
+ .pf-v6-c-button.pf-m-progress {
1623
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1624
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1625
+ }
1626
+
1627
+ .pf-v6-c-button.pf-m-in-progress {
1628
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1629
+ }
1630
+
1631
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1632
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1633
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1634
+ }
1635
+
1636
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1637
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1638
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1639
+ }
1640
+
1641
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1642
+ opacity: 0;
1643
+ }
1644
+
1645
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1646
+ animation-name: pf-v6-c-button-icon-notify;
1647
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1648
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1649
+ }
1650
+
1651
+ .pf-v6-c-button__icon {
1652
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1653
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1654
+ color: var(--pf-v6-c-button__icon--Color);
1655
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1656
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1657
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1658
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1659
+ rotate: var(--pf-v6-c-button__icon--Rotate);
1660
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1661
+ }
1662
+
1663
+ .pf-v6-c-button__icon.pf-m-start {
1664
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1665
+ }
1666
+
1667
+ .pf-v6-c-button__icon.pf-m-end {
1668
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1669
+ }
1670
+
1671
+ .pf-v6-c-button__icon-favorite,
1672
+ .pf-v6-c-button__icon-favorited {
1673
+ grid-area: 1/1/1/1;
1674
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1675
+ transition-property: opacity;
1676
+ }
1677
+
1678
+ .pf-v6-c-button__icon-favorite {
1679
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1680
+ }
1681
+
1682
+ .pf-v6-c-button__icon-favorited {
1683
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1684
+ }
1685
+
1686
+ .pf-v6-c-button__progress {
1687
+ position: absolute;
1688
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1689
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1690
+ line-height: 1;
1691
+ color: var(--pf-v6-c-button__progress--Color);
1692
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1693
+ }
1694
+
1695
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
1696
+ --pf-v6-c-spinner--Color: currentcolor;
1697
+ }
1698
+
1699
+ .pf-v6-c-button__text {
1700
+ text-decoration: inherit;
1701
+ }
1702
+
1703
+ .pf-v6-c-button__count {
1704
+ display: inline-flex;
1705
+ align-items: center;
1706
+ }
1707
+
1708
+ .pf-v6-c-button--hamburger-icon path {
1709
+ fill: none;
1710
+ stroke: currentcolor;
1711
+ stroke-linecap: round;
1712
+ stroke-linejoin: round;
1713
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1714
+ }
1715
+
1716
+ .pf-v6-c-button--hamburger-icon--top {
1717
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1718
+ }
1719
+
1720
+ .pf-v6-c-button--hamburger-icon--middle {
1721
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1722
+ }
1723
+
1724
+ .pf-v6-c-button--hamburger-icon--arrow {
1725
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1726
+ }
1727
+
1728
+ .pf-v6-c-button--hamburger-icon--bottom {
1729
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1794
1730
  }
1795
1731
 
1796
- .pf-v6-c-button.pf-m-display-lg {
1797
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
1798
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
1799
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
1800
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1801
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1732
+ @keyframes pf-v6-c-button-icon-notify {
1733
+ 33% {
1734
+ transform: rotate(30deg);
1735
+ }
1736
+ 66% {
1737
+ transform: rotate(-60deg);
1738
+ }
1739
+ }
1740
+ @keyframes pf-v6-c-button-icon-favorited {
1741
+ 50% {
1742
+ scale: 1.5;
1743
+ }
1744
+ }
1745
+ .pf-v6-c-check {
1746
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1747
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1748
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1749
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1750
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1751
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1752
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1753
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1754
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1755
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1756
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1757
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1758
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1759
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1802
1760
  }
1803
1761
 
1804
- .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1762
+ .pf-v6-c-check {
1805
1763
  display: grid;
1806
- transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1807
- transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1808
- transition-property: color;
1764
+ grid-template-columns: auto 1fr;
1765
+ grid-gap: var(--pf-v6-c-check--GridGap);
1766
+ accent-color: var(--pf-v6-c-check--AccentColor);
1809
1767
  }
1810
1768
 
1811
- .pf-v6-c-button.pf-m-favorited {
1812
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1813
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1814
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1815
- --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1816
- --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1817
- --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1769
+ .pf-v6-c-check.pf-m-standalone {
1770
+ display: inline-grid;
1771
+ grid-template-columns: auto;
1772
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1818
1773
  }
1819
1774
 
1820
- .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
1821
- animation-name: pf-v6-c-button-icon-favorited;
1822
- animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
1823
- animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1775
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1776
+ align-self: center;
1777
+ transform: none;
1824
1778
  }
1825
1779
 
1826
- .pf-v6-c-button.pf-m-settings {
1827
- --pf-v6-c-button__icon--TransitionProperty: rotate;
1828
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1829
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1830
- --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1831
- --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1832
- --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1833
- --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1780
+ .pf-v6-c-check__input {
1781
+ align-self: start;
1782
+ font-size: var(--pf-v6-c-check__label--FontSize);
1783
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1784
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1834
1785
  }
1835
1786
 
1836
- .pf-v6-c-button.pf-m-hamburger {
1837
- --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1838
- --pf-v6-c-button__icon--TransitionDuration: 0s;
1839
- --pf-v6-c-button__icon--TransitionProperty: scale;
1840
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1841
- --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1842
- --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1787
+ .pf-v6-c-check__label {
1788
+ font-size: var(--pf-v6-c-check__label--FontSize);
1789
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1790
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1791
+ color: var(--pf-v6-c-check__label--Color);
1843
1792
  }
1844
1793
 
1845
- .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1846
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1847
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1848
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1849
- --pf-v6-c-button__icon--TransitionDelay: 0s;
1850
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1851
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1852
- --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1794
+ .pf-v6-c-check__description {
1795
+ grid-column: 2;
1796
+ font-size: var(--pf-v6-c-check__description--FontSize);
1797
+ color: var(--pf-v6-c-check__description--Color);
1853
1798
  }
1854
1799
 
1855
- .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1856
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1857
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1858
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1859
- --pf-v6-c-button__icon--TransitionDelay: 0s;
1860
- --pf-v6-c-button__icon--ScaleX: 1;
1861
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1862
- --pf-v6-c-button--hover__icon--ScaleX: 1;
1800
+ .pf-v6-c-check__body {
1801
+ grid-column: 2;
1863
1802
  }
1864
1803
 
1865
- .pf-v6-c-button.pf-m-circle {
1866
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
1867
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
1868
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
1869
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
1870
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
1804
+ .pf-v6-c-check__label,
1805
+ .pf-v6-c-check__input {
1806
+ justify-self: start;
1871
1807
  }
1872
1808
 
1873
- .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
1874
- scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
1809
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1810
+ .pf-v6-c-check__input {
1811
+ cursor: pointer;
1875
1812
  }
1876
1813
 
1877
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1878
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1879
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1880
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1881
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1882
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1883
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1884
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1885
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1886
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1887
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1888
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1889
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1890
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1891
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1892
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1893
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1894
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1895
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
1814
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1815
+ .pf-v6-c-check__input:disabled,
1816
+ .pf-v6-c-check__input.pf-m-disabled {
1817
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1818
+ cursor: not-allowed;
1896
1819
  }
1897
1820
 
1898
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1899
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1900
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1901
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1902
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1903
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1821
+ .pf-v6-c-check__label-required {
1822
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1823
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1824
+ color: var(--pf-v6-c-check__label-required--Color);
1904
1825
  }
1905
1826
 
1906
- .pf-v6-c-button:active {
1907
- background-size: 100% 100%;
1908
- transition-duration: 0s;
1827
+ .pf-v6-c-divider {
1828
+ --pf-v6-c-divider--Display: flex;
1829
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1830
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1831
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1909
1832
  }
1910
1833
 
1911
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1912
- pointer-events: none;
1834
+ .pf-v6-c-divider {
1835
+ flex-direction: row;
1836
+ width: 100%;
1837
+ height: var(--pf-v6-c-divider--Size);
1838
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1839
+ --pf-v6-hidden-visible--hidden--Display: none;
1840
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1841
+ display: var(--pf-v6-hidden-visible--Display);
1842
+ flex-shrink: 0;
1843
+ align-items: stretch;
1844
+ align-self: stretch;
1845
+ justify-content: center;
1846
+ border: 0;
1913
1847
  }
1914
1848
 
1915
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1916
- color: var(--pf-v6-c-button--disabled--Color);
1917
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1918
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
1849
+ .pf-v6-c-divider.pf-m-hidden {
1850
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1919
1851
  }
1920
1852
 
1921
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1922
- border-color: transparent;
1853
+ @media screen and (min-width: 36rem) {
1854
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1855
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1856
+ }
1857
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1858
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1859
+ }
1923
1860
  }
1924
-
1925
- .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 {
1926
- color: var(--pf-v6-c-button--disabled__icon--Color);
1861
+ @media screen and (min-width: 48rem) {
1862
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1863
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1864
+ }
1865
+ .pf-v6-c-divider.pf-m-visible-on-md {
1866
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1867
+ }
1868
+ }
1869
+ @media screen and (min-width: 62rem) {
1870
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1871
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1872
+ }
1873
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1874
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1875
+ }
1876
+ }
1877
+ @media screen and (min-width: 75rem) {
1878
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1879
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1880
+ }
1881
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1882
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1883
+ }
1884
+ }
1885
+ @media screen and (min-width: 90.625rem) {
1886
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1887
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1888
+ }
1889
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1890
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1891
+ }
1892
+ }
1893
+ .pf-v6-c-divider::before {
1894
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1895
+ content: "";
1896
+ background-color: var(--pf-v6-c-divider--Color);
1897
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1898
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1927
1899
  }
1928
1900
 
1929
- .pf-v6-c-button.pf-m-aria-disabled {
1930
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1931
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1932
- cursor: default;
1901
+ .pf-v6-c-divider.pf-m-horizontal {
1902
+ flex-direction: row;
1903
+ width: 100%;
1904
+ height: var(--pf-v6-c-divider--Size);
1933
1905
  }
1934
1906
 
1935
- .pf-v6-c-button.pf-m-progress {
1936
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1937
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1907
+ .pf-v6-c-divider.pf-m-vertical {
1908
+ flex-direction: column;
1909
+ width: var(--pf-v6-c-divider--Size);
1910
+ height: inherit;
1938
1911
  }
1939
1912
 
1940
- .pf-v6-c-button.pf-m-in-progress {
1941
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1913
+ .pf-v6-c-divider.pf-m-inset-none {
1914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1942
1915
  }
1943
1916
 
1944
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1945
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1946
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1917
+ .pf-v6-c-divider.pf-m-inset-xs {
1918
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1947
1919
  }
1948
1920
 
1949
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1950
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1951
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1921
+ .pf-v6-c-divider.pf-m-inset-sm {
1922
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1952
1923
  }
1953
1924
 
1954
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1955
- opacity: 0;
1925
+ .pf-v6-c-divider.pf-m-inset-md {
1926
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1956
1927
  }
1957
1928
 
1958
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1959
- animation-name: pf-v6-c-button-icon-notify;
1960
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1961
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1929
+ .pf-v6-c-divider.pf-m-inset-lg {
1930
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1962
1931
  }
1963
1932
 
1964
- .pf-v6-c-button__icon {
1965
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1966
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1967
- color: var(--pf-v6-c-button__icon--Color);
1968
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1969
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1970
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1971
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1972
- rotate: var(--pf-v6-c-button__icon--Rotate);
1973
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1933
+ .pf-v6-c-divider.pf-m-inset-xl {
1934
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1974
1935
  }
1975
1936
 
1976
- .pf-v6-c-button__icon.pf-m-start {
1977
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1937
+ .pf-v6-c-divider.pf-m-inset-2xl {
1938
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1978
1939
  }
1979
1940
 
1980
- .pf-v6-c-button__icon.pf-m-end {
1981
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1941
+ .pf-v6-c-divider.pf-m-inset-3xl {
1942
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1982
1943
  }
1983
1944
 
1984
- .pf-v6-c-button__icon-favorite,
1985
- .pf-v6-c-button__icon-favorited {
1986
- grid-area: 1/1/1/1;
1987
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1988
- transition-property: opacity;
1945
+ @media (min-width: 36rem) {
1946
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1947
+ flex-direction: row;
1948
+ width: 100%;
1949
+ height: var(--pf-v6-c-divider--Size);
1950
+ }
1989
1951
  }
1990
-
1991
- .pf-v6-c-button__icon-favorite {
1992
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1952
+ @media (min-width: 36rem) {
1953
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1954
+ flex-direction: column;
1955
+ width: var(--pf-v6-c-divider--Size);
1956
+ height: inherit;
1957
+ }
1993
1958
  }
1994
-
1995
- .pf-v6-c-button__icon-favorited {
1996
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1959
+ @media (min-width: 36rem) {
1960
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1961
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1962
+ }
1963
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1964
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1965
+ }
1966
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1967
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1968
+ }
1969
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1970
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1971
+ }
1972
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1973
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1974
+ }
1975
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1976
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1977
+ }
1978
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1979
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1980
+ }
1981
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1982
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1983
+ }
1997
1984
  }
1998
-
1999
- .pf-v6-c-button__progress {
2000
- position: absolute;
2001
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2002
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2003
- line-height: 1;
2004
- color: var(--pf-v6-c-button__progress--Color);
2005
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1985
+ @media (min-width: 48rem) {
1986
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1987
+ flex-direction: row;
1988
+ width: 100%;
1989
+ height: var(--pf-v6-c-divider--Size);
1990
+ }
2006
1991
  }
2007
-
2008
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2009
- --pf-v6-c-spinner--Color: currentcolor;
1992
+ @media (min-width: 48rem) {
1993
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1994
+ flex-direction: column;
1995
+ width: var(--pf-v6-c-divider--Size);
1996
+ height: inherit;
1997
+ }
2010
1998
  }
2011
-
2012
- .pf-v6-c-button__text {
2013
- text-decoration: inherit;
1999
+ @media (min-width: 48rem) {
2000
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2001
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2002
+ }
2003
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2004
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2005
+ }
2006
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2007
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2008
+ }
2009
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2010
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2011
+ }
2012
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2013
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2014
+ }
2015
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2016
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2017
+ }
2018
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2019
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2020
+ }
2021
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2022
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2023
+ }
2014
2024
  }
2015
-
2016
- .pf-v6-c-button__count {
2017
- display: inline-flex;
2018
- align-items: center;
2025
+ @media (min-width: 62rem) {
2026
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2027
+ flex-direction: row;
2028
+ width: 100%;
2029
+ height: var(--pf-v6-c-divider--Size);
2030
+ }
2019
2031
  }
2020
-
2021
- .pf-v6-c-button--hamburger-icon path {
2022
- fill: none;
2023
- stroke: currentcolor;
2024
- stroke-linecap: round;
2025
- stroke-linejoin: round;
2026
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2032
+ @media (min-width: 62rem) {
2033
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2034
+ flex-direction: column;
2035
+ width: var(--pf-v6-c-divider--Size);
2036
+ height: inherit;
2037
+ }
2027
2038
  }
2028
-
2029
- .pf-v6-c-button--hamburger-icon--top {
2030
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2039
+ @media (min-width: 62rem) {
2040
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2041
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2042
+ }
2043
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2044
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2045
+ }
2046
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2047
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2048
+ }
2049
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2050
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2051
+ }
2052
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2053
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2054
+ }
2055
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2056
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2057
+ }
2058
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2059
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2060
+ }
2061
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2062
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2063
+ }
2031
2064
  }
2032
-
2033
- .pf-v6-c-button--hamburger-icon--middle {
2034
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2065
+ @media (min-width: 75rem) {
2066
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2067
+ flex-direction: row;
2068
+ width: 100%;
2069
+ height: var(--pf-v6-c-divider--Size);
2070
+ }
2035
2071
  }
2036
-
2037
- .pf-v6-c-button--hamburger-icon--arrow {
2038
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2072
+ @media (min-width: 75rem) {
2073
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2074
+ flex-direction: column;
2075
+ width: var(--pf-v6-c-divider--Size);
2076
+ height: inherit;
2077
+ }
2039
2078
  }
2040
-
2041
- .pf-v6-c-button--hamburger-icon--bottom {
2042
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2079
+ @media (min-width: 75rem) {
2080
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2081
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2082
+ }
2083
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2084
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2085
+ }
2086
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2087
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2088
+ }
2089
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2090
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2091
+ }
2092
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2093
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2094
+ }
2095
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2096
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2097
+ }
2098
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2099
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2100
+ }
2101
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2102
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2103
+ }
2043
2104
  }
2044
-
2045
- @keyframes pf-v6-c-button-icon-notify {
2046
- 33% {
2047
- transform: rotate(30deg);
2105
+ @media (min-width: 90.625rem) {
2106
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2107
+ flex-direction: row;
2108
+ width: 100%;
2109
+ height: var(--pf-v6-c-divider--Size);
2048
2110
  }
2049
- 66% {
2050
- transform: rotate(-60deg);
2111
+ }
2112
+ @media (min-width: 90.625rem) {
2113
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2114
+ flex-direction: column;
2115
+ width: var(--pf-v6-c-divider--Size);
2116
+ height: inherit;
2051
2117
  }
2052
2118
  }
2053
- @keyframes pf-v6-c-button-icon-favorited {
2054
- 50% {
2055
- scale: 1.5;
2119
+ @media (min-width: 90.625rem) {
2120
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2121
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2122
+ }
2123
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2124
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2125
+ }
2126
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2127
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2128
+ }
2129
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2130
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2131
+ }
2132
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2133
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2134
+ }
2135
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2136
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2137
+ }
2138
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2139
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2140
+ }
2141
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2142
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2056
2143
  }
2057
2144
  }
2058
2145
  .pf-v6-c-label {
@@ -2598,324 +2685,237 @@ input.pf-v6-c-label__content {
2598
2685
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2599
2686
  }
2600
2687
 
2601
- .pf-v6-c-divider {
2602
- --pf-v6-c-divider--Display: flex;
2603
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2604
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2605
- --pf-v6-c-divider--before--FlexBasis: 100%;
2688
+ .pf-v6-c-label-group {
2689
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2690
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2691
+ --pf-v6-c-label-group--MaxWidth: 100%;
2692
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2693
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2694
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2695
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2696
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2697
+ --pf-v6-c-label-group__main--MinWidth: 0;
2698
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2699
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2700
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2701
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2702
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2703
+ --pf-v6-c-label-group__list--MinWidth: 0;
2704
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2705
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2706
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2707
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2708
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2709
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2710
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2711
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2712
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2713
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2714
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2715
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2716
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2717
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2718
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2719
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2720
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2721
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2722
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2723
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2724
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2725
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2606
2726
  }
2607
2727
 
2608
- .pf-v6-c-divider {
2609
- flex-direction: row;
2610
- width: 100%;
2611
- height: var(--pf-v6-c-divider--Size);
2612
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2613
- --pf-v6-hidden-visible--hidden--Display: none;
2614
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2615
- display: var(--pf-v6-hidden-visible--Display);
2616
- flex-shrink: 0;
2617
- align-items: stretch;
2618
- align-self: stretch;
2619
- justify-content: center;
2620
- border: 0;
2728
+ .pf-v6-c-label-group {
2729
+ display: inline-flex;
2730
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2731
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2732
+ align-items: center;
2733
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2621
2734
  }
2622
2735
 
2623
- .pf-v6-c-divider.pf-m-hidden {
2624
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2736
+ .pf-v6-c-label-group.pf-m-category {
2737
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2738
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2739
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2740
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2741
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2742
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2743
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2625
2744
  }
2626
2745
 
2627
- @media screen and (min-width: 36rem) {
2628
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2629
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2630
- }
2631
- .pf-v6-c-divider.pf-m-visible-on-sm {
2632
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2633
- }
2746
+ .pf-v6-c-label-group.pf-m-vertical {
2747
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2748
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2749
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2750
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2751
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2752
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2753
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2634
2754
  }
2635
- @media screen and (min-width: 48rem) {
2636
- .pf-v6-c-divider.pf-m-hidden-on-md {
2637
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2638
- }
2639
- .pf-v6-c-divider.pf-m-visible-on-md {
2640
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2641
- }
2755
+
2756
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2757
+ align-items: flex-start;
2642
2758
  }
2643
- @media screen and (min-width: 62rem) {
2644
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2645
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2646
- }
2647
- .pf-v6-c-divider.pf-m-visible-on-lg {
2648
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2649
- }
2759
+
2760
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2761
+ flex-direction: column;
2762
+ align-items: flex-start;
2763
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2650
2764
  }
2651
- @media screen and (min-width: 75rem) {
2652
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2653
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2654
- }
2655
- .pf-v6-c-divider.pf-m-visible-on-xl {
2656
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2657
- }
2765
+
2766
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2767
+ flex-direction: column;
2768
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2658
2769
  }
2659
- @media screen and (min-width: 90.625rem) {
2660
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2661
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2662
- }
2663
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2664
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2665
- }
2770
+
2771
+ .pf-v6-c-label-group.pf-m-editable,
2772
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2773
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2774
+ display: flex;
2666
2775
  }
2667
- .pf-v6-c-divider::before {
2668
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2669
- content: "";
2670
- background-color: var(--pf-v6-c-divider--Color);
2671
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2672
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2776
+
2777
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2778
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2779
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2780
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2781
+ flex: 1;
2673
2782
  }
2674
2783
 
2675
- .pf-v6-c-divider.pf-m-horizontal {
2676
- flex-direction: row;
2677
- width: 100%;
2678
- height: var(--pf-v6-c-divider--Size);
2784
+ .pf-v6-c-label-group__main {
2785
+ display: flex;
2786
+ flex: 1;
2787
+ flex-wrap: wrap;
2788
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2789
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2790
+ align-items: baseline;
2791
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2679
2792
  }
2680
2793
 
2681
- .pf-v6-c-divider.pf-m-vertical {
2682
- flex-direction: column;
2683
- width: var(--pf-v6-c-divider--Size);
2684
- height: inherit;
2794
+ .pf-v6-c-label-group__list {
2795
+ display: inline-flex;
2796
+ flex-wrap: wrap;
2797
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2798
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2799
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2685
2800
  }
2686
2801
 
2687
- .pf-v6-c-divider.pf-m-inset-none {
2688
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2802
+ .pf-v6-c-label-group__list-item {
2803
+ display: inline-flex;
2804
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2805
+ }
2806
+
2807
+ .pf-v6-c-label-group__label {
2808
+ overflow: hidden;
2809
+ text-overflow: ellipsis;
2810
+ white-space: nowrap;
2811
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2812
+ }
2813
+
2814
+ .pf-v6-c-label-group__close {
2815
+ display: flex;
2816
+ align-self: flex-start;
2817
+ }
2818
+
2819
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2820
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2821
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2822
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2823
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2824
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2825
+ }
2826
+
2827
+ .pf-v6-c-label-group__textarea {
2828
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2829
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2830
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2831
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2832
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2833
+ white-space: nowrap;
2834
+ resize: none;
2835
+ border: 0;
2836
+ -ms-overflow-style: none;
2837
+ scrollbar-width: none;
2838
+ }
2839
+
2840
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2841
+ display: none;
2842
+ }
2843
+
2844
+ .pf-v6-c-badge {
2845
+ --pf-v6-c-badge--BorderColor: transparent;
2846
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2847
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2848
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2849
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2850
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2851
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2852
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2853
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2854
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2855
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2856
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2857
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2858
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2859
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2860
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2861
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2862
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2863
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2864
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2865
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2689
2866
  }
2690
2867
 
2691
- .pf-v6-c-divider.pf-m-inset-xs {
2692
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2868
+ .pf-v6-c-badge {
2869
+ position: relative;
2870
+ display: inline-block;
2871
+ min-width: var(--pf-v6-c-badge--MinWidth);
2872
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2873
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2874
+ font-size: var(--pf-v6-c-badge--FontSize);
2875
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2876
+ color: var(--pf-v6-c-badge--Color);
2877
+ text-align: center;
2878
+ white-space: nowrap;
2879
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2880
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2693
2881
  }
2694
2882
 
2695
- .pf-v6-c-divider.pf-m-inset-sm {
2696
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2883
+ .pf-v6-c-badge::after {
2884
+ position: absolute;
2885
+ inset: 0;
2886
+ pointer-events: none;
2887
+ content: "";
2888
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2889
+ border-radius: inherit;
2697
2890
  }
2698
2891
 
2699
- .pf-v6-c-divider.pf-m-inset-md {
2700
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2892
+ .pf-v6-c-badge.pf-m-read {
2893
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2894
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2895
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2896
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2701
2897
  }
2702
2898
 
2703
- .pf-v6-c-divider.pf-m-inset-lg {
2704
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2899
+ .pf-v6-c-badge.pf-m-unread {
2900
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2901
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2902
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2705
2903
  }
2706
2904
 
2707
- .pf-v6-c-divider.pf-m-inset-xl {
2708
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2905
+ .pf-v6-c-badge.pf-m-disabled {
2906
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2907
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2709
2908
  }
2710
2909
 
2711
- .pf-v6-c-divider.pf-m-inset-2xl {
2712
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2910
+ .pf-v6-c-badge.pf-m-disabled::after {
2911
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2713
2912
  }
2714
2913
 
2715
- .pf-v6-c-divider.pf-m-inset-3xl {
2716
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2914
+ .pf-v6-c-badge__toggle-icon {
2915
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2916
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2717
2917
  }
2718
2918
 
2719
- @media (min-width: 36rem) {
2720
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2721
- flex-direction: row;
2722
- width: 100%;
2723
- height: var(--pf-v6-c-divider--Size);
2724
- }
2725
- }
2726
- @media (min-width: 36rem) {
2727
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2728
- flex-direction: column;
2729
- width: var(--pf-v6-c-divider--Size);
2730
- height: inherit;
2731
- }
2732
- }
2733
- @media (min-width: 36rem) {
2734
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2735
- --pf-v6-c-divider--before--FlexBasis: 100%;
2736
- }
2737
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2738
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2739
- }
2740
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2741
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2742
- }
2743
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2744
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2745
- }
2746
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2747
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2748
- }
2749
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2750
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2751
- }
2752
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2753
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2754
- }
2755
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2756
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2757
- }
2758
- }
2759
- @media (min-width: 48rem) {
2760
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2761
- flex-direction: row;
2762
- width: 100%;
2763
- height: var(--pf-v6-c-divider--Size);
2764
- }
2765
- }
2766
- @media (min-width: 48rem) {
2767
- .pf-v6-c-divider.pf-m-vertical-on-md {
2768
- flex-direction: column;
2769
- width: var(--pf-v6-c-divider--Size);
2770
- height: inherit;
2771
- }
2772
- }
2773
- @media (min-width: 48rem) {
2774
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2775
- --pf-v6-c-divider--before--FlexBasis: 100%;
2776
- }
2777
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2778
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2779
- }
2780
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2781
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2782
- }
2783
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2784
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2785
- }
2786
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2787
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2788
- }
2789
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2790
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2791
- }
2792
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2793
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2794
- }
2795
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2796
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2797
- }
2798
- }
2799
- @media (min-width: 62rem) {
2800
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2801
- flex-direction: row;
2802
- width: 100%;
2803
- height: var(--pf-v6-c-divider--Size);
2804
- }
2805
- }
2806
- @media (min-width: 62rem) {
2807
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2808
- flex-direction: column;
2809
- width: var(--pf-v6-c-divider--Size);
2810
- height: inherit;
2811
- }
2812
- }
2813
- @media (min-width: 62rem) {
2814
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2815
- --pf-v6-c-divider--before--FlexBasis: 100%;
2816
- }
2817
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2818
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2819
- }
2820
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2821
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2822
- }
2823
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2824
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2825
- }
2826
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2827
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2828
- }
2829
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2830
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2831
- }
2832
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2833
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2834
- }
2835
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2836
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2837
- }
2838
- }
2839
- @media (min-width: 75rem) {
2840
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2841
- flex-direction: row;
2842
- width: 100%;
2843
- height: var(--pf-v6-c-divider--Size);
2844
- }
2845
- }
2846
- @media (min-width: 75rem) {
2847
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2848
- flex-direction: column;
2849
- width: var(--pf-v6-c-divider--Size);
2850
- height: inherit;
2851
- }
2852
- }
2853
- @media (min-width: 75rem) {
2854
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2855
- --pf-v6-c-divider--before--FlexBasis: 100%;
2856
- }
2857
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2858
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2859
- }
2860
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2861
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2862
- }
2863
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2864
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2865
- }
2866
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2867
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2868
- }
2869
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2870
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2871
- }
2872
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2873
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2874
- }
2875
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2876
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2877
- }
2878
- }
2879
- @media (min-width: 90.625rem) {
2880
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2881
- flex-direction: row;
2882
- width: 100%;
2883
- height: var(--pf-v6-c-divider--Size);
2884
- }
2885
- }
2886
- @media (min-width: 90.625rem) {
2887
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2888
- flex-direction: column;
2889
- width: var(--pf-v6-c-divider--Size);
2890
- height: inherit;
2891
- }
2892
- }
2893
- @media (min-width: 90.625rem) {
2894
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2895
- --pf-v6-c-divider--before--FlexBasis: 100%;
2896
- }
2897
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2898
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2899
- }
2900
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2901
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2902
- }
2903
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2904
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2905
- }
2906
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2907
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2908
- }
2909
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2910
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2911
- }
2912
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2913
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2914
- }
2915
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2916
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2917
- }
2918
- }
2919
2919
  .pf-v6-c-menu {
2920
2920
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2921
2921
  --pf-v6-c-menu--Width: auto;