@simplybusiness/theme-core 7.1.0 → 7.1.1

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/index.css CHANGED
@@ -31,16 +31,13 @@
31
31
  .mobius-accordion__content.--is-open{
32
32
  overflow:visible;
33
33
  opacity:1;
34
- margin-top:8px;
35
34
  margin-top:var(--size-xs);
36
35
  }
37
36
 
38
37
  .mobius-accordion__link{
39
38
  display:flex;
40
39
  align-items:center;
41
- border-radius:4px;
42
40
  border-radius:var(--radius-1);
43
- color:#4632d8;
44
41
  color:var(--color-secondary);
45
42
  cursor:pointer;
46
43
  outline:none;
@@ -51,20 +48,16 @@
51
48
 
52
49
  .mobius-accordion__link:hover,
53
50
  .mobius-accordion__link:active{
54
- color:#2a1e81;
55
51
  color:var(--color-secondary-hover);
56
52
  }
57
53
 
58
54
  .mobius-accordion__link:focus-visible{
59
55
  outline:none;
60
- box-shadow:0 0 0 2px #e943c9;
61
56
  box-shadow:var(--box-shadow-default);
62
57
  }
63
58
 
64
59
  .mobius-accordion__link-text{
65
- margin-right:8px;
66
60
  margin-right:var(--size-xs);
67
- line-height:1.5;
68
61
  line-height:var(--line-height-normal);
69
62
  }
70
63
 
@@ -80,15 +73,11 @@
80
73
  display:flex;
81
74
  flex-grow:1;
82
75
  align-items:center;
83
- font-size:14px;
84
76
  font-size:var(--font-size-2);
85
- color:#18181d;
86
77
  color:var(--color-text);
87
78
  border:2px solid;
88
79
  border-color:inherit;
89
- border-radius:4px;
90
80
  border-radius:var(--radius-1);
91
- padding:16px;
92
81
  padding:var(--size-sm);
93
82
  }
94
83
 
@@ -101,35 +90,26 @@
101
90
  }
102
91
 
103
92
  .mobius-alert.--info{
104
- border-color:#176fae;
105
93
  border-color:var(--color-info);
106
- background-color:#e8f1f7;
107
94
  background-color:var(--color-info-background);
108
95
  }
109
96
 
110
97
  .mobius-alert.--success{
111
- border-color:#008744;
112
98
  border-color:var(--color-valid);
113
- background-color:#e6f3ed;
114
99
  background-color:var(--color-valid-background);
115
100
  }
116
101
 
117
102
  .mobius-alert.--warning{
118
- border-color:#ffba00;
119
103
  border-color:var(--color-warning);
120
- background-color:#fff9e6;
121
104
  background-color:var(--color-warning-background);
122
105
  }
123
106
 
124
107
  .mobius-alert.--error{
125
- border-color:#b90909;
126
108
  border-color:var(--color-error);
127
- background-color:#f8e7e7;
128
109
  background-color:var(--color-error-background);
129
110
  }
130
111
 
131
112
  .mobius-alert__icon{
132
- margin-right:16px;
133
113
  margin-right:var(--size-sm);
134
114
  }
135
115
 
@@ -138,9 +118,7 @@
138
118
  }
139
119
 
140
120
  .mobius-alert__header{
141
- margin:0 0 4px;
142
121
  margin:0 0 var(--size-xxs);
143
- font-size:16px;
144
122
  font-size:var(--font-size-regular);
145
123
  font-weight:600;
146
124
  }
@@ -151,15 +129,10 @@
151
129
 
152
130
  .mobius-breadcrumb{
153
131
  box-sizing:border-box;
154
- background-color:#f3f3f3;
155
132
  background-color:var(--color-background-light);
156
- padding-top:24px;
157
133
  padding-top:var(--size-md);
158
- padding-bottom:24px;
159
134
  padding-bottom:var(--size-md);
160
- padding-left:16px;
161
135
  padding-left:var(--size-sm);
162
- padding-right:16px;
163
136
  padding-right:var(--size-sm);
164
137
  display:flex;
165
138
  flex-direction:row;
@@ -178,7 +151,6 @@
178
151
 
179
152
  .mobius-breadcrumb__item{
180
153
  box-sizing:border-box;
181
- color:#18181d;
182
154
  color:var(--color-text);
183
155
  display:flex;
184
156
  flex-direction:row;
@@ -186,9 +158,7 @@
186
158
  }
187
159
 
188
160
  .mobius-breadcrumb__separator{
189
- margin-left:8px;
190
161
  margin-left:var(--size-xs);
191
- margin-right:8px;
192
162
  margin-right:var(--size-xs);
193
163
  }
194
164
 
@@ -206,59 +176,45 @@
206
176
  outline:none;
207
177
  -webkit-text-decoration:none;
208
178
  text-decoration:none;
209
- font-family:museosans, Arial, sans-serif;
210
179
  font-family:var(--font-family);
211
180
  cursor:pointer;
212
181
  color:var(--button-content-color);
213
- font-weight:700;
214
182
  font-weight:var(--font-weight-bold);
215
- border-radius:4px;
216
183
  border-radius:var(--button-border-radius);
217
- border-width:2px;
218
184
  border-width:var(--size-border-width);
219
185
  border-color:transparent;
220
186
  border-style:solid;
221
187
  position:relative;
222
188
  margin:0;
223
- transition:color 160ms ease-in-out, background-color 160ms ease-in-out;
224
189
  transition:color var(--transition-standard), background-color var(--transition-standard);
225
190
  }
226
191
 
227
192
  .mobius-button:where(.--has-icon){
228
193
  display:inline-flex;
229
- gap:8px;
230
194
  gap:var(--size-xs);
231
195
  }
232
196
 
233
197
  .mobius-button:where(.--size-sm){
234
- font-size:16px;
235
198
  font-size:var(--font-size-3);
236
199
  line-height:16px;
237
- padding:10px 16px;
238
200
  padding:10px var(--size-sm);
239
201
  }
240
202
 
241
203
  .mobius-button:where(.--size-md){
242
- font-size:20px;
243
204
  font-size:var(--font-size-4);
244
205
  line-height:24px;
245
- padding:14px 24px;
246
206
  padding:14px var(--size-md);
247
207
  }
248
208
 
249
209
  .mobius-button:where(.--size-lg){
250
- font-size:24px;
251
210
  font-size:var(--font-size-5);
252
211
  line-height:32px;
253
- padding:14px 24px;
254
212
  padding:14px var(--size-md);
255
213
  }
256
214
 
257
215
  .mobius-button:where(.--variant-primary){
258
216
  --button-content-color:var(--color-text-inverted);
259
- background-color:#4632d8;
260
217
  background-color:var(--button-variant-primary-color);
261
- font-variation-settings:normal;
262
218
  font-variation-settings:var(
263
219
  --button-variant-primary-font-variation-settings
264
220
  );
@@ -266,18 +222,15 @@
266
222
 
267
223
  .mobius-button:where(.--variant-primary):where(:active),
268
224
  .mobius-button:where(.--variant-primary):where(:hover){
269
- background-color:#2a1e81;
270
225
  background-color:var(--button-variant-primary-hover-color);
271
226
  }
272
227
 
273
228
  .mobius-button:where(.--variant-primary):where(:focus-visible){
274
- box-shadow:0 0 0 2px #e943c9;
275
229
  box-shadow:var(--box-shadow-default);
276
230
  }
277
231
 
278
232
  .mobius-button:where(.--variant-primary):where(.--is-disabled){
279
233
  --button-content-color:var(--color-text-light);
280
- background-color:#5d5d60;
281
234
  background-color:var(--color-background-medium);
282
235
  cursor:not-allowed;
283
236
  }
@@ -285,62 +238,51 @@
285
238
  .mobius-button:where(.--variant-secondary){
286
239
  --button-content-color:var(--color-secondary);
287
240
  background-color:transparent;
288
- border-color:#4632d8;
289
241
  border-color:var(--color-secondary);
290
242
  }
291
243
 
292
244
  .mobius-button:where(.--variant-secondary):where(:active),
293
245
  .mobius-button:where(.--variant-secondary):where(:hover){
294
246
  --button-content-color:var(--color-text-inverted);
295
- background-color:#2a1e81;
296
247
  background-color:var(--color-secondary-hover);
297
- border-color:#2a1e81;
298
248
  border-color:var(--color-secondary-hover);
299
249
  }
300
250
 
301
251
  .mobius-button:where(.--variant-secondary):where(:focus-visible){
302
- box-shadow:0 0 0 2px #e943c9;
303
252
  box-shadow:var(--box-shadow-default);
304
253
  }
305
254
 
306
255
  .mobius-button:where(.--variant-secondary):where(.--is-disabled){
307
256
  --button-content-color:var(--color-text-light);
308
257
  border-color:transparent;
309
- background-color:#5d5d60;
310
258
  background-color:var(--color-background-medium);
311
259
  cursor:not-allowed;
312
260
  }
313
261
 
314
262
  .mobius-button:where(.--variant-ghost){
315
263
  --button-content-color:var(--color-secondary);
316
- background-color:#f6f5fd;
317
264
  background-color:var(--color-background-highlight);
318
- border:2px solid #9084e8;
319
265
  border:var(--border-default);
320
266
  border-color:transparent;
321
267
  }
322
268
 
323
269
  .mobius-button:where(.--variant-ghost):where(:active){
324
- background-color:#2a1e81;
325
270
  background-color:var(--color-secondary-hover);
326
271
  }
327
272
 
328
273
  .mobius-button:where(.--variant-ghost):where(:hover){
329
274
  --button-content-color:var(--color-text-inverted);
330
275
  border-color:transparent;
331
- background-color:#2a1e81;
332
276
  background-color:var(--color-secondary-hover);
333
277
  }
334
278
 
335
279
  .mobius-button:where(.--variant-ghost):where(:focus-visible){
336
- box-shadow:0 0 0 2px #e943c9;
337
280
  box-shadow:var(--box-shadow-default);
338
281
  }
339
282
 
340
283
  .mobius-button:where(.--variant-ghost):where(.--is-disabled){
341
284
  --button-content-color:var(--color-text-light);
342
285
  border-color:transparent;
343
- background-color:#5d5d60;
344
286
  background-color:var(--color-background-medium);
345
287
  cursor:not-allowed;
346
288
  }
@@ -352,26 +294,21 @@
352
294
  }
353
295
 
354
296
  .mobius-button:where(.--variant-basic):where(:active){
355
- background-color:#f3f3f3;
356
297
  background-color:var(--color-background-light);
357
298
  }
358
299
 
359
300
  .mobius-button:where(.--variant-basic):where(:hover){
360
- background-color:#f3f3f3;
361
301
  background-color:var(--color-background-light);
362
302
  }
363
303
 
364
304
  .mobius-button:where(.--variant-basic):where(.--is-disabled){
365
305
  --button-content-color:var(--color-text-light);
366
- background-color:#5d5d60;
367
306
  background-color:var(--color-background-medium);
368
307
  cursor:not-allowed;
369
308
  }
370
309
 
371
310
  .mobius-button:where(.--is-success){
372
- background-color:#008744;
373
311
  background-color:var(--color-valid);
374
- border-color:#008744;
375
312
  border-color:var(--color-valid);
376
313
  color:transparent;
377
314
  }
@@ -382,7 +319,6 @@
382
319
  }
383
320
 
384
321
  .mobius-button:where(.--is-success) [data-icon="tick"] path{
385
- fill:#ffffff;
386
322
  fill:var(--color-text-inverted);
387
323
  }
388
324
 
@@ -391,21 +327,17 @@
391
327
  }
392
328
 
393
329
  .mobius-button:where(.--is-success):where(:hover){
394
- background-color:#006633;
395
330
  background-color:var(--color-valid-hover);
396
- border-color:#006633;
397
331
  border-color:var(--color-valid-hover);
398
332
  }
399
333
 
400
334
  .mobius-button:where(.--is-success):where(:active){
401
- background-color:#008744;
402
335
  background-color:var(--color-valid);
403
336
  }
