@wwtdev/bsds-css 2.28.0 → 3.0.0-rc.21

package/dist/components/circle-buttons.css

@@ -1,227 +0,0 @@
-/*
-Properties : Defaults // Description
-====================================
---btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
---btn-icon-padding: .75rem; // padding around icon svg
---btn-icon-size: 1.5rem; // svg width and height
---btn-icon-stroke-color: var(--bs-white);
---btn-main: var(--bs-blue-base); // many things... should probably break this up
---btn-text-color: var(--bs-ink-base);
---btn-text-size: var(--bs-text-md);
-
---btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
---btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
---btn-secondary: var(--bs-blue-medium); // hover state icon bg
---btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
---btn-text-color-hovered: var(--bs-ink-base); // hover state text color
-*/
-
-:where(.bs-circle-button) {
-  --btn-border-color-focused: var(--btn-main);
-  --btn-border-color: transparent;
-  --btn-focus-inset: -0.25rem;
-  --btn-gap: .5rem;
-  --btn-icon-bg-color: var(--btn-main);
-  --btn-icon-padding: .75rem;
-  --btn-icon-size: 1.5rem;
-  --btn-icon-stroke-color: var(--bs-white);
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-shadow-color-active: var(--btn-main);
-  --btn-text-color-hovered: var(--bs-ink-base);
-  --btn-text-color: var(--bs-ink-base);
-  --btn-text-size: 1.125rem;
-  --btn-text-weight: 400;
-}
-
-.bs-circle-button {
-  align-items: center;
-  background-color: transparent;
-  color: var(--btn-text-color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-text-size);
-  font-weight: var(--btn-text-weight);
-  gap: var(--btn-gap);
-  outline: none;
-  position: relative;
-  vertical-align: middle;
-}
-
-a.bs-circle-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  text-decoration: none;
-}
-
-.bs-circle-button :where(.bs-circle-button-icon) {
-  align-items: center;
-  background-color: var(--btn-icon-bg-color);
-  border: none;
-  border-radius: 50%;
-  color: var(--btn-icon-stroke-color);
-  display: inline-flex;
-  justify-content: center;
-  outline: 2px solid transparent;
-  padding: var(--btn-icon-padding);
-  position: relative;
-  transition: all 100ms ease-in-out;
-}
-
-.bs-circle-button :where(.bs-circle-button-icon)::before {
-  border-color: var(--btn-border-color);
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 0.125rem;
-  content: '';
-  inset: var(--btn-focus-inset);
-  position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
-}
-
-.bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
-  --icon-size: var(--btn-icon-size);
-}
-
-/* non-bs-icon svgs */
-.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
-  height: var(--btn-icon-size);
-  width: var(--btn-icon-size);
-}
-
-/* Icon Buttons with Text */
-.bs-circle-button:where([data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-md);
-  --btn-icon-size: 0.75rem;
-  --btn-icon-padding: 0.375rem;
-}
-
-/* Ghost Buttons */
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
-  --btn-icon-bg-color: transparent;
-  --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
-}
-
-/* Active, Hover, Focus states */
-.bs-circle-button:active, .bs-circle-button:hover {
-  --btn-icon-bg-color: var(--btn-secondary);
-  --btn-text-color: var(--btn-text-color-hovered);
-}
-.bs-circle-button:active :where(.bs-circle-button-icon) {
-  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
-  transform-origin: center;
-  transform: scale(0.97);
-}
-
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="right"]):hover::before {
-  transform: translateX(.25rem);
-}
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="left"]):hover::before {
-  transform: translateX(-.25rem);
-}
-
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
-  --btn-icon-bg-color: var(--btn-light);
-}
-
-.bs-circle-button:where(:focus-visible) {
-  --btn-border-color: var(--btn-border-color-focused);
-}
-
-/* Disabled State */
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
-  --btn-icon-stroke-color: var(--bs-ink-disabled);
-  --btn-text-color: var(--bs-ink-disabled);
-  pointer-events: none;
-}
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
-  --btn-icon-bg-color: var(--bs-bg-disabled);
-}
-
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: .875rem;
-}
-
-.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .3125rem;
-  --btn-icon-size: .625rem;
-  --btn-text-size: 1rem;
-}
-
-.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .25rem;
-  --btn-icon-size: .5rem;
-  --btn-text-size: .875rem;
-}
-
-/* Color Variants */
-.bs-circle-button:where([data-variant^="color"]) {
-  --btn-gap: .5rem;
-  --btn-icon-bg-color: transparent;
-  --btn-icon-padding: 0;
-  --btn-icon-size: .75rem; /* stays the same for all sizes */
-  --btn-icon-stroke-color: var(--btn-text-color);
-  --btn-secondary: transparent;
-  --btn-shadow-color-active: transparent;
-}
-.bs-circle-button:where([data-variant="color-blue"]) {
-  --btn-border-color-focused: var(--bs-ink-blue);
-  --btn-text-color: var(--bs-ink-blue);
-  --btn-text-color-hovered: var(--bs-blue-base);
-}
-
-.bs-circle-button:where([data-variant="color-royal"]) {
-  --btn-border-color-focused: var(--bs-ink-royal);
-  --btn-text-color: var(--bs-ink-royal);
-  --btn-text-color-hovered: var(--bs-royal-medium);
-}
-
-.bs-circle-button:where([data-variant="color-purple"]) {
-  --btn-border-color-focused: var(--bs-purple-400);
-  --btn-text-color: var(--bs-ink-purple);
-  --btn-text-color-hovered: var(--bs-purple-medium);
-}
-
-.bs-circle-button:where([data-variant="color-pink"]) {
-  --btn-border-color-focused: var(--bs-pink-400);
-  --btn-text-color: var(--bs-ink-pink);
-  --btn-text-color-hovered: var(--bs-pink-base);
-}
-
-.bs-circle-button:where([data-variant="color-orange"]) {
-  --btn-border-color-focused: var(--bs-ink-orange);
-  --btn-text-color: var(--bs-ink-orange);
-  --btn-text-color-hovered: var(--bs-orange-base);
-}
-
-.bs-circle-button:where([data-variant="color-red"]) {
-  --btn-border-color-focused: var(--bs-ink-red);
-  --btn-text-color: var(--bs-ink-red);
-  --btn-text-color-hovered: var(--bs-red-base);
-}
-
-.bs-circle-button:where([data-variant="color-white"]) {
-  --btn-border-color-focused: var(--bs-ink-white);
-  --btn-text-color: var(--bs-ink-white);
-  /* 80% of --bs-white */
-  --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
-}
-
-.bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
-  --btn-icon-bg-color: transparent;
-  --btn-text-color: var(--bs-ink-disabled);
-}
-
-/* size XXS only supported for color variants */
-.bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: .75rem;
-  --btn-text-weight: 600;
-}

