@primer/css 0.0.0-20220126171453 → 0.0.0-20220128230431

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 (74) hide show
  1. package/CHANGELOG.md +1 -5
  2. package/actionlist/action-list-item-divider.scss +9 -0
  3. package/actionlist/action-list-item.scss +134 -122
  4. package/actionlist/action-list-tree.scss +104 -0
  5. package/base/kbd.scss +1 -0
  6. package/base/normalize.scss +1 -1
  7. package/base/typography-base.scss +2 -3
  8. package/blankslate/blankslate.scss +1 -0
  9. package/box/box.scss +3 -0
  10. package/buttons/button.scss +0 -1
  11. package/dist/actionlist.css +1 -1
  12. package/dist/actionlist.css.map +1 -1
  13. package/dist/alerts.css.map +1 -1
  14. package/dist/autocomplete.css.map +1 -1
  15. package/dist/avatars.css.map +1 -1
  16. package/dist/base.css +1 -1
  17. package/dist/base.css.map +1 -1
  18. package/dist/blankslate.css.map +1 -1
  19. package/dist/box.css.map +1 -1
  20. package/dist/branch-name.css.map +1 -1
  21. package/dist/breadcrumb.css.map +1 -1
  22. package/dist/buttons.css.map +1 -1
  23. package/dist/core.css +1 -1
  24. package/dist/core.css.map +1 -1
  25. package/dist/dropdown.css.map +1 -1
  26. package/dist/forms.css.map +1 -1
  27. package/dist/header.css.map +1 -1
  28. package/dist/labels.css.map +1 -1
  29. package/dist/layout.css.map +1 -1
  30. package/dist/links.css.map +1 -1
  31. package/dist/loaders.css.map +1 -1
  32. package/dist/markdown.css +1 -1
  33. package/dist/markdown.css.map +1 -1
  34. package/dist/marketing-buttons.css.map +1 -1
  35. package/dist/marketing-links.css.map +1 -1
  36. package/dist/marketing-type.css.map +1 -1
  37. package/dist/marketing-utilities.css.map +1 -1
  38. package/dist/meta.json +95 -95
  39. package/dist/navigation.css.map +1 -1
  40. package/dist/pagination.css.map +1 -1
  41. package/dist/popover.css.map +1 -1
  42. package/dist/primer.css +2 -2
  43. package/dist/primer.css.map +1 -1
  44. package/dist/product.css +1 -1
  45. package/dist/product.css.map +1 -1
  46. package/dist/progress.css.map +1 -1
  47. package/dist/select-menu.css.map +1 -1
  48. package/dist/stats/actionlist.json +1 -1
  49. package/dist/stats/base.json +1 -1
  50. package/dist/stats/core.json +1 -1
  51. package/dist/stats/markdown.json +1 -1
  52. package/dist/stats/primer.json +1 -1
  53. package/dist/stats/product.json +1 -1
  54. package/dist/subhead.css.map +1 -1
  55. package/dist/timeline.css.map +1 -1
  56. package/dist/toasts.css.map +1 -1
  57. package/dist/tooltips.css.map +1 -1
  58. package/dist/truncate.css.map +1 -1
  59. package/dist/utilities.css.map +1 -1
  60. package/forms/form-control.scss +0 -1
  61. package/forms/form-group.scss +0 -1
  62. package/forms/radio-group.scss +3 -0
  63. package/labels/mixins.scss +1 -5
  64. package/layout/grid-offset.scss +0 -1
  65. package/layout/grid.scss +0 -1
  66. package/layout/page-layout.scss +5 -0
  67. package/markdown/code.scss +0 -5
  68. package/marketing/type/typography.scss +0 -3
  69. package/package.json +2 -2
  70. package/popover/popover.scss +1 -0
  71. package/support/mixins/misc.scss +0 -1
  72. package/timeline/timeline-item.scss +1 -0
  73. package/utilities/margin.scss +1 -4
  74. package/utilities/padding.scss +1 -3