404
337
 
405
338
  .mobius-button:where(.--is-success):where(.--is-disabled){
406
339
  border-color:transparent;
407
340
  color:transparent;
408
- background-color:#5d5d60;
409
341
  background-color:var(--color-background-medium);
410
342
  cursor:not-allowed;
411
343
  }
@@ -425,9 +357,7 @@
425
357
 
426
358
  .mobius-button:where(.--variant-link){
427
359
  --button-content-color:var(--color-secondary);
428
- -webkit-appearance:none;
429
- -moz-appearance:none;
430
- appearance:none;
360
+ appearance:none;
431
361
  border:none;
432
362
  padding:0;
433
363
  background-color:transparent;
@@ -446,7 +376,6 @@
446
376
  }
447
377
 
448
378
  .mobius-button:where(.--variant-link):focus-visible{
449
- box-shadow:0 0 0 2px #e943c9;
450
379
  box-shadow:0 0 0 var(--size-focus-ring) var(--color-focus);
451
380
  padding:3px 0;
452
381
  }
@@ -463,21 +392,16 @@
463
392
  right:0;
464
393
  bottom:0;
465
394
  display:grid;
466
- align-items:center;
467
- justify-items:center;
468
395
  place-items:center;
469
396
  }
470
397
 
471
398
  a.mobius-button:focus-visible,
472
399
  .mobius-button:focus-visible{
473
- box-shadow:0 0 0 2px #e943c9;
474
400
  box-shadow:var(--box-shadow-default);
475
401
  }
476
402
 
477
403
  .mobius-checkbox__input{
478
- -webkit-appearance:none;
479
- -moz-appearance:none;
480
- appearance:none;
404
+ appearance:none;
481
405
  position:absolute;
482
406
  margin-top:2px;
483
407
  margin-left:0px;
@@ -491,16 +415,12 @@ a.mobius-button:focus-visible,
491
415
  }
492
416
 
493
417
  .mobius-checkbox__input.--is-disabled{
494
- color:#d1d1d2;
495
418
  color:var(--color-text-light);
496
- border-color:#d1d1d2;
497
419
  border-color:var(--color-border-medium);
498
- background-color:#f3f3f3;
499
420
  background-color:var(--color-background-light);
500
421
  }
501
422
 
502
423
  .--is-invalid .mobius-checkbox__input:not(.--is-disabled){
503
- border-color:#b90909;
504
424
  border-color:var(--color-error);
505
425
  }
506
426
 
@@ -509,106 +429,78 @@ a.mobius-button:focus-visible,
509
429
  display:flex;
510
430
  align-items:flex-start;
511
431
  flex-direction:row;
512
- border:2px solid #9084e8;
513
432
  border:var(--border-default);
514
- border-radius:4px;
515
433
  border-radius:var(--radius-1);
516
- padding:14px 16px;
517
434
  padding:var(--input-field-padding-tight);
518
435
  position:relative;
519
- -webkit-user-select:none;
520
- -moz-user-select:none;
521
- user-select:none;
436
+ user-select:none;
522
437
  cursor:pointer;
523
- background-color:#ffffff;
524
438
  background-color:var(--color-background-input);
525
439
  }
526
440
 
527
441
  .mobius-checkbox__label.--is-disabled{
528
- color:#d1d1d2;
529
442
  color:var(--color-text-light);
530
- border-color:#d1d1d2;
531
443
  border-color:var(--color-border-medium);
532
- background-color:#f3f3f3;
533
444
  background-color:var(--color-background-light);
534
445
  cursor:not-allowed;
535
446
  }
536
447
 
537
448
  .mobius-checkbox__label.--is-disabled .mobius-checkbox__icon{
538
- color:#d1d1d2;
539
449
  color:var(--color-text-light);
540
450
  }
541
451
 
542
452
  .mobius-checkbox__label:hover:not(.--is-disabled):not(.mobius-checkbox__label.--is-invalid){
543
- border-color:#4632d8;
544
453
  border-color:var(--color-primary);
545
- background-color:#f6f5fd;
546
454
  background-color:var(--color-background-input-active);
547
455
  }
548
456
 
549
457
  .mobius-checkbox__label:hover:not(.--is-disabled):not(.mobius-checkbox__label.--is-invalid) .mobius-checkbox__input{
550
- border-color:#4632d8;
551
458
  border-color:var(--color-primary);
552
459
  }
553
460
 
554
461
  .mobius-checkbox__label:hover:not(.--is-disabled):not(.mobius-checkbox__label.--is-invalid) .mobius-checkbox__icon{
555
- color:#4632d8;
556
462
  color:var(--color-primary);
557
463
  }
558
464
 
559
465
  .mobius-checkbox__label:focus-within:not(.--is-disabled):not(.--is-invalid){
560
- box-shadow:0 0 0 2px #e943c9;
561
466
  box-shadow:var(--box-shadow-default);
562
- border-color:#4632d8;
563
467
  border-color:var(--color-primary);
564
- background-color:#f6f5fd;
565
468
  background-color:var(--color-background-input-active);
566
469
  }
567
470
 
568
471
  .mobius-checkbox__label:focus-within:not(.--is-disabled):not(.--is-invalid) .mobius-checkbox__icon{
569
- color:#4632d8;
570
472
  color:var(--color-primary);
571
473
  }
572
474
 
573
475
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled){
574
- border-color:#b90909;
575
476
  border-color:var(--color-error);
576
- color:#b90909;
577
477
  color:var(--color-error);
578
478
  }
579
479
 
580
480
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,
581
481
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
582
- background-color:#f8e7e7;
583
482
  background-color:var(--color-error-background);
584
483
  }
585
484
 
586
485
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled) .mobius-checkbox__icon{
587
- color:#b90909;
588
486
  color:var(--color-error);
589
487
  }
590
488
 
591
489
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled) .mobius-checkbox__input{
592
- border-color:#b90909;
593
490
  border-color:var(--color-error);
594
491
  }
595
492
 
596
493
  .mobius-checkbox__icon{
597
494
  position:relative;
598
- color:#9084e8;
599
495
  color:var(--color-primary-light);
600
496
  }
601
497
 
602
498
  .mobius-checkbox__visible-label{
603
499
  box-sizing:border-box;
604
500
  width:100%;
605
- font-family:museosans, Arial, sans-serif;
606
501
  font-family:var(--font-family);
607
- line-height:1.5;
608
502
  line-height:var(--line-height-normal);
609
- font-size:16px;
610
503
  font-size:var(--font-size-regular);
611
- margin-left:16px;
612
504
  margin-left:var(--size-sm);
613
505
  }
614
506
 
@@ -618,7 +510,6 @@ a.mobius-button:focus-visible,
618
510
 
619
511
  .mobius-checkbox-group .mobius-checkbox-group__wrapper{
620
512
  display:grid;
621
- margin-bottom:16px;
622
513
  margin-bottom:var(--size-sm);
623
514
  }
624
515
 
@@ -629,12 +520,10 @@ a.mobius-button:focus-visible,
629
520
 
630
521
  .mobius-checkbox-group.--is-horizontal .mobius-checkbox-group__wrapper{
631
522
  grid-template-columns:repeat(var(--checkbox-items-per-row), 1fr);
632
- gap:16px;
633
523
  gap:var(--size-sm);
634
524
  }
635
525
 
636
526
  .mobius-checkbox-group.--is-vertical .mobius-checkbox-group__wrapper{
637
- gap:8px;
638
527
  gap:var(--size-xs);
639
528
  }
640
529
 
@@ -649,12 +538,10 @@ a.mobius-button:focus-visible,
649
538
  }
650
539
 
651
540
  .mobius-container.--is-sm{
652
- max-width:1004px;
653
541
  max-width:var(--size-inner-container);
654
542
  }
655
543
 
656
544
  .mobius-container.--is-md{
657
- max-width:1200px;
658
545
  max-width:var(--size-container);
659
546
  }
660
547
 
@@ -664,14 +551,12 @@ a.mobius-button:focus-visible,
664
551
  align-items:center;
665
552
  justify-content:center;
666
553
  width:100%;
667
- height:32px;
668
554
  height:var(--size-lg);
669
555
  }
670
556
 
671
557
  .mobius-divider__inner{
672
558
  width:100%;
673
559
  height:1px;
674
- background-color:#f3f3f3;
675
560
  background-color:var(--color-background-light);
676
561
  }
677
562
 
@@ -701,7 +586,6 @@ a.mobius-button:focus-visible,
701
586
  padding:0;
702
587
  margin:0;
703
588
  border:none;
704
- background-color:#ffffff;
705
589
  background-color:var(--color-background);
706
590
  overflow:hidden;
707
591
  }
@@ -715,10 +599,8 @@ a.mobius-button:focus-visible,
715
599
  }
716
600
 
717
601
  .mobius-drawer::backdrop{
718
- background-color:#18181d;
719
602
  background-color:var(--color-neutral-700);
720
603
  opacity:0;
721
- transition:opacity 0 ease-in-out;
722
604
  transition:opacity var(--drawer-transition-duration) ease-in-out;
723
605
  }
724
606
 
@@ -728,12 +610,11 @@ a.mobius-button:focus-visible,
728
610
  right:0;
729
611
  bottom:0;
730
612
  left:0;
731
- background-color:#18181d;
732
613
  background-color:var(--color-neutral-700);
733
614
  opacity:0.3;
734
615
  }
735
616
 
736
- .mobius-drawer + .backdrop + ._dialog_overlay{
617
+ :is(.mobius-drawer + .backdrop) + ._dialog_overlay{
737
618
  position:fixed;
738
619
  top:0;
739
620
  right:0;
@@ -747,7 +628,6 @@ a.mobius-button:focus-visible,
747
628
  max-width:100vw;
748
629
  height:var(--drawer-height);
749
630
  max-height:var(--drawer-height);
750
- transition:transform 0 ease-in-out;
751
631
  transition:transform var(--drawer-transition-duration) ease-in-out;
752
632
  }
753
633
 
@@ -758,7 +638,6 @@ a.mobius-button:focus-visible,
758
638
  max-width:var(--drawer-width);
759
639
  height:100vh;
760
640
  max-height:100vh;
761
- transition:transform 0 ease-in-out;
762
641
  transition:transform var(--drawer-transition-duration) ease-in-out;
763
642
  }
764
643
 
@@ -830,22 +709,15 @@ a.mobius-button:focus-visible,
830
709
  display:grid;
831
710
  grid-template-columns:1fr auto;
832
711
  justify-content:space-between;
833
- grid-gap:16px;
834
- grid-gap:var(--size-sm);
835
- gap:16px;
836
712
  gap:var(--size-sm);
837
713
  align-items:center;
838
- padding:16px 32px;
839
714
  padding:var(--size-sm) var(--size-lg);
840
715
  padding-bottom:0;
841
- font-family:museosans, Arial, sans-serif;
842
716
  font-family:var(--font-family);
843
- font-size:24px;
844
717
  font-size:var(--font-size-small-title);
845
718
  }
846
719
 
847
720
  .mobius-drawer__header button{
848
- color:#4632d8;
849
721
  color:var(--color-primary);
850
722
  }
851
723
 
@@ -855,11 +727,8 @@ a.mobius-button:focus-visible,
855
727
 
856
728
  .mobius-drawer__content{
857
729
  flex-grow:1;
858
- padding:32px;
859
730
  padding:var(--size-lg);
860
- padding-top:16px;
861
731
  padding-top:var(--size-sm);
862
- font-family:museosans, Arial, sans-serif;
863
732
  font-family:var(--font-family);
864
733
  overflow-y:auto;
865
734
  }
@@ -871,7 +740,6 @@ a.mobius-button:focus-visible,
871
740
 
872
741
  .mobius-dropdown-menu{
873
742
  position:relative;
874
- max-width:200px;
875
743
  max-width:var(--dropdown-menu-max-width);
876
744
  width:100%;
877
745
  }
