@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.
@@ -193,35 +193,35 @@
193
193
  --bi-font-color-primary-dark-background: var(--bi-basic-white);
194
194
  --bi-font-color-accent-dark-background: var(--bi-primary-20);
195
195
  --bi-layout-navbar-height: var(--bi-scale-16x);
196
- --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
197
- --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
198
- --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
199
- --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-brand);
200
- --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
201
- --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
202
- --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
203
- --bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem / 1.6875rem var(--bi-font-family-plain);
204
- --bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem / 1.4375rem var(--bi-font-family-plain);
205
- --bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem / 1.25rem var(--bi-font-family-plain);
206
- --bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem / 1.125rem var(--bi-font-family-plain);
207
- --bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem / 1rem var(--bi-font-family-plain);
208
- --bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem / 2.25rem var(--bi-font-family-plain);
209
- --bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-plain);
210
- --bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem / 1.6875rem var(--bi-font-family-plain);
211
- --bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem / 1.4375rem var(--bi-font-family-plain);
212
- --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
213
- --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
214
- --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
215
- --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
216
- --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
217
- --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
218
- --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
219
- --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
220
- --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
- --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
222
- --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
223
- --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
224
- --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
196
+ --bi-font-display-large: var(--bi-font-weight-regular) 4rem/4.5rem var(--bi-font-family-brand);
197
+ --bi-font-display-medium: var(--bi-font-weight-regular) 3rem/3.5rem var(--bi-font-family-brand);
198
+ --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem/2.875rem var(--bi-font-family-brand);
199
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem/2.5rem var(--bi-font-family-brand);
200
+ --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-brand);
201
+ --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem/2.25rem var(--bi-font-family-plain);
202
+ --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem/2rem var(--bi-font-family-plain);
203
+ --bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem/1.6875rem var(--bi-font-family-plain);
204
+ --bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem/1.4375rem var(--bi-font-family-plain);
205
+ --bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem/1.25rem var(--bi-font-family-plain);
206
+ --bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem/1.125rem var(--bi-font-family-plain);
207
+ --bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem/1rem var(--bi-font-family-plain);
208
+ --bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem/2.25rem var(--bi-font-family-plain);
209
+ --bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-plain);
210
+ --bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem/1.6875rem var(--bi-font-family-plain);
211
+ --bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem/1.4375rem var(--bi-font-family-plain);
212
+ --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem/1.25rem var(--bi-font-family-plain);
213
+ --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem/1.125rem var(--bi-font-family-plain);
214
+ --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem/1rem var(--bi-font-family-plain);
215
+ --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem/1.6875rem var(--bi-font-family-plain);
216
+ --bi-font-label-large: var(--bi-font-weight-bold) 1rem/1.5rem var(--bi-font-family-plain);
217
+ --bi-font-label-medium: var(--bi-font-weight-bold) .875rem/1.25rem var(--bi-font-family-plain);
218
+ --bi-font-label-small: var(--bi-font-weight-bold) .8125rem/1.25rem var(--bi-font-family-plain);
219
+ --bi-font-label-xs: var(--bi-font-weight-bold) .75rem/1.125rem var(--bi-font-family-plain);
220
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem/1.6875rem var(--bi-font-family-plain);
221
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem/1.5rem var(--bi-font-family-plain);
222
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem/1.3125rem var(--bi-font-family-plain);
223
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem/1.25rem var(--bi-font-family-plain);
224
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem/1.125rem var(--bi-font-family-plain);
225
225
  }
226
226
 
227
227
  .bi-alert {
@@ -248,7 +248,6 @@
248
248
  border-radius: var(--bi-radius-medium);
249
249
  gap: var(--bic-alert-gap);
250
250
  grid-template-columns: 1fr;
251
- width: -webkit-fit-content;
252
251
  width: fit-content;
253
252
  display: grid;
254
253
  position: relative;
@@ -461,9 +460,7 @@
461
460
  font-family: museo-sans, Arial, sans-serif;
462
461
  font-size: var(--bic-badge-font-size);
463
462
  line-height: var(--bic-badge-line-height);
464
- width: -webkit-max-content;
465
463
  width: max-content;
466
- height: -webkit-fit-content;
467
464
  height: fit-content;
468
465
  min-height: var(--bic-badge-height);
469
466
  box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
@@ -568,7 +565,7 @@
568
565
  .bi-button {
569
566
  --bic-button-box-shadow: none;
570
567
  --bic-button-icon-size: var(--bi-icon-medium);
571
- --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
568
+ --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
572
569
  --bic-button-size: var(--bi-scale-11x);
573
570
  --bic-button-font-size: 1rem;
574
571
  --bic-button-line-height: 1.5;
@@ -590,11 +587,9 @@
590
587
  color: var(--bic-button-color);
591
588
  background: var(--bic-button-background);
592
589
  box-shadow: var(--bic-button-box-shadow);
593
- height: -webkit-fit-content;
594
590
  height: fit-content;
595
591
  min-height: var(--bic-button-size);
596
592
  min-width: var(--bic-button-size);
597
- width: -webkit-fit-content;
598
593
  width: fit-content;
599
594
  padding: var(--bic-button-padding);
600
595
  -webkit-text-decoration: unset;
@@ -634,13 +629,13 @@
634
629
  .bi-button[data-size="small"] {
635
630
  --bic-button-font-size: .875rem;
636
631
  --bic-button-line-height: 1.25rem;
637
- --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
632
+ --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
638
633
  --bic-button-icon-size: var(--bi-icon-small);
639
634
  --bic-button-size: var(--bi-scale-8x);
640
635
  }
641
636
 
642
637
  .bi-button[data-size="large"] {
643
- --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
638
+ --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
644
639
  --bic-button-icon-size: var(--bi-icon-large);
645
640
  --bic-button-size: var(--bi-scale-14x);
646
641
  }
@@ -652,20 +647,15 @@
652
647
  padding: 0;
653
648
  }
654
649
 
655
- .bi-button:not([data-variant]) {
650
+ .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
656
651
  --bic-button-color: var(--bi-basic-white);
657
652
  --bic-button-background: var(--bi-primary-50);
658
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
659
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
660
- --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;
661
- }
662
-
663
- .bi-button[data-variant="filled"] {
664
- --bic-button-color: var(--bi-basic-white);
665
- --bic-button-background: var(--bi-primary-50);
666
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
667
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
668
- --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;
653
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
654
+ var(--bic-button-background);
655
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
656
+ var(--bic-button-background);
657
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
658
+ 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
669
659
  }
670
660
 
671
661
  .bi-button[data-variant="outlined"] {
@@ -697,15 +687,19 @@
697
687
  .bi-button[data-variant="flat"] {
698
688
  --bic-button-color: var(--bi-primary-90);
699
689
  --bic-button-background: var(--bi-primary-5);
700
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
701
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
690
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
691
+ var(--bic-button-background);
692
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
693
+ var(--bic-button-background);
702
694
  }
703
695
 
704
696
  .bi-button[data-variant="flat"][data-dark="true"] {
705
697
  --bic-button-color: var(--bi-basic-white);
706
698
  --bic-button-background: #ffffff1a;
707
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
708
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
699
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
700
+ var(--bic-button-background);
701
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
702
+ var(--bic-button-background);
709
703
  }
710
704
 
711
705
  @media (hover: hover) and (pointer: fine) {
@@ -718,14 +712,6 @@
718
712
  cursor: progress;
719
713
  }
720
714
 
721
- .bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
722
- cursor: not-allowed;
723
- }
724
-
725
- .bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
726
- cursor: progress;
727
- }
728
-
729
715
  .bi-button:is(:disabled, [aria-disabled="true"]) {
730
716
  cursor: not-allowed;
731
717
  }
@@ -738,12 +724,7 @@
738
724
  background: var(--bic-button-background-press);
739
725
  }
740
726
 
741
- .bi-button .bi-button--start-icon {
742
- display: inherit;
743
- font-size: var(--bic-button-icon-size);
744
- }
745
-
746
- .bi-button .bi-button--end-icon {
727
+ .bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
747
728
  display: inherit;
748
729
  font-size: var(--bic-button-icon-size);
749
730
  }
@@ -823,13 +804,13 @@
823
804
  --bic-card-media-width: 15.75rem;
824
805
  }
825
806
 
826
- @media not (min-width: 1024px) {
807
+ @media (width < 1024px) {
827
808
  .bi-card[data-orientation="horizontal"] {
828
809
  --bic-card-media-width: 14.5rem;
829
810
  }
830
811
  }
831
812
 
832
- @media not (min-width: 600px) {
813
+ @media (width < 600px) {
833
814
  .bi-card[data-orientation="horizontal"] {
834
815
  --bic-card-media-width: 8.4375rem;
835
816
  }
@@ -924,134 +905,46 @@
924
905
  overflow: hidden;
925
906
  }
926
907
 
927
- @media not (min-width: 600px) {
908
+ @media (width < 600px) {
928
909
  .bi-card .bi-card--content {
929
910
  --bic-card-content-padding: var(--bi-scale-3x);
930
911
  gap: var(--bi-scale-3x);
931
912
  }
932
913
  }
933
914
 
934
- .bi-card:-webkit-any(a, button) {
935
- cursor: pointer;
936
- text-decoration: none;
937
- transition: box-shadow .25s ease-in-out;
938
- position: relative;
939
- }
940
-
941
- .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
942
- 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);
943
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
944
- outline-offset: var(--_bi--focus, 2px);
945
- }
946
-
947
- .bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
948
- --_bi--focus: ;
949
- }
950
-
951
- @media (hover: hover) and (pointer: fine) {
952
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
953
- 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);
954
- }
955
- }
956
-
957
- .bi-card:-webkit-any(a, button):not(.disabled):active {
958
- 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);
959
- }
960
-
961
- .bi-card:-webkit-any(a, button):disabled {
962
- cursor: not-allowed;
963
- }
964
-
965
- .bi-card:is(a, button) {
966
- cursor: pointer;
967
- text-decoration: none;
968
- transition: box-shadow .25s ease-in-out;
969
- position: relative;
970
- }
971
-
972
- .bi-card:is(a, button):not(.disabled):focus-visible {
973
- 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);
974
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
975
- outline-offset: var(--_bi--focus, 2px);
976
- }
977
-
978
- .bi-card:is(a, button):not(.disabled):focus-visible * {
979
- --_bi--focus: ;
980
- }
981
-
982
- @media (hover: hover) and (pointer: fine) {
983
- .bi-card:is(a, button):not(.disabled):hover {
984
- 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);
985
- }
986
- }
987
-
988
- .bi-card:is(a, button):not(.disabled):active {
989
- 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);
990
- }
991
-
992
- .bi-card:is(a, button):disabled {
993
- cursor: not-allowed;
994
- }
995
-
996
- .bi-card .bi-card--content:-webkit-any(a, button) {
997
- cursor: pointer;
998
- text-decoration: none;
999
- transition: box-shadow .25s ease-in-out;
1000
- position: relative;
1001
- }
1002
-
1003
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
1004
- 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);
1005
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1006
- outline-offset: var(--_bi--focus, 2px);
1007
- }
1008
-
1009
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
1010
- --_bi--focus: ;
1011
- }
1012
-
1013
- @media (hover: hover) and (pointer: fine) {
1014
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
1015
- 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);
1016
- }
1017
- }
1018
-
1019
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
1020
- 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);
1021
- }
1022
-
1023
- .bi-card .bi-card--content:-webkit-any(a, button):disabled {
1024
- cursor: not-allowed;
1025
- }
1026
-
1027
- .bi-card .bi-card--content:is(a, button) {
915
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button) {
1028
916
  cursor: pointer;
1029
917
  text-decoration: none;
1030
918
  transition: box-shadow .25s ease-in-out;
1031
919
  position: relative;
1032
920
  }
