@charcoal-ui/react 5.7.0 → 5.8.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 (42) hide show
  1. package/dist/index.css +566 -586
  2. package/dist/index.css.map +1 -1
  3. package/dist/layered.css +566 -586
  4. package/dist/layered.css.map +1 -1
  5. package/package.json +6 -5
  6. package/src/__tests__/css-output.test.ts +77 -0
  7. package/src/components/Button/__snapshots__/index.css.snap +123 -0
  8. package/src/components/Button/index.css +105 -120
  9. package/src/components/Checkbox/__snapshots__/index.css.snap +22 -0
  10. package/src/components/Checkbox/index.css +7 -7
  11. package/src/components/Clickable/__snapshots__/index.css.snap +41 -0
  12. package/src/components/Clickable/index.css +11 -11
  13. package/src/components/DropdownSelector/__snapshots__/index.css.snap +79 -0
  14. package/src/components/DropdownSelector/index.css +33 -33
  15. package/src/components/FieldLabel/__snapshots__/index.css.snap +37 -0
  16. package/src/components/FieldLabel/index.css +6 -6
  17. package/src/components/HintText/__snapshots__/index.css.snap +37 -0
  18. package/src/components/HintText/index.css +5 -7
  19. package/src/components/IconButton/__snapshots__/index.css.snap +107 -0
  20. package/src/components/IconButton/index.css +87 -89
  21. package/src/components/LoadingSpinner/__snapshots__/index.css.snap +47 -0
  22. package/src/components/LoadingSpinner/index.css +11 -9
  23. package/src/components/Modal/__snapshots__/index.css.snap +35 -0
  24. package/src/components/Modal/index.css +5 -5
  25. package/src/components/MultiSelect/__snapshots__/index.css.snap +124 -0
  26. package/src/components/MultiSelect/index.css +74 -82
  27. package/src/components/Pagination/__snapshots__/index.css.snap +114 -0
  28. package/src/components/Pagination/index.css +79 -80
  29. package/src/components/Radio/__snapshots__/index.css.snap +18 -0
  30. package/src/components/Radio/index.css +4 -4
  31. package/src/components/SegmentedControl/__snapshots__/index.css.snap +61 -0
  32. package/src/components/SegmentedControl/index.css +23 -25
  33. package/src/components/Switch/__snapshots__/index.css.snap +23 -0
  34. package/src/components/Switch/index.css +7 -7
  35. package/src/components/TagItem/__snapshots__/index.css.snap +139 -0
  36. package/src/components/TagItem/index.css +80 -71
  37. package/src/components/TextArea/__snapshots__/index.css.snap +78 -0
  38. package/src/components/TextArea/index.css +24 -23
  39. package/src/components/TextEllipsis/__snapshots__/index.css.snap +20 -0
  40. package/src/components/TextEllipsis/index.css +10 -10
  41. package/src/components/TextField/__snapshots__/index.css.snap +86 -0
  42. package/src/components/TextField/index.css +19 -21
package/dist/index.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
-
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
34
 
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 {
@@ -1256,18 +1232,18 @@
1256
1232
 
1257
1233
  background-color: var(--charcoal-surface3);
1258
1234
  border-radius: 16px;
1259
- }
1260
1235
 
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
- }
1236
+ &[data-uniform-segment-width='true'],
1237
+ &[data-full-width='true'] {
1238
+ display: inline-grid;
1239
+ grid-auto-columns: minmax(80px, 1fr);
1240
+ grid-auto-rows: 32px;
1241
+ grid-auto-flow: column;
1242
+ }
1268
1243
 
1269
- .charcoal-segmented-control[data-full-width='true'] {
1270
- width: 100%;
1244
+ &[data-full-width='true'] {
1245
+ width: 100%;
1246
+ }
1271
1247
  }
1272
1248
 
1273
1249
  .charcoal-segmented-control-radio__label {
@@ -1285,24 +1261,22 @@
1285
1261
 
1286
1262
  font-size: 14px;
1287
1263
  line-height: 22px;
1288
- }
1289
1264
 