@@ -879,35 +747,26 @@ a.mobius-button:focus-visible,
879
747
  .mobius-dropdown-menu__trigger{
880
748
  width:100%;
881
749
  text-align:right;
882
- -webkit-appearance:none;
883
- -moz-appearance:none;
884
- appearance:none;
750
+ appearance:none;
885
751
  border:none;
886
752
  background-color:transparent;
887
- font-size:16px;
888
753
  font-size:var(--font-size-regular);
889
754
  cursor:pointer;
890
- padding:8px 0;
891
755
  padding:var(--size-xs) 0;
892
- color:#4632d8;
893
756
  color:var(--color-primary);
894
757
  }
895
758
 
896
759
  .mobius-dropdown-menu__list{
897
760
  display:none;
898
761
  width:100%;
899
- box-shadow:0 0 24px rgba(0, 0, 0, 0.2);
900
762
  box-shadow:0 0 var(--size-md) rgba(0, 0, 0, 0.2);
901
- border-radius:4px;
902
763
  border-radius:var(--radius-1);
903
- margin-top:16px;
904
764
  margin-top:var(--size-sm);
905
765
  margin-bottom:0;
906
766
  padding-left:0;
907
767
  list-style-type:none;
908
768
  overflow:hidden;
909
769
  text-align:left;
910
- color:#18181d;
911
770
  color:var(--color-text);
912
771
  }
913
772
 
@@ -915,34 +774,25 @@ a.mobius-button:focus-visible,
915
774
  display:block;
916
775
  position:absolute;
917
776
  z-index:2;
918
- background-color:#ffffff;
919
777
  background-color:var(--color-background);
920
778
  }
921
779
 
922
780
  .mobius-dropdown-menu__item{
923
781
  display:block;
924
782
  cursor:pointer;
925
- padding:16px;
926
783
  padding:var(--size-sm);
927
- border-left:4px solid transparent;
928
784
  border-left:var(--size-xxs) solid transparent;
929
785
  }
930
786
 
931
787
  .mobius-dropdown-menu__item:hover{
932
- background-color:#f6f5fd;
933
788
  background-color:var(--color-background-highlight);
934
- color:#4632d8;
935
789
  color:var(--color-primary);
936
- border-color:#4632d8;
937
790
  border-color:var(--color-primary);
938
791
  }
939
792
 
940
793
  .mobius-dropdown-menu__item:focus-visible{
941
- background-color:#f6f5fd;
942
794
  background-color:var(--color-background-highlight);
943
- color:#4632d8;
944
795
  color:var(--color-primary);
945
- border-color:#4632d8;
946
796
  border-color:var(--color-primary);
947
797
  }
948
798
 
@@ -951,24 +801,18 @@ a.mobius-button:focus-visible,
951
801
  }
952
802
 
953
803
  .mobius-dropdown-menu__item.--is-active{
954
- border-left-color:#4632d8;
955
804
  border-left-color:var(--color-primary);
956
805
  }
957
806
 
958
807
  .mobius-error-message{
959
808
  box-sizing:border-box;
960
809
  display:grid;
961
- grid-gap:8px;
962
- grid-gap:var(--size-xs);
963
- gap:8px;
964
810
  gap:var(--size-xs);
965
811
  grid-template-columns:min-content 1fr;
966
- color:#b90909;
967
812
  color:var(--color-error);
968
813
  }
969
814
 
970
815
  .mobius-error-message__text.mobius-text{
971
- line-height:16px;
972
816
  line-height:var(--font-size-regular);
973
817
  }
974
818
 
@@ -978,16 +822,13 @@ a.mobius-button:focus-visible,
978
822
  }
979
823
 
980
824
  .mobius-fieldset .mobius-text-field{
981
- margin-bottom:16px;
982
825
  margin-bottom:var(--size-sm);
983
826
  }
984
827
 
985
828
  .mobius-fieldset__legend{
986
829
  box-sizing:border-box;
987
- margin-bottom:16px;
988
830
  margin-bottom:var(--size-sm);
989
831
  padding:0;
990
- font-weight:700;
991
832
  font-weight:var(--font-weight-bold);
992
833
  }
993
834
 
@@ -1045,35 +886,24 @@ a.mobius-button:focus-visible,
1045
886
 
1046
887
  .mobius-label{
1047
888
  box-sizing:border-box;
1048
- font-size:16px;
1049
889
  font-size:var(--font-size-regular);
1050
- line-height:1.5;
1051
890
  line-height:var(--line-height-normal);
1052
- font-family:museosans, Arial, sans-serif;
1053
891
  font-family:var(--font-family);
1054
- font-weight:700;
1055
892
  font-weight:var(--label-font-weight);
1056
- font-variation-settings:normal;
1057
893
  font-variation-settings:var(--label-font-variation-settings);
1058
- color:#18181d;
1059
894
  color:var(--color-text);
1060
895
  }
1061
896
 
1062
897
  .mobius-label.--is-invalid:not(.--is-disabled){
1063
- color:#b90909;
1064
898
  color:var(--color-error);
1065
899
  }
1066
900
 
1067
901
  .mobius-link{
1068
902
  box-sizing:border-box;
1069
- font-family:museosans, Arial, sans-serif;
1070
903
  font-family:var(--font-family);
1071
- line-height:1.5;
1072
904
  line-height:var(--line-height-normal);
1073
- color:#4632d8;
1074
905
  color:var(--color-secondary);
1075
906
  outline:none;
1076
- border-radius:4px;
1077
907
  border-radius:var(--radius-1);
1078
908
  }
1079
909
 
@@ -1082,18 +912,15 @@ a.mobius-button:focus-visible,
1082
912
  -webkit-text-decoration:underline;
1083
913
  text-decoration:underline;
1084
914
  cursor:pointer;
1085
- color:#2a1e81;
1086
915
  color:var(--color-secondary-hover);
1087
916
  }
1088
917
 
1089
918
  .mobius-link:focus-visible{
1090
- box-shadow:0 0 0 2px #e943c9;
1091
919
  box-shadow:var(--box-shadow-default);
1092
920
  padding:3px 0;
1093
921
  }
1094
922
 
1095
923
  .mobius-link.--is-disabled{
1096
- color:#d1d1d2;
1097
924
  color:var(--color-text-light);
1098
925
  pointer-events:none;
1099
926
  cursor:not-allowed;
@@ -1101,7 +928,6 @@ a.mobius-button:focus-visible,
1101
928
 
1102
929
  .mobius-list{
1103
930
  box-sizing:border-box;
1104
- font-family:museosans, Arial, sans-serif;
1105
931
  font-family:var(--font-family);
1106
932
  width:100%;
1107
933
  text-align:left;
@@ -1142,7 +968,6 @@ a.mobius-button:focus-visible,
1142
968
 
1143
969
  .mobius-list__item.--has-icon{
1144
970
  list-style-type:none;
1145
- margin-bottom:8px;
1146
971
  margin-bottom:var(--size-xs);
1147
972
  }
1148
973
 
@@ -1157,12 +982,10 @@ a.mobius-button:focus-visible,
1157
982
 
1158
983
  .mobius-list__icon{
1159
984
  flex-shrink:0;
1160
- margin-right:8px;
1161
985
  margin-right:var(--size-xs);
1162
986
  }
1163
987
 
1164
988
  .mobius-loading-indicator{
1165
- color:#4632d8;
1166
989
  color:var(--color-primary);
1167
990
  }
1168
991
 
@@ -1189,10 +1012,8 @@ a.mobius-button:focus-visible,
1189
1012
  max-height:80%;
1190
1013
  padding:0;
1191
1014
  margin:auto;
1192
- background-color:#ffffff;
1193
1015
  background-color:var(--color-background);
1194
1016
  border:none;
1195
- border-radius:4px;
1196
1017
  border-radius:var(--radius-1);
1197
1018
  overflow:hidden;
1198
1019
  }
@@ -1206,10 +1027,8 @@ a.mobius-button:focus-visible,
1206
1027
  }
1207
1028
 
1208
1029
  .mobius-modal::backdrop{
1209
- background-color:#18181d;
1210
1030
  background-color:var(--color-neutral-700);
1211
1031
  opacity:0;
1212
- transition:opacity 0 ease-in-out;
1213
1032
  transition:opacity var(--modal-transition-duration) ease-in-out;
1214
1033
  }
1215
1034
 
@@ -1219,12 +1038,11 @@ a.mobius-button:focus-visible,
1219
1038
  right:0;
1220
1039
  bottom:0;
1221
1040
  left:0;
1222
- background-color:#18181d;
1223
1041
  background-color:var(--color-neutral-700);
1224
1042
  opacity:0.3;
1225
1043
  }
1226
1044
 
1227
- .mobius-modal + .backdrop + ._dialog_overlay{
1045
+ :is(.mobius-modal + .backdrop) + ._dialog_overlay{
1228
1046
  position:fixed;
1229
1047
  top:0;
1230
1048
  right:0;
@@ -1260,12 +1078,10 @@ a.mobius-button:focus-visible,
1260
1078
  }
1261
1079
 
1262
1080
  .mobius-modal.--fade{
1263
- transition:opacity 0 ease-in-out;
1264
1081
  transition:opacity var(--modal-transition-duration) ease-in-out;
1265
1082
  }
1266
1083
 
1267
1084
  .mobius-modal.--slide-up{
1268
- transition:transform 0 ease-in-out;
1269
1085
  transition:transform var(--modal-transition-duration) ease-in-out;
1270
1086
  }
1271
1087
 
@@ -1293,29 +1109,19 @@ a.mobius-button:focus-visible,
1293
1109
  display:grid;
1294
1110
  grid-template-columns:1fr auto;
1295
1111
  justify-content:space-between;
1296
- grid-gap:16px;
1297
- grid-gap:var(--size-sm);
1298
- gap:16px;
1299
1112
  gap:var(--size-sm);
1300
1113
  align-items:center;
1301
- padding:8px;
1302
1114
  padding:var(--size-xs);
1303
- padding-left:16px;
1304
1115
  padding-left:var(--size-sm);
1305
- font-family:museosans, Arial, sans-serif;
1306
1116
  font-family:var(--font-family);
1307
- font-size:24px;
1308
1117
  font-size:var(--font-size-small-title);
1309
1118
  margin:0;
1310
1119
  }
1311
1120
 
1312
1121
  .mobius-modal__content{
1313
1122
  flex-grow:1;
1314
- padding:0 16px;
1315
1123
  padding:0 var(--size-sm);
1316
- margin:16px 0;
1317
1124
  margin:var(--size-sm) 0;
1318
- font-family:museosans, Arial, sans-serif;
1319
1125
  font-family:var(--font-family);
1320
1126
  overflow-y:auto;
1321
1127
  }
@@ -1340,69 +1146,44 @@ a.mobius-button:focus-visible,
1340
1146
 
1341
1147
  .mobius-number-field__input{
1342
1148
  box-sizing:border-box;
1343
- border:2px solid #9084e8;
1344
1149
  border:var(--border-default);
1345
- border-radius:4px;
1346
1150
  border-radius:var(--radius-1);
1347
- background-color:#ffffff;
1348
1151
  background-color:var(--color-background-input);
1349
- padding:17px 16px;
1350
1152
  padding:var(--input-field-padding);
1351
- font-family:museosans, Arial, sans-serif;
1352
1153
  font-family:var(--font-family);
1353
- font-size:16px;
1354
1154
  font-size:var(--font-size-regular);
1355
- color:#18181d;
1356
1155
  color:var(--color-text);
1357
1156
  outline:none;
1358
1157
  margin:0;
1359
- max-width:none;
1360
1158
  max-width:var(--text-input-max-width);
1361
1159
  width:100%;
1362
1160
  }
1363
1161
 
1364
- .mobius-number-field__input::-moz-placeholder{
1365
- color:#5d5d60;
1366
- color:var(--color-text-medium);
1367
- }
1368
-
1369
1162
  .mobius-number-field__input::placeholder{
1370
- color:#5d5d60;
1371
1163
  color:var(--color-text-medium);
1372
1164
  }
1373
1165
 