1033
921
 
1034
- .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
1035
- 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);
922
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
923
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
924
+ 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
1036
925
  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1037
926
  outline-offset: var(--_bi--focus, 2px);
1038
927
  }
1039
928
 
1040
- .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
929
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
1041
930
  --_bi--focus: ;
1042
931
  }
1043
932
 
1044
933
  @media (hover: hover) and (pointer: fine) {
1045
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
1046
- 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);
934
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
935
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
936
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
937
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1047
938
  }
1048
939
  }
1049
940
 
1050
- .bi-card .bi-card--content:is(a, button):not(.disabled):active {
1051
- 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);
941
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
942
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
943
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
944
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1052
945
  }
1053
946
 
1054
- .bi-card .bi-card--content:is(a, button):disabled {
947
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
1055
948
  cursor: not-allowed;
1056
949
  }
1057
950
 
@@ -1064,7 +957,7 @@
1064
957
  display: flex;
1065
958
  }
1066
959
 
1067
- @media not (min-width: 600px) {
960
+ @media (width < 600px) {
1068
961
  .bi-card .bi-card--actions {
1069
962
  width: var(--bi-scale-11x);
1070
963
  }
@@ -1077,7 +970,7 @@
1077
970
  flex: 1;
1078
971
  }
1079
972
 
1080
- @media not (min-width: 600px) {
973
+ @media (width < 600px) {
1081
974
  .bi-card .bi-card--actions .bi-card--action {
1082
975
  --bic-button-size: var(--bi-scale-11x);
1083
976
  }
@@ -1100,7 +993,7 @@
1100
993
  font-size: .875rem;
1101
994
  }
1102
995
 
1103
- @media not (min-width: 600px) {
996
+ @media (width < 600px) {
1104
997
  .bi-card .bi-card--header .bi-card--header-label {
1105
998
  font-size: .8125rem;
1106
999
  }
@@ -1135,7 +1028,7 @@
1135
1028
  overflow: hidden;
1136
1029
  }
1137
1030
 
1138
- @media not (min-width: 600px) {
1031
+ @media (width < 600px) {
1139
1032
  .bi-card .bi-card--header .bi-card--header-title {
1140
1033
  font-size: 1rem;
1141
1034
  }
@@ -1148,20 +1041,6 @@
1148
1041
  position: relative;
1149
1042
  }
1150
1043
 
1151
- .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
1152
- border-radius: inherit;
1153
- object-fit: cover;
1154
- aspect-ratio: 4 / 3;
1155
- width: 100%;
1156
- display: block;
1157
- }
1158
-
1159
- @media not (min-width: 600px) {
1160
- .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
1161
- aspect-ratio: 3 / 2;
1162
- }
1163
- }
1164
-
1165
1044
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
1166
1045
  border-radius: inherit;
1167
1046
  object-fit: cover;
@@ -1170,7 +1049,7 @@
1170
1049
  display: block;
1171
1050
  }
1172
1051
 
1173
- @media not (min-width: 600px) {
1052
+ @media (width < 600px) {
1174
1053
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
1175
1054
  aspect-ratio: 3 / 2;
1176
1055
  }
@@ -1181,7 +1060,6 @@
1181
1060
  left: var(--bi-scale-4x);
1182
1061
  right: var(--bi-scale-4x);
1183
1062
  flex-wrap: wrap;
1184
- width: -webkit-fit-content;
1185
1063
  width: fit-content;
1186
1064
  display: flex;
1187
1065
  position: absolute;
@@ -1193,7 +1071,8 @@
1193
1071
  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
1194
1072
  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
1195
1073
  background: var(--bic-card-background-color);
1196
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
1074
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
1075
+ 0px 4px 6px 0px #26333f0d;
1197
1076
  color: var(--bic-card-header-title-color);
1198
1077
  text-align: center;
1199
1078
  flex-direction: column;
@@ -1249,7 +1128,6 @@
1249
1128
  --bic-chip-line-height: 1.5rem;
1250
1129
  gap: var(--bi-scale-1x);
1251
1130
  border-radius: var(--bi-radius-full);
1252
- width: -webkit-fit-content;
1253
1131
  width: fit-content;
1254
1132
  color: var(--bic-chip-text-color);
1255
1133
  background-color: var(--bic-chip-background);
@@ -1420,92 +1298,28 @@
1420
1298
  --bic-chip-text-color: var(--bi-basic-white);
1421
1299
  }
1422
1300
 
1423
- .bi-chip:-webkit-any(button) {
1424
- cursor: pointer;
1425
- border: none;
1426
- text-decoration: none;
1427
- }
1428
-
1429
- .bi-chip:-webkit-any(button):focus-visible {
1430
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1431
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1432
- outline-offset: var(--_bi--focus, 2px);
1433
- }
1434
-
1435
- @media (hover: hover) and (pointer: fine) {
1436
- .bi-chip:-webkit-any(button):hover {
1437
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1438
- }
1439
- }
1440
-
1441
- .bi-chip:-webkit-any(button):active {
1442
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1443
- }
1444
-
1445
- .bi-chip:is(button) {
1446
- cursor: pointer;
1447
- border: none;
1448
- text-decoration: none;
1449
- }
1450
-
1451
- .bi-chip:is(button):focus-visible {
1452
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1453
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1454
- outline-offset: var(--_bi--focus, 2px);
1455
- }
1456
-
1457
- @media (hover: hover) and (pointer: fine) {
1458
- .bi-chip:is(button):hover {
1459
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1460
- }
1461
- }
1462
-
1463
- .bi-chip:is(button):active {
1464
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1465
- }
1466
-
1467
- .bi-chip:-webkit-any(a) {
1468
- cursor: pointer;
1469
- border: none;
1470
- text-decoration: none;
1471
- }
1472
-
1473
- .bi-chip:-webkit-any(a):focus-visible {
1474
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1475
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1476
- outline-offset: var(--_bi--focus, 2px);
1477
- }
1478
-
1479
- @media (hover: hover) and (pointer: fine) {
1480
- .bi-chip:-webkit-any(a):hover {
1481
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1482
- }
1483
- }
1484
-
1485
- .bi-chip:-webkit-any(a):active {
1486
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1487
- }
1488
-
1489
- .bi-chip:is(a) {
1301
+ .bi-chip:is(button), .bi-chip:is(a) {
1490
1302
  cursor: pointer;
1491
1303
  border: none;
1492
1304
  text-decoration: none;
1493
1305
  }
1494
1306
 
1495
- .bi-chip:is(a):focus-visible {
1307
+ :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
1496
1308
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1497
1309
  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1498
1310
  outline-offset: var(--_bi--focus, 2px);
1499
1311
  }
1500
1312
 
1501
1313
  @media (hover: hover) and (pointer: fine) {
1502
- .bi-chip:is(a):hover {
1503
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1314
+ :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
1315
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
1316
+ var(--bic-chip-background);
1504
1317
  }
1505
1318
  }
1506
1319
 
1507
- .bi-chip:is(a):active {
1508
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1320
+ :is(.bi-chip:is(button), .bi-chip:is(a)):active {
1321
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
1322
+ var(--bic-chip-background);
1509
1323
  }
1510
1324
 
1511
1325
  .bi-chip > svg {
@@ -1515,8 +1329,10 @@
1515
1329
 
1516
1330
  details.bi-details {
1517
1331
  --bic-details-background: var(--bi-basic-white);
1518
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
1519
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
1332
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
1333
+ var(--bic-details-background);
1334
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
1335
+ var(--bic-details-background);
1520
1336
  --bic-details-color: var(--bi-neutral-90);
1521
1337
  --bic-details-border-color: var(--bi-neutral-15);
1522
1338
  --bic-details-padding: var(--bi-scale-4x);
@@ -1526,8 +1342,10 @@ details.bi-details {
1526
1342
 
1527
1343
  details.bi-details[data-dark="true"] {
1528
1344
  --bic-details-background: var(--bi-neutral-90);
1529
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-details-background);
1530
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
1345
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
1346
+ var(--bic-details-background);
1347
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
1348
+ var(--bic-details-background);
1531
1349
  --bic-details-border-color: var(--bi-neutral-70);
1532
1350
  --bic-details-color: var(--bi-basic-white);
1533
1351
  --bic-details-focus-shadow-color: var(--bi-neutral-95);
@@ -1622,7 +1440,8 @@ details.bi-details[open] summary > svg {
1622
1440
  }
1623
1441
 
1624
1442
  details.bi-details::details-content {
1625
- transition: height .2s ease-in-out, content-visibility .2s ease-in-out allow-discrete;
1443
+ transition: height .2s ease-in-out,
1444
+ content-visibility .2s ease-in-out allow-discrete;
1626
1445
  height: 0;
1627
1446
  overflow: clip;
1628
1447
  }
@@ -1686,10 +1505,7 @@ details.bi-details > *:not(summary) + * {
1686
1505
  margin: auto;
1687
1506
  padding: 0;
1688
1507
  position: fixed;
1689
- top: 0;
1690
- bottom: 0;
1691
- left: 0;
1692
- right: 0;
1508
+ inset: 0;
1693
1509
  overflow: auto;
1694
1510
  }
1695
1511
 
@@ -1699,16 +1515,13 @@ details.bi-details > *:not(summary) + * {
1699
1515
  }
1700
1516
 
1701
1517
  .bi-dialog[open] {
1702
- 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;
1518
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
1519
+ bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1703
1520
  display: flex;
1704
1521
  }
1705
1522
 
1706
1523
  @media (prefers-reduced-motion: reduce) {
1707
- .bi-dialog[open] {
1708
- animation: none;
1709
- }
1710
-
1711
- .bi-dialog::backdrop {
1524
+ .bi-dialog[open], .bi-dialog::backdrop {
1712
1525
  animation: none;
1713
1526
  }
1714
1527
  }
@@ -1749,15 +1562,7 @@ details.bi-details > *:not(summary) + * {
1749
1562
  display: flex;
1750
1563
  }
1751
1564
 
1752
- .bi-dialog .bi-dialog--header:not([data-no-border="true"]):not(:first-child) {
1753
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1754
- }
1755
-
1756
- .bi-dialog .bi-dialog--content:not([data-no-border="true"]):not(:first-child) {
1757
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1758
- }
1759
-
1760
- .bi-dialog .bi-dialog--footer:not([data-no-border="true"]):not(:first-child) {
1565
+ :is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
1761
1566
  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
1762
1567
  }
1763
1568
 
@@ -1785,7 +1590,8 @@ body:has(.bi-dialog:modal) {
1785
1590
  --bic-drawer-max-width: 40rem;
1786
1591
  --bic-drawer-min-height: 20rem;
1787
1592
  --bic-drawer-border-radius: var(--bi-radius-medium);
1788
- transition: display var(--bic-dialog-animation-duration) allow-discrete, overlay var(--bic-dialog-animation-duration) allow-discrete;
1593
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
1594
+ overlay var(--bic-dialog-animation-duration) allow-discrete;
1789
1595
  transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1790
1596
  animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1791
1597
  }
@@ -1829,30 +1635,14 @@ body:has(.bi-dialog:modal) {
1829
1635
  border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1830
1636
  }
1831
1637
 
1832
- .bi-dialog.bi-drawer[data-anchor="left"] {
1833
- min-width: var(--bic-drawer-min-width);
1834
- max-width: var(--bic-drawer-max-width);
1835
- width: -webkit-fit-content;
1836
- width: fit-content;
1837
- height: 100dvh;
1838
- }
1839
-
1840
- .bi-dialog.bi-drawer[data-anchor="right"] {
1638
+ .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1841
1639
  min-width: var(--bic-drawer-min-width);
1842
1640
  max-width: var(--bic-drawer-max-width);
1843
- width: -webkit-fit-content;
1844
1641
  width: fit-content;
1845
1642
  height: 100dvh;
1846
1643
  }
1847
1644
 
1848
- .bi-dialog.bi-drawer[data-anchor="top"] {
1849
- min-height: var(--bic-drawer-min-height);
1850
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1851
- width: 100%;
1852
- max-width: 100dvw;
1853
- }
1854
-
1855
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1645
+ .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1856
1646
  min-height: var(--bic-drawer-min-height);
1857
1647
  max-height: calc(100dvh - var(--bi-layout-navbar-height));
1858
1648
  width: 100%;
@@ -1881,6 +1671,94 @@ body:has(.bi-dialog:modal) {
1881
1671
  }
1882
1672
  }
1883
1673
 
1674
+ .bi-popover {
1675
+ --bic-popover-arrow-size: var(--bi-scale-3x);
1676
+ --bic-popover-background: var(--bi-basic-white);
1677
+ --bic-popover-border-width: var(--bi-stroke-thin);
1678
+ --bic-popover-border-style: solid;
1679
+ --bic-popover-border-color: var(--bi-neutral-15);
1680
+ --bic-popover-color: var(--bi-neutral-90);
1681
+ --bic-popover-border-radius: var(--bi-radius-medium);
1682
+ --bic-popover-max-width: 300px;
1683
+ --bic-popover-padding: var(--bi-scale-1x);
1684
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1685
+ 0px 2px 2px -1px #26333f0a;
1686
+ }
1687
+
1688
+ .bi-popover[data-dark="true"] {
1689
+ --bic-popover-background: var(--bi-neutral-95);
1690
+ --bic-popover-border-color: var(--bi-neutral-70);
1691
+ --bic-popover-color: var(--bi-neutral-5);
1692
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1693
+ 0px 2px 2px -1px #26333f0a;
1694
+ }
1695
+
1696
+ .bi-popover {
1697
+ background: var(--bic-popover-background);
1698
+ border-radius: var(--bic-popover-border-radius);
1699
+ border-width: var(--bic-popover-border-width);
1700
+ border-style: var(--bic-popover-border-style);
1701
+ border-color: var(--bic-popover-border-color);
1702
+ box-shadow: var(--bic-popover-box-shadow);
1703
+ box-sizing: border-box;
1704
+ color: var(--bic-popover-color);
1705
+ max-width: var(--bic-popover-max-width);
1706
+ padding: var(--bic-popover-padding);
1707
+ z-index: 100000;
1708
+ display: none;
1709
+ position: fixed;
1710
+ inset: 0 auto auto 0;
1711
+ overflow: visible;
1712
+ }
1713
+
1714
+ .bi-popover[aria-hidden="false"] {
1715
+ display: block;
1716
+ }
1717
+
1718
+ .bi-popover[data-arrow="true"]:before {
1719
+ background: var(--bic-popover-background);
1720
+ border: inherit;
1721
+ box-sizing: border-box;
1722
+ content: "";
1723
+ height: var(--bic-popover-arrow-size);
1724
+ left: var(--bic-popover-arrow-x);
1725
+ top: var(--bic-popover-arrow-y);
1726
+ width: var(--bic-popover-arrow-size);
1727
+ border-top-color: #0000;
1728
+ border-left-color: #0000;
1729
+ position: absolute;
1730
+ translate: -50% -50%;
1731
+ }
1732
+
1733
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
1734
+ rotate: 45deg;
1735
+ }
1736
+
1737
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
1738
+ rotate: -45deg;
1739
+ }
1740
+
1741
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
1742
+ rotate: 135deg;
1743
+ }
1744
+
1745
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
1746
+ rotate: -135deg;
1747
+ }
1748
+
1749
+ [data-popover="inline"] {
1750
+ all: unset;
1751
+ cursor: pointer;
1752
+ text-underline-offset: .27em;
1753
+ font-size: inherit;
1754
+ -webkit-text-decoration: underline dotted;
1755
+ text-decoration: underline dotted;
1756
+ }
1757
+
1758
+ [data-popover="inline"]:not([hidden]) {
1759
+ display: inline;
1760
+ }
1761
+
1884
1762
  .bi-dropdown {
1885
1763
  --bic-dropdown-padding: var(--bi-scale-1x);
1886
1764
  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
@@ -1889,14 +1767,17 @@ body:has(.bi-dialog:modal) {
1889
1767
  --bic-dropdown-border-width: var(--bi-stroke-thin);
1890
1768
  --bic-dropdown-border-style: solid;
1891
1769
  --bic-dropdown-border-color: var(--bi-neutral-15);
1892
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1770
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1771
+ 0px 2px 2px -1px #26333f0a;
1772
+ --bic-dropdown-min-width: var(--bi-scale-64x);
1893
1773
  }
1894
1774
 
1895
1775
  .bi-dropdown[data-dark="true"] {
1896
1776
  --bic-dropdown-background: var(--bi-neutral-100);
1897
1777
  --bic-dropdown-border-color: var(--bi-neutral-90);
1898
1778
  --bic-dropdown-color: var(--bi-neutral-5);
1899
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1779
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1780
+ 0px 2px 2px -1px #26333f0a;
1900
1781
  }
1901
1782
 
1902
1783
  .bi-dropdown {
@@ -1907,7 +1788,7 @@ body:has(.bi-dialog:modal) {
1907
1788
  border-color: var(--bic-dropdown-border-color);
1908
1789
  box-shadow: var(--bic-dropdown-box-shadow);
1909
1790
  box-sizing: border-box;
1910
- min-width: var(--bi-scale-64x);
1791
+ min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
1911
1792
  padding: var(--bic-dropdown-padding);
1912
1793
  list-style: none;
1913
1794
  }
@@ -1921,30 +1802,256 @@ body:has(.bi-dialog:modal) {
1921
1802
  display: flex;
1922
1803
  }
1923
1804
 
1924
- .bi-dropdown :-webkit-any(a, button, [role="button"]) {
1805
+ .bi-dropdown :is(a, button, [role="button"]) {
1925
1806
  padding: var(--bic-dropdown-item-padding);
1926
1807
  min-height: var(--bic-dropdown-item-size);
1927
1808
  justify-content: start;
1928
1809
  width: 100%;
1929
1810
  }
1930
1811
 
1931
- .bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
1812
+ .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1932
1813
  margin-left: auto;
1933
1814
  }
1934
1815
 
1935
- .bi-dropdown :is(a, button, [role="button"]) {
1936
- padding: var(--bic-dropdown-item-padding);
1937
- min-height: var(--bic-dropdown-item-size);
1938
- justify-content: start;
1816
+ .bi-button[aria-expanded="true"] {
1817
+ box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
1818
+ }
1819
+
1820
+ :where(.bi-input) {
1821
+ margin: 0;
1822
+ }
1823
+
1824
+ .bi-input {
1825
+ --bic-input-border-color-invalid: var(--bi-alert-50);
1826
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
1827
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
1828
+ --bic-input-caret-color: var(--bi-primary-50);
1829
+ --bic-input-font-size: 1rem;
1830
+ --bic-input-padding: var(--bi-scale-3x);
1831
+ --bic-input-size: var(--bi-scale-11x);
1832
+ --bic-input-toggle-background: var(--bi-primary-50);
1833
+ --bic-input-toggle-color: var(--bi-basic-white);
1834
+ --bic-input-toggle-size: 1.125rem;
1835
+ --bic-input-background: var(--bi-basic-white);
1836
+ --bic-input-background-readonly: var(--bi-neutral-10);
1837
+ --bic-input-border-color: var(--bi-neutral-50);
1838
+ --bic-input-border-color-hover: var(--bi-neutral-50);
1839
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
1840
+ --bic-input-color-readonly: var(--bi-neutral-95);
1841
+ --bic-input-color: var(--bi-neutral-95);
1842
+ --bic-input-disabled-color: var(--bi-neutral-50);
1843
+ --bic-input-placeholder-color: var(--bi-neutral-60);
1844
+ --bic-input-focus-outline-color: var(--bi-primary-50);
1845
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
1846
+ --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>");
1847
+ }
1848
+
1849
+ .bi-input[data-dark="true"] {
1850
+ --bic-input-background: var(--bi-neutral-95);
1851
+ --bic-input-background-readonly: var(--bi-neutral-50);
1852
+ --bic-input-border-color-hover: var(--bi-neutral-25);
1853
+ --bic-input-color-readonly: var(--bi-basic-white);
1854
+ --bic-input-color: var(--bi-basic-white);
1855
+ --bic-input-disabled-color: var(--bi-neutral-40);
1856
+ --bic-input-placeholder-color: var(--bi-neutral-30);
1857
+ --bic-input-focus-outline-color: var(--bi-primary-30);
1858
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
1859
+ --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>");
1860
+ }
1861
+
1862
+ .bi-input {
1863
+ appearance: none;
1864
+ background: var(--bic-input-background);
1865
+ border-radius: var(--bi-radius-medium);
1866
+ box-shadow: var(--bic-input-box-shadow);
1867
+ box-sizing: border-box;
1868
+ color: var(--bic-input-color);
1869
+ font-family: inherit;
1870
+ font-size: var(--bic-input-font-size);
1871
+ height: var(--bic-input-size);
1872
+ min-width: 0;
1873
+ max-width: 100%;
1874
+ padding: var(--bic-input-padding);
1875
+ vertical-align: middle;
1876
+ caret-color: var(--bic-input-caret-color);
1877
+ border: none;
1878
+ line-height: 1;
1879
+ position: relative;
1880
+ }
1881
+
1882
+ .bi-input[data-size="large"] {
1883
+ --bic-input-size: var(--bi-scale-14x);
1884
+ --bic-input-font-size: 1.25rem;
1885
+ }
1886
+
1887
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
1888
+ box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
1889
+ }
1890
+
1891
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
1892
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
1893
+ }
1894
+
1895
+ .bi-input:focus-visible {
1896
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1897
+ outline-offset: 0;
1898
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1899
+ 0px 0px 10px 0px #0000000d);
1900
+ }
1901
+
1902
+ .bi-input:focus-visible * {
1903
+ --_bi--focus: ;
1904
+ }
1905
+
1906
+ .bi-input::placeholder {
1907
+ color: var(--bic-input-placeholder-color);
1908
+ }
1909
+
1910
+ .bi-input:not([size], [cols]) {
1939
1911
  width: 100%;
1940
1912
  }
1941
1913
 
1942
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1943
- margin-left: auto;
1914
+ .bi-input:disabled, .bi-input[aria-disabled="true"] {
1915
+ cursor: not-allowed;
1944
1916
  }
1945
1917
 
1946
- .bi-button[aria-expanded="true"] {
1947
- box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
1918
+ .bi-input[aria-invalid="true"] {
1919
+ --bic-input-border-color: var(--bic-input-border-color-invalid);
1920
+ }
1921
+
1922
+ .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
1923
+ background: var(--bic-input-background-readonly);
1924
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
1925
+ color: var(--bic-input-color-readonly);
1926
+ }
1927
+
1928
+ .bi-input:is(textarea) {
1929
+ height: auto;
1930
+ min-height: calc(var(--bic-input-size) * 2);
1931
+ resize: vertical;
1932
+ }
1933
+
1934
+ .bi-input:is(textarea):not([rows]) {
1935
+ field-sizing: content;
1936
+ }
1937
+
1938
+ .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
1939
+ cursor: pointer;
1940
+ }
1941
+
1942
+ .bi-input:is(select) {
1943
+ background-image: var(--bic-input-select-chevron);
1944
+ background-position: calc(100% - .5em);
1945
+ background-repeat: no-repeat;
1946
+ background-size: 1.5em;
1947
+ }
1948
+
1949
+ .bi-input[type="checkbox"], .bi-input[type="radio"] {
1950
+ padding: var(--bi-scale-0-50x);
1951
+ line-height: inherit;
1952
+ height: var(--bic-input-toggle-size);
1953
+ width: var(--bic-input-toggle-size);
1954
+ box-shadow: none;
1955
+ border-width: var(--bi-stroke-medium);
1956
+ border-style: solid;
1957
+ border-color: var(--bic-input-border-color);
1958
+ background: none;
1959
+ flex-shrink: 0;
1960
+ }
1961
+
1962
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
1963
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
1964
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1965
+ outline-offset: var(--_bi--focus, 3px);
1966
+ }
1967
+
1968
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
1969
+ --_bi--focus: ;
1970
+ }
1971
+
1972
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
1973
+ cursor: pointer;
1974
+ }
1975
+
1976
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
1977
+ border-radius: var(--bi-radius-full);
1978
+ }
1979
+
1980
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
1981
+ content: "";
1982
+ background-color: var(--bic-input-toggle-background);
1983
+ border-radius: 100%;
1984
+ width: 0;
1985
+ height: 0;
1986
+ transition: width .1s ease-in-out, height .1s ease-in-out;
1987
+ display: block;
1988
+ position: absolute;
1989
+ top: 50%;
1990
+ left: 50%;
1991
+ transform: translate(-50%, -50%);
1992
+ }
1993
+
1994
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
1995
+ --bic-input-border-color: var(--bic-input-toggle-background);
1996
+ }
1997
+
1998
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
1999
+ width: 12px;
2000
+ height: 12px;
2001
+ }
2002
+
2003
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
2004
+ border-radius: var(--bi-radius-small);
2005
+ place-content: center;
2006
+ display: grid;
2007
+ }
2008
+
2009
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
2010
+ content: "";
2011
+ width: .7em;
2012
+ height: .7em;
2013
+ box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2014
+ transform-origin: center;
2015
+ clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2016
+ transition: transform .2s ease-in-out;
2017
+ transform: scale(0);
2018
+ }
2019
+
2020
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
2021
+ background: var(--bic-input-toggle-background);
2022
+ --bic-input-border-color: var(--bic-input-toggle-background);
2023
+ }
2024
+
2025
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
2026
+ transform: scale(1);
2027
+ }
2028
+
2029
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
2030
+ clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2031
+ }
2032
+
2033
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2034
+ --_bic-input-circle-position-x: var(--bi-scale-0-50x);
2035
+ background: var(--bi-neutral-50);
2036
+ }
2037
+
2038
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
2039
+ --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
2040
+ background: var(--bic-input-toggle-background);
2041
+ --bic-input-border-color: var(--bic-input-toggle-background);
2042
+ }
2043
+
2044
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2045
+ background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
2046
+ background-origin: content-box;
2047
+ background-position: var(--_bic-input-circle-position-x);
2048
+ background-repeat: no-repeat;
2049
+ background-size: calc(var(--bic-input-toggle-size)) 100%;
2050
+ border-radius: var(--bi-radius-full);
2051
+ width: var(--bi-scale-11x);
2052
+ height: var(--bi-scale-6x);
2053
+ padding-inline: 0;
2054
+ transition: background-position .2s;
1948
2055
  }
