@bi-digital/css 0.6.8 → 0.7.0

package/dist/components.css

@@ -22,7 +22,6 @@
   border-radius: var(--bi-radius-medium);
   gap: var(--bic-alert-gap);
   grid-template-columns: 1fr;
-  width: -webkit-fit-content;
   width: fit-content;
   display: grid;
   position: relative;
@@ -235,9 +234,7 @@
   font-family: museo-sans, Arial, sans-serif;
   font-size: var(--bic-badge-font-size);
   line-height: var(--bic-badge-line-height);
-  width: -webkit-max-content;
   width: max-content;
-  height: -webkit-fit-content;
   height: fit-content;
   min-height: var(--bic-badge-height);
   box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
@@ -342,7 +339,7 @@
 .bi-button {
   --bic-button-box-shadow: none;
   --bic-button-icon-size: var(--bi-icon-medium);
-  --bic-button-padding: .625rem calc(var(--bi-scale-6x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
   --bic-button-size: var(--bi-scale-11x);
   --bic-button-font-size: 1rem;
   --bic-button-line-height: 1.5;
@@ -364,11 +361,9 @@
   color: var(--bic-button-color);
   background: var(--bic-button-background);
   box-shadow: var(--bic-button-box-shadow);
-  height: -webkit-fit-content;
   height: fit-content;
   min-height: var(--bic-button-size);
   min-width: var(--bic-button-size);
-  width: -webkit-fit-content;
   width: fit-content;
   padding: var(--bic-button-padding);
   -webkit-text-decoration: unset;
@@ -408,13 +403,13 @@
 .bi-button[data-size="small"] {
   --bic-button-font-size: .875rem;
   --bic-button-line-height: 1.25rem;
-  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
   --bic-button-icon-size: var(--bi-icon-small);
   --bic-button-size: var(--bi-scale-8x);
 }
 
 .bi-button[data-size="large"] {
-  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
   --bic-button-icon-size: var(--bi-icon-large);
   --bic-button-size: var(--bi-scale-14x);
 }
@@ -426,20 +421,15 @@
   padding: 0;
 }
 
-.bi-button:not([data-variant]) {
+.bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
   --bic-button-color: var(--bi-basic-white);
   --bic-button-background: var(--bi-primary-50);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
-  --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;
-}
-
-.bi-button[data-variant="filled"] {
-  --bic-button-color: var(--bi-basic-white);
-  --bic-button-background: var(--bi-primary-50);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
-  --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;
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+      var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+      var(--bic-button-background);
+  --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;
 }
 
 .bi-button[data-variant="outlined"] {
@@ -471,15 +461,19 @@
 .bi-button[data-variant="flat"] {
   --bic-button-color: var(--bi-primary-90);
   --bic-button-background: var(--bi-primary-5);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+      var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+      var(--bic-button-background);
 }
 
 .bi-button[data-variant="flat"][data-dark="true"] {
   --bic-button-color: var(--bi-basic-white);
   --bic-button-background: #ffffff1a;
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
+        var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
+        var(--bic-button-background);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -492,14 +486,6 @@
   cursor: progress;
 }
 
-.bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
-  cursor: not-allowed;
-}
-
-.bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
-  cursor: progress;
-}
-
 .bi-button:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
 }
@@ -512,12 +498,7 @@
   background: var(--bic-button-background-press);
 }
 
-.bi-button .bi-button--start-icon {
-  display: inherit;
-  font-size: var(--bic-button-icon-size);
-}
-
-.bi-button .bi-button--end-icon {
+.bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
   display: inherit;
   font-size: var(--bic-button-icon-size);
 }
@@ -597,13 +578,13 @@
   --bic-card-media-width: 15.75rem;
 }
 
