@bi-digital/css 0.6.7 → 0.7.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) {
915
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button) {
935
916
  cursor: pointer;
936
917
  text-decoration: none;
937
918
  transition: box-shadow .25s ease-in-out;
938
919
  position: relative;
939
920
  }
940
921
 
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);
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);
943
925
  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
944
926
  outline-offset: var(--_bi--focus, 2px);
945
927
  }
946
928
 
947
- .bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
929
+ :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
948
930
  --_bi--focus: ;
949
931
  }
950
932
 
951
933
  @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);
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);
954
938
  }
955
939
  }
956
940
 
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);
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);
959
945
  }
960
946
 
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) {
1028
- cursor: pointer;
1029
- text-decoration: none;
1030
- transition: box-shadow .25s ease-in-out;
1031
- position: relative;
1032
- }
1033
-
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);
1036
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1037
- outline-offset: var(--_bi--focus, 2px);
1038
- }
1039
-
1040
- .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
1041
- --_bi--focus: ;
1042
- }
1043
-
1044
- @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);
1047
- }
1048
- }
1049
-
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);
1052
- }
1053
-
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) {
1301
+ .bi-chip:is(button), .bi-chip:is(a) {
1424
1302
  cursor: pointer;
1425
1303
  border: none;
1426
1304
  text-decoration: none;
1427
1305
  }
1428
1306
 
1429
- .bi-chip:-webkit-any(button):focus-visible {
1307
+ :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
1430
1308
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1431
1309
  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1432
1310
  outline-offset: var(--_bi--focus, 2px);
1433
1311
  }
1434
1312
 
1435
1313
  @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);
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);
1438
1317
  }
1439
1318
  }
1440
1319
 
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) {
1490
- cursor: pointer;
1491
- border: none;
1492
- text-decoration: none;
1493
- }
1494
-
1495
- .bi-chip:is(a):focus-visible {
1496
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1497
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1498
- outline-offset: var(--_bi--focus, 2px);
1499
- }
1500
-
1501
- @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);
1504
- }
1505
- }
1506
-
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"] {
1638
+ .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1833
1639
  min-width: var(--bic-drawer-min-width);
1834
1640
  max-width: var(--bic-drawer-max-width);
1835
- width: -webkit-fit-content;
1836
1641
  width: fit-content;
1837
1642
  height: 100dvh;
1838
1643
  }
1839
1644
 
1840
- .bi-dialog.bi-drawer[data-anchor="right"] {
1841
- min-width: var(--bic-drawer-min-width);
1842
- max-width: var(--bic-drawer-max-width);
1843
- width: -webkit-fit-content;
1844
- width: fit-content;
1845
- height: 100dvh;
1846
- }
1847
-
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%;
@@ -1889,14 +1679,16 @@ body:has(.bi-dialog:modal) {
1889
1679
  --bic-dropdown-border-width: var(--bi-stroke-thin);
1890
1680
  --bic-dropdown-border-style: solid;
1891
1681
  --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;
1682
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1683
+ 0px 2px 2px -1px #26333f0a;
1893
1684
  }
1894
1685
 
1895
1686
  .bi-dropdown[data-dark="true"] {
1896
1687
  --bic-dropdown-background: var(--bi-neutral-100);
1897
1688
  --bic-dropdown-border-color: var(--bi-neutral-90);
1898
1689
  --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;
1690
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1691
+ 0px 2px 2px -1px #26333f0a;
1900
1692
  }
1901
1693
 