1949
2056
 
1950
2057
  .bi-field {
@@ -1956,6 +2063,7 @@ body:has(.bi-dialog:modal) {
1956
2063
  --bic-field-affix-color: var(--bi-neutral-60);
1957
2064
  --bic-field-background: var(--bi-basic-white);
1958
2065
  --bic-field-background-hover: var(--bi-states-hover-dark);
2066
+ --bic-field-background-press: var(--bi-states-press-dark);
1959
2067
  --bic-field-background-readonly: var(--bi-neutral-10);
1960
2068
  --bic-field-border-color: var(--bi-neutral-50);
1961
2069
  --bic-field-border-color-hover: var(--bi-neutral-50);
@@ -1972,6 +2080,7 @@ body:has(.bi-dialog:modal) {
1972
2080
  --bic-field-affix-color: var(--bi-neutral-30);
1973
2081
  --bic-field-background: var(--bi-neutral-95);
1974
2082
  --bic-field-background-hover: var(--bi-states-hover-light);
2083
+ --bic-field-background-press: var(--bi-states-press-light);
1975
2084
  --bic-field-background-readonly: var(--bi-neutral-50);
1976
2085
  --bic-field-border-color-hover: var(--bi-neutral-25);
1977
2086
  --bic-field-disabled-color: var(--bi-neutral-40);
@@ -1983,8 +2092,7 @@ body:has(.bi-dialog:modal) {
1983
2092
  }
1984
2093
 
1985
2094
  .bi-field > * {
1986
- margin-top: 0;
1987
- margin-bottom: 0;
2095
+ margin-block: 0;
1988
2096
  }
1989
2097
 
1990
2098
  .bi-field > * + * {
@@ -2019,32 +2127,43 @@ body:has(.bi-dialog:modal) {
2019
2127
  width: 100%;
2020
2128
  }
2021
2129
 
2022
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
2130
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
2023
2131
  border-radius: var(--bi-radius-medium);
2024
- grid-template-areas: "input content";
2025
- grid-template-columns: var(--bi-scale-5x) 1fr;
2026
2132
  gap: 0 var(--bi-scale-3x);
2027
- width: -webkit-fit-content;
2028
2133
  width: fit-content;
2029
2134
  padding: var(--bi-scale-2x) var(--bi-scale-3x);
2135
+ grid-template-columns: auto 1fr;
2136
+ grid-template-areas: "input content";
2030
2137
  align-items: center;
2031
2138
  }
2032
2139
 
2033
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):not([hidden]) {
2140
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
2034
2141
  display: grid;
2035
2142
  }
2036
2143
 
2037
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
2144
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
2038
2145
  width: 100%;
2039
2146
  }
2040
2147
 
2041
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) > * {
2148
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
2149
+ border-radius: var(--bi-scale-24x);
2150
+ padding: var(--bi-scale-1x) var(--bi-scale-2x);
2151
+ }
2152
+
2153
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
2154
+ padding-inline-end: var(--bi-scale-4x);
2155
+ }
2156
+
2157
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
2158
+ padding-inline-start: var(--bi-scale-4x);
2159
+ }
2160
+
2161
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
2042
2162
  grid-column: content;
