@bi-digital/css 0.6.8 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,7 +22,6 @@
22
22
  border-radius: var(--bi-radius-medium);
23
23
  gap: var(--bic-alert-gap);
24
24
  grid-template-columns: 1fr;
25
- width: -webkit-fit-content;
26
25
  width: fit-content;
27
26
  display: grid;
28
27
  position: relative;
@@ -235,9 +234,7 @@
235
234
  font-family: museo-sans, Arial, sans-serif;
236
235
  font-size: var(--bic-badge-font-size);
237
236
  line-height: var(--bic-badge-line-height);
238
- width: -webkit-max-content;
239
237
  width: max-content;
240
- height: -webkit-fit-content;
241
238
  height: fit-content;
242
239
  min-height: var(--bic-badge-height);
243
240
  box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
@@ -342,7 +339,7 @@
342
339
  .bi-button {
343
340
  --bic-button-box-shadow: none;
344
341
  --bic-button-icon-size: var(--bi-icon-medium);
345
- --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
342
+ --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
346
343
  --bic-button-size: var(--bi-scale-11x);
347
344
  --bic-button-font-size: 1rem;
348
345
  --bic-button-line-height: 1.5;
@@ -364,11 +361,9 @@
364
361
  color: var(--bic-button-color);
365
362
  background: var(--bic-button-background);
366
363
  box-shadow: var(--bic-button-box-shadow);
367
- height: -webkit-fit-content;
368
364
  height: fit-content;
369
365
  min-height: var(--bic-button-size);
370
366
  min-width: var(--bic-button-size);
371
- width: -webkit-fit-content;
372
367
  width: fit-content;
373
368
  padding: var(--bic-button-padding);
374
369
  -webkit-text-decoration: unset;
@@ -408,13 +403,13 @@
408
403
  .bi-button[data-size="small"] {
409
404
  --bic-button-font-size: .875rem;
410
405
  --bic-button-line-height: 1.25rem;
411
- --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
406
+ --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
412
407
  --bic-button-icon-size: var(--bi-icon-small);
413
408
  --bic-button-size: var(--bi-scale-8x);
414
409
  }
415
410
 
416
411
  .bi-button[data-size="large"] {
417
- --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
412
+ --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
418
413
  --bic-button-icon-size: var(--bi-icon-large);
419
414
  --bic-button-size: var(--bi-scale-14x);
420
415
  }
@@ -426,20 +421,15 @@
426
421
  padding: 0;
427
422
  }
428
423
 
429
- .bi-button:not([data-variant]) {
424
+ .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
430
425
  --bic-button-color: var(--bi-basic-white);
431
426
  --bic-button-background: var(--bi-primary-50);
432
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
433
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
434
- --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
435
- }
436
-
437
- .bi-button[data-variant="filled"] {
438
- --bic-button-color: var(--bi-basic-white);
439
- --bic-button-background: var(--bi-primary-50);
440
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
441
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
442
- --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
427
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
428
+ var(--bic-button-background);
429
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
430
+ var(--bic-button-background);
431
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
432
+ 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
443
433
  }
444
434
 
445
435
  .bi-button[data-variant="outlined"] {
@@ -471,15 +461,19 @@
471
461
  .bi-button[data-variant="flat"] {
472
462
  --bic-button-color: var(--bi-primary-90);
473
463
  --bic-button-background: var(--bi-primary-5);
474
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
475
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
464
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
465
+ var(--bic-button-background);
466
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
467
+ var(--bic-button-background);
476
468
  }
477
469
 
478
470
  .bi-button[data-variant="flat"][data-dark="true"] {
479
471
  --bic-button-color: var(--bi-basic-white);
480
472
  --bic-button-background: #ffffff1a;
481
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
482
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
473
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
474
+ var(--bic-button-background);
475
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
476
+ var(--bic-button-background);
483
477
  }
484
478
 
485
479
  @media (hover: hover) and (pointer: fine) {
@@ -492,14 +486,6 @@
492
486
  cursor: progress;
493
487
  }
494
488
 
495
- .bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
496
- cursor: not-allowed;
497
- }
498
-
499
- .bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
500
- cursor: progress;
501
- }
502
-
503
489
  .bi-button:is(:disabled, [aria-disabled="true"]) {
504
490
  cursor: not-allowed;
505
491
  }
@@ -512,12 +498,7 @@
512
498
  background: var(--bic-button-background-press);
513
499
  }
514
500
 
515
- .bi-button .bi-button--start-icon {
516
- display: inherit;
517
- font-size: var(--bic-button-icon-size);
518
- }
519
-
520
- .bi-button .bi-button--end-icon {
501
+ .bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
521
502
  display: inherit;
522
503
  font-size: var(--bic-button-icon-size);
523
504
  }
@@ -597,13 +578,13 @@
597
578
  --bic-card-media-width: 15.75rem;
598
579
  }
599
580
 
600
- @media not (min-width: 1024px) {
581
+ @media (width < 1024px) {
601
582
  .bi-card[data-orientation="horizontal"] {
602
583
  --bic-card-media-width: 14.5rem;
603
584
  }
604
585
  }
605
586
 
606
- @media not (min-width: 600px) {
587
+ @media (width < 600px) {
607
588
  .bi-card[data-orientation="horizontal"] {
608
589
  --bic-card-media-width: 8.4375rem;
609
590
  }
@@ -698,134 +679,46 @@
698
679
  overflow: hidden;
699
680
  }
700
681
 
701
- @media not (min-width: 600px) {
682
+ @media (width < 600px) {
702
683
  .bi-card .bi-card--content {
703
684
  --bic-card-content-padding: var(--bi-scale-3x);
704
685
  gap: var(--bi-scale-3x);
705
686
  }
706
687
  }
707
688
 
708
- .bi-card:-webkit-any(a, button) {
709
- cursor: pointer;
710
- text-decoration: none;
711
- transition: box-shadow .25s ease-in-out;
712
- position: relative;
713
- }
714
-
715
- .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
716
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
717
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
718
- outline-offset: var(--_bi--focus, 2px);
719
- }
720
-
721
- .bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
722
- --_bi--focus: ;
723
- }
724
-
725
- @media (hover: hover) and (pointer: fine) {
726
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
727
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
728
- }
729
- }
730
-
731
- .bi-card:-webkit-any(a, button):not(.disabled):active {
732
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
733
- }
734
-
735
- .bi-card:-webkit-any(a, button):disabled {
736
- cursor: not-allowed;
737
- }
738
-
739
- .bi-card:is(a, button) {
740
- cursor: pointer;
741
- text-decoration: none;
742
- transition: box-shadow .25s ease-in-out;
743
- position: relative;
744
- }
745
-
746
- .bi-card:is(a, button):not(.disabled):focus-visible {
747
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
748
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
749
- outline-offset: var(--_bi--focus, 2px);
750
- }
751
-
752
- .bi-card:is(a, button):not(.disabled):focus-visible * {
753
- --_bi--focus: ;
754
- }
755
-
756
- @media (hover: hover) and (pointer: fine) {
757
- .bi-card:is(a, button):not(.disabled):hover {
758
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
759
- }
760
- }
761
-
762
- .bi-card:is(a, button):not(.disabled):active {
763
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
764
- }
765
-
766
- .bi-card:is(a, button):disabled {
767
- cursor: not-allowed;
768
- }
769
-
770
- .bi-card .bi-card--content:-webkit-any(a, button) {
771
- cursor: pointer;
772
- text-decoration: none;
773
- transition: box-shadow .25s ease-in-out;
774
- position: relative;
775
- }
776
-
777
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
778
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
779
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
780
- outline-offset: var(--_bi--focus, 2px);
781
- }
782
-
783
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
784
- --_bi--focus: ;
785
- }
786
-
787
- @media (hover: hover) and (pointer: fine) {
788
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
789
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
790
- }
791
- }
792
-
793
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
794
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
795
- }
796
-
797
- .bi-card .bi-card--content:-webkit-any(a, button):disabled {
798
- cursor: not-allowed;
799
- }
800
-
801
- .bi-card .bi-card--content:is(a, button) {
689
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button) {
802
690
  cursor: pointer;
803
691
  text-decoration: none;
804
692
  transition: box-shadow .25s ease-in-out;
805
693
  position: relative;
806
694
  }
807
695
 
808
- .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
809
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
696
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
697
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
698
+ 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
810
699
  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
811
700
  outline-offset: var(--_bi--focus, 2px);
812
701
  }
813
702
 
814
- .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
703
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
815
704
  --_bi--focus: ;
816
705
  }
817
706
 
818
707
  @media (hover: hover) and (pointer: fine) {
819
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
820
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
708
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
709
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
710
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
711
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
821
712
  }
822
713
  }
823
714
 
824
- .bi-card .bi-card--content:is(a, button):not(.disabled):active {
825
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
715
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
716
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
717
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
718
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
826
719
  }
827
720
 
828
- .bi-card .bi-card--content:is(a, button):disabled {
721
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
829
722
  cursor: not-allowed;
830
723
  }
831
724
 
@@ -838,7 +731,7 @@
838
731
  display: flex;
839
732
  }
840
733
 