package/CHANGELOG.md CHANGED
@@ -1,10 +1,6 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-20220126171453
4
-
5
- ### Minor Changes
6
-
7
- - [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
3
+ ## 0.0.0-20220128230431
8
4
 
9
5
  ### Patch Changes
10
6
 
@@ -4,6 +4,7 @@
4
4
  // has children
5
5
  &:not(:empty) {
6
6
  display: flex;
7
+ // stylelint-disable-next-line primer/spacing
7
8
  padding: ($spacer-1 * 1.5) $spacer-2;
8
9
  font-size: $font-size-small;
9
10
  font-weight: $font-weight-bold;
@@ -13,13 +14,21 @@
13
14
 
14
15
  // no children
15
16
  &:empty {
17
+ display: block;
16
18
  height: 1px;
17
19
  padding: 0;
20
+ // stylelint-disable-next-line primer/spacing
18
21
  margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
19
22
  list-style: none;
20
23
  background: var(--color-action-list-item-inline-divider);
21
24
  border: 0;
22
25
  }
26
+
27
+ .ActionList-sectionDivider-title {
28
+ font-size: $font-size-small;
29
+ font-weight: $font-weight-bold;
30
+ color: var(--color-fg-muted);
31
+ }
23
32
  }
24
33
 
25
34
  .ActionList-sectionDivider--filled {
@@ -24,17 +24,10 @@
24
24
  list-style: none;
25
25
  background-color: transparent;
26
26
  border-radius: $border-radius;
27
- touch-action: manipulation;
28
- -webkit-tap-highlight-color: transparent;
29
27
 
30
28
  &:hover,
31
29
  &:active {
32
30
  cursor: pointer;
33
-
34
- // a href
35
- .ActionList-content {
36
- text-decoration: none;
37
- }
38
31
  }
39
32
 
40
33
  // only hover li without list as children
@@ -157,98 +150,6 @@
157
150
  }
158
151
  }
159
152
 
160
- // collapsible item [aria-expanded]
161
-
162
- // nesting (single level)
163
- // target items inside expanded subgroups
164
- &[aria-expanded] {
165
- .ActionList--subGroup {
166
- @media screen and (prefers-reduced-motion: no-preference) {
167
- transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
168
- }
169
-
170
- .ActionList-content {
171
- padding-left: $spacer-4;
172
- }
173
- }
174
-
175
- // has 16px leading visual
176
- .ActionList-content--visual16 + .ActionList--subGroup {
177
- .ActionList-content {
178
- padding-left: $spacer-5;
179
- }
180
- }
181
-
182
- // has 20px leading visual
183
- .ActionList-content--visual20 + .ActionList--subGroup {
184
- .ActionList-content {
185
- padding-left: $spacer-2 * 4.5; // 36px
186
- }
187
- }
188
-
189
- // has 24px leading visual
190
- .ActionList-content--visual24 + .ActionList--subGroup {
191
- .ActionList-content {
192
- padding-left: $spacer-6;
193
- }
194
- }
195
- }
196
-
197
- &[aria-expanded='true'] {
198
- .ActionList-item-collapseIcon {
199
- transition: transform 120ms linear;
200
- transform: scaleY(-1);
201
- }
202
-
203
- .ActionList--subGroup {
204
- height: auto;
205
- overflow: visible;
206
- visibility: visible;
207
- opacity: 1;
208
- transform: translateY(0);
209
- }
210
-
211
- &.ActionList-item--hasActiveSubItem {
212
- > .ActionList-content > .ActionList-item-label {
213
- font-weight: $font-weight-bold;
214
- }
215
- }
216
- }
217
-
218
- &[aria-expanded='false'] {
219
- .ActionList-item-collapseIcon {
220
- transition: transform 120ms linear;
221
- transform: scaleY(1);
222
- }
223
-
224
- .ActionList--subGroup {
225
- height: 0;
226
- overflow: hidden;
227
- visibility: hidden;
228
- opacity: 0;
229
- transform: translateY(-$spacer-3);
230
- }
231
-
232
- // show active indicator on parent collapse if child is active
233
- &.ActionList-item--hasActiveSubItem {
234
- background: var(--color-action-list-item-default-selected-bg);
235
-
236
- .ActionList-item-label {
237
- font-weight: $font-weight-bold;
238
- }
239
-
240
- &::before,
241
- + .ActionList-item::before {
242
- visibility: hidden;
243
- }
244
-
245
- // blue accent line
246
- &::after {
247
- @include activeIndicatorLine;
248
- }
249
- }
250
- }
251
-
252
153
  // checkbox item [aria-checked]