2043
- margin-top: 0;
2044
- margin-bottom: 0;
2163
+ margin-block: 0;
2045
2164
  }
2046
2165
 
2047
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
2166
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
2048
2167
  margin: var(--bi-scale-0-50x) 0;
2049
2168
  -webkit-user-select: none;
2050
2169
  user-select: none;
@@ -2052,16 +2171,12 @@ body:has(.bi-dialog:modal) {
2052
2171
  line-height: 1.5;
2053
2172
  }
2054
2173
 
2055
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
2174
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
2056
2175
  margin: var(--bi-scale-1x) auto;
2057
2176
  grid-area: 1 / input;
2058
2177
  align-self: flex-start;
2059
2178
  }
2060
2179
 
2061
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2062
- cursor: pointer;
2063
- }
2064
-
2065
2180
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2066
2181
  cursor: pointer;
2067
2182
  }
@@ -2078,6 +2193,14 @@ body:has(.bi-dialog:modal) {
2078
2193
  --_bi--hover: ;
2079
2194
  }
2080
2195
 
2196
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
2197
+ background: var(--_bi--hover, var(--bic-field-background-press));
2198
+ }
2199
+
2200
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
2201
+ --_bi--hover: ;
2202
+ }
2203
+
2081
2204
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2082
2205
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2083
2206
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
@@ -2089,107 +2212,30 @@ body:has(.bi-dialog:modal) {
2089
2212
  }
