@charcoal-ui/react 5.8.0 → 5.9.0-beta.0

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 (34) hide show
  1. package/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts +1 -0
  2. package/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts.map +1 -1
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +570 -586
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/layered.css +570 -586
  10. package/dist/layered.css.map +1 -1
  11. package/package.json +5 -6
  12. package/src/components/Button/index.css +105 -120
  13. package/src/components/Checkbox/index.css +7 -7
  14. package/src/components/Clickable/index.css +11 -11
  15. package/src/components/DropdownSelector/DropdownMenuItem/index.css +4 -0
  16. package/src/components/DropdownSelector/DropdownMenuItem/index.tsx +12 -3
  17. package/src/components/DropdownSelector/index.css +33 -33
  18. package/src/components/FieldLabel/index.css +6 -6
  19. package/src/components/HintText/index.css +5 -7
  20. package/src/components/IconButton/index.css +87 -89
  21. package/src/components/LoadingSpinner/index.css +11 -9
  22. package/src/components/Modal/index.css +5 -5
  23. package/src/components/MultiSelect/__snapshots__/index.css.snap +3 -3
  24. package/src/components/MultiSelect/index.css +74 -82
  25. package/src/components/Pagination/__snapshots__/index.css.snap +15 -10
  26. package/src/components/Pagination/index.css +79 -80
  27. package/src/components/Radio/index.css +4 -4
  28. package/src/components/SegmentedControl/index.css +23 -25
  29. package/src/components/Switch/index.css +7 -7
  30. package/src/components/TagItem/__snapshots__/index.css.snap +2 -0
  31. package/src/components/TagItem/index.css +80 -71
  32. package/src/components/TextArea/index.css +24 -23
  33. package/src/components/TextEllipsis/index.css +10 -10
  34. package/src/components/TextField/index.css +19 -21
package/dist/layered.css CHANGED
@@ -31,127 +31,112 @@
31
31
  0.2s background-color,
32
32
  0.2s box-shadow;
33
33
  height: 40px;
34
- }
35
-
36
- .charcoal-button:disabled,
37
- .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
38
- cursor: default;
39
- opacity: 0.32;
40
- }
41
-
42
- .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
43
- .charcoal-button[aria-disabled='false']:focus-visible {
44
- outline: none;
45
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
46
- }
47
34
 
48
- .charcoal-button:not(:disabled):not([aria-disabled]):hover,
49
- .charcoal-button[aria-disabled='false']:hover {
50
- color: var(--charcoal-text2-hover);
51
- background-color: var(--charcoal-surface3-hover);
52
- }
53
-
54
- .charcoal-button:not(:disabled):not([aria-disabled]):active,
55
- .charcoal-button[aria-disabled='false']:active,
56
- .charcoal-button[data-active='true'] {
57
- color: var(--charcoal-text2-press);
58
- background-color: var(--charcoal-surface3-press);
59
- }
60
-
61
- .charcoal-button[data-variant='Primary'] {
62
- color: var(--charcoal-text5);
63
- background-color: var(--charcoal-brand);
64
- }
65
-
66
- .charcoal-button[data-variant='Primary']:hover:not(:disabled):not(
67
- [aria-disabled]
68
- ),
69
- .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
70
- color: var(--charcoal-text5-hover);
71
- background-color: var(--charcoal-brand-hover);
72
- }
73
-
74
- .charcoal-button[data-variant='Primary']:active:not(:disabled):not(
75
- [aria-disabled]
76
- ),
77
- .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
78
- .charcoal-button[data-variant='Primary'][data-active='true'] {
79
- color: var(--charcoal-text5-press);
80
- background-color: var(--charcoal-brand-press);
81
- }
82
-
83
- .charcoal-button[data-variant='Overlay'] {
84
- color: var(--charcoal-text5);
85
- background-color: var(--charcoal-surface4);
86
- }
35
+ &:disabled,
36
+ &[aria-disabled]:not([aria-disabled='false']) {
37
+ cursor: default;
38
+ opacity: 0.32;
39
+ }
87
40
 
88
- .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not(
89
- [aria-disabled]
90
- ),
91
- .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
92
- color: var(--charcoal-text5-hover);
93
- background-color: var(--charcoal-surface4-hover);
94
- }
41
+ &:not(:disabled):not([aria-disabled]):focus-visible,
42
+ &[aria-disabled='false']:focus-visible {
43
+ outline: none;
44
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
45
+ }
95
46
 
96
- .charcoal-button[data-variant='Overlay']:active:not(:disabled):not(
97
- [aria-disabled]
98
- ),
99
- .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
100
- .charcoal-button[data-variant='Overlay'][data-active='true'] {
101
- color: var(--charcoal-text5-press);
102
- background-color: var(--charcoal-surface4-press);
103
- }
47
+ &:not(:disabled):not([aria-disabled]):hover,
48
+ &[aria-disabled='false']:hover {
49
+ color: var(--charcoal-text2-hover);
50
+ background-color: var(--charcoal-surface3-hover);
51
+ }
104
52
 
105
- .charcoal-button[data-variant='Navigation'] {
106
- color: var(--charcoal-text5);
107
- background-color: var(--charcoal-surface6);
108
- }
53
+ &:not(:disabled):not([aria-disabled]):active,
54
+ &[aria-disabled='false']:active,
55
+ &[data-active='true'] {
56
+ color: var(--charcoal-text2-press);
57
+ background-color: var(--charcoal-surface3-press);
58
+ }
109
59
 
110
- .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not(
111
- [aria-disabled]
112
- ),
113
- .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
114
- color: var(--charcoal-text5-hover);
115
- background-color: var(--charcoal-surface6-hover);
116
- }
60
+ &[data-variant='Primary'] {
61
+ color: var(--charcoal-text5);
62
+ background-color: var(--charcoal-brand);
63
+
64
+ &:hover:not(:disabled):not([aria-disabled]),
65
+ &:hover[aria-disabled='false'] {
66
+ color: var(--charcoal-text5-hover);
67
+ background-color: var(--charcoal-brand-hover);
68
+ }
69
+
70
+ &:active:not(:disabled):not([aria-disabled]),
71
+ &:active[aria-disabled='false'],
72
+ &[data-active='true'] {
73
+ color: var(--charcoal-text5-press);
74
+ background-color: var(--charcoal-brand-press);
75
+ }
76
+ }
117
77
 