1290
- .charcoal-segmented-control-radio__label[aria-disabled]:not(
1291
- [aria-disabled='false']
1292
- ) {
1293
- cursor: default;
1294
- opacity: 0.32;
1295
- }
1265
+ &[aria-disabled]:not([aria-disabled='false']) {
1266
+ cursor: default;
1267
+ opacity: 0.32;
1268
+ }
1296
1269
 
1297
- .charcoal-segmented-control-radio__label[data-checked='true'] {
1298
- background-color: var(--charcoal-brand);
1299
- color: var(--charcoal-text5);
1300
- }
1270
+ &[data-checked='true'] {
1271
+ background-color: var(--charcoal-brand);
1272
+ color: var(--charcoal-text5);
1273
+ }
1301
1274
 
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;
1275
+ &[data-uniform-segment-width='true'],
1276
+ &[data-full-width='true'] {
1277
+ justify-content: center;
1278
+ white-space: nowrap;
1279
+ }
1306
1280
  }
1307
1281
 
1308
1282
  .charcoal-segmented-control-radio__input {
@@ -1325,15 +1299,15 @@
1325
1299
  cursor: pointer;
1326
1300
  display: flex;
1327
1301
  gap: 4px;
1328
- }
1329
1302
 
1330
- .charcoal-checkbox__label[aria-disabled='true'] {
1331
- cursor: default;
1332
- opacity: 0.32;
1333
- }
1303
+ &[aria-disabled='true'] {
1304
+ cursor: default;
1305
+ opacity: 0.32;
1334
1306
 
1335
- .charcoal-checkbox__label[aria-disabled='true'] > input {
1336
- opacity: 1;
1307
+ & > input {
1308
+ opacity: 1;
1309
+ }
1310
+ }
1337
1311
  }
1338
1312
 
1339
1313
  .charcoal-checkbox__label_div {
@@ -1488,72 +1462,76 @@
1488
1462
  border-radius: 4px;
1489
1463
 
1490
1464
  transition: 0.2s box-shadow;
1491
- }
1492
1465
 
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
- }
1466
+ &[data-size='M'] {
1467
+ --charcoal-tag-item-size: 40px;
1468
+ --charcoal-tag-item-padding-left: 24px;
1469
+ --charcoal-tag-item-padding-right: 24px;
1470
+ }
1510
1471
 
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;
1472
+ &[data-size='S'] {
1473
+ --charcoal-tag-item-size: 32px;
1474
+ --charcoal-tag-item-padding-left: 16px;
1475
+ --charcoal-tag-item-padding-right: 16px;
1476
+ }
1477
+
1478
+ &[data-state='inactive'] {
1479
+ --charcoal-tag-item-color: var(--charcoal-text2);
1480
+ }
1481
+
1482
+ &[data-state='active'] {
1483
+ --charcoal-tag-item-padding-left: 16px;
1484
+ --charcoal-tag-item-padding-right: 8px;
1485
+ }
1486
+
1487
+ &:disabled,
1488
+ &[aria-disabled]:not([aria-disabled='false']) {
1489
+ opacity: 0.32;
1490
+ cursor: default;
1491
+ }
1492
+
1493
+ &:not(:disabled):not([aria-disabled]):focus-visible,
1494
+ &[aria-disabled='false']:focus-visible {
1495
+ outline: none;
1496
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1497
+ }
1498
+
1499
+ &:not(:disabled):not([aria-disabled]):focus,
1500
+ &[aria-disabled='false']:focus {
1501
+ outline: none;
1502
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1503
+ }
1504
+
1505
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1506
+ &[aria-disabled='false']:focus:not(:focus-visible) {
1507
+ box-shadow: none;
1508
+ }
1531
1509
  }
1532
1510
 
1533
1511
  .charcoal-tag-item__bg {
1534
1512
  background-color: var(--charcoal-tag-item-bg);
1535
- }
1536
1513
 