253
154
  // listbox [aria-selected]
254
155
 
@@ -290,8 +191,7 @@
290
191
  .ActionList-item-multiSelectCheckmark {
291
192
  visibility: hidden;
292
193
  opacity: 0;
293
- transition:
294
- visibility 0 linear $actionList-item-checkmark-transition-timing,
194
+ transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
295
195
  opacity $actionList-item-checkmark-transition-timing;
296
196
  }
297
197
 
@@ -363,40 +263,27 @@
363
263
  }
364
264
  }
365
265
 
366
- &:active {
367
- background: var(--color-action-list-item-danger-active-bg);
368
- }
369
- }
370
-
371
- // disabled
372
- &[aria-disabled='true'] {
373
- .ActionList-item-label,
374
- .ActionList-item-description {
375
- color: var(--color-primer-fg-disabled);
376
- }
377
-
378
- .ActionList-item-visual {
379
- fill: var(--color-primer-fg-disabled);
380
- }
381
-
382
- @media (hover: hover) {
383
- &:hover {
384
- cursor: not-allowed;
385
- background-color: transparent;
266
+ .ActionList-content {
267
+ &:active {
268
+ background: var(--color-action-list-item-danger-active-bg);
386
269
  }
387
270
  }
388
271
  }
389
272
 
390
273
  // if nested list exists, remove default padding
391
274
  .ActionList {
275
+ // stylelint-disable-next-line primer/spacing
392
276
  padding: unset;
393
277
  }
394
278
  }
395
279
 
396
- // span or a href
280
+ // button or a href
397
281
  .ActionList-content {
282
+ border: none;
283
+ background-color: transparent;
398
284
  position: relative;
399
285
  display: grid;
286
+ // stylelint-disable-next-line primer/spacing
400
287
  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
401
288
  font-size: $body-font-size;
402
289
  font-weight: $font-weight-normal;
@@ -405,29 +292,152 @@
405
292
  touch-action: manipulation;
406
293
  border-radius: $border-radius;
407
294
  transition: $actionList-item-bg-transition;
295
+ touch-action: manipulation;
296
+ -webkit-tap-highlight-color: transparent;
408
297
  grid-template-rows: min-content;
409
298
  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
410
299
  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
411
300
  align-items: start;
301
+ width: 100%;
302
+ text-align: left;
412
303
 
413
304
  // column-gap persists with empty grid-areas, margin applies only when children exist
414
305
  > :not(:last-child) {
415
306
  margin-right: $spacer-2;
416
307
  }
417
308
 
309
+ // state
310
+
311
+ &:hover {
312
+ text-decoration: none;
313
+ }
314
+
418
315
  &:focus-visible {
419
316
  @include focusOutline;
420
317
  }
421
318
 
319
+ // disabled
320
+ &[aria-disabled='true'] {
321
+ .ActionList-item-label,
322
+ .ActionList-item-description {
323
+ color: var(--color-primer-fg-disabled);
324
+ }
325
+
326
+ .ActionList-item-visual {
327
+ fill: var(--color-primer-fg-disabled);
328
+ }
329
+
330
+ @media (hover: hover) {
331
+ &:hover {
332
+ cursor: not-allowed;
333
+ background-color: transparent;
334
+ }
335
+ }
336
+ }
337
+
338
+ // collapsible item [aria-expanded]
339
+
340
+ // nesting (single level)
341
+ // target items inside expanded subgroups
342
+ &[aria-expanded] {
343
+ + .ActionList--subGroup {
344
+ @media screen and (prefers-reduced-motion: no-preference) {
345
+ transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
346
+ }
347
+
348
+ .ActionList-content {
349
+ padding-left: $spacer-4;
350
+ }
351
+ }
352
+
353
+ // has 16px leading visual
354
+ &.ActionList-content--visual16 + .ActionList--subGroup {
355
+ .ActionList-content {
356
+ padding-left: $spacer-5;
357
+ }
358
+ }
359
+
360
+ // has 20px leading visual
361
+ &.ActionList-content--visual20 + .ActionList--subGroup {
362
+ .ActionList-content {
363
+ padding-left: $spacer-2 * 4.5; // 36px
364
+ }
365
+ }
366
+
367
+ // has 24px leading visual
368
+ &.ActionList-content--visual24 + .ActionList--subGroup {
369
+ .ActionList-content {
370
+ padding-left: $spacer-6;
371
+ }
372
+ }
373
+ }
374
+
375
+ &[aria-expanded='true'] {
376
+ .ActionList-item-collapseIcon {
377
+ transition: transform 120ms linear;
378
+ transform: scaleY(-1);
379
+ }
380
+
381
+ + .ActionList--subGroup {
382
+ height: auto;
383
+ overflow: visible;
384
+ visibility: visible;
385
+ opacity: 1;
386
+ transform: translateY(0);
387
+ }
388
+
389
+ &.ActionList-content--hasActiveSubItem {
390
+ > .ActionList-item-label {
391
+ font-weight: $font-weight-bold;
392
+ }
393
+ }
394
+ }
395
+
396
+ &[aria-expanded='false'] {
397
+ .ActionList-item-collapseIcon {
398
+ transition: transform 120ms linear;
399
+ transform: scaleY(1);
400
+ }
401
+
402
+ + .ActionList--subGroup {
403
+ height: 0;
404
+ overflow: hidden;
405
+ visibility: hidden;
406
+ opacity: 0;
407
+ transform: translateY(-$spacer-3);
408
+ }
409
+
410
+ // show active indicator on parent collapse if child is active
411
+ &.ActionList-content--hasActiveSubItem {
412
+ background: var(--color-action-list-item-default-selected-bg);
413
+
414
+ .ActionList-item-label {
415
+ font-weight: $font-weight-bold;
416
+ }
417
+
418
+ &::before,
419
+ + .ActionList-item::before {
420
+ visibility: hidden;
421
+ }
422
+
423
+ // blue accent line
424
+ &::after {
425
+ @include activeIndicatorLine;
426
+ }
427
+ }
428
+ }
429
+
422
430
  // sizes
423
431
 
424
432
  &.ActionList-content--sizeMedium {
425
433
  // 44px total height
434
+ // stylelint-disable-next-line primer/spacing
426
435
  padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
427
436
  }
428
437
 
429
438
  &.ActionList-content--sizeLarge {
430
439
  // 48px total height
440
+ // stylelint-disable-next-line primer/spacing
431
441
  padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
432
442
  }
433
443
 
@@ -437,6 +447,7 @@
437
447
 
438
448
  // On pointer:coarse (mobile), all list items are large
439
449
  @media (pointer: coarse) {
450
+ // stylelint-disable-next-line primer/spacing
440
451
  padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
441
452
  }
442
453
 
@@ -493,6 +504,7 @@
493
504
  align-items: baseline;
494
505
 
495
506
  .ActionList-item-description {
507
+ // stylelint-disable-next-line primer/spacing
496
508
  margin-left: $actionList-item-padding-horizontal;
497
509
  }
498
510
  }
@@ -4,6 +4,17 @@
4
4
  // connecting vertical lines between collapse groups
5
5
  // consistent font-size between nested groups
6
6
 
7
+ @mixin activeIndicatorLine {
8
+ position: absolute;
9
+ top: calc(50% - 12px);
10
+ left: -$actionList-item-padding-horizontal;
11
+ width: $spacer-1;
12
+ height: $spacer-4;
13
+ content: '';
14
+ background: var(--color-accent-fg);
15
+ border-radius: $border-radius;
16
+ }
17
+
7
18
  @mixin treeConnectingLine($left) {
8
19
  position: absolute;
9
20
  left: $left;
@@ -21,6 +32,98 @@
21
32
  }
22
33
 
23
34
  .ActionList-item {
35
+ // collapsible item [aria-expanded]
36
+
37
+ // nesting (single level)
38
+ // target items inside expanded subgroups
39
+ &[aria-expanded] {
40
+ .ActionList--subGroup {
41
+ @media screen and (prefers-reduced-motion: no-preference) {
42
+ transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
43
+ }
44
+
45
+ .ActionList-content {
46
+ padding-left: $spacer-4;
47
+ }
48
+ }
49
+
50
+ // has 16px leading visual
51
+ .ActionList-content--visual16 + .ActionList--subGroup {
52
+ .ActionList-content {
53
+ padding-left: $spacer-5;
54
+ }
55
+ }
56
+
57
+ // has 20px leading visual
58
+ .ActionList-content--visual20 + .ActionList--subGroup {
59
+ .ActionList-content {
60
+ padding-left: $spacer-2 * 4.5; // 36px
61
+ }
62
+ }
63
+
64
+ // has 24px leading visual
65
+ .ActionList-content--visual24 + .ActionList--subGroup {
66
+ .ActionList-content {
67
+ padding-left: $spacer-6;
68
+ }
69
+ }
70
+ }
71
+
72
+ &[aria-expanded='true'] {
73
+ .ActionList-item-collapseIcon {
74
+ transition: transform 120ms linear;
75
+ transform: scaleY(-1);
76
+ }
77
+
78
+ .ActionList--subGroup {
79
+ height: auto;
80
+ overflow: visible;
81
+ visibility: visible;
82
+ opacity: 1;
83
+ transform: translateY(0);
84
+ }
85
+
86
+ &.ActionList-item--hasActiveSubItem {
87
+ > .ActionList-content > .ActionList-item-label {
88
+ font-weight: $font-weight-bold;
89
+ }
90
+ }
91
+ }
92
+
93
+ &[aria-expanded='false'] {
94
+ .ActionList-item-collapseIcon {
95
+ transition: transform 120ms linear;
96
+ transform: scaleY(1);
97
+ }
98
+
99
+ .ActionList--subGroup {
100
+ height: 0;
101
+ overflow: hidden;
102
+ visibility: hidden;
103
+ opacity: 0;
104
+ transform: translateY(-$spacer-3);
105
+ }
106
+
107
+ // show active indicator on parent collapse if child is active
108
+ &.ActionList-item--hasActiveSubItem {
109
+ background: var(--color-action-list-item-default-selected-bg);
110
+
111
+ .ActionList-item-label {
112
+ font-weight: $font-weight-bold;
113
+ }
114
+
115
+ &::before,
116
+ + .ActionList-item::before {
117
+ visibility: hidden;
118
+ }
119
+
120
+ // blue accent line
121
+ &::after {
122
+ @include activeIndicatorLine;
123
+ }
124
+ }
125
+ }
126
+
24
127
  // nesting (infinate levels)
25
128
  // target items inside expanded subgroup
26
129
  &[aria-expanded] {
@@ -30,6 +133,7 @@
30
133
  // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
31
134
  // stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
32
135
  .ActionList-content {
136
+ // stylelint-disable-next-line primer/spacing
33
137
  padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
34
138
  }
35
139
  }
package/base/kbd.scss CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  kbd {
5
5
  display: inline-block;
6
+ // stylelint-disable-next-line primer/spacing
6
7
  padding: ($spacer-1 - 1) ($spacer-1 + 1);
7
8
  font: 11px $mono-font;
8
9
  // stylelint-disable-next-line primer/typography
@@ -225,7 +225,7 @@ code,
225
225
  kbd,
226
226
  pre,
227
227
  samp {
228
- font-family: monospace; /* 1 */
228
+ font-family: monospace, monospace; /* 1 */
229
229
  font-size: 1em; /* 2 */
230
230
  }
231
231
 
@@ -62,12 +62,11 @@ dd {
62
62
  margin-left: 0;
63
63
  }
64
64
 
65
- // Monospaced
65
+ // Code
66
66
  // --------------------------------------------------
67
67
 
68
68
  tt,
69
- code,
70
- samp {
69
+ code {
71
70
  font-family: $mono-font;
72
71
  font-size: $font-size-small;
73
72
  }
@@ -35,6 +35,7 @@
35
35
  }
36
36
 
37
37
  .blankslate-spacious {
38
+ // stylelint-disable-next-line primer/spacing
38
39
  padding: ($spacer-6 * 2) $spacer-6;
39
40
  }
40
41
 
package/box/box.scss CHANGED
@@ -28,6 +28,7 @@
28
28
  .Box-btn-octicon {
29
29
  &.btn-octicon {
30
30
  padding: $spacer-2 $spacer-3;
31
+ // stylelint-disable-next-line primer/spacing
31
32
  margin: (-$spacer-2) (-$spacer-3);
32
33
  line-height: $lh-condensed;
33
34
  }
@@ -59,6 +60,7 @@
59
60
  .Box-btn-octicon {
60
61
  &.btn-octicon {
61
62
  padding: $spacer-4;
63
+ // stylelint-disable-next-line primer/spacing
62
64
  margin: (-$spacer-4) (-$spacer-4);
63
65
  }
64
66
  }
@@ -283,6 +285,7 @@
283
285
  // Increase specificity when btn-octicon is used because comes after .Box in the cascade
284
286
  &.btn-octicon {
285
287
  padding: $spacer-3 $spacer-3;
288
+ // stylelint-disable-next-line primer/spacing
286
289
  margin: (-$spacer-3) (-$spacer-3);
287
290
  line-height: $lh-default; // override btn-octicon line-height
288
291
  }
@@ -294,7 +294,6 @@
294
294
 
295
295
  // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
296
296
  .btn-large {
297
- // stylelint-disable-next-line primer/spacing
298
297
  padding: $em-spacer-6 1.5em;
299
298
  font-size: inherit;
300
299
  line-height: $lh-default;
@@ -1,2 +1,2 @@
1
- .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline .ActionList-item-label::before{content:unset}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{position:relative}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):hover:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}}.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background:var(--color-action-list-item-default-active-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);transform:scale(1)}100%{transform:scale(0.97)}}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}}.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content{z-index:1}@media(hover: hover){.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}@media(hover: hover){.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-expanded] .ActionList--subGroup{transition:opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),transform 160ms cubic-bezier(0.25, 1, 0.5, 1)}}.ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-item[aria-expanded] .ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-item[aria-expanded] .ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-item[aria-expanded] .ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionList-item[aria-expanded=true].ActionList-item--hasActiveSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-16px)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-size:14px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{position:relative;flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
1
+ .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline .ActionList-item-label::before{content:unset}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}@media screen and (prefers-reduced-motion: no-preference){.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{transition:opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),transform 160ms cubic-bezier(0.25, 1, 0.5, 1)}}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionList--tree .ActionList-item[aria-expanded=true].ActionList-item--hasActiveSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-16px)}.ActionList--tree .ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList--tree .ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList--tree .ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList--tree .ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList--tree .ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{position:relative}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):hover:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}}.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background:var(--color-action-list-item-default-active-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);transform:scale(1)}100%{transform:scale(0.97)}}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}}.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content{z-index:1}@media(hover: hover){.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}@media(hover: hover){.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger .ActionList-content:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-content{border:none;background-color:transparent;position:relative;display:grid;padding:6px 8px;font-size:14px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:6px;transition:background 33.333ms linear;touch-action:manipulation;-webkit-tap-highlight-color:transparent;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start;width:100%;text-align:left}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:hover{text-decoration:none}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content[aria-disabled=true] .ActionList-item-label,.ActionList-content[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-content[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover){.ActionList-content[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}@media screen and (prefers-reduced-motion: no-preference){.ActionList-content[aria-expanded]+.ActionList--subGroup{transition:opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),transform 160ms cubic-bezier(0.25, 1, 0.5, 1)}}.ActionList-content[aria-expanded]+.ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-content[aria-expanded].ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-content[aria-expanded].ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-content[aria-expanded].ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList-content[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-content[aria-expanded=true]+.ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionList-content[aria-expanded=true].ActionList-content--hasActiveSubItem>.ActionList-item-label{font-weight:600}.ActionList-content[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-content[aria-expanded=false]+.ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-16px)}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem::before,.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{position:relative;flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{display:block;height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{font-size:12px;font-weight:600;color:var(--color-fg-muted)}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
2
2
  /*# sourceMappingURL=actionlist.css.map */