@wwtdev/bsds-css 3.4.1 → 3.5.0-rc.0

package/dist/wwt-bsds-utilities.css

@@ -2,319 +2,420 @@
 .flow > * + * {
   margin-top: var(--flow-space, 1.25em);
 }
+
 .flow > :where(h1, h2, h3, h4, h5, h6) {
   --flow-space: 2em;
 }
+
 .flow > :where(hr) + * {
   --flow-space: 1.5em;
 }
+
 .flow > :where(h1, h2, h3, h4, h5, h6) + * {
   --flow-space: 0.5em;
 }
+
 .flow > :where(ul, ol) > :where(li) {
   margin-top: var(--flow-space, 0.625em);
 }
+
 /* -------------- Deprecated Ink Colors -------------- */
+
 /* Ink Blue (replaced by Ink Primary) */
 .bs-text-ink-blue {
   color: var(--bs-ink-blue);
 }
+
 .bs-bg-ink-blue {
   background-color: var(--bs-ink-blue);
 }
+
 /* Ink Orange (replaced by Ink Warning) */
 .bs-text-ink-orange {
   color: var(--bs-ink-orange);
 }
+
 .bs-bg-ink-orange {
   background-color: var(--bs-ink-orange);
 }
+
 /* Ink Pink (replaced by Ink Accent 3) */
 .bs-text-ink-pink {
   color: var(--bs-ink-pink);
 }
+
 .bs-bg-ink-pink {
   background-color: var(--bs-ink-pink);
 }
+
 /* Ink Plum (replaced by Ink Secondary) */
 .bs-text-ink-plum {
   color: var(--bs-ink-plum);
 }
+
 .bs-bg-ink-plum {
   background-color: var(--bs-ink-plum);
 }
+
 /* Ink Purple (replaced by Ink Positive) */
 .bs-text-ink-purple {
   color: var(--bs-ink-purple);
 }
+
 .bs-bg-ink-purple {
   background-color: var(--bs-ink-purple);
 }
+
 /* Ink Red (replaced by Ink Negative) */
 .bs-text-ink-red {
   color: var(--bs-ink-red);
 }
+
 .bs-bg-ink-red {
   background-color: var(--bs-ink-red);
 }
+
 /* Ink Royal (replaced by Ink Accent 1) */
 .bs-text-ink-royal {
   color: var(--bs-ink-royal);
 }
+
 .bs-bg-ink-royal {
   background-color: var(--bs-ink-royal);
 }
+
 /* Ink Violet (replaced by Ink Accent 2) */
 .bs-text-ink-violet {
   color: var(--bs-ink-violet);
 }
+
 .bs-bg-ink-violet {
   background-color: var(--bs-ink-violet);
 }
+
 /* Removed in v3 */
 .bs-text-ink-accent {
   color: var(--bs-ink-accent);
 }
+
 .bs-bg-ink-accent {
   background-color: var(--bs-ink-accent);
 }
+
 /* DEPRECATED (use --bs-primary instead) */
+
 .bs-text-blue-base {
   color: var(--bs-blue-base);
 }
+
 .bs-bg-blue-base {
   background-color: var(--bs-blue-base);
 }
+
 .bs-text-blue-medium {
   color: var(--bs-blue-medium);
 }
+
 .bs-bg-blue-medium {
   background-color: var(--bs-blue-medium);
 }
+
 .bs-text-blue-light {
   color: var(--bs-blue-light);
 }
+
 .bs-bg-blue-light {
   background-color: var(--bs-blue-light);
 }
+
 .bs-text-blue-lightest {
   color: var(--bs-blue-lightest);
 }
+
 .bs-bg-blue-lightest {
   background-color: var(--bs-blue-lightest);
 }
 /* DEPRECATED (use --bs-neutral instead) */
+
 .bs-text-gray-dark {
   color: var(--bs-gray-dark);
 }
+
 .bs-bg-gray-dark {
   background-color: var(--bs-gray-dark);
 }
+
 .bs-text-gray-base {
   color: var(--bs-gray-base);
 }
+
 .bs-bg-gray-base {
   background-color: var(--bs-gray-base);
 }
+
 .bs-text-gray-medium {
   color: var(--bs-gray-medium);
 }
+
 .bs-bg-gray-medium {
   background-color: var(--bs-gray-medium);
 }
+
 .bs-text-gray-light {
   color: var(--bs-gray-light);
 }
+
 .bs-bg-gray-light {
   background-color: var(--bs-gray-light);
 }
+
 .bs-text-gray-lightest {
   color: var(--bs-gray-lightest);
 }
+
 .bs-bg-gray-lightest {
   background-color: var(--bs-gray-lightest);
 }
 /* DEPRECATED (use --bs-accent-4 instead) */
+
 .bs-text-navy-base {
   color: var(--bs-navy-base);
 }
+
 .bs-bg-navy-base {
   background-color: var(--bs-navy-base);
 }
+
 .bs-text-navy-medium {
   color: var(--bs-navy-medium);
 }