2090
2213
 
2091
2214
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
2215
+ grid-template-columns: 1fr auto;
2092
2216
  grid-template-areas: "content input";
2093
- grid-template-columns: 1fr var(--bi-scale-5x);
2094
- width: auto;
2095
2217
  }
2096
2218
 
2097
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
2219
+ .bi-field .bi-field--affixes {
2220
+ background: var(--bic-field-background);
2098
2221
  border-radius: var(--bi-radius-medium);
2099
- grid-template-areas: "input content";
2100
- grid-template-columns: var(--bi-scale-5x) 1fr;
2101
- gap: 0 var(--bi-scale-3x);
2102
- width: -webkit-fit-content;
2103
- width: fit-content;
2104
- padding: var(--bi-scale-2x) var(--bi-scale-3x);
2105
- align-items: center;
2222
+ box-sizing: border-box;
2223
+ white-space: nowrap;
2224
+ max-width: 100%;
2225
+ box-shadow: var(--bic-field-box-shadow);
2106
2226
  }
2107
2227
 
2108
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
2109
- display: grid;
2228
+ .bi-field .bi-field--affixes .bi-input {
2229
+ --bic-input-background: ;
2230
+ --bic-input-box-shadow: ;
2231
+ flex: auto;
2110
2232
  }
2111
2233
 