841
- @media not (min-width: 600px) {
734
+ @media (width < 600px) {
842
735
  .bi-card .bi-card--actions {
843
736
  width: var(--bi-scale-11x);
844
737
  }
@@ -851,7 +744,7 @@
851
744
  flex: 1;
852
745
  }
853
746
 
854
- @media not (min-width: 600px) {
747
+ @media (width < 600px) {
855
748
  .bi-card .bi-card--actions .bi-card--action {
856
749
  --bic-button-size: var(--bi-scale-11x);
857
750
  }
@@ -874,7 +767,7 @@
874
767
  font-size: .875rem;
875
768
  }
876
769
 
877
- @media not (min-width: 600px) {
770
+ @media (width < 600px) {
878
771
  .bi-card .bi-card--header .bi-card--header-label {
879
772
  font-size: .8125rem;
880
773
  }
@@ -909,7 +802,7 @@
909
802
  overflow: hidden;
910
803
  }
911
804
 
912
- @media not (min-width: 600px) {
805
+ @media (width < 600px) {
913
806
  .bi-card .bi-card--header .bi-card--header-title {
914
807
  font-size: 1rem;
915
808
  }
@@ -922,20 +815,6 @@
922
815
  position: relative;
923
816
  }
924
817
 
925
- .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
926
- border-radius: inherit;
927
- object-fit: cover;
928
- aspect-ratio: 4 / 3;
929
- width: 100%;
930
- display: block;
931
- }
932
-
933
- @media not (min-width: 600px) {
934
- .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
935
- aspect-ratio: 3 / 2;
936
- }
937
- }
938
-
939
818
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
940
819
  border-radius: inherit;
941
820
  object-fit: cover;
@@ -944,7 +823,7 @@
944
823
  display: block;
945
824
  }
946
825
 
947
- @media not (min-width: 600px) {
826
+ @media (width < 600px) {
948
827
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
949
828
  aspect-ratio: 3 / 2;
950
829
  }
@@ -955,7 +834,6 @@
955
834
  left: var(--bi-scale-4x);
956
835
  right: var(--bi-scale-4x);
957
836
  flex-wrap: wrap;
958
- width: -webkit-fit-content;
959
837
  width: fit-content;
960
838
  display: flex;
961
839
  position: absolute;
@@ -967,7 +845,8 @@
967
845
  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
968
846
  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
969
847
  background: var(--bic-card-background-color);
970
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
848
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
849
+ 0px 4px 6px 0px #26333f0d;
971
850
  color: var(--bic-card-header-title-color);
972
851
  text-align: center;
973
852
  flex-direction: column;
@@ -1023,7 +902,6 @@
1023
902
  --bic-chip-line-height: 1.5rem;
1024
903
  gap: var(--bi-scale-1x);
1025
904
  border-radius: var(--bi-radius-full);
1026
- width: -webkit-fit-content;
1027
905
  width: fit-content;
1028
906
  color: var(--bic-chip-text-color);
1029
907
  background-color: var(--bic-chip-background);
@@ -1194,92 +1072,28 @@
1194
1072
  --bic-chip-text-color: var(--bi-basic-white);
1195
1073
  }
1196
1074
 
1197
- .bi-chip:-webkit-any(button) {
1198
- cursor: pointer;
1199
- border: none;
1200
- text-decoration: none;
1201
- }
1202
-
1203
- .bi-chip:-webkit-any(button):focus-visible {
1204
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1205
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1206
- outline-offset: var(--_bi--focus, 2px);
1207
- }
1208
-
1209
- @media (hover: hover) and (pointer: fine) {
1210
- .bi-chip:-webkit-any(button):hover {
1211
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1212
- }
1213
- }
1214
-
1215
- .bi-chip:-webkit-any(button):active {
1216
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1217
- }
1218
-
1219
- .bi-chip:is(button) {
1220
- cursor: pointer;
1221
- border: none;
1222
- text-decoration: none;
1223
- }
1224
-
1225
- .bi-chip:is(button):focus-visible {
1226
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1227
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1228
- outline-offset: var(--_bi--focus, 2px);
1229
- }
1230
-
1231
- @media (hover: hover) and (pointer: fine) {
1232
- .bi-chip:is(button):hover {
1233
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1234
- }
1235
- }
1236
-
1237
- .bi-chip:is(button):active {
1238
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1239
- }
1240
-
1241
- .bi-chip:-webkit-any(a) {
1242
- cursor: pointer;
1243
- border: none;
1244
- text-decoration: none;
1245
- }
1246
-
1247
- .bi-chip:-webkit-any(a):focus-visible {
1248
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1249
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1250
- outline-offset: var(--_bi--focus, 2px);
1251
- }
1252
-
1253
- @media (hover: hover) and (pointer: fine) {
1254
- .bi-chip:-webkit-any(a):hover {
1255
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1256
- }
1257
- }
1258
-
1259
- .bi-chip:-webkit-any(a):active {
1260
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1261
- }
1262
-
1263
- .bi-chip:is(a) {
1075
+ .bi-chip:is(button), .bi-chip:is(a) {
1264
1076
  cursor: pointer;
1265
1077
  border: none;
1266
1078
  text-decoration: none;
1267
1079
  }
1268
1080
 
1269
- .bi-chip:is(a):focus-visible {
1081
+ :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
1270
1082
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1271
1083
  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1272
1084
  outline-offset: var(--_bi--focus, 2px);
1273
1085
  }
1274
1086
 
1275
1087
  @media (hover: hover) and (pointer: fine) {
1276
- .bi-chip:is(a):hover {
1277
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1088
+ :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
1089
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
1090
+ var(--bic-chip-background);
1278
1091
  }
1279
1092
  }
1280
1093
 
1281
- .bi-chip:is(a):active {
1282
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1094
+ :is(.bi-chip:is(button), .bi-chip:is(a)):active {
1095
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
1096
+ var(--bic-chip-background);
1283
1097
  }
1284
1098
 
1285
1099
  .bi-chip > svg {
@@ -1289,8 +1103,10 @@
1289
1103
 
1290
1104
  details.bi-details {
1291
1105
  --bic-details-background: var(--bi-basic-white);
1292
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
1293
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
1106
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
1107
+ var(--bic-details-background);
1108
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
1109
+ var(--bic-details-background);
1294
1110
  --bic-details-color: var(--bi-neutral-90);
1295
1111
  --bic-details-border-color: var(--bi-neutral-15);
1296
1112
  --bic-details-padding: var(--bi-scale-4x);
@@ -1300,8 +1116,10 @@ details.bi-details {
1300
1116
 
1301
1117
  details.bi-details[data-dark="true"] {
1302
1118
  --bic-details-background: var(--bi-neutral-90);
1303
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-details-background);
1304
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
1119
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
1120
+ var(--bic-details-background);
1121
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
1122
+ var(--bic-details-background);
1305
1123
  --bic-details-border-color: var(--bi-neutral-70);
1306
1124
  --bic-details-color: var(--bi-basic-white);
1307
1125
  --bic-details-focus-shadow-color: var(--bi-neutral-95);
@@ -1396,7 +1214,8 @@ details.bi-details[open] summary > svg {
1396
1214
  }
1397
1215
 
1398
1216
  details.bi-details::details-content {
1399
- transition: height .2s ease-in-out, content-visibility .2s ease-in-out allow-discrete;
1217
+ transition: height .2s ease-in-out,
1218
+ content-visibility .2s ease-in-out allow-discrete;
1400
1219
  height: 0;
1401
1220
  overflow: clip;
1402
1221
  }
@@ -1460,10 +1279,7 @@ details.bi-details > *:not(summary) + * {
1460
1279
  margin: auto;
1461
1280
  padding: 0;
1462
1281
  position: fixed;
1463
- top: 0;
1464
- bottom: 0;
1465
- left: 0;
1466
- right: 0;
1282
+ inset: 0;
1467
1283
  overflow: auto;
1468
1284
  }
1469
1285
 
@@ -1473,16 +1289,13 @@ details.bi-details > *:not(summary) + * {
1473
1289
  }
1474
1290
 
1475
1291
  .bi-dialog[open] {
1476
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out, bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1292
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
1293
+ bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1477
1294
  display: flex;
1478
1295
  }
1479
1296
 
1480
1297
  @media (prefers-reduced-motion: reduce) {
1481
- .bi-dialog[open] {
1482
- animation: none;
1483
- }
1484
-
1485
- .bi-dialog::backdrop {
1298
+ .bi-dialog[open], .bi-dialog::backdrop {
1486
1299
  animation: none;
1487
1300
  }
1488
1301
  }
@@ -1523,15 +1336,7 @@ details.bi-details > *:not(summary) + * {
1523
1336
  display: flex;
1524
1337
  }
1525
1338
 
1526
- .bi-dialog .bi-dialog--header:not([data-no-border="true"]):not(:first-child) {
1527
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1528
- }
1529
-
1530
- .bi-dialog .bi-dialog--content:not([data-no-border="true"]):not(:first-child) {
1531
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1532
- }
1533
-
1534
- .bi-dialog .bi-dialog--footer:not([data-no-border="true"]):not(:first-child) {
1339
+ :is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
1535
1340
  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1536
1341
  }
1537
1342
 
@@ -1559,7 +1364,8 @@ body:has(.bi-dialog:modal) {
1559
1364
  --bic-drawer-max-width: 40rem;
1560
1365
  --bic-drawer-min-height: 20rem;
1561
1366
  --bic-drawer-border-radius: var(--bi-radius-medium);
1562
- transition: display var(--bic-dialog-animation-duration) allow-discrete, overlay var(--bic-dialog-animation-duration) allow-discrete;
1367
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
1368
+ overlay var(--bic-dialog-animation-duration) allow-discrete;
1563
1369
  transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1564
1370
  animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1565
1371
  }
@@ -1603,30 +1409,14 @@ body:has(.bi-dialog:modal) {
1603
1409
  border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1604
1410
  }
1605
1411
 
1606
- .bi-dialog.bi-drawer[data-anchor="left"] {
1607
- min-width: var(--bic-drawer-min-width);
1608
- max-width: var(--bic-drawer-max-width);
1609
- width: -webkit-fit-content;
1610
- width: fit-content;
1611
- height: 100dvh;
1612
- }
1613
-
1614
- .bi-dialog.bi-drawer[data-anchor="right"] {
1412
+ .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1615
1413
  min-width: var(--bic-drawer-min-width);
1616
1414
  max-width: var(--bic-drawer-max-width);
1617
- width: -webkit-fit-content;
1618
1415
  width: fit-content;
1619
1416
  height: 100dvh;
1620
1417
  }
1621
1418
 
1622
- .bi-dialog.bi-drawer[data-anchor="top"] {
1623
- min-height: var(--bic-drawer-min-height);
1624
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1625
- width: 100%;
1626
- max-width: 100dvw;
1627
- }
1628
-
1629
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1419
+ .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1630
1420
  min-height: var(--bic-drawer-min-height);
1631
1421
  max-height: calc(100dvh - var(--bi-layout-navbar-height));
1632
1422
  width: 100%;
@@ -1655,6 +1445,94 @@ body:has(.bi-dialog:modal) {
1655
1445
  }
1656
1446
  }
1657
1447
 
1448
+ .bi-popover {
1449
+ --bic-popover-arrow-size: var(--bi-scale-3x);
1450
+ --bic-popover-background: var(--bi-basic-white);
1451
+ --bic-popover-border-width: var(--bi-stroke-thin);
1452
+ --bic-popover-border-style: solid;
1453
+ --bic-popover-border-color: var(--bi-neutral-15);
1454
+ --bic-popover-color: var(--bi-neutral-90);
1455
+ --bic-popover-border-radius: var(--bi-radius-medium);
1456
+ --bic-popover-max-width: 300px;
1457
+ --bic-popover-padding: var(--bi-scale-1x);
1458
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1459
+ 0px 2px 2px -1px #26333f0a;
1460
+ }
1461
+
1462
+ .bi-popover[data-dark="true"] {
1463
+ --bic-popover-background: var(--bi-neutral-95);
1464
+ --bic-popover-border-color: var(--bi-neutral-70);
1465
+ --bic-popover-color: var(--bi-neutral-5);
1466
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1467
+ 0px 2px 2px -1px #26333f0a;
1468
+ }
1469
+
1470
+ .bi-popover {
1471
+ background: var(--bic-popover-background);
1472
+ border-radius: var(--bic-popover-border-radius);
1473
+ border-width: var(--bic-popover-border-width);
1474
+ border-style: var(--bic-popover-border-style);
1475
+ border-color: var(--bic-popover-border-color);
1476
+ box-shadow: var(--bic-popover-box-shadow);
1477
+ box-sizing: border-box;
1478
+ color: var(--bic-popover-color);
1479
+ max-width: var(--bic-popover-max-width);
1480
+ padding: var(--bic-popover-padding);
1481
+ z-index: 100000;
1482
+ display: none;
1483
+ position: fixed;
1484
+ inset: 0 auto auto 0;
1485
+ overflow: visible;
1486
+ }
1487
+
1488
+ .bi-popover[aria-hidden="false"] {
1489
+ display: block;
1490
+ }
1491
+
1492
+ .bi-popover[data-arrow="true"]:before {
1493
+ background: var(--bic-popover-background);
1494
+ border: inherit;
1495
+ box-sizing: border-box;
1496
+ content: "";
1497
+ height: var(--bic-popover-arrow-size);
1498
+ left: var(--bic-popover-arrow-x);
1499
+ top: var(--bic-popover-arrow-y);
1500
+ width: var(--bic-popover-arrow-size);
1501
+ border-top-color: #0000;
1502
+ border-left-color: #0000;
1503
+ position: absolute;
1504
+ translate: -50% -50%;
1505
+ }
1506
+
1507
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
1508
+ rotate: 45deg;
1509
+ }
1510
+
1511
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
1512
+ rotate: -45deg;
1513
+ }
1514
+
1515
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
1516
+ rotate: 135deg;
1517
+ }
1518
+
1519
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
1520
+ rotate: -135deg;
1521
+ }
1522
+
1523
+ [data-popover="inline"] {
1524
+ all: unset;
1525
+ cursor: pointer;
1526
+ text-underline-offset: .27em;
1527
+ font-size: inherit;
1528
+ -webkit-text-decoration: underline dotted;
1529
+ text-decoration: underline dotted;
1530
+ }
1531
+
1532
+ [data-popover="inline"]:not([hidden]) {
1533
+ display: inline;
1534
+ }
1535
+
1658
1536
  .bi-dropdown {
1659
1537
  --bic-dropdown-padding: var(--bi-scale-1x);
1660
1538
  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
@@ -1663,14 +1541,17 @@ body:has(.bi-dialog:modal) {
1663
1541
  --bic-dropdown-border-width: var(--bi-stroke-thin);
1664
1542
  --bic-dropdown-border-style: solid;
1665
1543
  --bic-dropdown-border-color: var(--bi-neutral-15);
1666
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1544
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1545
+ 0px 2px 2px -1px #26333f0a;
1546
+ --bic-dropdown-min-width: var(--bi-scale-64x);
1667
1547
  }
1668
1548
 
1669
1549
  .bi-dropdown[data-dark="true"] {
1670
1550
  --bic-dropdown-background: var(--bi-neutral-100);
1671
1551
  --bic-dropdown-border-color: var(--bi-neutral-90);
1672
1552
  --bic-dropdown-color: var(--bi-neutral-5);
1673
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1553
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1554
+ 0px 2px 2px -1px #26333f0a;
1674
1555
  }
1675
1556
 
1676
1557
  .bi-dropdown {
@@ -1681,7 +1562,7 @@ body:has(.bi-dialog:modal) {
1681
1562
  border-color: var(--bic-dropdown-border-color);
1682
1563
  box-shadow: var(--bic-dropdown-box-shadow);
1683
1564
  box-sizing: border-box;
1684
- min-width: var(--bi-scale-64x);
1565
+ min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
1685
1566
  padding: var(--bic-dropdown-padding);
1686
1567
  list-style: none;
1687
1568
  }
@@ -1695,30 +1576,256 @@ body:has(.bi-dialog:modal) {
1695
1576
  display: flex;
1696
1577
  }
1697
1578
 
1698
- .bi-dropdown :-webkit-any(a, button, [role="button"]) {
1579
+ .bi-dropdown :is(a, button, [role="button"]) {
1699
1580
  padding: var(--bic-dropdown-item-padding);
1700
1581
  min-height: var(--bic-dropdown-item-size);
1701
1582
  justify-content: start;
1702
1583
  width: 100%;
1703
1584
  }
1704
1585
 
1705
- .bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
1586
+ .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1706
1587
  margin-left: auto;
1707
1588
  }
1708
1589
 
1709
- .bi-dropdown :is(a, button, [role="button"]) {
1710
- padding: var(--bic-dropdown-item-padding);
1711
- min-height: var(--bic-dropdown-item-size);
1712
- justify-content: start;
1590
+ .bi-button[aria-expanded="true"] {
1591
+ box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
1592
+ }
1593
+
1594
+ :where(.bi-input) {
1595
+ margin: 0;
1596
+ }
1597
+
1598
+ .bi-input {
1599
+ --bic-input-border-color-invalid: var(--bi-alert-50);
1600
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
1601
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
1602
+ --bic-input-caret-color: var(--bi-primary-50);
1603
+ --bic-input-font-size: 1rem;
1604
+ --bic-input-padding: var(--bi-scale-3x);
1605
+ --bic-input-size: var(--bi-scale-11x);
1606
+ --bic-input-toggle-background: var(--bi-primary-50);
1607
+ --bic-input-toggle-color: var(--bi-basic-white);
1608
+ --bic-input-toggle-size: 1.125rem;
1609
+ --bic-input-background: var(--bi-basic-white);
1610
+ --bic-input-background-readonly: var(--bi-neutral-10);
1611
+ --bic-input-border-color: var(--bi-neutral-50);
1612
+ --bic-input-border-color-hover: var(--bi-neutral-50);
1613
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
1614
+ --bic-input-color-readonly: var(--bi-neutral-95);
1615
+ --bic-input-color: var(--bi-neutral-95);
1616
+ --bic-input-disabled-color: var(--bi-neutral-50);
1617
+ --bic-input-placeholder-color: var(--bi-neutral-60);
1618
+ --bic-input-focus-outline-color: var(--bi-primary-50);
1619
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
1620
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1621
+ }
1622
+
1623
+ .bi-input[data-dark="true"] {
1624
+ --bic-input-background: var(--bi-neutral-95);
1625
+ --bic-input-background-readonly: var(--bi-neutral-50);
1626
+ --bic-input-border-color-hover: var(--bi-neutral-25);
1627
+ --bic-input-color-readonly: var(--bi-basic-white);
1628
+ --bic-input-color: var(--bi-basic-white);
1629
+ --bic-input-disabled-color: var(--bi-neutral-40);
1630
+ --bic-input-placeholder-color: var(--bi-neutral-30);
1631
+ --bic-input-focus-outline-color: var(--bi-primary-30);
1632
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
1633
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1634
+ }
1635
+
1636
+ .bi-input {
1637
+ appearance: none;
1638
+ background: var(--bic-input-background);
1639
+ border-radius: var(--bi-radius-medium);
1640
+ box-shadow: var(--bic-input-box-shadow);
1641
+ box-sizing: border-box;
1642
+ color: var(--bic-input-color);
1643
+ font-family: inherit;
1644
+ font-size: var(--bic-input-font-size);
1645
+ height: var(--bic-input-size);
1646
+ min-width: 0;
1647
+ max-width: 100%;
1648
+ padding: var(--bic-input-padding);
1649
+ vertical-align: middle;
1650
+ caret-color: var(--bic-input-caret-color);
1651
+ border: none;
1652
+ line-height: 1;
1653
+ position: relative;
1654
+ }
1655
+
1656
+ .bi-input[data-size="large"] {
1657
+ --bic-input-size: var(--bi-scale-14x);
1658
+ --bic-input-font-size: 1.25rem;
1659
+ }
1660
+
1661
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
1662
+ box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
1663
+ }
1664
+
1665
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
1666
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
1667
+ }
1668
+
1669
+ .bi-input:focus-visible {
1670
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1671
+ outline-offset: 0;
1672
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1673
+ 0px 0px 10px 0px #0000000d);
1674
+ }
1675
+
1676
+ .bi-input:focus-visible * {
1677
+ --_bi--focus: ;
1678
+ }
1679
+
1680
+ .bi-input::placeholder {
1681
+ color: var(--bic-input-placeholder-color);
1682
+ }
1683
+
1684
+ .bi-input:not([size], [cols]) {
1713
1685
  width: 100%;
1714
1686
  }
1715
1687
 
1716
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1717
- margin-left: auto;
1688
+ .bi-input:disabled, .bi-input[aria-disabled="true"] {
1689
+ cursor: not-allowed;
1718
1690
  }
1719
1691
 
1720
- .bi-button[aria-expanded="true"] {
1721
- box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
1692
+ .bi-input[aria-invalid="true"] {
1693
+ --bic-input-border-color: var(--bic-input-border-color-invalid);
1694
+ }
1695
+
1696
+ .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
1697
+ background: var(--bic-input-background-readonly);
1698
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
1699
+ color: var(--bic-input-color-readonly);
1700
+ }
1701
+
1702
+ .bi-input:is(textarea) {
1703
+ height: auto;
1704
+ min-height: calc(var(--bic-input-size) * 2);
1705
+ resize: vertical;
1706
+ }
1707
+
1708
+ .bi-input:is(textarea):not([rows]) {
1709
+ field-sizing: content;
1710
+ }
1711
+
1712
+ .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
1713
+ cursor: pointer;
1714
+ }
1715
+
1716
+ .bi-input:is(select) {
1717
+ background-image: var(--bic-input-select-chevron);
1718
+ background-position: calc(100% - .5em);
1719
+ background-repeat: no-repeat;
1720
+ background-size: 1.5em;
1721
+ }
1722
+
1723
+ .bi-input[type="checkbox"], .bi-input[type="radio"] {
1724
+ padding: var(--bi-scale-0-50x);
1725
+ line-height: inherit;
1726
+ height: var(--bic-input-toggle-size);
1727
+ width: var(--bic-input-toggle-size);
1728
+ box-shadow: none;
1729
+ border-width: var(--bi-stroke-medium);
1730
+ border-style: solid;
1731
+ border-color: var(--bic-input-border-color);
1732
+ background: none;
1733
+ flex-shrink: 0;
1734
+ }
1735
+
1736
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
1737
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
1738
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1739
+ outline-offset: var(--_bi--focus, 3px);
1740
+ }
1741
+
1742
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
1743
+ --_bi--focus: ;
1744
+ }
1745
+
1746
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
1747
+ cursor: pointer;
1748
+ }
1749
+
1750
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
1751
+ border-radius: var(--bi-radius-full);
1752
+ }
1753
+
1754
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
1755
+ content: "";
1756
+ background-color: var(--bic-input-toggle-background);
1757
+ border-radius: 100%;
1758
+ width: 0;
1759
+ height: 0;
1760
+ transition: width .1s ease-in-out, height .1s ease-in-out;
1761
+ display: block;
1762
+ position: absolute;
1763
+ top: 50%;
1764
+ left: 50%;
1765
+ transform: translate(-50%, -50%);
1766
+ }
1767
+
1768
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
1769
+ --bic-input-border-color: var(--bic-input-toggle-background);
1770
+ }
1771
+
1772
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
1773
+ width: 12px;
1774
+ height: 12px;
1775
+ }
1776
+
1777
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
1778
+ border-radius: var(--bi-radius-small);
1779
+ place-content: center;
1780
+ display: grid;
1781
+ }
1782
+
1783
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
1784
+ content: "";
1785
+ width: .7em;
1786
+ height: .7em;
1787
+ box-shadow: inset 1em 1em var(--bic-input-toggle-color);
1788
+ transform-origin: center;
1789
+ clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
1790
+ transition: transform .2s ease-in-out;
1791
+ transform: scale(0);
1792
+ }
1793
+
1794
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
1795
+ background: var(--bic-input-toggle-background);
1796
+ --bic-input-border-color: var(--bic-input-toggle-background);
1797
+ }
1798
+
1799
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
1800
+ transform: scale(1);
1801
+ }
1802
+
1803
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
1804
+ clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
1805
+ }
1806
+
1807
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
1808
+ --_bic-input-circle-position-x: var(--bi-scale-0-50x);
1809
+ background: var(--bi-neutral-50);
1810
+ }
1811
+
1812
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
1813
+ --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
1814
+ background: var(--bic-input-toggle-background);
1815
+ --bic-input-border-color: var(--bic-input-toggle-background);
1816
+ }
1817
+
1818
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
1819
+ background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
1820
+ background-origin: content-box;
1821
+ background-position: var(--_bic-input-circle-position-x);
1822
+ background-repeat: no-repeat;
1823
+ background-size: calc(var(--bic-input-toggle-size)) 100%;
1824
+ border-radius: var(--bi-radius-full);
1825
+ width: var(--bi-scale-11x);
1826
+ height: var(--bi-scale-6x);
1827
+ padding-inline: 0;
1828
+ transition: background-position .2s;
1722
1829
  }