+
 .bs-bg-navy-medium {
   background-color: var(--bs-navy-medium);
 }
+
 .bs-text-navy-light {
   color: var(--bs-navy-light);
 }
+
 .bs-bg-navy-light {
   background-color: var(--bs-navy-light);
 }
+
 .bs-text-navy-lightest {
   color: var(--bs-navy-lightest);
 }
+
 .bs-bg-navy-lightest {
   background-color: var(--bs-navy-lightest);
 }
 /* DEPRECATED (use --bs-warning instead) */
+
 .bs-text-warning {
   color: var(--bs-warning);
 }
+
 .bs-bg-warning {
   background-color: var(--bs-warning);
 }
+
 .bs-text-orange-base {
   color: var(--bs-orange-base);
 }
+
 .bs-bg-orange-base {
   background-color: var(--bs-orange-base);
 }
+
 .bs-text-orange-medium {
   color: var(--bs-orange-medium);
 }
+
 .bs-bg-orange-medium {
   background-color: var(--bs-orange-medium);
 }
+
 .bs-text-orange-light {
   color: var(--bs-orange-light);
 }
+
 .bs-bg-orange-light {
   background-color: var(--bs-orange-light);
 }
+
 .bs-text-orange-lightest {
   color: var(--bs-orange-lightest);
 }
+
 .bs-bg-orange-lightest {
   background-color: var(--bs-orange-lightest);
 }
 /* DEPRECATED (use --bs-accent-3 instead) */
+
 .bs-text-pink-base {
   color: var(--bs-pink-base);
 }
+
 .bs-bg-pink-base {
   background-color: var(--bs-pink-base);
 }
+
 .bs-text-pink-medium {
   color: var(--bs-pink-medium);
 }
+
 .bs-bg-pink-medium {
   background-color: var(--bs-pink-medium);
 }
+
 .bs-text-pink-light {
   color: var(--bs-pink-light);
 }
+
 .bs-bg-pink-light {
   background-color: var(--bs-pink-light);
 }
+
 .bs-text-pink-lightest {
   color: var(--bs-pink-lightest);
 }
+
 .bs-bg-pink-lightest {
   background-color: var(--bs-pink-lightest);
 }
 /* DEPRECATED (use --bs-secondary instead) */
+
 .bs-text-plum-base {
   color: var(--bs-plum-base);
 }
+
 .bs-bg-plum-base {
   background-color: var(--bs-plum-base);
 }
+
 .bs-text-plum-medium {
   color: var(--bs-plum-medium);
 }
+
 .bs-bg-plum-medium {
   background-color: var(--bs-plum-medium);
 }
+
 .bs-text-plum-light {
   color: var(--bs-plum-light);
 }
+
 .bs-bg-plum-light {
   background-color: var(--bs-plum-light);
 }
+
 .bs-text-plum-lightest {
   color: var(--bs-plum-lightest);
 }
+
 .bs-bg-plum-lightest {
   background-color: var(--bs-plum-lightest);
 }
 /* DEPRECATED (use --bs-negative instead) */
+
 .bs-text-red-base {
   color: var(--bs-red-base);
 }
+
 .bs-bg-red-base {
   background-color: var(--bs-red-base);
 }
+
 .bs-text-red-medium {
   color: var(--bs-red-medium);
 }
+
 .bs-bg-red-medium {
   background-color: var(--bs-red-medium);
 }
+
 .bs-text-red-light {
   color: var(--bs-red-light);
 }
+
 .bs-bg-red-light {
   background-color: var(--bs-red-light);
 }
+
 .bs-text-red-lightest {
   color: var(--bs-red-lightest);
 }
+
 .bs-bg-red-lightest {
   background-color: var(--bs-red-lightest);
 }
 /* DEPRECATED (use --bs-accent-1 instead) */
+
 .bs-text-royal-base {
   color: var(--bs-royal-base);
 }
+
 .bs-bg-royal-base {
   background-color: var(--bs-royal-base);
 }
+
 .bs-text-royal-medium {
   color: var(--bs-royal-medium);
 }
+
 .bs-bg-royal-medium {
   background-color: var(--bs-royal-medium);
 }
+
 .bs-text-royal-light {
   color: var(--bs-royal-light);
 }
+
 .bs-bg-royal-light {
   background-color: var(--bs-royal-light);
 }
+
 .bs-text-royal-lightest {
   color: var(--bs-royal-lightest);
 }
+
 .bs-bg-royal-lightest {
   background-color: var(--bs-royal-lightest);
 }
 /* DEPRECATED (use --bs-accent-2 instead) */
+
 .bs-text-violet-base {
   color: var(--bs-violet-base);
 }
+
 .bs-bg-violet-base {
   background-color: var(--bs-violet-base);
 }
+
 .bs-text-violet-medium {
   color: var(--bs-violet-medium);
 }
+
 .bs-bg-violet-medium {
   background-color: var(--bs-violet-medium);
 }
+
 .bs-text-violet-light {
   color: var(--bs-violet-light);
 }