1902
1694
  .bi-dropdown {
@@ -1921,17 +1713,6 @@ body:has(.bi-dialog:modal) {
1921
1713
  display: flex;
1922
1714
  }
1923
1715
 
1924
- .bi-dropdown :-webkit-any(a, button, [role="button"]) {
1925
- padding: var(--bic-dropdown-item-padding);
1926
- min-height: var(--bic-dropdown-item-size);
1927
- justify-content: start;
1928
- width: 100%;
1929
- }
1930
-
1931
- .bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
1932
- margin-left: auto;
1933
- }
1934
-
1935
1716
  .bi-dropdown :is(a, button, [role="button"]) {
1936
1717
  padding: var(--bic-dropdown-item-padding);
1937
1718
  min-height: var(--bic-dropdown-item-size);
@@ -1956,6 +1737,7 @@ body:has(.bi-dialog:modal) {
1956
1737
  --bic-field-affix-color: var(--bi-neutral-60);
1957
1738
  --bic-field-background: var(--bi-basic-white);
1958
1739
  --bic-field-background-hover: var(--bi-states-hover-dark);
1740
+ --bic-field-background-press: var(--bi-states-press-dark);
1959
1741
  --bic-field-background-readonly: var(--bi-neutral-10);
1960
1742
  --bic-field-border-color: var(--bi-neutral-50);
1961
1743
  --bic-field-border-color-hover: var(--bi-neutral-50);
@@ -1972,6 +1754,7 @@ body:has(.bi-dialog:modal) {
1972
1754
  --bic-field-affix-color: var(--bi-neutral-30);
1973
1755
  --bic-field-background: var(--bi-neutral-95);
1974
1756
  --bic-field-background-hover: var(--bi-states-hover-light);
1757
+ --bic-field-background-press: var(--bi-states-press-light);
1975
1758
  --bic-field-background-readonly: var(--bi-neutral-50);
1976
1759
  --bic-field-border-color-hover: var(--bi-neutral-25);
1977
1760
  --bic-field-disabled-color: var(--bi-neutral-40);
@@ -1983,8 +1766,7 @@ body:has(.bi-dialog:modal) {
1983
1766
  }
1984
1767
 
1985
1768
  .bi-field > * {
1986
- margin-top: 0;
1987
- margin-bottom: 0;
1769
+ margin-block: 0;
1988
1770
  }
1989
1771
 
1990
1772
  .bi-field > * + * {
@@ -2019,104 +1801,40 @@ body:has(.bi-dialog:modal) {
2019
1801
  width: 100%;
2020
1802
  }
2021
1803
 
2022
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
1804
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
2023
1805
  border-radius: var(--bi-radius-medium);
2024
- grid-template-areas: "input content";
2025
- grid-template-columns: var(--bi-scale-5x) 1fr;
2026
1806
  gap: 0 var(--bi-scale-3x);
2027
- width: -webkit-fit-content;
2028
1807
  width: fit-content;
2029
1808
  padding: var(--bi-scale-2x) var(--bi-scale-3x);
1809
+ grid-template-columns: auto 1fr;
1810
+ grid-template-areas: "input content";
2030
1811
  align-items: center;
2031
1812
  }
2032
1813
 
2033
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):not([hidden]) {
1814
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
2034
1815
  display: grid;
2035
1816
  }
2036
1817
 
2037
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
1818
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
2038
1819
  width: 100%;
2039
1820
  }
2040
1821
 
2041
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) > * {
2042
- grid-column: content;
2043
- margin-top: 0;
2044
- margin-bottom: 0;
2045
- }
2046
-
2047
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
2048
- margin: var(--bi-scale-0-50x) 0;
2049
- -webkit-user-select: none;
2050
- user-select: none;
2051
- font-size: 1rem;
2052
- line-height: 1.5;
2053
- }
2054
-
2055
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
2056
- margin: var(--bi-scale-1x) auto;
2057
- grid-area: 1 / input;
2058
- align-self: flex-start;
2059
- }
2060
-
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;
1822
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
1823
+ border-radius: var(--bi-scale-24x);
1824
+ padding: var(--bi-scale-1x) var(--bi-scale-2x);
2063
1825
  }
2064
1826
 
2065
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2066
- cursor: pointer;
1827
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
1828
+ padding-inline-end: var(--bi-scale-4x);
2067
1829
  }
2068
1830
 
2069
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
2070
- gap: 0;
2071
- }
2072
-
2073
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
2074
- background: var(--_bi--hover, var(--bic-field-background-hover));
2075
- }
2076
-
2077
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
2078
- --_bi--hover: ;
2079
- }
2080
-
2081
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2082
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2083
- outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2084
- outline-offset: var(--_bi--focus, 2px);
2085
- }
2086
-
2087
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
2088
- --_bi--focus: ;
2089
- }
2090
-
2091
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
2092
- grid-template-areas: "content input";
2093
- grid-template-columns: 1fr var(--bi-scale-5x);
2094
- width: auto;
2095
- }
2096
-
2097
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
2098
- 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;
2106
- }
2107
-
2108
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
2109
- display: grid;
2110
- }
2111
-
2112
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
2113
- width: 100%;
1831
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
1832
+ padding-inline-start: var(--bi-scale-4x);
2114
1833
  }