-@media not (min-width: 1024px) {
+@media (width < 1024px) {
   .bi-card[data-orientation="horizontal"] {
     --bic-card-media-width: 14.5rem;
   }
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card[data-orientation="horizontal"] {
     --bic-card-media-width: 8.4375rem;
   }
@@ -698,134 +679,46 @@
   overflow: hidden;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--content {
     --bic-card-content-padding: var(--bi-scale-3x);
     gap: var(--bi-scale-3x);
   }
 }
 
-.bi-card:-webkit-any(a, button) {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button) {
   cursor: pointer;
   text-decoration: none;
   transition: box-shadow .25s ease-in-out;
   position: relative;
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
-  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);
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
+  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);
   outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
   --_bi--focus: ;
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .bi-card:-webkit-any(a, button):not(.disabled):hover {
-    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);
+  :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
+    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);
   }
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):active {
-  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);
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
+  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);
 }
 
-.bi-card:-webkit-any(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card:is(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card:is(a, button):not(.disabled):focus-visible {
-  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);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card:is(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card:is(a, button):not(.disabled):hover {
-    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);
-  }
-}
-
-.bi-card:is(a, button):not(.disabled):active {
-  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);
-}
-
-.bi-card:is(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
-  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);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
-    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);
-  }
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
-  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);
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card .bi-card--content:is(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
-  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);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
-    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);
-  }
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):active {
-  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);
-}
-
-.bi-card .bi-card--content:is(a, button):disabled {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
   cursor: not-allowed;
 }
 
@@ -838,7 +731,7 @@
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--actions {
     width: var(--bi-scale-11x);
   }
@@ -851,7 +744,7 @@
   flex: 1;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--actions .bi-card--action {
     --bic-button-size: var(--bi-scale-11x);
   }
@@ -874,7 +767,7 @@
   font-size: .875rem;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-label {
     font-size: .8125rem;
   }
@@ -909,7 +802,7 @@
   overflow: hidden;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-title {
     font-size: 1rem;
   }
@@ -922,20 +815,6 @@
   position: relative;
 }
 
-.bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
-  border-radius: inherit;
-  object-fit: cover;
-  aspect-ratio: 4 / 3;
-  width: 100%;
-  display: block;
-}
-
-@media not (min-width: 600px) {
-  .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
-    aspect-ratio: 3 / 2;
-  }
-}
-
 .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
   border-radius: inherit;
   object-fit: cover;
@@ -944,7 +823,7 @@
   display: block;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
     aspect-ratio: 3 / 2;
   }
@@ -955,7 +834,6 @@
   left: var(--bi-scale-4x);
   right: var(--bi-scale-4x);
   flex-wrap: wrap;
-  width: -webkit-fit-content;
   width: fit-content;
   display: flex;
   position: absolute;
@@ -967,7 +845,8 @@
   padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
   border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
   background: var(--bic-card-background-color);
-  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
+  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
+      0px 4px 6px 0px #26333f0d;
   color: var(--bic-card-header-title-color);
   text-align: center;
   flex-direction: column;
@@ -1023,7 +902,6 @@
   --bic-chip-line-height: 1.5rem;
   gap: var(--bi-scale-1x);
   border-radius: var(--bi-radius-full);
-  width: -webkit-fit-content;
   width: fit-content;
   color: var(--bic-chip-text-color);
   background-color: var(--bic-chip-background);
@@ -1194,92 +1072,28 @@
   --bic-chip-text-color: var(--bi-basic-white);
 }
 
-.bi-chip:-webkit-any(button) {
+.bi-chip:is(button), .bi-chip:is(a) {
   cursor: pointer;
   border: none;
   text-decoration: none;
 }
 
-.bi-chip:-webkit-any(button):focus-visible {
+:is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
   box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
   outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
   outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .bi-chip:-webkit-any(button):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
+  :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
+          var(--bic-chip-background);
   }
 }
 