2112
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
2113
- width: 100%;
2114
- }
2115
-
2116
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
2117
- grid-column: content;
2118
- margin-top: 0;
2119
- margin-bottom: 0;
2120
- }
2121
-
2122
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
2123
- margin: var(--bi-scale-0-50x) 0;
2124
- -webkit-user-select: none;
2125
- user-select: none;
2126
- font-size: 1rem;
2127
- line-height: 1.5;
2128
- }
2129
-
2130
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
2131
- margin: var(--bi-scale-1x) auto;
2132
- grid-area: 1 / input;
2133
- align-self: flex-start;
2134
- }
2135
-
2136
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2137
- cursor: pointer;
2138
- }
2139
-
2140
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2141
- cursor: pointer;
2142
- }
2143
-
2144
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
2145
- gap: 0;
2146
- }
2147
-
2148
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
2149
- background: var(--_bi--hover, var(--bic-field-background-hover));
2150
- }
2151
-
2152
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
2153
- --_bi--hover: ;
2154
- }
2155
-
2156
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2157
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2158
- outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2159
- outline-offset: var(--_bi--focus, 2px);
2160
- }
2161
-
2162
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
2163
- --_bi--focus: ;
2164
- }
2165
-
2166
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
2167
- grid-template-areas: "content input";
2168
- grid-template-columns: 1fr var(--bi-scale-5x);
2169
- width: auto;
2170
- }
2171
-
2172
- .bi-field .bi-field--affixes {
2173
- background: var(--bic-field-background);
2174
- border-radius: var(--bi-radius-medium);
2175
- box-sizing: border-box;
2176
- white-space: nowrap;
2177
- max-width: 100%;
2178
- box-shadow: var(--bic-field-box-shadow);
2179
- }
2180
-
2181
- .bi-field .bi-field--affixes .bi-input {
2182
- --bic-input-background: ;
2183
- --bic-input-box-shadow: ;
2184
- flex: auto;
2185
- }
2186
-
2187
- .bi-field .bi-field--affixes:not([hidden]) {
2188
- display: flex;
2234
+ .bi-field .bi-field--affixes:not([hidden]) {
2235
+ display: flex;
2189
2236
  }
2190
2237
 
2191
2238
  .bi-field .bi-field--affixes:has(.bi-input[size]) {
2192
- width: -webkit-fit-content;
2193
2239
  width: fit-content;
2194
2240
  }
2195
2241
 
@@ -2204,7 +2250,8 @@ body:has(.bi-dialog:modal) {
2204
2250
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2205
2251
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2206
2252
  outline-offset: 0;
2207
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2253
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
2254
+ 0px 0px 10px 0px #0000000d);
2208
2255
  }
2209
2256
 
2210
2257
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -2222,46 +2269,18 @@ body:has(.bi-dialog:modal) {
2222
2269
  display: flex;
2223
2270
  }
2224
2271
 
2225
- .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)) {
2226
- border-top-left-radius: inherit;
2227
- border-bottom-left-radius: inherit;
2228
- border-right: 0;
2229
- padding-right: 0;
2272
+ .bi-field .bi-field--affixes .bi-field--affix:first-child {
2273
+ border-inline-end: 0;
2274
+ border-start-start-radius: inherit;
2275
+ border-end-start-radius: inherit;
2276
+ padding-inline-end: 0;
2230
2277
  }
2231
2278
 
2232
- .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)) {
2233
- border-top-right-radius: inherit;
2234
- border-bottom-right-radius: inherit;
2235
- border-left: 0;
2236
- padding-left: 0;
2237
- }
2238
-
2239
- .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)) {
2240
- border-top-right-radius: inherit;
2241
- border-bottom-right-radius: inherit;
2242
- border-left: 0;
2243
- padding-left: 0;
2244
- }
2245
-
2246
- .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)) {
2247
- border-top-right-radius: inherit;
2248
- border-bottom-right-radius: inherit;
2249
- border-left: 0;
2250
- padding-left: 0;
2251
- }
2252
-
2253
- .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)) {
2254
- border-top-left-radius: inherit;
2255
- border-bottom-left-radius: inherit;
2256
- border-right: 0;
2257
- padding-right: 0;
2258
- }
2259
-
2260
- .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)) {
2261
- border-top-left-radius: inherit;
2262
- border-bottom-left-radius: inherit;
2263
- border-right: 0;
2264
- padding-right: 0;
2279
+ .bi-field .bi-field--affixes .bi-field--affix:last-child {
2280
+ border-inline-start: 0;
2281
+ border-start-end-radius: inherit;
2282
+ border-end-end-radius: inherit;
2283
+ padding-inline-start: 0;
2265
2284
  }
2266
2285
 
2267
2286
  .bi-fieldset {
@@ -2288,7 +2307,7 @@ body:has(.bi-dialog:modal) {
2288
2307
  }
2289
2308
 
2290
2309
  .bi-fieldset > * + * {
2291
- margin-top: var(--bi-scale-1x);
2310
+ margin-block-start: var(--bi-scale-1x);
2292
2311
  }
2293
2312
 
2294
2313
  .bi-fieldset > legend + p {
@@ -2300,18 +2319,16 @@ body:has(.bi-dialog:modal) {
2300
2319
  line-height: 1.15;
2301
2320
  }
2302
2321
 
2303
- .bi-fieldset:disabled > legend {
2304
- opacity: var(--ds-opacity-disabled);
2305
- }
2306
-
2307
- .bi-fieldset:disabled > legend + p {
2322
+ .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
2308
2323
  opacity: var(--ds-opacity-disabled);
2309
2324
  }
2310
2325
 
2311
2326
  .bi-filter-group {
2312
2327
  --bic-filter-group-background: var(--bi-basic-white);
2313
- --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);
2314
- --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);
2328
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
2329
+ var(--bic-filter-group-background);
2330
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
2331
+ var(--bic-filter-group-background);
2315
2332
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
2316
2333
  --bic-filter-group-border-color: var(--bi-neutral-15);
2317
2334
  --bic-filter-group-text-color: var(--bi-neutral-90);
@@ -2321,8 +2338,10 @@ body:has(.bi-dialog:modal) {
2321
2338
 
2322
2339
  .bi-filter-group[data-dark="true"] {
2323
2340
  --bic-filter-group-background: var(--bi-neutral-90);
2324
- --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);
2325
- --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);
2341
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
2342
+ var(--bic-filter-group-background);
2343
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
2344
+ var(--bic-filter-group-background);
2326
2345
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
2327
2346
  --bic-filter-group-border-color: var(--bi-neutral-70);
2328
2347
  --bic-filter-group-text-color: var(--bi-basic-white);
@@ -2341,9 +2360,9 @@ body:has(.bi-dialog:modal) {
2341
2360
  height: var(--bi-scale-12x);
2342
2361
  color: var(--bic-filter-group-text-color);
2343
2362
  align-items: center;
2344
- gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2363
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2345
2364
  width: 100%;
2346
- padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2365
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2347
2366
  background: var(--bic-filter-group-background);
2348
2367
  cursor: pointer;
2349
2368
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2452,7 +2471,7 @@ body:has(.bi-dialog:modal) {
2452
2471
  display: flex;
2453
2472
  }
2454
2473
 
2455
- @media not (min-width: 768px) {
2474
+ @media (width < 768px) {
2456
2475
  .bi-footer .bi-footer--links-container {
2457
2476
  flex-direction: column;
2458
2477
  }
@@ -2471,7 +2490,7 @@ body:has(.bi-dialog:modal) {
2471
2490
  display: flex;
2472
2491
  }
2473
2492
 
2474
- @media not (min-width: 768px) {
2493
+ @media (width < 768px) {
2475
2494
  .bi-footer .bi-footer--links-container .bi-footer--links {
2476
2495
  flex-direction: column;
2477
2496
  }
@@ -2482,7 +2501,7 @@ body:has(.bi-dialog:modal) {
2482
2501
  font-weight: 300;
2483
2502
  }
2484
2503
 
2485
- @media not (min-width: 768px) {
2504
+ @media (width < 768px) {
2486
2505
  .bi-footer .bi-footer--links-container .bi-footer--links > p {
2487
2506
  margin: var(--bi-scale-3x) 0;
2488
2507
  }
@@ -2498,7 +2517,7 @@ body:has(.bi-dialog:modal) {
2498
2517
  display: flex;
2499
2518
  }
2500
2519
 
2501
- @media not (min-width: 768px) {
2520
+ @media (width < 768px) {
2502
2521
  .bi-footer .bi-footer--links-container .bi-footer--links > div {
2503
2522
  flex-direction: column;
2504
2523
  }
@@ -2513,482 +2532,114 @@ body:has(.bi-dialog:modal) {
2513
2532
  display: flex;
2514
2533
  }
2515
2534
 
2516
- @media not (min-width: 600px) {
2517
- .bi-footer .bi-footer--accreditations {
2518
- gap: var(--bi-scale-2x) var(--bi-scale-1x);
2519
- }
2520
- }
2521
-
2522
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2523
- background-position: center;
2524
- background-repeat: no-repeat;
2525
- background-size: contain;
2526
- height: 58px;
2527
- display: block;
2528
- }
2529
-
2530
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2531
- background-position: center;
2532
- background-repeat: no-repeat;
2533
- background-size: contain;
2534
- height: 58px;
2535
- display: block;
2536
- }
2537
-
2538
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2539
- background-position: center;
2540
- background-repeat: no-repeat;
2541
- background-size: contain;
2542
- height: 58px;
2543
- display: block;
2544
- }
2545
-
2546
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2547
- background-image: url("./assets/accreditations/aacsb.svg");
2548
- width: 127px;
2549
- }
2550
-
2551
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2552
- background-image: url("./assets/accreditations/aacsb-neg.svg");
2553
- }
2554
-
2555
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2556
- background-image: url("./assets/accreditations/amba.svg");
2557
- width: 122px;
2558
- }
2559
-
2560
- .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2561
- background-image: url("./assets/accreditations/amba-neg.svg");
2562
- }
2563
-
2564
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2565
- background-image: url("./assets/accreditations/equis.svg");
2566
- width: 104px;
2567
- }
2568
-
2569
- .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2570
- background-image: url("./assets/accreditations/equis-neg.svg");
2571
- }
2572
-
2573
- .bi-footer .bi-footer--socials {
2574
- justify-content: center;
2575
- align-items: center;
2576
- gap: var(--bi-scale-8x);
2577
- flex-wrap: wrap;
2578
- display: flex;
2579
- }
2580
-
2581
- @media not (min-width: 600px) {
2582
- .bi-footer .bi-footer--socials {
2583
- gap: var(--bi-scale-2x);
2584
- }
2585
- }
2586
-
2587
- .bi-footer .bi-footer--copyright {
2588
- text-align: center;
2589
- margin: 0;
2590
- font-family: museo-slab, serif;
2591
- font-size: 1rem;
2592
- font-weight: 500;
2593
- line-height: 1.5;
2594
- }
2595
-
2596
- svg {
2597
- --bic-icon-size: inherit;
2598
- font-size: var(--bic-icon-size);
2599
- display: inline-block;
2600
- }
2601
-
2602
- svg[data-size="2xl"] {
2603
- --bic-icon-size: var(--bi-icon-2xl) !important;
2604
- }
2605
-
2606
- svg[data-size="xl"] {
2607
- --bic-icon-size: var(--bi-icon-xl) !important;
2608
- }
2609
-
2610
- svg[data-size="large"] {
2611
- --bic-icon-size: var(--bi-icon-large) !important;
2612
- }
2613
-
2614
- svg[data-size="medium"] {
2615
- --bic-icon-size: var(--bi-icon-medium) !important;
2616
- }
2617
-
2618
- svg[data-size="small"] {
2619
- --bic-icon-size: var(--bi-icon-small) !important;
2620
- }
2621
-
2622
- svg[data-color="inherit"] {
2623
- color: inherit;
2624
- }
2625
-
2626
- svg[data-color="primary"] {
2627
- color: #01417b;
2628
- }
2629
-
2630
- svg[data-color="gray"] {
2631
- color: #1c1b1b;
2632
- }
2633
-
2634
- svg[data-color="black"] {
2635
- color: var(--bi-basic-key);
2636
- }
2637
-
2638
- svg[data-color="white"] {
2639
- color: var(--bi-basic-white);
2640
- }
2641
-
2642
- :where(.bi-input) {
2643
- margin: 0;
2644
- }
2645
-
2646
- .bi-input {
2647
- --bic-input-border-color-invalid: var(--bi-alert-50);
2648
- --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2649
- --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2650
- --bic-input-caret-color: var(--bi-primary-50);
2651
- --bic-input-font-size: 1rem;
2652
- --bic-input-padding: var(--bi-scale-3x);
2653
- --bic-input-size: var(--bi-scale-11x);
2654
- --bic-input-toggle-background: var(--bi-primary-50);
2655
- --bic-input-toggle-color: var(--bi-basic-white);
2656
- --bic-input-toggle-size: 1.125rem;
2657
- --bic-input-background: var(--bi-basic-white);
2658
- --bic-input-background-readonly: var(--bi-neutral-10);
2659
- --bic-input-border-color: var(--bi-neutral-50);
2660
- --bic-input-border-color-hover: var(--bi-neutral-50);
2661
- --bic-input-border-color-readonly: var(--bi-neutral-50);
2662
- --bic-input-color-readonly: var(--bi-neutral-95);
2663
- --bic-input-color: var(--bi-neutral-95);
2664
- --bic-input-disabled-color: var(--bi-neutral-50);
2665
- --bic-input-placeholder-color: var(--bi-neutral-60);
2666
- --bic-input-focus-outline-color: var(--bi-primary-50);
2667
- --bic-input-focus-shadow-color: var(--bi-basic-white);
2668
- --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>");
2669
- }
2670
-
2671
- .bi-input[data-dark="true"] {
2672
- --bic-input-background: var(--bi-neutral-95);
2673
- --bic-input-background-readonly: var(--bi-neutral-50);
2674
- --bic-input-border-color-hover: var(--bi-neutral-25);
2675
- --bic-input-color-readonly: var(--bi-basic-white);
2676
- --bic-input-color: var(--bi-basic-white);
2677
- --bic-input-disabled-color: var(--bi-neutral-40);
2678
- --bic-input-placeholder-color: var(--bi-neutral-30);
2679
- --bic-input-focus-outline-color: var(--bi-primary-30);
2680
- --bic-input-focus-shadow-color: var(--bi-neutral-95);
2681
- --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>");
2682
- }
2683
-
2684
- .bi-input {
2685
- -webkit-appearance: none;
2686
- appearance: none;
2687
- background: var(--bic-input-background);
2688
- border-radius: var(--bi-radius-medium);
2689
- box-shadow: var(--bic-input-box-shadow);
2690
- box-sizing: border-box;
2691
- color: var(--bic-input-color);
2692
- font-family: inherit;
2693
- font-size: var(--bic-input-font-size);
2694
- height: var(--bic-input-size);
2695
- min-width: 0;
2696
- max-width: 100%;
2697
- padding: var(--bic-input-padding);
2698
- vertical-align: middle;
2699
- caret-color: var(--bic-input-caret-color);
2700
- border: none;
2701
- line-height: 1;
2702
- position: relative;
2703
- }
2704
-
2705
- .bi-input[data-size="large"] {
2706
- --bic-input-size: var(--bi-scale-14x);
2707
- --bic-input-font-size: 1.25rem;
2708
- }
2709
-
2710
- .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
2711
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
2712
- }
2713
-
2714
- .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2715
- --bic-input-border-color: var(--bic-input-focus-outline-color);
2716
- }
2717
-
2718
- .bi-input:focus-visible {
2719
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2720
- outline-offset: 0;
2721
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2722
- }
2723
-
2724
- .bi-input:focus-visible * {
2725
- --_bi--focus: ;
2726
- }
2727
-
2728
- .bi-input::placeholder {
2729
- color: var(--bic-input-placeholder-color);
2730
- }
2731
-
2732
- .bi-input:not([size], [cols]) {
2733
- width: 100%;
2734
- }
2735
-
2736
- .bi-input:disabled {
2737
- cursor: not-allowed;
2738
- }
2739
-
2740
- .bi-input[aria-disabled="true"] {
2741
- cursor: not-allowed;
2742
- }
2743
-
2744
- .bi-input[aria-invalid="true"] {
2745
- --bic-input-border-color: var(--bic-input-border-color-invalid);
2746
- }
2747
-
2748
- .bi-input[readonly] {
2749
- background: var(--bic-input-background-readonly);
2750
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2751
- color: var(--bic-input-color-readonly);
2752
- }
2753
-
2754
- .bi-input:disabled {
2755
- background: var(--bic-input-background-readonly);
2756
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2757
- color: var(--bic-input-color-readonly);
2758
- }
2759
-
2760
- .bi-input[aria-disabled="true"] {
2761
- background: var(--bic-input-background-readonly);
2762
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2763
- color: var(--bic-input-color-readonly);
2764
- }
2765
-
2766
- .bi-input:-webkit-any(textarea) {
2767
- height: auto;
2768
- min-height: calc(var(--bic-input-size) * 2);
2769
- resize: vertical;
2770
- }
2771
-
2772
- .bi-input:-webkit-any(textarea):not([rows]) {
2773
- field-sizing: content;
2774
- }
2775
-
2776
- .bi-input:is(textarea) {
2777
- height: auto;
2778
- min-height: calc(var(--bic-input-size) * 2);
2779
- resize: vertical;
2780
- }
2781
-
2782
- .bi-input:is(textarea):not([rows]) {
2783
- field-sizing: content;
2784
- }
2785
-
2786
- .bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
2787
- cursor: pointer;
2788
- }
2789
-
2790
- .bi-input:-webkit-any(select) {
2791
- background-image: var(--bic-input-select-chevron);
2792
- background-position: calc(100% - .5em);
2793
- background-repeat: no-repeat;
2794
- background-size: 1.5em;
2795
- }
2796
-
2797
- .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
2798
- cursor: pointer;
2799
- }
2800
-
2801
- .bi-input:is(select) {
2802
- background-image: var(--bic-input-select-chevron);
2803
- background-position: calc(100% - .5em);
2804
- background-repeat: no-repeat;
2805
- background-size: 1.5em;
2806
- }
2807
-
2808
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2809
- padding: var(--bi-scale-0-50x);
2810
- line-height: inherit;
2811
- height: var(--bic-input-toggle-size);
2812
- width: var(--bic-input-toggle-size);
2813
- box-shadow: none;
2814
- border-width: var(--bi-stroke-medium);
2815
- border-style: solid;
2816
- border-color: var(--bic-input-border-color);
2817
- background: none;
2818
- flex-shrink: 0;
2819
- }
2820
-
2821
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2822
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2823
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2824
- outline-offset: var(--_bi--focus, 3px);
2825
- }
2826
-
2827
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2828
- --_bi--focus: ;
2829
- }
2830
-
2831
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2832
- cursor: pointer;
2833
- }
2834
-
2835
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2836
- border-radius: var(--bi-radius-full);
2837
- }
2838
-
2839
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
2840
- content: "";
2841
- background-color: var(--bic-input-toggle-background);
2842
- border-radius: 100%;
2843
- width: 0;
2844
- height: 0;
2845
- transition: width .1s ease-in-out, height .1s ease-in-out;
2846
- display: block;
2847
- position: absolute;
2848
- top: 50%;
2849
- left: 50%;
2850
- transform: translate(-50%, -50%);
2851
- }
2852
-
2853
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2854
- --bic-input-border-color: var(--bic-input-toggle-background);
2855
- }
2856
-
2857
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2858
- width: 12px;
2859
- height: 12px;
2860
- }
2861
-
2862
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2863
- border-radius: var(--bi-radius-small);
2864
- place-content: center;
2865
- display: grid;
2866
- }
2867
-
2868
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
2869
- content: "";
2870
- width: .7em;
2871
- height: .7em;
2872
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2873
- transform-origin: center;
2874
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2875
- transition: transform .2s ease-in-out;
2876
- transform: scale(0);
2535
+ @media (width < 600px) {
2536
+ .bi-footer .bi-footer--accreditations {
2537
+ gap: var(--bi-scale-2x) var(--bi-scale-1x);
2538
+ }
2877
2539
  }
