-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents.css
More file actions
5283 lines (4736 loc) · 146 KB
/
Copy pathcomponents.css
File metadata and controls
5283 lines (4736 loc) · 146 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
@layer figui.defaults {
:root,
:host {
color-scheme: light dark;
/* Background Colors */
--figma-color-bg: light-dark(#ffffff, #2c2c2c);
--figma-color-bg-brand: light-dark(#0d99ff, #0c8ce9);
--figma-color-bg-menu: light-dark(#ffffff, #1e1e1e);
--figma-color-bg-menu-hover: #0c8ce9;
--figma-color-bg-brand-hover: light-dark(#007be5, #0a6dc2);
--figma-color-bg-brand-pressed: light-dark(#0768cf, #105cad);
--figma-color-bg-brand-secondary: light-dark(#0768cf, #105cad);
--figma-color-bg-brand-tertiary: light-dark(#e5f4ff, #394360);
--figma-color-bg-component: light-dark(#9747ff, #8a38f5);
--figma-color-bg-component-hover: light-dark(#8638e5, #7a2ed6);
--figma-color-bg-component-pressed: light-dark(#8638e5, #7a2ed6);
--figma-color-bg-component-secondary: light-dark(#7c2bda, #652ca8);
--figma-color-bg-component-tertiary: light-dark(#f1e5ff, #473956);
--figma-color-bg-danger: light-dark(#f24822, #e03e1a);
--figma-color-bg-danger-hover: light-dark(#dc3412, #c4381c);
--figma-color-bg-danger-pressed: light-dark(#dc3412, #c4381c);
--figma-color-bg-danger-secondary: light-dark(#bd2915, #963323);
--figma-color-bg-danger-tertiary: light-dark(#ffe2e0, #60332a);
--figma-color-bg-disabled: light-dark(#d9d9d9, #757575);
--figma-color-bg-disabled-secondary: #b3b3b3;
--figma-color-bg-hover: light-dark(#f5f5f5, #383838);
--figma-color-bg-inverse: light-dark(#2c2c2c, #ffffff);
--figma-color-bg-onselected: light-dark(#bde3ff, #667799);
--figma-color-bg-onselected-hover: light-dark(#bde3ff, #667799);
--figma-color-bg-onselected-pressed: light-dark(#bde3ff, #667799);
--figma-color-bg-pressed: light-dark(#f5f5f5, #383838);
--figma-color-bg-secondary: light-dark(#f5f5f5, #383838);
--figma-color-bg-selected: light-dark(#e5f4ff, #4a5878);
--figma-color-bg-selected-hover: light-dark(#bde3ff, #536383);
--figma-color-bg-selected-pressed: light-dark(#bde3ff, #536383);
--figma-color-bg-selected-secondary: light-dark(#f2f9ff, #394360);
--figma-color-bg-selected-strong: light-dark(#0d99ff, #0c8ce9);
--figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #394360);
--figma-color-bg-success: light-dark(#14ae5c, #198f51);
--figma-color-bg-success-hover: light-dark(#009951, #078348);
--figma-color-bg-success-pressed: light-dark(#009951, #078348);
--figma-color-bg-success-secondary: light-dark(#008043, #0a5c35);
--figma-color-bg-success-tertiary: light-dark(#cff7d3, #476656);
--figma-color-bg-tertiary: light-dark(#e6e6e6, #444444);
--figma-color-bg-warning: light-dark(#ffcd29, #f3c11b);
--figma-color-bg-warning-hover: light-dark(#ffc21a, #f2b50d);
--figma-color-bg-warning-pressed: light-dark(#ffc21a, #f2b50d);
--figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
--figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
--figma-color-bg-switch: light-dark(#e6e6e6, #444444);
--figma-color-bg-slot: light-dark(
rgba(255, 36, 189, 0.25),
rgba(243, 22, 176, 0.25)
);
/* Border Colors */
--figma-color-border: light-dark(#e6e6e6, #444444);
--figma-color-border-brand: light-dark(#bde3ff, #105cad);
--figma-color-border-brand-strong: light-dark(#007be5, #7cc4f8);
--figma-color-border-component: light-dark(#e4ccff, #652ca8);
--figma-color-border-component-hover: light-dark(#9747ff, #8a38f5);
--figma-color-border-component-strong: light-dark(#8638e5, #d6b6fb);
--figma-color-border-danger: light-dark(#ffc7c2, #963323);
--figma-color-border-danger-strong: light-dark(#dc3412, #fca397);
--figma-color-border-disabled: light-dark(#e6e6e6, #444444);
--figma-color-border-disabled-strong: light-dark(#0000004d, #ffffff66);
--figma-color-border-menu: #383838;
--figma-color-border-onbrand: light-dark(#007be5, #0a6dc2);
--figma-color-border-onbrand-strong: #ffffff;
--figma-color-border-oncomponent: light-dark(#8638e5, #7a2ed6);
--figma-color-border-oncomponent-strong: #ffffff;
--figma-color-border-ondanger: light-dark(#dc3412, #c4381c);
--figma-color-border-ondanger-strong: #ffffff;
--figma-color-border-onselected: light-dark(#bde3ff, #667799);
--figma-color-border-onselected-strong: light-dark(#000000e5, #ffffffe5);
--figma-color-border-onsuccess: light-dark(#009951, #078348);
--figma-color-border-onsuccess-strong: #ffffff;
--figma-color-border-onwarning: light-dark(#fab815, #e4a711);
--figma-color-border-onwarning-strong: #000000e5;
--figma-color-border-selected: light-dark(#0d99ff, #0c8ce9);
--figma-color-border-selected-strong: light-dark(#007be5, #7cc4f8);
--figma-color-border-strong: light-dark(#2c2c2c, #ffffffe5);
--figma-color-border-success: light-dark(#aff4c6, #0a5c35);
--figma-color-border-success-strong: light-dark(#009951, #79d297);
--figma-color-border-warning: light-dark(#ffe8a3, #925711);
--figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);
--figma-color-border-slot: light-dark(#ff24bd, #f316b0);
/* Focus */
--figma-focus-outline: 1px solid var(--figma-color-border-selected);
--figma-focus-outline-offset: -1px;
--figma-focus-outline-radius: inherit;
/* Icon Colors */
--figma-color-icon: light-dark(#000000e5, #ffffff);
--figma-color-icon-brand: light-dark(#007be5, #7cc4f8);
--figma-color-icon-brand-pressed: light-dark(#0768cf, #0c8ce9);
--figma-color-icon-brand-secondary: light-dark(#80caff, #0a6dc2);
--figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
--figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
--figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
--figma-color-icon-component-secondary: light-dark(#6f3bb2, #d1a8ff);
--figma-color-icon-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
--figma-color-icon-danger: light-dark(#f24822, #e03e1a);
--figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
--figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
--figma-color-icon-danger-secondary: light-dark(#f24822, #e03e1a);
--figma-color-icon-danger-secondary-hover: light-dark(#f24822, #e03e1a);
--figma-color-icon-danger-tertiary: light-dark(#f24822, #e03e1a);
--figma-color-icon-disabled: light-dark(#0000004d, #ffffff66);
--figma-color-icon-hover: light-dark(#000000e5, #ffffff);
--figma-color-icon-onbrand: #ffffff;
--figma-color-icon-onbrand-secondary: #ffffffcc;
--figma-color-icon-onbrand-tertiary: #ffffff66;
--figma-color-icon-oncomponent: #ffffff;
--figma-color-icon-oncomponent-secondary: #ffffffcc;
--figma-color-icon-oncomponent-tertiary: #ffffff66;
--figma-color-icon-ondanger: #ffffff;
--figma-color-icon-ondanger-secondary: #ffffffcc;
--figma-color-icon-ondanger-tertiary: #ffffff66;
--figma-color-icon-ondisabled: light-dark(#ffffff, #2c2c2c);
--figma-color-icon-oninverse: light-dark(#ffffffe5, #000000e5);
--figma-color-icon-onselected: light-dark(#000000e5, #ffffff);
--figma-color-icon-onselected-secondary: light-dark(#00000080, #ffffffb2);
--figma-color-icon-onselected-strong: #ffffff;
--figma-color-icon-onselected-tertiary: light-dark(#0000004d, #ffffff66);
--figma-color-icon-onsuccess: #ffffff;
--figma-color-icon-onsuccess-secondary: #ffffffcc;
--figma-color-icon-onsuccess-tertiary: #ffffff66;
--figma-color-icon-onwarning: #000000e5;
--figma-color-icon-onwarning-secondary: #00000080;
--figma-color-icon-onwarning-tertiary: #0000004d;
--figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
--figma-color-icon-secondary: light-dark(#00000099, #ffffffcc);
--figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
--figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
--figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
--figma-color-icon-selected-tertiary: light-dark(#007be5, #7cc4f8);
--figma-color-icon-success: light-dark(#14ae5c, #198f51);
--figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
--figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
--figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
--figma-color-icon-tertiary: light-dark(#00000099, #ffffff99);
--figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
--figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
--figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
--figma-color-icon-warning-secondary: light-dark(#ffcd29, #f3c11b);
--figma-color-icon-warning-tertiary: light-dark(#ffcd29, #f3c11b);
/* Text Colors */
--figma-color-text: light-dark(#000000e5, #ffffff);
--figma-color-text-brand: light-dark(#007be5, #7cc4f8);
--figma-color-text-brand-secondary: light-dark(#007be5, #7cc4f8);
--figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
--figma-color-text-component: light-dark(#8638e5, #d1a8ff);
--figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
--figma-color-text-component-secondary: light-dark(#6f3bb2, #d1a8ff);
--figma-color-text-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
--figma-color-text-danger: light-dark(#dc3412, #fca397);
--figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
--figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
--figma-color-text-disabled: light-dark(#0000004d, #ffffff66);
--figma-color-text-hover: light-dark(#000000e5, #ffffff);
--figma-color-text-onbrand: #ffffff;
--figma-color-text-onbrand-secondary: #ffffffcc;
--figma-color-text-onbrand-tertiary: #ffffff66;
--figma-color-text-oncomponent: #ffffff;
--figma-color-text-oncomponent-secondary: #ffffffcc;
--figma-color-text-oncomponent-tertiary: #ffffff66;
--figma-color-text-ondanger: #ffffff;
--figma-color-text-ondanger-secondary: #ffffffcc;
--figma-color-text-ondanger-tertiary: #ffffff66;
--figma-color-text-ondisabled: light-dark(#ffffff, #2c2c2c);
--figma-color-text-oninverse: light-dark(#ffffffe5, #000000e5);
--figma-color-text-onselected: light-dark(#000000e5, #ffffffe5);
--figma-color-text-onselected-secondary: light-dark(#00000080, #ffffffb2);
--figma-color-text-onselected-strong: #ffffff;
--figma-color-text-onselected-tertiary: light-dark(#0000004d, #ffffff66);
--figma-color-text-onsuccess: #ffffff;
--figma-color-text-onsuccess-secondary: #ffffffcc;
--figma-color-text-onsuccess-tertiary: #ffffff66;
--figma-color-text-onwarning: #000000e5;
--figma-color-text-onwarning-secondary: #00000080;
--figma-color-text-onwarning-tertiary: #0000004d;
--figma-color-text-secondary: light-dark(#00000099, #ffffffcc);
--figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
--figma-color-text-selection: rgba(13, 153, 255, 0.4);
--figma-color-text-selected: light-dark(#007be5, #7cc4f8);
--figma-color-text-selected-secondary: light-dark(#007be5, #7cc4f8);
--figma-color-text-selected-tertiary: light-dark(#007be5, #7cc4f8);
--figma-color-text-success: light-dark(#009951, #79d297);
--figma-color-text-success-secondary: light-dark(#009951, #79d297);
--figma-color-text-success-tertiary: light-dark(#009951, #79d297);
--figma-color-text-tertiary: light-dark(#00000099, #ffffff99);
--figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
--figma-color-text-warning: light-dark(#b86200, #f7d15f);
--figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
--figma-color-text-warning-tertiary: light-dark(#b86200, #f7d15f);
--figma-color-text-menu: #ffffff;
--figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
--figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.7);
}
}
:root,
:host {
/* Typography & Sizing */
--font-size: 16px;
--font-family:
AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--body-medium-fontSize: 0.6875rem;
--body-large-fontSize: 0.8125rem;
--body-letter-spacing: 0.055px;
--body-medium-strong-fontWeight: 550;
--body-large-strong-fontWeight: 500;
--body-medium-fontWeight: 450;
/* Spacing */
--spacer-1: 0.25rem;
--spacer-2: 0.5rem;
--spacer-2-5: 0.75rem;
--spacer-3: 1rem;
--spacer-4: 1.5rem;
--spacer-5: 2rem;
--spacer-6: 2.5rem;
/* Radii */
--radius-none: 0;
--radius-small: 0.125rem;
--radius-medium: 0.3125rem;
--radius-large: 0.8125rem;
--figma-radius-none: var(--radius-none);
--figma-radius-small: var(--radius-small);
--figma-radius-medium: var(--radius-medium);
--figma-radius-large: var(--radius-large);
/* Transitions */
--input-transition: all 0.08s ease-out;
/* Misc UI */
--popover-min-width: 15rem;
--handle-color: #fff;
--bg-selected: #f5f5f5;
--bg-selected-active: #e5f4ff;
--bg-tooltip: var(--figma-color-bg-menu);
--color-tooltip: var(--figma-color-text);
/* Transparent Backgrounds - use light-dark() */
--figma-color-bordertranslucent: light-dark(
rgba(0, 0, 0, 0.1),
rgba(255, 255, 255, 0.1)
);
--figma-color-bg-transparent: light-dark(
rgba(0, 0, 0, 0.05),
rgba(255, 255, 255, 0.05)
);
--figma-color-bg-transparent-hover: light-dark(
rgba(0, 0, 0, 0.05),
rgba(255, 255, 255, 0.05)
);
--figma-color-bg-transparent-pressed: light-dark(
rgba(0, 0, 0, 0.1),
rgba(255, 255, 255, 0.1)
);
--figma-color-bg-transparent-secondary: light-dark(
rgba(0, 0, 0, 0.2),
rgba(255, 255, 255, 0.2)
);
/* Gradients */
--eased-fade-stops:
var(--figma-color-bg) 0%,
color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%,
color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%,
color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%,
color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%,
color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%,
color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%,
color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%,
color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%,
color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%,
transparent 100%;
--checkerboard: repeating-conic-gradient(
rgba(0, 0, 0, 0.1) 0% 25%,
rgba(255, 255, 255, 0.1) 0% 50%
)
0 0 / 0.66666rem 0.66666rem;
--checkerboard-small: repeating-conic-gradient(
rgba(0, 0, 0, 0.2) 0% 25%,
rgba(255, 255, 255, 0.2) 0% 50%
)
0 0 / 0.5rem 0.5rem;
--checkerboard-chit: repeating-conic-gradient(
rgba(0, 0, 0, 0.2) 0% 25%,
rgba(255, 255, 255, 0.2) 0% 50%
)
0 0 / 0.4375rem 0.4375rem;
--checkerboard-slider: repeating-conic-gradient(
rgba(0, 0, 0, 0.2) 0% 25%,
rgba(255, 255, 255, 0.2) 0% 50%
)
0 0 / 0.375rem 0.375rem;
--checkerboard-handle: repeating-conic-gradient(
rgba(0, 0, 0, 0.2) 0% 25%,
rgba(255, 255, 255, 0.2) 0% 50%
)
0 0 / 0.375rem 0.375rem;
--bg-hue: linear-gradient(
90deg,
rgba(255, 0, 0, 1),
rgba(255, 48, 0, 1),
rgba(255, 96, 0, 1),
rgba(255, 143, 0, 1),
rgba(255, 191, 0, 1),
rgba(255, 239, 0, 1),
rgba(223, 255, 0, 1),
rgba(175, 255, 0, 1),
rgba(128, 255, 0, 1),
rgba(80, 255, 0, 1),
rgba(32, 255, 0, 1),
rgba(0, 255, 16, 1),
rgba(0, 255, 64, 1),
rgba(0, 255, 112, 1),
rgba(0, 255, 159, 1),
rgba(0, 255, 207, 1),
rgba(0, 255, 255, 1),
rgba(0, 207, 255, 1),
rgba(0, 159, 255, 1),
rgba(0, 112, 255, 1),
rgba(0, 64, 255, 1),
rgba(0, 16, 255, 1),
rgba(32, 0, 255, 1),
rgba(80, 0, 255, 1),
rgba(127, 0, 255, 1),
rgba(175, 0, 255, 1),
rgba(223, 0, 255, 1),
rgba(255, 0, 239, 1),
rgba(255, 0, 191, 1),
rgba(255, 0, 143, 1),
rgba(255, 0, 96, 1),
rgba(255, 0, 48, 1)
);
/* Icons - colorless shapes for use with mask-image */
--icon-16-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
--icon-16-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
--icon-16-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
--icon-24-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
--icon-24-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-16-arrow-left: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-24-arrow-left: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1464 7.64645C13.3417 7.45118 13.6582 7.45118 13.8535 7.64645C14.0487 7.84171 14.0487 8.15822 13.8535 8.35348L10.207 12L13.8535 15.6464C14.0487 15.8417 14.0487 16.1582 13.8535 16.3535C13.6582 16.5487 13.3417 16.5487 13.1464 16.3535L9.14645 12.3535C8.95118 12.1582 8.95118 11.8417 9.14645 11.6464L13.1464 7.64645Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-24-forward: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-play: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-pause: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");
--icon-24-search: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6C14.5376 6 17 8.46243 17 11.5C17 12.8387 16.5206 14.0648 15.7256 15.0186L17.8535 17.1465C18.0488 17.3417 18.0488 17.6582 17.8535 17.8535C17.6583 18.0486 17.3417 18.0487 17.1465 17.8535L15.0186 15.7256C14.0648 16.5206 12.8387 17 11.5 17C8.46243 17 6 14.5376 6 11.5C6 8.46243 8.46243 6 11.5 6ZM11.5 7C9.01472 7 7 9.01472 7 11.5C7 13.9853 9.01472 16 11.5 16C13.9853 16 16 13.9853 16 11.5C16 9.01472 13.9853 7 11.5 7Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-16-close: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1464 4.14645C11.3417 3.95118 11.6582 3.95118 11.8534 4.14645C12.0487 4.34171 12.0487 4.65822 11.8534 4.85348L8.70696 7.99996L11.8534 11.1464C12.0487 11.3417 12.0487 11.6582 11.8534 11.8535C11.6582 12.0487 11.3417 12.0487 11.1464 11.8535L7.99993 8.70699L4.85345 11.8535C4.65819 12.0487 4.34168 12.0487 4.14642 11.8535C3.95115 11.6582 3.95115 11.3417 4.14642 11.1464L7.2929 7.99996L4.14642 4.85348C3.95115 4.65822 3.95115 4.34171 4.14642 4.14645C4.34168 3.95118 4.65819 3.95118 4.85345 4.14645L7.99993 7.29293L11.1464 4.14645Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-24-visible: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7C16.6667 7 19 10.75 19 12C19 13.25 16.6667 17 12 17C7.47888 17 5.14784 13.4802 5.00684 12.124L5 12C5 10.75 7.33333 7 12 7ZM12 8C9.95481 8 8.44137 8.81596 7.43359 9.76074C6.92603 10.2366 6.55333 10.7404 6.3125 11.1758C6.05459 11.6422 6 11.9345 6 12C6.00002 12.0656 6.05462 12.3579 6.3125 12.8242C6.55334 13.2597 6.92602 13.7634 7.43359 14.2393C8.44138 15.1841 9.95482 16 12 16C14.0452 16 15.5586 15.1841 16.5664 14.2393C17.074 13.7634 17.4467 13.2597 17.6875 12.8242C17.9454 12.3578 18 12.0655 18 12C18 11.9345 17.9454 11.6422 17.6875 11.1758C17.4467 10.7403 17.074 10.2366 16.5664 9.76074C15.5586 8.81595 14.0452 8 12 8ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-16-visible: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4C11.5 4 14 7 14 8C14 9 11.5 12 8 12C4.5 12 2 9 2 8C2 7 4.5 4 8 4ZM8 5C6.60166 5 5.36649 5.57587 4.44238 6.30176C3.98232 6.66314 3.61689 7.04836 3.36328 7.38867C3.13535 7.69455 3.04058 7.90734 3.00977 8C3.04058 8.09266 3.13535 8.30545 3.36328 8.61133C3.61689 8.95164 3.98232 9.33686 4.44238 9.69824C5.36649 10.4241 6.60166 11 8 11C9.39834 11 10.6335 10.4241 11.5576 9.69824C12.0177 9.33686 12.3831 8.95163 12.6367 8.61133C12.8644 8.30577 12.9583 8.09281 12.9893 8C12.9583 7.90719 12.8644 7.69423 12.6367 7.38867C12.3831 7.04836 12.0177 6.66314 11.5576 6.30176C10.6335 5.57587 9.39834 5 8 5ZM8 7C8.55228 7 9 7.44772 9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-24-hidden: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.51343 9C5.78194 9 6.03192 9.21752 6.13647 9.46484C6.18062 9.56923 6.2378 9.68955 6.31225 9.82422C6.55304 10.2596 6.92594 10.7635 7.43335 11.2393C8.44103 12.184 9.95488 12.9998 11.9998 13C14.0447 13 15.5584 12.1839 16.5662 11.2393C17.0736 10.7635 17.4464 10.2596 17.6873 9.82422C17.7588 9.69491 17.8147 9.57896 17.8582 9.47754C17.9668 9.22373 18.2237 9.0001 18.4998 9C18.7757 9 18.9947 9.22463 18.9167 9.48926C18.7151 10.1715 18.146 11.1394 17.2107 12.0039L18.3533 13.1465C18.5485 13.3417 18.5485 13.6583 18.3533 13.8535C18.158 14.0486 17.8414 14.0487 17.6462 13.8535L16.4275 12.6348C15.8837 13.0163 15.2541 13.3499 14.5378 13.5918L14.9851 15.3789C15.0519 15.6467 14.8887 15.9184 14.6208 15.9854C14.3532 16.0519 14.0813 15.8888 14.0144 15.6211L13.571 13.8486C13.0805 13.9449 12.5568 14 11.9998 14C11.4423 14 10.9184 13.945 10.4275 13.8486L9.98511 15.6211C9.91811 15.8889 9.64645 16.0522 9.37866 15.9854C9.11111 15.9182 8.94768 15.6466 9.0144 15.3789L9.46069 13.5908C8.74459 13.3488 8.11371 13.0173 7.57007 12.6357L6.35327 13.8535C6.15799 14.0486 5.84143 14.0487 5.64624 13.8535C5.45126 13.6583 5.45126 13.3417 5.64624 13.1465L6.78882 12.0029C5.67043 10.9689 5.07561 9.78781 5.00659 9.12402C5.00289 9.05679 5.05649 9.00021 5.12378 9H5.51343Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-16-hidden: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.4138 5.5C13.7373 5.5 13.9807 5.76652 13.8415 6.05859C13.6075 6.54952 13.1215 7.17678 12.4421 7.7627L13.4157 9.22266C13.5689 9.45242 13.5068 9.76284 13.277 9.91602C13.0473 10.069 12.7368 10.007 12.5837 9.77734L11.6413 8.36328C11.1673 8.67367 10.6355 8.9499 10.0524 9.15039L10.4851 10.8789C10.5519 11.1467 10.3886 11.4184 10.1208 11.4854C9.85308 11.5519 9.58128 11.3888 9.51435 11.1211L9.08466 9.40332C8.7357 9.46559 8.37327 9.5 7.9997 9.5C7.62569 9.49998 7.2631 9.46575 6.91376 9.40332L6.48505 11.1211C6.41806 11.3889 6.1464 11.5522 5.87861 11.4854C5.61102 11.4183 5.44761 11.1466 5.51435 10.8789L5.94599 9.15039C5.36302 8.94979 4.83099 8.67372 4.35712 8.36328L3.41572 9.77734C3.2625 10.007 2.95206 10.0692 2.72236 9.91602C2.49286 9.76282 2.43071 9.45232 2.58368 9.22266L3.55634 7.76172C2.8777 7.1762 2.3927 6.54916 2.15888 6.05859C2.01973 5.76657 2.26219 5.50011 2.58564 5.5C3.05129 5.5 3.02196 5.6191 3.27021 5.98145C3.50192 6.31962 3.85806 6.72067 4.32294 7.10352C5.25669 7.87247 6.53958 8.49991 7.9997 8.5C9.45975 8.5 10.7427 7.87238 11.6765 7.10352C12.1413 6.72067 12.4985 6.31962 12.7302 5.98145C12.981 5.61523 12.9588 5.50007 13.4138 5.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
--icon-24-spinner: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.5C13.2856 5.5 14.5423 5.88122 15.6112 6.59545C16.6801 7.30968 17.5132 8.32484 18.0052 9.51256C18.4972 10.7003 18.6259 12.0072 18.3751 13.2681C18.1243 14.529 17.5052 15.6872 16.5962 16.5962C15.6872 17.5052 14.529 18.1243 13.2681 18.3751C12.0072 18.6259 10.7003 18.4972 9.51256 18.0052C8.32484 17.5132 7.30968 16.6801 6.59545 15.6112C5.88122 14.5423 5.5 13.2856 5.5 12' stroke='black' stroke-opacity='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-16-spinner: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2.5C9.0878 2.5 10.1512 2.82257 11.0556 3.42692C11.9601 4.03126 12.6651 4.89025 13.0813 5.89524C13.4976 6.90023 13.6065 8.0061 13.3943 9.073C13.1821 10.1399 12.6583 11.1199 11.8891 11.8891C11.1199 12.6583 10.1399 13.1821 9.073 13.3943C8.0061 13.6065 6.90023 13.4976 5.89524 13.0813C4.89025 12.6651 4.03126 11.9601 3.42692 11.0556C2.82257 10.1512 2.5 9.0878 2.5 8' stroke='black' stroke-opacity='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
--tip-pointer: path("M8 6L2 0H14L8 6Z");
/* Elevations — light-dark() handles theme switching inline */
--figma-elevation-100:
0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
--figma-elevation-200:
0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));
--figma-elevation-100-canvas:
0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.1)) inset,
0 0 0.5px 0 light-dark(transparent, rgba(255, 255, 255, 0.3)) inset,
0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
--figma-elevation-200-canvas:
0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.10), transparent),
0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.08)) inset,
0 3px 8px 0 light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.35)),
0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.30)) inset,
0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.50));
--figma-elevation-400-menu-panel:
0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
--figma-elevation-500-modal-window:
0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
--handle-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
&.figma-light{
color-scheme: light;
background-color: var(--figma-color-bg);
}
&.figma-dark{
color-scheme: dark;
background-color: var(--figma-color-bg);
}
}
button,
select,
input,
fieldset {
display: inline-flex;
align-items: center;
margin: 0;
gap: 0.25rem;
font: inherit;
line-height: 1rem;
}
textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="tel"],
.input {
background-color: var(--figma-color-bg-secondary);
border: 0;
border-radius: var(--radius-medium);
padding: var(--spacer-1) var(--spacer-2);
line-height: 1rem !important;
box-sizing: content-box;
resize: none;
min-width: 0;
font: inherit;
display: flex;
color: inherit;
appearance: textfield;
-moz-appearance: textfield;
&:focus {
outline: var(--figma-focus-outline);
outline-offset: var(--figma-focus-outline-offset);
}
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
display: none;
color-scheme: inherit;
-webkit-appearance: none;
margin: 0;
}
}
progress {
--progress-height: 0.375rem;
--progress-radius: calc(var(--progress-height) / 2);
display: block;
width: 100%;
min-width: 0;
height: var(--progress-height);
margin: 0;
padding: 0;
border: 0;
appearance: none;
-webkit-appearance: none;
color: transparent;
font-size: 0;
overflow: hidden;
background: var(--figma-color-bg-secondary);
border-radius: var(--progress-radius);
&::-webkit-progress-bar {
background: var(--figma-color-bg-secondary);
border-radius: var(--progress-radius);
}
&::-webkit-progress-value {
background: var(--figma-color-bg-brand);
border-radius: var(--progress-radius);
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
min-width: var(--progress-height);
}
&:not([value]) {
--progress-indeterminate-width: 30%;
background-image:
radial-gradient(
circle at var(--progress-radius) 50%,
var(--figma-color-bg-brand) 0 var(--progress-radius),
transparent calc(var(--progress-radius) + 0.5px)
),
linear-gradient(
90deg,
transparent 0 var(--progress-radius),
var(--figma-color-bg-brand) var(--progress-radius)
calc(100% - var(--progress-radius)),
transparent calc(100% - var(--progress-radius)) 100%
),
radial-gradient(
circle at calc(100% - var(--progress-radius)) 50%,
var(--figma-color-bg-brand) 0 var(--progress-radius),
transparent calc(var(--progress-radius) + 0.5px)
);
will-change: background-position;
background-repeat: no-repeat;
background-size: var(--progress-indeterminate-width) 100%;
animation: fig-progress-indeterminate 1s infinite linear;
}
&:not([value])::-webkit-progress-bar {
background: transparent;
}
&:not([value])::-webkit-progress-value {
background: transparent;
box-shadow: none;
min-width: 0;
}
&::-moz-progress-bar {
background: var(--figma-color-bg-brand);
border-radius: var(--progress-radius);
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
min-width: var(--progress-height);
}
&:not([value])::-moz-progress-bar {
background: transparent;
box-shadow: none;
min-width: 0;
}
}
@keyframes fig-progress-indeterminate {
from {
background-position: calc(-1 * var(--progress-indeterminate-width)) 0;
}
to {
background-position: calc(100% + var(--progress-indeterminate-width)) 0;
}
}
fig-input-number .fig-steppers {
order: 3;
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
overflow: hidden;
button {
display: block;
appearance: none;
border: 0;
padding: 0;
margin: 0;
width: 1.5rem;
flex: 1;
background-color: var(--figma-color-text-secondary);
mask-size: 1rem;
mask-repeat: no-repeat;
mask-position: center -3.5px;
&:hover,
&:active{
background-color: var(--figma-color-text) !important;
}
&:disabled {
pointer-events: none;
background-color: var(--figma-color-text-disabled);
}
}
fig-input-number[disabled]:not([disabled="false"]) & button {
pointer-events: none;
background-color: var(--figma-color-text-disabled);
}
& .fig-stepper-up {
mask-image: var(--icon-16-chevron);
rotate: 180deg;
&:active{
transform: translateY(1px);
}
}
& .fig-stepper-down {
mask-image: var(--icon-16-chevron);
&:active{
transform: translateY(1px);
}
}
}
/* Textarea */
textarea {
min-height: 2rem;
display: block;
width: 100%;
box-sizing: border-box;
}
/* Dropdown */
select,
input[type="text"][list] {
padding: var(--spacer-2);
background-color: var(--figma-color-bg);
&:not([multiple]) {
height: var(--spacer-4);
padding: 0 var(--spacer-4) 0 var(--spacer-2);
background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
var(--icon-16-chevron);
}
&[multiple] {
overflow: auto;
option{
padding: var(--spacer-1) var(--spacer-2);
border-radius: var(--radius-medium);
&:checked {
background-color: var(--figma-color-bg-selected-strong) !important;
}
&:active{
background-color: var(--figma-color-bg-active);
}
&:hover{
background-color: var(--figma-color-bg-hover);
}
}
}
border-radius: var(--radius-medium);
display: flex;
appearance: none;
align-items: center;
border: 0;
color: var(--figma-color-text);
box-shadow: inset 0 0 0 1px var(--figma-color-border);
accent-color: var(--figma-color-bg-brand);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:focus {
outline: var(--figma-focus-outline);
outline-offset: var(--figma-focus-outline-offset);
}
&::-webkit-calendar-picker-indicator {
color-scheme: inherit;
opacity: 0;
}
}
@supports (appearance: base-select) {
fig-dropdown[experimental~="modern"] {
&[type="dropdown"] {
select:before {
content: attr(aria-label);
}
option::checkmark {
display: none;
}
option {
padding-left: var(--spacer-3);
}
}
select {
--option-height: 1.5rem;
--max-width: 20rem;
@media (hover) and (pointer: fine) {
&,
&::picker(select) {
appearance: base-select;
}
}
padding-block: 0;
will-change: scale;
@supports (-webkit-touch-callout: none) {
font-size: 16px;
}
option::checkmark {
content: "";
display: block;
width: 1rem;
height: 1rem;
background-color: currentColor;
-webkit-mask-image: var(--icon-16-checkmark);
mask-image: var(--icon-16-checkmark);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
option {
display: flex;
gap: var(--spacer-1);
padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
font-weight: var(--body-medium-fontWeight);
color: var(--figma-color-text-menu);
position: relative;
& * {
color: inherit;
}
&[hidden] {
display: none;
}
&:before {
content: "";
display: block;
position: absolute;
inset: 0 var(--spacer-2);
border-radius: var(--radius-medium);
z-index: -1;
}
&:checked:before {
background-color: transparent;
}
&:not(:checked):before {
background-color: transparent;
}
&:not(:disabled) {
&:hover,
&:active,
&:focus-visible {
background-color: transparent;
outline: 0;
&:before {
background-color: var(--figma-color-bg-menu-hover);
}
}
}
}
optgroup {
color: var(--figma-color-text-menu-secondary);
text-align: left;
position: relative;
padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
font-weight: var(--body-medium-fontWeight);
&[label]:not([label=""]) {
padding-top: var(--spacer-2);
option:first-child {
margin-top: var(--spacer-2);
}
}
legend {
padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
}
option {
margin: 0 calc(var(--spacer-1) * -1);
margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
}
&:not(:first-child):not(:first-of-type) {
margin-top: var(--spacer-2);
padding-top: var(--spacer-3);
&:before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 1px;
height: 1px;
background-color: var(--figma-color-border-menu);
margin-bottom: var(--spacer-2);
}
}
}
option[hidden="true"]:first-child + optgroup {
margin-top: 0;
padding-top: var(--spacer-2);
&:before {
display: none;
}
}
& > button {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--spacer-1, 0.25rem);
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0;
color: inherit;
font: inherit;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
& > selectedcontent {
display: flex;
align-items: center;
gap: 0;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
&:has(> svg) {
margin-left: calc(var(--spacer-2) * -1);
}
& svg {
flex-shrink: 0;
}
}
}
}
::picker-icon {
display: none;
}
::picker(select) {
appearance: base-select;
color-scheme: dark;
/* Appearance/style */
scrollbar-width: thin;
outline: 0;
scrollbar-color: var(--figma-color-text-menu-tertiary)
var(--figma-color-bg-menu);
border-radius: var(--radius-large);
border: 0;
background-color: var(--figma-color-bg-menu);
padding: var(--spacer-2) 0;
box-shadow: var(--figma-elevation-400-menu-panel);
}
}
}
input[type="text"][list],
select:not([multiple]) {
padding-right: var(--spacer-4);
padding-left: var(--spacer-2);
}
/* Dropdown */
fig-dropdown {
& > *:not(select) {
display: none !important;
}
}
fig-dropdown,
select,
.fig-dropdown {
display: inline-flex;
position: relative;
> select {
display: flex;
align-items: center;
flex: 1;
width: 100%;
}
/* Chevron icon using mask-image for light-dark support */
&:not([multiple])::after {
content: "";
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
mask-image: var(--icon-16-chevron);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--figma-color-icon);
pointer-events: none;
}
/* Autoresize to content width */
&[autoresize] select {
field-sizing: content;
}
}
/* Button */
button,
fig-button {
color: var(--figma-color-text-onbrand);
display: flex;
align-items: center;
justify-content: center;
height: var(--spacer-4);
padding: 0 var(--spacer-2);
appearance: none;
border: 0;
min-width: 0;
outline: 0;
line-height: 1rem;
border-radius: var(--radius-medium);
background-color: var(--figma-color-bg-brand);
font-weight: 500;
&:active {
background-color: var(--figma-color-bg-brand-pressed);
}
&:hover {
background-color: var(--figma-color-bg-brand-hover);
&:active {
background-color: var(--figma-color-bg-brand-pressed);
color: var(--figma-color-text-onbrand-secondary);
}
}
/* Variant: Link */
&[variant="link"] {
box-shadow: none;
background: none;
color: var(--figma-color-text-brand);
&:hover:not(:active) {
background-color: transparent;
}
&:active {
outline: 0;
background-color: var(--figma-color-bg-selected);
color: var(--figma-color-text-brand);
}
}
/* Variant: Ghost */
&[variant="ghost"] {
box-shadow: none;
background: none;
color: var(--figma-color-text);
&:hover:not(:active) {
background-color: var(--figma-color-bg-transparent-hover);
}
&:active {
outline: 0;
background-color: var(--figma-color-bg-transparent-pressed);
color: var(--figma-color-text);
}
}
&[variant="ghost"][disabled]:not([disabled="false"]) {
background-color: transparent;
}
/* Variant: Secondary */
&[variant="secondary"] {
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
padding: 0 calc(var(--spacer-2) - 1px);
background: none;
color: var(--figma-color-text);
&:active,
&:active:hover {
background-color: var(--figma-color-bg-transparent-pressed);
color: var(--figma-color-text);
}
&:hover {