+
 .bs-bg-violet-light {
   background-color: var(--bs-violet-light);
 }
+
 .bs-text-violet-lightest {
   color: var(--bs-violet-lightest);
 }
+
 .bs-bg-violet-lightest {
   background-color: var(--bs-violet-lightest);
 }
+
 .bs-visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -326,13 +427,28 @@
   white-space: nowrap;
   width: 1px;
 }
+.bs-rounded-none {
+  border-radius: 0;
+}
+
+.bs-rounded-base {
+  border-radius: var(--bs-rounded-base);
+}
+
+.bs-rounded-half {
+  border-radius: var(--bs-rounded-half);
+}
+
+.bs-rounded-full {
+  border-radius: var(--bs-rounded-full);
+}
 .bs-box {
   --bg-color: var(--bs-bg-medium-to-light);
   --border-color: transparent;
   --box-space: var(--bs-space-6);
   --text-color: var(--bs-ink-base);
   background: var(--bg-color);
-  border-radius: 0.25rem;
+  border-radius: var(--bs-rounded-base);
   border: 1px solid var(--border-color);
   color: var(--text-color);
   padding-bottom: var(--box-space);
@@ -340,13 +456,16 @@
   padding-right: var(--box-space);
   padding-top: var(--box-space);
 }
+
 .bs-box:where([data-invert="true"]) {
   --bg-color: var(--bs-bg-invert-light);
   --text-color: var(--bs-ink-invert-base);
 }
+
 .bs-box:where([data-border="true"]) {
   --border-color: var(--bs-border-base);
 }
+
 /* Some input overrides */
 :where(.bs-box) :is(input, textarea, select):where(:focus-visible),
 :where(.bs-box) :is(.bs-input, .bs-textarea, .bs-select-deprecated):where(:focus-visible) {
@@ -356,6 +475,7 @@
 :where(.bs-box[data-invert="true"]) :is(.bs-input, .bs-textarea, .bs-select-deprecated):where(:focus-visible) {
   --offset-color: var(--bs-bg-invert-base);
 }
+
 /* Some pill overrides */
 :where(.bs-box[data-invert="true"]) .bs-pill {
   --pill-background: var(--bs-bg-invert-light);
@@ -370,6 +490,7 @@
 :where(:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-box[data-invert="true"]) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-accent-1-base);
 }
+
 /* Some switch overrides */
 :where(.bs-box) .bs-switch :where(input:focus-visible) + :where(span),
 :where(.bs-box) .bs-switch:where(:focus-visible) :where(button span) {
@@ -387,31 +508,39 @@
   gap: var(--cluster-space);
   justify-content: flex-start;
 }
+
 .bs-cluster:where([data-brick="true"]) > * {
   align-self: stretch;
   flex-grow: 1;
 }
+
 .bs-cluster:where([data-gap="tight"]) {
   --cluster-space: var(--bs-space-2);
 }
 .bs-box-shadow-low {
   box-shadow: var(--bs-shadow-contentLow);
 }
+
 .bs-box-shadow-low-center {
   box-shadow: var(--bs-shadow-contentLowCenter);
 }
+
 .bs-box-shadow-medium {
   box-shadow: var(--bs-shadow-contentMedium);
 }
+
 .bs-box-shadow-high {
   box-shadow: var(--bs-shadow-contentHigh);
 }
+
 .bs-box-shadow-left-panel {
   box-shadow: var(--bs-shadow-drawerLeft);
 }
+
 .bs-box-shadow-right-panel {
   box-shadow: var(--bs-shadow-drawerRight);
 }
+
 .bs-box-shadow-profile {
   box-shadow: var(--bs-shadow-profilePhoto);
 }
@@ -420,91 +549,109 @@
   font-weight: var(--bs-font-semibold);
   line-height: var(--bs-leading-lg);
 }
+
 .bs-text-sm {
   font-size: var(--bs-text-sm);
   font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-lg);
 }
+
 .bs-text-base {
   font-size: var(--bs-text-base);
   font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-lg);
 }
+
 .bs-text-md {
   font-size: var(--bs-text-base);
   font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-lg);
 }
+
 @media (min-width: 1166px) {
   .bs-text-md {
     font-size: var(--bs-text-md);
   }
 }
+
 .bs-text-lg {
   font-size: var(--bs-text-md);
   font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-regular);
 }
+
 @media (min-width: 1166px) {
   .bs-text-lg {
     font-size: var(--bs-text-lg);
   }
 }
+
 .bs-text-xl {
   font-size: var(--bs-text-lg);
   font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-xl {
     font-size: var(--bs-text-xl);
   }
 }
+
 .bs-text-2xl {
   font-size: var(--bs-text-xl);
   font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-2xl {
     font-size: var(--bs-text-2xl);
   }
 }
+
 .bs-text-3xl {
   font-size: var(--bs-text-2xl);
   font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-3xl {
     font-size: var(--bs-text-3xl);
   }
 }