118
- .charcoal-button[data-variant='Navigation']:active:not(:disabled):not(
119
- [aria-disabled]
120
- ),
121
- .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
122
- .charcoal-button[data-variant='Navigation'][data-active='true'] {
123
- color: var(--charcoal-text5-press);
124
- background-color: var(--charcoal-surface6-press);
125
- }
78
+ &[data-variant='Overlay'] {
79
+ color: var(--charcoal-text5);
80
+ background-color: var(--charcoal-surface4);
81
+
82
+ &:hover:not(:disabled):not([aria-disabled]),
83
+ &:hover[aria-disabled='false'] {
84
+ color: var(--charcoal-text5-hover);
85
+ background-color: var(--charcoal-surface4-hover);
86
+ }
87
+
88
+ &:active:not(:disabled):not([aria-disabled]),
89
+ &:active[aria-disabled='false'],
90
+ &[data-active='true'] {
91
+ color: var(--charcoal-text5-press);
92
+ background-color: var(--charcoal-surface4-press);
93
+ }
94
+ }
126
95
 
127
- .charcoal-button[data-variant='Danger'] {
128
- color: var(--charcoal-text5);
129
- background-color: var(--charcoal-assertive);
130
- }
131
- .charcoal-button[data-variant='Danger']:hover:not(:disabled):not(
132
- [aria-disabled]
133
- ),
134
- .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
135
- color: var(--charcoal-text5-hover);
136
- background-color: var(--charcoal-assertive-hover);
137
- }
96
+ &[data-variant='Navigation'] {
97
+ color: var(--charcoal-text5);
98
+ background-color: var(--charcoal-surface6);
99
+
100
+ &:hover:not(:disabled):not([aria-disabled]),
101
+ &:hover[aria-disabled='false'] {
102
+ color: var(--charcoal-text5-hover);
103
+ background-color: var(--charcoal-surface6-hover);
104
+ }
105
+
106
+ &:active:not(:disabled):not([aria-disabled]),
107
+ &:active[aria-disabled='false'],
108
+ &[data-active='true'] {
109
+ color: var(--charcoal-text5-press);
110
+ background-color: var(--charcoal-surface6-press);
111
+ }
112
+ }
138
113
 
139
- .charcoal-button[data-variant='Danger']:active:not(:disabled):not(
140
- [aria-disabled]
141
- ),
142
- .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
143
- .charcoal-button[data-variant='Danger'][data-active='true'] {
144
- color: var(--charcoal-text5-press);
145
- background-color: var(--charcoal-assertive-press);
146
- }
114
+ &[data-variant='Danger'] {
115
+ color: var(--charcoal-text5);
116
+ background-color: var(--charcoal-assertive);
117
+
118
+ &:hover:not(:disabled):not([aria-disabled]),
119
+ &:hover[aria-disabled='false'] {
120
+ color: var(--charcoal-text5-hover);
121
+ background-color: var(--charcoal-assertive-hover);
122
+ }
123
+
124
+ &:active:not(:disabled):not([aria-disabled]),
125
+ &:active[aria-disabled='false'],
126
+ &[data-active='true'] {
127
+ color: var(--charcoal-text5-press);
128
+ background-color: var(--charcoal-assertive-press);
129
+ }
130
+ }
147
131
 
148
- .charcoal-button[data-size='S'] {
149
- padding: 0 16px;
150
- height: 32px;
151
- }
132
+ &[data-size='S'] {
133
+ padding: 0 16px;
134
+ height: 32px;
135
+ }
152
136
 
153
- .charcoal-button[data-full-width='true'] {
154
- width: 100%;
137
+ &[data-full-width='true'] {
138
+ width: 100%;
139
+ }
155
140
  }
156
141
 
157
142
  .charcoal-clickable {
@@ -180,20 +165,20 @@
180
165
 
181
166
  /* Remove the inheritance of text transform in Firefox. */
182
167
  text-transform: none;
183
- }
184
168
 
185
- .charcoal-clickable:disabled,
186
- .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
187
- cursor: default;
188
- }
169
+ &:disabled,
170
+ &[aria-disabled]:not([aria-disabled='false']) {
171
+ cursor: default;
172
+ }
189
173
 
190
- .charcoal-clickable:focus {
191
- outline: none;
192
- }
174
+ &:focus {
175
+ outline: none;
176
+ }
193
177
 
194
- .charcoal-clickable::-moz-focus-inner {
195
- border-style: none;
196
- padding: 0;
178
+ &::-moz-focus-inner {
179
+ border-style: none;
180
+ padding: 0;
181
+ }
197
182
  }
198
183
 
199
184
  .charcoal-icon-button {
@@ -221,100 +206,98 @@
221
206
  transition:
222
207
  0.2s background-color,
223
208
  0.2s box-shadow;
224
- }
225
209
 
226
- .charcoal-icon-button:disabled,
227
- .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
228
- cursor: default;
229
- opacity: 0.32;
230
- }
231
- .charcoal-icon-button:focus {
232
- outline: none;
233
- }
234
- .charcoal-icon-button::-moz-focus-inner {
235
- border-style: none;
236
- padding: 0;
237
- }
210
+ &:disabled,
211
+ &[aria-disabled]:not([aria-disabled='false']) {
212
+ cursor: default;
213
+ opacity: 0.32;
214
+ }
238
215
 
239
- .charcoal-icon-button[data-size='XS'] {
240
- width: 20px;
241
- height: 20px;
242
- }
243
- .charcoal-icon-button[data-size='S'] {
244
- width: 32px;
245
- height: 32px;
246
- }
247
- .charcoal-icon-button[data-size='M'] {
248
- width: 40px;
249
- height: 40px;
250
- }
216
+ &:focus {
217
+ outline: none;
218
+ }
251
219
 
252
- .charcoal-icon-button[data-variant='Default'] {
253
- color: var(--charcoal-text3);
254
- background-color: var(--charcoal-transparent);
255
- }
256
- .charcoal-icon-button[data-variant='Default'][data-active='true']:not(
257
- :disabled
258
- ):not([aria-disabled]),
259
- .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
260
- color: var(--charcoal-text3-press);
261
- background-color: var(--charcoal-transparent-press);
262
- }
263
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
264
- :disabled
265
- ):not([aria-disabled]):hover,
266
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
267
- color: var(--charcoal-text3-hover);
268
- background-color: var(--charcoal-transparent-hover);
269
- }
270
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
271
- :disabled
272
- ):not([aria-disabled]):active,
273
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
274
- color: var(--charcoal-text3-press);
275
- background-color: var(--charcoal-transparent-press);
276
- }
220
+ &::-moz-focus-inner {
221
+ border-style: none;
222
+ padding: 0;
223
+ }
277
224
 