1374
1166
  .mobius-number-field__input:focus-visible:not(.--is-disabled){
1375
- border-color:#4632d8;
1376
1167
  border-color:var(--color-primary);
1377
- background-color:#f6f5fd;
1378
1168
  background-color:var(--color-background-input-active);
1379
- box-shadow:0 0 0 2px #e943c9;
1380
1169
  box-shadow:var(--box-shadow-default);
1381
1170
  }
1382
1171
 
1383
1172
  .mobius-number-field__input:hover:not(.--is-disabled):not(.mobius-number-field__input.--is-invalid){
1384
- border-color:#4632d8;
1385
1173
  border-color:var(--color-primary);
1386
- background-color:#f6f5fd;
1387
1174
  background-color:var(--color-background-input-active);
1388
1175
  }
1389
1176
 
1390
1177
  .mobius-number-field__input.--is-disabled{
1391
- background-color:#f3f3f3;
1392
1178
  background-color:var(--color-background-light);
1393
- border-color:#d1d1d2;
1394
1179
  border-color:var(--color-border-medium);
1395
- color:#d1d1d2;
1396
1180
  color:var(--color-text-light);
1397
1181
  cursor:not-allowed;
1398
1182
  }
1399
1183
 
1400
1184
  .mobius-number-field__input.--is-invalid:not(.--is-disabled){
1401
- border-color:#b90909;
1402
1185
  border-color:var(--color-error);
1403
- background-color:#f8e7e7;
1404
1186
  background-color:var(--color-error-background);
1405
- color:#b90909;
1406
1187
  color:var(--color-error);
1407
1188
  }
1408
1189
 
@@ -1411,80 +1192,49 @@ a.mobius-button:focus-visible,
1411
1192
  }
1412
1193
 
1413
1194
  .mobius-password-field :where(.mobius-password-field__show-button){
1414
- -webkit-appearance:none;
1415
- -moz-appearance:none;
1416
- appearance:none;
1417
- font-size:16px;
1195
+ appearance:none;
1418
1196
  font-size:var(--font-size-3);
1419
- font-family:museosans, Arial, sans-serif;
1420
1197
  font-family:var(--font-family);
1421
1198
  align-self:center;
1422
1199
  display:inline-block;
1423
1200
  background-color:transparent;
1424
- margin:0 8px 0 0;
1425
1201
  margin:0 var(--size-xs) 0 0;
1426
- padding:6px 8px;
1427
1202
  padding:6px var(--size-xs);
1428
1203
  cursor:pointer;
1429
1204
  border:none;
1430
- border-radius:8px;
1431
1205
  border-radius:var(--radius-2);
1432
- color:#4632d8;
1433
1206
  color:var(--color-primary);
1434
- transition:160ms ease-in-out;
1435
1207
  transition:var(--transition-standard);
1436
- -webkit-user-select:none;
1437
- -moz-user-select:none;
1438
- user-select:none;
1208
+ user-select:none;
1439
1209
  }
1440
1210
 
1441
1211
  .mobius-password-field :where(.mobius-password-field__show-button):focus-visible{
1442
- box-shadow:0 0 0 2px #e943c9;
1443
1212
  box-shadow:var(--box-shadow-default);
1444
1213
  outline:none;
1445
1214
  }
1446
1215
 
1447
1216
  .mobius-password-field :where(.mobius-password-field__show-button):hover{
1448
- background-color:#f6f5fd;
1449
1217
  background-color:var(--color-background-highlight);
1450
1218
  }
1451
1219
 
1452
- :root,
1453
- :host{
1454
- --popover-max-width:260px;
1455
- --popover-z-index:2147483647;
1456
- --color-background-popover:var(--color-azure-700);
1457
- }
1458
-
1459
1220
  .mobius-popover__container{
1460
- z-index:2147483647;
1461
1221
  z-index:var(--popover-z-index);
1462
- max-width:260px;
1463
1222
  max-width:var(--popover-max-width);
1464
1223
  }
1465
1224
 
1466
1225
  .mobius-popover{
1467
- padding:16px;
1468
1226
  padding:var(--size-sm);
1469
- background-color:#0e0a2b;
1470
1227
  background-color:var(--color-background-popover);
1471
- color:#ffffff;
1472
- color:var(--color-text-inverted);
1473
- border-radius:8px;
1228
+ color:var(--color-text-popover);
1474
1229
  border-radius:var(--radius-2);
1475
- font-size:14px;
1476
1230
  font-size:var(--font-size-2);
1477
- font-weight:500;
1478
1231
  font-weight:var(--font-weight-normal);
1479
- font-family:museosans, Arial, sans-serif;
1480
1232
  font-family:var(--font-family);
1481
- line-height:1.333;
1482
1233
  line-height:var(--line-height-tight);
1483
1234
  }
1484
1235
 
1485
1236
  .mobius-popover__header{
1486
1237
  display:flex;
1487
- padding-bottom:16px;
1488
1238
  padding-bottom:var(--size-sm);
1489
1239
  }
1490
1240
 
@@ -1493,8 +1243,7 @@ a.mobius-button:focus-visible,
1493
1243
  border:none;
1494
1244
  margin-left:auto;
1495
1245
  background-color:transparent;
1496
- color:#ffffff;
1497
- color:var(--color-text-inverted);
1246
+ color:var(--color-text-popover);
1498
1247
  }
1499
1248
 
1500
1249
  .mobius-popover__close-icon{
@@ -1502,27 +1251,21 @@ a.mobius-button:focus-visible,
1502
1251
  }
1503
1252
 
1504
1253
  .mobius-popover__arrow-icon path{
1505
- fill:#0e0a2b;
1506
1254
  fill:var(--color-background-popover);
1507
1255
  }
1508
1256
 
1509
1257
  .mobius-progress__track{
1510
- background-color:#f3f3f3;
1511
1258
  background-color:var(--color-background-light);
1512
- margin-bottom:8px;
1513
1259
  margin-bottom:var(--size-xs);
1514
- height:8px;
1515
1260
  height:var(--size-xs);
1516
1261
  }
1517
1262
 
1518
1263
  .mobius-progress__label{
1519
1264
  display:block;
1520
- margin-bottom:8px;
1521
1265
  margin-bottom:var(--size-xs);
1522
1266
  }
1523
1267
 
1524
1268
  .mobius-progress__bar{
1525
- background-color:#4632d8;
1526
1269
  background-color:var(--color-primary);
1527
1270
  height:100%;
1528
1271
  }
@@ -1533,12 +1276,10 @@ a.mobius-button:focus-visible,
1533
1276
  }
1534
1277
 
1535
1278
  .mobius-progress.--is-primary .mobius-progress__bar{
1536
- background-color:#4632d8;
1537
1279
  background-color:var(--color-primary);
1538
1280
  }
1539
1281
 
1540
1282
  .mobius-progress.--is-secondary .mobius-progress__bar{
1541
- background-color:#4632d8;
1542
1283
  background-color:var(--color-secondary);
1543
1284
  }
1544
1285
 
@@ -1548,12 +1289,10 @@ a.mobius-button:focus-visible,
1548
1289
  }
1549
1290
 
1550
1291
  .mobius-radio-group.--is-horizontal .mobius-radio__label:not(:last-child){
1551
- margin-right:8px;
1552
1292
  margin-right:var(--size-xs);
1553
1293
  }
1554
1294
 
1555
1295
  .mobius-radio-group.--is-vertical .mobius-radio__label:not(:last-child){
1556
- margin-bottom:8px;
1557
1296
  margin-bottom:var(--size-xs);
1558
1297
  }
1559
1298
 
@@ -1575,13 +1314,9 @@ a.mobius-button:focus-visible,
1575
1314
 
1576
1315
  .mobius-radio__input{
1577
1316
  align-self:center;
1578
- -webkit-appearance:none;
1579
- -moz-appearance:none;
1580
- appearance:none;
1581
- margin:0 calc(8px + 2px) 0 0;
1317
+ appearance:none;
1582
1318
  margin:0 calc(var(--size-xs) + 2px) 0 0;
1583
1319
  padding:3px;
1584
- outline:2px solid #9084e8;
1585
1320
  outline:2px solid var(--color-primary-light);
1586
1321
  border-radius:50%;
1587
1322
  background-color:transparent;
@@ -1601,25 +1336,20 @@ a.mobius-button:focus-visible,
1601
1336
  }
1602
1337
 
1603
1338
  .mobius-radio__input:checked::after{
1604
- background-color:#4632d8;
1605
1339
  background-color:var(--color-primary);
1606
1340
  }
1607
1341
 
1608
1342
  .mobius-radio__input:disabled{
1609
- outline-color:#d1d1d2;
1610
1343
  outline-color:var(--color-border-medium);
1611
1344
  }
1612
1345
 
1613
1346
  .mobius-radio__input:disabled:checked::after{
1614
- background-color:#f3f3f3;
1615
1347
  background-color:var(--color-background-light);
1616
1348
  }
1617
1349
 
1618
1350
  .mobius-radio__input.--is-multiline{
1619
1351
  align-self:flex-start;
1620
- margin-top:4px;
1621
1352
  margin-top:var(--size-xxs);
1622
- margin-right:calc(16px - 1px);
1623
1353
  margin-right:calc(var(--size-sm) - 1px);
1624
1354
  }
1625
1355
 
@@ -1628,93 +1358,69 @@ a.mobius-button:focus-visible,
1628
1358
  align-items:center;
1629
1359
  box-sizing:border-box;
1630
1360
  width:100%;
1631
- padding:14px 16px;
1632
1361
  padding:var(--input-field-padding-tight);
1633
- font-family:museosans, Arial, sans-serif;
1634
1362
  font-family:var(--font-family);
1635
- font-size:16px;
1636
1363
  font-size:var(--font-size-regular);
1637
- font-weight:500;
1638
1364
  font-weight:var(--font-weight-normal);
1639
- border:2px solid #9084e8;
1640
1365
  border:var(--border-default);
1641
- border-radius:4px;
1642
1366
  border-radius:var(--radius-1);
1643
- color:#18181d;
1644
1367
  color:var(--color-text);
1645
1368
  outline:0;
1646
1369
  position:relative;
1647
1370
  cursor:pointer;
1648
- background-color:#ffffff;
1649
1371
  background-color:var(--color-background-input);
1650
1372
  }
1651
1373
 
1652
1374
  .mobius-radio__label.--is-disabled{
1653
- background-color:#f3f3f3;
1654
1375
  background-color:var(--color-background-light);
1655
- border-color:#d1d1d2;
1656
1376
  border-color:var(--color-border-medium);
1657
- color:#d1d1d2;
1658
1377
  color:var(--color-text-light);
1659
1378
  cursor:not-allowed;
1660
1379
  }
1661
1380
 
1662
1381
  .mobius-radio__label.--is-disabled.--is-selected{
1663
- border-color:#f3f3f3;
1664
1382
  border-color:var(--color-border-light);
1665
1383
  }
1666
1384
 
1667
1385
  .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled){
1668
- border-color:#9084e8;
1669
1386
  border-color:var(--color-primary-light);
1670
1387
  }
1671
1388
 
1672
1389
  .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input{
1673
- outline-color:#9084e8;
1674
1390
  outline-color:var(--color-primary-light);
1675
1391
  }
1676
1392
 
1677
1393
  .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input:checked::after{
1678
- background-color:#9084e8;
1679
1394
  background-color:var(--color-primary-light);
1680
1395
  }
1681
1396
 
1682
1397
  .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label){
1683
- border-color:#4632d8;
1684
1398
  border-color:var(--color-primary);
1685
- background-color:#f6f5fd;
1686
1399
  background-color:var(--color-background-input-active);
1687
1400
  }
1688
1401
 
1689
1402
  .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input{
1690
- outline-color:#4632d8;
1691
1403
  outline-color:var(--color-primary);
1692
1404
  }
1693
1405
 
1694
1406
  .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input:checked::after{
1695
- background-color:#4632d8;
1696
1407
  background-color:var(--color-primary);
1697
1408
  }
1698
1409
 