+
 .bs-text-4xl {
   font-size: var(--bs-text-3xl);
   font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-4xl {
     font-size: var(--bs-text-4xl);
   }
 }
+
 .bs-text-5xl {
   font-size: var(--bs-text-4xl);
   font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-5xl {
     font-size: var(--bs-text-5xl);
   }
 }
+
 .bs-text-6xl {
   font-size: var(--bs-text-5xl);
   font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
+
 @media (min-width: 1166px) {
   .bs-text-6xl {
     font-size: var(--bs-text-6xl);
@@ -513,6 +660,7 @@
 .bs-font-light {
   font-weight: var(--bs-font-light);
 }
+
 .bs-font-normal {
   font-weight: var(--bs-font-normal);
 }
@@ -522,12 +670,15 @@
 .bs-leading-none {
   line-height: var(--bs-leading-none);
 }
+
 .bs-leading-sm {
   line-height: var(--bs-leading-sm);
 }
+
 .bs-leading-regular {
   line-height: var(--bs-leading-regular);
 }
+
 .bs-leading-lg {
   line-height: var(--bs-leading-lg);
 }
@@ -538,31 +689,39 @@
   line-height: var(--bs-leading-lg);
   max-width: var(--prose-width);
 }
+
 @media (min-width: 1166px) {
   .bs-prose {
     font-size: var(--bs-text-md);
   }
 }
+
 .bs-prose:where([data-width="wide"]) {
   --prose-width: 90%;
 }
+
 .bs-prose:where([data-width="full"]) {
   --prose-width: 100%;
 }
+
 .bs-prose > * + * {
   --prose-space: 1.25em;
   margin-top: var(--prose-space);
 }
+
 /* Prose will use em to base space on element font-size */
 .bs-prose > :where(h1, h2, h3, h4, h5, h6) {
   --prose-space: 2em;
 }
+
 .bs-prose > :where(hr) + * {
   --prose-space: 1.5em;
 }
+
 .bs-prose > :where(h1, h2, h3, h4, h5, h6) + * {
   --prose-space: 0.5em;
 }
+
 .bs-prose > :where(ul, ol) > :where(li) {
   --prose-space: 0.625em;
   /* Set margin-top here since list items are not captured by the `* + *` selector */
@@ -573,36 +732,46 @@
   padding-top: var(--region-space);
   padding-bottom: var(--region-space);
 }
+
 .bs-region:where([data-space='sm']) {
   --region-space: var(--bs-space-3);
 }
+
 .bs-region:where([data-space='lg']) {
   --region-space: var(--bs-space-12);
 }
 .bs-transition-quick {
   transition-duration: var(--bs-transition-quick);
 }
+
 .bs-transition-fast {
   transition-duration: var(--bs-transition-fast);
 }
+
 .bs-transition-moderate {
   transition-duration: var(--bs-transition-moderate);
 }
+
 .bs-transition-medium {
   transition-duration: var(--bs-transition-medium);
 }
+
 .bs-transition-slow {
   transition-duration: var(--bs-transition-slow);
 }
+
 .bs-transition-leisurely {
   transition-duration: var(--bs-transition-leisurely);
 }
+
 .bs-transition-long {
   transition-duration: var(--bs-transition-long);
 }
+
 .bs-transition-ease {
   transition-timing-function: var(--bs-transition-ease);
 }
+
 .bs-transition-cubic {
   transition-timing-function: var(--bs-transition-cubic);
 }
@@ -618,99 +787,128 @@
   position: relative;
   width: 100%;
 }
+
 .bs-wrapper:where([data-flush="true"]) {
   padding-left: 0;
   padding-right: 0;
 }
+
 /* Colors last so that they override other utilities */
 /* Base Colors */
 .bs-bg-base {
   background-color: var(--bs-bg-base);
 }
+
 .bs-bg-light {
   background-color: var(--bs-bg-light);
 }
+
 .bs-bg-medium {
   background-color: var(--bs-bg-medium);
 }
+
 .bs-bg-disabled {
   background-color: var(--bs-bg-disabled);
 }
+
 .bs-bg-invert-base {
   background-color: var(--bs-bg-invert-base);
 }
+
 .bs-bg-invert-medium {
   background-color: var(--bs-bg-invert-medium);
 }
+
 .bs-bg-invert-light {
   background-color: var(--bs-bg-invert-light);
 }
+
 .bs-bg-base-to-light {
   background-color: var(--bs-bg-base-to-light);
 }
+
 .bs-bg-base-to-medium {
   background-color: var(--bs-bg-base-to-medium);
 }
+
 .bs-bg-medium-to-base {
   background-color: var(--bs-bg-medium-to-base);
 }
+
 .bs-bg-medium-to-light {
   background-color: var(--bs-bg-medium-to-light);
 }
+
 .bs-bg-light-to-base {
   background-color: var(--bs-bg-light-to-base);
 }
+
 .bs-bg-light-to-medium {
   background-color: var(--bs-bg-light-to-medium);
 }
 .bs-border-base {
   border-color: var(--bs-border-base);
 }
+
 .bs-border-medium {
   border-color: var(--bs-border-medium);
 }
+
 .bs-border-light {
   border-color: var(--bs-border-light);
 }
+
 .bs-border-dark {
   border-color: var(--bs-border-dark);
 }
+
 .bs-border-medium-to-light {
   border-color: var(--bs-border-medium-to-light);
 }
+
 .bs-border-input {
   border-color: var(--bs-border-input);
 }
+
 .bs-border-active {
   border-color: var(--bs-border-active);
 }
+
 .bs-border-error {
   border-color: var(--bs-border-error);
 }
 .bs-text-transparent {
   color: var(--bs-transparent);
 }
+
 .bs-bg-transparent {
   background-color: var(--bs-transparent);
 }
+
 .bs-border-transparent {
   border-color: var(--bs-transparent);
 }
+
 .bs-text-inherit {
   color: var(--bs-inherit);
 }
+
 .bs-bg-inherit {
   background-color: var(--bs-inherit);
 }
+
 .bs-border-inherit {
   border-color: var(--bs-inherit);
 }
+
 .bs-text-current {
   color: var(--bs-current);
 }
+
 .bs-bg-current {
   background-color: var(--bs-current);
 }
+
 .bs-border-current {
   border-color: var(--bs-current);
 }
@@ -723,554 +921,724 @@
               var(--bs-gradient-atom-ai-border) border-box;
   border: 2px solid transparent;
 }