278
- .charcoal-icon-button[data-variant='Overlay'] {
279
- color: var(--charcoal-text5);
280
- background-color: var(--charcoal-surface4);
281
- }
282
- .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(
283
- :disabled
284
- ):not([aria-disabled]),
285
- .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
286
- color: var(--charcoal-text5-press);
287
- background-color: var(--charcoal-surface4-press);
288
- }
289
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
290
- :disabled
291
- ):not([aria-disabled]):hover,
292
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
293
- color: var(--charcoal-text5-hover);
294
- background-color: var(--charcoal-surface4-hover);
295
- }
296
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
297
- :disabled
298
- ):not([aria-disabled]):active,
299
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
300
- color: var(--charcoal-text5-press);
301
- background-color: var(--charcoal-surface4-press);
302
- }
225
+ &[data-size='XS'] {
226
+ width: 20px;
227
+ height: 20px;
228
+ }
303
229
 
304
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
305
- .charcoal-icon-button[aria-disabled='false']:focus {
306
- outline: none;
307
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
308
- }
309
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
310
- .charcoal-icon-button[aria-disabled='false']:focus-visible {
311
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
312
- }
313
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(
314
- :focus-visible
315
- ),
316
- .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
317
- box-shadow: none;
230
+ &[data-size='S'] {
231
+ width: 32px;
232
+ height: 32px;
233
+ }
234
+
235
+ &[data-size='M'] {
236
+ width: 40px;
237
+ height: 40px;
238
+ }
239
+
240
+ &[data-variant='Default'] {
241
+ color: var(--charcoal-text3);
242
+ background-color: var(--charcoal-transparent);
243
+
244
+ &[data-active='true']:not(:disabled):not([aria-disabled]),
245
+ &[data-active='true'][aria-disabled='false'] {
246
+ color: var(--charcoal-text3-press);
247
+ background-color: var(--charcoal-transparent-press);
248
+ }
249
+
250
+ &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
251
+ &[data-active='false'][aria-disabled='false']:hover {
252
+ color: var(--charcoal-text3-hover);
253
+ background-color: var(--charcoal-transparent-hover);
254
+ }
255
+
256
+ &[data-active='false']:not(:disabled):not([aria-disabled]):active,
257
+ &[data-active='false'][aria-disabled='false']:active {
258
+ color: var(--charcoal-text3-press);
259
+ background-color: var(--charcoal-transparent-press);
260
+ }
261
+ }
262
+
263
+ &[data-variant='Overlay'] {
264
+ color: var(--charcoal-text5);
265
+ background-color: var(--charcoal-surface4);
266
+
267
+ &[data-active='true']:not(:disabled):not([aria-disabled]),
268
+ &[data-active='true'][aria-disabled='false'] {
269
+ color: var(--charcoal-text5-press);
270
+ background-color: var(--charcoal-surface4-press);
271
+ }
272
+
273
+ &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
274
+ &[data-active='false'][aria-disabled='false']:hover {
275
+ color: var(--charcoal-text5-hover);
276
+ background-color: var(--charcoal-surface4-hover);
277
+ }
278
+
279
+ &[data-active='false']:not(:disabled):not([aria-disabled]):active,
280
+ &[data-active='false'][aria-disabled='false']:active {
281
+ color: var(--charcoal-text5-press);
282
+ background-color: var(--charcoal-surface4-press);
283
+ }
284
+ }
285
+
286
+ &:not(:disabled):not([aria-disabled]):focus,
287
+ &[aria-disabled='false']:focus {
288
+ outline: none;
289
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
290
+ }
291
+
292
+ &:not(:disabled):not([aria-disabled]):focus-visible,
293
+ &[aria-disabled='false']:focus-visible {
294
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
295
+ }
296
+
297
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
298
+ &[aria-disabled='false']:focus:not(:focus-visible) {
299
+ box-shadow: none;
300
+ }
318
301
  }
319
302
 
320
303
  .charcoal-radio__label {
@@ -323,11 +306,11 @@
323
306
  grid-gap: 4px;
324
307
  align-items: center;
325
308
  cursor: pointer;
326
- }
327
309
 
328
- .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
329
- opacity: 0.32;
330
- cursor: default;
310
+ &[aria-disabled]:not([aria-disabled='false']) {
311
+ opacity: 0.32;
312
+ cursor: default;
313
+ }
331
314
  }
332
315
 
333
316
  .charcoal-radio__label_div {
@@ -436,12 +419,12 @@
436
419
  position: relative;
437
420
  cursor: pointer;
438
421
  gap: 4px;
439
- }
440
422
 
441
- .charcoal-multi-select:disabled,
442
- .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
443
- opacity: 0.32;
444
- cursor: default;
423
+ &:disabled,
424
+ &[aria-disabled]:not([aria-disabled='false']) {
425
+ opacity: 0.32;
426
+ cursor: default;
427
+ }
445
428
  }
446
429
 
447
430
  .charcoal-multi-select-label {
@@ -450,22 +433,22 @@
450
433
  font-size: 14px;
451
434
  line-height: 22px;
452
435
  color: var(--charcoal-text2);
453
- }
454
436
 
455
- .charcoal-multi-select-label::before {
456
- display: block;
457
- width: 0;
458
- height: 0;
459
- content: '';
460
- margin-top: -4px;
461
- }
437
+ &::before {
438
+ display: block;
439
+ width: 0;
440
+ height: 0;
441
+ content: '';
442
+ margin-top: -4px;
443
+ }
462
444
 
463
- .charcoal-multi-select-label::after {
464
- display: block;
465
- width: 0;
466
- height: 0;
467
- content: '';
468
- margin-bottom: -4px;
445
+ &::after {
446
+ display: block;
447
+ width: 0;
448
+ height: 0;
449
+ content: '';
450
+ margin-bottom: -4px;
451
+ }
469
452
  }
470
453
 
471
454
  .charcoal-multi-select-input[type='checkbox'] {
@@ -479,65 +462,57 @@
479
462
  transition:
480
463
  0.2s background-color,
481
464
  0.2s box-shadow;
482
- }
483
465
 
484
- .charcoal-multi-select-input[type='checkbox']:checked {
485
- background-color: var(--charcoal-brand);
486
- }
466
+ &:checked {
467
+ background-color: var(--charcoal-brand);
468
+ }
487
469
 
