@wwtdev/bsds-css 2.33.0 → 2.33.1

package/dist/wwt-bsds-utilities.css

@@ -1,1266 +0,0 @@
-/* Utilities */
-.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);
-}
-/* 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);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.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: 1px solid var(--border-color);
-  color: var(--text-color);
-  padding-bottom: var(--box-space);
-  padding-left: var(--box-space);
-  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) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.bs-box[data-invert="true"]) :is(input, textarea, select):where(:focus-visible),
-: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);
-  --pill-text: var(--bs-gray-100);
-}
-:where(.bs-box[data-invert="true"]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-gray-100);
-}
-:where(.dark .bs-box[data-invert="true"]) .bs-pill {
-  --pill-text: var(--bs-accent-1-base);
-}
-:where(.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) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.bs-box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.bs-box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-base);
-}
-.bs-cluster {
-  --cluster-space: var(--bs-space-6);
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  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);
-}
-.bs-text-xs {
-  font-size: var(--bs-text-xs);
-  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);
-  }
-}
-.bs-font-light {
-  font-weight: var(--bs-font-light);
-}
-.bs-font-normal {
-  font-weight: var(--bs-font-normal);
-}
-.bs-font-semibold {
-  font-weight: var(--bs-font-semibold);
-}
-.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);
-}
-.bs-prose {
-  --prose-width: 70ch;
-  font-size: var(--bs-text-base);
-  font-weight: var(--bs-font-normal);
-  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;
-}
-.bs-region {
-  --region-space: var(--bs-space-6);
-  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);
-}
-.bs-wrapper {
-  --max-width: 75rem;
-  --wrapper-space: var(--bs-space-6);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--max-width);
-  min-width: 0;
-  padding-left: var(--wrapper-space);
-  padding-right: var(--wrapper-space);
-  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);
-}
-/* Atom */
-.bs-border-atom-ai {
-  /* border-image (which is needed for the border gradient) cannot be combined with border-radius 🤷‍♂️  */
-  /* this uses the background-clip property, which is compatible */
-  background: linear-gradient(white, white) padding-box,
-              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-ecomm-positive {
-  color: var(--bs-ink-ecomm-positive);
-}
-.bs-bg-ink-ecomm-positive {
-  background-color: var(--bs-ink-ecomm-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 {
-  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);
-}
-/* Status Colors */
-.bs-text-positive-base-fixed {
-  color: var(--bs-positive-base-fixed);
-}
-.bs-bg-positive-base-fixed {
-  background-color: var(--bs-positive-base-fixed);
-}
-.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-light {
-  color: var(--bs-positive-light);
-}
-.bs-bg-positive-light {
-  background-color: var(--bs-positive-light);
-}
-.bs-text-positive-lightest {
-  color: var(--bs-positive-lightest);
-}
-.bs-bg-positive-lightest {
-  background-color: var(--bs-positive-lightest);
-}
-.bs-text-positive-highlight {
-  color: var(--bs-positive-highlight);
-}
-.bs-bg-positive-highlight {
-  background-color: var(--bs-positive-highlight);
-}
-.bs-text-ecomm-positive-base-fixed {
-  color: var(--bs-ecomm-positive-base-fixed);
-}
-.bs-bg-ecomm-positive-base-fixed {
-  background-color: var(--bs-ecomm-positive-base-fixed);
-}
-.bs-text-ecomm-positive-base {
-  color: var(--bs-ecomm-positive-base);
-}
-.bs-bg-ecomm-positive-base {
-  background-color: var(--bs-ecomm-positive-base);
-}
-.bs-text-ecomm-positive-medium {
-  color: var(--bs-ecomm-positive-medium);
-}
-.bs-bg-ecomm-positive-medium {
-  background-color: var(--bs-ecomm-positive-medium);
-}
-.bs-text-ecomm-positive-light {
-  color: var(--bs-ecomm-positive-light);
-}
-.bs-bg-ecomm-positive-light {
-  background-color: var(--bs-ecomm-positive-light);
-}
-.bs-text-ecomm-positive-lightest {
-  color: var(--bs-ecomm-positive-lightest);
-}
-.bs-bg-ecomm-positive-lightest {
-  background-color: var(--bs-ecomm-positive-lightest);
-}
-.bs-text-ecomm-positive-highlight {
-  color: var(--bs-ecomm-positive-highlight);
-}
-.bs-bg-ecomm-positive-highlight {
-  background-color: var(--bs-ecomm-positive-highlight);
-}
-.bs-text-warning-dark {
-  color: var(--bs-warning-dark);
-}
-.bs-bg-warning-dark {
-  background-color: var(--bs-warning-dark);
-}
-.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-light {
-  color: var(--bs-warning-light);
-}
-.bs-bg-warning-light {
-  background-color: var(--bs-warning-light);
-}
-.bs-text-warning-lightest {
-  color: var(--bs-warning-lightest);
-}
-.bs-bg-warning-lightest {
-  background-color: var(--bs-warning-lightest);
-}
-.bs-text-warning-highlight {
-  color: var(--bs-warning-highlight);
-}
-.bs-bg-warning-highlight {
-  background-color: var(--bs-warning-highlight);
-}
-.bs-text-negative-dark {
-  color: var(--bs-negative-dark);
-}
-.bs-bg-negative-dark {
-  background-color: var(--bs-negative-dark);
-}
-.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-light {
-  color: var(--bs-negative-light);
-}
-.bs-bg-negative-light {
-  background-color: var(--bs-negative-light);
-}
-.bs-text-negative-lightest {
-  color: var(--bs-negative-lightest);
-}
-.bs-bg-negative-lightest {
-  background-color: var(--bs-negative-lightest);
-}
-.bs-text-negative-highlight {
-  color: var(--bs-negative-highlight);
-}
-.bs-bg-negative-highlight {
-  background-color: var(--bs-negative-highlight);
-}