+
 .bs-bg-atom-ai {
   background-image: var(--bs-gradient-atom-ai-bg);
 }
+
 /* Basic Gradients */
 .bs-bg-gradient-dark {
   background: var(--bs-gradient-dark);
 }
+
 .bs-bg-gradient-light {
   background: var(--bs-gradient-light);
 }
+
 .bs-bg-gradient-line {
   background: var(--bs-gradient-line);
 }
+
 /* Light Blue / Gray Gradients */
 .bs-bg-gradient-light-blue-transparent {
   background: var(--bs-gradient-light-blue-transparent);
 }
+
 .bs-bg-gradient-light-blue-opaque {
   background: var(--bs-gradient-light-blue-opaque);
 }
+
 .bs-bg-gradient-light-gray {
   background: var(--bs-gradient-light-gray);
 }
+
 /* Blue Gradients */
 /* Top */
 .bs-bg-gradient-blue-top-left {
   background: var(--bs-gradient-blue-top-left);
 }
+
 .bs-bg-gradient-blue-top-center {
   background: var(--bs-gradient-blue-top-center);
 }
+
 .bs-bg-gradient-blue-top-right {
   background: var(--bs-gradient-blue-top-right);
 }
+
 /* Mid */
 .bs-bg-gradient-blue-mid-left {
   background: var(--bs-gradient-blue-mid-left);
 }
+
 .bs-bg-gradient-blue-mid-right {
   background: var(--bs-gradient-blue-mid-right);
 }
+
 /* Center */
 .bs-bg-gradient-blue-center {
   background: var(--bs-gradient-blue-center);
 }
+
 /* Bottom */
 .bs-bg-gradient-blue-bottom-left {
   background: var(--bs-gradient-blue-bottom-left);
 }
+
 .bs-bg-gradient-blue-bottom-center {
   background: var(--bs-gradient-blue-bottom-center);
 }
+
 .bs-bg-gradient-blue-bottom-right {
   background: var(--bs-gradient-blue-bottom-right);
 }
+
 /* Softchoice Gradients */
 .bs-bg-gradient-softchoice-light {
   background: var(--bs-gradient-softchoice-light);
 }
+
 .bs-bg-gradient-softchoice-dark {
   background: var(--bs-gradient-softchoice-dark);
 }
 .bs-text-ink-base {
   color: var(--bs-ink-base);
 }
+
 .bs-bg-ink-base {
   background-color: var(--bs-ink-base);
 }
+
 .bs-text-ink-medium {
   color: var(--bs-ink-medium);
 }
+
 .bs-bg-ink-medium {
   background-color: var(--bs-ink-medium);
 }
+
 .bs-text-ink-light {
   color: var(--bs-ink-light);
 }
+
 .bs-bg-ink-light {
   background-color: var(--bs-ink-light);
 }
+
 .bs-text-ink-disabled {
   color: var(--bs-ink-disabled);
 }
+
 .bs-bg-ink-disabled {
   background-color: var(--bs-ink-disabled);
 }
+
 .bs-text-ink-invert-base {
   color: var(--bs-ink-invert-base);
 }
+
 .bs-bg-ink-invert-base {
   background-color: var(--bs-ink-invert-base);
 }
+
 .bs-text-ink-invert-medium {
   color: var(--bs-ink-invert-medium);
 }
+
 .bs-bg-ink-invert-medium {
   background-color: var(--bs-ink-invert-medium);
 }
+
 .bs-text-ink-invert-light {
   color: var(--bs-ink-invert-light);
 }