2115
1834
 
2116
1835
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
2117
1836
  grid-column: content;
2118
- margin-top: 0;
2119
- margin-bottom: 0;
1837
+ margin-block: 0;
2120
1838
  }
2121
1839
 
2122
1840
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
@@ -2133,10 +1851,6 @@ body:has(.bi-dialog:modal) {
2133
1851
  align-self: flex-start;
2134
1852
  }
2135
1853
 
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
1854
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
2141
1855
  cursor: pointer;
2142
1856
  }
@@ -2153,6 +1867,14 @@ body:has(.bi-dialog:modal) {
2153
1867
  --_bi--hover: ;
2154
1868
  }
2155
1869
 
1870
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
1871
+ background: var(--_bi--hover, var(--bic-field-background-press));
1872
+ }
1873
+
1874
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
1875
+ --_bi--hover: ;
1876
+ }
1877
+
2156
1878
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2157
1879
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2158
1880
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
@@ -2164,9 +1886,8 @@ body:has(.bi-dialog:modal) {
2164
1886
  }
2165
1887
 
2166
1888
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
1889
+ grid-template-columns: 1fr auto;
2167
1890
  grid-template-areas: "content input";
2168
- grid-template-columns: 1fr var(--bi-scale-5x);
2169
- width: auto;
2170
1891
  }
2171
1892
 