488
- .charcoal-multi-select-input[type='checkbox']:focus {
489
- outline: none;
490
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
491
- }
470
+ &:focus {
471
+ outline: none;
472
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
473
+ }
492
474
 
493
- .charcoal-multi-select-input[type='checkbox']:focus-visible {
494
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
495
- }
475
+ &:focus-visible {
476
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
477
+ }
496
478
 
497
- .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
498
- box-shadow: none;
499
- }
479
+ &:focus:not(:focus-visible) {
480
+ box-shadow: none;
481
+ }
500
482
 
501
- .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not(
502
- [aria-disabled]
503
- ),
504
- .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
505
- background-color: var(--charcoal-text3-hover);
506
- }
483
+ &:hover:not(:disabled):not([aria-disabled]),
484
+ &:hover[aria-disabled='false'] {
485
+ background-color: var(--charcoal-text3-hover);
486
+ }
507
487
 
508
- .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not(
509
- [aria-disabled]
510
- ),
511
- .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
512
- background-color: var(--charcoal-text3-press);
513
- }
488
+ &:active:not(:disabled):not([aria-disabled]),
489
+ &:active[aria-disabled='false'] {
490
+ background-color: var(--charcoal-text3-press);
491
+ }
514
492
 
515
- .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not(
516
- [aria-disabled]
517
- ),
518
- .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
519
- background-color: var(--charcoal-brand-hover);
520
- }
493
+ &:checked:hover:not(:disabled):not([aria-disabled]),
494
+ &:checked:hover[aria-disabled='false'] {
495
+ background-color: var(--charcoal-brand-hover);
496
+ }
521
497
 
522
- .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not(
523
- [aria-disabled]
524
- ),
525
- .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
526
- background-color: var(--charcoal-brand-press);
527
- }
498
+ &:checked:active:not(:disabled):not([aria-disabled]),
499
+ &:checked:active[aria-disabled='false'] {
500
+ background-color: var(--charcoal-brand-press);
501
+ }
528
502
 
529
- .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(
530
- :disabled
531
- ):not([aria-disabled]) {
532
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
533
- }
503
+ &[aria-invalid='true'][data-overlay='false']:not(:disabled):not(
504
+ [aria-disabled]
505
+ ) {
506
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
507
+ }
534
508
 
535
- .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
536
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
537
- }
509
+ &[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
510
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
511
+ }
538
512
 
539
- .charcoal-multi-select-input[data-overlay='true'] {
540
- background-color: var(--charcoal-surface4);
513
+ &[data-overlay='true'] {
514
+ background-color: var(--charcoal-surface4);
515
+ }
541
516
  }
542
517
 
543
518
  .charcoal-multi-select-overlay {
@@ -553,22 +528,22 @@
553
528
  border-radius: 999999px;
554
529
  color: var(--charcoal-text5);
555
530
  transition: 0.2s box-shadow;
556
- }
557
531
 
558
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(
559
- :disabled
560
- ):not([aria-disabled]) {
561
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
562
- }
532
+ &[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
533
+ [aria-disabled]
534
+ ) {
535
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
536
+ }
563
537
 
564
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
565
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
566
- }
538
+ &[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
539
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
540
+ }
567
541
 
568
- .charcoal-multi-select-overlay[data-overlay='true'] {
569
- border-color: var(--charcoal-text5);
570
- border-width: 2px;
571
- border-style: solid;
542
+ &[data-overlay='true'] {
543
+ border-color: var(--charcoal-text5);
544
+ border-width: 2px;
545
+ border-style: solid;
546
+ }
572
547
  }
573
548
 
574
549
  .charcoal-switch__label {
@@ -578,15 +553,15 @@
578
553
  cursor: pointer;
579
554
  outline: 0;
580
555
  gap: 4px;
581
- }
582
556
 
583
- .charcoal-switch__label[aria-disabled='true'] {
584
- opacity: 0.32;
585
- cursor: default;
586
- }
557
+ &[aria-disabled='true'] {
558
+ opacity: 0.32;
559
+ cursor: default;
587
560
 
588
- .charcoal-switch__label[aria-disabled='true'] > input {
589
- opacity: 1;
561
+ & > input {
562
+ opacity: 1;
563
+ }
564
+ }
590
565
  }
591
566
 
592
567
  .charcoal-switch__label_div {
@@ -682,10 +657,10 @@
682
657
  display: grid;
683
658
  grid-template-columns: 1fr;
684
659
  grid-gap: 4px;
685
- }
686
660
 
687
- .charcoal-text-field-root[aria-disabled='true'] {
688
- opacity: 0.32;
661
+ &[aria-disabled='true'] {
662
+ opacity: 0.32;
663
+ }
689
664
  }
690
665
 
691
666
  .charcoal-text-field-container {
@@ -700,25 +675,23 @@
700
675
  padding: 0 8px;
701
676
  line-height: 22px;
702
677
  font-size: 14px;
703
- }
704
678
 
705
- .charcoal-text-field-container[data-invalid='true'] {
706
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
707
- }
679
+ &[data-invalid='true'] {
680
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
681
+ }
708
682
 
709
- .charcoal-text-field-container:not([aria-disabled='true']):hover {
710
- background-color: var(--charcoal-surface3-hover);
711
- }
683
+ &:not([aria-disabled='true']):hover {
684
+ background-color: var(--charcoal-surface3-hover);
685
+ }
712
686
 
713
- .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
714
- outline: none;
715
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
716
- }
687
+ &:not([aria-disabled='true']):focus-within {
688
+ outline: none;
689
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
690
+ }
717
691
 
718
- .charcoal-text-field-container:not(
719
- [aria-disabled='true']
720
- )[data-invalid='true']:focus-within {
721
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
692
+ &:not([aria-disabled='true'])[data-invalid='true']:focus-within {
693
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
694
+ }
722
695
  }
723
696
 
724
697
  .charcoal-text-field-prefix {
@@ -756,10 +729,10 @@
756
729
  background: transparent;
757
730
 
758
731
  color: var(--charcoal-text2);
759
- }
760
732
 
761
- .charcoal-text-field-input::placeholder {
762
- color: var(--charcoal-text3);
733
+ &::placeholder {
734
+ color: var(--charcoal-text3);
735
+ }
763
736
  }
764
737
 