1723
1830
 
1724
1831
  .bi-field {
@@ -1730,6 +1837,7 @@ body:has(.bi-dialog:modal) {
1730
1837
  --bic-field-affix-color: var(--bi-neutral-60);
1731
1838
  --bic-field-background: var(--bi-basic-white);
1732
1839
  --bic-field-background-hover: var(--bi-states-hover-dark);
1840
+ --bic-field-background-press: var(--bi-states-press-dark);
1733
1841
  --bic-field-background-readonly: var(--bi-neutral-10);
1734
1842
  --bic-field-border-color: var(--bi-neutral-50);
1735
1843
  --bic-field-border-color-hover: var(--bi-neutral-50);
@@ -1746,6 +1854,7 @@ body:has(.bi-dialog:modal) {
1746
1854
  --bic-field-affix-color: var(--bi-neutral-30);
1747
1855
  --bic-field-background: var(--bi-neutral-95);
1748
1856
  --bic-field-background-hover: var(--bi-states-hover-light);
1857
+ --bic-field-background-press: var(--bi-states-press-light);
1749
1858
  --bic-field-background-readonly: var(--bi-neutral-50);
1750
1859
  --bic-field-border-color-hover: var(--bi-neutral-25);
1751
1860
  --bic-field-disabled-color: var(--bi-neutral-40);
@@ -1757,8 +1866,7 @@ body:has(.bi-dialog:modal) {
1757
1866
  }
1758
1867
 
1759
1868
  .bi-field > * {
1760
- margin-top: 0;
1761
- margin-bottom: 0;
1869
+ margin-block: 0;
1762
1870
  }
1763
1871
 
1764
1872
  .bi-field > * + * {
@@ -1793,32 +1901,43 @@ body:has(.bi-dialog:modal) {
1793
1901
  width: 100%;
1794
1902
  }
1795
1903
 
1796
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
1904
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
1797
1905
  border-radius: var(--bi-radius-medium);
1798
- grid-template-areas: "input content";
1799
- grid-template-columns: var(--bi-scale-5x) 1fr;
1800
1906
  gap: 0 var(--bi-scale-3x);
1801
- width: -webkit-fit-content;
1802
1907
  width: fit-content;
1803
1908
  padding: var(--bi-scale-2x) var(--bi-scale-3x);
1909
+ grid-template-columns: auto 1fr;
1910
+ grid-template-areas: "input content";
1804
1911
  align-items: center;
1805
1912
  }
1806
1913
 
1807
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):not([hidden]) {
1914
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
1808
1915
  display: grid;
1809
1916
  }
1810
1917
 
1811
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
1918
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
1812
1919
  width: 100%;
1813
1920
  }
1814
1921
 
1815
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) > * {
1922
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
1923
+ border-radius: var(--bi-scale-24x);
1924
+ padding: var(--bi-scale-1x) var(--bi-scale-2x);
1925
+ }
1926
+
1927
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
1928
+ padding-inline-end: var(--bi-scale-4x);
1929
+ }
1930
+
1931
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
1932
+ padding-inline-start: var(--bi-scale-4x);
1933
+ }
1934
+
1935
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
1816
1936
  grid-column: content;