1699
1410
  .mobius-radio__label:focus-within:not(.--is-disabled){
1700
- box-shadow:0 0 0 2px #e943c9;
1701
1411
  box-shadow:var(--box-shadow-default);
1702
1412
  }
1703
1413
 
1704
1414
  .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)){
1705
- border-color:#4632d8;
1706
1415
  border-color:var(--color-primary);
1707
- background-color:#f6f5fd;
1708
1416
  background-color:var(--color-background-input-active);
1709
1417
  }
1710
1418
 
1711
1419
  .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input{
1712
- outline-color:#4632d8;
1713
1420
  outline-color:var(--color-primary);
1714
1421
  }
1715
1422
 
1716
1423
  .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input:checked::after{
1717
- background-color:#4632d8;
1718
1424
  background-color:var(--color-primary);
1719
1425
  }
1720
1426
 
@@ -1723,27 +1429,21 @@ a.mobius-button:focus-visible,
1723
1429
  }
1724
1430
 
1725
1431
  .--is-invalid .mobius-radio__label:not(.--is-disabled){
1726
- border-color:#b90909;
1727
1432
  border-color:var(--color-error);
1728
- color:#b90909;
1729
1433
  color:var(--color-error);
1730
1434
  }
1731
1435
 
1732
1436
  .--is-invalid .mobius-radio__label:not(.--is-disabled):hover,
1733
1437
  .--is-invalid .mobius-radio__label:not(.--is-disabled):focus-within{
1734
- border-color:#b90909;
1735
1438
  border-color:var(--color-error);
1736
- background-color:#f8e7e7;
1737
1439
  background-color:var(--color-error-background);
1738
1440
  }
1739
1441
 
1740
1442
  .--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input{
1741
- outline-color:#b90909;
1742
1443
  outline-color:var(--color-error);
1743
1444
  }
1744
1445
 
1745
1446
  .--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input:checked::after{
1746
- background-color:#b90909;
1747
1447
  background-color:var(--color-error);
1748
1448
  }
1749
1449
 
@@ -1757,11 +1457,8 @@ a.mobius-button:focus-visible,
1757
1457
  }
1758
1458
 
1759
1459
  .mobius-radio__content-first-line{
1760
- font-weight:700;
1761
1460
  font-weight:var(--font-weight-bold);
1762
- margin-bottom:8px;
1763
1461
  margin-bottom:var(--size-xs);
1764
- padding-top:calc(4px - 1px);
1765
1462
  padding-top:calc(var(--size-xxs) - 1px);
1766
1463
  }
1767
1464
 
@@ -1774,11 +1471,8 @@ a.mobius-button:focus-visible,
1774
1471
  box-sizing:border-box;
1775
1472
  display:flex;
1776
1473
  flex-direction:column;
1777
- border:2px solid #f3f3f3;
1778
1474
  border:var(--segment-border);
1779
- border-radius:8px;
1780
1475
  border-radius:var(--radius-2);
1781
- margin-bottom:16px;
1782
1476
  margin-bottom:var(--size-sm);
1783
1477
  }
1784
1478
 
@@ -1788,19 +1482,16 @@ a.mobius-button:focus-visible,
1788
1482
 
1789
1483
  .mobius-segment-group .mobius-segment-group.gap-size-xs,
1790
1484
  .mobius-segment-group.gap-size-xs{
1791
- margin:8px;
1792
1485
  margin:var(--size-xs);
1793
1486
  }
1794
1487
 
1795
1488
  .mobius-segment-group .mobius-segment-group.gap-size-s,
1796
1489
  .mobius-segment-group.gap-size-s{
1797
- margin:16px;
1798
1490
  margin:var(--size-sm);
1799
1491
  }
1800
1492
 
1801
1493
  .mobius-segment-group .mobius-segment-group.gap-size-m,
1802
1494
  .mobius-segment-group.gap-size-m{
1803
- margin:24px;
1804
1495
  margin:var(--size-md);
1805
1496
  }
1806
1497
 
@@ -1811,25 +1502,21 @@ a.mobius-button:focus-visible,
1811
1502
 
1812
1503
  .mobius-segment-group .mobius-segment-group.gap-size-xl,
1813
1504
  .mobius-segment-group.gap-size-xl{
1814
- margin:40px;
1815
1505
  margin:var(--size-xl);
1816
1506
  }
1817
1507
 
1818
1508
  .mobius-segment-group .mobius-segment-group.gap-size-xxl,
1819
1509
  .mobius-segment-group.gap-size-xxl{
1820
- margin:48px;
1821
1510
  margin:var(--size-xxl);
1822
1511
  }
1823
1512
 
1824
1513
  .mobius-segment-group > .mobius-segment{
1825
1514
  border:none;
1826
- border-top:2px solid #f3f3f3;
1827
1515
  border-top:var(--segment-border);
1828
1516
  }
1829
1517
 
1830
1518
  .mobius-segment-group:not(.--is-horizontal) > .mobius-segment:first-child{
1831
1519
  border-top:none;
1832
- border-radius:8px;
1833
1520
  border-radius:var(--radius-2);
1834
1521
  }
1835
1522
 
@@ -1847,7 +1534,6 @@ a.mobius-button:focus-visible,
1847
1534
  .mobius-segment-group.--is-horizontal > .mobius-segment-group{
1848
1535
  border:none;
1849
1536
  border-radius:0;
1850
- border-left:2px solid #f3f3f3;
1851
1537
  border-left:var(--segment-border);
1852
1538
  }
1853
1539
 
@@ -1878,7 +1564,6 @@ a.mobius-button:focus-visible,
1878
1564
  .mobius-segment-group .mobius-segment-group > .mobius-segment-group.--is-horizontal{
1879
1565
  border-radius:0;
1880
1566
  border:0;
1881
- border-top:2px solid #f3f3f3;
1882
1567
  border-top:var(--segment-border);
1883
1568
  margin:0;
1884
1569
  }
@@ -1886,7 +1571,6 @@ a.mobius-button:focus-visible,
1886
1571
  .mobius-segment-group .mobius-segment-group:not(.--is-horizontal)
1887
1572
  > .mobius-segment-group:not(.--is-horizontal)
1888
1573
  .mobius-segment:first-child{
1889
- border-top:2px solid #f3f3f3;
1890
1574
  border-top:var(--segment-border);
1891
1575
  }
1892
1576
 
@@ -1896,11 +1580,8 @@ a.mobius-button:focus-visible,
1896
1580
  flex-direction:column;
1897
1581
  align-items:flex-start;
1898
1582
  width:100%;
1899
- border:2px solid #f3f3f3;
1900
1583
  border:var(--segment-border);
1901
- border-radius:8px;
1902
1584
  border-radius:var(--radius-2);
1903
- padding:16px;
1904
1585
  padding:var(--size-sm);
1905
1586
  }
1906
1587
 
@@ -1921,32 +1602,26 @@ a.mobius-button:focus-visible,
1921
1602
  }
1922
1603
 
1923
1604
  .mobius-segment .mobius-text.--is-p{
1924
- line-height:20px;
1925
1605
  line-height:var(--font-size-lead);
1926
1606
  }
1927
1607
 
1928
1608
  .mobius-segment.subtle{
1929
- background-color:#f6f5fd;
1930
1609
  background-color:var(--color-background-highlight);
1931
1610
  }
1932
1611
 
1933
1612
  .mobius-segment.grey{
1934
- background-color:#f3f3f3;
1935
1613
  background-color:var(--color-background-light);
1936
1614
  }
1937
1615
 
1938
1616
  .mobius-segment.primary{
1939
- background-color:#4632d8;
1940
1617
  background-color:var(--color-primary);
1941
1618
  }
1942
1619
 
1943
1620
  .mobius-segment.secondary{
1944
- background-color:#4632d8;
1945
1621
  background-color:var(--color-secondary);
1946
1622
  }
1947
1623
 
1948
1624
  .mobius-segment.inverted{
1949
- color:#ffffff;
1950
1625
  color:var(--color-text-inverted);
1951
1626
  }
1952
1627
 
@@ -1965,10 +1640,8 @@ a.mobius-button:focus-visible,
1965
1640
 
1966
1641
  .mobius-segment__heading{
1967
1642
  box-sizing:border-box;
1968
- font-size:16px;
1969
1643
  font-size:var(--font-size-regular);
1970
1644
  margin:0;
1971
- margin-bottom:16px;
1972
1645
  margin-bottom:var(--size-sm);
1973
1646
  }
1974
1647
 
@@ -1991,65 +1664,44 @@ a.mobius-button:focus-visible,
1991
1664
  display:flex;
1992
1665
  align-items:center;
1993
1666
  position:relative;
1994
- max-width:none;
1995
1667
  max-width:var(--select-wrapper-max-width);
1996
1668
  }
1997
1669
 
1998
1670
  .mobius-select{
1999
1671
  box-sizing:border-box;
2000
1672
  width:100%;
2001
- padding:17px 16px;
2002
1673
  padding:var(--input-field-padding);
2003
- font-family:museosans, Arial, sans-serif;
2004
1674
  font-family:var(--font-family);
2005
- font-size:16px;
2006
1675
  font-size:var(--font-size-regular);
2007
- border:2px solid #9084e8;
2008
1676
  border:var(--border-default);
2009
- border-radius:4px;
2010
1677
  border-radius:var(--radius-1);
2011
- background-color:#ffffff;
2012
1678
  background-color:var(--color-background-input);
2013
- color:#5d5d60;
2014
1679
  color:var(--color-text-medium);
2015
1680
  outline:0;
2016
- -webkit-appearance:none;
2017
- -moz-appearance:none;
2018
- appearance:none;
1681
+ appearance:none;
2019
1682
  }
2020
1683
 
2021
1684
  .mobius-select.--is-disabled{
2022
- background-color:#f3f3f3;
2023
1685
  background-color:var(--color-background-light);
2024
- border-color:#d1d1d2;
2025
1686
  border-color:var(--color-border-medium);
2026
- color:#d1d1d2;
2027
1687
  color:var(--color-text-light);
2028
1688
  cursor:not-allowed;
2029
1689
  }
2030
1690
 
2031
1691
  .mobius-select:not(.--is-invalid):not(.--is-disabled):hover{
2032
- border-color:#4632d8;
2033
1692
  border-color:var(--color-primary);
2034
- background-color:#f6f5fd;
2035
1693
  background-color:var(--color-background-input-active);
2036
1694
  }
2037
1695
 
2038
1696
  .mobius-select:focus-visible{
2039
- border-color:#4632d8;
2040
1697
  border-color:var(--color-primary);
2041
- background-color:#f6f5fd;
2042
1698
  background-color:var(--color-background-input-active);
2043
- box-shadow:0 0 0 2px #e943c9;
2044
1699
  box-shadow:var(--box-shadow-default);
2045
1700
  }
2046
1701
 
2047
1702
  .mobius-select.--is-invalid{
2048
- border-color:#b90909;
2049
1703
  border-color:var(--color-error);
2050
- background-color:#f8e7e7;
2051
1704
  background-color:var(--color-error-background);
2052
- color:#b90909;
2053
1705
  color:var(--color-error);
2054
1706
  }
2055
1707
 
@@ -2061,30 +1713,25 @@ a.mobius-button:focus-visible,
2061
1713
  position:absolute;
2062
1714
  right:2px;
2063
1715
  height:100%;
2064
- padding:24px;
2065
1716
  padding:var(--size-md);
2066
- border-radius:4px;
2067
1717
  border-radius:var(--radius-1);
2068
1718
  pointer-events:none;
2069
- color:#5d5d60;
2070
1719
  color:var(--color-text-medium);
2071
1720
  }
2072
1721
 
2073
1722
  .mobius-select__icon.--is-disabled{
2074
- color:#d1d1d2;
2075
1723
  color:var(--color-text-light);
2076
1724
  }
2077
1725
 
2078
1726
  .mobius-select__icon.--is-invalid{
2079
- color:#b90909;
2080
1727
  color:var(--color-error);
2081
1728
  }