package/dist/components/dropdown-options.css

@@ -1,232 +0,0 @@
-/* Option list */
-.bs-dropdown-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
-  max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
-  overflow-y: auto;
-  padding-block: 0.5rem;
-  padding-left: 0;
-  position: relative;
-}
-
-.bs-dropdown-options:focus-visible {
-  outline: none;
-}
-
- /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
-@media (min-width: 1166px) {
-  /* 5th or 8th child triggers overflow-y (depending on variant) */
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has([data-variant*="description"]:nth-child(5))),
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
-    scrollbar-gutter: stable;
-  }
-
-  /* Fallback for older Firefox+ only if we're not setting data-overflow values */
-  @supports not selector(:has(*)) {
-    :where([data-width="content"]) > .bs-dropdown-options {
-      scrollbar-gutter: stable;
-    }
-  }
-
-  /* Also allow this for js solutions if :has not available via data-overflow */
-  /* Reset scrollbar gutter when data-overflow is used */
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow]) {
-    scrollbar-gutter: auto;
-  }
-
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow="true"]) {
-    scrollbar-gutter: stable;
-  }
-}
-
-/* Option list item */
-.bs-dropdown-options :where(li) {
-  align-items: center;
-  border-bottom: 2px solid transparent;
-  border-left: 4px solid transparent;
-  border-radius: 3px;
-  border-right: 2px solid transparent;
-  border-top: 2px solid transparent;
-  color: var(--bs-ink-base);
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: grid;
-  padding-block: 0.25rem;
-  padding-inline: 1.25rem;
-  row-gap: 0.125rem;
-  word-break: break-word;
-  word-wrap: break-word;
-}
-
-/* Variant: 2-col */
-.bs-dropdown-options :where(li[data-variant~="2-col"]) {
-  grid-template-columns: min-content 1fr;
-}
-
-/* Variant: 3-col */
-.bs-dropdown-options :where(li[data-variant~="3-col"]) {
-  grid-template-columns: min-content min-content 1fr;
-}
-
-/* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  min-height: 1.125rem;
-  line-height: 1.125rem;
-}
-
-/* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
-  grid-column-start: 2;
-}
-
-/* Variant: 3-col description */
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
-  grid-column-start: 3;
-}
-
-/* Hover or data-selected */
-.bs-dropdown-options :where(li:not([role="separator"]):hover),
-.bs-dropdown-options :where(li[data-selected]) {
-  background-color: var(--bs-bg-medium-to-light);
-  border-left: 4px solid var(--bs-ink-blue);
-  color: var(--bs-ink-blue);
-  outline: none;
-}
-
-/* Variant: negative */
-.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
-  /* 25% alpha version of --bs-red-400 */
-  background-color: rgba(248, 169, 170, 0.25);
-  border-left: 4px solid var(--bs-ink-red);
-  color: var(--bs-ink-red);
-}
-
-/* Hover or data-selected for 2-col/3-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-blue);
-}
-
-/* Hover or data-selected for negative + 2-col/3-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-red);
-}
-
-/* List option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
-  --focus-border-color: var(--bs-blue-base);
-  border: 2px solid var(--focus-border-color);
-  outline: none;
-  padding-left: 1.375rem;
-}
-
-/* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
-  border-left: 4px solid var(--focus-border-color);
-  padding-left: 1.25rem;
-}
-
-/* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
-  --focus-border-color: var(--bs-red-200);
-}
-
-/* Multi-select divider */
-.bs-dropdown-options :where(li[role="separator"]) {
-  cursor: default;
-  padding-block: 0.125rem;
-  padding-right: 1.375rem;
-}
-
-/* Multi-select divider line */
-.bs-dropdown-options :where(hr) {
-  background-color: var(--bs-navy-light);
-  height: .0625rem;
-  margin-block: 0;
-  margin-inline: 0;
-}
-
-/* Disable hover styles */
-.bs-dropdown-options :where(li[data-no-hover]:hover) {
-  background-color: transparent;
-  border-left-color: transparent;
-  color: var(--bs-ink-base);
-  cursor: default;
-}
-
-/* Style label to look like other options */
-.bs-dropdown-options :where(li label) {
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: 400;
-}
-
-/* Don't change option color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"]):hover,
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-selected]) {
-  color: var(--bs-ink-base);
-}
-
-/* Don't change description color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
-  color: var(--bs-ink-light);
-}
-
-/* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
-}
-
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
-  padding-right: 0.625rem;
-}
-
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
-  padding-left: 0.625rem;
-}
-
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
-  padding-left: 0.5rem;
-}
-
-@media (min-width: 1166px)  {
-  .bs-dropdown-options :where(li) {
-    padding-left: 0.5rem;
-    padding-right: 0.75rem;
-  }
-
-  .bs-dropdown-options :where(li[role="separator"]) {
-    padding-right: 0.625rem;
-  }
-
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
-    padding-left: 0.625rem;
-  }
-
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
-    padding-left: 0.5rem;
-  }
-}

package/dist/components/dropdown.css

@@ -1,185 +0,0 @@
-/* Parent */
-.bs-dropdown-parent {
-  display: inline-block;
-  position: relative;
-}
-
-/* Backdrop for mobile bottom sheet */
-.bs-dropdown-backdrop {
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  background: rgba(29, 30, 72, 0.05);
-  bottom: 0;
-  content: "";
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 998;
-}
-
-/* Content */
-.bs-dropdown {
-  --dropdown-bottom: 0;
-  --dropdown-left: 0;
-  --dropdown-right: auto;
-  --dropdown-top: auto;
-  --dropdown-width: 100%;
-  --dropdown-transform: translate(0, 100%);
-
-  background-color: var(--bs-bg-base-to-medium);
-  border-radius: 4px;
-  bottom: var(--dropdown-bottom);
-  box-shadow: var(--bs-shadow-contentMedium);
-  left: var(--dropdown-left);
-  line-height: 1.5rem;
-  margin: 0;
-  opacity: 0;
-  overflow-y: auto;
-  position: fixed;
-  right: var(--dropdown-right);
-  top: var(--dropdown-top);
-  transform-origin: center bottom;
-  transform: var(--dropdown-transform);
-  transition-duration: 75ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease-in-out;
-  width: var(--dropdown-width);
-  z-index: 999;
-}
-
-/* Mobile Header */
-.bs-dropdown > :where(header) {
-  border-bottom: 1px solid var(--bs-border-base);
-  display: flex;
-  justify-content: space-between;
-  padding: 1.5rem;
-}
-
-.bs-dropdown > :where(header) :where(h3) {
-  font-size: 1.25rem;
-}
-
-.bs-dropdown > :where(header) :where(p) {
-  font-size: 1rem;
-}
-
-.bs-dropdown > :where(header) :where(button) {
-  cursor: pointer;
-  height: 1rem;
-  width: 1rem;
-}
-
-/* data-shown */
-.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
-  --dropdown-transform: translate(0, 0);
-  opacity: 1;
-}
-
-/* Sizing */
-.bs-dropdown:where([data-width="sm"]) {
-  --dropdown-wscreen-width: 10rem;
-}
-
-.bs-dropdown:where([data-width="md"]),
-.bs-dropdown:where(:not([data-width])) {
-  --dropdown-wscreen-width: 20rem;
-}
-
-.bs-dropdown:where([data-width="lg"]) {
-  --dropdown-wscreen-width: 40rem;
-}
-
-.bs-dropdown:where([data-width="content"]) {
-  --dropdown-wscreen-width: max-content;
-}
-
-.bs-dropdown-parent:where([data-width="anchor"]) :where(.bs-dropdown) {
-  --dropdown-wscreen-width: 100%;
-}
-
-/* data-top */
-.bs-dropdown:where([data-top]:not([data-top="false"])) {
-  --dropdown-wscreen-bottom: calc(100% + 0.5rem);
-  --dropdown-wscreen-top: auto;
-}
-
-/* data-center */
-.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
-  --dropdown-transform: translate(-50%, 0);
-  --dropdown-wscreen-left: 50%;
-}
-
-/* data-right */
-.bs-dropdown-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown) {
-  --dropdown-transform: translate(0, 0);
-  --dropdown-wscreen-left: auto;
-  --dropdown-wscreen-right: 0;
-}
-
-/* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) {
-  --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
-  --dropdown-left: var(--dropdown-wscreen-left, initial);
-  --dropdown-right: var(--dropdown-wscreen-right, initial);
-  --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
-  --dropdown-width: var(--dropdown-wscreen-width, initial);
-  --dropdown-transform: initial;
-
-  position: absolute;
-}
-
-.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
-  display: none;
-}
-
-@media (min-width: 1166px) {
-  .bs-dropdown-backdrop {
-    display: none;
-  }
-
-  .bs-dropdown {
-    --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
-    --dropdown-left: var(--dropdown-wscreen-left, initial);
-    --dropdown-right: var(--dropdown-wscreen-right, initial);
-    --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
-    --dropdown-width: var(--dropdown-wscreen-width, initial);
-    --dropdown-transform: initial;
-
-    position: absolute;
-  }
-
-  /* Hide the header */
-  .bs-dropdown > :where(header) {
-    display: none;
-  }
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-dropdown:where(.bs-dropdown-enter-from),
-.bs-dropdown:where(.bs-dropdown-leave-to) {
-  opacity: 0;
-  transform: var(--dropdown-transform);
-}
-
-.bs-dropdown:where(.bs-dropdown-enter-to),
-.bs-dropdown:where(.bs-dropdown-leave-from) {
-  opacity: 1;
-  transform: translate(0, 0);
-}
-
-.bs-dropdown :where(.mobile-select-button-container) {
-  display: none;
-  overflow: hidden;
-}
-
-@media (max-width: 1166px) {
-  .bs-dropdown :where(.mobile-select-button-container) {
-    display: flex;
-  }
-}
-
-.bs-dropdown :where(.mobile-select-button) {
-  margin: .875rem;
-  width: 100%;
-}