1817
- margin-top: 0;
1818
- margin-bottom: 0;
1937
+ margin-block: 0;
1819
1938
  }
1820
1939
 
1821
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
1940
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
1822
1941
  margin: var(--bi-scale-0-50x) 0;
1823
1942
  -webkit-user-select: none;
1824
1943
  user-select: none;
@@ -1826,16 +1945,12 @@ body:has(.bi-dialog:modal) {
1826
1945
  line-height: 1.5;
1827
1946
  }
1828
1947
 
1829
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
1948
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
1830
1949
  margin: var(--bi-scale-1x) auto;
1831
1950
  grid-area: 1 / input;
1832
1951
  align-self: flex-start;
1833
1952
  }
1834
1953
 
1835
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1836
- cursor: pointer;
1837
- }
1838
-
1839
1954
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1840
1955
  cursor: pointer;
1841
1956
  }
@@ -1852,6 +1967,14 @@ body:has(.bi-dialog:modal) {
1852
1967
  --_bi--hover: ;
1853
1968
  }
1854
1969
 
1970
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
1971
+ background: var(--_bi--hover, var(--bic-field-background-press));
1972
+ }
1973
+
1974
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
1975
+ --_bi--hover: ;
1976
+ }
1977
+
1855
1978
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1856
1979
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1857
1980
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
@@ -1863,107 +1986,30 @@ body:has(.bi-dialog:modal) {
1863
1986
  }