765
738
  .charcoal-text-field-line-counter {
@@ -796,14 +769,14 @@
796
769
  .charcoal-field-label-root {
797
770
  display: inline-flex;
798
771
  align-items: center;
799
- }
800
772
 
801
- .charcoal-field-label-root > .charcoal-field-label-required-text {
802
- margin-left: 4px;
803
- }
773
+ & > .charcoal-field-label-required-text {
774
+ margin-left: 4px;
775
+ }
804
776
 
805
- .charcoal-field-label-root > .charcoal-field-label-sub-label {
806
- margin-left: auto;
777
+ & > .charcoal-field-label-sub-label {
778
+ margin-left: auto;
779
+ }
807
780
  }
808
781
 
809
782
  .charcoal-text-field-assistive-text {
@@ -821,10 +794,10 @@
821
794
  display: grid;
822
795
  grid-template-columns: 1fr;
823
796
  grid-gap: 4px;
824
- }
825
797
 
826
- .charcoal-text-area-root[aria-disabled='true'] {
827
- opacity: 0.32;
798
+ &[aria-disabled='true'] {
799
+ opacity: 0.32;
800
+ }
828
801
  }
829
802
 
830
803
  .charcoal-text-area-container {
@@ -838,23 +811,23 @@
838
811
  0.2s background-color,
839
812
  0.2s box-shadow;
840
813
  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
841
- }
842
814
 
843
- .charcoal-text-area-container[aria-invalid='true'] {
844
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
845
- }
815
+ &[aria-invalid='true'] {
816
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
817
+ }
846
818
 
847
- .charcoal-text-area-container:focus-within {
848
- outline: none;
849
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
850
- }
819
+ &:focus-within {
820
+ outline: none;
821
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
822
+ }
851
823
 
852
- .charcoal-text-area-container:not([aria-disabled='true']):hover {
853
- background-color: var(--charcoal-surface3-hover);
854
- }
824
+ &:not([aria-disabled='true']):hover {
825
+ background-color: var(--charcoal-surface3-hover);
826
+ }
855
827
 
856
- .charcoal-text-area-container[aria-invalid='true']:focus-within {
857
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
828
+ &[aria-invalid='true']:focus-within {
829
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
830
+ }
858
831
  }
859
832
 
860
833
  .charcoal-text-area-textarea {
@@ -878,14 +851,15 @@
878
851
  appearance: none;
879
852
 
880
853
  background: none;
881
- }
882
- .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
883
- padding: calc(9px / 0.875) calc(8px / 0.875) 0;
884
- height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
885
- }
886
854
 
887
- .charcoal-text-area-textarea::placeholder {
888
- color: var(--charcoal-text3);
855
+ &[data-no-bottom-padding='true'] {
856
+ padding: calc(9px / 0.875) calc(8px / 0.875) 0;
857
+ height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
858
+ }
859
+
860
+ &::placeholder {
861
+ color: var(--charcoal-text3);
862
+ }
889
863
  }
890
864
 
891
865
  .charcoal-text-area-counter {
@@ -956,12 +930,12 @@
956
930
  box-sizing: border-box;
957
931
 
958
932
  background-color: var(--charcoal-surface4);
959
- }
960
933
 
961
- @media (max-width: 743px) {
962
- .charcoal-modal-background[data-bottom-sheet='true'],
963
- .charcoal-modal-background[data-bottom-sheet='full'] {
964
- padding: 0;
934
+ @media (max-width: 743px) {
935
+ &[data-bottom-sheet='true'],
936
+ &[data-bottom-sheet='full'] {
937
+ padding: 0;
938
+ }
965
939
  }
966
940
  }
967
941
 
@@ -1032,9 +1006,10 @@
1032
1006
  opacity: 0.84;
1033
1007
  color: var(--charcoal-text4);
1034
1008
  background-color: var(--charcoal-background1);
1035
- }
1036
- .charcoal-loading-spinner[data-transparent='true'] {
1037
- background-color: var(--charcoal-transparent);
1009
+
1010
+ &[data-transparent='true'] {
1011
+ background-color: var(--charcoal-transparent);
1012
+ }
1038
1013
  }
1039
1014
 
1040
1015
  @keyframes charcoal-loading-spinner-icon-scale-out {
@@ -1055,13 +1030,14 @@
1055
1030
  background-color: currentColor;
1056
1031
  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
1057
1032
  animation-iteration-count: infinite;
1058
- }
1059
1033
 
1060
- .charcoal-loading-spinner-icon[data-reset-animation] {
1061
- animation: none;
1062
- }
1063
- .charcoal-loading-spinner-icon[data-once='true'] {
1064
- animation-iteration-count: 1;
1034
+ &[data-reset-animation] {
1035
+ animation: none;
1036
+ }
1037
+
1038
+ &[data-once='true'] {
1039
+ animation-iteration-count: 1;
1040
+ }
1065
1041
  }
1066
1042
 
1067
1043
  .charcoal-dropdown-selector-root {
@@ -1069,11 +1045,11 @@
1069
1045
  grid-template-columns: 1fr;
1070
1046
  grid-gap: 4px;
1071
1047
  width: 100%;
1072
- }
1073
1048
 
1074
- .charcoal-dropdown-selector-root[aria-disabled='true'] {
1075
- cursor: default;
1076
- opacity: 0.32;
1049
+ &[aria-disabled='true'] {
1050
+ cursor: default;
1051
+ opacity: 0.32;
1052
+ }
1077
1053
  }
1078
1054
 
1079
1055
  .charcoal-dropdown-selector-button {
@@ -1097,39 +1073,39 @@
1097
1073
  transition:
1098
1074
  0.2s box-shadow,
1099
1075
  0.2s background-color;
1100
- }
1101
1076
 
1102
- .charcoal-dropdown-selector-button:disabled {
1103
- cursor: default;
1104
- }
1077
+ &:disabled {
1078
+ cursor: default;
1079
+ }
1105
1080
 
1106
- .charcoal-dropdown-selector-button:not(:disabled):focus {
1107
- outline: none;
1108
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1109
- }
1081
+ &:not(:disabled) {
1082
+ &:focus {
1083
+ outline: none;
1084
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1085
+ }
1110
1086
 
1111
- .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
1112
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1113
- }
1087
+ &:focus-visible {
1088
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1089
+ }
1114
1090
 
1115
- .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
1116
- .charcoal-dropdown-selector-button:not(:disabled):active {
1117
- background-color: var(--charcoal-surface3-press);
1118
- }
1091
+ &[data-active='true'],
1092
+ &:active {
1093
+ background-color: var(--charcoal-surface3-press);
1094
+ }
1119
1095
 