2878
2540
 
2879
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
2880
- background: var(--bic-input-toggle-background);
2881
- --bic-input-border-color: var(--bic-input-toggle-background);
2541
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2542
+ background-position: center;
2543
+ background-repeat: no-repeat;
2544
+ background-size: contain;
2545
+ height: 58px;
2546
+ display: block;
2882
2547
  }
2883
2548
 
2884
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2885
- transform: scale(1);
2549
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2550
+ background-image: url("./assets/accreditations/aacsb.svg");
2551
+ width: 127px;
2886
2552
  }
2887
2553
 
2888
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
2889
- background: var(--bic-input-toggle-background);
2890
- --bic-input-border-color: var(--bic-input-toggle-background);
2554
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2555
+ background-image: url("./assets/accreditations/aacsb-neg.svg");
2891
2556
  }
2892
2557
 
2893
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2894
- transform: scale(1);
2558
+ .bi-footer .bi-footer--accreditations .bi-footer--amba {
2559
+ background-image: url("./assets/accreditations/amba.svg");
2560
+ width: 122px;
2895
2561
  }
2896
2562
 
2897
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2898
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2563
+ .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2564
+ background-image: url("./assets/accreditations/amba-neg.svg");
2899
2565
  }
2900
2566
 
2901
- .bi-input:is([type="checkbox"], [type="radio"]) {
2902
- padding: var(--bi-scale-0-50x);
2903
- line-height: inherit;
2904
- height: var(--bic-input-toggle-size);
2905
- width: var(--bic-input-toggle-size);
2906
- box-shadow: none;
2907
- border-width: var(--bi-stroke-medium);
2908
- border-style: solid;
2909
- border-color: var(--bic-input-border-color);
2910
- background: none;
2911
- flex-shrink: 0;
2567
+ .bi-footer .bi-footer--accreditations .bi-footer--equis {
2568
+ background-image: url("./assets/accreditations/equis.svg");
2569
+ width: 104px;
2912
2570
  }
2913
2571
 
2914
- .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2915
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2916
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2917
- outline-offset: var(--_bi--focus, 3px);
2572
+ .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2573
+ background-image: url("./assets/accreditations/equis-neg.svg");
2918
2574
  }
2919
2575
 
2920
- .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2921
- --_bi--focus: ;
2576
+ .bi-footer .bi-footer--socials {
2577
+ justify-content: center;
2578
+ align-items: center;
2579
+ gap: var(--bi-scale-8x);
2580
+ flex-wrap: wrap;
2581
+ display: flex;
2922
2582
  }
2923
2583
 
2924
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2925
- cursor: pointer;
2584
+ @media (width < 600px) {
2585
+ .bi-footer .bi-footer--socials {
2586
+ gap: var(--bi-scale-2x);
2587
+ }
2926
2588
  }
2927
2589
 
2928
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2929
- border-radius: var(--bi-radius-full);
2590
+ .bi-footer .bi-footer--copyright {
2591
+ text-align: center;
2592
+ margin: 0;
2593
+ font-family: museo-slab, serif;
2594
+ font-size: 1rem;
2595
+ font-weight: 500;
2596
+ line-height: 1.5;
2930
2597
  }
2931
2598
 
2932
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
2933
- content: "";
2934
- background-color: var(--bic-input-toggle-background);
2935
- border-radius: 100%;
2936
- width: 0;
2937
- height: 0;
2938
- transition: width .1s ease-in-out, height .1s ease-in-out;
2939
- display: block;
2940
- position: absolute;
2941
- top: 50%;
2942
- left: 50%;
2943
- transform: translate(-50%, -50%);
2599
+ svg {
2600
+ --bic-icon-size: inherit;
2601
+ font-size: var(--bic-icon-size);
2602
+ display: inline-block;
2944
2603
  }
2945
2604
 
2946
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2947
- --bic-input-border-color: var(--bic-input-toggle-background);
2605
+ svg[data-size="2xl"] {
2606
+ --bic-icon-size: var(--bi-icon-2xl) !important;
2948
2607
  }
2949
2608
 
2950
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2951
- width: 12px;
2952
- height: 12px;
2609
+ svg[data-size="xl"] {
2610
+ --bic-icon-size: var(--bi-icon-xl) !important;
2953
2611
  }
2954
2612
 
2955
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2956
- border-radius: var(--bi-radius-small);
2957
- place-content: center;
2958
- display: grid;
2613
+ svg[data-size="large"] {
2614
+ --bic-icon-size: var(--bi-icon-large) !important;
2959
2615
  }
2960
2616
 
2961
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
2962
- content: "";
2963
- width: .7em;
2964
- height: .7em;
2965
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2966
- transform-origin: center;
2967
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2968
- transition: transform .2s ease-in-out;
2969
- transform: scale(0);
2617
+ svg[data-size="medium"] {
2618
+ --bic-icon-size: var(--bi-icon-medium) !important;
2970
2619
  }
2971
2620
 
2972
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
2973
- background: var(--bic-input-toggle-background);
2974
- --bic-input-border-color: var(--bic-input-toggle-background);
2621
+ svg[data-size="small"] {
2622
+ --bic-icon-size: var(--bi-icon-small) !important;
2975
2623
  }
2976
2624
 
2977
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2978
- transform: scale(1);
2625
+ svg[data-color="inherit"] {
2626
+ color: inherit;
2979
2627
  }
2980
2628
 
2981
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
2982
- background: var(--bic-input-toggle-background);
2983
- --bic-input-border-color: var(--bic-input-toggle-background);
2629
+ svg[data-color="primary"] {
2630
+ color: #01417b;
2984
2631
  }
2985
2632
 
2986
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2987
- transform: scale(1);
2633
+ svg[data-color="gray"] {
2634
+ color: #1c1b1b;
2988
2635
  }
2989
2636
 
2990
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2991
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2637
+ svg[data-color="black"] {
2638
+ color: var(--bi-basic-key);
2639
+ }
2640
+
2641
+ svg[data-color="white"] {
2642
+ color: var(--bi-basic-white);
2992
2643
  }
2993
2644
 