1864
1987
 
1865
1988
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
1989
+ grid-template-columns: 1fr auto;
1866
1990
  grid-template-areas: "content input";
1867
- grid-template-columns: 1fr var(--bi-scale-5x);
1868
- width: auto;
1869
1991
  }
1870
1992
 
1871
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
1993
+ .bi-field .bi-field--affixes {
1994
+ background: var(--bic-field-background);
1872
1995
  border-radius: var(--bi-radius-medium);
1873
- grid-template-areas: "input content";
1874
- grid-template-columns: var(--bi-scale-5x) 1fr;
1875
- gap: 0 var(--bi-scale-3x);
1876
- width: -webkit-fit-content;
1877
- width: fit-content;
1878
- padding: var(--bi-scale-2x) var(--bi-scale-3x);
1879
- align-items: center;
1996
+ box-sizing: border-box;
1997
+ white-space: nowrap;
1998
+ max-width: 100%;
1999
+ box-shadow: var(--bic-field-box-shadow);
1880
2000
  }
1881
2001
 
1882
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
1883
- display: grid;
2002
+ .bi-field .bi-field--affixes .bi-input {
2003
+ --bic-input-background: ;
2004
+ --bic-input-box-shadow: ;
2005
+ flex: auto;
1884
2006
  }
1885
2007
 
1886
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
1887
- width: 100%;
1888
- }
1889
-
1890
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
1891
- grid-column: content;
1892
- margin-top: 0;
1893
- margin-bottom: 0;
1894
- }
1895
-
1896
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
1897
- margin: var(--bi-scale-0-50x) 0;
1898
- -webkit-user-select: none;
1899
- user-select: none;
1900
- font-size: 1rem;
1901
- line-height: 1.5;
1902
- }
1903
-
1904
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
1905
- margin: var(--bi-scale-1x) auto;
1906
- grid-area: 1 / input;
1907
- align-self: flex-start;
1908
- }
1909
-
1910
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1911
- cursor: pointer;
1912
- }
1913
-
1914
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1915
- cursor: pointer;
1916
- }
1917
-
1918
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
1919
- gap: 0;
1920
- }
1921
-
1922
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
1923
- background: var(--_bi--hover, var(--bic-field-background-hover));
1924
- }
1925
-
1926
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
1927
- --_bi--hover: ;
1928
- }
1929
-
1930
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1931
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1932
- outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1933
- outline-offset: var(--_bi--focus, 2px);
1934
- }
1935
-
1936
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
1937
- --_bi--focus: ;
1938
- }
1939
-
1940
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
1941
- grid-template-areas: "content input";
1942
- grid-template-columns: 1fr var(--bi-scale-5x);
1943
- width: auto;
1944
- }
1945
-
1946
- .bi-field .bi-field--affixes {
1947
- background: var(--bic-field-background);
1948
- border-radius: var(--bi-radius-medium);
1949
- box-sizing: border-box;
1950
- white-space: nowrap;
1951
- max-width: 100%;
1952
- box-shadow: var(--bic-field-box-shadow);
1953
- }
1954
-
1955
- .bi-field .bi-field--affixes .bi-input {
1956
- --bic-input-background: ;
1957
- --bic-input-box-shadow: ;
1958
- flex: auto;
1959
- }
1960
-
1961
- .bi-field .bi-field--affixes:not([hidden]) {
1962
- display: flex;
2008
+ .bi-field .bi-field--affixes:not([hidden]) {
2009
+ display: flex;
1963
2010
  }
1964
2011
 
1965
2012
  .bi-field .bi-field--affixes:has(.bi-input[size]) {
1966
- width: -webkit-fit-content;
1967
2013
  width: fit-content;
1968
2014
  }
1969
2015
 
@@ -1978,7 +2024,8 @@ body:has(.bi-dialog:modal) {
1978
2024
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1979
2025
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1980
2026
  outline-offset: 0;
1981
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2027
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
2028
+ 0px 0px 10px 0px #0000000d);
1982
2029
  }
1983
2030
 
1984
2031
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -1996,46 +2043,18 @@ body:has(.bi-dialog:modal) {
1996
2043
  display: flex;
1997
2044
  }
1998
2045
 
1999
- .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2000
- border-top-left-radius: inherit;
2001
- border-bottom-left-radius: inherit;
2002
- border-right: 0;
2003
- padding-right: 0;
2046
+ .bi-field .bi-field--affixes .bi-field--affix:first-child {
2047
+ border-inline-end: 0;
2048
+ border-start-start-radius: inherit;
2049
+ border-end-start-radius: inherit;
2050
+ padding-inline-end: 0;
2004
2051
  }
2005
2052
 
2006
- .bi-field .bi-field--affixes .bi-field--affix:first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2007
- border-top-right-radius: inherit;
2008
- border-bottom-right-radius: inherit;
2009
- border-left: 0;
2010
- padding-left: 0;
2011
- }
2012
-
2013
- .bi-field .bi-field--affixes .bi-field--affix:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2014
- border-top-right-radius: inherit;
2015
- border-bottom-right-radius: inherit;
2016
- border-left: 0;
2017
- padding-left: 0;
2018
- }
2019
-
2020
- .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2021
- border-top-right-radius: inherit;
2022
- border-bottom-right-radius: inherit;
2023
- border-left: 0;
2024
- padding-left: 0;
2025
- }
2026
-
2027
- .bi-field .bi-field--affixes .bi-field--affix:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2028
- border-top-left-radius: inherit;
2029
- border-bottom-left-radius: inherit;
2030
- border-right: 0;
2031
- padding-right: 0;
2032
- }
2033
-
2034
- .bi-field .bi-field--affixes .bi-field--affix:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2035
- border-top-left-radius: inherit;
2036
- border-bottom-left-radius: inherit;
2037
- border-right: 0;
2038
- padding-right: 0;
2053
+ .bi-field .bi-field--affixes .bi-field--affix:last-child {
2054
+ border-inline-start: 0;
2055
+ border-start-end-radius: inherit;
2056
+ border-end-end-radius: inherit;
2057
+ padding-inline-start: 0;
2039
2058
  }
2040
2059
 