2082
1729
 
2083
1730
  :root,
2084
1731
  :host{
2085
- --slider-primary-track-background:rgba(70,50,216,0.12549);
1732
+ --slider-primary-track-background:#4632d820;
2086
1733
  --slider-primary-thumb-background:var(--color-primary);
2087
- --slider-secondary-track-background:rgba(233,67,201,0.12549);
1734
+ --slider-secondary-track-background:#e943c920;
2088
1735
  --slider-secondary-thumb-background:var(--color-accent);
2089
1736
  --thumb-size:20px;
2090
1737
  }
@@ -2092,73 +1739,54 @@ a.mobius-button:focus-visible,
2092
1739
  .mobius-slider{
2093
1740
  position:relative;
2094
1741
  display:grid;
2095
- grid-gap:4px;
2096
- grid-gap:var(--size-xxs);
2097
- gap:4px;
2098
1742
  gap:var(--size-xxs);
2099
1743
  }
2100
1744
 
2101
1745
  .mobius-slider.--is-primary .mobius-slider__track{
2102
- background-color:rgba(70,50,216,0.12549);
2103
1746
  background-color:var(--slider-primary-track-background);
2104
1747
  }
2105
1748
 
2106
1749
  .mobius-slider.--is-primary .mobius-slider__track::-webkit-slider-thumb{
2107
- background-color:#4632d8;
2108
1750
  background-color:var(--slider-primary-thumb-background);
2109
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #4632d8;
2110
1751
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--slider-primary-thumb-background);
2111
1752
  }
2112
1753
 
2113
1754
  .mobius-slider.--is-primary .mobius-slider__track::-moz-range-thumb{
2114
- background-color:#4632d8;
2115
1755
  background-color:var(--slider-primary-thumb-background);
2116
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #4632d8;
2117
1756
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--slider-primary-thumb-background);
2118
1757
  }
2119
1758
 
2120
1759
  .mobius-slider.--is-secondary .mobius-slider__track{
2121
- background-color:rgba(233,67,201,0.12549);
2122
1760
  background-color:var(--slider-secondary-track-background);
2123
1761
  }
2124
1762
 
2125
1763
  .mobius-slider.--is-secondary .mobius-slider__track::-webkit-slider-thumb{
2126
- background-color:#e943c9;
2127
1764
  background-color:var(--slider-secondary-thumb-background);
2128
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #e943c9;
2129
1765
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--slider-secondary-thumb-background);
2130
1766
  }
2131
1767
 
2132
1768
  .mobius-slider.--is-secondary .mobius-slider__track::-moz-range-thumb{
2133
- background-color:#e943c9;
2134
1769
  background-color:var(--slider-secondary-thumb-background);
2135
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #e943c9;
2136
1770
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--slider-secondary-thumb-background);
2137
1771
  }
2138
1772
 
2139
1773
  .mobius-slider.--is-disabled{
2140
- color:#d1d1d2;
2141
1774
  color:var(--color-text-light);
2142
1775
  cursor:not-allowed;
2143
1776
  }
2144
1777
 
2145
1778
  .mobius-slider.--is-disabled .mobius-slider__track{
2146
- background-color:#f3f3f3;
2147
1779
  background-color:var(--color-background-light);
2148
1780
  }
2149
1781
 
2150
1782
  .mobius-slider.--is-disabled .mobius-slider__track::-webkit-slider-thumb{
2151
- background-color:#f3f3f3;
2152
1783
  background-color:var(--color-background-light);
2153
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #d1d1d2;
2154
1784
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--color-border-medium);
2155
1785
  cursor:not-allowed;
2156
1786
  }
2157
1787
 
2158
1788
  .mobius-slider.--is-disabled .mobius-slider__track::-moz-range-thumb{
2159
- background-color:#f3f3f3;
2160
1789
  background-color:var(--color-background-light);
2161
- box-shadow:0 0 0 4px #ffffff, 0 0 0 5px #d1d1d2;
2162
1790
  box-shadow:0 0 0 var(--size-xxs) var(--color-background), 0 0 0 5px var(--color-border-medium);
2163
1791
  cursor:not-allowed;
2164
1792
  }
@@ -2171,13 +1799,10 @@ a.mobius-button:focus-visible,
2171
1799
 
2172
1800
  .mobius-slider__track{
2173
1801
  position:absolute;
2174
- -moz-appearance:none;
2175
- appearance:none;
1802
+ appearance:none;
2176
1803
  -webkit-appearance:none;
2177
1804
  width:100%;
2178
- height:8px;
2179
1805
  height:var(--size-xs);
2180
- top:calc(8px + 2px);
2181
1806
  top:calc(var(--size-xs) + 2px);
2182
1807
  border-radius:999px;
2183
1808
  touch-action:none;
@@ -2192,9 +1817,7 @@ a.mobius-button:focus-visible,
2192
1817
  .mobius-slider__track::-webkit-slider-thumb{
2193
1818
  appearance:none;
2194
1819
  -webkit-appearance:none;
2195
- width:20px;
2196
1820
  width:var(--thumb-size);
2197
- height:20px;
2198
1821
  height:var(--thumb-size);
2199
1822
  border:var(--thumb-border);
2200
1823
  border-radius:50%;
@@ -2202,12 +1825,9 @@ a.mobius-button:focus-visible,
2202
1825
  }
2203
1826
 
2204
1827
  .mobius-slider__track::-moz-range-thumb{
2205
- -moz-appearance:none;
2206
- appearance:none;
1828
+ appearance:none;
2207
1829
  -webkit-appearance:none;
2208
- width:20px;
2209
1830
  width:var(--thumb-size);
2210
- height:20px;
2211
1831
  height:var(--thumb-size);
2212
1832
  border:var(--thumb-border);
2213
1833
  border-radius:50%;
@@ -2236,32 +1856,26 @@ a.mobius-button:focus-visible,
2236
1856
  }
2237
1857
 
2238
1858
  .mobius-stack.--gap-xxs{
2239
- gap:4px;
2240
1859
  gap:var(--size-xxs);
2241
1860
  }
2242
1861
 
2243
1862
  .mobius-stack.--gap-xs{
2244
- gap:8px;
2245
1863
  gap:var(--size-xs);
2246
1864
  }
2247
1865
 
2248
1866
  .mobius-stack.--gap-sm{
2249
- gap:16px;
2250
1867
  gap:var(--size-sm);
2251
1868
  }
2252
1869
 
2253
1870
  .mobius-stack.--gap-md{
2254
- gap:24px;
2255
1871
  gap:var(--size-md);
2256
1872
  }
2257
1873
 
2258
1874
  .mobius-stack.--gap-lg{
2259
- gap:32px;
2260
1875
  gap:var(--size-lg);
2261
1876
  }
2262
1877
 
2263
1878
  .mobius-stack.--gap-xl{
2264
- gap:40px;
2265
1879
  gap:var(--size-xl);
2266
1880
  }
2267
1881
 
@@ -2278,10 +1892,8 @@ a.mobius-button:focus-visible,
2278
1892
  border-collapse:collapse;
2279
1893
  line-height:1.7;
2280
1894
  box-sizing:border-box;
2281
- text-indent:0;
2282
1895
  text-indent:initial;
2283
1896
  border-spacing:2px;
2284
- border-color:#f3f3f3;
2285
1897
  border-color:var(--color-border-light);
2286
1898
  }
2287
1899
 
@@ -2290,24 +1902,18 @@ a.mobius-button:focus-visible,
2290
1902
  box-sizing:border-box;
2291
1903
  vertical-align:middle;
2292
1904
  border-color:inherit;
2293
- font-weight:700;
2294
1905
  font-weight:var(--font-weight-bold);
2295
1906
  }
2296
1907
 
2297
1908
  .mobius-table__head-cell{
2298
1909
  display:table-cell;
2299
- font-weight:700;
2300
1910
  font-weight:var(--font-weight-bold);
2301
1911
  box-sizing:border-box;
2302
1912
  vertical-align:baseline;
2303
- padding-top:8px;
2304
1913
  padding-top:var(--size-xs);
2305
- padding-bottom:8px;
2306
1914
  padding-bottom:var(--size-xs);
2307
- padding-right:32px;
2308
1915
  padding-right:var(--size-lg);
2309
1916
  border-color:currentColor;
2310
- border-width:1px;
2311
1917
  border-width:var(--table-border-width);
2312
1918
  border-bottom-style:solid;
2313
1919
  }
@@ -2323,17 +1929,11 @@ a.mobius-button:focus-visible,
2323
1929
  display:table-cell;
2324
1930
  vertical-align:baseline;
2325
1931
  box-sizing:border-box;
2326
- color:#5d5d60;
2327
1932
  color:var(--color-text-medium);
2328
- padding-top:8px;
2329
1933
  padding-top:var(--size-xs);
2330
- padding-bottom:8px;
2331
1934
  padding-bottom:var(--size-xs);
2332
- padding-right:32px;
2333
1935
  padding-right:var(--size-lg);
2334
- border-color:#f3f3f3;
2335
1936
  border-color:var(--color-border-light);
2336
- border-width:1px;
2337
1937
  border-width:var(--table-border-width);
2338
1938
  border-bottom-style:solid;
2339
1939
  }
@@ -2344,35 +1944,24 @@ a.mobius-button:focus-visible,
2344
1944
 
2345
1945
  .mobius-text{
2346
1946
  box-sizing:border-box;
2347
- font-family:museosans, Arial, sans-serif;
2348
1947
  font-family:var(--font-family);
2349
- font-size:16px;
2350
1948
  font-size:var(--font-size-regular);
2351
- font-weight:500;
2352
1949
  font-weight:var(--font-weight-normal);
2353
- line-height:1.5;
2354
1950
  line-height:var(--line-height-normal);
2355
1951
  }
2356
1952
 
2357
1953
  .mobius-text:where(.--is-p){
2358
1954
  box-sizing:border-box;
2359
- font-family:museosans, Arial, sans-serif;
2360
1955
  font-family:var(--font-family);
2361
- font-size:16px;
2362
1956
  font-size:var(--font-size-regular);
2363
- font-weight:500;
2364
1957
  font-weight:var(--font-weight-normal);
2365
- line-height:1.5;
2366
1958
  line-height:var(--line-height-normal);
2367
1959
  }
2368
1960
 