2172
1893
  .bi-field .bi-field--affixes {
@@ -2189,7 +1910,6 @@ body:has(.bi-dialog:modal) {
2189
1910
  }
2190
1911
 
2191
1912
  .bi-field .bi-field--affixes:has(.bi-input[size]) {
2192
- width: -webkit-fit-content;
2193
1913
  width: fit-content;
2194
1914
  }
2195
1915
 
@@ -2204,7 +1924,8 @@ body:has(.bi-dialog:modal) {
2204
1924
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2205
1925
  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2206
1926
  outline-offset: 0;
2207
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1927
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1928
+ 0px 0px 10px 0px #0000000d);
2208
1929
  }
2209
1930
 
2210
1931
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -2222,46 +1943,18 @@ body:has(.bi-dialog:modal) {
2222
1943
  display: flex;
2223
1944
  }
2224
1945
 
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;
1946
+ .bi-field .bi-field--affixes .bi-field--affix:first-child {
1947
+ border-inline-end: 0;
1948
+ border-start-start-radius: inherit;
1949
+ border-end-start-radius: inherit;
1950
+ padding-inline-end: 0;
2230
1951
  }
2231
1952
 
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;
1953
+ .bi-field .bi-field--affixes .bi-field--affix:last-child {
1954
+ border-inline-start: 0;
1955
+ border-start-end-radius: inherit;
1956
+ border-end-end-radius: inherit;
1957
+ padding-inline-start: 0;
2265
1958
  }
2266
1959
 
2267
1960
  .bi-fieldset {
@@ -2288,7 +1981,7 @@ body:has(.bi-dialog:modal) {
2288
1981
  }
2289
1982
 
2290
1983
  .bi-fieldset > * + * {
2291
- margin-top: var(--bi-scale-1x);
1984
+ margin-block-start: var(--bi-scale-1x);
2292
1985
  }
2293
1986
 
2294
1987
  .bi-fieldset > legend + p {
@@ -2300,18 +1993,16 @@ body:has(.bi-dialog:modal) {
2300
1993
  line-height: 1.15;
2301
1994
  }
2302
1995
 
2303
- .bi-fieldset:disabled > legend {
2304
- opacity: var(--ds-opacity-disabled);
2305
- }
2306
-
2307
- .bi-fieldset:disabled > legend + p {
1996
+ .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
2308
1997
  opacity: var(--ds-opacity-disabled);
2309
1998
  }
2310
1999
 
2311
2000
  .bi-filter-group {
2312
2001
  --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);
2002
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
2003
+ var(--bic-filter-group-background);
2004
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
2005
+ var(--bic-filter-group-background);
2315
2006
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
2316
2007
  --bic-filter-group-border-color: var(--bi-neutral-15);
2317
2008
  --bic-filter-group-text-color: var(--bi-neutral-90);
@@ -2321,8 +2012,10 @@ body:has(.bi-dialog:modal) {
2321
2012
 
2322
2013
  .bi-filter-group[data-dark="true"] {
2323
2014
  --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);
2015
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
2016
+ var(--bic-filter-group-background);
2017
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
2018
+ var(--bic-filter-group-background);
2326
2019
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
2327
2020
  --bic-filter-group-border-color: var(--bi-neutral-70);
2328
2021
  --bic-filter-group-text-color: var(--bi-basic-white);
@@ -2341,9 +2034,9 @@ body:has(.bi-dialog:modal) {
2341
2034
  height: var(--bi-scale-12x);
2342
2035
  color: var(--bic-filter-group-text-color);
2343
2036
  align-items: center;
2344
- gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2037
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2345
2038
  width: 100%;
2346
- padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2039
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2347
2040
  background: var(--bic-filter-group-background);
2348
2041
  cursor: pointer;
2349
2042
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2452,7 +2145,7 @@ body:has(.bi-dialog:modal) {
2452
2145
  display: flex;
2453
2146
  }
2454
2147
 
2455
- @media not (min-width: 768px) {
2148
+ @media (width < 768px) {
2456
2149
  .bi-footer .bi-footer--links-container {
2457
2150
  flex-direction: column;
2458
2151
  }
@@ -2471,7 +2164,7 @@ body:has(.bi-dialog:modal) {
2471
2164
  display: flex;
2472
2165
  }
2473
2166
 
2474
- @media not (min-width: 768px) {
2167
+ @media (width < 768px) {
2475
2168
  .bi-footer .bi-footer--links-container .bi-footer--links {
2476
2169
  flex-direction: column;
2477
2170
  }
@@ -2482,7 +2175,7 @@ body:has(.bi-dialog:modal) {
2482
2175
  font-weight: 300;
2483
2176
  }
2484
2177
 
2485
- @media not (min-width: 768px) {
2178
+ @media (width < 768px) {
2486
2179
  .bi-footer .bi-footer--links-container .bi-footer--links > p {
2487
2180
  margin: var(--bi-scale-3x) 0;
2488
2181
  }
@@ -2498,7 +2191,7 @@ body:has(.bi-dialog:modal) {
2498
2191
  display: flex;
2499
2192
  }
2500
2193
 
2501
- @media not (min-width: 768px) {
2194
+ @media (width < 768px) {
2502
2195
  .bi-footer .bi-footer--links-container .bi-footer--links > div {
2503
2196
  flex-direction: column;
2504
2197
  }
@@ -2513,29 +2206,13 @@ body:has(.bi-dialog:modal) {
2513
2206
  display: flex;
2514
2207
  }
2515
2208
 
2516
- @media not (min-width: 600px) {
2209
+ @media (width < 600px) {
2517
2210
  .bi-footer .bi-footer--accreditations {
2518
2211
  gap: var(--bi-scale-2x) var(--bi-scale-1x);
2519
2212
  }
2520
2213
  }
2521
2214
 
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 {
2215
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2539
2216
  background-position: center;
2540
2217
  background-repeat: no-repeat;
2541
2218
  background-size: contain;
@@ -2578,7 +2255,7 @@ body:has(.bi-dialog:modal) {
2578
2255
  display: flex;
2579
2256
  }
2580
2257
 
2581
- @media not (min-width: 600px) {
2258
+ @media (width < 600px) {
2582
2259
  .bi-footer .bi-footer--socials {
2583
2260
  gap: var(--bi-scale-2x);
2584
2261
  }
@@ -2682,7 +2359,6 @@ svg[data-color="white"] {
2682
2359
  }
2683
2360
 
2684
2361
  .bi-input {
2685
- -webkit-appearance: none;
2686
2362
  appearance: none;
2687
2363
  background: var(--bic-input-background);
2688
2364
  border-radius: var(--bi-radius-medium);
@@ -2718,7 +2394,8 @@ svg[data-color="white"] {
2718
2394
  .bi-input:focus-visible {
2719
2395
  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2720
2396
  outline-offset: 0;
2721
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2397
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
2398
+ 0px 0px 10px 0px #0000000d);
2722
2399
  }
2723
2400
 
2724
2401
  .bi-input:focus-visible * {
@@ -2733,11 +2410,7 @@ svg[data-color="white"] {
2733
2410
  width: 100%;
2734
2411
  }
2735
2412
 
2736
- .bi-input:disabled {
2737
- cursor: not-allowed;
2738
- }
2739
-
2740
- .bi-input[aria-disabled="true"] {
2413
+ .bi-input:disabled, .bi-input[aria-disabled="true"] {
2741
2414
  cursor: not-allowed;
2742
2415
  }
2743
2416
 
@@ -2745,34 +2418,12 @@ svg[data-color="white"] {
2745
2418
  --bic-input-border-color: var(--bic-input-border-color-invalid);
2746
2419
  }
2747
2420
 
2748
- .bi-input[readonly] {
2421
+ .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
2749
2422
  background: var(--bic-input-background-readonly);
2750
2423
  --bic-input-border-color: var(--bic-input-border-color-readonly);
2751
2424
  color: var(--bic-input-color-readonly);
2752
2425
  }
2753
2426
 
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
2427
  .bi-input:is(textarea) {
2777
2428
  height: auto;
2778
2429
  min-height: calc(var(--bic-input-size) * 2);
@@ -2783,17 +2434,6 @@ svg[data-color="white"] {
2783
2434
  field-sizing: content;
2784
2435
  }
2785
2436
 
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
2437
  .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
2798
2438
  cursor: pointer;
2799
2439
  }
@@ -2805,7 +2445,7 @@ svg[data-color="white"] {
2805
2445
  background-size: 1.5em;
2806
2446
  }
2807
2447
 
2808
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2448
+ .bi-input[type="checkbox"], .bi-input[type="radio"] {
2809
2449
  padding: var(--bi-scale-0-50x);
2810
2450
  line-height: inherit;
2811
2451
  height: var(--bic-input-toggle-size);
@@ -2818,25 +2458,25 @@ svg[data-color="white"] {
2818
2458
  flex-shrink: 0;
2819
2459
  }
2820
2460
 
2821
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2461
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
2822
2462
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2823
2463
  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2824
2464
  outline-offset: var(--_bi--focus, 3px);
2825
2465
  }
2826
2466
 
2827
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2467
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
2828
2468
  --_bi--focus: ;
2829
2469
  }
2830
2470
 
2831
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2471
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2832
2472
  cursor: pointer;
2833
2473
  }
2834
2474
 
2835
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2475
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
2836
2476
  border-radius: var(--bi-radius-full);
2837
2477
  }
2838
2478
 
2839
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
2479
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
2840
2480
  content: "";
2841
2481
  background-color: var(--bic-input-toggle-background);
2842
2482
  border-radius: 100%;
@@ -2850,22 +2490,22 @@ svg[data-color="white"] {
2850
2490
  transform: translate(-50%, -50%);
2851
2491
  }
2852
2492
 
2853
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2493
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
2854
2494
  --bic-input-border-color: var(--bic-input-toggle-background);
2855
2495
  }
2856
2496
 
2857
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2497
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
2858
2498
  width: 12px;
2859
2499
  height: 12px;
2860
2500
  }
2861
2501
 
2862
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2502
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
2863
2503
  border-radius: var(--bi-radius-small);
2864
2504
  place-content: center;
2865
2505
  display: grid;
2866
2506
  }
2867
2507
 
2868
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
2508
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
2869
2509
  content: "";
2870
2510
  width: .7em;
2871
2511
  height: .7em;
@@ -2876,119 +2516,41 @@ svg[data-color="white"] {
2876
2516
  transform: scale(0);
2877
2517
  }
2878
2518
 
2879
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
2519
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
2880
2520
  background: var(--bic-input-toggle-background);
2881
2521
  --bic-input-border-color: var(--bic-input-toggle-background);
2882
2522
  }
2883
2523
 
2884
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2524
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
2885
2525
  transform: scale(1);
2886
2526
  }
2887
2527
 
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);
2891
- }
2892
-
2893
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2894
- transform: scale(1);
2895
- }
2896
-
2897
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2528
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
2898
2529
  clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2899
2530
  }
2900
2531
 
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;
2912
- }
2913
-
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);
2918
- }
2919
-
2920
- .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2921
- --_bi--focus: ;
2922
- }
2923
-
2924
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2925
- cursor: pointer;
2926
- }
2927
-
2928
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
2929
- border-radius: var(--bi-radius-full);
2930
- }
2931
-
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%);
2944
- }
2945
-
2946
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
2947
- --bic-input-border-color: var(--bic-input-toggle-background);
2948
- }
2949
-
2950
- .bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
2951
- width: 12px;
2952
- height: 12px;
2953
- }
2954
-
2955
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
2956
- border-radius: var(--bi-radius-small);
2957
- place-content: center;
2958
- display: grid;
2959
- }
2960
-
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);
2970
- }
2971
-
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);
2975
- }
2976
-
2977
- .bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
2978
- transform: scale(1);
2532
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2533
+ --_bic-input-circle-position-x: var(--bi-scale-0-50x);
2534
+ background: var(--bi-neutral-50);
2979
2535
  }