2041
2060
  .bi-fieldset {
@@ -2062,7 +2081,7 @@ body:has(.bi-dialog:modal) {
2062
2081
  }
2063
2082
 
2064
2083
  .bi-fieldset > * + * {
2065
- margin-top: var(--bi-scale-1x);
2084
+ margin-block-start: var(--bi-scale-1x);
2066
2085
  }
2067
2086
 
2068
2087
  .bi-fieldset > legend + p {
@@ -2074,18 +2093,16 @@ body:has(.bi-dialog:modal) {
2074
2093
  line-height: 1.15;
2075
2094
  }
2076
2095
 
2077
- .bi-fieldset:disabled > legend {
2078
- opacity: var(--ds-opacity-disabled);
2079
- }
2080
-
2081
- .bi-fieldset:disabled > legend + p {
2096
+ .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
2082
2097
  opacity: var(--ds-opacity-disabled);
2083
2098
  }
2084
2099
 
2085
2100
  .bi-filter-group {
2086
2101
  --bic-filter-group-background: var(--bi-basic-white);
2087
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
2088
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
2102
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
2103
+ var(--bic-filter-group-background);
2104
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
2105
+ var(--bic-filter-group-background);
2089
2106
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
2090
2107
  --bic-filter-group-border-color: var(--bi-neutral-15);
2091
2108
  --bic-filter-group-text-color: var(--bi-neutral-90);
@@ -2095,8 +2112,10 @@ body:has(.bi-dialog:modal) {
2095
2112
 
2096
2113
  .bi-filter-group[data-dark="true"] {
2097
2114
  --bic-filter-group-background: var(--bi-neutral-90);
2098
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
2099
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
2115
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
2116
+ var(--bic-filter-group-background);
2117
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
2118
+ var(--bic-filter-group-background);
2100
2119
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
2101
2120
  --bic-filter-group-border-color: var(--bi-neutral-70);
2102
2121
  --bic-filter-group-text-color: var(--bi-basic-white);
@@ -2115,9 +2134,9 @@ body:has(.bi-dialog:modal) {
2115
2134
  height: var(--bi-scale-12x);
2116
2135
  color: var(--bic-filter-group-text-color);
2117
2136
  align-items: center;
2118
- gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2137
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2119
2138
  width: 100%;
2120
- padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2139
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2121
2140
  background: var(--bic-filter-group-background);
2122
2141
  cursor: pointer;
2123
2142
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2226,7 +2245,7 @@ body:has(.bi-dialog:modal) {
2226
2245
  display: flex;
2227
2246
  }
2228
2247
 
2229
- @media not (min-width: 768px) {
2248
+ @media (width < 768px) {
2230
2249
  .bi-footer .bi-footer--links-container {
2231
2250
  flex-direction: column;
2232
2251
  }
@@ -2245,7 +2264,7 @@ body:has(.bi-dialog:modal) {
2245
2264
  display: flex;
2246
2265
  }
2247
2266
 
2248
- @media not (min-width: 768px) {
2267
+ @media (width < 768px) {
2249
2268
  .bi-footer .bi-footer--links-container .bi-footer--links {
2250
2269
  flex-direction: column;
2251
2270
  }
@@ -2256,7 +2275,7 @@ body:has(.bi-dialog:modal) {
2256
2275
  font-weight: 300;
2257
2276
  }
2258
2277
 
2259
- @media not (min-width: 768px) {
2278
+ @media (width < 768px) {
2260
2279
  .bi-footer .bi-footer--links-container .bi-footer--links > p {
2261
2280
  margin: var(--bi-scale-3x) 0;
2262
2281
  }
@@ -2272,7 +2291,7 @@ body:has(.bi-dialog:modal) {
2272
2291
  display: flex;
2273
2292
  }
2274
2293
 
2275
- @media not (min-width: 768px) {
2294
+ @media (width < 768px) {
2276
2295
  .bi-footer .bi-footer--links-container .bi-footer--links > div {
2277
2296
  flex-direction: column;
2278
2297
  }
@@ -2287,482 +2306,114 @@ body:has(.bi-dialog:modal) {
2287
2306
  display: flex;
2288
2307
  }
2289
2308
 
2290
- @media not (min-width: 600px) {
2291
- .bi-footer .bi-footer--accreditations {
2292
- gap: var(--bi-scale-2x) var(--bi-scale-1x);
2293
- }
2294
- }
2295
-
2296
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2297
- background-position: center;
2298
- background-repeat: no-repeat;
2299
- background-size: contain;
2300
- height: 58px;
2301
- display: block;
2302
- }
2303
-
2304
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2305
- background-position: center;
2306
- background-repeat: no-repeat;
2307
- background-size: contain;
2308
- height: 58px;
2309
- display: block;
2310
- }
2311
-
2312
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2313
- background-position: center;
2314
- background-repeat: no-repeat;
2315
- background-size: contain;
2316
- height: 58px;
2317
- display: block;
2318
- }
2319
-
2320
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2321
- background-image: url("./assets/accreditations/aacsb.svg");
2322
- width: 127px;
2323
- }
2324
-
2325
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2326
- background-image: url("./assets/accreditations/aacsb-neg.svg");
2327
- }
2328
-
2329
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2330
- background-image: url("./assets/accreditations/amba.svg");
2331
- width: 122px;
2332
- }
2333
-
2334
- .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2335
- background-image: url("./assets/accreditations/amba-neg.svg");
2336
- }
2337
-
2338
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2339
- background-image: url("./assets/accreditations/equis.svg");
2340
- width: 104px;
2341
- }
2342
-
2343
- .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2344
- background-image: url("./assets/accreditations/equis-neg.svg");
2345
- }
2346
-
2347
- .bi-footer .bi-footer--socials {
2348
- justify-content: center;
2349
- align-items: center;
2350
- gap: var(--bi-scale-8x);
2351
- flex-wrap: wrap;
2352
- display: flex;
2353
- }
2354
-
2355
- @media not (min-width: 600px) {
2356
- .bi-footer .bi-footer--socials {
2357
- gap: var(--bi-scale-2x);
2358
- }
2359
- }
2360
-
2361
- .bi-footer .bi-footer--copyright {
2362
- text-align: center;
2363
- margin: 0;
2364
- font-family: museo-slab, serif;
2365
- font-size: 1rem;
2366
- font-weight: 500;
2367
- line-height: 1.5;
2368
- }
2369
-
2370
- svg {
2371
- --bic-icon-size: inherit;
2372
- font-size: var(--bic-icon-size);
2373
- display: inline-block;
2374
- }
2375
-
2376
- svg[data-size="2xl"] {
2377
- --bic-icon-size: var(--bi-icon-2xl) !important;
2378
- }
2379
-
2380
- svg[data-size="xl"] {
2381
- --bic-icon-size: var(--bi-icon-xl) !important;
2382
- }
2383
-
2384
- svg[data-size="large"] {
2385
- --bic-icon-size: var(--bi-icon-large) !important;
2386
- }
2387
-
2388
- svg[data-size="medium"] {
2389
- --bic-icon-size: var(--bi-icon-medium) !important;
2390
- }
2391
-
2392
- svg[data-size="small"] {
2393
- --bic-icon-size: var(--bi-icon-small) !important;
2394
- }
2395
-
2396
- svg[data-color="inherit"] {
2397
- color: inherit;
2398
- }
2399
-
2400
- svg[data-color="primary"] {
2401
- color: #01417b;
2402
- }
2403
-
2404
- svg[data-color="gray"] {
2405
- color: #1c1b1b;
2406
- }
2407
-
2408
- svg[data-color="black"] {
2409
- color: var(--bi-basic-key);
2410
- }
2411
-
2412
- svg[data-color="white"] {
2413
- color: var(--bi-basic-white);
2414
- }
2415
-
2416
- :where(.bi-input) {
2417
- margin: 0;
2418
- }
2419
-
2420
- .bi-input {
2421
- --bic-input-border-color-invalid: var(--bi-alert-50);
2422
- --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2423
- --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2424
- --bic-input-caret-color: var(--bi-primary-50);
2425
- --bic-input-font-size: 1rem;
2426
- --bic-input-padding: var(--bi-scale-3x);
2427
- --bic-input-size: var(--bi-scale-11x);
2428
- --bic-input-toggle-background: var(--bi-primary-50);
2429
- --bic-input-toggle-color: var(--bi-basic-white);
2430
- --bic-input-toggle-size: 1.125rem;
2431
- --bic-input-background: var(--bi-basic-white);
2432
- --bic-input-background-readonly: var(--bi-neutral-10);
2433
- --bic-input-border-color: var(--bi-neutral-50);
2434
- --bic-input-border-color-hover: var(--bi-neutral-50);
2435
- --bic-input-border-color-readonly: var(--bi-neutral-50);
2436
- --bic-input-color-readonly: var(--bi-neutral-95);
2437
- --bic-input-color: var(--bi-neutral-95);
2438
- --bic-input-disabled-color: var(--bi-neutral-50);
2439
- --bic-input-placeholder-color: var(--bi-neutral-60);
2440
- --bic-input-focus-outline-color: var(--bi-primary-50);
2441
- --bic-input-focus-shadow-color: var(--bi-basic-white);
2442
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2443
- }
2444
-
2445
- .bi-input[data-dark="true"] {
2446
- --bic-input-background: var(--bi-neutral-95);
2447
- --bic-input-background-readonly: var(--bi-neutral-50);
2448
- --bic-input-border-color-hover: var(--bi-neutral-25);
2449
- --bic-input-color-readonly: var(--bi-basic-white);
2450
- --bic-input-color: var(--bi-basic-white);
2451
- --bic-input-disabled-color: var(--bi-neutral-40);
2452
- --bic-input-placeholder-color: var(--bi-neutral-30);
2453
- --bic-input-focus-outline-color: var(--bi-primary-30);
2454
- --bic-input-focus-shadow-color: var(--bi-neutral-95);
2455
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2456
- }
2457
-
2458
- .bi-input {
2459
- -webkit-appearance: none;
2460
- appearance: none;
2461
- background: var(--bic-input-background);
2462
- border-radius: var(--bi-radius-medium);
2463
- box-shadow: var(--bic-input-box-shadow);
2464
- box-sizing: border-box;
2465
- color: var(--bic-input-color);
2466
- font-family: inherit;
2467
- font-size: var(--bic-input-font-size);
2468
- height: var(--bic-input-size);
2469
- min-width: 0;
2470
- max-width: 100%;
2471
- padding: var(--bic-input-padding);
2472
- vertical-align: middle;
2473
- caret-color: var(--bic-input-caret-color);
2474
- border: none;
2475
- line-height: 1;
2476
- position: relative;
2477
- }
2478
-
2479
- .bi-input[data-size="large"] {
2480
- --bic-input-size: var(--bi-scale-14x);
2481
- --bic-input-font-size: 1.25rem;
2482
- }
2483
-
2484
- .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
2485
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
2486
- }
2487
-
2488
- .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2489
- --bic-input-border-color: var(--bic-input-focus-outline-color);
2490
- }
2491
-
2492
- .bi-input:focus-visible {
2493
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2494
- outline-offset: 0;
2495
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2496
- }
2497
-
2498
- .bi-input:focus-visible * {
2499
- --_bi--focus: ;
2500
- }
2501
-
2502
- .bi-input::placeholder {
2503
- color: var(--bic-input-placeholder-color);
2504
- }
2505
-
2506
- .bi-input:not([size], [cols]) {
2507
- width: 100%;
2508
- }
2509
-
2510
- .bi-input:disabled {
2511
- cursor: not-allowed;
2512
- }
2513
-
2514
- .bi-input[aria-disabled="true"] {
2515
- cursor: not-allowed;
2516
- }
2517
-
2518
- .bi-input[aria-invalid="true"] {
2519
- --bic-input-border-color: var(--bic-input-border-color-invalid);
2520
- }
2521
-
2522
- .bi-input[readonly] {
2523
- background: var(--bic-input-background-readonly);
2524
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2525
- color: var(--bic-input-color-readonly);
2526
- }
2527
-
2528
- .bi-input:disabled {
2529
- background: var(--bic-input-background-readonly);
2530
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2531
- color: var(--bic-input-color-readonly);
2532
- }
2533
-
2534
- .bi-input[aria-disabled="true"] {
2535
- background: var(--bic-input-background-readonly);
2536
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2537
- color: var(--bic-input-color-readonly);
2538
- }
2539
-
2540
- .bi-input:-webkit-any(textarea) {
2541
- height: auto;
2542
- min-height: calc(var(--bic-input-size) * 2);
2543
- resize: vertical;
2544
- }
2545
-
2546
- .bi-input:-webkit-any(textarea):not([rows]) {
2547
- field-sizing: content;
2548
- }
2549
-
2550
- .bi-input:is(textarea) {
2551
- height: auto;
2552
- min-height: calc(var(--bic-input-size) * 2);
2553
- resize: vertical;
2554
- }
2555
-
2556
- .bi-input:is(textarea):not([rows]) {
2557
- field-sizing: content;
2558
- }
2559
-
2560
- .bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
2561
- cursor: pointer;
2562
- }
2563
-
2564
- .bi-input:-webkit-any(select) {
2565
- background-image: var(--bic-input-select-chevron);
2566
- background-position: calc(100% - .5em);
2567
- background-repeat: no-repeat;
2568
- background-size: 1.5em;
2569
- }
2570
-
2571
- .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
2572
- cursor: pointer;
2573
- }
2574
-
2575
- .bi-input:is(select) {
2576
- background-image: var(--bic-input-select-chevron);
2577
- background-position: calc(100% - .5em);
2578
- background-repeat: no-repeat;
2579
- background-size: 1.5em;
2580
- }
2581
-
2582
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2583
- padding: var(--bi-scale-0-50x);
2584
- line-height: inherit;
2585
- height: var(--bic-input-toggle-size);
2586
- width: var(--bic-input-toggle-size);
2587
- box-shadow: none;
2588
- border-width: var(--bi-stroke-medium);
2589
- border-style: solid;
2590
- border-color: var(--bic-input-border-color);
2591
- background: none;
2592
- flex-shrink: 0;
2593
- }
2594
-
2595
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2596
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2597
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2598
- outline-offset: var(--_bi--focus, 3px);
2599
- }
2600
-
2601
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2602
- --_bi--focus: ;
2603
- }
2604
-
2605
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2606
- cursor: pointer;
2607
- }
2608
-
2609
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2610
- border-radius: var(--bi-radius-full);
2611
- }
2612
-
2613
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
2614
- content: "";
2615
- background-color: var(--bic-input-toggle-background);
2616
- border-radius: 100%;
2617
- width: 0;
2618
- height: 0;
2619
- transition: width .1s ease-in-out, height .1s ease-in-out;
2620
- display: block;
2621
- position: absolute;
2622
- top: 50%;
2623
- left: 50%;
2624
- transform: translate(-50%, -50%);
2625
- }
2626
-
2627
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2628
- --bic-input-border-color: var(--bic-input-toggle-background);
2629
- }
2630
-
2631
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2632
- width: 12px;
2633
- height: 12px;
2634
- }
2635
-
2636
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2637
- border-radius: var(--bi-radius-small);
2638
- place-content: center;
2639
- display: grid;
2640
- }
2641
-
2642
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
2643
- content: "";
2644
- width: .7em;
2645
- height: .7em;
2646
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2647
- transform-origin: center;
2648
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2649
- transition: transform .2s ease-in-out;
2650
- transform: scale(0);
2309
+ @media (width < 600px) {
2310
+ .bi-footer .bi-footer--accreditations {
2311
+ gap: var(--bi-scale-2x) var(--bi-scale-1x);
2312
+ }
2651
2313
  }