1120
- .charcoal-dropdown-selector-button:not(:disabled):hover {
1121
- background-color: var(--charcoal-surface3-hover);
1122
- }
1096
+ &:hover {
1097
+ background-color: var(--charcoal-surface3-hover);
1098
+ }
1123
1099
 
1124
- .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
1125
- box-shadow: none;
1126
- }
1100
+ &:focus:not(:focus-visible) {
1101
+ box-shadow: none;
1102
+ }
1103
+ }
1127
1104
 
1128
- .charcoal-dropdown-selector-button[aria-invalid='true'],
1129
- .charcoal-dropdown-selector-button:not(
1130
- :disabled
1131
- )[aria-invalid='true']:focus:not(:focus-visible) {
1132
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1105
+ &[aria-invalid='true'],
1106
+ &:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
1107
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1108
+ }
1133
1109
  }
1134
1110
 
1135
1111
  .charcoal-ui-dropdown-selector-text {
@@ -1141,10 +1117,10 @@
1141
1117
  overflow: hidden;
1142
1118
  text-overflow: ellipsis;
1143
1119
  white-space: nowrap;
1144
- }
1145
1120
 
1146
- .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
1147
- color: var(--charcoal-text3);
1121
+ &[data-placeholder='true'] {
1122
+ color: var(--charcoal-text3);
1123
+ }
1148
1124
  }
1149
1125
 
1150
1126
  .charcoal-ui-dropdown-selector-icon {
@@ -1230,6 +1206,10 @@
1230
1206
  margin-left: 20px;
1231
1207
  }
1232
1208
 
1209
+ .charcoal-dropdown-selector-menu-fullwidth {
1210
+ width: 100%;
1211
+ }
1212
+
1233
1213
  .charcoal-menu-item-group {
1234
1214
  display: block;
1235
1215
  }
@@ -1256,18 +1236,18 @@
1256
1236
 
1257
1237
  background-color: var(--charcoal-surface3);
1258
1238
  border-radius: 16px;
1259
- }
1260
1239
 
1261
- .charcoal-segmented-control[data-uniform-segment-width='true'],
1262
- .charcoal-segmented-control[data-full-width='true'] {
1263
- display: inline-grid;
1264
- grid-auto-columns: minmax(80px, 1fr);
1265
- grid-auto-rows: 32px;
1266
- grid-auto-flow: column;
1267
- }
1240
+ &[data-uniform-segment-width='true'],
1241
+ &[data-full-width='true'] {
1242
+ display: inline-grid;
1243
+ grid-auto-columns: minmax(80px, 1fr);
1244
+ grid-auto-rows: 32px;
1245
+ grid-auto-flow: column;
1246
+ }
1268
1247
 
1269
- .charcoal-segmented-control[data-full-width='true'] {
1270
- width: 100%;
1248
+ &[data-full-width='true'] {
1249
+ width: 100%;
1250
+ }
1271
1251
  }
1272
1252
 
1273
1253
  .charcoal-segmented-control-radio__label {
@@ -1285,24 +1265,22 @@
1285
1265
 
1286
1266
  font-size: 14px;
1287
1267
  line-height: 22px;
1288
- }
1289
1268
 
1290
- .charcoal-segmented-control-radio__label[aria-disabled]:not(
1291
- [aria-disabled='false']
1292
- ) {
1293
- cursor: default;
1294
- opacity: 0.32;
1295
- }
1269
+ &[aria-disabled]:not([aria-disabled='false']) {
1270
+ cursor: default;
1271
+ opacity: 0.32;
1272
+ }
1296
1273
 
1297
- .charcoal-segmented-control-radio__label[data-checked='true'] {
1298
- background-color: var(--charcoal-brand);
1299
- color: var(--charcoal-text5);
1300
- }
1274
+ &[data-checked='true'] {
1275
+ background-color: var(--charcoal-brand);
1276
+ color: var(--charcoal-text5);
1277
+ }
1301
1278
 
1302
- .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
1303
- .charcoal-segmented-control-radio__label[data-full-width='true'] {
1304
- justify-content: center;
1305
- white-space: nowrap;
1279
+ &[data-uniform-segment-width='true'],
1280
+ &[data-full-width='true'] {
1281
+ justify-content: center;
1282
+ white-space: nowrap;
1283
+ }
1306
1284
  }
1307
1285
 
1308
1286
  .charcoal-segmented-control-radio__input {
@@ -1325,15 +1303,15 @@
1325
1303
  cursor: pointer;
1326
1304
  display: flex;
1327
1305
  gap: 4px;
1328
- }
1329
1306
 
1330
- .charcoal-checkbox__label[aria-disabled='true'] {
1331
- cursor: default;
1332
- opacity: 0.32;
1333
- }
1307
+ &[aria-disabled='true'] {
1308
+ cursor: default;
1309
+ opacity: 0.32;
1334
1310
 
1335
- .charcoal-checkbox__label[aria-disabled='true'] > input {
1336
- opacity: 1;
1311
+ & > input {
1312
+ opacity: 1;
1313
+ }
1314
+ }
1337
1315
  }
1338
1316
 
1339
1317
  .charcoal-checkbox__label_div {
@@ -1488,72 +1466,76 @@
1488
1466
  border-radius: 4px;
1489
1467
 
1490
1468
  transition: 0.2s box-shadow;
1491
- }
1492
1469
 
1493
- .charcoal-tag-item[data-size='M'] {
1494
- --charcoal-tag-item-size: 40px;
1495
- --charcoal-tag-item-padding-left: 24px;
1496
- --charcoal-tag-item-padding-right: 24px;
1497
- }
1498
- .charcoal-tag-item[data-size='S'] {
1499
- --charcoal-tag-item-size: 32px;
1500
- --charcoal-tag-item-padding-left: 16px;
1501
- --charcoal-tag-item-padding-right: 16px;
1502
- }
1503
- .charcoal-tag-item[data-state='inactive'] {
1504
- --charcoal-tag-item-color: var(--charcoal-text2);
1505
- }
1506
- .charcoal-tag-item[data-state='active'] {
1507
- --charcoal-tag-item-padding-left: 16px;
1508
- --charcoal-tag-item-padding-right: 8px;
1509
- }
1470
+ &[data-size='M'] {
1471
+ --charcoal-tag-item-size: 40px;
1472
+ --charcoal-tag-item-padding-left: 24px;
1473
+ --charcoal-tag-item-padding-right: 24px;
1474
+ }
1510
1475
 