-.bi-chip:-webkit-any(button):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:is(button) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:is(button):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:is(button):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:is(button):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:-webkit-any(a) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:-webkit-any(a):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:-webkit-any(a):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:-webkit-any(a):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:is(a) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:is(a):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:is(a):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:is(a):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
+:is(.bi-chip:is(button), .bi-chip:is(a)):active {
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
+        var(--bic-chip-background);
 }
 
 .bi-chip > svg {
@@ -1289,8 +1103,10 @@
 
 details.bi-details {
   --bic-details-background: var(--bi-basic-white);
-  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
-  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
+  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+    var(--bic-details-background);
+  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+    var(--bic-details-background);
   --bic-details-color: var(--bi-neutral-90);
   --bic-details-border-color: var(--bi-neutral-15);
   --bic-details-padding: var(--bi-scale-4x);
@@ -1300,8 +1116,10 @@ details.bi-details {
 
 details.bi-details[data-dark="true"] {
   --bic-details-background: var(--bi-neutral-90);
-  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-details-background);
-  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
+  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
+      var(--bic-details-background);
+  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
+      var(--bic-details-background);
   --bic-details-border-color: var(--bi-neutral-70);
   --bic-details-color: var(--bi-basic-white);
   --bic-details-focus-shadow-color: var(--bi-neutral-95);
@@ -1396,7 +1214,8 @@ details.bi-details[open] summary > svg {
   }
 
   details.bi-details::details-content {
-    transition: height .2s ease-in-out, content-visibility .2s ease-in-out allow-discrete;
+    transition: height .2s ease-in-out,
+        content-visibility .2s ease-in-out allow-discrete;
     height: 0;
     overflow: clip;
   }
@@ -1460,10 +1279,7 @@ details.bi-details > *:not(summary) + * {
   margin: auto;
   padding: 0;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: auto;
 }
 
@@ -1473,16 +1289,13 @@ details.bi-details > *:not(summary) + * {
 }
 
 .bi-dialog[open] {
-  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;
+  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;
   display: flex;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bi-dialog[open] {
-    animation: none;
-  }
-
-  .bi-dialog::backdrop {
+  .bi-dialog[open], .bi-dialog::backdrop {
     animation: none;
   }
 }
@@ -1523,15 +1336,7 @@ details.bi-details > *:not(summary) + * {
   display: flex;
 }
 
-.bi-dialog .bi-dialog--header:not([data-no-border="true"]):not(:first-child) {
-  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
-}
-
-.bi-dialog .bi-dialog--content:not([data-no-border="true"]):not(:first-child) {
-  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
-}
-
-.bi-dialog .bi-dialog--footer:not([data-no-border="true"]):not(:first-child) {
+:is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
   border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
 }
 
@@ -1559,7 +1364,8 @@ body:has(.bi-dialog:modal) {
   --bic-drawer-max-width: 40rem;
   --bic-drawer-min-height: 20rem;
   --bic-drawer-border-radius: var(--bi-radius-medium);
-  transition: display var(--bic-dialog-animation-duration) allow-discrete, overlay var(--bic-dialog-animation-duration) allow-discrete;
+  transition: display var(--bic-dialog-animation-duration) allow-discrete,
+    overlay var(--bic-dialog-animation-duration) allow-discrete;
   transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
   animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
 }
@@ -1603,30 +1409,14 @@ body:has(.bi-dialog:modal) {
   border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
 }
 
-.bi-dialog.bi-drawer[data-anchor="left"] {
+.bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
   min-width: var(--bic-drawer-min-width);
   max-width: var(--bic-drawer-max-width);
-  width: -webkit-fit-content;
   width: fit-content;
   height: 100dvh;
 }
 
-.bi-dialog.bi-drawer[data-anchor="right"] {
-  min-width: var(--bic-drawer-min-width);
-  max-width: var(--bic-drawer-max-width);
-  width: -webkit-fit-content;
-  width: fit-content;
-  height: 100dvh;
-}
-
-.bi-dialog.bi-drawer[data-anchor="top"] {
-  min-height: var(--bic-drawer-min-height);
-  max-height: calc(100dvh - var(--bi-layout-navbar-height));
-  width: 100%;
-  max-width: 100dvw;
-}
-
-.bi-dialog.bi-drawer[data-anchor="bottom"] {
+.bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
   min-height: var(--bic-drawer-min-height);
   max-height: calc(100dvh - var(--bi-layout-navbar-height));
   width: 100%;
@@ -1663,14 +1453,16 @@ body:has(.bi-dialog:modal) {
   --bic-dropdown-border-width: var(--bi-stroke-thin);
   --bic-dropdown-border-style: solid;
   --bic-dropdown-border-color: var(--bi-neutral-15);
-  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+    0px 2px 2px -1px #26333f0a;
 }
 
 .bi-dropdown[data-dark="true"] {
   --bic-dropdown-background: var(--bi-neutral-100);
   --bic-dropdown-border-color: var(--bi-neutral-90);
   --bic-dropdown-color: var(--bi-neutral-5);
-  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+      0px 2px 2px -1px #26333f0a;
 }
 
 .bi-dropdown {
@@ -1695,17 +1487,6 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-.bi-dropdown :-webkit-any(a, button, [role="button"]) {
-  padding: var(--bic-dropdown-item-padding);
-  min-height: var(--bic-dropdown-item-size);
-  justify-content: start;
-  width: 100%;
-}
-
-.bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
-  margin-left: auto;
-}
-
 .bi-dropdown :is(a, button, [role="button"]) {
   padding: var(--bic-dropdown-item-padding);
   min-height: var(--bic-dropdown-item-size);
@@ -1730,6 +1511,7 @@ body:has(.bi-dialog:modal) {
   --bic-field-affix-color: var(--bi-neutral-60);
   --bic-field-background: var(--bi-basic-white);
   --bic-field-background-hover: var(--bi-states-hover-dark);
+  --bic-field-background-press: var(--bi-states-press-dark);
   --bic-field-background-readonly: var(--bi-neutral-10);
   --bic-field-border-color: var(--bi-neutral-50);
   --bic-field-border-color-hover: var(--bi-neutral-50);
@@ -1746,6 +1528,7 @@ body:has(.bi-dialog:modal) {
   --bic-field-affix-color: var(--bi-neutral-30);
   --bic-field-background: var(--bi-neutral-95);
   --bic-field-background-hover: var(--bi-states-hover-light);
+  --bic-field-background-press: var(--bi-states-press-light);
   --bic-field-background-readonly: var(--bi-neutral-50);
   --bic-field-border-color-hover: var(--bi-neutral-25);
   --bic-field-disabled-color: var(--bi-neutral-40);
@@ -1757,8 +1540,7 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field > * {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .bi-field > * + * {
@@ -1793,104 +1575,40 @@ body:has(.bi-dialog:modal) {
   width: 100%;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
   border-radius: var(--bi-radius-medium);
-  grid-template-areas: "input content";
-  grid-template-columns: var(--bi-scale-5x) 1fr;
   gap: 0 var(--bi-scale-3x);
-  width: -webkit-fit-content;
   width: fit-content;
   padding: var(--bi-scale-2x) var(--bi-scale-3x);
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "input content";
   align-items: center;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):not([hidden]) {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
   display: grid;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
   width: 100%;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) > * {
-  grid-column: content;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
-  margin: var(--bi-scale-0-50x) 0;
-  -webkit-user-select: none;
-  user-select: none;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
-  margin: var(--bi-scale-1x) auto;
-  grid-area: 1 / input;
-  align-self: flex-start;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
+  border-radius: var(--bi-scale-24x);
+  padding: var(--bi-scale-1x) var(--bi-scale-2x);
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
+  padding-inline-end: var(--bi-scale-4x);
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
-  gap: 0;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
-  background: var(--_bi--hover, var(--bic-field-background-hover));
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
-  --_bi--hover: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
-  --_bi--focus: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
-  grid-template-areas: "content input";
-  grid-template-columns: 1fr var(--bi-scale-5x);
-  width: auto;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
-  border-radius: var(--bi-radius-medium);
-  grid-template-areas: "input content";
-  grid-template-columns: var(--bi-scale-5x) 1fr;
-  gap: 0 var(--bi-scale-3x);
-  width: -webkit-fit-content;
-  width: fit-content;
-  padding: var(--bi-scale-2x) var(--bi-scale-3x);
-  align-items: center;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
-  display: grid;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
-  width: 100%;
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
+  padding-inline-start: var(--bi-scale-4x);
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
   grid-column: content;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
@@ -1907,10 +1625,6 @@ body:has(.bi-dialog:modal) {
   align-self: flex-start;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
-}
-
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
   cursor: pointer;
 }
@@ -1927,6 +1641,14 @@ body:has(.bi-dialog:modal) {
   --_bi--hover: ;
 }
 
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
+  background: var(--_bi--hover, var(--bic-field-background-press));
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
+  --_bi--hover: ;
+}
+
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
   box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
   outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
@@ -1938,9 +1660,8 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
+  grid-template-columns: 1fr auto;
   grid-template-areas: "content input";
-  grid-template-columns: 1fr var(--bi-scale-5x);
-  width: auto;
 }
 
 .bi-field .bi-field--affixes {
@@ -1963,7 +1684,6 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field .bi-field--affixes:has(.bi-input[size]) {
-  width: -webkit-fit-content;
   width: fit-content;
 }
 
@@ -1978,7 +1698,8 @@ body:has(.bi-dialog:modal) {
 .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
   outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
   outline-offset: 0;
-  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
+  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+        0px 0px 10px 0px #0000000d);
 }
 
 .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -1996,46 +1717,18 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-.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)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
+.bi-field .bi-field--affixes .bi-field--affix:first-child {
+  border-inline-end: 0;
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+  padding-inline-end: 0;
 }
 
-.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)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.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)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.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)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.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)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
-}
-
-.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)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
+.bi-field .bi-field--affixes .bi-field--affix:last-child {
+  border-inline-start: 0;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  padding-inline-start: 0;
 }
 
 .bi-fieldset {
@@ -2062,7 +1755,7 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-fieldset > * + * {
-  margin-top: var(--bi-scale-1x);
+  margin-block-start: var(--bi-scale-1x);
 }
 
 .bi-fieldset > legend + p {
@@ -2074,18 +1767,16 @@ body:has(.bi-dialog:modal) {
   line-height: 1.15;
 }
 
-.bi-fieldset:disabled > legend {
-  opacity: var(--ds-opacity-disabled);
-}
-
-.bi-fieldset:disabled > legend + p {
+.bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
   opacity: var(--ds-opacity-disabled);
 }
 
 .bi-filter-group {
   --bic-filter-group-background: var(--bi-basic-white);
-  --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);
-  --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);
+  --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);
+  --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);
   --bic-filter-group-background-expanded: var(--bi-neutral-15);
   --bic-filter-group-border-color: var(--bi-neutral-15);
   --bic-filter-group-text-color: var(--bi-neutral-90);
@@ -2095,8 +1786,10 @@ body:has(.bi-dialog:modal) {
 
 .bi-filter-group[data-dark="true"] {
   --bic-filter-group-background: var(--bi-neutral-90);
-  --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);
-  --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);
+  --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);
+  --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);
   --bic-filter-group-background-expanded: var(--bi-neutral-80);
   --bic-filter-group-border-color: var(--bi-neutral-70);
   --bic-filter-group-text-color: var(--bi-basic-white);