+
 .bs-bg-ink-invert-light {
   background-color: var(--bs-ink-invert-light);
 }
+
 .bs-text-ink-primary {
   color: var(--bs-ink-primary);
 }
+
 .bs-bg-ink-primary {
   background-color: var(--bs-ink-primary);
 }
+
 .bs-text-ink-secondary {
   color: var(--bs-ink-secondary);
 }
+
 .bs-bg-ink-secondary {
   background-color: var(--bs-ink-secondary);
 }
+
 .bs-text-ink-accent-1 {
   color: var(--bs-ink-accent-1);
 }
+
 .bs-bg-ink-accent-1 {
   background-color: var(--bs-ink-accent-1);
 }
+
 .bs-text-ink-accent-2 {
   color: var(--bs-ink-accent-2);
 }
+
 .bs-bg-ink-accent-2 {
   background-color: var(--bs-ink-accent-2);
 }
+
 .bs-text-ink-accent-3 {
   color: var(--bs-ink-accent-3);
 }
+
 .bs-bg-ink-accent-3 {
   background-color: var(--bs-ink-accent-3);
 }
+
 .bs-text-ink-negative {
   color: var(--bs-ink-negative);
 }
+
 .bs-bg-ink-negative {
   background-color: var(--bs-ink-negative);
 }
+
 .bs-text-ink-positive {
   color: var(--bs-ink-positive);
 }
+
 .bs-bg-ink-positive {
   background-color: var(--bs-ink-positive);
 }
+
 .bs-text-ink-warning {
   color: var(--bs-ink-warning);
 }
+
 .bs-bg-ink-warning {
   background-color: var(--bs-ink-warning);
 }
+
 .bs-text-ink-white {
   color: var(--bs-ink-white);
 }
+
 .bs-bg-ink-white {
   background-color: var(--bs-ink-white);
 }
+
 /* Brand Colors */
+
 .bs-text-primary-base-fixed {
   color: var(--bs-primary-base-fixed);
 }
+
 .bs-bg-primary-base-fixed {
   background-color: var(--bs-primary-base-fixed);
 }
+
 .bs-text-primary-base {
   color: var(--bs-primary-base);
 }
+
 .bs-bg-primary-base {
   background-color: var(--bs-primary-base);
 }
+
 .bs-text-primary-medium {
   color: var(--bs-primary-medium);
 }
+
 .bs-bg-primary-medium {
   background-color: var(--bs-primary-medium);
 }
+
 .bs-text-primary-light {
   color: var(--bs-primary-light);
 }
+
 .bs-bg-primary-light {
   background-color: var(--bs-primary-light);
 }
+
 .bs-text-primary-lightest {
   color: var(--bs-primary-lightest);
 }
+
 .bs-bg-primary-lightest {
   background-color: var(--bs-primary-lightest);
 }
+
 .bs-text-primary-highlight {
   color: var(--bs-primary-highlight);
 }
+
 .bs-bg-primary-highlight {
   background-color: var(--bs-primary-highlight);
 }
 .bs-text-secondary-base-fixed {
   color: var(--bs-secondary-base-fixed);
 }
+
 .bs-bg-secondary-base-fixed {
   background-color: var(--bs-secondary-base-fixed);
 }
+
 .bs-text-secondary-base {
   color: var(--bs-secondary-base);
 }
+
 .bs-bg-secondary-base {
   background-color: var(--bs-secondary-base);
 }
+  
 .bs-text-secondary-medium {
   color: var(--bs-secondary-medium);
 }
+  
 .bs-bg-secondary-medium {
   background-color: var(--bs-secondary-medium);
 }
+  
 .bs-text-secondary-light {
   color: var(--bs-secondary-light);
 }
+
 .bs-bg-secondary-light {
   background-color: var(--bs-secondary-light);
 }
+  
 .bs-text-secondary-lightest {
   color: var(--bs-secondary-lightest);
 }
+  
 .bs-bg-secondary-lightest {
   background-color: var(--bs-secondary-lightest);
 }
+
 .bs-text-secondary-highlight {
   color: var(--bs-secondary-highlight);
 }
+
 .bs-bg-secondary-highlight {
   background-color: var(--bs-secondary-highlight);
 }
 .bs-text-neutral-dark {
   color: var(--bs-neutral-dark);
 }
+  
 .bs-bg-neutral-dark {
   background-color: var(--bs-neutral-dark);
 }
+
 .bs-text-neutral-base {
   color: var(--bs-neutral-base);
 }
+
 .bs-bg-neutral-base {
   background-color: var(--bs-neutral-base);
 }
+      
 .bs-text-neutral-medium {
   color: var(--bs-neutral-medium);
 }
+      
 .bs-bg-neutral-medium {
   background-color: var(--bs-neutral-medium);
 }
+      
 .bs-text-neutral-light {
   color: var(--bs-neutral-light);
 }
+    
 .bs-bg-neutral-light {
   background-color: var(--bs-neutral-light);
 }
