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