1511
- .charcoal-tag-item:disabled,
1512
- .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
1513
- opacity: 0.32;
1514
- cursor: default;
1515
- }
1516
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
1517
- .charcoal-tag-item[aria-disabled='false']:focus-visible {
1518
- outline: none;
1519
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1520
- }
1521
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
1522
- .charcoal-tag-item[aria-disabled='false']:focus {
1523
- outline: none;
1524
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1525
- }
1526
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(
1527
- :focus-visible
1528
- ),
1529
- .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
1530
- box-shadow: none;
1476
+ &[data-size='S'] {
1477
+ --charcoal-tag-item-size: 32px;
1478
+ --charcoal-tag-item-padding-left: 16px;
1479
+ --charcoal-tag-item-padding-right: 16px;
1480
+ }
1481
+
1482
+ &[data-state='inactive'] {
1483
+ --charcoal-tag-item-color: var(--charcoal-text2);
1484
+ }
1485
+
1486
+ &[data-state='active'] {
1487
+ --charcoal-tag-item-padding-left: 16px;
1488
+ --charcoal-tag-item-padding-right: 8px;
1489
+ }
1490
+
1491
+ &:disabled,
1492
+ &[aria-disabled]:not([aria-disabled='false']) {
1493
+ opacity: 0.32;
1494
+ cursor: default;
1495
+ }
1496
+
1497
+ &:not(:disabled):not([aria-disabled]):focus-visible,
1498
+ &[aria-disabled='false']:focus-visible {
1499
+ outline: none;
1500
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1501
+ }
1502
+
1503
+ &:not(:disabled):not([aria-disabled]):focus,
1504
+ &[aria-disabled='false']:focus {
1505
+ outline: none;
1506
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1507
+ }
1508
+
1509
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1510
+ &[aria-disabled='false']:focus:not(:focus-visible) {
1511
+ box-shadow: none;
1512
+ }
1531
1513
  }
1532
1514
 
1533
1515
  .charcoal-tag-item__bg {
1534
1516
  background-color: var(--charcoal-tag-item-bg);
1535
- }
1536
-
1537
- .charcoal-tag-item__bg[data-bg-variant='image'] {
1538
- background-color: var(--charcoal-surface4);
1539
- }
1540
1517
 
1541
- .charcoal-tag-item__bg[data-bg-variant='image']::before {
1542
- content: '';
1543
- position: absolute;
1544
- z-index: 1;
1545
- top: 0;
1546
- left: 0;
1547
- width: 100%;
1548
- height: 100%;
1549
- background-position: center;
1550
- background-size: cover;
1551
- background-image: var(--charcoal-tag-item-bg);
1552
- mix-blend-mode: overlay;
1553
- }
1518
+ &[data-bg-variant='image'] {
1519
+ background-color: var(--charcoal-surface4);
1520
+
1521
+ &::before {
1522
+ content: '';
1523
+ position: absolute;
1524
+ z-index: 1;
1525
+ top: 0;
1526
+ left: 0;
1527
+ width: 100%;
1528
+ height: 100%;
1529
+ background-position: center;
1530
+ background-size: cover;
1531
+ background-image: var(--charcoal-tag-item-bg);
1532
+ mix-blend-mode: overlay;
1533
+ }
1534
+ }
1554
1535
 
1555
- .charcoal-tag-item__bg[data-state='inactive'] {
1556
- background-color: var(--charcoal-surface3);
1536
+ &[data-state='inactive'] {
1537
+ background-color: var(--charcoal-surface3);
1538
+ }
1557
1539
  }
1558
1540
 
1559
1541
  .charcoal-tag-item__label {
@@ -1562,18 +1544,20 @@
1562
1544
  flex-direction: column;
1563
1545
  align-items: center;
1564
1546
  justify-content: center;
1565
- }
1566
- .charcoal-tag-item__label[data-has-translate='true'] {
1567
- justify-content: space-between;
1547
+
1548
+ &[data-has-translate='true'] {
1549
+ justify-content: space-between;
1550
+ }
1568
1551
  }
1569
1552
 
1570
1553
  .charcoal-tag-item__label__translated {
1571
1554
  --charcoal-tag-item-text-font-size: 12px;
1572
1555
  --charcoal-tag-item-text-line-height: 20px;
1573
1556
  font-weight: bold;
1574
- }
1575
- .charcoal-tag-item__label__translated::before {
1576
- display: none;
1557
+
1558
+ &::before {
1559
+ display: none;
1560
+ }
1577
1561
  }
1578
1562
 
1579
1563
  .charcoal-tag-item__label__text {
@@ -1587,12 +1571,15 @@
1587
1571
  color: inherit;
1588
1572
  white-space: nowrap;
1589
1573
  text-overflow: ellipsis;
1574
+
1575
+ &[data-has-translate='true'] {
1576
+ --charcoal-tag-item-text-font-size: 10px;
1577
+ --charcoal-tag-item-text-line-height: 14px;
1578
+ font-weight: normal;
1579
+ }
1590
1580
  }
1591
- .charcoal-tag-item__label__text[data-has-translate='true'] {
1592
- --charcoal-tag-item-text-font-size: 10px;
1593
- --charcoal-tag-item-text-line-height: 14px;
1594
- font-weight: normal;
1595
- }
1581
+
1582
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
1596
1583
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
1597
1584
  display: none;
1598
1585
  }
@@ -1603,15 +1590,13 @@
1603
1590
  padding: 12px 16px;
1604
1591
  display: flex;
1605
1592
  align-items: flex-start;
1606
- }
1607
1593
 
1608
- .charcoal-hint-text[data-context='page'] {
1609
- justify-content: center;
1610
- }
1594
+ &[data-context='page'] {
1595
+ justify-content: center;
1611
1596
 
1612
- @media (min-width: 744px) {
1613
- .charcoal-hint-text[data-context='page'] {
1614
- padding: 20px 40px;
1597
+ @media (min-width: 744px) {
1598
+ padding: 20px 40px;
1599
+ }
1615
1600
  }
1616
1601
  }
1617
1602
 
@@ -1639,27 +1624,38 @@
1639
1624
  display: -webkit-box;
1640
1625
  -webkit-box-orient: vertical;
1641
1626
  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
1642
- }
1643
1627
 
1644
- .charcoal-text-ellipsis[data-has-line-height='true'] {
1645
- line-height: var(--charcoal-text-ellipsis-line-height);
1646
- }
1628
+ &[data-has-line-height='true'] {
1629
+ line-height: var(--charcoal-text-ellipsis-line-height);
1630
+ }
1647
1631
 