2980
2536
 
2981
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
2537
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
2538
+ --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
2982
2539
  background: var(--bic-input-toggle-background);
2983
2540
  --bic-input-border-color: var(--bic-input-toggle-background);
2984
2541
  }
2985
2542
 
2986
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
2987
- transform: scale(1);
2988
- }
2989
-
2990
- .bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
2991
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2543
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2544
+ background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
2545
+ background-origin: content-box;
2546
+ background-position: var(--_bic-input-circle-position-x);
2547
+ background-repeat: no-repeat;
2548
+ background-size: calc(var(--bic-input-toggle-size)) 100%;
2549
+ border-radius: var(--bi-radius-full);
2550
+ width: var(--bi-scale-11x);
2551
+ height: var(--bi-scale-6x);
2552
+ padding-inline: 0;
2553
+ transition: background-position .2s;
2992
2554
  }
2993
2555
 
2994
2556
  .bi-label {
@@ -3020,18 +2582,7 @@ svg[data-color="white"] {
3020
2582
  .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
3021
2583
  content: "*";
3022
2584
  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);
2585
+ padding-inline-end: var(--bi-scale-0-25x);
3035
2586
  }
3036
2587
 
3037
2588
  .bi-link {
@@ -3044,19 +2595,13 @@ svg[data-color="white"] {
3044
2595
  --bic-link-focus-shadow-color: var(--bi-basic-white);
3045
2596
  --bic-link-focus-outline-color: var(--bi-primary-50);
3046
2597
  color: var(--bic-link-color);
3047
- -webkit-text-decoration-line: underline;
3048
2598
  text-decoration-line: underline;
3049
- -webkit-text-decoration-style: solid;
3050
2599
  text-decoration-style: solid;
3051
2600
  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
3052
2601
  text-underline-offset: .25em;
3053
2602
  outline: none;
3054
2603
  }
3055
2604
 
3056
- .bi-link :-webkit-any(img, svg) {
3057
- vertical-align: middle;
3058
- }
3059
-
3060
2605
  .bi-link :is(img, svg) {
3061
2606
  vertical-align: middle;
3062
2607
  }
@@ -3150,7 +2695,7 @@ svg[data-color="white"] {
3150
2695
  --bic-logo-height: var(--bi-scale-48x);
3151
2696
  }
3152
2697
 
3153
- @media (min-width: 795px) {
2698
+ @media (width >= 795px) {
3154
2699
  .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
3155
2700
  aspect-ratio: .974318;
3156
2701
  background-image: url("./assets/logos/international-vertical-dark.svg");
@@ -3166,7 +2711,7 @@ svg[data-color="white"] {
3166
2711
  background-image: url("./assets/logos/dark.svg");
3167
2712
  }
3168
2713
 
3169
- @media (min-width: 795px) {
2714
+ @media (width >= 795px) {
3170
2715
  .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
3171
2716
  aspect-ratio: .974318;
3172
2717
  background-image: url("./assets/logos/international-vertical.svg");
@@ -3208,7 +2753,7 @@ svg[data-color="white"] {
3208
2753
  display: flex;
3209
2754
  }
3210
2755
 
3211
- @media not (min-width: 768px) {
2756
+ @media (width < 768px) {
3212
2757
  .bi-navbar > header {
3213
2758
  padding: 0 var(--bi-scale-4x);
3214
2759
  }
@@ -3278,40 +2823,11 @@ svg[data-color="white"] {
3278
2823
  --bic-pagination-selected-background: var(--bi-primary-80);
3279
2824
  }
3280
2825
 
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
2826
  .bi-pagination :is(ol, ul) {
3310
2827
  color: var(--bic-pagination-color);
3311
2828
  gap: var(--bic-pagination-gap);
3312
2829
  flex-wrap: wrap;
3313
2830
  align-items: center;
3314
- width: -webkit-fit-content;
3315
2831
  width: fit-content;
3316
2832
  margin: 0;
3317
2833
  padding: 0;
@@ -3344,14 +2860,16 @@ svg[data-color="white"] {
3344
2860
  --bic-popover-border-radius: var(--bi-radius-medium);
3345
2861
  --bic-popover-max-width: 300px;
3346
2862
  --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;
2863
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
2864
+ 0px 2px 2px -1px #26333f0a;
3348
2865
  }
3349
2866
 
3350
2867
  .bi-popover[data-dark="true"] {
3351
2868
  --bic-popover-background: var(--bi-neutral-95);
3352
2869
  --bic-popover-border-color: var(--bi-neutral-70);
3353
2870
  --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;
2871
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
2872
+ 0px 2px 2px -1px #26333f0a;
3355
2873
  }
3356
2874
 
3357
2875
  .bi-popover {
@@ -3368,10 +2886,7 @@ svg[data-color="white"] {
3368
2886
  z-index: 100000;
3369
2887
  display: none;
3370
2888
  position: fixed;
3371
- top: 0;
3372
- bottom: auto;
3373
- left: 0;
3374
- right: auto;
2889
+ inset: 0 auto auto 0;
3375
2890
  overflow: visible;
3376
2891
  }
3377
2892
 
@@ -3431,10 +2946,6 @@ svg[data-color="white"] {
3431
2946
  --bic-field-padding-inline: 0;
3432
2947
  }
3433
2948
 
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
2949
  .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
3439
2950
  display: none;
3440
2951
  }
@@ -3475,7 +2986,8 @@ svg[data-color="white"] {
3475
2986
  .bi-spinner {
3476
2987
  --bic-spinner-color: currentColor;
3477
2988
  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));
2989
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
2990
+ conic-gradient(#0000 30%, var(--bic-spinner-color));
3479
2991
  border-radius: 50%;
3480
2992
  width: 1em;
3481
2993
  height: 1em;
@@ -3526,7 +3038,6 @@ svg[data-color="white"] {
3526
3038
 
3527
3039
  .bi-sticky-header {
3528
3040
  z-index: 100;
3529
- position: -webkit-sticky;
3530
3041
  position: sticky;
3531
3042
  }
3532
3043
 
@@ -3568,7 +3079,6 @@ svg[data-color="white"] {
3568
3079
  overflow-y: auto;
3569
3080
  overflow-x: unset;
3570
3081
  flex-direction: column;
3571
- width: -webkit-fit-content;
3572
3082
  width: fit-content;
3573
3083
  }
3574
3084
 
@@ -3647,16 +3157,8 @@ svg[data-color="white"] {
3647
3157
  position: relative;
3648
3158
  }
3649
3159
 
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);
3160
+ .bi-validation-message:has( > svg) {
3161
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3660
3162
  }
3661
3163
 
3662
3164
  .bi-validation-message > svg {
@@ -3666,11 +3168,7 @@ svg[data-color="white"] {
3666
3168
  position: absolute;
3667
3169
  }
3668
3170
 
3669
- html:has(.bi-navbar) {
3670
- scroll-padding-top: var(--bi-layout-navbar-height);
3671
- }
3672
-
3673
- html:has(.bi-sub-navbar) {
3171
+ :is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
3674
3172
  scroll-padding-top: var(--bi-layout-navbar-height);
3675
3173
  }
3676
3174
 
@@ -3699,5 +3197,5 @@ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][da
3699
3197
  }
3700
3198
 
3701
3199
  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));
3200
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
3703
3201
  }