+      
 .bs-text-neutral-lightest {
   color: var(--bs-neutral-lightest);
 }
+      
 .bs-bg-neutral-lightest {
   background-color: var(--bs-neutral-lightest);
 }
 /* Accent Colors */
+
 .bs-text-accent-1-base-fixed {
   color: var(--bs-accent-1-base-fixed);
 }
+
 .bs-bg-accent-1-base-fixed {
   background-color: var(--bs-accent-1-base-fixed);
 }
+
 .bs-text-accent-1-base {
   color: var(--bs-accent-1-base);
 }
+
 .bs-bg-accent-1-base {
   background-color: var(--bs-accent-1-base);
 }
+    
 .bs-text-accent-1-medium {
   color: var(--bs-accent-1-medium);
 }
+    
 .bs-bg-accent-1-medium {
   background-color: var(--bs-accent-1-medium);
 }
+    
 .bs-text-accent-1-light {
   color: var(--bs-accent-1-light);
 }
+
 .bs-bg-accent-1-light {
   background-color: var(--bs-accent-1-light);
 }
+    
 .bs-text-accent-1-lightest {
   color: var(--bs-accent-1-lightest);
 }
+    
 .bs-bg-accent-1-lightest {
   background-color: var(--bs-accent-1-lightest);
 }
+
 .bs-text-accent-1-highlight {
   color: var(--bs-accent-1-highlight);
 }
+
 .bs-bg-accent-1-highlight {
   background-color: var(--bs-accent-1-highlight);
 }
 .bs-text-accent-2-base-fixed {
   color: var(--bs-accent-2-base-fixed);
 }
+
 .bs-bg-accent-2-base-fixed {
   background-color: var(--bs-accent-2-base-fixed);
 }
+
 .bs-text-accent-2-base {
   color: var(--bs-accent-2-base);
 }
+
 .bs-bg-accent-2-base {
   background-color: var(--bs-accent-2-base);
 }
+    
 .bs-text-accent-2-medium {
   color: var(--bs-accent-2-medium);
 }
+    
 .bs-bg-accent-2-medium {
   background-color: var(--bs-accent-2-medium);
 }
+    
 .bs-text-accent-2-light {
   color: var(--bs-accent-2-light);
 }
+
 .bs-bg-accent-2-light {
   background-color: var(--bs-accent-2-light);
 }
+    
 .bs-text-accent-2-lightest {
   color: var(--bs-accent-2-lightest);
 }
+    
 .bs-bg-accent-2-lightest {
   background-color: var(--bs-accent-2-lightest);
 }
+ 
 .bs-text-accent-2-highlight {
   color: var(--bs-accent-2-highlight);
 }
+
 .bs-bg-accent-2-highlight {
   background-color: var(--bs-accent-2-highlight);
 }
 .bs-text-accent-3-base-fixed {
   color: var(--bs-accent-3-base-fixed);
 }
+
 .bs-bg-accent-3-base-fixed {
   background-color: var(--bs-accent-3-base-fixed);
 }
+
 .bs-text-accent-3-base {
   color: var(--bs-accent-3-base);
 }
+
 .bs-bg-accent-3-base {
   background-color: var(--bs-accent-3-base);
 }
+    
 .bs-text-accent-3-medium {
   color: var(--bs-accent-3-medium);
 }
+    
 .bs-bg-accent-3-medium {
   background-color: var(--bs-accent-3-medium);
 }
+    
 .bs-text-accent-3-light {
   color: var(--bs-accent-3-light);
 }
+
 .bs-bg-accent-3-light {
   background-color: var(--bs-accent-3-light);
 }
+    
 .bs-text-accent-3-lightest {
   color: var(--bs-accent-3-lightest);
 }
+    
 .bs-bg-accent-3-lightest {
   background-color: var(--bs-accent-3-lightest);
 }
+
 .bs-text-accent-3-highlight {
   color: var(--bs-accent-3-highlight);
 }
+
 .bs-bg-accent-3-highlight {
   background-color: var(--bs-accent-3-highlight);
 }
 .bs-text-accent-4-base-fixed {
   color: var(--bs-accent-4-base-fixed);
 }
+
 .bs-bg-accent-4-base-fixed {
   background-color: var(--bs-accent-4-base-fixed);
 }
+
 .bs-text-accent-4-base {
   color: var(--bs-accent-4-base);
 }
+
 .bs-bg-accent-4-base {
   background-color: var(--bs-accent-4-base);
 }
+
 .bs-text-accent-4-medium {
   color: var(--bs-accent-4-medium);
 }
+
 .bs-bg-accent-4-medium {
   background-color: var(--bs-accent-4-medium);
 }
+
 .bs-text-accent-4-light {
   color: var(--bs-accent-4-light);
 }
+
 .bs-bg-accent-4-light {
   background-color: var(--bs-accent-4-light);
 }
+
 .bs-text-accent-4-lightest {
   color: var(--bs-accent-4-lightest);
 }