2369
1961
  .mobius-text:where(.--is-h1){
2370
1962
  box-sizing:border-box;
2371
- font-family:museosans, Arial, sans-serif;
2372
1963
  font-family:var(--font-family);
2373
- font-size:32px;
2374
1964
  font-size:var(--font-size-title);
2375
- font-weight:700;
2376
1965
  font-weight:var(--font-weight-bold);
2377
1966
  line-height:1.25;
2378
1967
  margin:0.35em 0;
@@ -2380,24 +1969,17 @@ a.mobius-button:focus-visible,
2380
1969
 
2381
1970
  .mobius-text:where(.--is-h2){
2382
1971
  box-sizing:border-box;
2383
- font-family:museosans, Arial, sans-serif;
2384
1972
  font-family:var(--font-family);
2385
- font-size:24px;
2386
1973
  font-size:var(--font-size-small-title);
2387
- font-weight:700;
2388
1974
  font-weight:var(--font-weight-bold);
2389
- line-height:1.333;
2390
1975
  line-height:var(--line-height-tight);
2391
1976
  margin:0.45em 0;
2392
1977
  }
2393
1978
 
2394
1979
  .mobius-text:where(.--is-h3){
2395
1980
  box-sizing:border-box;
2396
- font-family:museosans, Arial, sans-serif;
2397
1981
  font-family:var(--font-family);
2398
- font-size:20px;
2399
1982
  font-size:var(--font-size-lead);
2400
- font-weight:700;
2401
1983
  font-weight:var(--font-weight-bold);
2402
1984
  line-height:1.2;
2403
1985
  margin:0.5em 0;
@@ -2405,131 +1987,90 @@ a.mobius-button:focus-visible,
2405
1987
 
2406
1988
  .mobius-text:where(.--is-h4){
2407
1989
  box-sizing:border-box;
2408
- font-family:museosans, Arial, sans-serif;
2409
1990
  font-family:var(--font-family);
2410
- font-size:16px;
2411
1991
  font-size:var(--font-size-regular);
2412
- font-weight:700;
2413
1992
  font-weight:var(--font-weight-bold);
2414
- line-height:1.5;
2415
1993
  line-height:var(--line-height-normal);
2416
1994
  margin:0.55em 0;
2417
1995
  }
2418
1996
 
2419
1997
  .mobius-text:where(.--is-span){
2420
1998
  box-sizing:border-box;
2421
- font-size:16px;
2422
1999
  font-size:var(--font-size-regular);
2423
- font-weight:500;
2424
2000
  font-weight:var(--font-weight-normal);
2425
- line-height:1.5;
2426
2001
  line-height:var(--line-height-normal);
2427
2002
  }
2428
2003
 
2429
2004
  .mobius-text:where(.--is-body){
2430
2005
  box-sizing:border-box;
2431
- font-family:museosans, Arial, sans-serif;
2432
2006
  font-family:var(--font-family);
2433
- font-size:16px;
2434
2007
  font-size:var(--font-size-regular);
2435
- font-weight:500;
2436
2008
  font-weight:var(--font-weight-normal);
2437
- line-height:1.5;
2438
2009
  line-height:var(--line-height-normal);
2439
- color:#5d5d60;
2440
2010
  color:var(--color-text-medium);
2441
2011
  }
2442
2012
 
2443
2013
  .mobius-text:where(.--is-small){
2444
2014
  box-sizing:border-box;
2445
- font-family:museosans, Arial, sans-serif;
2446
2015
  font-family:var(--font-family);
2447
- font-size:14px;
2448
2016
  font-size:var(--font-size-small-paragraph);
2449
- font-weight:500;
2450
2017
  font-weight:var(--font-weight-normal);
2451
2018
  line-height:1.428;
2452
- color:#5d5d60;
2453
2019
  color:var(--color-text-medium);
2454
2020
  }
2455
2021
 
2456
2022
  .mobius-text:where(.--is-legal){
2457
2023
  box-sizing:border-box;
2458
- font-family:museosans, Arial, sans-serif;
2459
2024
  font-family:var(--font-family);
2460
- font-size:12px;
2461
2025
  font-size:var(--font-size-small-print);
2462
- font-weight:500;
2463
2026
  font-weight:var(--font-weight-normal);
2464
- line-height:1.333;
2465
2027
  line-height:var(--line-height-tight);
2466
- color:#5d5d60;
2467
2028
  color:var(--color-text-medium);
2468
2029
  }
2469
2030
 
2470
2031
  .mobius-text:where(.--has-line-height-tight){
2471
- line-height:1.333;
2472
2032
  line-height:var(--line-height-tight);
2473
2033
  }
2474
2034
 
2475
2035
  .mobius-text:where(.--has-line-height-loose){
2476
- line-height:1.5;
2477
2036
  line-height:var(--line-height-normal);
2478
2037
  }
2479
2038
 
2480
2039
  .mobius-text-area__input{
2481
2040
  box-sizing:border-box;
2482
2041
  flex:1 1 0%;
2483
- border:2px solid #9084e8;
2484
2042
  border:var(--border-default);
2485
- border-radius:4px;
2486
2043
  border-radius:var(--radius-1);
2487
- padding:8px 16px;
2488
2044
  padding:var(--size-xs) var(--size-sm);
2489
2045
  margin:0px;
2490
- font-family:museosans, Arial, sans-serif;
2491
2046
  font-family:var(--font-family);
2492
- font-size:16px;
2493
2047
  font-size:var(--font-size-regular);
2494
- color:#18181d;
2495
2048
  color:var(--color-text);
2496
2049
  outline:0px;
2497
- background-color:#ffffff;
2498
2050
  background-color:var(--color-background-input);
2499
2051
  }
2500
2052
 
2501
2053
  .mobius-text-area__input:hover:not(.--is-disabled):not(.mobius-text-area__input.--is-invalid){
2502
- border-color:#4632d8;
2503
2054
  border-color:var(--color-primary);
2504
- background-color:#f6f5fd;
2505
2055
  background-color:var(--color-background-input-active);
2506
2056
  }
2507
2057
 
2508
2058
  .mobius-text-area__input:focus-visible{
2509
- border-color:#4632d8;
2510
2059
  border-color:var(--color-primary);
2511
- background-color:#f6f5fd;
2512
2060
  background-color:var(--color-background-input-active);
2513
- box-shadow:0 0 0 2px #e943c9;
2514
2061
  box-shadow:var(--box-shadow-default);
2515
2062
  }
2516
2063
 
2517
2064
  .mobius-text-area__input.--is-disabled{
2518
- background-color:#f3f3f3;
2519
2065
  background-color:var(--color-background-light);
2520
- border-color:#d1d1d2;
2521
2066
  border-color:var(--color-border-medium);
2522
- color:#d1d1d2;
2523
2067
  color:var(--color-text-light);
2524
2068
  cursor:not-allowed;
2525
2069
  }
2526
2070
 
2527
2071
  .mobius-text-area__input.--is-invalid:not(.--is-disabled){
2528
- border-color:#b90909;
2529
2072
  border-color:var(--color-error);
2530
- background-color:#f8e7e7;
2531
2073
  background-color:var(--color-error-background);
2532
- color:#b90909;
2533
2074
  color:var(--color-error);
2534
2075
  }
2535
2076
 
@@ -2579,7 +2120,6 @@ a.mobius-button:focus-visible,
2579
2120
  }
2580
2121
 
2581
2122
  .mobius-text-field__prefix-outside.mobius-text{
2582
- padding-right:16px;
2583
2123
  padding-right:var(--size-sm);
2584
2124
  }
2585
2125
 
@@ -2589,14 +2129,12 @@ a.mobius-button:focus-visible,
2589
2129
  }
2590
2130
 
2591
2131
  .mobius-text-field__suffix-outside.mobius-text{
2592
- padding-left:16px;
2593
2132
  padding-left:var(--size-sm);
2594
2133
  }
2595
2134
 
2596
2135
  .mobius-text-field__prefix-inside,
2597
2136
  .mobius-text-field__suffix-inside{
2598
2137
  display:flex;
2599
- color:#9084e8;
2600
2138
  color:var(--color-primary-light);
2601
2139
  }
2602
2140
 
@@ -2612,12 +2150,10 @@ a.mobius-button:focus-visible,
2612
2150
  }
2613
2151
 
2614
2152
  .mobius-text-field__prefix-inside{
2615
- padding-left:16px;
2616
2153
  padding-left:var(--size-sm);
2617
2154
  }
2618
2155
 
2619
2156
  .mobius-text-field__suffix-inside{
2620
- padding-right:16px;
2621
2157
  padding-right:var(--size-sm);
2622
2158
  }
2623
2159
 
@@ -2625,17 +2161,13 @@ a.mobius-button:focus-visible,
2625
2161
  display:flex;
2626
2162
  flex:1 1 0;
2627
2163
  align-items:center;
2628
- border-radius:4px;
2629
2164
  border-radius:var(--radius-1);
2630
- color:#5d5d60;
2631
2165
  color:var(--color-text-medium);
2632
2166
  overflow:hidden;
2633
- background-color:#ffffff;
2634
2167
  background-color:var(--color-background-input);
2635
2168
  }
2636
2169
 
2637
2170
  .mobius-text-field__input-wrapper:not(.--is-hidden){
2638
- border:2px solid #9084e8;
2639
2171
  border:var(--border-default);
2640
2172
  }
2641
2173
 
@@ -2645,77 +2177,54 @@ a.mobius-button:focus-visible,
2645
2177
  }
2646
2178
 
2647
2179
  .mobius-text-field__input-wrapper:focus-within{
2648
- border-color:#4632d8;
2649
2180
  border-color:var(--color-primary);
2650
- background-color:#f6f5fd;
2651
2181
  background-color:var(--color-background-input-active);
2652
- box-shadow:0 0 0 2px #e943c9;
2653
2182
  box-shadow:var(--box-shadow-default);
2654
2183
  }
2655
2184
 
2656
2185
  .mobius-text-field__input-wrapper:focus-within .mobius-text-field__prefix-inside,
2657
2186
  .mobius-text-field__input-wrapper:focus-within .mobius-text-field__suffix-inside{
2658
- color:#4632d8;
2659
2187
  color:var(--color-primary);
2660
2188
  }
2661
2189
 
2662
2190
  .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid){
2663
- border-color:#4632d8;
2664
2191
  border-color:var(--color-primary);
2665
- background-color:#f6f5fd;
2666
2192
  background-color:var(--color-background-input-active);
2667
2193
  }
2668
2194
 
2669
2195
  .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__prefix-inside,
2670
2196
  .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__suffix-inside{
2671
- color:#4632d8;
2672
2197
  color:var(--color-primary);
2673
2198
  }
2674
2199
 
2675
2200
  .mobius-text-field__input-wrapper.--is-disabled{
2676
- background-color:#f3f3f3;
2677
2201
  background-color:var(--color-background-light);
2678
- border-color:#d1d1d2;
2679
2202
  border-color:var(--color-border-medium);
2680
- color:#d1d1d2;
2681
2203
  color:var(--color-text-light);
2682
2204
  cursor:not-allowed;
2683
2205
  }
2684
2206
 
2685
2207
  .mobius-text-field__input-wrapper.--is-invalid:not(.--is-disabled){
2686
- border-color:#b90909;
2687
2208
  border-color:var(--color-error);
2688
- background-color:#f8e7e7;
2689
2209
  background-color:var(--color-error-background);
2690
- color:#b90909;
2691
2210
  color:var(--color-error);
2692
2211
  }
2693
2212
 
2694
2213
  .mobius-text-field__input{
2695
2214
  flex:1 1 0;
2696
- padding:17px 16px;
2697
2215
  padding:var(--input-field-padding);
2698
2216
  border:none;
2699
2217
  background-color:transparent;
2700
2218
  box-sizing:border-box;
2701
- font-family:museosans, Arial, sans-serif;
2702
2219
  font-family:var(--font-family);
2703
- font-size:16px;
2704
2220
  font-size:var(--font-size-regular);
2705
2221
  color:currentColor;
2706
2222
  outline:0;
2707
2223
  margin:0;
2708
- max-width:none;
2709
2224
  max-width:var(--text-input-max-width);
2710
2225
  }
2711
2226
 
2712
- .mobius-text-field__input::-moz-placeholder{
2713
- color:#5d5d60;
2714
- color:var(--color-text-medium);
2715
- }
2716
-
2717
2227
  .mobius-text-field__input::placeholder{
2718
- color:#5d5d60;
2719
2228
  color:var(--color-text-medium);
2720
2229
  }
2721
2230
 
@@ -2730,37 +2239,27 @@ a.mobius-button:focus-visible,
2730
2239
 
2731
2240
  .mobius-title{
2732
2241
  display:flex;
2733
- padding-left:16px;
2734
2242
  padding-left:var(--size-sm);
2735
2243
  }
2736
2244
 
2737
2245
  .mobius-title__header{
2738
2246
  margin:0;
2739
- font-size:24px;
2740
2247
  font-size:var(--font-size-small-title);
2741
- color:#18181d;
2742
2248
  color:var(--color-text);
2743
- font-weight:700;
2744
2249
  font-weight:var(--font-weight-bold);
2745
2250
  }
2746
2251
 
2747
2252
  .mobius-title__description{
2748
2253
  margin:0;
2749
- font-size:16px;
2750
2254
  font-size:var(--font-size-regular);
2751
- color:#5d5d60;
2752
2255
  color:var(--color-text-medium);
2753
- font-weight:500;
2754
2256
  font-weight:var(--font-weight-normal);
2755
2257
  }
2756
2258
 