2652
2314
 
2653
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
2654
- background: var(--bic-input-toggle-background);
2655
- --bic-input-border-color: var(--bic-input-toggle-background);
2315
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2316
+ background-position: center;
2317
+ background-repeat: no-repeat;
2318
+ background-size: contain;
2319
+ height: 58px;
2320
+ display: block;
2656
2321
  }
2657
2322
 
2658
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2659
- transform: scale(1);
2323
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2324
+ background-image: url("./assets/accreditations/aacsb.svg");
2325
+ width: 127px;
2660
2326
  }
2661
2327
 
2662
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
2663
- background: var(--bic-input-toggle-background);
2664
- --bic-input-border-color: var(--bic-input-toggle-background);
2328
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2329
+ background-image: url("./assets/accreditations/aacsb-neg.svg");
2665
2330
  }
2666
2331
 
2667
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2668
- transform: scale(1);
2332
+ .bi-footer .bi-footer--accreditations .bi-footer--amba {
2333
+ background-image: url("./assets/accreditations/amba.svg");
2334
+ width: 122px;
2669
2335
  }
2670
2336
 
2671
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2672
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2337
+ .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2338
+ background-image: url("./assets/accreditations/amba-neg.svg");
2673
2339
  }
2674
2340
 
2675
- .bi-input:is([type="checkbox"], [type="radio"]) {
2676
- padding: var(--bi-scale-0-50x);
2677
- line-height: inherit;
2678
- height: var(--bic-input-toggle-size);
2679
- width: var(--bic-input-toggle-size);
2680
- box-shadow: none;
2681
- border-width: var(--bi-stroke-medium);
2682
- border-style: solid;
2683
- border-color: var(--bic-input-border-color);
2684
- background: none;
2685
- flex-shrink: 0;
2341
+ .bi-footer .bi-footer--accreditations .bi-footer--equis {
2342
+ background-image: url("./assets/accreditations/equis.svg");
2343
+ width: 104px;
2686
2344
  }
2687
2345
 
2688
- .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2689
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2690
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2691
- outline-offset: var(--_bi--focus, 3px);
2346
+ .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2347
+ background-image: url("./assets/accreditations/equis-neg.svg");
2692
2348
  }
2693
2349
 
2694
- .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2695
- --_bi--focus: ;
2350
+ .bi-footer .bi-footer--socials {
2351
+ justify-content: center;
2352
+ align-items: center;
2353
+ gap: var(--bi-scale-8x);
2354
+ flex-wrap: wrap;
2355
+ display: flex;
2696
2356
  }
2697
2357
 
2698
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2699
- cursor: pointer;
2358
+ @media (width < 600px) {
2359
+ .bi-footer .bi-footer--socials {
2360
+ gap: var(--bi-scale-2x);
2361
+ }
2700
2362
  }
2701
2363
 
2702
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2703
- border-radius: var(--bi-radius-full);
2364
+ .bi-footer .bi-footer--copyright {
2365
+ text-align: center;
2366
+ margin: 0;
2367
+ font-family: museo-slab, serif;
2368
+ font-size: 1rem;
2369
+ font-weight: 500;
2370
+ line-height: 1.5;
2704
2371
  }
2705
2372
 
2706
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
2707
- content: "";
2708
- background-color: var(--bic-input-toggle-background);
2709
- border-radius: 100%;
2710
- width: 0;
2711
- height: 0;
2712
- transition: width .1s ease-in-out, height .1s ease-in-out;
2713
- display: block;
2714
- position: absolute;
2715
- top: 50%;
2716
- left: 50%;
2717
- transform: translate(-50%, -50%);
2373
+ svg {
2374
+ --bic-icon-size: inherit;
2375
+ font-size: var(--bic-icon-size);
2376
+ display: inline-block;
2718
2377
  }
2719
2378
 
2720
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2721
- --bic-input-border-color: var(--bic-input-toggle-background);
2379
+ svg[data-size="2xl"] {
2380
+ --bic-icon-size: var(--bi-icon-2xl) !important;
2722
2381
  }
2723
2382
 
2724
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2725
- width: 12px;
2726
- height: 12px;
2383
+ svg[data-size="xl"] {
2384
+ --bic-icon-size: var(--bi-icon-xl) !important;
2727
2385
  }
2728
2386
 
2729
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2730
- border-radius: var(--bi-radius-small);
2731
- place-content: center;
2732
- display: grid;
2387
+ svg[data-size="large"] {
2388
+ --bic-icon-size: var(--bi-icon-large) !important;
2733
2389
  }
2734
2390
 
2735
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
2736
- content: "";
2737
- width: .7em;
2738
- height: .7em;
2739
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2740
- transform-origin: center;
2741
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2742
- transition: transform .2s ease-in-out;
2743
- transform: scale(0);
2391
+ svg[data-size="medium"] {
2392
+ --bic-icon-size: var(--bi-icon-medium) !important;
2744
2393
  }
2745
2394
 
2746
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
2747
- background: var(--bic-input-toggle-background);
2748
- --bic-input-border-color: var(--bic-input-toggle-background);
2395
+ svg[data-size="small"] {
2396
+ --bic-icon-size: var(--bi-icon-small) !important;
2749
2397
  }
2750
2398
 
2751
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2752
- transform: scale(1);
2399
+ svg[data-color="inherit"] {
2400
+ color: inherit;
2753
2401
  }
2754
2402
 
2755
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
2756
- background: var(--bic-input-toggle-background);
2757
- --bic-input-border-color: var(--bic-input-toggle-background);
2403
+ svg[data-color="primary"] {
2404
+ color: #01417b;
2758
2405
  }
2759
2406
 
2760
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2761
- transform: scale(1);
2407
+ svg[data-color="gray"] {
2408
+ color: #1c1b1b;
2762
2409
  }
2763
2410
 
2764
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2765
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2411
+ svg[data-color="black"] {
2412
+ color: var(--bi-basic-key);
2413
+ }
2414
+
2415
+ svg[data-color="white"] {
2416
+ color: var(--bi-basic-white);
2766
2417
  }
2767
2418
 
2768
2419
  .bi-label {
@@ -2794,18 +2445,7 @@ svg[data-color="white"] {
2794
2445
  .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
2795
2446
  content: "*";
2796
2447
  color: var(--bic-label-required-color);
2797
- }
2798
-
2799
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2800
- padding-right: var(--bi-scale-0-25x);
2801
- }
2802
-
2803
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2804
- padding-left: var(--bi-scale-0-25x);
2805
- }
2806
-
2807
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2808
- padding-left: var(--bi-scale-0-25x);
2448
+ padding-inline-end: var(--bi-scale-0-25x);
2809
2449
  }
2810
2450
 