1648
- .charcoal-text-ellipsis[data-has-line-height='false'] {
1649
- line-height: inherit;
1650
- }
1632
+ &[data-has-line-height='false'] {
1633
+ line-height: inherit;
1634
+ }
1651
1635
 
1652
- .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1653
- text-overflow: ellipsis;
1654
- white-space: nowrap;
1636
+ &[data-line-limit='1'][data-use-nowrap='true'] {
1637
+ text-overflow: ellipsis;
1638
+ white-space: nowrap;
1639
+ }
1655
1640
  }
1656
1641
 
1657
1642
  .charcoal-pagination {
1658
1643
  display: flex;
1659
1644
  justify-content: center;
1660
1645
  align-items: center;
1646
+
1647
+ &[data-size='S'] .charcoal-pagination-button {
1648
+ min-width: 32px;
1649
+ min-height: 32px;
1650
+ }
1651
+
1652
+ &[data-size='M'] .charcoal-pagination-button {
1653
+ min-width: 40px;
1654
+ min-height: 40px;
1655
+ }
1661
1656
  }
1662
1657
 
1658
+ /* stylelint-disable no-descending-specificity */
1663
1659
  .charcoal-pagination-button {
1664
1660
  cursor: pointer;
1665
1661
  appearance: none;
@@ -1691,93 +1687,81 @@
1691
1687
  transition:
1692
1688
  0.2s background-color,
1693
1689
  0.2s box-shadow;
1694
- }
1695
-
1696
- .charcoal-pagination-button:focus {
1697
- outline: none;
1698
- }
1699
-
1700
- .charcoal-pagination-button::-moz-focus-inner {
1701
- border-style: none;
1702
- padding: 0;
1703
- }
1704
1690
 
1705
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1706
- min-width: 32px;
1707
- min-height: 32px;
1708
- }
1691
+ &:focus {
1692
+ outline: none;
1693
+ }
1709
1694
 
1710
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1711
- min-width: 40px;
1712
- min-height: 40px;
1713
- }
1695
+ &::-moz-focus-inner {
1696
+ border-style: none;
1697
+ padding: 0;
1698
+ }
1714
1699
 
1715
- .charcoal-pagination-button[hidden] {
1716
- visibility: hidden;
1717
- display: block;
1718
- }
1700
+ &[hidden] {
1701
+ visibility: hidden;
1702
+ display: block;
1703
+ }
1719
1704
 
1720
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
1721
- .charcoal-pagination-button[aria-disabled='false']:hover {
1722
- color: var(--charcoal-text3);
1723
- background-color: var(--charcoal-surface3);
1724
- }
1705
+ &:not(:disabled):not([aria-disabled]):hover,
1706
+ &[aria-disabled='false']:hover {
1707
+ color: var(--charcoal-text3);
1708
+ background-color: var(--charcoal-surface3);
1709
+ }
1725
1710
 
1726
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
1727
- .charcoal-pagination-button[aria-disabled='false']:active {
1728
- color: var(--charcoal-text3);
1729
- background-color: var(--charcoal-surface10);
1730
- }
1711
+ &:not(:disabled):not([aria-disabled]):active,
1712
+ &[aria-disabled='false']:active {
1713
+ color: var(--charcoal-text3);
1714
+ background-color: var(--charcoal-surface10);
1715
+ }
1731
1716
 
1732
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
1733
- .charcoal-pagination-button[aria-disabled='false']:focus {
1734
- outline: none;
1735
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1736
- }
1717
+ &:not(:disabled):not([aria-disabled]):focus,
1718
+ &[aria-disabled='false']:focus {
1719
+ outline: none;
1720
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1721
+ }
1737
1722
 
1738
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
1739
- .charcoal-pagination-button[aria-disabled='false']:focus-visible {
1740
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1741
- }
1723
+ &:not(:disabled):not([aria-disabled]):focus-visible,
1724
+ &[aria-disabled='false']:focus-visible {
1725
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1726
+ }
1742
1727
 
1743
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
1744
- :focus-visible
1745
- ),
1746
- .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
1747
- box-shadow: none;
1748
- }
1728
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1729
+ &[aria-disabled='false']:focus:not(:focus-visible) {
1730
+ box-shadow: none;
1731
+ }
1749
1732
 
1750
- .charcoal-pagination-button[aria-current] {
1751
- cursor: default;
1752
- background-color: var(--charcoal-surface6);
1753
- color: var(--charcoal-text5);
1754
- }
1733
+ &[aria-current] {
1734
+ cursor: default;
1735
+ background-color: var(--charcoal-surface6);
1736
+ color: var(--charcoal-text5);
1755
1737
 
1756
- .charcoal-pagination-button[aria-current]:not(:disabled):not(
1757
- [aria-disabled]
1758
- ):hover,
1759
- .charcoal-pagination-button[aria-current]:not(:disabled):not(
1760
- [aria-disabled]
1761
- ):active {
1762
- background-color: var(--charcoal-surface6);
1763
- color: var(--charcoal-text5);
1738
+ &:not(:disabled):not([aria-disabled]):hover,
1739
+ &:not(:disabled):not([aria-disabled]):active {
1740
+ background-color: var(--charcoal-surface6);
1741
+ color: var(--charcoal-text5);
1742
+ }
1743
+ }
1764
1744
  }
1745
+ /* stylelint-enable no-descending-specificity */
1765
1746
 
1747
+ /* Kept flat: different root class from .charcoal-pagination-button */
1766
1748
  .charcoal-pagination-nav-button[hidden] {
1767
1749
  visibility: hidden;
1768
1750
  display: block;
1769
1751
  }
1770
1752
 
1771
- .charcoal-pagination-spacer,
1772
- .charcoal-pagination-spacer:hover,
1773
- .charcoal-pagination-spacer:active {
1774
- cursor: default;
1775
- color: var(--charcoal-text3);
1776
- background: none;
1777
- }
1753
+ .charcoal-pagination-spacer {
1754
+ &,
1755
+ &:hover,
1756
+ &:active {
1757
+ cursor: default;
1758
+ color: var(--charcoal-text3);
1759
+ background: none;
1760
+ }
1778
1761
 
1779
- .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1780
- opacity: 1;
1762
+ &.charcoal-icon-button:disabled {
1763
+ opacity: 1;
1764
+ }
1781
1765
  }
1782
1766
 
1783
1767