2757
2259
  .mobius-title__container{
2758
- gap:8px;
2759
2260
  gap:var(--size-xs);
2760
- line-height:1.333;
2761
2261
  line-height:var(--line-height-tight);
2762
2262
  position:relative;
2763
- padding-left:calc(16px + 8px);
2764
2263
  padding-left:calc(var(--size-sm) + var(--title-decorator-width));
2765
2264
  }
2766
2265
 
@@ -2768,13 +2267,10 @@ a.mobius-button:focus-visible,
2768
2267
  position:absolute;
2769
2268
  content:"";
2770
2269
  display:block;
2771
- width:8px;
2772
2270
  width:var(--title-decorator-width);
2773
2271
  height:100%;
2774
- border-radius:4px;
2775
2272
  border-radius:var(--radius-1);
2776
2273
  left:0;
2777
- background-color:#4632d8;
2778
2274
  background-color:var(--color-primary);
2779
2275
  }
2780
2276
 
@@ -2785,7 +2281,6 @@ svg:not(:host).svg-inline--mobius-icon{
2785
2281
  }
2786
2282
 
2787
2283
  .svg-inline--mobius-icon{
2788
- display:inline-block;
2789
2284
  display:var(--mobius-icon-display, inline-block);
2790
2285
  height:1em;
2791
2286
  overflow:visible;
@@ -2817,25 +2312,21 @@ svg:not(:host).svg-inline--mobius-icon{
2817
2312
  }
2818
2313
 
2819
2314
  .svg-inline--mobius-icon.mobius-icon-pull-left{
2820
- margin-right:0.3em;
2821
2315
  margin-right:var(--mobius-icon-pull-margin, 0.3em);
2822
2316
  width:auto;
2823
2317
  }
2824
2318
 
2825
2319
  .svg-inline--mobius-icon.mobius-icon-pull-right{
2826
- margin-left:0.3em;
2827
2320
  margin-left:var(--mobius-icon-pull-margin, 0.3em);
2828
2321
  width:auto;
2829
2322
  }
2830
2323
 
2831
2324
  .svg-inline--mobius-icon.mobius-icon-li{
2832
- width:2em;
2833
2325
  width:var(--mobius-icon-li-width, 2em);
2834
2326
  top:0.25em;
2835
2327
  }
2836
2328
 
2837
2329
  .svg-inline--mobius-icon.mobius-icon-fw{
2838
- width:1.25em;
2839
2330
  width:var(--mobius-icon-fw-width, 1.25em);
2840
2331
  }
2841
2332
 
@@ -2876,72 +2367,50 @@ svg:not(:host).svg-inline--mobius-icon{
2876
2367
  }
2877
2368
 
2878
2369
  .mobius-icon-layers-counter{
2879
- background-color:#ff253a;
2880
2370
  background-color:var(--mobius-icon-counter-background-color, #ff253a);
2881
- border-radius:1em;
2882
2371
  border-radius:var(--mobius-icon-counter-border-radius, 1em);
2883
2372
  box-sizing:border-box;
2884
- color:#fff;
2885
2373
  color:var(--mobius-icon-inverse, #fff);
2886
- line-height:1;
2887
2374
  line-height:var(--mobius-icon-counter-line-height, 1);
2888
- max-width:5em;
2889
2375
  max-width:var(--mobius-icon-counter-max-width, 5em);
2890
- min-width:1.5em;
2891
2376
  min-width:var(--mobius-icon-counter-min-width, 1.5em);
2892
2377
  overflow:hidden;
2893
- padding:0.25em 0.5em;
2894
2378
  padding:var(--mobius-icon-counter-padding, 0.25em 0.5em);
2895
- right:0;
2896
2379
  right:var(--mobius-icon-right, 0);
2897
2380
  text-overflow:ellipsis;
2898
- top:0;
2899
2381
  top:var(--mobius-icon-top, 0);
2900
- transform:scale(0.25);
2901
2382
  transform:scale(var(--mobius-icon-counter-scale, 0.25));
2902
2383
  transform-origin:top right;
2903
2384
  }
2904
2385
 
2905
2386
  .mobius-icon-layers-bottom-right{
2906
- bottom:0;
2907
2387
  bottom:var(--mobius-icon-bottom, 0);
2908
- right:0;
2909
2388
  right:var(--mobius-icon-right, 0);
2910
2389
  top:auto;
2911
- transform:scale(0.25);
2912
2390
  transform:scale(var(--mobius-icon-layers-scale, 0.25));
2913
2391
  transform-origin:bottom right;
2914
2392
  }
2915
2393
 
2916
2394
  .mobius-icon-layers-bottom-left{
2917
- bottom:0;
2918
2395
  bottom:var(--mobius-icon-bottom, 0);
2919
- left:0;
2920
2396
  left:var(--mobius-icon-left, 0);
2921
2397
  right:auto;
2922
2398
  top:auto;
2923
- transform:scale(0.25);
2924
2399
  transform:scale(var(--mobius-icon-layers-scale, 0.25));
2925
2400
  transform-origin:bottom left;
2926
2401
  }
2927
2402
 
2928
2403
  .mobius-icon-layers-top-right{
2929
- top:0;
2930
2404
  top:var(--mobius-icon-top, 0);
2931
- right:0;
2932
2405
  right:var(--mobius-icon-right, 0);
2933
- transform:scale(0.25);
2934
2406
  transform:scale(var(--mobius-icon-layers-scale, 0.25));
2935
2407
  transform-origin:top right;
2936
2408
  }
2937
2409
 
2938
2410
  .mobius-icon-layers-top-left{
2939
- left:0;
2940
2411
  left:var(--mobius-icon-left, 0);
2941
2412
  right:auto;
2942
- top:0;
2943
2413
  top:var(--mobius-icon-top, 0);
2944
- transform:scale(0.25);
2945
2414
  transform:scale(var(--mobius-icon-layers-scale, 0.25));
2946
2415
  transform-origin:top left;
2947
2416
  }
@@ -3029,7 +2498,6 @@ svg:not(:host).svg-inline--mobius-icon{
3029
2498
 
3030
2499
  .mobius-icon-ul{
3031
2500
  list-style-type:none;
3032
- margin-left:2.5em;
3033
2501
  margin-left:var(--mobius-icon-li-margin, 2.5em);
3034
2502
  padding-left:0;
3035
2503
  }
@@ -3039,54 +2507,40 @@ svg:not(:host).svg-inline--mobius-icon{
3039
2507
  }
3040
2508
 
3041
2509
  .mobius-icon-li{
3042
- left:calc(2em * -1);
3043
2510
  left:calc(var(--mobius-icon-li-width, 2em) * -1);
3044
2511
  position:absolute;
3045
2512
  text-align:center;
3046
- width:2em;
3047
2513
  width:var(--mobius-icon-li-width, 2em);
3048
2514
  line-height:inherit;
3049
2515
  }
3050
2516
 
3051
2517
  .mobius-icon-border{
3052
- border-color:#eee;
3053
2518
  border-color:var(--mobius-icon-border-color, #eee);
3054
- border-radius:0.1em;
3055
2519
  border-radius:var(--mobius-icon-border-radius, 0.1em);
3056
- border-style:solid;
3057
2520
  border-style:var(--mobius-icon-border-style, solid);
3058
- border-width:0.08em;
3059
2521
  border-width:var(--mobius-icon-border-width, 0.08em);
3060
- padding:0.2em 0.25em 0.15em;
3061
2522
  padding:var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);
3062
2523
  }
3063
2524
 
3064
2525
  .mobius-icon-pull-left{
3065
2526
  float:left;
3066
- margin-right:0.3em;
3067
2527
  margin-right:var(--mobius-icon-pull-margin, 0.3em);
3068
2528
  }
3069
2529
 
3070
2530
  .mobius-icon-pull-right{
3071
2531
  float:right;
3072
- margin-left:0.3em;
3073
2532
  margin-left:var(--mobius-icon-pull-margin, 0.3em);
3074
2533
  }
3075
2534
 
3076
2535
  .mobius-icon-spin{
3077
2536
  animation-name:mobius-icon-spin;
3078
- animation-delay:0s;
3079
2537
  animation-delay:var(--mobius-icon-animation-delay, 0s);
3080
- animation-direction:normal;
3081
2538
  animation-direction:var(--mobius-icon-animation-direction, normal);
3082
- animation-duration:2s;
3083
2539
  animation-duration:var(--mobius-icon-animation-duration, 2s);
3084
- animation-iteration-count:infinite;
3085
2540
  animation-iteration-count:var(
3086
2541
  --mobius-icon-animation-iteration-count,
3087
2542
  infinite
3088
2543
  );
3089
- animation-timing-function:linear;
3090
2544
  animation-timing-function:var(--mobius-icon-animation-timing, linear);
3091
2545
  }
3092
2546
 
@@ -3139,7 +2593,6 @@ svg:not(:host).svg-inline--mobius-icon{
3139
2593
  }
3140
2594
 
3141
2595
  .mobius-icon-rotate-by{
3142
- transform:rotate(none);
3143
2596
  transform:rotate(var(--mobius-icon-rotate-angle, none));
3144
2597
  }
3145
2598
 
@@ -3159,7 +2612,6 @@ svg:not(:host).svg-inline--mobius-icon{
3159
2612
  position:absolute;
3160
2613
  right:0;
3161
2614
  top:0;
3162
- z-index:auto;
3163
2615
  z-index:var(--mobius-icon-stack-z-index, auto);
3164
2616
  }
3165
2617
 
@@ -3174,7 +2626,6 @@ svg:not(:host).svg-inline--mobius-icon{
3174
2626
  }
3175
2627
 
3176
2628
  .mobius-icon-inverse{
3177
- color:#fff;
3178
2629
  color:var(--mobius-icon-inverse, #fff);
3179
2630
  }
3180
2631
 
@@ -3205,26 +2656,20 @@ svg:not(:host).svg-inline--mobius-icon{
3205
2656
  }
3206
2657
 
3207
2658
  .svg-inline--mobius-icon .mobius-icon-primary{
3208
- fill:currentColor;
3209
2659
  fill:var(--mobius-icon-primary-color, currentColor);
3210
- opacity:1;
3211
2660
  opacity:var(--mobius-icon-primary-opacity, 1);
3212
2661
  }
3213
2662
 
3214
2663
  .svg-inline--mobius-icon .mobius-icon-secondary{
3215
- fill:currentColor;
3216
2664
  fill:var(--mobius-icon-secondary-color, currentColor);
3217
- opacity:0.4;
3218
2665
  opacity:var(--mobius-icon-secondary-opacity, 0.4);
3219
2666
  }
3220
2667
 
3221
2668
  .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary{
3222
- opacity:0.4;
3223
2669
  opacity:var(--mobius-icon-secondary-opacity, 0.4);
3224
2670
  }
3225
2671
 
3226
2672
  .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary{
3227
- opacity:1;
3228
2673
  opacity:var(--mobius-icon-primary-opacity, 1);
3229
2674
  }
3230
2675
 
@@ -3235,7 +2680,6 @@ svg:not(:host).svg-inline--mobius-icon{
3235
2680
 
3236
2681
  .fad.mobius-icon-inverse,
3237
2682
  .mobius-icon-duotone.mobius-icon-inverse{
3238
- color:#fff;
3239
2683
  color:var(--mobius-icon-inverse, #fff);
3240
2684
  }
3241
2685
 
@@ -3348,10 +2792,13 @@ svg:not(:host).svg-inline--mobius-icon{
3348
2792
  --input-field-padding-tight:14px var(--size-sm);
3349
2793
  --border-default:var(--size-border-width) solid var(--color-primary-light);
3350
2794
  --box-shadow-default:0 0 0 var(--size-focus-ring) var(--color-focus);
2795
+ --popover-max-width:260px;
2796
+ --popover-z-index:2147483647;
2797
+ --color-background-popover:var(--color-neutral-700);
2798
+ --color-text-popover:#fff;
3351
2799
  }
3352
2800
 
3353
2801
  .mobius{
3354
- font-family:museosans, Arial, sans-serif;
3355
2802
  font-family:var(--font-family);
3356
2803
  }
3357
2804