2994
2645
  .bi-label {
@@ -3020,18 +2671,7 @@ svg[data-color="white"] {
3020
2671
  .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
3021
2672
  content: "*";
3022
2673
  color: var(--bic-label-required-color);
3023
- }
3024
-
3025
- .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 {
3026
- padding-right: var(--bi-scale-0-25x);
3027
- }
3028
-
3029
- .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 {
3030
- padding-left: var(--bi-scale-0-25x);
3031
- }
3032
-
3033
- .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 {
3034
- padding-left: var(--bi-scale-0-25x);
2674
+ padding-inline-end: var(--bi-scale-0-25x);
3035
2675
  }
3036
2676
 
3037
2677
  .bi-link {
@@ -3044,19 +2684,13 @@ svg[data-color="white"] {
3044
2684
  --bic-link-focus-shadow-color: var(--bi-basic-white);
3045
2685
  --bic-link-focus-outline-color: var(--bi-primary-50);
3046
2686
  color: var(--bic-link-color);
3047
- -webkit-text-decoration-line: underline;
3048
2687
  text-decoration-line: underline;
3049
- -webkit-text-decoration-style: solid;
3050
2688
  text-decoration-style: solid;
3051
2689
  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
3052
2690
  text-underline-offset: .25em;
3053
2691
  outline: none;
3054
2692
  }
3055
2693
 
3056
- .bi-link :-webkit-any(img, svg) {
3057
- vertical-align: middle;
3058
- }
3059
-
3060
2694
  .bi-link :is(img, svg) {
3061
2695
  vertical-align: middle;
3062
2696
  }
@@ -3150,7 +2784,7 @@ svg[data-color="white"] {
3150
2784
  --bic-logo-height: var(--bi-scale-48x);
3151
2785
  }
3152
2786
 
3153
- @media (min-width: 795px) {
2787
+ @media (width >= 795px) {
3154
2788
  .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
3155
2789
  aspect-ratio: .974318;
3156
2790
  background-image: url("./assets/logos/international-vertical-dark.svg");
@@ -3166,7 +2800,7 @@ svg[data-color="white"] {
3166
2800
  background-image: url("./assets/logos/dark.svg");
3167
2801
  }
3168
2802
 
3169
- @media (min-width: 795px) {
2803
+ @media (width >= 795px) {
3170
2804
  .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
3171
2805
  aspect-ratio: .974318;
3172
2806
  background-image: url("./assets/logos/international-vertical.svg");
@@ -3208,7 +2842,7 @@ svg[data-color="white"] {
3208
2842
  display: flex;
3209
2843
  }
3210
2844
 
3211
- @media not (min-width: 768px) {
2845
+ @media (width < 768px) {
3212
2846
  .bi-navbar > header {
3213
2847
  padding: 0 var(--bi-scale-4x);
3214
2848
  }
@@ -3278,40 +2912,11 @@ svg[data-color="white"] {
3278
2912
  --bic-pagination-selected-background: var(--bi-primary-80);
3279
2913
  }
3280
2914
 
3281
- .bi-pagination :-webkit-any(ol, ul) {
3282
- color: var(--bic-pagination-color);
3283
- gap: var(--bic-pagination-gap);
3284
- flex-wrap: wrap;
3285
- align-items: center;
3286
- width: -webkit-fit-content;
3287
- width: fit-content;
3288
- margin: 0;
3289
- padding: 0;
3290
- list-style: none;
3291
- display: flex;
3292
- }
3293
-
3294
- .bi-pagination :-webkit-any(ol, ul) > li:empty:before {
3295
- content: "...";
3296
- min-width: var(--bi-scale-11x);
3297
- text-align: center;
3298
- display: block;
3299
- }
3300
-
3301
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
3302
- --bic-button-font-size: 1rem;
3303
- }
3304
-
3305
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
3306
- background-color: var(--bic-pagination-selected-background);
3307
- }
3308
-
3309
2915
  .bi-pagination :is(ol, ul) {
3310
2916
  color: var(--bic-pagination-color);
3311
2917
  gap: var(--bic-pagination-gap);
3312
2918
  flex-wrap: wrap;
3313
2919
  align-items: center;
3314
- width: -webkit-fit-content;
3315
2920
  width: fit-content;
3316
2921
  margin: 0;
3317
2922
  padding: 0;
@@ -3334,95 +2939,6 @@ svg[data-color="white"] {
3334
2939
  background-color: var(--bic-pagination-selected-background);
3335
2940
  }
3336
2941
 
3337
- .bi-popover {
3338
- --bic-popover-arrow-size: var(--bi-scale-3x);
3339
- --bic-popover-background: var(--bi-basic-white);
3340
- --bic-popover-border-width: var(--bi-stroke-thin);
3341
- --bic-popover-border-style: solid;
3342
- --bic-popover-border-color: var(--bi-neutral-15);
3343
- --bic-popover-color: var(--bi-neutral-90);
3344
- --bic-popover-border-radius: var(--bi-radius-medium);
3345
- --bic-popover-max-width: 300px;
3346
- --bic-popover-padding: var(--bi-scale-1x);
3347
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3348
- }
3349
-
3350
- .bi-popover[data-dark="true"] {
3351
- --bic-popover-background: var(--bi-neutral-95);
3352
- --bic-popover-border-color: var(--bi-neutral-70);
3353
- --bic-popover-color: var(--bi-neutral-5);
3354
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3355
- }
3356
-
3357
- .bi-popover {
3358
- background: var(--bic-popover-background);
3359
- border-radius: var(--bic-popover-border-radius);
3360
- border-width: var(--bic-popover-border-width);
3361
- border-style: var(--bic-popover-border-style);
3362
- border-color: var(--bic-popover-border-color);
3363
- box-shadow: var(--bic-popover-box-shadow);
3364
- box-sizing: border-box;
3365
- color: var(--bic-popover-color);
3366
- max-width: var(--bic-popover-max-width);
3367
- padding: var(--bic-popover-padding);
3368
- z-index: 100000;
3369
- display: none;
3370
- position: fixed;
3371
- top: 0;
3372
- bottom: auto;
3373
- left: 0;
3374
- right: auto;
3375
- overflow: visible;
3376
- }
3377
-
3378
- .bi-popover[aria-hidden="false"] {
3379
- display: block;
3380
- }
3381
-
3382
- .bi-popover[data-arrow="true"]:before {
3383
- background: var(--bic-popover-background);
3384
- border: inherit;
3385
- box-sizing: border-box;
3386
- content: "";
3387
- height: var(--bic-popover-arrow-size);
3388
- left: var(--bic-popover-arrow-x);
3389
- top: var(--bic-popover-arrow-y);
3390
- width: var(--bic-popover-arrow-size);
3391
- border-top-color: #0000;
3392
- border-left-color: #0000;
3393
- position: absolute;
3394
- translate: -50% -50%;
3395
- }
3396
-
3397
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
3398
- rotate: 45deg;
3399
- }
3400
-
3401
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
3402
- rotate: -45deg;
3403
- }
3404
-
3405
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
3406
- rotate: 135deg;
3407
- }
3408
-
3409
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3410
- rotate: -135deg;
3411
- }
3412
-
3413
- [data-popover="inline"] {
3414
- all: unset;
3415
- cursor: pointer;
3416
- text-underline-offset: .27em;
3417
- font-size: inherit;
3418
- -webkit-text-decoration: underline dotted;
3419
- text-decoration: underline dotted;
3420
- }
3421
-
3422
- [data-popover="inline"]:not([hidden]) {
3423
- display: inline;
3424
- }
3425
-
3426
2942
  .bi-search:has(:focus-visible) .bi-field--affix:first-child {
3427
2943
  color: var(--bi-primary-50);
3428
2944
  }
@@ -3431,10 +2947,6 @@ svg[data-color="white"] {
3431
2947
  --bic-field-padding-inline: 0;
3432
2948
  }
3433
2949
 
3434
- .bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
3435
- display: none;
3436
- }
3437
-
3438
2950
  .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
3439
2951
  display: none;
3440
2952
  }
@@ -3475,11 +2987,13 @@ svg[data-color="white"] {
3475
2987
  .bi-spinner {
3476
2988
  --bic-spinner-color: currentColor;
3477
2989
  aspect-ratio: 1;
3478
- background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
2990
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
2991
+ conic-gradient(#0000 30%, var(--bic-spinner-color));
3479
2992
  border-radius: 50%;
3480
2993
  width: 1em;
3481
2994
  height: 1em;
3482
2995
  animation: 1s linear infinite bi-spinner;
2996
+ display: inline-block;
3483
2997
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3484
2998
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3485
2999
  }
@@ -3526,7 +3040,6 @@ svg[data-color="white"] {
3526
3040
 
3527
3041
  .bi-sticky-header {
3528
3042
  z-index: 100;
3529
- position: -webkit-sticky;
3530
3043
  position: sticky;
3531
3044
  }
3532
3045
 
@@ -3568,7 +3081,6 @@ svg[data-color="white"] {
3568
3081
  overflow-y: auto;
3569
3082
  overflow-x: unset;
3570
3083
  flex-direction: column;
3571
- width: -webkit-fit-content;
3572
3084
  width: fit-content;
3573
3085
  }
3574
3086
 
@@ -3647,16 +3159,8 @@ svg[data-color="white"] {
3647
3159
  position: relative;
3648
3160
  }
3649
3161
 
3650
- .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)) {
3651
- padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3652
- }
3653
-
3654
- .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)) {
3655
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3656
- }
3657
-
3658
- .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)) {
3659
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3162
+ .bi-validation-message:has( > svg) {
3163
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3660
3164
  }
3661
3165
 
3662
3166
  .bi-validation-message > svg {
@@ -3666,11 +3170,7 @@ svg[data-color="white"] {
3666
3170
  position: absolute;
3667
3171
  }
3668
3172
 
3669
- html:has(.bi-navbar) {
3670
- scroll-padding-top: var(--bi-layout-navbar-height);
3671
- }
3672
-
3673
- html:has(.bi-sub-navbar) {
3173
+ :is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
3674
3174
  scroll-padding-top: var(--bi-layout-navbar-height);
3675
3175
  }
3676
3176
 
@@ -3699,5 +3199,5 @@ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][da
3699
3199
  }
3700
3200
 
3701
3201
  html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
3702
- top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
3202
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
3703
3203
  }