+
 .bs-bg-accent-4-lightest {
   background-color: var(--bs-accent-4-lightest);
 }
+
 .bs-text-accent-4-highlight {
   color: var(--bs-accent-4-highlight);
 }
+
 .bs-bg-accent-4-highlight {
   background-color: var(--bs-accent-4-highlight);
 }
 .bs-text-accent-5-base {
   color: var(--bs-accent-5-base);
 }
+
 .bs-bg-accent-5-base {
   background-color: var(--bs-accent-5-base);
 }
+
 .bs-text-accent-5-medium {
   color: var(--bs-accent-5-medium);
 }
+
 .bs-bg-accent-5-medium {
   background-color: var(--bs-accent-5-medium);
 }
+
 .bs-text-accent-5-light {
   color: var(--bs-accent-5-light);
 }
+
 .bs-bg-accent-5-light {
   background-color: var(--bs-accent-5-light);
 }
+
 .bs-text-accent-5-lightest {
   color: var(--bs-accent-5-lightest);
 }
+
 .bs-bg-accent-5-lightest {
   background-color: var(--bs-accent-5-lightest);
 }
+
 .bs-text-accent-5-highlight {
   color: var(--bs-accent-5-highlight);
 }
+
 .bs-bg-accent-5-highlight {
   background-color: var(--bs-accent-5-highlight);
 }
 .bs-text-accent-6-base {
   color: var(--bs-accent-6-base);
 }
+
 .bs-bg-accent-6-base {
   background-color: var(--bs-accent-6-base);
 }
+
 .bs-text-accent-6-medium {
   color: var(--bs-accent-6-medium);
 }
+
 .bs-bg-accent-6-medium {
   background-color: var(--bs-accent-6-medium);
 }
+
 .bs-text-accent-6-light {
   color: var(--bs-accent-6-light);
 }
+
 .bs-bg-accent-6-light {
   background-color: var(--bs-accent-6-light);
 }
+
 .bs-text-accent-6-lightest {
   color: var(--bs-accent-6-lightest);
 }
+
 .bs-bg-accent-6-lightest {
   background-color: var(--bs-accent-6-lightest);
 }
+
 .bs-text-accent-6-highlight {
   color: var(--bs-accent-6-highlight);
 }
+
 .bs-bg-accent-6-highlight {
   background-color: var(--bs-accent-6-highlight);
 }
 .bs-text-accent-7-base {
   color: var(--bs-accent-7-base);
 }
+
 .bs-bg-accent-7-base {
   background-color: var(--bs-accent-7-base);
 }
+
 .bs-text-accent-7-medium {
   color: var(--bs-accent-7-medium);
 }
+
 .bs-bg-accent-7-medium {
   background-color: var(--bs-accent-7-medium);
 }
+
 .bs-text-accent-7-light {
   color: var(--bs-accent-7-light);
 }
+
 .bs-bg-accent-7-light {
   background-color: var(--bs-accent-7-light);
 }
+
 .bs-text-accent-7-lightest {
   color: var(--bs-accent-7-lightest);
 }
+
 .bs-bg-accent-7-lightest {
   background-color: var(--bs-accent-7-lightest);
 }
+
 .bs-text-accent-7-highlight {
   color: var(--bs-accent-7-highlight);
 }
+
 .bs-bg-accent-7-highlight {
   background-color: var(--bs-accent-7-highlight);
 }
 /* Status Colors */
+
 .bs-text-positive-base {
   color: var(--bs-positive-base);
 }
+
 .bs-bg-positive-base {
   background-color: var(--bs-positive-base);
 }
+
 .bs-text-positive-medium {
   color: var(--bs-positive-medium);
 }
+
 .bs-bg-positive-medium {
   background-color: var(--bs-positive-medium);
 }
+
 .bs-text-positive-highlight {
   color: var(--bs-positive-highlight);
 }
+
 .bs-bg-positive-highlight {
   background-color: var(--bs-positive-highlight);
 }
 .bs-text-warning-base {
   color: var(--bs-warning-base);
 }
+
 .bs-bg-warning-base {
   background-color: var(--bs-warning-base);
 }
+
 .bs-text-warning-medium {
   color: var(--bs-warning-medium);
 }
+
 .bs-bg-warning-medium {
   background-color: var(--bs-warning-medium);
 }
+
 .bs-text-warning-highlight {
   color: var(--bs-warning-highlight);
 }
+
 .bs-bg-warning-highlight {
   background-color: var(--bs-warning-highlight);
 }
 .bs-text-negative-base {
   color: var(--bs-negative-base);
 }
+
 .bs-bg-negative-base {
   background-color: var(--bs-negative-base);
 }
+
 .bs-text-negative-medium {
   color: var(--bs-negative-medium);
 }
+
 .bs-bg-negative-medium {
   background-color: var(--bs-negative-medium);
 }
+
 .bs-text-negative-highlight {
   color: var(--bs-negative-highlight);
 }
+
 .bs-bg-negative-highlight {
   background-color: var(--bs-negative-highlight);
 }