@jobber/components 6.58.5 → 6.59.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.
package/dist/styles.css CHANGED
@@ -1,82 +1,3 @@
1
- :root {
2
- --public--avatar-size: 32px;
3
- }
4
-
5
- .QJpdGzG71k8- {
6
- --avatar-size: var(--public--avatar-size);
7
- --avatar-border-size: var(--border-base);
8
-
9
- display: -ms-flexbox;
10
-
11
- display: flex;
12
- -ms-flex-align: center;
13
- align-items: center;
14
- -ms-flex-pack: center;
15
- justify-content: center;
16
- width: 32px;
17
- width: var(--avatar-size);
18
- height: 32px;
19
- height: var(--avatar-size);
20
- min-width: 32px;
21
- min-width: var(--avatar-size);
22
- min-height: 32px;
23
- min-height: var(--avatar-size);
24
- border-radius: 100%;
25
- border-radius: var(--radius-circle);
26
- color: hsl(197, 90%, 12%);
27
- color: var(--color-heading);
28
- font-size: 32px;
29
- font-size: var(--avatar-size);
30
- -webkit-font-smoothing: antialiased;
31
- background: no-repeat center center hsl(197, 15%, 43%);
32
- background: no-repeat center center var(--color-base-blue--600);
33
- background-size: cover;
34
- }
35
-
36
- .QJpdGzG71k8-:focus {
37
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
38
- box-shadow: var(--shadow-focus);
39
- outline: none;
40
- }
41
-
42
- .bexrcoi1lZk- {
43
- --avatar-size: 72px;
44
- --avatar-border-size: var(--border-thick);
45
- }
46
-
47
- .xytAyzEap3U- {
48
- --avatar-size: 24px;
49
- }
50
-
51
- /* isDark is dynamic and applies only when background is dark */
52
-
53
- .E0Pgej0H3YA- {
54
- color: rgba(255, 255, 255, 1);
55
- color: var(--color-base-white);
56
- }
57
-
58
- ._85roPa-UvXQ- {
59
- font-size: calc(var(--avatar-size) / 2);
60
- text-transform: uppercase;
61
- }
62
-
63
- .meLH-BCeXWU- {
64
- font-size: calc(var(--avatar-size) / 2.25);
65
- }
66
-
67
- .OsEsZnEnjLc- {
68
- width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));
69
- height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));
70
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 1) inset;
71
- box-shadow: 0 0 0 var(--border-thick) var(--color-surface) inset;
72
- border-style: solid;
73
- border-width: var(--avatar-border-size);
74
- }
75
-
76
- .P6HrDSaI0Ac- {
77
- display: contents;
78
- }
79
-
80
1
  ._7mObJiwfPh4- {
81
2
  position: relative;
82
3
  width: 100%;
@@ -202,367 +123,113 @@
202
123
  text-align: right;
203
124
  }
204
125
 
126
+ .P6HrDSaI0Ac- {
127
+ display: contents;
128
+ }
129
+
205
130
  :root {
206
- --public--button--color-variation: var(--color-interactive);
207
- --public--button--color-variation--hover: var(--color-interactive--hover);
131
+ --public--avatar-size: 32px;
208
132
  }
209
133
 
210
- ._7BLGtYNuJOU- {
211
- --button--color-surface: var(--color-surface);
212
- --button--color-surface--hover: var(--color-surface--hover);
213
- --button--color-primaryLabel: var(--color-surface);
214
- --button--duration-loading: var(--timing-loading--extended);
215
- --button--size: 40px;
134
+ .QJpdGzG71k8- {
135
+ --avatar-size: var(--public--avatar-size);
136
+ --avatar-border-size: var(--border-base);
216
137
 
217
- display: -ms-inline-flexbox;
138
+ display: -ms-flexbox;
218
139
 
219
- display: inline-flex;
220
- min-height: 40px;
221
- min-height: var(--button--size);
222
- box-sizing: border-box;
223
- margin: 0;
224
- border: 1px solid hsl(107, 58%, 33%);
225
- border: var(--border-base) solid var(--public--button--color-variation);
226
- border-radius: 8px;
227
- border-radius: var(--radius-base);
228
- color: hsl(107, 58%, 33%);
229
- color: var(--public--button--color-variation);
230
- -webkit-font-smoothing: antialiased;
231
- line-height: 1;
232
- text-align: center;
233
- -webkit-text-decoration: none;
234
- text-decoration: none;
235
- vertical-align: middle;
236
- background-color: rgba(255, 255, 255, 1);
237
- background-color: var(--button--color-surface);
238
- cursor: pointer;
239
- transition: all 200ms ease-out;
240
- transition: all var(--timing-base) ease-out;
241
- -webkit-appearance: none;
242
- appearance: none;
243
- fill: hsl(107, 58%, 33%);
244
- fill: var(--public--button--color-variation);
140
+ display: flex;
245
141
  -ms-flex-align: center;
246
142
  align-items: center;
247
143
  -ms-flex-pack: center;
248
144
  justify-content: center;
249
- gap: 4px;
250
- gap: var(--space-smaller);
251
- }
252
-
253
- ._7BLGtYNuJOU- * {
254
- fill: inherit !important;
145
+ width: 32px;
146
+ width: var(--avatar-size);
147
+ height: 32px;
148
+ height: var(--avatar-size);
149
+ min-width: 32px;
150
+ min-width: var(--avatar-size);
151
+ min-height: 32px;
152
+ min-height: var(--avatar-size);
153
+ border-radius: 100%;
154
+ border-radius: var(--radius-circle);
155
+ color: hsl(197, 90%, 12%);
156
+ color: var(--color-heading);
157
+ font-size: 32px;
158
+ font-size: var(--avatar-size);
159
+ -webkit-font-smoothing: antialiased;
160
+ background: no-repeat center center hsl(197, 15%, 43%);
161
+ background: no-repeat center center var(--color-base-blue--600);
162
+ background-size: cover;
255
163
  }
256
164
 
257
- ._7BLGtYNuJOU- * {
258
- color: inherit;
259
- /* required to over-ride very specific fill from <Icon> */
165
+ .QJpdGzG71k8-:focus {
166
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
167
+ box-shadow: var(--shadow-focus);
168
+ outline: none;
260
169
  }
261
170
 
262
- ._7BLGtYNuJOU-:hover,
263
- a._7BLGtYNuJOU-:hover,
264
- ._7BLGtYNuJOU-:focus-visible,
265
- a._7BLGtYNuJOU-:focus-visible,
266
- ._7BLGtYNuJOU-:active,
267
- a._7BLGtYNuJOU-:active {
268
- border-color: hsl(107, 65%, 24%);
269
- border-color: var(--public--button--color-variation--hover);
270
- color: hsl(107, 65%, 24%);
271
- color: var(--public--button--color-variation--hover);
272
- fill: hsl(107, 65%, 24%);
273
- fill: var(--public--button--color-variation--hover);
274
- background-color: var(--button--color-surface--hover);
171
+ .bexrcoi1lZk- {
172
+ --avatar-size: 72px;
173
+ --avatar-border-size: var(--border-thick);
275
174
  }
276
175
 
277
- ._7BLGtYNuJOU-:focus-visible,
278
- a._7BLGtYNuJOU-:focus-visible,
279
- ._7BLGtYNuJOU-:active,
280
- a._7BLGtYNuJOU-:active {
281
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
282
- box-shadow: var(--shadow-focus);
283
- outline: transparent;
176
+ .xytAyzEap3U- {
177
+ --avatar-size: 24px;
284
178
  }
285
179
 
286
- /* Variation */
180
+ /* isDark is dynamic and applies only when background is dark */
287
181
 
288
- .amVSJ50CiOo- {
289
- --public--button--color-variation: var(--color-interactive);
290
- --public--button--color-variation--hover: var(--color-interactive--hover);
182
+ .E0Pgej0H3YA- {
183
+ color: rgba(255, 255, 255, 1);
184
+ color: var(--color-base-white);
291
185
  }
292
186
 
293
- .V4GfDDF1ESI-,
294
- .MVT-qs-bO9M- {
295
- --public--button--color-variation: var(--color-interactive--subtle);
296
- --public--button--color-variation--hover: var(
297
- --color-interactive--subtle--hover
298
- );
187
+ ._85roPa-UvXQ- {
188
+ font-size: calc(var(--avatar-size) / 2);
189
+ text-transform: uppercase;
299
190
  }
300
191
 
301
- ._9YS8IK6Inew- {
302
- --public--button--color-variation: var(--color-destructive);
303
- --public--button--color-variation--hover: var(--color-destructive--hover);
192
+ .meLH-BCeXWU- {
193
+ font-size: calc(var(--avatar-size) / 2.25);
304
194
  }
305
195
 
306
- /* Type */
307
-
308
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-),
309
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
310
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
311
- color: var(--button--color-primaryLabel);
312
- background-color: hsl(107, 58%, 33%);
313
- background-color: var(--public--button--color-variation);
314
- fill: var(--button--color-primaryLabel);
196
+ .OsEsZnEnjLc- {
197
+ width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));
198
+ height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));
199
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 1) inset;
200
+ box-shadow: 0 0 0 var(--border-thick) var(--color-surface) inset;
201
+ border-style: solid;
202
+ border-width: var(--avatar-border-size);
315
203
  }
316
204
 
317
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
318
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
319
- background-color: hsl(107, 65%, 24%);
320
- background-color: var(--public--button--color-variation--hover);
205
+ .ucGelS5nNm0- {
206
+ --banner-surface: var(--color-surface);
207
+ --banner-textColor: var(--color-text);
208
+ display: -ms-flexbox;
209
+ display: flex;
210
+ position: relative;
211
+ padding: 12px 16px;
212
+ padding: var(--space-slim) var(--space-base);
213
+ border-radius: 8px;
214
+ border-radius: var(--radius-base);
215
+ color: hsl(198, 35%, 21%);
216
+ color: var(--banner-textColor);
217
+ background-color: rgba(255, 255, 255, 1);
218
+ background-color: var(--banner-surface);
219
+ gap: 8px;
220
+ gap: var(--space-small);
221
+ -ms-flex-align: center;
222
+ align-items: center;
321
223
  }
322
224
 
323
- .MVT-qs-bO9M-.TrzCxs3OEpM- {
324
- color: hsl(107, 58%, 33%);
325
- color: var(--public--button--color-variation);
326
- fill: hsl(107, 58%, 33%);
327
- fill: var(--public--button--color-variation);
328
- background-color: var(--button--color-surface);
225
+ ._5VzH3Cz9ps8- {
226
+ --banner-surface: var(--color-informative--surface);
227
+ --banner-textColor: var(--color-informative--onSurface);
329
228
  }
330
229
 
331
- .QaWL8FLJ5Aw-,
332
- .MVT-qs-bO9M-.TrzCxs3OEpM- {
333
- border-color: hsl(200, 13%, 87%);
334
- border-color: var(--color-border--interactive);
335
- }
336
-
337
- .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
338
- .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
339
- color: hsl(107, 65%, 24%);
340
- color: var(--public--button--color-variation--hover);
341
- background-color: var(--button--color-surface--hover);
342
- fill: hsl(107, 65%, 24%);
343
- fill: var(--public--button--color-variation--hover);
344
- }
345
-
346
- .QaWL8FLJ5Aw-:hover,
347
- .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
348
- .QaWL8FLJ5Aw-:focus-visible,
349
- .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
350
- border-color: hsl(107, 65%, 24%);
351
- border-color: var(--public--button--color-variation--hover);
352
- }
353
-
354
- .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
355
- background-color: var(--button--color-surface);
356
- }
357
-
358
- .MhDYVRl8PUc-,
359
- .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
360
- border-color: transparent;
361
- }
362
-
363
- .MhDYVRl8PUc- {
364
- border-color: transparent;
365
- -webkit-text-decoration: underline;
366
- text-decoration: underline;
367
- text-decoration-thickness: 2px;
368
- text-decoration-thickness: var(--border-thick);
369
- text-underline-offset: 2px;
370
- text-underline-offset: var(--space-smallest);
371
- }
372
-
373
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
374
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible {
375
- background-color: var(--button--color-surface--hover);
376
- }
377
-
378
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
379
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
380
- a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
381
- a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
382
- .MhDYVRl8PUc-:hover,
383
- .MhDYVRl8PUc-:focus-visible,
384
- a.MhDYVRl8PUc-:hover,
385
- a.MhDYVRl8PUc-:focus-visible {
386
- border-color: transparent;
387
- }
388
-
389
- .MVT-qs-bO9M-.MhDYVRl8PUc- {
390
- border-color: transparent;
391
- background-color: transparent;
392
- }
393
-
394
- .MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
395
- .MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible,
396
- a.MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
397
- a.MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible {
398
- color: hsl(197, 90%, 12%);
399
- color: var(--color-interactive--subtle--hover);
400
- background-color: hsl(53, 21%, 93%);
401
- background-color: var(--color-surface--hover);
402
- fill: hsl(197, 90%, 12%);
403
- fill: var(--color-interactive--subtle--hover);
404
- }
405
-
406
- /* Disabled */
407
-
408
- ._7BLGtYNuJOU-.zgRx3ehZ2z8-,
409
- a._7BLGtYNuJOU-.zgRx3ehZ2z8-,
410
- ._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover,
411
- a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
412
- border-color: hsl(0, 0%, 93%);
413
- border-color: var(--color-disabled--secondary);
414
- color: hsl(0, 0%, 72%);
415
- color: var(--color-disabled);
416
- -webkit-user-select: none;
417
- -ms-user-select: none;
418
- user-select: none;
419
- background-color: hsl(0, 0%, 93%);
420
- background-color: var(--color-disabled--secondary);
421
- fill: hsl(0, 0%, 72%);
422
- fill: var(--color-disabled);
423
- pointer-events: none;
424
- cursor: not-allowed;
425
- }
426
-
427
- /* Sizes */
428
-
429
- .lPPuBfTJl5k- {
430
- --button--size: 32px;
431
- padding: 4px 12px;
432
- padding: var(--space-smaller) var(--space-slim);
433
- }
434
-
435
- .VyMJpVxCrxI- {
436
- padding: 0 16px;
437
- padding: 0 var(--space-base);
438
- }
439
-
440
- .Uh29dvNk6I0- {
441
- --button--size: 48px;
442
- padding: 0 calc(16px + 4px);
443
- padding: 0 calc(var(--space-base) + var(--space-smaller));
444
- }
445
-
446
- /* Icon */
447
-
448
- ._7BLGtYNuJOU- svg {
449
- -ms-flex-negative: 0;
450
- flex-shrink: 0;
451
- }
452
-
453
- .H8uYM7Udc4o-:has(> svg:only-child) {
454
- width: var(--button--size);
455
- padding: 0;
456
- }
457
-
458
- /** Icon on Right */
459
-
460
- .H8uYM7Udc4o- > span ~ svg {
461
- margin-right: calc(4px * -1);
462
- margin-right: calc(var(--space-smaller) * -1);
463
- }
464
-
465
- /** Icon on Left */
466
-
467
- .H8uYM7Udc4o- > svg:has(+ span:nth-child(2)) {
468
- margin-left: calc(4px * -1);
469
- margin-left: calc(var(--space-smaller) * -1);
470
- }
471
-
472
- .yBId-F-geAA- {
473
- width: 100%;
474
- }
475
-
476
- .NCs-BISj1XU- {
477
- background-image: linear-gradient(
478
- 135deg,
479
- rgba(0, 0, 0, 0.1) 0%,
480
- rgba(0, 0, 0, 0.1) 25%,
481
- transparent 25%,
482
- transparent 50%,
483
- rgba(0, 0, 0, 0.1) 50%,
484
- rgba(0, 0, 0, 0.1) 75%,
485
- transparent 75%,
486
- transparent 100%
487
- );
488
- background-size: 32px 32px;
489
- background-size: var(--space-larger) var(--space-larger);
490
- pointer-events: none;
491
- cursor: not-allowed;
492
- -webkit-animation-duration: var(--button--duration-loading);
493
- animation-duration: var(--button--duration-loading);
494
- -webkit-animation-iteration-count: infinite;
495
- animation-iteration-count: infinite;
496
- -webkit-animation-name: M0LU-Rdq-MA-;
497
- animation-name: M0LU-Rdq-MA-;
498
- -webkit-animation-timing-function: linear;
499
- animation-timing-function: linear;
500
- }
501
-
502
- .TrzCxs3OEpM-.NCs-BISj1XU-:not(.MVT-qs-bO9M-) {
503
- background-image: linear-gradient(
504
- 135deg,
505
- rgba(255, 255, 255, 0.25) 0%,
506
- rgba(255, 255, 255, 0.25) 25%,
507
- transparent 25%,
508
- transparent 50%,
509
- rgba(255, 255, 255, 0.25) 50%,
510
- rgba(255, 255, 255, 0.25) 75%,
511
- transparent 75%,
512
- transparent 100%
513
- );
514
- }
515
-
516
- @-webkit-keyframes M0LU-Rdq-MA- {
517
- 0% {
518
- background-position: 0 0;
519
- }
520
-
521
- 100% {
522
- background-position: 32px 32px;
523
- background-position: var(--space-larger) var(--space-larger);
524
- }
525
- }
526
-
527
- @keyframes M0LU-Rdq-MA- {
528
- 0% {
529
- background-position: 0 0;
530
- }
531
-
532
- 100% {
533
- background-position: 32px 32px;
534
- background-position: var(--space-larger) var(--space-larger);
535
- }
536
- }
537
-
538
- .ucGelS5nNm0- {
539
- --banner-surface: var(--color-surface);
540
- --banner-textColor: var(--color-text);
541
- display: -ms-flexbox;
542
- display: flex;
543
- position: relative;
544
- padding: 12px 16px;
545
- padding: var(--space-slim) var(--space-base);
546
- border-radius: 8px;
547
- border-radius: var(--radius-base);
548
- color: hsl(198, 35%, 21%);
549
- color: var(--banner-textColor);
550
- background-color: rgba(255, 255, 255, 1);
551
- background-color: var(--banner-surface);
552
- gap: 8px;
553
- gap: var(--space-small);
554
- -ms-flex-align: center;
555
- align-items: center;
556
- }
557
-
558
- ._5VzH3Cz9ps8- {
559
- --banner-surface: var(--color-informative--surface);
560
- --banner-textColor: var(--color-informative--onSurface);
561
- }
562
-
563
- ._16jyB9OYJIs- {
564
- --banner-surface: var(--color-critical--surface);
565
- --banner-textColor: var(--color-critical--onSurface);
230
+ ._16jyB9OYJIs- {
231
+ --banner-surface: var(--color-critical--surface);
232
+ --banner-textColor: var(--color-critical--onSurface);
566
233
  }
567
234
 
568
235
  ._4h-6cc8lZo8- {
@@ -706,25 +373,358 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
706
373
  align-self: center;
707
374
  }
708
375
 
709
- ._5mDLThZ7dBQ- {
710
- --card--accent-color: var(--color-request);
711
- }
712
-
713
- .-n66fUZcIH4- {
714
- --card--accent-color: var(--color-quote);
376
+ :root {
377
+ --public--button--color-variation: var(--color-interactive);
378
+ --public--button--color-variation--hover: var(--color-interactive--hover);
715
379
  }
716
380
 
717
- .vfz0wjl-krU- {
718
- --card--accent-color: var(--color-job);
719
- }
381
+ ._7BLGtYNuJOU- {
382
+ --button--color-surface: var(--color-surface);
383
+ --button--color-surface--hover: var(--color-surface--hover);
384
+ --button--color-primaryLabel: var(--color-surface);
385
+ --button--duration-loading: var(--timing-loading--extended);
386
+ --button--size: 40px;
720
387
 
721
- .UnWnEyw0-jY- {
722
- --card--accent-color: var(--color-invoice);
723
- }
388
+ display: -ms-inline-flexbox;
724
389
 
725
- .iRFdI5utAsU- {
726
- --card--accent-color: var(--color-client);
727
- }
390
+ display: inline-flex;
391
+ min-height: 40px;
392
+ min-height: var(--button--size);
393
+ box-sizing: border-box;
394
+ margin: 0;
395
+ border: 1px solid hsl(107, 58%, 33%);
396
+ border: var(--border-base) solid var(--public--button--color-variation);
397
+ border-radius: 8px;
398
+ border-radius: var(--radius-base);
399
+ color: hsl(107, 58%, 33%);
400
+ color: var(--public--button--color-variation);
401
+ -webkit-font-smoothing: antialiased;
402
+ line-height: 1;
403
+ text-align: center;
404
+ -webkit-text-decoration: none;
405
+ text-decoration: none;
406
+ vertical-align: middle;
407
+ background-color: rgba(255, 255, 255, 1);
408
+ background-color: var(--button--color-surface);
409
+ cursor: pointer;
410
+ transition: all 200ms ease-out;
411
+ transition: all var(--timing-base) ease-out;
412
+ -webkit-appearance: none;
413
+ appearance: none;
414
+ fill: hsl(107, 58%, 33%);
415
+ fill: var(--public--button--color-variation);
416
+ -ms-flex-align: center;
417
+ align-items: center;
418
+ -ms-flex-pack: center;
419
+ justify-content: center;
420
+ gap: 4px;
421
+ gap: var(--space-smaller);
422
+ }
423
+
424
+ ._7BLGtYNuJOU- * {
425
+ fill: inherit !important;
426
+ }
427
+
428
+ ._7BLGtYNuJOU- * {
429
+ color: inherit;
430
+ /* required to over-ride very specific fill from <Icon> */
431
+ }
432
+
433
+ ._7BLGtYNuJOU-:hover,
434
+ a._7BLGtYNuJOU-:hover,
435
+ ._7BLGtYNuJOU-:focus-visible,
436
+ a._7BLGtYNuJOU-:focus-visible,
437
+ ._7BLGtYNuJOU-:active,
438
+ a._7BLGtYNuJOU-:active {
439
+ border-color: hsl(107, 65%, 24%);
440
+ border-color: var(--public--button--color-variation--hover);
441
+ color: hsl(107, 65%, 24%);
442
+ color: var(--public--button--color-variation--hover);
443
+ fill: hsl(107, 65%, 24%);
444
+ fill: var(--public--button--color-variation--hover);
445
+ background-color: var(--button--color-surface--hover);
446
+ }
447
+
448
+ ._7BLGtYNuJOU-:focus-visible,
449
+ a._7BLGtYNuJOU-:focus-visible,
450
+ ._7BLGtYNuJOU-:active,
451
+ a._7BLGtYNuJOU-:active {
452
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
453
+ box-shadow: var(--shadow-focus);
454
+ outline: transparent;
455
+ }
456
+
457
+ /* Variation */
458
+
459
+ .amVSJ50CiOo- {
460
+ --public--button--color-variation: var(--color-interactive);
461
+ --public--button--color-variation--hover: var(--color-interactive--hover);
462
+ }
463
+
464
+ .V4GfDDF1ESI-,
465
+ .MVT-qs-bO9M- {
466
+ --public--button--color-variation: var(--color-interactive--subtle);
467
+ --public--button--color-variation--hover: var(
468
+ --color-interactive--subtle--hover
469
+ );
470
+ }
471
+
472
+ ._9YS8IK6Inew- {
473
+ --public--button--color-variation: var(--color-destructive);
474
+ --public--button--color-variation--hover: var(--color-destructive--hover);
475
+ }
476
+
477
+ /* Type */
478
+
479
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-),
480
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
481
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
482
+ color: var(--button--color-primaryLabel);
483
+ background-color: hsl(107, 58%, 33%);
484
+ background-color: var(--public--button--color-variation);
485
+ fill: var(--button--color-primaryLabel);
486
+ }
487
+
488
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
489
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
490
+ background-color: hsl(107, 65%, 24%);
491
+ background-color: var(--public--button--color-variation--hover);
492
+ }
493
+
494
+ .MVT-qs-bO9M-.TrzCxs3OEpM- {
495
+ color: hsl(107, 58%, 33%);
496
+ color: var(--public--button--color-variation);
497
+ fill: hsl(107, 58%, 33%);
498
+ fill: var(--public--button--color-variation);
499
+ background-color: var(--button--color-surface);
500
+ }
501
+
502
+ .QaWL8FLJ5Aw-,
503
+ .MVT-qs-bO9M-.TrzCxs3OEpM- {
504
+ border-color: hsl(200, 13%, 87%);
505
+ border-color: var(--color-border--interactive);
506
+ }
507
+
508
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
509
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
510
+ color: hsl(107, 65%, 24%);
511
+ color: var(--public--button--color-variation--hover);
512
+ background-color: var(--button--color-surface--hover);
513
+ fill: hsl(107, 65%, 24%);
514
+ fill: var(--public--button--color-variation--hover);
515
+ }
516
+
517
+ .QaWL8FLJ5Aw-:hover,
518
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
519
+ .QaWL8FLJ5Aw-:focus-visible,
520
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
521
+ border-color: hsl(107, 65%, 24%);
522
+ border-color: var(--public--button--color-variation--hover);
523
+ }
524
+
525
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
526
+ background-color: var(--button--color-surface);
527
+ }
528
+
529
+ .MhDYVRl8PUc-,
530
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
531
+ border-color: transparent;
532
+ }
533
+
534
+ .MhDYVRl8PUc- {
535
+ border-color: transparent;
536
+ -webkit-text-decoration: underline;
537
+ text-decoration: underline;
538
+ text-decoration-thickness: 2px;
539
+ text-decoration-thickness: var(--border-thick);
540
+ text-underline-offset: 2px;
541
+ text-underline-offset: var(--space-smallest);
542
+ }
543
+
544
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
545
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible {
546
+ background-color: var(--button--color-surface--hover);
547
+ }
548
+
549
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
550
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
551
+ a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
552
+ a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
553
+ .MhDYVRl8PUc-:hover,
554
+ .MhDYVRl8PUc-:focus-visible,
555
+ a.MhDYVRl8PUc-:hover,
556
+ a.MhDYVRl8PUc-:focus-visible {
557
+ border-color: transparent;
558
+ }
559
+
560
+ .MVT-qs-bO9M-.MhDYVRl8PUc- {
561
+ border-color: transparent;
562
+ background-color: transparent;
563
+ }
564
+
565
+ .MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
566
+ .MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible,
567
+ a.MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
568
+ a.MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible {
569
+ color: hsl(197, 90%, 12%);
570
+ color: var(--color-interactive--subtle--hover);
571
+ background-color: hsl(53, 21%, 93%);
572
+ background-color: var(--color-surface--hover);
573
+ fill: hsl(197, 90%, 12%);
574
+ fill: var(--color-interactive--subtle--hover);
575
+ }
576
+
577
+ /* Disabled */
578
+
579
+ ._7BLGtYNuJOU-.zgRx3ehZ2z8-,
580
+ a._7BLGtYNuJOU-.zgRx3ehZ2z8-,
581
+ ._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover,
582
+ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
583
+ border-color: hsl(0, 0%, 93%);
584
+ border-color: var(--color-disabled--secondary);
585
+ color: hsl(0, 0%, 72%);
586
+ color: var(--color-disabled);
587
+ -webkit-user-select: none;
588
+ -ms-user-select: none;
589
+ user-select: none;
590
+ background-color: hsl(0, 0%, 93%);
591
+ background-color: var(--color-disabled--secondary);
592
+ fill: hsl(0, 0%, 72%);
593
+ fill: var(--color-disabled);
594
+ pointer-events: none;
595
+ cursor: not-allowed;
596
+ }
597
+
598
+ /* Sizes */
599
+
600
+ .lPPuBfTJl5k- {
601
+ --button--size: 32px;
602
+ padding: 4px 12px;
603
+ padding: var(--space-smaller) var(--space-slim);
604
+ }
605
+
606
+ .VyMJpVxCrxI- {
607
+ padding: 0 16px;
608
+ padding: 0 var(--space-base);
609
+ }
610
+
611
+ .Uh29dvNk6I0- {
612
+ --button--size: 48px;
613
+ padding: 0 calc(16px + 4px);
614
+ padding: 0 calc(var(--space-base) + var(--space-smaller));
615
+ }
616
+
617
+ /* Icon */
618
+
619
+ ._7BLGtYNuJOU- svg {
620
+ -ms-flex-negative: 0;
621
+ flex-shrink: 0;
622
+ }
623
+
624
+ .H8uYM7Udc4o-:has(> svg:only-child) {
625
+ width: var(--button--size);
626
+ padding: 0;
627
+ }
628
+
629
+ /** Icon on Right */
630
+
631
+ .H8uYM7Udc4o- > span ~ svg {
632
+ margin-right: calc(4px * -1);
633
+ margin-right: calc(var(--space-smaller) * -1);
634
+ }
635
+
636
+ /** Icon on Left */
637
+
638
+ .H8uYM7Udc4o- > svg:has(+ span:nth-child(2)) {
639
+ margin-left: calc(4px * -1);
640
+ margin-left: calc(var(--space-smaller) * -1);
641
+ }
642
+
643
+ .yBId-F-geAA- {
644
+ width: 100%;
645
+ }
646
+
647
+ .NCs-BISj1XU- {
648
+ background-image: linear-gradient(
649
+ 135deg,
650
+ rgba(0, 0, 0, 0.1) 0%,
651
+ rgba(0, 0, 0, 0.1) 25%,
652
+ transparent 25%,
653
+ transparent 50%,
654
+ rgba(0, 0, 0, 0.1) 50%,
655
+ rgba(0, 0, 0, 0.1) 75%,
656
+ transparent 75%,
657
+ transparent 100%
658
+ );
659
+ background-size: 32px 32px;
660
+ background-size: var(--space-larger) var(--space-larger);
661
+ pointer-events: none;
662
+ cursor: not-allowed;
663
+ -webkit-animation-duration: var(--button--duration-loading);
664
+ animation-duration: var(--button--duration-loading);
665
+ -webkit-animation-iteration-count: infinite;
666
+ animation-iteration-count: infinite;
667
+ -webkit-animation-name: M0LU-Rdq-MA-;
668
+ animation-name: M0LU-Rdq-MA-;
669
+ -webkit-animation-timing-function: linear;
670
+ animation-timing-function: linear;
671
+ }
672
+
673
+ .TrzCxs3OEpM-.NCs-BISj1XU-:not(.MVT-qs-bO9M-) {
674
+ background-image: linear-gradient(
675
+ 135deg,
676
+ rgba(255, 255, 255, 0.25) 0%,
677
+ rgba(255, 255, 255, 0.25) 25%,
678
+ transparent 25%,
679
+ transparent 50%,
680
+ rgba(255, 255, 255, 0.25) 50%,
681
+ rgba(255, 255, 255, 0.25) 75%,
682
+ transparent 75%,
683
+ transparent 100%
684
+ );
685
+ }
686
+
687
+ @-webkit-keyframes M0LU-Rdq-MA- {
688
+ 0% {
689
+ background-position: 0 0;
690
+ }
691
+
692
+ 100% {
693
+ background-position: 32px 32px;
694
+ background-position: var(--space-larger) var(--space-larger);
695
+ }
696
+ }
697
+
698
+ @keyframes M0LU-Rdq-MA- {
699
+ 0% {
700
+ background-position: 0 0;
701
+ }
702
+
703
+ 100% {
704
+ background-position: 32px 32px;
705
+ background-position: var(--space-larger) var(--space-larger);
706
+ }
707
+ }
708
+
709
+ ._5mDLThZ7dBQ- {
710
+ --card--accent-color: var(--color-request);
711
+ }
712
+
713
+ .-n66fUZcIH4- {
714
+ --card--accent-color: var(--color-quote);
715
+ }
716
+
717
+ .vfz0wjl-krU- {
718
+ --card--accent-color: var(--color-job);
719
+ }
720
+
721
+ .UnWnEyw0-jY- {
722
+ --card--accent-color: var(--color-invoice);
723
+ }
724
+
725
+ .iRFdI5utAsU- {
726
+ --card--accent-color: var(--color-client);
727
+ }
728
728
 