1537
- .charcoal-tag-item__bg[data-bg-variant='image'] {
1538
- background-color: var(--charcoal-surface4);
1539
- }
1540
-
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
- }
1514
+ &[data-bg-variant='image'] {
1515
+ background-color: var(--charcoal-surface4);
1516
+
1517
+ &::before {
1518
+ content: '';
1519
+ position: absolute;
1520
+ z-index: 1;
1521
+ top: 0;
1522
+ left: 0;
1523
+ width: 100%;
1524
+ height: 100%;
1525
+ background-position: center;
1526
+ background-size: cover;
1527
+ background-image: var(--charcoal-tag-item-bg);
1528
+ mix-blend-mode: overlay;
1529
+ }
1530
+ }
1554
1531
 
1555
- .charcoal-tag-item__bg[data-state='inactive'] {
1556
- background-color: var(--charcoal-surface3);
1532
+ &[data-state='inactive'] {
1533
+ background-color: var(--charcoal-surface3);
1534
+ }
1557
1535
  }
1558
1536
 
1559
1537
  .charcoal-tag-item__label {
@@ -1562,18 +1540,20 @@
1562
1540
  flex-direction: column;
1563
1541
  align-items: center;
1564
1542
  justify-content: center;
1565
- }
1566
- .charcoal-tag-item__label[data-has-translate='true'] {
1567
- justify-content: space-between;
1543
+
1544
+ &[data-has-translate='true'] {
1545
+ justify-content: space-between;
1546
+ }
1568
1547
  }
1569
1548
 
1570
1549
  .charcoal-tag-item__label__translated {
1571
1550
  --charcoal-tag-item-text-font-size: 12px;
1572
1551
  --charcoal-tag-item-text-line-height: 20px;
1573
1552
  font-weight: bold;
1574
- }
1575
- .charcoal-tag-item__label__translated::before {
1576
- display: none;
1553
+
1554
+ &::before {
1555
+ display: none;
1556
+ }
1577
1557
  }
1578
1558
 
1579
1559
  .charcoal-tag-item__label__text {
@@ -1587,12 +1567,15 @@
1587
1567
  color: inherit;
1588
1568
  white-space: nowrap;
1589
1569
  text-overflow: ellipsis;
1570
+
1571
+ &[data-has-translate='true'] {
1572
+ --charcoal-tag-item-text-font-size: 10px;
1573
+ --charcoal-tag-item-text-line-height: 14px;
1574
+ font-weight: normal;
1575
+ }
1590
1576
  }
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
- }
1577
+
1578
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
1596
1579
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
1597
1580
  display: none;
1598
1581
  }
@@ -1603,15 +1586,13 @@
1603
1586
  padding: 12px 16px;
1604
1587
  display: flex;
1605
1588
  align-items: flex-start;
1606
- }
1607
1589
 
1608
- .charcoal-hint-text[data-context='page'] {
1609
- justify-content: center;
1610
- }
1590
+ &[data-context='page'] {
1591
+ justify-content: center;
1611
1592
 
1612
- @media (min-width: 744px) {
1613
- .charcoal-hint-text[data-context='page'] {
1614
- padding: 20px 40px;
1593
+ @media (min-width: 744px) {
1594
+ padding: 20px 40px;
1595
+ }
1615
1596
  }
1616
1597
  }
1617
1598
 
@@ -1639,27 +1620,38 @@
1639
1620
  display: -webkit-box;
1640
1621
  -webkit-box-orient: vertical;
1641
1622
  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
1642
- }
1643
1623
 
1644
- .charcoal-text-ellipsis[data-has-line-height='true'] {
1645
- line-height: var(--charcoal-text-ellipsis-line-height);
1646
- }
1624
+ &[data-has-line-height='true'] {
1625
+ line-height: var(--charcoal-text-ellipsis-line-height);
1626
+ }
1647
1627
 
1648
- .charcoal-text-ellipsis[data-has-line-height='false'] {
1649
- line-height: inherit;
1650
- }
1628
+ &[data-has-line-height='false'] {
1629
+ line-height: inherit;
1630
+ }
1651
1631
 
1652
- .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1653
- text-overflow: ellipsis;
1654
- white-space: nowrap;
1632
+ &[data-line-limit='1'][data-use-nowrap='true'] {
1633
+ text-overflow: ellipsis;
1634
+ white-space: nowrap;
1635
+ }
1655
1636
  }
1656
1637
 