2811
2451
  .bi-link {
@@ -2818,19 +2458,13 @@ svg[data-color="white"] {
2818
2458
  --bic-link-focus-shadow-color: var(--bi-basic-white);
2819
2459
  --bic-link-focus-outline-color: var(--bi-primary-50);
2820
2460
  color: var(--bic-link-color);
2821
- -webkit-text-decoration-line: underline;
2822
2461
  text-decoration-line: underline;
2823
- -webkit-text-decoration-style: solid;
2824
2462
  text-decoration-style: solid;
2825
2463
  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
2826
2464
  text-underline-offset: .25em;
2827
2465
  outline: none;
2828
2466
  }
2829
2467
 
2830
- .bi-link :-webkit-any(img, svg) {
2831
- vertical-align: middle;
2832
- }
2833
-
2834
2468
  .bi-link :is(img, svg) {
2835
2469
  vertical-align: middle;
2836
2470
  }
@@ -2924,7 +2558,7 @@ svg[data-color="white"] {
2924
2558
  --bic-logo-height: var(--bi-scale-48x);
2925
2559
  }
2926
2560
 
2927
- @media (min-width: 795px) {
2561
+ @media (width >= 795px) {
2928
2562
  .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
2929
2563
  aspect-ratio: .974318;
2930
2564
  background-image: url("./assets/logos/international-vertical-dark.svg");
@@ -2940,7 +2574,7 @@ svg[data-color="white"] {
2940
2574
  background-image: url("./assets/logos/dark.svg");
2941
2575
  }
2942
2576
 
2943
- @media (min-width: 795px) {
2577
+ @media (width >= 795px) {
2944
2578
  .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
2945
2579
  aspect-ratio: .974318;
2946
2580
  background-image: url("./assets/logos/international-vertical.svg");
@@ -2982,7 +2616,7 @@ svg[data-color="white"] {
2982
2616
  display: flex;
2983
2617
  }
2984
2618
 
2985
- @media not (min-width: 768px) {
2619
+ @media (width < 768px) {
2986
2620
  .bi-navbar > header {
2987
2621
  padding: 0 var(--bi-scale-4x);
2988
2622
  }
@@ -3052,40 +2686,11 @@ svg[data-color="white"] {
3052
2686
  --bic-pagination-selected-background: var(--bi-primary-80);
3053
2687
  }
3054
2688
 
3055
- .bi-pagination :-webkit-any(ol, ul) {
3056
- color: var(--bic-pagination-color);
3057
- gap: var(--bic-pagination-gap);
3058
- flex-wrap: wrap;
3059
- align-items: center;
3060
- width: -webkit-fit-content;
3061
- width: fit-content;
3062
- margin: 0;
3063
- padding: 0;
3064
- list-style: none;
3065
- display: flex;
3066
- }
3067
-
3068
- .bi-pagination :-webkit-any(ol, ul) > li:empty:before {
3069
- content: "...";
3070
- min-width: var(--bi-scale-11x);
3071
- text-align: center;
3072
- display: block;
3073
- }
3074
-
3075
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
3076
- --bic-button-font-size: 1rem;
3077
- }
3078
-
3079
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
3080
- background-color: var(--bic-pagination-selected-background);
3081
- }
3082
-
3083
2689
  .bi-pagination :is(ol, ul) {
3084
2690
  color: var(--bic-pagination-color);
3085
2691
  gap: var(--bic-pagination-gap);
3086
2692
  flex-wrap: wrap;
3087
2693
  align-items: center;
3088
- width: -webkit-fit-content;
3089
2694
  width: fit-content;
3090
2695
  margin: 0;
3091
2696
  padding: 0;
@@ -3108,95 +2713,6 @@ svg[data-color="white"] {
3108
2713
  background-color: var(--bic-pagination-selected-background);
3109
2714
  }
3110
2715
 
3111
- .bi-popover {
3112
- --bic-popover-arrow-size: var(--bi-scale-3x);
3113
- --bic-popover-background: var(--bi-basic-white);
3114
- --bic-popover-border-width: var(--bi-stroke-thin);
3115
- --bic-popover-border-style: solid;
3116
- --bic-popover-border-color: var(--bi-neutral-15);
3117
- --bic-popover-color: var(--bi-neutral-90);
3118
- --bic-popover-border-radius: var(--bi-radius-medium);
3119
- --bic-popover-max-width: 300px;
3120
- --bic-popover-padding: var(--bi-scale-1x);
3121
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3122
- }
3123
-
3124
- .bi-popover[data-dark="true"] {
3125
- --bic-popover-background: var(--bi-neutral-95);
3126
- --bic-popover-border-color: var(--bi-neutral-70);
3127
- --bic-popover-color: var(--bi-neutral-5);
3128
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3129
- }
3130
-
3131
- .bi-popover {
3132
- background: var(--bic-popover-background);
3133
- border-radius: var(--bic-popover-border-radius);
3134
- border-width: var(--bic-popover-border-width);
3135
- border-style: var(--bic-popover-border-style);
3136
- border-color: var(--bic-popover-border-color);
3137
- box-shadow: var(--bic-popover-box-shadow);
3138
- box-sizing: border-box;
3139
- color: var(--bic-popover-color);
3140
- max-width: var(--bic-popover-max-width);
3141
- padding: var(--bic-popover-padding);
3142
- z-index: 100000;
3143
- display: none;
3144
- position: fixed;
3145
- top: 0;
3146
- bottom: auto;
3147
- left: 0;
3148
- right: auto;
3149
- overflow: visible;
3150
- }
3151
-
3152
- .bi-popover[aria-hidden="false"] {
3153
- display: block;
3154
- }
3155
-
3156
- .bi-popover[data-arrow="true"]:before {
3157
- background: var(--bic-popover-background);
3158
- border: inherit;
3159
- box-sizing: border-box;
3160
- content: "";
3161
- height: var(--bic-popover-arrow-size);
3162
- left: var(--bic-popover-arrow-x);
3163
- top: var(--bic-popover-arrow-y);
3164
- width: var(--bic-popover-arrow-size);
3165
- border-top-color: #0000;
3166
- border-left-color: #0000;
3167
- position: absolute;
3168
- translate: -50% -50%;
3169
- }
3170
-
3171
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
3172
- rotate: 45deg;
3173
- }
3174
-
3175
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
3176
- rotate: -45deg;
3177
- }
3178
-
3179
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
3180
- rotate: 135deg;
3181
- }
3182
-
3183
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3184
- rotate: -135deg;
3185
- }
3186
-
3187
- [data-popover="inline"] {
3188
- all: unset;
3189
- cursor: pointer;
3190
- text-underline-offset: .27em;
3191
- font-size: inherit;
3192
- -webkit-text-decoration: underline dotted;
3193
- text-decoration: underline dotted;
3194
- }
3195
-
3196
- [data-popover="inline"]:not([hidden]) {
3197
- display: inline;
3198
- }
3199
-
3200
2716
  .bi-search:has(:focus-visible) .bi-field--affix:first-child {
3201
2717
  color: var(--bi-primary-50);
3202
2718
  }
@@ -3205,10 +2721,6 @@ svg[data-color="white"] {
3205
2721
  --bic-field-padding-inline: 0;
3206
2722
  }
3207
2723
 
3208
- .bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
3209
- display: none;
3210
- }
3211
-
3212
2724
  .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
3213
2725
  display: none;
3214
2726
  }
@@ -3249,11 +2761,13 @@ svg[data-color="white"] {
3249
2761
  .bi-spinner {
3250
2762
  --bic-spinner-color: currentColor;
3251
2763
  aspect-ratio: 1;
3252
- background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
2764
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
2765
+ conic-gradient(#0000 30%, var(--bic-spinner-color));
3253
2766
  border-radius: 50%;
3254
2767
  width: 1em;
3255
2768
  height: 1em;
3256
2769
  animation: 1s linear infinite bi-spinner;
2770
+ display: inline-block;
3257
2771
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3258
2772
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3259
2773
  }
@@ -3300,7 +2814,6 @@ svg[data-color="white"] {
3300
2814
 
3301
2815
  .bi-sticky-header {
3302
2816
  z-index: 100;
3303
- position: -webkit-sticky;
3304
2817
  position: sticky;
3305
2818
  }
3306
2819
 
@@ -3342,7 +2855,6 @@ svg[data-color="white"] {
3342
2855
  overflow-y: auto;
3343
2856
  overflow-x: unset;
3344
2857
  flex-direction: column;
3345
- width: -webkit-fit-content;
3346
2858
  width: fit-content;
3347
2859
  }
3348
2860
 
@@ -3421,16 +2933,8 @@ svg[data-color="white"] {
3421
2933
  position: relative;
3422
2934
  }
3423
2935
 
3424
- .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3425
- padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3426
- }
3427
-
3428
- .bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3429
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3430
- }
3431
-
3432
- .bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3433
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2936
+ .bi-validation-message:has( > svg) {
2937
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3434
2938
  }
3435
2939
 
3436
2940
  .bi-validation-message > svg {
@@ -3440,11 +2944,7 @@ svg[data-color="white"] {
3440
2944
  position: absolute;
3441
2945
  }
3442
2946
 
3443
- html:has(.bi-navbar) {
3444
- scroll-padding-top: var(--bi-layout-navbar-height);
3445
- }
3446
-
3447
- html:has(.bi-sub-navbar) {
2947
+ :is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
3448
2948
  scroll-padding-top: var(--bi-layout-navbar-height);
3449
2949
  }
3450
2950
 
@@ -3473,5 +2973,5 @@ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][da
3473
2973
  }
3474
2974
 
3475
2975
  html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
3476
- top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
2976
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
3477
2977
  }