729
729
  ._0f94rfGFhgQ- {
730
730
  --card--accent-color: var(--color-blue);
@@ -1124,6 +1124,27 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1124
1124
  gap: var(--space-small);
1125
1125
  }
1126
1126
 
1127
+ .bb-VTS0yML8-,
1128
+ ._2BzdFV5LQvM-,
1129
+ ._60G0BuQ6TY0- {
1130
+ --card--border: none;
1131
+ }
1132
+
1133
+ .bb-VTS0yML8- {
1134
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.1);
1135
+ box-shadow: var(--shadow-low);
1136
+ }
1137
+
1138
+ ._2BzdFV5LQvM- {
1139
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
1140
+ box-shadow: var(--shadow-base);
1141
+ }
1142
+
1143
+ ._60G0BuQ6TY0- {
1144
+ box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.075), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
1145
+ box-shadow: var(--shadow-high);
1146
+ }
1147
+
1127
1148
  .kub1yKbFFN0- {
1128
1149
  display: -ms-flexbox;
1129
1150
  display: flex;
@@ -1258,181 +1279,48 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1258
1279
  flex-direction: column;
1259
1280
  }
1260
1281
 
1261
- .kub1yKbFFN0-.hkpPPbA3sRk- > * {
1262
- width: 100%;
1263
- }
1264
-
1265
- .bb-VTS0yML8-,
1266
- ._2BzdFV5LQvM-,
1267
- ._60G0BuQ6TY0- {
1268
- --card--border: none;
1269
- }
1270
-
1271
- .bb-VTS0yML8- {
1272
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.1);
1273
- box-shadow: var(--shadow-low);
1274
- }
1275
-
1276
- ._2BzdFV5LQvM- {
1277
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
1278
- box-shadow: var(--shadow-base);
1279
- }
1280
-
1281
- ._60G0BuQ6TY0- {
1282
- box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.075), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
1283
- box-shadow: var(--shadow-high);
1284
- }
1285
-
1286
- .Aj6o8FcaKHc- {
1287
- container-name: var(--public-container-name);
1288
- container-type: inline-size;
1289
- width: var(--public-container-width);
1290
- }
1291
-
1292
- .eIsVvlXoWhs- {
1293
- container-type: inline-size;
1294
- width: var(--public-container-apply-width);
1295
- }
1296
-
1297
- .sGSmxHTsTfA- {
1298
- display: -ms-flexbox;
1299
- display: flex;
1300
- -ms-flex-direction: column;
1301
- flex-direction: column;
1302
- min-height: var(--public-cover-min-height);
1303
- padding: var(--public-cover-space);
1304
- }
1305
-
1306
- .sGSmxHTsTfA- > * {
1307
- margin-top: var(--public-cover-space);
1308
- margin-bottom: var(--public-cover-space);
1309
- }
1310
-
1311
- .sGSmxHTsTfA- > :first-child:not(._6S-jbOw7NEA-) {
1312
- -webkit-margin-before: 0;
1313
- margin-top: 0;
1314
- }
1315
-
1316
- .sGSmxHTsTfA- > :last-child:not(._6S-jbOw7NEA-) {
1317
- -webkit-margin-after: 0;
1318
- margin-bottom: 0;
1319
- }
1320
-
1321
- .sGSmxHTsTfA- > ._6S-jbOw7NEA- {
1322
- margin-top: auto;
1323
- margin-bottom: auto;
1324
- }
1325
-
1326
- .YxKKPXAU10s- {
1327
- --checkbox--size: 20px;
1328
- --checkbox--border--checked: var(--color-interactive);
1329
- --checkbox--border--unchecked: var(--color-border--interactive);
1330
- --checkbox--border--hover: var(--color-interactive);
1331
- display: inline-block;
1332
- }
1333
-
1334
- .KxWx-msbH9c- {
1335
- display: -ms-flexbox;
1336
- display: flex;
1337
- -ms-flex-align: start;
1338
- align-items: flex-start;
1339
- -webkit-user-select: none;
1340
- -ms-user-select: none;
1341
- user-select: none;
1342
- cursor: pointer;
1343
- }
1344
-
1345
- .TKr3J-6ARFo- {
1346
- --checkbox--border--checked: var(--color-disabled--secondary);
1347
- --checkbox--border--unchecked: var(--color-disabled--secondary);
1348
- --checkbox--border--hover: var(--color-disabled--secondary);
1349
- cursor: not-allowed;
1350
- }
1351
-
1352
- .NO34ZbhNqhI- {
1353
- position: relative;
1354
- }
1355
-
1356
- .XnCmS-EzK2M- {
1357
- /* Hide checkbox on UI but not screen readers and still allow focus state */
1358
- position: absolute;
1359
- width: 1px;
1360
- height: 1px;
1361
- overflow: hidden;
1362
- clip: rect(0 0 0 0);
1363
- clip-path: inset(100%);
1364
- white-space: nowrap;
1365
- }
1366
-
1367
- ._-8JCQE6SA9s- {
1368
- display: -ms-flexbox;
1369
- display: flex;
1370
- width: var(--checkbox--size);
1371
- height: var(--checkbox--size);
1372
- box-sizing: border-box;
1373
- border: 2px solid var(--checkbox--border--unchecked);
1374
- border: var(--border-thick) solid var(--checkbox--border--unchecked);
1375
- border-radius: 4px;
1376
- border-radius: var(--radius-small);
1377
- background-color: rgba(255, 255, 255, 1);
1378
- background-color: var(--color-surface);
1379
- transition: all 100ms ease-out;
1380
- transition: all var(--timing-quick) ease-out;
1381
- -ms-flex-pack: center;
1382
- justify-content: center;
1383
- -ms-flex-align: center;
1384
- align-items: center;
1385
- }
1386
-
1387
- ._-8JCQE6SA9s-:hover,
1388
- .YxKKPXAU10s-:hover ._-8JCQE6SA9s- {
1389
- border-color: var(--checkbox--border--hover);
1390
- }
1391
-
1392
- .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s-,
1393
- .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- {
1394
- border-color: var(--checkbox--border--checked);
1395
- background-color: hsl(107, 58%, 33%);
1396
- background-color: var(--color-interactive);
1282
+ .kub1yKbFFN0-.hkpPPbA3sRk- > * {
1283
+ width: 100%;
1397
1284
  }
1398
1285
 
1399
- .XnCmS-EzK2M-:focus-visible + ._-8JCQE6SA9s- {
1400
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
1401
- box-shadow: var(--shadow-focus);
1286
+ .Aj6o8FcaKHc- {
1287
+ container-name: var(--public-container-name);
1288
+ container-type: inline-size;
1289
+ width: var(--public-container-width);
1402
1290
  }
1403
1291
 
1404
- .TKr3J-6ARFo- p {
1405
- color: hsl(0, 0%, 72%);
1406
- color: var(--color-disabled);
1292
+ .eIsVvlXoWhs- {
1293
+ container-type: inline-size;
1294
+ width: var(--public-container-apply-width);
1407
1295
  }
1408
1296
 
1409
- .TKr3J-6ARFo- ._-8JCQE6SA9s- > * {
1410
- opacity: 0;
1297
+ .sGSmxHTsTfA- {
1298
+ display: -ms-flexbox;
1299
+ display: flex;
1300
+ -ms-flex-direction: column;
1301
+ flex-direction: column;
1302
+ min-height: var(--public-cover-min-height);
1303
+ padding: var(--public-cover-space);
1411
1304
  }
1412
1305
 
1413
- .TKr3J-6ARFo- .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s-,
1414
- .TKr3J-6ARFo- .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- {
1415
- background-color: hsl(0, 0%, 93%);
1416
- background-color: var(--color-disabled--secondary);
1306
+ .sGSmxHTsTfA- > * {
1307
+ margin-top: var(--public-cover-space);
1308
+ margin-bottom: var(--public-cover-space);
1417
1309
  }
1418
1310
 
1419
- .TKr3J-6ARFo- .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s- > *,
1420
- .TKr3J-6ARFo- .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- > * {
1421
- opacity: 1;
1311
+ .sGSmxHTsTfA- > :first-child:not(._6S-jbOw7NEA-) {
1312
+ -webkit-margin-before: 0;
1313
+ margin-top: 0;
1422
1314
  }
1423
1315
 
1424
- .l8z5TxzVvqA- {
1425
- margin: 0 8px;
1426
- margin: 0 var(--space-small);
1427
- margin-top: 2px;
1428
- margin-top: var(--space-smallest);
1316
+ .sGSmxHTsTfA- > :last-child:not(._6S-jbOw7NEA-) {
1317
+ -webkit-margin-after: 0;
1318
+ margin-bottom: 0;
1429
1319
  }
1430
1320
 
1431
- .DcBfVgpiWa4- {
1432
- margin-bottom: 8px;
1433
- margin-bottom: var(--space-small);
1434
- padding-left: calc(var(--checkbox--size) + 8px);
1435
- padding-left: calc(var(--checkbox--size) + var(--space-small));
1321
+ .sGSmxHTsTfA- > ._6S-jbOw7NEA- {
1322
+ margin-top: auto;
1323
+ margin-bottom: auto;
1436
1324
  }
1437
1325
 
1438
1326
  :root {
@@ -1719,6 +1607,123 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1719
1607
  width: 1px;
1720
1608
  }
1721
1609
 
1610
+ .YxKKPXAU10s- {
1611
+ --checkbox--size: 20px;
1612
+ --checkbox--border--checked: var(--color-interactive);
1613
+ --checkbox--border--unchecked: var(--color-border--interactive);
1614
+ --checkbox--border--hover: var(--color-interactive);
1615
+ display: inline-block;
1616
+ }
1617
+
1618
+ .KxWx-msbH9c- {
1619
+ display: -ms-flexbox;
1620
+ display: flex;
1621
+ -ms-flex-align: start;
1622
+ align-items: flex-start;
1623
+ -webkit-user-select: none;
1624
+ -ms-user-select: none;
1625
+ user-select: none;
1626
+ cursor: pointer;
1627
+ }
1628
+
1629
+ .TKr3J-6ARFo- {
1630
+ --checkbox--border--checked: var(--color-disabled--secondary);
1631
+ --checkbox--border--unchecked: var(--color-disabled--secondary);
1632
+ --checkbox--border--hover: var(--color-disabled--secondary);
1633
+ cursor: not-allowed;
1634
+ }
1635
+
1636
+ .NO34ZbhNqhI- {
1637
+ position: relative;
1638
+ }
1639
+
1640
+ .XnCmS-EzK2M- {
1641
+ /* Hide checkbox on UI but not screen readers and still allow focus state */
1642
+ position: absolute;
1643
+ width: 1px;
1644
+ height: 1px;
1645
+ overflow: hidden;
1646
+ clip: rect(0 0 0 0);
1647
+ clip-path: inset(100%);
1648
+ white-space: nowrap;
1649
+ }
1650
+
1651
+ ._-8JCQE6SA9s- {
1652
+ display: -ms-flexbox;
1653
+ display: flex;
1654
+ width: var(--checkbox--size);
1655
+ height: var(--checkbox--size);
1656
+ box-sizing: border-box;
1657
+ border: 2px solid var(--checkbox--border--unchecked);
1658
+ border: var(--border-thick) solid var(--checkbox--border--unchecked);
1659
+ border-radius: 4px;
1660
+ border-radius: var(--radius-small);
1661
+ background-color: rgba(255, 255, 255, 1);
1662
+ background-color: var(--color-surface);
1663
+ transition: all 100ms ease-out;
1664
+ transition: all var(--timing-quick) ease-out;
1665
+ -ms-flex-pack: center;
1666
+ justify-content: center;
1667
+ -ms-flex-align: center;
1668
+ align-items: center;
1669
+ }
1670
+
1671
+ ._-8JCQE6SA9s-:hover,
1672
+ .YxKKPXAU10s-:hover ._-8JCQE6SA9s- {
1673
+ border-color: var(--checkbox--border--hover);
1674
+ }
1675
+
1676
+ .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s-,
1677
+ .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- {
1678
+ border-color: var(--checkbox--border--checked);
1679
+ background-color: hsl(107, 58%, 33%);
1680
+ background-color: var(--color-interactive);
1681
+ }
1682
+
1683
+ .XnCmS-EzK2M-:focus-visible + ._-8JCQE6SA9s- {
1684
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
1685
+ box-shadow: var(--shadow-focus);
1686
+ }
1687
+
1688
+ .TKr3J-6ARFo- p {
1689
+ color: hsl(0, 0%, 72%);
1690
+ color: var(--color-disabled);
1691
+ }
1692
+
1693
+ .TKr3J-6ARFo- ._-8JCQE6SA9s- > * {
1694
+ opacity: 0;
1695
+ }
1696
+
1697
+ .TKr3J-6ARFo- .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s-,
1698
+ .TKr3J-6ARFo- .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- {
1699
+ background-color: hsl(0, 0%, 93%);
1700
+ background-color: var(--color-disabled--secondary);
1701
+ }
1702
+
1703
+ .TKr3J-6ARFo- .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s- > *,
1704
+ .TKr3J-6ARFo- .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s- > * {
1705
+ opacity: 1;
1706
+ }
1707
+
1708
+ .l8z5TxzVvqA- {
1709
+ margin: 0 8px;
1710
+ margin: 0 var(--space-small);
1711
+ margin-top: 2px;
1712
+ margin-top: var(--space-smallest);
1713
+ }
1714
+
1715
+ .DcBfVgpiWa4- {
1716
+ margin-bottom: 8px;
1717
+ margin-bottom: var(--space-small);
1718
+ padding-left: calc(var(--checkbox--size) + 8px);
1719
+ padding-left: calc(var(--checkbox--size) + var(--space-small));
1720
+ }
1721
+
1722
+ .cftWh-00zXM- {
1723
+ padding: 0;
1724
+ padding: var(--public-content--padding, 0);
1725
+ }
1726
+
1722
1727
  .xxU2WqkpXZU- {
1723
1728
  position: fixed;
1724
1729
  top: 0;
@@ -1734,11 +1739,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1734
1739
  display: inline-block;
1735
1740
  }
1736
1741
 
1737
- .cftWh-00zXM- {
1738
- padding: 0;
1739
- padding: var(--public-content--padding, 0);
1740
- }
1741
-
1742
1742
  .B1cBkstNQhM- > :not(:last-child) {
1743
1743
  margin-bottom: 1px;
1744
1744
  margin-bottom: var(--space-minuscule);
@@ -2472,16 +2472,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
2472
2472
  opacity: 0.375;
2473
2473
  }
2474
2474
 
2475
- ._50Jq09W07gg- {
2476
- display: grid;
2477
- width: 100%;
2478
- height: 100%;
2479
- overflow: hidden;
2480
- grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);
2481
- grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);
2482
- grid-template-rows: 1fr;
2483
- }
2484
-
2485
2475
  .evwHY54TitY- {
2486
2476
  height: 1px;
2487
2477
  height: var(--space-minuscule);
@@ -2618,100 +2608,55 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
2618
2608
  --public-content--padding: 0;
2619
2609
  }
2620
2610
 
2621
- .o-b2tWQIZvw- {
2622
- display: -ms-flexbox;
2623
- display: flex;
2624
- }
2625
-
2626
- .NZtPT-dXFeQ- {
2627
- -ms-flex: 1 1 auto;
2628
- flex: 1 1 auto;
2629
- -ms-flex-item-align: center;
2630
- align-self: center;
2631
- padding-right: 16px;
2632
- padding-right: var(--space-base);
2633
- transition: opacity 200ms;
2634
- transition: opacity var(--timing-base);
2635
- }
2636
-
2637
- .tDW-yhISuqQ- {
2638
- -ms-flex: 0 0 auto;
2639
- flex: 0 0 auto;
2640
- -ms-flex-item-align: start;
2641
- align-self: flex-start;
2642
- position: relative;
2643
- }
2644
-
2645
- .Y-aeIDV1dL4- {
2646
- position: absolute;
2647
- top: 100%;
2648
- width: 100%;
2649
- margin-top: 2px;
2650
- margin-top: var(--space-smallest);
2651
- text-align: center;
2652
- }
2653
-
2654
- .iXr88Nr7vpk- {
2655
- opacity: 0.5;
2656
- }
2657
-
2658
- .GSDyu-sASro- {
2659
- opacity: 1;
2660
- }
2661
-
2662
- .pEdV7Oo29SE- {
2663
- display: grid;
2664
- /* If this gets wrapped in a flex container, it should take the remaining space */
2665
- -ms-flex: 1;
2666
- flex: 1;
2667
- }
2668
-
2669
- .ftl4BEGpmyA- {
2670
- gap: 2px;
2671
- gap: var(--space-smallest);
2672
- }
2673
-
2674
- .ikaEWOhu3ZI- {
2675
- gap: 4px;
2676
- gap: var(--space-smaller);
2677
- }
2678
-
2679
- .V9xi4msiJlM- {
2680
- gap: 8px;
2681
- gap: var(--space-small);
2682
- }
2683
-
2684
- .Jzbdj1Ja38E- {
2685
- gap: 16px;
2686
- gap: var(--space-base);
2611
+ ._50Jq09W07gg- {
2612
+ display: grid;
2613
+ width: 100%;
2614
+ height: 100%;
2615
+ overflow: hidden;
2616
+ grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);
2617
+ grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);
2618
+ grid-template-rows: 1fr;
2687
2619
  }
2688
2620
 
2689
- .cLrQOLCo-z8- {
2690
- gap: 24px;
2691
- gap: var(--space-large);
2621
+ .o-b2tWQIZvw- {
2622
+ display: -ms-flexbox;
2623
+ display: flex;
2692
2624
  }
2693
2625
 
2694
- .VZokN5bjMl0- {
2695
- gap: 0;
2626
+ .NZtPT-dXFeQ- {
2627
+ -ms-flex: 1 1 auto;
2628
+ flex: 1 1 auto;
2629
+ -ms-flex-item-align: center;
2630
+ align-self: center;
2631
+ padding-right: 16px;
2632
+ padding-right: var(--space-base);
2633
+ transition: opacity 200ms;
2634
+ transition: opacity var(--timing-base);
2696
2635
  }
2697
2636
 
2698
- ._9CW5WRJdMFo- {
2699
- -ms-flex-align: start;
2700
- align-items: start;
2637
+ .tDW-yhISuqQ- {
2638
+ -ms-flex: 0 0 auto;
2639
+ flex: 0 0 auto;
2640
+ -ms-flex-item-align: start;
2641
+ align-self: flex-start;
2642
+ position: relative;
2701
2643
  }
2702
2644
 
2703
- .zVzX2gVWEGw- {
2704
- -ms-flex-align: center;
2705
- align-items: center;
2645
+ .Y-aeIDV1dL4- {
2646
+ position: absolute;
2647
+ top: 100%;
2648
+ width: 100%;
2649
+ margin-top: 2px;
2650
+ margin-top: var(--space-smallest);
2651
+ text-align: center;
2706
2652
  }
2707
2653
 
2708
- .cnhrFSJxBCo- {
2709
- -ms-flex-align: end;
2710
- align-items: end;
2654
+ .iXr88Nr7vpk- {
2655
+ opacity: 0.5;
2711
2656
  }
2712
2657
 
2713
- .ViFkIUcS6PM- {
2714
- font-style: normal;
2658
+ .GSDyu-sASro- {
2659
+ opacity: 1;
2715
2660
  }
2716
2661
 
2717
2662
  :root {
@@ -3199,6 +3144,61 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
3199
3144
  background: linear-gradient(to bottom, transparent, var(--color-surface) 60%);
3200
3145
  }
3201
3146
 
3147
+ .pEdV7Oo29SE- {
3148
+ display: grid;
3149
+ /* If this gets wrapped in a flex container, it should take the remaining space */
3150
+ -ms-flex: 1;
3151
+ flex: 1;
3152
+ }
3153
+
3154
+ .ftl4BEGpmyA- {
3155
+ gap: 2px;
3156
+ gap: var(--space-smallest);
3157
+ }
3158
+
3159
+ .ikaEWOhu3ZI- {
3160
+ gap: 4px;
3161
+ gap: var(--space-smaller);
3162
+ }
3163
+
3164
+ .V9xi4msiJlM- {
3165
+ gap: 8px;
3166
+ gap: var(--space-small);
3167
+ }
3168
+
3169
+ .Jzbdj1Ja38E- {
3170
+ gap: 16px;
3171
+ gap: var(--space-base);
3172
+ }
3173
+
3174
+ .cLrQOLCo-z8- {
3175
+ gap: 24px;
3176
+ gap: var(--space-large);
3177
+ }
3178
+
3179
+ .VZokN5bjMl0- {
3180
+ gap: 0;
3181
+ }
3182
+
3183
+ ._9CW5WRJdMFo- {
3184
+ -ms-flex-align: start;
3185
+ align-items: start;
3186
+ }
3187
+
3188
+ .zVzX2gVWEGw- {
3189
+ -ms-flex-align: center;
3190
+ align-items: center;
3191
+ }
3192
+
3193
+ .cnhrFSJxBCo- {
3194
+ -ms-flex-align: end;
3195
+ align-items: end;
3196
+ }
3197
+
3198
+ .ViFkIUcS6PM- {
3199
+ font-style: normal;
3200
+ }
3201
+
3202
3202
  .y9T1gWK9SHY- {
3203
3203
  --file-card--background-color: var(--color-surface);
3204
3204
  --file-card--base-padding: var(--space-small);
@@ -3520,58 +3520,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
3520
3520
  min-width: 100px;
3521
3521
  }
3522
3522
 
3523
- ._6UhvrmKZdns-,
3524
- .f0hnJ8v-iHE- {
3525
- display: -ms-flexbox;
3526
- display: flex;
3527
- -ms-flex-wrap: wrap;
3528
- flex-wrap: wrap;
3529
- gap: 8px;
3530
- gap: var(--space-small);
3531
- }
3532
-
3533
- .f0hnJ8v-iHE- {
3534
- gap: 16px;
3535
- gap: var(--space-base);
3536
- }
3537
-
3538
- .EvHA4-Q7O9g- {
3539
- display: -ms-flexbox;
3540
- display: flex;
3541
- }
3542
-
3543
- .VWW-3mSlumg- {
3544
- width: 56px;
3545
- height: 56px;
3546
- }
3547
-
3548
- .DNhegGxB75M- {
3549
- width: 168px;
3550
- height: 168px;
3551
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
3552
- box-shadow: var(--shadow-base);
3553
- }
3554
-
3555
- .V-24AGDyie4- {
3556
- -ms-flex-align: center;
3557
- align-items: center;
3558
- }
3559
-
3560
- .H0zdYNTapmM- {
3561
- -ms-flex-align: start;
3562
- align-items: start;
3563
- }
3564
-
3565
- .O5VtcGWRV3M- {
3566
- -ms-flex-align: end;
3567
- align-items: end;
3568
- }
3569
-
3570
- .wVv5gaWrouI- {
3571
- -ms-flex-align: stretch;
3572
- align-items: stretch;
3573
- }
3574
-
3575
3523
  ._0X4jj5NERa4- {
3576
3524
  display: grid;
3577
3525
  grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -3589,117 +3537,43 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
3589
3537
  }
3590
3538
  }
3591
3539
 
3592
- @media (--medium-screens-and-up) {
3593
- .d3vl57tdCWA- {
3594
- gap: 24px;
3595
- gap: var(--space-large);
3596
- }
3597
- }
3598
-
3599
- .CMahTsC0SPE- {
3600
- display: -ms-flexbox;
3601
- display: flex;
3602
- -ms-flex-align: center;
3603
- align-items: center;
3604
- }
3605
-
3606
- .CMahTsC0SPE- > *:not(:last-child) {
3607
- margin-right: 8px;
3608
- margin-right: var(--space-small);
3609
- }
3610
-
3611
- .VOVr4KEFeVk- {
3612
- position: relative;
3613
- }
3614
-
3615
- .HzGL7-Sfok4- {
3616
- display: -ms-flexbox;
3617
- display: flex;
3618
- position: relative;
3619
- height: 100%;
3620
- margin: 0 8px;
3621
- margin: 0 var(--space-small);
3622
- -ms-flex-align: center;
3623
- align-items: center;
3624
- }
3625
-
3626
- .Cflv-yL6aVQ- {
3627
- position: absolute;
3628
- top: 0;
3629
- right: 0;
3630
- bottom: 0;
3631
- left: 0;
3632
- }
3633
-
3634
- .Cflv-yL6aVQ-::before {
3635
- content: "";
3636
- display: block;
3637
- position: absolute;
3638
- top: 0;
3639
- right: 0;
3640
- bottom: 0;
3641
- left: 0;
3642
- border-radius: 100%;
3643
- border-radius: var(--radius-circle);
3644
- background-color: hsl(198, 96%, 9%);
3645
- background-color: var(--color-blue--dark);
3646
- opacity: 0.3;
3647
- mix-blend-mode: multiply;
3648
- }
3649
-
3650
- .fSDkYM-382I- {
3651
- font-size: 0;
3652
- line-height: 0;
3653
- -webkit-user-select: none;
3654
- -ms-user-select: none;
3655
- user-select: none;
3656
- cursor: pointer;
3657
- }
3658
-
3659
- .fSDkYM-382I-:focus,
3660
- .fSDkYM-382I-:focus-within {
3661
- border-color: hsl(198, 12%, 57%);
3662
- border-color: var(--color-focus);
3663
- outline: none;
3664
- }
3665
-
3666
- .yT6m1v71VK8- {
3667
- padding: 16px;
3668
- padding: var(--space-base);
3669
- border: 2px dashed hsl(200, 13%, 87%);
3670
- border: var(--border-thick) dashed var(--color-border--interactive);
3671
- border-radius: 16px;
3672
- border-radius: var(--radius-large);
3673
- text-align: center;
3674
- }
3675
-
3676
- .yT6m1v71VK8-.fCb0O1wAjR0- {
3677
- border-color: hsl(198, 12%, 57%);
3678
- border-color: var(--color-focus);
3679
- background-color: hsl(53, 21%, 93%);
3680
- background-color: var(--color-surface--hover);
3681
- }
3682
-
3683
- .yT6m1v71VK8-.Cm5wIem0XQI- {
3684
- border-color: hsl(6, 64%, 51%);
3685
- border-color: var(--color-critical);
3686
- }
3687
-
3688
- .wyjYhAlF1qA- {
3540
+ @media (--medium-screens-and-up) {
3541
+ .d3vl57tdCWA- {
3542
+ gap: 24px;
3543
+ gap: var(--space-large);
3544
+ }
3545
+ }
3546
+
3547
+ ._6UhvrmKZdns-,
3548
+ .f0hnJ8v-iHE- {
3689
3549
  display: -ms-flexbox;
3690
3550
  display: flex;
3691
- -ms-flex-direction: column;
3692
- flex-direction: column;
3551
+ -ms-flex-wrap: wrap;
3552
+ flex-wrap: wrap;
3553
+ gap: 8px;
3554
+ gap: var(--space-small);
3693
3555
  }
3694
3556
 
3695
- .sAxF04DcAi4- {
3557
+ .f0hnJ8v-iHE- {
3558
+ gap: 16px;
3559
+ gap: var(--space-base);
3560
+ }
3561
+
3562
+ .EvHA4-Q7O9g- {
3696
3563
  display: -ms-flexbox;
3697
3564
  display: flex;
3698
- -ms-flex-align: center;
3699
- align-items: center;
3700
- -ms-flex-pack: center;
3701
- justify-content: center;
3702
- height: 100%;
3565
+ }
3566
+
3567
+ .VWW-3mSlumg- {
3568
+ width: 56px;
3569
+ height: 56px;
3570
+ }
3571
+
3572
+ .DNhegGxB75M- {
3573
+ width: 168px;
3574
+ height: 168px;
3575
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
3576
+ box-shadow: var(--shadow-base);
3703
3577
  }
3704
3578
 
3705
3579
  .M01SZy5EYFg- {
@@ -3854,6 +3728,132 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
3854
3728
  background-color: var(--color-request--surface);
3855
3729
  }
3856
3730
 
3731
+ .V-24AGDyie4- {
3732
+ -ms-flex-align: center;
3733
+ align-items: center;
3734
+ }
3735
+
3736
+ .H0zdYNTapmM- {
3737
+ -ms-flex-align: start;
3738
+ align-items: start;
3739
+ }
3740
+
3741
+ .O5VtcGWRV3M- {
3742
+ -ms-flex-align: end;
3743
+ align-items: end;
3744
+ }
3745
+
3746
+ .wVv5gaWrouI- {
3747
+ -ms-flex-align: stretch;
3748
+ align-items: stretch;
3749
+ }
3750
+
3751
+ .CMahTsC0SPE- {
3752
+ display: -ms-flexbox;
3753
+ display: flex;
3754
+ -ms-flex-align: center;
3755
+ align-items: center;
3756
+ }
3757
+
3758
+ .CMahTsC0SPE- > *:not(:last-child) {
3759
+ margin-right: 8px;
3760
+ margin-right: var(--space-small);
3761
+ }
3762
+
3763
+ .VOVr4KEFeVk- {
3764
+ position: relative;
3765
+ }
3766
+
3767
+ .HzGL7-Sfok4- {
3768
+ display: -ms-flexbox;
3769
+ display: flex;
3770
+ position: relative;
3771
+ height: 100%;
3772
+ margin: 0 8px;
3773
+ margin: 0 var(--space-small);
3774
+ -ms-flex-align: center;
3775
+ align-items: center;
3776
+ }
3777
+
3778
+ .Cflv-yL6aVQ- {
3779
+ position: absolute;
3780
+ top: 0;
3781
+ right: 0;
3782
+ bottom: 0;
3783
+ left: 0;
3784
+ }
3785
+
3786
+ .Cflv-yL6aVQ-::before {
3787
+ content: "";
3788
+ display: block;
3789
+ position: absolute;
3790
+ top: 0;
3791
+ right: 0;
3792
+ bottom: 0;
3793
+ left: 0;
3794
+ border-radius: 100%;
3795
+ border-radius: var(--radius-circle);
3796
+ background-color: hsl(198, 96%, 9%);
3797
+ background-color: var(--color-blue--dark);
3798
+ opacity: 0.3;
3799
+ mix-blend-mode: multiply;
3800
+ }
3801
+
3802
+ .fSDkYM-382I- {
3803
+ font-size: 0;
3804
+ line-height: 0;
3805
+ -webkit-user-select: none;
3806
+ -ms-user-select: none;
3807
+ user-select: none;
3808
+ cursor: pointer;
3809
+ }
3810
+
3811
+ .fSDkYM-382I-:focus,
3812
+ .fSDkYM-382I-:focus-within {
3813
+ border-color: hsl(198, 12%, 57%);
3814
+ border-color: var(--color-focus);
3815
+ outline: none;
3816
+ }
3817
+
3818
+ .yT6m1v71VK8- {
3819
+ padding: 16px;
3820
+ padding: var(--space-base);
3821
+ border: 2px dashed hsl(200, 13%, 87%);
3822
+ border: var(--border-thick) dashed var(--color-border--interactive);
3823
+ border-radius: 16px;
3824
+ border-radius: var(--radius-large);
3825
+ text-align: center;
3826
+ }
3827
+
3828
+ .yT6m1v71VK8-.fCb0O1wAjR0- {
3829
+ border-color: hsl(198, 12%, 57%);
3830
+ border-color: var(--color-focus);
3831
+ background-color: hsl(53, 21%, 93%);
3832
+ background-color: var(--color-surface--hover);
3833
+ }
3834
+
3835
+ .yT6m1v71VK8-.Cm5wIem0XQI- {
3836
+ border-color: hsl(6, 64%, 51%);
3837
+ border-color: var(--color-critical);
3838
+ }
3839
+
3840
+ .wyjYhAlF1qA- {
3841
+ display: -ms-flexbox;
3842
+ display: flex;
3843
+ -ms-flex-direction: column;
3844
+ flex-direction: column;
3845
+ }
3846
+
3847
+ .sAxF04DcAi4- {
3848
+ display: -ms-flexbox;
3849
+ display: flex;
3850
+ -ms-flex-align: center;
3851
+ align-items: center;
3852
+ -ms-flex-pack: center;
3853
+ justify-content: center;
3854
+ height: 100%;
3855
+ }
3856
+
3857
3857
  .RwhScbXCXw0- > *:not(:last-child) {
3858
3858
  margin-bottom: -1px !important;
3859
3859
  }
@@ -3907,77 +3907,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
3907
3907
  --public-field--bottom-right-radius: var(--radius-base);
3908
3908
  }
3909
3909
 
3910
- ._78-Lxj78xPg- {
3911
- display: -ms-flexbox;
3912
- display: flex;
3913
- -ms-flex-align: center;
3914
- align-items: center;
3915
- position: absolute;
3916
- top: 0;
3917
- right: 0;
3918
- left: 0;
3919
- z-index: 1;
3920
- z-index: var(--elevation-base);
3921
- height: var(--field--height);
3922
- padding-top: var(--field--padding-top);
3923
- padding-bottom: var(--field--padding-bottom);
3924
- padding-left: var(--field--padding-left);
3925
- padding-right: var(--field--padding-right);
3926
- color: hsl(0, 0%, 72%);
3927
- color: var(--color-grey);
3928
- font-family: inherit;
3929
- font-size: inherit;
3930
- line-height: var(--field--value-lineHeight);
3931
- pointer-events: none;
3932
- }
3933
-
3934
- .GoiXVXaU1Qs- {
3935
- visibility: hidden;
3936
- opacity: 0;
3937
- }
3938
-
3939
- input.oOrjwubmsVA- {
3940
- padding-left: calc(var(--field--padding-left) + 4px);
3941
- padding-left: calc(var(--field--padding-left) + var(--space-smaller));
3942
- }
3943
-
3944
- .fO5j-2U5rfE- {
3945
- margin-top: 4px;
3946
- margin-top: var(--space-smaller);
3947
- }
3948
-
3949
- .lNpgPQh76MY- {
3950
- display: -ms-flexbox;
3951
- display: flex;
3952
- -ms-flex-align: center;
3953
- align-items: center;
3954
- padding: 4px;
3955
- padding: var(--space-smaller);
3956
- padding-left: 0;
3957
- }
3958
-
3959
- .lNpgPQh76MY- > svg {
3960
- margin-right: 4px;
3961
- margin-right: var(--space-smaller);
3962
- -ms-flex-negative: 0;
3963
- flex-shrink: 0;
3964
- -ms-flex-item-align: start;
3965
- align-self: flex-start;
3966
- }
3967
-
3968
- .lNpgPQh76MY-:focus {
3969
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
3970
- box-shadow: var(--shadow-focus);
3971
- outline: none;
3972
- }
3973
-
3974
- ._8oxipSwiMJQ- {
3975
- color: hsl(107, 58%, 33%);
3976
- color: var(--color-interactive);
3977
- -webkit-text-decoration: underline;
3978
- text-decoration: underline;
3979
- }
3980
-
3981
3910
  /**
3982
3911
  * This class is added to the root html element when opening a LightBox.
3983
3912
  * When the user tries to print the page, this prevents the LightBox content
@@ -4287,33 +4216,75 @@ html.atlantisLightBoxActive {
4287
4216
  margin-right: var(--space-base);
4288
4217
  }
4289
4218
 
4290
- .htH4y2JBFNQ- {
4291
- position: sticky;
4292
- top: 0;
4293
- padding: 8px 16px;
4294
- padding: var(--space-small) var(--space-base);
4295
- border-bottom: 1px solid hsl(197, 90%, 12%);
4296
- border-bottom: var(--border-base) solid var(--color-border--section);
4219
+ .fO5j-2U5rfE- {
4220
+ margin-top: 4px;
4221
+ margin-top: var(--space-smaller);
4222
+ }
4223
+
4224
+ .lNpgPQh76MY- {
4225
+ display: -ms-flexbox;
4226
+ display: flex;
4227
+ -ms-flex-align: center;
4228
+ align-items: center;
4229
+ padding: 4px;
4230
+ padding: var(--space-smaller);
4231
+ padding-left: 0;
4232
+ }
4233
+
4234
+ .lNpgPQh76MY- > svg {
4235
+ margin-right: 4px;
4236
+ margin-right: var(--space-smaller);
4237
+ -ms-flex-negative: 0;
4238
+ flex-shrink: 0;
4239
+ -ms-flex-item-align: start;
4240
+ align-self: flex-start;
4241
+ }
4242
+
4243
+ .lNpgPQh76MY-:focus {
4244
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4245
+ box-shadow: var(--shadow-focus);
4246
+ outline: none;
4297
4247
  }
4298
4248
 
4299
- .sFlecO8-wnY- {
4300
- margin: 0;
4301
- padding: 0;
4302
- list-style: none;
4249
+ ._78-Lxj78xPg- {
4250
+ display: -ms-flexbox;
4251
+ display: flex;
4252
+ -ms-flex-align: center;
4253
+ align-items: center;
4254
+ position: absolute;
4255
+ top: 0;
4256
+ right: 0;
4257
+ left: 0;
4258
+ z-index: 1;
4259
+ z-index: var(--elevation-base);
4260
+ height: var(--field--height);
4261
+ padding-top: var(--field--padding-top);
4262
+ padding-bottom: var(--field--padding-bottom);
4263
+ padding-left: var(--field--padding-left);
4264
+ padding-right: var(--field--padding-right);
4265
+ color: hsl(0, 0%, 72%);
4266
+ color: var(--color-grey);
4267
+ font-family: inherit;
4268
+ font-size: inherit;
4269
+ line-height: var(--field--value-lineHeight);
4270
+ pointer-events: none;
4303
4271
  }
4304
4272
 
4305
- .dbZy6dviEis-:not(:last-child) {
4306
- border-bottom: 1px solid hsl(200, 13%, 87%);
4307
- border-bottom: var(--border-base) solid var(--color-border);
4273
+ .GoiXVXaU1Qs- {
4274
+ visibility: hidden;
4275
+ opacity: 0;
4308
4276
  }
4309
4277
 
4310
- .vz43PAcPYt0- {
4311
- position: relative;
4278
+ input.oOrjwubmsVA- {
4279
+ padding-left: calc(var(--field--padding-left) + 4px);
4280
+ padding-left: calc(var(--field--padding-left) + var(--space-smaller));
4312
4281
  }
4313
4282
 
4314
- .vz43PAcPYt0-:not(:last-child) .sFlecO8-wnY- {
4315
- padding-bottom: 24px;
4316
- padding-bottom: var(--space-large);
4283
+ ._8oxipSwiMJQ- {
4284
+ color: hsl(107, 58%, 33%);
4285
+ color: var(--color-interactive);
4286
+ -webkit-text-decoration: underline;
4287
+ text-decoration: underline;
4317
4288
  }
4318
4289
 
4319
4290
  .rJffaV10x20- {
@@ -4415,6 +4386,201 @@ html.atlantisLightBoxActive {
4415
4386
  white-space: nowrap;
4416
4387
  }
4417
4388
 
4389
+ .htH4y2JBFNQ- {
4390
+ position: sticky;
4391
+ top: 0;
4392
+ padding: 8px 16px;
4393
+ padding: var(--space-small) var(--space-base);
4394
+ border-bottom: 1px solid hsl(197, 90%, 12%);
4395
+ border-bottom: var(--border-base) solid var(--color-border--section);
4396
+ }
4397
+
4398
+ .sFlecO8-wnY- {
4399
+ margin: 0;
4400
+ padding: 0;
4401
+ list-style: none;
4402
+ }
4403
+
4404
+ .dbZy6dviEis-:not(:last-child) {
4405
+ border-bottom: 1px solid hsl(200, 13%, 87%);
4406
+ border-bottom: var(--border-base) solid var(--color-border);
4407
+ }
4408
+
4409
+ .vz43PAcPYt0- {
4410
+ position: relative;
4411
+ }
4412
+
4413
+ .vz43PAcPYt0-:not(:last-child) .sFlecO8-wnY- {
4414
+ padding-bottom: 24px;
4415
+ padding-bottom: var(--space-large);
4416
+ }
4417
+
4418
+ :root {
4419
+ --modal--width: 600px;
4420
+ --modal--padding-horizontal: var(--space-base);
4421
+ --modal--padding-vertical: var(--space-base);
4422
+ --modal--padding: var(--modal--padding-vertical)
4423
+ var(--modal--padding-horizontal);
4424
+
4425
+ --modal--shadow: var(--shadow-base);
4426
+ }
4427
+
4428
+ @media (min-width: 768px) {
4429
+
4430
+ :root {
4431
+ --modal--padding-horizontal: var(--space-large);
4432
+ --modal--padding-vertical: var(--space-large);
4433
+ --modal--padding: var(--modal--padding-vertical)
4434
+ var(--modal--padding-horizontal);
4435
+ }
4436
+ }
4437
+
4438
+ @media (--medium-screens-and-up) {
4439
+
4440
+ :root {
4441
+ --modal--padding-horizontal: var(--space-large);
4442
+ --modal--padding-vertical: var(--space-large);
4443
+ --modal--padding: var(--modal--padding-vertical)
4444
+ var(--modal--padding-horizontal);
4445
+ }
4446
+ }
4447
+
4448
+ .y3M-9xoEnk0- {
4449
+ display: -ms-flexbox;
4450
+ display: flex;
4451
+ -ms-flex-direction: column;
4452
+ flex-direction: column;
4453
+ z-index: 1001;
4454
+ z-index: var(--elevation-modal);
4455
+ padding: 8px;
4456
+ padding: var(--space-small);
4457
+ overflow: auto;
4458
+ }
4459
+
4460
+ .y3M-9xoEnk0-,
4461
+ .zkyJp1mib-U- {
4462
+ position: fixed;
4463
+ top: 0;
4464
+ right: 0;
4465
+ bottom: 0;
4466
+ left: 0;
4467
+ }
4468
+
4469
+ .zkyJp1mib-U- {
4470
+ background-color: rgba(0, 0, 0, 0.32);
4471
+ background-color: var(--color-overlay);
4472
+ }
4473
+
4474
+ .gMPgiggaud8- {
4475
+ position: relative;
4476
+ width: 100%;
4477
+ max-width: 600px;
4478
+ max-width: var(--modal--width);
4479
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
4480
+ box-shadow: var(--modal--shadow);
4481
+ margin: auto;
4482
+ border: 1px solid hsl(200, 13%, 87%);
4483
+ border: var(--border-base) solid var(--color-border);
4484
+ border-radius: 8px;
4485
+ border-radius: var(--radius-base);
4486
+ background-color: rgba(255, 255, 255, 1);
4487
+ background-color: var(--color-surface);
4488
+ -ms-flex: 0 0 auto;
4489
+ flex: 0 0 auto;
4490
+ outline-color: hsl(198, 12%, 57%);
4491
+ outline-color: var(--color-focus);
4492
+ }
4493
+
4494
+ /* Adjust `Content` and `Tab` components public padding to match the modal */
4495
+
4496
+ .gMPgiggaud8- > * {
4497
+ --public-content--padding: var(--modal--padding);
4498
+ --public-tab--inset: var(--modal--padding-horizontal);
4499
+ }
4500
+
4501
+ /* Remove the nested `Content` components public padding */
4502
+
4503
+ .gMPgiggaud8- > * > * {
4504
+ --public-content--padding: 0;
4505
+ }
4506
+
4507
+ ._5sBzUnyOqD0- {
4508
+ display: -ms-flexbox;
4509
+ display: flex;
4510
+ -ms-flex-pack: justify;
4511
+ justify-content: space-between;
4512
+ padding: 16px
4513
+ 16px;
4514
+ padding: var(--modal--padding);
4515
+ background-color: transparent;
4516
+ }
4517
+
4518
+ /**
4519
+ * Ensure there's no extra padding top on the next element. This mostly negates
4520
+ * the <Content /> padding
4521
+ */
4522
+
4523
+ ._5sBzUnyOqD0- + * {
4524
+ padding-top: 0;
4525
+ }
4526
+
4527
+ ._4gw63G7IYG0- {
4528
+ margin-top: -6px;
4529
+ margin-right: -6px;
4530
+ }
4531
+
4532
+ .cwVJrrJkNDg- {
4533
+ display: -ms-flexbox;
4534
+ display: flex;
4535
+ padding: 16px
4536
+ 16px;
4537
+ padding: var(--modal--padding);
4538
+ padding-top: 0;
4539
+ -ms-flex: 1 1 100%;
4540
+ flex: 1 1 100%;
4541
+ -ms-flex-pack: end;
4542
+ justify-content: flex-end;
4543
+ }
4544
+
4545
+ /**
4546
+ * 1. Use CSS `order` to adjust the buttons position on the UI
4547
+ */
4548
+
4549
+ .MkD4pNUKeAA- {
4550
+ -ms-flex: 1 1 auto;
4551
+ flex: 1 1 auto;
4552
+ -ms-flex-order: 1;
4553
+ order: 1; /* 1 */
4554
+ }
4555
+
4556
+ .C-yC8JKpQLg- {
4557
+ display: -ms-flexbox;
4558
+ display: flex;
4559
+ -ms-flex: 0 0 auto;
4560
+ flex: 0 0 auto;
4561
+ -ms-flex-order: 2;
4562
+ order: 2; /* 1 */
4563
+ }
4564
+
4565
+ /* This is in a correct position and order */
4566
+
4567
+ /* stylelint-disable-next-line no-descending-specificity */
4568
+
4569
+ .C-yC8JKpQLg- > * {
4570
+ margin-left: 8px;
4571
+ margin-left: var(--space-small);
4572
+ }
4573
+
4574
+ .C-yC8JKpQLg- > *:first-child {
4575
+ -ms-flex-order: 2;
4576
+ order: 2; /* 1 */
4577
+ }
4578
+
4579
+ .C-yC8JKpQLg- > *:nth-child(2) {
4580
+ -ms-flex-order: 1;
4581
+ order: 1; /* 1 */
4582
+ }
4583
+
4418
4584
  .fpi0W91w2ag- * {
4419
4585
  box-sizing: border-box;
4420
4586
  }
@@ -4603,78 +4769,16 @@ html.atlantisLightBoxActive {
4603
4769
  white-space: nowrap;
4604
4770
  }
4605
4771
 
4606
- .bR1N0mdMeZU- {
4607
- position: relative;
4608
- width: 100%;
4609
- }
4610
-
4611
- .bR1N0mdMeZU- * {
4612
- box-sizing: border-box;
4613
- }
4614
-
4615
- ._7naerR7479Q- {
4616
- --field--height: var(--space-largest);
4617
-
4618
- --field--padding-top: calc(var(--space-base) - var(--space-smallest));
4619
- --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));
4620
- --field--padding-left: var(--space-base);
4621
- --field--padding-right: var(--space-base);
4622
-
4623
- display: -ms-flexbox;
4624
-
4625
- display: flex;
4626
- -ms-flex-direction: row;
4627
- flex-direction: row;
4628
- -ms-flex-pack: justify;
4629
- justify-content: space-between;
4630
- -ms-flex-align: center;
4631
- align-items: center;
4632
- width: 100%;
4633
- height: 48px;
4634
- height: var(--field--height);
4635
- padding-top: calc(16px - 2px);
4636
- padding-top: var(--field--padding-top);
4637
- padding-bottom: calc(16px - 2px);
4638
- padding-bottom: var(--field--padding-bottom);
4639
- padding-left: 16px;
4640
- padding-left: var(--field--padding-left);
4641
- padding-right: 16px;
4642
- padding-right: var(--field--padding-right);
4643
- border: 1px solid hsl(200, 13%, 87%);
4644
- border: var(--border-base) solid var(--color-border);
4645
- border-radius: 8px;
4646
- border-radius: var(--radius-base);
4647
- }
4648
-
4649
- ._7naerR7479Q- p {
4650
- overflow: hidden;
4651
- text-overflow: ellipsis;
4652
- white-space: nowrap;
4653
- }
4654
-
4655
- .bR1N0mdMeZU-:hover,
4656
- .bR1N0mdMeZU-._7naerR7479Q- {
4657
- cursor: pointer;
4658
- caret-color: transparent;
4659
- }
4660
-
4661
- ._7naerR7479Q-:focus,
4662
- ._7naerR7479Q-.SpV9TqBIR60- {
4663
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4664
- box-shadow: var(--shadow-focus);
4665
- outline: none;
4666
- }
4667
-
4668
- .TdyW0RCheH4- {
4669
- --field--padding-left: var(--space-slim);
4670
- --field--padding-right: var(--space-slim);
4671
- --field--height: calc(var(--space-larger) + var(--space-smaller));
4772
+ .BSZvIAUzFEU- {
4773
+ --modal--padding: var(--space-base);
4774
+ --public-tab--inset: var(--space-base);
4775
+ --modal--width: 400px;
4776
+ max-width: 400px;
4672
4777
  }
4673
4778
 
4674
- .eBeKgF0JxEQ- {
4675
- --field--padding-left: var(--space-large);
4676
- --field--padding-right: var(--space-large);
4677
- --field--height: calc(var(--space-extravagant));
4779
+ .-ydIALYVvGg- {
4780
+ --modal--width: 940px;
4781
+ max-width: 940px;
4678
4782
  }
4679
4783
 
4680
4784
  :root {
@@ -4763,189 +4867,11 @@ html.atlantisLightBoxActive {
4763
4867
 
4764
4868
  /* Remove the nested `Content` components public padding */
4765
4869
 
4766
- .OiqCKNmbHZ0- > * > * {
4767
- --public-content--padding: 0;
4768
- }
4769
-
4770
- .GDWGHwmjgAc- {
4771
- display: -ms-flexbox;
4772
- display: flex;
4773
- -ms-flex-pack: justify;
4774
- justify-content: space-between;
4775
- padding: 16px
4776
- 16px;
4777
- padding: var(--modal--padding);
4778
- background-color: transparent;
4779
- }
4780
-
4781
- /**
4782
- * Ensure there's no extra padding top on the next element. This mostly negates
4783
- * the <Content /> padding
4784
- */
4785
-
4786
- .GDWGHwmjgAc- + * {
4787
- padding-top: 0;
4788
- }
4789
-
4790
- .KJlGo4z-E6Q- {
4791
- margin-top: -6px;
4792
- margin-right: -6px;
4793
- }
4794
-
4795
- .ZGrhWCAymCw- {
4796
- display: -ms-flexbox;
4797
- display: flex;
4798
- padding: 16px
4799
- 16px;
4800
- padding: var(--modal--padding);
4801
- padding-top: 0;
4802
- -ms-flex: 1 1 100%;
4803
- flex: 1 1 100%;
4804
- -ms-flex-pack: end;
4805
- justify-content: flex-end;
4806
- }
4807
-
4808
- /**
4809
- * 1. Use CSS `order` to adjust the buttons position on the UI
4810
- */
4811
-
4812
- .hOiEWds2Vq8- {
4813
- -ms-flex: 1 1 auto;
4814
- flex: 1 1 auto;
4815
- -ms-flex-order: 1;
4816
- order: 1; /* 1 */
4817
- }
4818
-
4819
- .K31NzxPZP9s- {
4820
- display: -ms-flexbox;
4821
- display: flex;
4822
- -ms-flex: 0 0 auto;
4823
- flex: 0 0 auto;
4824
- -ms-flex-order: 2;
4825
- order: 2; /* 1 */
4826
- }
4827
-
4828
- /* This is in a correct position and order */
4829
-
4830
- /* stylelint-disable-next-line no-descending-specificity */
4831
-
4832
- .K31NzxPZP9s- > * {
4833
- margin-left: 8px;
4834
- margin-left: var(--space-small);
4835
- }
4836
-
4837
- .K31NzxPZP9s- > *:first-child {
4838
- -ms-flex-order: 2;
4839
- order: 2; /* 1 */
4840
- }
4841
-
4842
- .K31NzxPZP9s- > *:nth-child(2) {
4843
- -ms-flex-order: 1;
4844
- order: 1; /* 1 */
4845
- }
4846
-
4847
- .BSZvIAUzFEU- {
4848
- --modal--padding: var(--space-base);
4849
- --public-tab--inset: var(--space-base);
4850
- --modal--width: 400px;
4851
- max-width: 400px;
4852
- }
4853
-
4854
- .-ydIALYVvGg- {
4855
- --modal--width: 940px;
4856
- max-width: 940px;
4857
- }
4858
-
4859
- :root {
4860
- --modal--width: 600px;
4861
- --modal--padding-horizontal: var(--space-base);
4862
- --modal--padding-vertical: var(--space-base);
4863
- --modal--padding: var(--modal--padding-vertical)
4864
- var(--modal--padding-horizontal);
4865
-
4866
- --modal--shadow: var(--shadow-base);
4867
- }
4868
-
4869
- @media (min-width: 768px) {
4870
-
4871
- :root {
4872
- --modal--padding-horizontal: var(--space-large);
4873
- --modal--padding-vertical: var(--space-large);
4874
- --modal--padding: var(--modal--padding-vertical)
4875
- var(--modal--padding-horizontal);
4876
- }
4877
- }
4878
-
4879
- @media (--medium-screens-and-up) {
4880
-
4881
- :root {
4882
- --modal--padding-horizontal: var(--space-large);
4883
- --modal--padding-vertical: var(--space-large);
4884
- --modal--padding: var(--modal--padding-vertical)
4885
- var(--modal--padding-horizontal);
4886
- }
4887
- }
4888
-
4889
- .y3M-9xoEnk0- {
4890
- display: -ms-flexbox;
4891
- display: flex;
4892
- -ms-flex-direction: column;
4893
- flex-direction: column;
4894
- z-index: 1001;
4895
- z-index: var(--elevation-modal);
4896
- padding: 8px;
4897
- padding: var(--space-small);
4898
- overflow: auto;
4899
- }
4900
-
4901
- .y3M-9xoEnk0-,
4902
- .zkyJp1mib-U- {
4903
- position: fixed;
4904
- top: 0;
4905
- right: 0;
4906
- bottom: 0;
4907
- left: 0;
4908
- }
4909
-
4910
- .zkyJp1mib-U- {
4911
- background-color: rgba(0, 0, 0, 0.32);
4912
- background-color: var(--color-overlay);
4913
- }
4914
-
4915
- .gMPgiggaud8- {
4916
- position: relative;
4917
- width: 100%;
4918
- max-width: 600px;
4919
- max-width: var(--modal--width);
4920
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
4921
- box-shadow: var(--modal--shadow);
4922
- margin: auto;
4923
- border: 1px solid hsl(200, 13%, 87%);
4924
- border: var(--border-base) solid var(--color-border);
4925
- border-radius: 8px;
4926
- border-radius: var(--radius-base);
4927
- background-color: rgba(255, 255, 255, 1);
4928
- background-color: var(--color-surface);
4929
- -ms-flex: 0 0 auto;
4930
- flex: 0 0 auto;
4931
- outline-color: hsl(198, 12%, 57%);
4932
- outline-color: var(--color-focus);
4933
- }
4934
-
4935
- /* Adjust `Content` and `Tab` components public padding to match the modal */
4936
-
4937
- .gMPgiggaud8- > * {
4938
- --public-content--padding: var(--modal--padding);
4939
- --public-tab--inset: var(--modal--padding-horizontal);
4940
- }
4941
-
4942
- /* Remove the nested `Content` components public padding */
4943
-
4944
- .gMPgiggaud8- > * > * {
4870
+ .OiqCKNmbHZ0- > * > * {
4945
4871
  --public-content--padding: 0;
4946
4872
  }
4947
4873
 
4948
- ._5sBzUnyOqD0- {
4874
+ .GDWGHwmjgAc- {
4949
4875
  display: -ms-flexbox;
4950
4876
  display: flex;
4951
4877
  -ms-flex-pack: justify;
@@ -4961,16 +4887,16 @@ html.atlantisLightBoxActive {
4961
4887
  * the <Content /> padding
4962
4888
  */
4963
4889
 
4964
- ._5sBzUnyOqD0- + * {
4890
+ .GDWGHwmjgAc- + * {
4965
4891
  padding-top: 0;
4966
4892
  }
4967
4893
 
4968
- ._4gw63G7IYG0- {
4894
+ .KJlGo4z-E6Q- {
4969
4895
  margin-top: -6px;
4970
4896
  margin-right: -6px;
4971
4897
  }
4972
4898
 
4973
- .cwVJrrJkNDg- {
4899
+ .ZGrhWCAymCw- {
4974
4900
  display: -ms-flexbox;
4975
4901
  display: flex;
4976
4902
  padding: 16px
@@ -4987,14 +4913,14 @@ html.atlantisLightBoxActive {
4987
4913
  * 1. Use CSS `order` to adjust the buttons position on the UI
4988
4914
  */
4989
4915
 
4990
- .MkD4pNUKeAA- {
4916
+ .hOiEWds2Vq8- {
4991
4917
  -ms-flex: 1 1 auto;
4992
4918
  flex: 1 1 auto;
4993
4919
  -ms-flex-order: 1;
4994
4920
  order: 1; /* 1 */
4995
4921
  }
4996
4922
 
4997
- .C-yC8JKpQLg- {
4923
+ .K31NzxPZP9s- {
4998
4924
  display: -ms-flexbox;
4999
4925
  display: flex;
5000
4926
  -ms-flex: 0 0 auto;
@@ -5007,21 +4933,95 @@ html.atlantisLightBoxActive {
5007
4933
 
5008
4934
  /* stylelint-disable-next-line no-descending-specificity */
5009
4935
 
5010
- .C-yC8JKpQLg- > * {
4936
+ .K31NzxPZP9s- > * {
5011
4937
  margin-left: 8px;
5012
4938
  margin-left: var(--space-small);
5013
4939
  }
5014
4940
 
5015
- .C-yC8JKpQLg- > *:first-child {
4941
+ .K31NzxPZP9s- > *:first-child {
5016
4942
  -ms-flex-order: 2;
5017
4943
  order: 2; /* 1 */
5018
4944
  }
5019
4945
 
5020
- .C-yC8JKpQLg- > *:nth-child(2) {
4946
+ .K31NzxPZP9s- > *:nth-child(2) {
5021
4947
  -ms-flex-order: 1;
5022
4948
  order: 1; /* 1 */
5023
4949
  }
5024
4950
 
4951
+ .bR1N0mdMeZU- {
4952
+ position: relative;
4953
+ width: 100%;
4954
+ }
4955
+
4956
+ .bR1N0mdMeZU- * {
4957
+ box-sizing: border-box;
4958
+ }
4959
+
4960
+ ._7naerR7479Q- {
4961
+ --field--height: var(--space-largest);
4962
+
4963
+ --field--padding-top: calc(var(--space-base) - var(--space-smallest));
4964
+ --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));
4965
+ --field--padding-left: var(--space-base);
4966
+ --field--padding-right: var(--space-base);
4967
+
4968
+ display: -ms-flexbox;
4969
+
4970
+ display: flex;
4971
+ -ms-flex-direction: row;
4972
+ flex-direction: row;
4973
+ -ms-flex-pack: justify;
4974
+ justify-content: space-between;
4975
+ -ms-flex-align: center;
4976
+ align-items: center;
4977
+ width: 100%;
4978
+ height: 48px;
4979
+ height: var(--field--height);
4980
+ padding-top: calc(16px - 2px);
4981
+ padding-top: var(--field--padding-top);
4982
+ padding-bottom: calc(16px - 2px);
4983
+ padding-bottom: var(--field--padding-bottom);
4984
+ padding-left: 16px;
4985
+ padding-left: var(--field--padding-left);
4986
+ padding-right: 16px;
4987
+ padding-right: var(--field--padding-right);
4988
+ border: 1px solid hsl(200, 13%, 87%);
4989
+ border: var(--border-base) solid var(--color-border);
4990
+ border-radius: 8px;
4991
+ border-radius: var(--radius-base);
4992
+ }
4993
+
4994
+ ._7naerR7479Q- p {
4995
+ overflow: hidden;
4996
+ text-overflow: ellipsis;
4997
+ white-space: nowrap;
4998
+ }
4999
+
5000
+ .bR1N0mdMeZU-:hover,
5001
+ .bR1N0mdMeZU-._7naerR7479Q- {
5002
+ cursor: pointer;
5003
+ caret-color: transparent;
5004
+ }
5005
+
5006
+ ._7naerR7479Q-:focus,
5007
+ ._7naerR7479Q-.SpV9TqBIR60- {
5008
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
5009
+ box-shadow: var(--shadow-focus);
5010
+ outline: none;
5011
+ }
5012
+
5013
+ .TdyW0RCheH4- {
5014
+ --field--padding-left: var(--space-slim);
5015
+ --field--padding-right: var(--space-slim);
5016
+ --field--height: calc(var(--space-larger) + var(--space-smaller));
5017
+ }
5018
+
5019
+ .eBeKgF0JxEQ- {
5020
+ --field--padding-left: var(--space-large);
5021
+ --field--padding-right: var(--space-large);
5022
+ --field--height: calc(var(--space-extravagant));
5023
+ }
5024
+
5025
5025
  .BLYnKItuM3c- {
5026
5026
  width: 100%;
5027
5027
  box-sizing: border-box;
@@ -5509,172 +5509,15 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
5509
5509
  }
5510
5510
 
5511
5511
  .BQqkfvwFjbQ-.DZPW3Q-N5ik- > :nth-last-child(n + 9),
5512
- .BQqkfvwFjbQ-.DZPW3Q-N5ik- > :nth-last-child(n + 9) ~ * {
5513
- -ms-flex-preferred-size: 100%;
5514
- flex-basis: 100%;
5515
- }
5516
-
5517
- .BQqkfvwFjbQ-._2BL9H-tmzMk- > :nth-last-child(n + 10),
5518
- .BQqkfvwFjbQ-._2BL9H-tmzMk- > :nth-last-child(n + 10) ~ * {
5519
- -ms-flex-preferred-size: 100%;
5520
- flex-basis: 100%;
5521
- }
5522
-
5523
- .Hx--3IsyLgs- {
5524
- display: -ms-flexbox;
5525
- display: flex;
5526
- -ms-flex-wrap: wrap;
5527
- flex-wrap: wrap;
5528
- gap: var(--public-sidekick-space);
5529
- width: var(--public-sidekick-width);
5530
- }
5531
-
5532
- .bevb052oaa4- > :first-child {
5533
- -ms-flex-positive: 1;
5534
- flex-grow: 1;
5535
- }
5536
-
5537
- .v17EfPAcJZI- > :first-child {
5538
- -ms-flex-preferred-size: var(--public-sidekick-min-width);
5539
- flex-basis: var(--public-sidekick-min-width);
5540
- }
5541
-
5542
- .bevb052oaa4- > :last-child {
5543
- -ms-flex-preferred-size: 0;
5544
- flex-basis: 0;
5545
- -ms-flex-positive: 999;
5546
- flex-grow: 999;
5547
- min-width: var(--public-sidekick-side-width);
5548
- }
5549
-
5550
- ._3hUKFPIws6o- > :last-child {
5551
- -ms-flex-preferred-size: var(--public-sidekick-min-width);
5552
- flex-basis: var(--public-sidekick-min-width);
5553
- }
5554
-
5555
- ._22dEgb17I90- > :first-child {
5556
- -ms-flex-preferred-size: 0;
5557
- flex-basis: 0;
5558
- -ms-flex-positive: 999;
5559
- flex-grow: 999;
5560
- min-width: var(--public-sidekick-side-width);
5561
- }
5562
-
5563
- ._22dEgb17I90- > :last-child {
5564
- -ms-flex-positive: 1;
5565
- flex-grow: 1;
5566
- }
5567
-
5568
- ._3yK4CuMFyqw-,
5569
- .lY-7fyPMF6Y-,
5570
- .Ti0avsNfvTw-,
5571
- ._9dXm70WomU8- {
5572
- -ms-flex-direction: column;
5573
- flex-direction: column;
5574
- }
5575
-
5576
- ._3yK4CuMFyqw- > *,
5577
- .lY-7fyPMF6Y- > *,
5578
- .Ti0avsNfvTw- > *,
5579
- ._9dXm70WomU8- > * {
5580
- width: 100%;
5581
- }
5582
-
5583
- @media (min-width: 490px) {
5584
- ._3yK4CuMFyqw- {
5585
- -ms-flex-direction: row;
5586
- flex-direction: row;
5587
- }
5588
-
5589
- ._3yK4CuMFyqw- > * {
5590
- width: auto;
5591
- }
5592
- }
5593
-
5594
- @media (--small-screens-and-up) {
5595
- ._3yK4CuMFyqw- {
5596
- -ms-flex-direction: row;
5597
- flex-direction: row;
5598
- }
5599
-
5600
- ._3yK4CuMFyqw- > * {
5601
- width: auto;
5602
- }
5603
- }
5604
-
5605
- @media (min-width: 768px) {
5606
- .lY-7fyPMF6Y- {
5607
- -ms-flex-direction: row;
5608
- flex-direction: row;
5609
- }
5610
-
5611
- .lY-7fyPMF6Y- > * {
5612
- width: auto;
5613
- }
5614
- }
5615
-
5616
- @media (--medium-screens-and-up) {
5617
- .lY-7fyPMF6Y- {
5618
- -ms-flex-direction: row;
5619
- flex-direction: row;
5620
- }
5621
-
5622
- .lY-7fyPMF6Y- > * {
5623
- width: auto;
5624
- }
5625
- }
5626
-
5627
- @media (min-width: 1080px) {
5628
- .Ti0avsNfvTw- {
5629
- -ms-flex-direction: row;
5630
- flex-direction: row;
5631
- }
5632
-
5633
- .Ti0avsNfvTw- > * {
5634
- width: auto;
5635
- }
5636
- }
5637
-
5638
- @media (--large-screens-and-up) {
5639
- .Ti0avsNfvTw- {
5640
- -ms-flex-direction: row;
5641
- flex-direction: row;
5642
- }
5643
-
5644
- .Ti0avsNfvTw- > * {
5645
- width: auto;
5646
- }
5647
- }
5648
-
5649
- @media (min-width: 1440px) {
5650
- ._9dXm70WomU8- {
5651
- -ms-flex-direction: row;
5652
- flex-direction: row;
5653
- }
5654
-
5655
- ._9dXm70WomU8- > * {
5656
- width: auto;
5657
- }
5658
- }
5659
-
5660
- @media (--extra-large-screens-and-up) {
5661
- ._9dXm70WomU8- {
5662
- -ms-flex-direction: row;
5663
- flex-direction: row;
5664
- }
5665
-
5666
- ._9dXm70WomU8- > * {
5667
- width: auto;
5668
- }
5669
- }
5670
-
5671
- .Hx--3IsyLgs-.dN25lKXiqB0- {
5672
- -ms-flex-direction: column;
5673
- flex-direction: column;
5512
+ .BQqkfvwFjbQ-.DZPW3Q-N5ik- > :nth-last-child(n + 9) ~ * {
5513
+ -ms-flex-preferred-size: 100%;
5514
+ flex-basis: 100%;
5674
5515
  }
5675
5516
 
5676
- .Hx--3IsyLgs-.dN25lKXiqB0- > * {
5677
- width: 100%;
5517
+ .BQqkfvwFjbQ-._2BL9H-tmzMk- > :nth-last-child(n + 10),
5518
+ .BQqkfvwFjbQ-._2BL9H-tmzMk- > :nth-last-child(n + 10) ~ * {
5519
+ -ms-flex-preferred-size: 100%;
5520
+ flex-basis: 100%;
5678
5521
  }
5679
5522
 
5680
5523
  .cCwRgRAz4qk- {
@@ -5917,6 +5760,163 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
5917
5760
  transform: translateX(0);
5918
5761
  }
5919
5762
 
5763
+ .Hx--3IsyLgs- {
5764
+ display: -ms-flexbox;
5765
+ display: flex;
5766
+ -ms-flex-wrap: wrap;
5767
+ flex-wrap: wrap;
5768
+ gap: var(--public-sidekick-space);
5769
+ width: var(--public-sidekick-width);
5770
+ }
5771
+
5772
+ .bevb052oaa4- > :first-child {
5773
+ -ms-flex-positive: 1;
5774
+ flex-grow: 1;
5775
+ }
5776
+
5777
+ .v17EfPAcJZI- > :first-child {
5778
+ -ms-flex-preferred-size: var(--public-sidekick-min-width);
5779
+ flex-basis: var(--public-sidekick-min-width);
5780
+ }
5781
+
5782
+ .bevb052oaa4- > :last-child {
5783
+ -ms-flex-preferred-size: 0;
5784
+ flex-basis: 0;
5785
+ -ms-flex-positive: 999;
5786
+ flex-grow: 999;
5787
+ min-width: var(--public-sidekick-side-width);
5788
+ }
5789
+
5790
+ ._3hUKFPIws6o- > :last-child {
5791
+ -ms-flex-preferred-size: var(--public-sidekick-min-width);
5792
+ flex-basis: var(--public-sidekick-min-width);
5793
+ }
5794
+
5795
+ ._22dEgb17I90- > :first-child {
5796
+ -ms-flex-preferred-size: 0;
5797
+ flex-basis: 0;
5798
+ -ms-flex-positive: 999;
5799
+ flex-grow: 999;
5800
+ min-width: var(--public-sidekick-side-width);
5801
+ }
5802
+
5803
+ ._22dEgb17I90- > :last-child {
5804
+ -ms-flex-positive: 1;
5805
+ flex-grow: 1;
5806
+ }
5807
+
5808
+ ._3yK4CuMFyqw-,
5809
+ .lY-7fyPMF6Y-,
5810
+ .Ti0avsNfvTw-,
5811
+ ._9dXm70WomU8- {
5812
+ -ms-flex-direction: column;
5813
+ flex-direction: column;
5814
+ }
5815
+
5816
+ ._3yK4CuMFyqw- > *,
5817
+ .lY-7fyPMF6Y- > *,
5818
+ .Ti0avsNfvTw- > *,
5819
+ ._9dXm70WomU8- > * {
5820
+ width: 100%;
5821
+ }
5822
+
5823
+ @media (min-width: 490px) {
5824
+ ._3yK4CuMFyqw- {
5825
+ -ms-flex-direction: row;
5826
+ flex-direction: row;
5827
+ }
5828
+
5829
+ ._3yK4CuMFyqw- > * {
5830
+ width: auto;
5831
+ }
5832
+ }
5833
+
5834
+ @media (--small-screens-and-up) {
5835
+ ._3yK4CuMFyqw- {
5836
+ -ms-flex-direction: row;
5837
+ flex-direction: row;
5838
+ }
5839
+
5840
+ ._3yK4CuMFyqw- > * {
5841
+ width: auto;
5842
+ }
5843
+ }
5844
+
5845
+ @media (min-width: 768px) {
5846
+ .lY-7fyPMF6Y- {
5847
+ -ms-flex-direction: row;
5848
+ flex-direction: row;
5849
+ }
5850
+
5851
+ .lY-7fyPMF6Y- > * {
5852
+ width: auto;
5853
+ }
5854
+ }
5855
+
5856
+ @media (--medium-screens-and-up) {
5857
+ .lY-7fyPMF6Y- {
5858
+ -ms-flex-direction: row;
5859
+ flex-direction: row;
5860
+ }
5861
+
5862
+ .lY-7fyPMF6Y- > * {
5863
+ width: auto;
5864
+ }
5865
+ }
5866
+
5867
+ @media (min-width: 1080px) {
5868
+ .Ti0avsNfvTw- {
5869
+ -ms-flex-direction: row;
5870
+ flex-direction: row;
5871
+ }
5872
+
5873
+ .Ti0avsNfvTw- > * {
5874
+ width: auto;
5875
+ }
5876
+ }
5877
+
5878
+ @media (--large-screens-and-up) {
5879
+ .Ti0avsNfvTw- {
5880
+ -ms-flex-direction: row;
5881
+ flex-direction: row;
5882
+ }
5883
+
5884
+ .Ti0avsNfvTw- > * {
5885
+ width: auto;
5886
+ }
5887
+ }
5888
+
5889
+ @media (min-width: 1440px) {
5890
+ ._9dXm70WomU8- {
5891
+ -ms-flex-direction: row;
5892
+ flex-direction: row;
5893
+ }
5894
+
5895
+ ._9dXm70WomU8- > * {
5896
+ width: auto;
5897
+ }
5898
+ }
5899
+
5900
+ @media (--extra-large-screens-and-up) {
5901
+ ._9dXm70WomU8- {
5902
+ -ms-flex-direction: row;
5903
+ flex-direction: row;
5904
+ }
5905
+
5906
+ ._9dXm70WomU8- > * {
5907
+ width: auto;
5908
+ }
5909
+ }
5910
+
5911
+ .Hx--3IsyLgs-.dN25lKXiqB0- {
5912
+ -ms-flex-direction: column;
5913
+ flex-direction: column;
5914
+ }
5915
+
5916
+ .Hx--3IsyLgs-.dN25lKXiqB0- > * {
5917
+ width: 100%;
5918
+ }
5919
+
5920
5920
  ._6hfmGZoXNyg- {
5921
5921
  width: 32px;
5922
5922
  width: var(--space-larger);
@@ -5962,107 +5962,28 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
5962
5962
  0% {
5963
5963
  -webkit-transform: rotate(0deg);
5964
5964
  transform: rotate(0deg);
5965
- }
5966
-
5967
- 100% {
5968
- -webkit-transform: rotate(359deg);
5969
- transform: rotate(359deg);
5970
- }
5971
- }
5972
-
5973
- .bMfynkzmlL4- {
5974
- width: 16px;
5975
- width: var(--space-base);
5976
- height: 16px;
5977
- height: var(--space-base);
5978
- border-width: 4px;
5979
- border-width: var(--space-smaller);
5980
- }
5981
-
5982
- .NA68eWblbLo- {
5983
- display: inline-block;
5984
- margin-top: calc(4px * -1);
5985
- margin-top: calc(var(--space-smaller) * -1);
5986
- vertical-align: middle;
5987
- }
5988
-
5989
- .WiSIdMrztSU- {
5990
- --statusLabel-icon-diameter: 8px;
5991
-
5992
- display: inline-block;
5993
- width: 8px;
5994
- width: var(--statusLabel-icon-diameter);
5995
- height: 8px;
5996
- height: var(--statusLabel-icon-diameter);
5997
- border-radius: 50%;
5998
- background-color: hsl(107, 58%, 33%);
5999
- background-color: var(--color-success);
6000
- -ms-flex-negative: 0;
6001
- flex-shrink: 0;
6002
- }
6003
-
6004
- .OADGAhZt8dY- {
6005
- --labelBackgroundColor: var(--color-success--surface);
6006
- --labelTextColor: var(--color-success--onSurface);
6007
-
6008
- display: -ms-flexbox;
6009
-
6010
- display: flex;
6011
- width: -webkit-fit-content;
6012
- width: -moz-fit-content;
6013
- width: fit-content;
6014
- padding: 0.375rem 0.625rem 0.375rem 0.5rem;
6015
- border-radius: 0.75rem;
6016
- -ms-flex-direction: row;
6017
- flex-direction: row;
6018
- -ms-flex-wrap: nowrap;
6019
- flex-wrap: nowrap;
6020
- gap: 0.375rem;
6021
- background-color: hsl(109, 28%, 92%);
6022
- background-color: var(--labelBackgroundColor);
6023
- }
6024
-
6025
- .gQdAtJ0BiSk- {
6026
- --labelBackgroundColor: var(--color-success--surface);
6027
- --labelTextColor: var(--color-success--onSurface);
6028
- }
6029
-
6030
- ._1vqcSM0FTig- {
6031
- --labelBackgroundColor: var(--color-warning--surface);
6032
- --labelTextColor: var(--color-warning--onSurface);
6033
- }
6034
-
6035
- .maK19lcw4T8- {
6036
- --labelBackgroundColor: var(--color-critical--surface);
6037
- --labelTextColor: var(--color-critical--onSurface);
6038
- }
6039
-
6040
- .n-xRjfGbWgM- {
6041
- --labelBackgroundColor: var(--color-inactive--surface);
6042
- --labelTextColor: var(--color-inactive--onSurface);
6043
- }
6044
-
6045
- .d6Y1CRe9qac- {
6046
- --labelBackgroundColor: var(--color-informative--surface);
6047
- --labelTextColor: var(--color-informative--onSurface);
6048
- }
6049
-
6050
- /* Reset the <Text> line height so we can reliably get 24px tall */
6051
-
6052
- .OADGAhZt8dY- p {
6053
- color: var(--labelTextColor);
6054
- line-height: 1;
5965
+ }
5966
+
5967
+ 100% {
5968
+ -webkit-transform: rotate(359deg);
5969
+ transform: rotate(359deg);
5970
+ }
6055
5971
  }
6056
5972
 
6057
- .PqXUSR-3s4M- {
6058
- -ms-flex-direction: row-reverse;
6059
- flex-direction: row-reverse;
5973
+ .bMfynkzmlL4- {
5974
+ width: 16px;
5975
+ width: var(--space-base);
5976
+ height: 16px;
5977
+ height: var(--space-base);
5978
+ border-width: 4px;
5979
+ border-width: var(--space-smaller);
6060
5980
  }
6061
5981
 
6062
- .RmE4LVHqe60- {
6063
- display: -ms-flexbox;
6064
- display: flex;
6065
- padding-top: 0.125rem;
5982
+ .NA68eWblbLo- {
5983
+ display: inline-block;
5984
+ margin-top: calc(4px * -1);
5985
+ margin-top: calc(var(--space-smaller) * -1);
5986
+ vertical-align: middle;
6066
5987
  }
6067
5988
 
6068
5989
  ._7bHFxCX3jv4- {
@@ -6197,6 +6118,85 @@ If there is a way to loop in the future of use a css custom property, we can use
6197
6118
  margin-bottom: auto;
6198
6119
  }
6199
6120
 
6121
+ .OADGAhZt8dY- {
6122
+ --labelBackgroundColor: var(--color-success--surface);
6123
+ --labelTextColor: var(--color-success--onSurface);
6124
+
6125
+ display: -ms-flexbox;
6126
+
6127
+ display: flex;
6128
+ width: -webkit-fit-content;
6129
+ width: -moz-fit-content;
6130
+ width: fit-content;
6131
+ padding: 0.375rem 0.625rem 0.375rem 0.5rem;
6132
+ border-radius: 0.75rem;
6133
+ -ms-flex-direction: row;
6134
+ flex-direction: row;
6135
+ -ms-flex-wrap: nowrap;
6136
+ flex-wrap: nowrap;
6137
+ gap: 0.375rem;
6138
+ background-color: hsl(109, 28%, 92%);
6139
+ background-color: var(--labelBackgroundColor);
6140
+ }
6141
+
6142
+ .gQdAtJ0BiSk- {
6143
+ --labelBackgroundColor: var(--color-success--surface);
6144
+ --labelTextColor: var(--color-success--onSurface);
6145
+ }
6146
+
6147
+ ._1vqcSM0FTig- {
6148
+ --labelBackgroundColor: var(--color-warning--surface);
6149
+ --labelTextColor: var(--color-warning--onSurface);
6150
+ }
6151
+
6152
+ .maK19lcw4T8- {
6153
+ --labelBackgroundColor: var(--color-critical--surface);
6154
+ --labelTextColor: var(--color-critical--onSurface);
6155
+ }
6156
+
6157
+ .n-xRjfGbWgM- {
6158
+ --labelBackgroundColor: var(--color-inactive--surface);
6159
+ --labelTextColor: var(--color-inactive--onSurface);
6160
+ }
6161
+
6162
+ .d6Y1CRe9qac- {
6163
+ --labelBackgroundColor: var(--color-informative--surface);
6164
+ --labelTextColor: var(--color-informative--onSurface);
6165
+ }
6166
+
6167
+ /* Reset the <Text> line height so we can reliably get 24px tall */
6168
+
6169
+ .OADGAhZt8dY- p {
6170
+ color: var(--labelTextColor);
6171
+ line-height: 1;
6172
+ }
6173
+
6174
+ .PqXUSR-3s4M- {
6175
+ -ms-flex-direction: row-reverse;
6176
+ flex-direction: row-reverse;
6177
+ }
6178
+
6179
+ .RmE4LVHqe60- {
6180
+ display: -ms-flexbox;
6181
+ display: flex;
6182
+ padding-top: 0.125rem;
6183
+ }
6184
+
6185
+ .WiSIdMrztSU- {
6186
+ --statusLabel-icon-diameter: 8px;
6187
+
6188
+ display: inline-block;
6189
+ width: 8px;
6190
+ width: var(--statusLabel-icon-diameter);
6191
+ height: 8px;
6192
+ height: var(--statusLabel-icon-diameter);
6193
+ border-radius: 50%;
6194
+ background-color: hsl(107, 58%, 33%);
6195
+ background-color: var(--color-success);
6196
+ -ms-flex-negative: 0;
6197
+ flex-shrink: 0;
6198
+ }
6199
+
6200
6200
  .rVg6dYYBFN4- {
6201
6201
  --switch--width: 48px;
6202
6202
  --switch--pipSize: 16px;
@@ -6386,6 +6386,46 @@ If there is a way to loop in the future of use a css custom property, we can use
6386
6386
  border-top: solid var(--border-thicker) var(--border-color);
6387
6387
  }
6388
6388
 
6389
+ .b9lhF-BkUnI- {
6390
+ display: grid;
6391
+ grid-template-columns: auto;
6392
+ grid-template-rows: auto -webkit-max-content;
6393
+ grid-template-rows: auto max-content;
6394
+ width: inherit;
6395
+ height: inherit;
6396
+ -ms-flex-align: center;
6397
+ align-items: center;
6398
+ justify-items: center;
6399
+ }
6400
+
6401
+ .BJLJeUxloeQ-:not(.t5IzWH6-Sy0-) {
6402
+ -ms-flex-align: end;
6403
+ align-items: end;
6404
+ }
6405
+
6406
+ .tj--cPRjQfI- {
6407
+ width: 100%;
6408
+ min-width: 0;
6409
+ box-sizing: border-box;
6410
+ }
6411
+
6412
+ .l2Vxo1qaR8U- .tj--cPRjQfI- {
6413
+ padding: 4px;
6414
+ padding: var(--space-smaller);
6415
+ font-size: 10px;
6416
+ font-size: var(--typography--fontSize-smaller);
6417
+ }
6418
+
6419
+ .t5IzWH6-Sy0- .tj--cPRjQfI- {
6420
+ position: absolute;
6421
+ bottom: 0;
6422
+ left: 0;
6423
+ padding: 8px;
6424
+ padding: var(--space-small);
6425
+ font-size: 12px;
6426
+ font-size: var(--typography--fontSize-small);
6427
+ }
6428
+
6389
6429
  :root {
6390
6430
  --public-tab--inset: var(--space-base);
6391
6431
  }
@@ -6516,46 +6556,6 @@ ul.LfIIg9bwrhQ- {
6516
6556
  padding-right: var(--public-tab--inset);
6517
6557
  }
6518
6558
 
6519
- .b9lhF-BkUnI- {
6520
- display: grid;
6521
- grid-template-columns: auto;
6522
- grid-template-rows: auto -webkit-max-content;
6523
- grid-template-rows: auto max-content;
6524
- width: inherit;
6525
- height: inherit;
6526
- -ms-flex-align: center;
6527
- align-items: center;
6528
- justify-items: center;
6529
- }
6530
-
6531
- .BJLJeUxloeQ-:not(.t5IzWH6-Sy0-) {
6532
- -ms-flex-align: end;
6533
- align-items: end;
6534
- }
6535
-
6536
- .tj--cPRjQfI- {
6537
- width: 100%;
6538
- min-width: 0;
6539
- box-sizing: border-box;
6540
- }
6541
-
6542
- .l2Vxo1qaR8U- .tj--cPRjQfI- {
6543
- padding: 4px;
6544
- padding: var(--space-smaller);
6545
- font-size: 10px;
6546
- font-size: var(--typography--fontSize-smaller);
6547
- }
6548
-
6549
- .t5IzWH6-Sy0- .tj--cPRjQfI- {
6550
- position: absolute;
6551
- bottom: 0;
6552
- left: 0;
6553
- padding: 8px;
6554
- padding: var(--space-small);
6555
- font-size: 12px;
6556
- font-size: var(--typography--fontSize-small);
6557
- }
6558
-
6559
6559
  .jC1GzRIJp74- {
6560
6560
  display: grid;
6561
6561
  grid-gap: var(--public-tile-space);
@@ -6604,46 +6604,155 @@ ul.LfIIg9bwrhQ- {
6604
6604
  pointer-events: none;
6605
6605
  }
6606
6606
 
6607
- .W8zgWZqmIlk- {
6608
- box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.075), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
6609
- box-shadow: var(--shadow-high);
6610
- overflow: hidden;
6611
- pointer-events: all;
6607
+ .W8zgWZqmIlk- {
6608
+ box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.075), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
6609
+ box-shadow: var(--shadow-high);
6610
+ overflow: hidden;
6611
+ pointer-events: all;
6612
+ }
6613
+
6614
+ .W8zgWZqmIlk- + .W8zgWZqmIlk- {
6615
+ margin-top: 16px;
6616
+ margin-top: var(--space-base);
6617
+ }
6618
+
6619
+ .ol3srk7PviM- {
6620
+ display: -ms-flexbox;
6621
+ display: flex;
6622
+ gap: 8px;
6623
+ gap: var(--space-small);
6624
+ -ms-flex-align: center;
6625
+ align-items: center;
6626
+ padding: 4px 4px 4px;
6627
+ padding: var(--space-smaller) var(--space-smaller) var(--space-smaller);
6628
+ padding-left: calc(8px + 4px);
6629
+ padding-left: calc(var(--space-small) + var(--space-smaller));
6630
+ border-radius: 8px;
6631
+ border-radius: var(--radius-base);
6632
+ background: hsl(197, 90%, 12%);
6633
+ background: var(--color-surface--reverse);
6634
+ }
6635
+
6636
+ /* Use of !important to make the button icon visible in
6637
+ the reverse color scheme of Toast */
6638
+
6639
+ .ibhpdUt9YLo- * path {
6640
+ fill: hsl(197, 15%, 43%) !important;
6641
+ fill: var(--color-text--secondary) !important;
6642
+ }
6643
+
6644
+ .ibhpdUt9YLo-:hover * path {
6645
+ fill: hsl(197, 15%, 43%) !important;
6646
+ fill: var(--color-greyBlue) !important;
6647
+ }
6648
+
6649
+ /**
6650
+ * Used in the wrapping chips component:
6651
+ * - InternalChipSingleSelect
6652
+ * - InternalChipMultiSelect
6653
+ */
6654
+
6655
+ .NLNJBhRffp4- {
6656
+ display: -ms-flexbox;
6657
+ display: flex;
6658
+ gap: 8px;
6659
+ gap: var(--space-small);
6660
+ -ms-flex-wrap: wrap;
6661
+ flex-wrap: wrap;
6662
+ -ms-flex-align: center;
6663
+ align-items: center;
6664
+ }
6665
+
6666
+ /**
6667
+ * Interaction
6668
+ *
6669
+ * NOTE:
6670
+ * Since the Chip component is not being focused, rather it's the input
6671
+ * We are copying the styles from the Chip component to ensure the same experience
6672
+ */
6673
+
6674
+ .ulLzwMsQL3U-:focus-visible ~ div[role="option"],
6675
+ .ulLzwMsQL3U-:focus-visible ~ div[role="button"] {
6676
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
6677
+ box-shadow: var(--shadow-focus);
6678
+ outline: none;
6679
+ }
6680
+
6681
+ .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="option"],
6682
+ .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="button"] {
6683
+ background-color: hsl(51, 17%, 85%);
6684
+ background-color: var(--color-interactive--background);
6612
6685
  }
6613
6686
 
6614
- .W8zgWZqmIlk- + .W8zgWZqmIlk- {
6615
- margin-top: 16px;
6616
- margin-top: var(--space-base);
6687
+ .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="option"],
6688
+ .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="button"] {
6689
+ background-color: hsl(49, 7%, 70%);
6690
+ background-color: var(--color-interactive--background--hover);
6617
6691
  }
6618
6692
 
6619
- .ol3srk7PviM- {
6693
+ .ulLzwMsQL3U-.-yQxZSnxBBU-:focus-visible ~ div[role="option"],
6694
+ .ulLzwMsQL3U-.-yQxZSnxBBU-:focus-visible ~ div[role="button"] {
6695
+ background-color: hsl(0, 0%, 93%);
6696
+ background-color: var(--color-disabled--secondary);
6697
+ }
6698
+
6699
+ /**
6700
+ * Input checkbox/radio
6701
+ *
6702
+ * Hide checkbox on UI but not screen readers and still allow focus state
6703
+ */
6704
+
6705
+ .ulLzwMsQL3U- {
6706
+ position: absolute;
6707
+ width: 1px;
6708
+ height: 1px;
6709
+ overflow: hidden;
6710
+ clip: rect(0 0 0 0);
6711
+ clip-path: inset(100%);
6712
+ white-space: nowrap;
6713
+ }
6714
+
6715
+ /**
6716
+ * Button
6717
+ */
6718
+
6719
+ .ngKOY8l4BG4- {
6620
6720
  display: -ms-flexbox;
6621
6721
  display: flex;
6622
- gap: 8px;
6623
- gap: var(--space-small);
6624
- -ms-flex-align: center;
6625
- align-items: center;
6626
- padding: 4px 4px 4px;
6627
- padding: var(--space-smaller) var(--space-smaller) var(--space-smaller);
6628
- padding-left: calc(8px + 4px);
6629
- padding-left: calc(var(--space-small) + var(--space-smaller));
6630
6722
  border-radius: 8px;
6631
6723
  border-radius: var(--radius-base);
6632
- background: hsl(197, 90%, 12%);
6633
- background: var(--color-surface--reverse);
6724
+ cursor: pointer;
6725
+ transition: background-color 200ms ease;
6634
6726
  }
6635
6727
 
6636
- /* Use of !important to make the button icon visible in
6637
- the reverse color scheme of Toast */
6728
+ .ngKOY8l4BG4-:hover,
6729
+ .ngKOY8l4BG4-:focus {
6730
+ background-color: hsl(53, 21%, 93%);
6731
+ background-color: var(--color-surface--hover);
6732
+ }
6638
6733
 
6639
- .ibhpdUt9YLo- * path {
6640
- fill: hsl(197, 15%, 43%) !important;
6641
- fill: var(--color-text--secondary) !important;
6734
+ .ngKOY8l4BG4-:focus {
6735
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
6736
+ box-shadow: var(--shadow-focus);
6737
+ outline: none;
6642
6738
  }
6643
6739
 
6644
- .ibhpdUt9YLo-:hover * path {
6645
- fill: hsl(197, 15%, 43%) !important;
6646
- fill: var(--color-greyBlue) !important;
6740
+ /**
6741
+ * Override icon default colors.
6742
+ *
6743
+ * NOTE: This is a workaround since some icons have default colors that we don't
6744
+ * want to override until the component color prop overrides it.
6745
+ * DO NOT COPY!
6746
+ */
6747
+
6748
+ .rzbiB2nz36Q- > svg {
6749
+ fill: hsl(198, 35%, 21%);
6750
+ fill: var(--color-interactive--subtle);
6751
+ }
6752
+
6753
+ .rzbiB2nz36Q- {
6754
+ display: -ms-flexbox;
6755
+ display: flex;
6647
6756
  }
6648
6757
 
6649
6758
  .sZQ1M6tj8-c- {
@@ -6756,113 +6865,34 @@ ul.LfIIg9bwrhQ- {
6756
6865
  line-height: var(--typography--lineHeight-base);
6757
6866
  }
6758
6867
 
6759
- /**
6760
- * Used in the wrapping chips component:
6761
- * - InternalChipSingleSelect
6762
- * - InternalChipMultiSelect
6763
- */
6764
-
6765
- .NLNJBhRffp4- {
6766
- display: -ms-flexbox;
6767
- display: flex;
6768
- gap: 8px;
6769
- gap: var(--space-small);
6770
- -ms-flex-wrap: wrap;
6771
- flex-wrap: wrap;
6772
- -ms-flex-align: center;
6773
- align-items: center;
6774
- }
6775
-
6776
- /**
6777
- * Interaction
6778
- *
6779
- * NOTE:
6780
- * Since the Chip component is not being focused, rather it's the input
6781
- * We are copying the styles from the Chip component to ensure the same experience
6782
- */
6783
-
6784
- .ulLzwMsQL3U-:focus-visible ~ div[role="option"],
6785
- .ulLzwMsQL3U-:focus-visible ~ div[role="button"] {
6786
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
6787
- box-shadow: var(--shadow-focus);
6788
- outline: none;
6789
- }
6790
-
6791
- .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="option"],
6792
- .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="button"] {
6793
- background-color: hsl(51, 17%, 85%);
6794
- background-color: var(--color-interactive--background);
6795
- }
6796
-
6797
- .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="option"],
6798
- .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="button"] {
6799
- background-color: hsl(49, 7%, 70%);
6800
- background-color: var(--color-interactive--background--hover);
6801
- }
6802
-
6803
- .ulLzwMsQL3U-.-yQxZSnxBBU-:focus-visible ~ div[role="option"],
6804
- .ulLzwMsQL3U-.-yQxZSnxBBU-:focus-visible ~ div[role="button"] {
6805
- background-color: hsl(0, 0%, 93%);
6806
- background-color: var(--color-disabled--secondary);
6807
- }
6808
-
6809
- /**
6810
- * Input checkbox/radio
6811
- *
6812
- * Hide checkbox on UI but not screen readers and still allow focus state
6813
- */
6814
-
6815
- .ulLzwMsQL3U- {
6816
- position: absolute;
6817
- width: 1px;
6818
- height: 1px;
6819
- overflow: hidden;
6820
- clip: rect(0 0 0 0);
6821
- clip-path: inset(100%);
6822
- white-space: nowrap;
6868
+ .wMM6V80Rt-w- {
6869
+ padding: 16px;
6870
+ padding: var(--space-base);
6871
+ border-top: 2px solid hsl(200, 13%, 87%);
6872
+ border-top: var(--border-thick) solid var(--color-border);
6823
6873
  }
6824
6874
 
6825
- /**
6826
- * Button
6827
- */
6828
-
6829
- .ngKOY8l4BG4- {
6875
+ .HAoSIniVNvI- {
6830
6876
  display: -ms-flexbox;
6831
6877
  display: flex;
6832
- border-radius: 8px;
6833
- border-radius: var(--radius-base);
6834
- cursor: pointer;
6835
- transition: background-color 200ms ease;
6836
- }
6837
-
6838
- .ngKOY8l4BG4-:hover,
6839
- .ngKOY8l4BG4-:focus {
6840
- background-color: hsl(53, 21%, 93%);
6841
- background-color: var(--color-surface--hover);
6878
+ -ms-flex-pack: justify;
6879
+ justify-content: space-between;
6880
+ font-weight: bold;
6842
6881
  }
6843
6882
 
6844
- .ngKOY8l4BG4-:focus {
6845
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
6846
- box-shadow: var(--shadow-focus);
6847
- outline: none;
6883
+ .HAoSIniVNvI- * {
6884
+ text-align: left;
6848
6885
  }
6849
6886
 
6850
- /**
6851
- * Override icon default colors.
6852
- *
6853
- * NOTE: This is a workaround since some icons have default colors that we don't
6854
- * want to override until the component color prop overrides it.
6855
- * DO NOT COPY!
6856
- */
6857
-
6858
- .rzbiB2nz36Q- > svg {
6859
- fill: hsl(198, 35%, 21%);
6860
- fill: var(--color-interactive--subtle);
6887
+ .mNGvTIKaQIA-,
6888
+ .mNGvTIKaQIA- * {
6889
+ font-weight: normal;
6890
+ text-align: right;
6861
6891
  }
6862
6892
 
6863
- .rzbiB2nz36Q- {
6864
- display: -ms-flexbox;
6865
- display: flex;
6893
+ .HAoSIniVNvI-:not(:last-child) {
6894
+ padding-bottom: 8px;
6895
+ padding-bottom: var(--space-small);
6866
6896
  }
6867
6897
 
6868
6898
  ._5TLZRabskzI- {
@@ -6953,36 +6983,6 @@ ul.LfIIg9bwrhQ- {
6953
6983
  }
6954
6984
  }
6955
6985
 
6956
- .wMM6V80Rt-w- {
6957
- padding: 16px;
6958
- padding: var(--space-base);
6959
- border-top: 2px solid hsl(200, 13%, 87%);
6960
- border-top: var(--border-thick) solid var(--color-border);
6961
- }
6962
-
6963
- .HAoSIniVNvI- {
6964
- display: -ms-flexbox;
6965
- display: flex;
6966
- -ms-flex-pack: justify;
6967
- justify-content: space-between;
6968
- font-weight: bold;
6969
- }
6970
-
6971
- .HAoSIniVNvI- * {
6972
- text-align: left;
6973
- }
6974
-
6975
- .mNGvTIKaQIA-,
6976
- .mNGvTIKaQIA- * {
6977
- font-weight: normal;
6978
- text-align: right;
6979
- }
6980
-
6981
- .HAoSIniVNvI-:not(:last-child) {
6982
- padding-bottom: 8px;
6983
- padding-bottom: var(--space-small);
6984
- }
6985
-
6986
6986
  .zossMHCpMPU- {
6987
6987
  display: -ms-flexbox;
6988
6988
  display: flex;
@@ -7275,16 +7275,41 @@ ul.LfIIg9bwrhQ- {
7275
7275
  background: var(--color-disabled);
7276
7276
  }
7277
7277
 
7278
- ._3hq7jJitEgs- {
7279
- display: -ms-flexbox;
7280
- display: flex;
7281
- -ms-flex-direction: column;
7282
- flex-direction: column;
7283
- min-width: 0;
7278
+ ._3hq7jJitEgs- {
7279
+ display: -ms-flexbox;
7280
+ display: flex;
7281
+ -ms-flex-direction: column;
7282
+ flex-direction: column;
7283
+ min-width: 0;
7284
+ }
7285
+
7286
+ .oWJNe7O1DFI- {
7287
+ white-space: pre-wrap;
7288
+ }
7289
+
7290
+ .kCKg-JJTRO8- {
7291
+ border-radius: 4px;
7292
+ border-radius: var(--radius-small);
7293
+ }
7294
+
7295
+ ._235nMwtuWSw- {
7296
+ border-radius: 8px;
7297
+ border-radius: var(--radius-base);
7298
+ }
7299
+
7300
+ ._9ppkWehd4QA- {
7301
+ border-radius: 16px;
7302
+ border-radius: var(--radius-large);
7284
7303
  }
7285
7304
 
7286
- .oWJNe7O1DFI- {
7287
- white-space: pre-wrap;
7305
+ .CsG3cZAn6r0- {
7306
+ border-radius: 24px;
7307
+ border-radius: var(--radius-larger);
7308
+ }
7309
+
7310
+ .WWKSAC2020Q- {
7311
+ border-radius: 100%;
7312
+ border-radius: var(--radius-circle);
7288
7313
  }
7289
7314
 
7290
7315
  .QJaShYW08G4- {
@@ -7337,55 +7362,6 @@ ul.LfIIg9bwrhQ- {
7337
7362
  gap: var(--space-extravagant);
7338
7363
  }
7339
7364
 
7340
- .kCKg-JJTRO8- {
7341
- border-radius: 4px;
7342
- border-radius: var(--radius-small);
7343
- }
7344
-
7345
- ._235nMwtuWSw- {
7346
- border-radius: 8px;
7347
- border-radius: var(--radius-base);
7348
- }
7349
-
7350
- ._9ppkWehd4QA- {
7351
- border-radius: 16px;
7352
- border-radius: var(--radius-large);
7353
- }
7354
-
7355
- .CsG3cZAn6r0- {
7356
- border-radius: 24px;
7357
- border-radius: var(--radius-larger);
7358
- }
7359
-
7360
- .WWKSAC2020Q- {
7361
- border-radius: 100%;
7362
- border-radius: var(--radius-circle);
7363
- }
7364
-
7365
- .CXP1mw5bm-s- {
7366
- height: auto;
7367
- }
7368
-
7369
- .WF3F8955azY- {
7370
- width: auto;
7371
- }
7372
-
7373
- .FvQEC-mLWg0-,
7374
- .V-mgShFUOdU- {
7375
- min-width: 0;
7376
- min-height: 0;
7377
- -ms-flex: 0 0 auto;
7378
- flex: 0 0 auto;
7379
- }
7380
-
7381
- .QpiuEE5kvzA-,
7382
- .gKgsOLA5xGU- {
7383
- min-width: 0;
7384
- min-height: 0;
7385
- -ms-flex: 1 1 auto;
7386
- flex: 1 1 auto;
7387
- }
7388
-
7389
7365
  .Y4Fm1wA7Z6c- {
7390
7366
  border-color: hsl(200, 13%, 87%);
7391
7367
  border-color: var(--color-border);
@@ -7412,37 +7388,6 @@ ul.LfIIg9bwrhQ- {
7412
7388
  border-left-width: var(--box-border-left);
7413
7389
  }
7414
7390
 
7415
- .pyQJ1Rwtg3Q- {
7416
- padding: 0;
7417
- padding: var(--box-padding, 0);
7418
- }
7419
-
7420
- .J0XrYI95Nwo- {
7421
- padding-left: var(--box-padding-horizontal);
7422
- padding-right: var(--box-padding-horizontal);
7423
- }
7424
-
7425
- .krPrcZ2t1Mg- {
7426
- padding-top: var(--box-padding-vertical);
7427
- padding-bottom: var(--box-padding-vertical);
7428
- }
7429
-
7430
- .Ms36xmpr504- {
7431
- padding-top: var(--box-padding-top);
7432
- }
7433
-
7434
- .HR4tB8Ht7-w- {
7435
- padding-right: var(--box-padding-right);
7436
- }
7437
-
7438
- ._5mybhdcr7f0- {
7439
- padding-bottom: var(--box-padding-bottom);
7440
- }
7441
-
7442
- .eRM9czZkHgE- {
7443
- padding-left: var(--box-padding-left);
7444
- }
7445
-
7446
7391
  .vqVnWscsiIQ- {
7447
7392
  margin: 0;
7448
7393
  margin: var(--box-margin, 0);
@@ -7474,27 +7419,59 @@ ul.LfIIg9bwrhQ- {
7474
7419
  margin-left: var(--box-margin-left);
7475
7420
  }
7476
7421
 
7477
- .vAVS-6e-jJo- {
7478
- width: 100%;
7422
+ .pyQJ1Rwtg3Q- {
7423
+ padding: 0;
7424
+ padding: var(--box-padding, 0);
7479
7425
  }
7480
7426
 
7481
- .tZgae6SZ8WA- {
7482
- width: 85%;
7427
+ .J0XrYI95Nwo- {
7428
+ padding-left: var(--box-padding-horizontal);
7429
+ padding-right: var(--box-padding-horizontal);
7483
7430
  }
7484
7431
 
7485
- .ec-sGgENoOw- {
7486
- width: 70%;
7432
+ .krPrcZ2t1Mg- {
7433
+ padding-top: var(--box-padding-vertical);
7434
+ padding-bottom: var(--box-padding-vertical);
7487
7435
  }
7488
7436
 
7489
- .ONvR3LocsA4-,
7490
- .j-gTsb6UsQs- {
7437
+ .Ms36xmpr504- {
7438
+ padding-top: var(--box-padding-top);
7439
+ }
7440
+
7441
+ .HR4tB8Ht7-w- {
7442
+ padding-right: var(--box-padding-right);
7443
+ }
7444
+
7445
+ ._5mybhdcr7f0- {
7446
+ padding-bottom: var(--box-padding-bottom);
7447
+ }
7448
+
7449
+ .eRM9czZkHgE- {
7450
+ padding-left: var(--box-padding-left);
7451
+ }
7452
+
7453
+ .CXP1mw5bm-s- {
7454
+ height: auto;
7455
+ }
7456
+
7457
+ .WF3F8955azY- {
7491
7458
  width: auto;
7492
- aspect-ratio: 1;
7493
7459
  }
7494
7460
 
7495
- .j-gTsb6UsQs- {
7496
- border-radius: 100%;
7497
- border-radius: var(--radius-circle);
7461
+ .FvQEC-mLWg0-,
7462
+ .V-mgShFUOdU- {
7463
+ min-width: 0;
7464
+ min-height: 0;
7465
+ -ms-flex: 0 0 auto;
7466
+ flex: 0 0 auto;
7467
+ }
7468
+
7469
+ .QpiuEE5kvzA-,
7470
+ .gKgsOLA5xGU- {
7471
+ min-width: 0;
7472
+ min-height: 0;
7473
+ -ms-flex: 1 1 auto;
7474
+ flex: 1 1 auto;
7498
7475
  }
7499
7476
 
7500
7477
  .bjemHBSLuQ0- {
@@ -7530,6 +7507,29 @@ ul.LfIIg9bwrhQ- {
7530
7507
  min-height: var(--space-base);
7531
7508
  }
7532
7509
 
7510
+ .vAVS-6e-jJo- {
7511
+ width: 100%;
7512
+ }
7513
+
7514
+ .tZgae6SZ8WA- {
7515
+ width: 85%;
7516
+ }
7517
+
7518
+ .ec-sGgENoOw- {
7519
+ width: 70%;
7520
+ }
7521
+
7522
+ .ONvR3LocsA4-,
7523
+ .j-gTsb6UsQs- {
7524
+ width: auto;
7525
+ aspect-ratio: 1;
7526
+ }
7527
+
7528
+ .j-gTsb6UsQs- {
7529
+ border-radius: 100%;
7530
+ border-radius: var(--radius-circle);
7531
+ }
7532
+
7533
7533
  ._6dlpcG-oxT4- {
7534
7534
  -webkit-animation-duration: var(--duration-base);
7535
7535
  animation-duration: var(--duration-base);
@@ -7566,19 +7566,91 @@ ul.LfIIg9bwrhQ- {
7566
7566
  padding-left: var(--horizontal-inset);
7567
7567
  }
7568
7568
 
7569
- .EJeK329S0z0-:last-child {
7570
- padding-right: var(--horizontal-inset);
7569
+ .EJeK329S0z0-:last-child {
7570
+ padding-right: var(--horizontal-inset);
7571
+ }
7572
+
7573
+ .j4h-0Mxa5gk- {
7574
+ margin: 0;
7575
+ padding: 0;
7576
+ font-family: Inter, Helvetica, Arial, sans-serif;
7577
+ font-family: var(--typography--fontFamily-normal);
7578
+ /* Wrap really long words or URL's */
7579
+ word-wrap: break-word;
7580
+ overflow-wrap: break-word;
7581
+ word-wrap: break-word;
7582
+ }
7583
+
7584
+ ._1CXlSTO0w8g- {
7585
+ font-size: 48px;
7586
+ font-size: var(--typography--fontSize-extravagant);
7587
+ line-height: 1.08;
7588
+ line-height: var(--typography--lineHeight-minuscule);
7589
+ }
7590
+
7591
+ .v5TK2OwNTaI- {
7592
+ font-size: 36px;
7593
+ font-size: var(--typography--fontSize-jumbo);
7594
+ line-height: 1.08;
7595
+ line-height: var(--typography--lineHeight-minuscule);
7596
+ }
7597
+
7598
+ .CcGPmsMUVfg- {
7599
+ font-size: 24px;
7600
+ font-size: var(--typography--fontSize-largest);
7601
+ line-height: 1.12;
7602
+ line-height: var(--typography--lineHeight-tightest);
7603
+ }
7604
+
7605
+ .ETyC5vbbImA- {
7606
+ font-size: 20px;
7607
+ font-size: var(--typography--fontSize-larger);
7608
+ line-height: 1.2;
7609
+ line-height: var(--typography--lineHeight-tight);
7610
+ }
7611
+
7612
+ .ejYSlnHYn2U- {
7613
+ font-size: 16px;
7614
+ font-size: var(--typography--fontSize-large);
7615
+ line-height: 1.34;
7616
+ line-height: var(--typography--lineHeight-large);
7617
+ }
7618
+
7619
+ .e9lFMke1PNs- {
7620
+ font-size: 14px;
7621
+ font-size: var(--typography--fontSize-base);
7622
+ line-height: 1.25;
7623
+ line-height: var(--typography--lineHeight-base);
7624
+ }
7625
+
7626
+ .MiITdlbzofc- {
7627
+ font-size: 12px;
7628
+ font-size: var(--typography--fontSize-small);
7629
+ line-height: 1.143;
7630
+ line-height: var(--typography--lineHeight-tighter);
7631
+ }
7632
+
7633
+ .hs1hcOgrK1s- {
7634
+ font-size: 10px;
7635
+ font-size: var(--typography--fontSize-smaller);
7636
+ line-height: 1.2;
7637
+ line-height: var(--typography--lineHeight-tight);
7638
+ }
7639
+
7640
+ .S3PyGdaGxok- {
7641
+ text-transform: uppercase;
7642
+ }
7643
+
7644
+ .lVlhmM5z9HI- {
7645
+ text-transform: lowercase;
7646
+ }
7647
+
7648
+ .l9xfdEljFWk- {
7649
+ text-transform: capitalize;
7571
7650
  }
7572
7651
 
7573
- .j4h-0Mxa5gk- {
7574
- margin: 0;
7575
- padding: 0;
7576
- font-family: Inter, Helvetica, Arial, sans-serif;
7577
- font-family: var(--typography--fontFamily-normal);
7578
- /* Wrap really long words or URL's */
7579
- word-wrap: break-word;
7580
- overflow-wrap: break-word;
7581
- word-wrap: break-word;
7652
+ .WYUkes21iUI- {
7653
+ text-transform: none;
7582
7654
  }
7583
7655
 
7584
7656
  .xFJ-FmjV3BE- {
@@ -7617,22 +7689,6 @@ ul.LfIIg9bwrhQ- {
7617
7689
  font-weight: 900;
7618
7690
  }
7619
7691
 
7620
- .S3PyGdaGxok- {
7621
- text-transform: uppercase;
7622
- }
7623
-
7624
- .lVlhmM5z9HI- {
7625
- text-transform: lowercase;
7626
- }
7627
-
7628
- .l9xfdEljFWk- {
7629
- text-transform: capitalize;
7630
- }
7631
-
7632
- .WYUkes21iUI- {
7633
- text-transform: none;
7634
- }
7635
-
7636
7692
  /* Base colors for backwards compatability */
7637
7693
 
7638
7694
  .xNqFL54SrGc- {
@@ -7985,60 +8041,12 @@ ul.LfIIg9bwrhQ- {
7985
8041
  background-size: 100% 20%;
7986
8042
  }
7987
8043
 
7988
- ._1CXlSTO0w8g- {
7989
- font-size: 48px;
7990
- font-size: var(--typography--fontSize-extravagant);
7991
- line-height: 1.08;
7992
- line-height: var(--typography--lineHeight-minuscule);
7993
- }
7994
-
7995
- .v5TK2OwNTaI- {
7996
- font-size: 36px;
7997
- font-size: var(--typography--fontSize-jumbo);
7998
- line-height: 1.08;
7999
- line-height: var(--typography--lineHeight-minuscule);
8000
- }
8001
-
8002
- .CcGPmsMUVfg- {
8003
- font-size: 24px;
8004
- font-size: var(--typography--fontSize-largest);
8005
- line-height: 1.12;
8006
- line-height: var(--typography--lineHeight-tightest);
8007
- }
8008
-
8009
- .ETyC5vbbImA- {
8010
- font-size: 20px;
8011
- font-size: var(--typography--fontSize-larger);
8012
- line-height: 1.2;
8013
- line-height: var(--typography--lineHeight-tight);
8014
- }
8015
-
8016
- .ejYSlnHYn2U- {
8017
- font-size: 16px;
8018
- font-size: var(--typography--fontSize-large);
8019
- line-height: 1.34;
8020
- line-height: var(--typography--lineHeight-large);
8021
- }
8022
-
8023
- .e9lFMke1PNs- {
8024
- font-size: 14px;
8025
- font-size: var(--typography--fontSize-base);
8026
- line-height: 1.25;
8027
- line-height: var(--typography--lineHeight-base);
8028
- }
8029
-
8030
- .MiITdlbzofc- {
8031
- font-size: 12px;
8032
- font-size: var(--typography--fontSize-small);
8033
- line-height: 1.143;
8034
- line-height: var(--typography--lineHeight-tighter);
8044
+ .bvnCrlndVHs- {
8045
+ display: -webkit-box !important;
8035
8046
  }
8036
-
8037
- .hs1hcOgrK1s- {
8038
- font-size: 10px;
8039
- font-size: var(--typography--fontSize-smaller);
8040
- line-height: 1.2;
8041
- line-height: var(--typography--lineHeight-tight);
8047
+ .bvnCrlndVHs- {
8048
+ -webkit-box-orient: vertical;
8049
+ overflow: hidden;
8042
8050
  }
8043
8051
 
8044
8052
  .r5lyOVfBlMI- {
@@ -8053,24 +8061,6 @@ ul.LfIIg9bwrhQ- {
8053
8061
  text-align: right;
8054
8062
  }
8055
8063
 
8056
- .V9SSKxs15xE- {
8057
- font-family: Inter, Helvetica, Arial, sans-serif;
8058
- font-family: var(--typography--fontFamily-normal);
8059
- }
8060
-
8061
- .dvw7zxC9s9g- {
8062
- font-family: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
8063
- font-family: var(--typography--fontFamily-display);
8064
- }
8065
-
8066
- .bvnCrlndVHs- {
8067
- display: -webkit-box !important;
8068
- }
8069
- .bvnCrlndVHs- {
8070
- -webkit-box-orient: vertical;
8071
- overflow: hidden;
8072
- }
8073
-
8074
8064
  .qp8E5e4q-so- {
8075
8065
  text-decoration-line: underline;
8076
8066
  text-decoration-thickness: 1px;
@@ -8176,6 +8166,16 @@ ul.LfIIg9bwrhQ- {
8176
8166
  justify-content: center;
8177
8167
  }
8178
8168
 
8169
+ .V9SSKxs15xE- {
8170
+ font-family: Inter, Helvetica, Arial, sans-serif;
8171
+ font-family: var(--typography--fontFamily-normal);
8172
+ }
8173
+
8174
+ .dvw7zxC9s9g- {
8175
+ font-family: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
8176
+ font-family: var(--typography--fontFamily-display);
8177
+ }
8178
+
8179
8179
  .YmRTd-KeXv4- {
8180
8180
  display: -ms-flexbox;
8181
8181
  display: flex;
@@ -8219,45 +8219,6 @@ ul.LfIIg9bwrhQ- {
8219
8219
  box-shadow: var(--shadow-focus);
8220
8220
  }
8221
8221
 
8222
- .U0IgyTjmtnU- {
8223
- grid-column: initial;
8224
- grid-column-end: span var(--gridCell--size-xs);
8225
- }@media (min-width: 490px) {.U0IgyTjmtnU- {
8226
- grid-column-end: span var(--gridCell--size-sm);
8227
- }
8228
- }@media (--small-screens-and-up) {.U0IgyTjmtnU- {
8229
- grid-column-end: span var(--gridCell--size-sm);
8230
- }
8231
- }@media (min-width: 768px) {.U0IgyTjmtnU- {
8232
- grid-column-end: span var(--gridCell--size-md);
8233
- }
8234
- }@media (--medium-screens-and-up) {.U0IgyTjmtnU- {
8235
- grid-column-end: span var(--gridCell--size-md);
8236
- }
8237
- }@media (min-width: 1080px) {.U0IgyTjmtnU- {
8238
- grid-column-end: span var(--gridCell--size-lg);
8239
- }
8240
- }@media (--large-screens-and-up) {.U0IgyTjmtnU- {
8241
- grid-column-end: span var(--gridCell--size-lg);
8242
- }
8243
- }@media (min-width: 1440px) {.U0IgyTjmtnU- {
8244
- grid-column-end: span var(--gridCell--size-xl);
8245
- }
8246
- }@media (--extra-large-screens-and-up) {.U0IgyTjmtnU- {
8247
- grid-column-end: span var(--gridCell--size-xl);
8248
- }
8249
- }
8250
-
8251
- .cr0irYOHA5k- div[role="radiogroup"] {
8252
- -ms-flex-direction: row;
8253
- flex-direction: row;
8254
- }
8255
-
8256
- .cr0irYOHA5k- label {
8257
- margin-right: 16px;
8258
- margin-right: var(--space-base);
8259
- }
8260
-
8261
8222
  .Qup9qglgfQ8- {
8262
8223
  display: grid;
8263
8224
  grid-template-columns: 48px 1fr;
@@ -8298,6 +8259,45 @@ ul.LfIIg9bwrhQ- {
8298
8259
  border-top-left-radius: 0;
8299
8260
  }
8300
8261
 
8262
+ .U0IgyTjmtnU- {
8263
+ grid-column: initial;
8264
+ grid-column-end: span var(--gridCell--size-xs);
8265
+ }@media (min-width: 490px) {.U0IgyTjmtnU- {
8266
+ grid-column-end: span var(--gridCell--size-sm);
8267
+ }
8268
+ }@media (--small-screens-and-up) {.U0IgyTjmtnU- {
8269
+ grid-column-end: span var(--gridCell--size-sm);
8270
+ }
8271
+ }@media (min-width: 768px) {.U0IgyTjmtnU- {
8272
+ grid-column-end: span var(--gridCell--size-md);
8273
+ }
8274
+ }@media (--medium-screens-and-up) {.U0IgyTjmtnU- {
8275
+ grid-column-end: span var(--gridCell--size-md);
8276
+ }
8277
+ }@media (min-width: 1080px) {.U0IgyTjmtnU- {
8278
+ grid-column-end: span var(--gridCell--size-lg);
8279
+ }
8280
+ }@media (--large-screens-and-up) {.U0IgyTjmtnU- {
8281
+ grid-column-end: span var(--gridCell--size-lg);
8282
+ }
8283
+ }@media (min-width: 1440px) {.U0IgyTjmtnU- {
8284
+ grid-column-end: span var(--gridCell--size-xl);
8285
+ }
8286
+ }@media (--extra-large-screens-and-up) {.U0IgyTjmtnU- {
8287
+ grid-column-end: span var(--gridCell--size-xl);
8288
+ }
8289
+ }
8290
+
8291
+ .cr0irYOHA5k- div[role="radiogroup"] {
8292
+ -ms-flex-direction: row;
8293
+ flex-direction: row;
8294
+ }
8295
+
8296
+ .cr0irYOHA5k- label {
8297
+ margin-right: 16px;
8298
+ margin-right: var(--space-base);
8299
+ }
8300
+
8301
8301
  .-R-TvZ9aU9g- {
8302
8302
  display: grid;
8303
8303
  width: 100%;
@@ -8906,16 +8906,16 @@ ul.LfIIg9bwrhQ- {
8906
8906
  font-weight: 500;
8907
8907
  }
8908
8908
 
8909
+ .CwWlXTKCPUg- {
8910
+ visibility: hidden;
8911
+ }
8912
+
8909
8913
  .BJxca-StHxg- {
8910
8914
  /* Offset the button's padding so the height of the header bar doesn't change */
8911
8915
  margin: calc(8px * -1) 0;
8912
8916
  margin: calc(var(--space-small) * -1) 0;
8913
8917
  }
8914
8918
 
8915
- .CwWlXTKCPUg- {
8916
- visibility: hidden;
8917
- }
8918
-
8919
8919
  .kXYd0fpUuek- {
8920
8920
  display: -ms-flexbox;
8921
8921
  display: flex;
@@ -9022,6 +9022,31 @@ ul.LfIIg9bwrhQ- {
9022
9022
  align-items: center;
9023
9023
  }
9024
9024
 
9025
+ ._7-6mnR33fOk- {
9026
+ width: 18px;
9027
+ height: 24px;
9028
+ }
9029
+
9030
+ ._7-6mnR33fOk- path {
9031
+ fill: hsl(198, 35%, 21%);
9032
+ fill: var(--color-interactive--subtle);
9033
+ transition: opacity 200ms ease;
9034
+ transition: opacity var(--timing-base) ease;
9035
+ }
9036
+
9037
+ ._7-6mnR33fOk- path.GBbFLBGQDvI- {
9038
+ opacity: 0.4;
9039
+ }
9040
+
9041
+ ._7-6mnR33fOk- path.ADTGMg72Zw4-,
9042
+ ._7-6mnR33fOk-:hover path {
9043
+ opacity: 1;
9044
+ }
9045
+
9046
+ ._7-6mnR33fOk-:hover path.GBbFLBGQDvI- {
9047
+ opacity: 0.6;
9048
+ }
9049
+
9025
9050
  .a-KvXvaVQks- {
9026
9051
  --overflow-fade--offset: var(--space-smaller);
9027
9052
  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);
@@ -9089,31 +9114,6 @@ ul.LfIIg9bwrhQ- {
9089
9114
  right: var(--overflow-fade--negative-offset);
9090
9115
  }
9091
9116
 
9092
- ._7-6mnR33fOk- {
9093
- width: 18px;
9094
- height: 24px;
9095
- }
9096
-
9097
- ._7-6mnR33fOk- path {
9098
- fill: hsl(198, 35%, 21%);
9099
- fill: var(--color-interactive--subtle);
9100
- transition: opacity 200ms ease;
9101
- transition: opacity var(--timing-base) ease;
9102
- }
9103
-
9104
- ._7-6mnR33fOk- path.GBbFLBGQDvI- {
9105
- opacity: 0.4;
9106
- }
9107
-
9108
- ._7-6mnR33fOk- path.ADTGMg72Zw4-,
9109
- ._7-6mnR33fOk-:hover path {
9110
- opacity: 1;
9111
- }
9112
-
9113
- ._7-6mnR33fOk-:hover path.GBbFLBGQDvI- {
9114
- opacity: 0.6;
9115
- }
9116
-
9117
9117
  .e1ztw2-YxtM- {
9118
9118
  position: fixed;
9119
9119
  top: 0;