1657
1638
  .charcoal-pagination {
1658
1639
  display: flex;
1659
1640
  justify-content: center;
1660
1641
  align-items: center;
1642
+
1643
+ &[data-size='S'] .charcoal-pagination-button {
1644
+ min-width: 32px;
1645
+ min-height: 32px;
1646
+ }
1647
+
1648
+ &[data-size='M'] .charcoal-pagination-button {
1649
+ min-width: 40px;
1650
+ min-height: 40px;
1651
+ }
1661
1652
  }
1662
1653
 
1654
+ /* stylelint-disable no-descending-specificity */
1663
1655
  .charcoal-pagination-button {
1664
1656
  cursor: pointer;
1665
1657
  appearance: none;
@@ -1691,93 +1683,81 @@
1691
1683
  transition:
1692
1684
  0.2s background-color,
1693
1685
  0.2s box-shadow;
1694
- }
1695
1686
 
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
-
1705
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1706
- min-width: 32px;
1707
- min-height: 32px;
1708
- }
1687
+ &:focus {
1688
+ outline: none;
1689
+ }
1709
1690
 
1710
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1711
- min-width: 40px;
1712
- min-height: 40px;
1713
- }
1691
+ &::-moz-focus-inner {
1692
+ border-style: none;
1693
+ padding: 0;
1694
+ }
1714
1695
 
1715
- .charcoal-pagination-button[hidden] {
1716
- visibility: hidden;
1717
- display: block;
1718
- }
1696
+ &[hidden] {
1697
+ visibility: hidden;
1698
+ display: block;
1699
+ }
1719
1700
 
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
- }
1701
+ &:not(:disabled):not([aria-disabled]):hover,
1702
+ &[aria-disabled='false']:hover {
1703
+ color: var(--charcoal-text3);
1704
+ background-color: var(--charcoal-surface3);
1705
+ }
1725
1706
 
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
- }
1707
+ &:not(:disabled):not([aria-disabled]):active,
1708
+ &[aria-disabled='false']:active {
1709
+ color: var(--charcoal-text3);
1710
+ background-color: var(--charcoal-surface10);
1711
+ }
1731
1712
 
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
- }
1713
+ &:not(:disabled):not([aria-disabled]):focus,
1714
+ &[aria-disabled='false']:focus {
1715
+ outline: none;
1716
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1717
+ }
1737
1718
 
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
- }
1719
+ &:not(:disabled):not([aria-disabled]):focus-visible,
1720
+ &[aria-disabled='false']:focus-visible {
1721
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1722
+ }
1742
1723
 
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
- }
1724
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1725
+ &[aria-disabled='false']:focus:not(:focus-visible) {
1726
+ box-shadow: none;
1727
+ }
1749
1728
 
1750
- .charcoal-pagination-button[aria-current] {
1751
- cursor: default;
1752
- background-color: var(--charcoal-surface6);
1753
- color: var(--charcoal-text5);
1754
- }
1729
+ &[aria-current] {
1730
+ cursor: default;
1731
+ background-color: var(--charcoal-surface6);
1732
+ color: var(--charcoal-text5);
1755
1733
 
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);
1734
+ &:not(:disabled):not([aria-disabled]):hover,
1735
+ &:not(:disabled):not([aria-disabled]):active {
1736
+ background-color: var(--charcoal-surface6);
1737
+ color: var(--charcoal-text5);
1738
+ }
1739
+ }
1764
1740
  }
1741
+ /* stylelint-enable no-descending-specificity */
1765
1742
 
1743
+ /* Kept flat: different root class from .charcoal-pagination-button */
1766
1744
  .charcoal-pagination-nav-button[hidden] {
1767
1745
  visibility: hidden;
1768
1746
  display: block;
1769
1747
  }
1770
1748
 
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
- }
1749
+ .charcoal-pagination-spacer {
1750
+ &,
1751
+ &:hover,
1752
+ &:active {
1753
+ cursor: default;
1754
+ color: var(--charcoal-text3);
1755
+ background: none;
1756
+ }
1778
1757
 
1779
- .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1780
- opacity: 1;
1758
+ &.charcoal-icon-button:disabled {
1759
+ opacity: 1;
1760
+ }
1781
1761
  }
1782
1762
 
1783
1763