@@ -2115,9 +1808,9 @@ body:has(.bi-dialog:modal) {
   height: var(--bi-scale-12x);
   color: var(--bic-filter-group-text-color);
   align-items: center;
-  gap: calc(var(--bi-scale-2x)  + var(--bi-scale-0-50x));
+  gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
   width: 100%;
-  padding: var(--bi-scale-2x) calc(var(--bi-scale-2x)  + var(--bi-scale-0-50x));
+  padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
   background: var(--bic-filter-group-background);
   cursor: pointer;
   border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2226,7 +1919,7 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container {
     flex-direction: column;
   }
@@ -2245,7 +1938,7 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links {
     flex-direction: column;
   }
@@ -2256,7 +1949,7 @@ body:has(.bi-dialog:modal) {
   font-weight: 300;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links > p {
     margin: var(--bi-scale-3x) 0;
   }
@@ -2272,7 +1965,7 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links > div {
     flex-direction: column;
   }
@@ -2287,29 +1980,13 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-footer .bi-footer--accreditations {
     gap: var(--bi-scale-2x) var(--bi-scale-1x);
   }
 }
 
-.bi-footer .bi-footer--accreditations .bi-footer--aacsb {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 58px;
-  display: block;
-}
-
-.bi-footer .bi-footer--accreditations .bi-footer--amba {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 58px;
-  display: block;
-}
-
-.bi-footer .bi-footer--accreditations .bi-footer--equis {
+.bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -2352,7 +2029,7 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-footer .bi-footer--socials {
     gap: var(--bi-scale-2x);
   }
@@ -2456,7 +2133,6 @@ svg[data-color="white"] {
 }
 
 .bi-input {
-  -webkit-appearance: none;
   appearance: none;
   background: var(--bic-input-background);
   border-radius: var(--bi-radius-medium);
@@ -2492,7 +2168,8 @@ svg[data-color="white"] {
 .bi-input:focus-visible {
   outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
   outline-offset: 0;
-  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
+  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+      0px 0px 10px 0px #0000000d);
 }
 
 .bi-input:focus-visible * {
@@ -2507,11 +2184,7 @@ svg[data-color="white"] {
   width: 100%;
 }
 
-.bi-input:disabled {
-  cursor: not-allowed;
-}
-
-.bi-input[aria-disabled="true"] {
+.bi-input:disabled, .bi-input[aria-disabled="true"] {
   cursor: not-allowed;
 }
 
@@ -2519,34 +2192,12 @@ svg[data-color="white"] {
   --bic-input-border-color: var(--bic-input-border-color-invalid);
 }
 
-.bi-input[readonly] {
+.bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
   background: var(--bic-input-background-readonly);
   --bic-input-border-color: var(--bic-input-border-color-readonly);
   color: var(--bic-input-color-readonly);
 }
 
-.bi-input:disabled {
-  background: var(--bic-input-background-readonly);
-  --bic-input-border-color: var(--bic-input-border-color-readonly);
-  color: var(--bic-input-color-readonly);
-}
-
-.bi-input[aria-disabled="true"] {
-  background: var(--bic-input-background-readonly);
-  --bic-input-border-color: var(--bic-input-border-color-readonly);
-  color: var(--bic-input-color-readonly);
-}
-
-.bi-input:-webkit-any(textarea) {
-  height: auto;
-  min-height: calc(var(--bic-input-size) * 2);
-  resize: vertical;
-}
-
-.bi-input:-webkit-any(textarea):not([rows]) {
-  field-sizing: content;
-}
-
 .bi-input:is(textarea) {
   height: auto;
   min-height: calc(var(--bic-input-size) * 2);
@@ -2557,17 +2208,6 @@ svg[data-color="white"] {
   field-sizing: content;
 }
 
-.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:-webkit-any(select) {
-  background-image: var(--bic-input-select-chevron);
-  background-position: calc(100% - .5em);
-  background-repeat: no-repeat;
-  background-size: 1.5em;
-}
-
 .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
   cursor: pointer;
 }
@@ -2579,7 +2219,7 @@ svg[data-color="white"] {
   background-size: 1.5em;
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
+.bi-input[type="checkbox"], .bi-input[type="radio"] {
   padding: var(--bi-scale-0-50x);
   line-height: inherit;
   height: var(--bic-input-toggle-size);
@@ -2592,25 +2232,25 @@ svg[data-color="white"] {
   flex-shrink: 0;
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
   box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
   outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
   outline-offset: var(--_bi--focus, 3px);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
   --_bi--focus: ;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
   cursor: pointer;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
   border-radius: var(--bi-radius-full);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
   content: "";
   background-color: var(--bic-input-toggle-background);
   border-radius: 100%;
@@ -2624,22 +2264,22 @@ svg[data-color="white"] {
   transform: translate(-50%, -50%);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
   --bic-input-border-color: var(--bic-input-toggle-background);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
   width: 12px;
   height: 12px;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
   border-radius: var(--bi-radius-small);
   place-content: center;
   display: grid;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
   content: "";
   width: .7em;
   height: .7em;
@@ -2650,119 +2290,41 @@ svg[data-color="white"] {
   transform: scale(0);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
   background: var(--bic-input-toggle-background);
   --bic-input-border-color: var(--bic-input-toggle-background);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
   transform: scale(1);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
   clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"]) {
-  padding: var(--bi-scale-0-50x);
-  line-height: inherit;
-  height: var(--bic-input-toggle-size);
-  width: var(--bic-input-toggle-size);
-  box-shadow: none;
-  border-width: var(--bi-stroke-medium);
-  border-style: solid;
-  border-color: var(--bic-input-border-color);
-  background: none;
-  flex-shrink: 0;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
-  outline-offset: var(--_bi--focus, 3px);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
-  --_bi--focus: ;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
-  border-radius: var(--bi-radius-full);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
-  content: "";
-  background-color: var(--bic-input-toggle-background);
-  border-radius: 100%;
-  width: 0;
-  height: 0;
-  transition: width .1s ease-in-out, height .1s ease-in-out;
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
-  width: 12px;
-  height: 12px;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
-  border-radius: var(--bi-radius-small);
-  place-content: center;
-  display: grid;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
-  content: "";
-  width: .7em;
-  height: .7em;
-  box-shadow: inset 1em 1em var(--bic-input-toggle-color);
-  transform-origin: center;
-  clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
-  transition: transform .2s ease-in-out;
-  transform: scale(0);
-}
-
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
-  transform: scale(1);
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
+  --_bic-input-circle-position-x: var(--bi-scale-0-50x);
+  background: var(--bi-neutral-50);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
+  --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
   background: var(--bic-input-toggle-background);
   --bic-input-border-color: var(--bic-input-toggle-background);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
-  clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
+  background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
+  background-origin: content-box;
+  background-position: var(--_bic-input-circle-position-x);
+  background-repeat: no-repeat;
+  background-size: calc(var(--bic-input-toggle-size)) 100%;
+  border-radius: var(--bi-radius-full);
+  width: var(--bi-scale-11x);
+  height: var(--bi-scale-6x);
+  padding-inline: 0;
+  transition: background-position .2s;
 }
 
 .bi-label {
@@ -2794,18 +2356,7 @@ svg[data-color="white"] {
 .bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):before {
   content: "*";
   color: var(--bic-label-required-color);
-}
-
-.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 {
-  padding-right: var(--bi-scale-0-25x);
-}
-
-.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 {
-  padding-left: var(--bi-scale-0-25x);
-}
-
-.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 {
-  padding-left: var(--bi-scale-0-25x);
+  padding-inline-end: var(--bi-scale-0-25x);
 }
 
 .bi-link {
@@ -2818,19 +2369,13 @@ svg[data-color="white"] {
   --bic-link-focus-shadow-color: var(--bi-basic-white);
   --bic-link-focus-outline-color: var(--bi-primary-50);
   color: var(--bic-link-color);
-  -webkit-text-decoration-line: underline;
   text-decoration-line: underline;
-  -webkit-text-decoration-style: solid;
   text-decoration-style: solid;
   text-decoration-thickness: var(--bic-link-text-decoration-thickness);
   text-underline-offset: .25em;
   outline: none;
 }
 
-.bi-link :-webkit-any(img, svg) {
-  vertical-align: middle;
-}
-
 .bi-link :is(img, svg) {
   vertical-align: middle;
 }
@@ -2924,7 +2469,7 @@ svg[data-color="white"] {
   --bic-logo-height: var(--bi-scale-48x);
 }
 
-@media (min-width: 795px) {
+@media (width >= 795px) {
   .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
     aspect-ratio: .974318;
     background-image: url("./assets/logos/international-vertical-dark.svg");
@@ -2940,7 +2485,7 @@ svg[data-color="white"] {
   background-image: url("./assets/logos/dark.svg");
 }
 
-@media (min-width: 795px) {
+@media (width >= 795px) {
   .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
     aspect-ratio: .974318;
     background-image: url("./assets/logos/international-vertical.svg");
@@ -2982,7 +2527,7 @@ svg[data-color="white"] {
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-navbar > header {
     padding: 0 var(--bi-scale-4x);
   }
@@ -3052,40 +2597,11 @@ svg[data-color="white"] {
   --bic-pagination-selected-background: var(--bi-primary-80);
 }
 
-.bi-pagination :-webkit-any(ol, ul) {
-  color: var(--bic-pagination-color);
-  gap: var(--bic-pagination-gap);
-  flex-wrap: wrap;
-  align-items: center;
-  width: -webkit-fit-content;
-  width: fit-content;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-}
-
-.bi-pagination :-webkit-any(ol, ul) > li:empty:before {
-  content: "...";
-  min-width: var(--bi-scale-11x);
-  text-align: center;
-  display: block;
-}
-
-.bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
-  --bic-button-font-size: 1rem;
-}
-
-.bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
-  background-color: var(--bic-pagination-selected-background);
-}
-
 .bi-pagination :is(ol, ul) {
   color: var(--bic-pagination-color);
   gap: var(--bic-pagination-gap);
   flex-wrap: wrap;
   align-items: center;
-  width: -webkit-fit-content;
   width: fit-content;
   margin: 0;
   padding: 0;
@@ -3118,14 +2634,16 @@ svg[data-color="white"] {
   --bic-popover-border-radius: var(--bi-radius-medium);
   --bic-popover-max-width: 300px;
   --bic-popover-padding: var(--bi-scale-1x);
-  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+    0px 2px 2px -1px #26333f0a;
 }
 
 .bi-popover[data-dark="true"] {
   --bic-popover-background: var(--bi-neutral-95);
   --bic-popover-border-color: var(--bi-neutral-70);
   --bic-popover-color: var(--bi-neutral-5);
-  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+      0px 2px 2px -1px #26333f0a;
 }
 
 .bi-popover {
@@ -3142,10 +2660,7 @@ svg[data-color="white"] {
   z-index: 100000;
   display: none;
   position: fixed;
-  top: 0;
-  bottom: auto;
-  left: 0;
-  right: auto;
+  inset: 0 auto auto 0;
   overflow: visible;
 }
 
@@ -3205,10 +2720,6 @@ svg[data-color="white"] {
   --bic-field-padding-inline: 0;
 }
 
-.bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
-  display: none;
-}
-
 .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
   display: none;
 }
@@ -3249,7 +2760,8 @@ svg[data-color="white"] {
 .bi-spinner {
   --bic-spinner-color: currentColor;
   aspect-ratio: 1;
-  background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
+  background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
+    conic-gradient(#0000 30%, var(--bic-spinner-color));
   border-radius: 50%;
   width: 1em;
   height: 1em;
@@ -3300,7 +2812,6 @@ svg[data-color="white"] {
 
 .bi-sticky-header {
   z-index: 100;
-  position: -webkit-sticky;
   position: sticky;
 }
 
@@ -3342,7 +2853,6 @@ svg[data-color="white"] {
   overflow-y: auto;
   overflow-x: unset;
   flex-direction: column;
-  width: -webkit-fit-content;
   width: fit-content;
 }
 
@@ -3421,16 +2931,8 @@ svg[data-color="white"] {
   position: relative;
 }
 
-.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)) {
-  padding-left: calc(var(--bic-validation-message-icon-size)  + var(--bic-validation-message-padding) * 2);
-}
-
-.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)) {
-  padding-right: calc(var(--bic-validation-message-icon-size)  + var(--bic-validation-message-padding) * 2);
-}
-
-.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)) {
-  padding-right: calc(var(--bic-validation-message-icon-size)  + var(--bic-validation-message-padding) * 2);
+.bi-validation-message:has( > svg) {
+  padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
 }
 
 .bi-validation-message > svg {
@@ -3440,11 +2942,7 @@ svg[data-color="white"] {
   position: absolute;
 }
 
-html:has(.bi-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-sub-navbar) {
+:is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
   scroll-padding-top: var(--bi-layout-navbar-height);
 }
 
@@ -3473,5 +2971,5 @@ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][da
 }
 
 html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
-  top: calc(var(--bi-layout-navbar-height)  + var(--bi-layout-navbar-height));
+  top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
 }