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

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%;
-}

package/dist/components/empty-state.css

@@ -1,95 +0,0 @@
-.bs-empty-state {
-  --bs-empty-state-description-color: var(--bs-ink-light);
-  --bs-empty-state-icon-color: var(--bs-violet-300);
-  --bs-empty-state-title-color: var(--bs-ink-base);
-  --col-gap: var(--bs-space-6);
-  --cta-spacing: var(--bs-space-4);
-  --description-font-size: var(--bs-text-base);
-  --description-line-height: var(--bs-leading-base);
-  --description-weight: var(--bs-font-normal);
-  --icon-size: 3rem;
-  --title-font-size: var(--bs-text-lg);
-  --title-line-height: 130%;
-  --title-spacing: 0.5rem;
-  --title-weight: var(--bs-font-normal);
-
-  align-items: center;
-  column-gap: var(--col-gap);
-  display: grid;
-  grid-template-columns: auto 1fr;
-}
-
-.bs-empty-state :where(.bs-empty-state-icon) {
-  align-self: start;
-  height: auto;
-  max-width: var(--icon-size);
-  width: 100%;
-}
-
-.bs-empty-state :where(.bs-empty-state-icon path) {
-  fill: var(--bs-empty-state-icon-color);
-}
-
-.bs-empty-state :where(.bs-empty-state-title) {
-  color: var(--bs-empty-state-title-color);
-  font-size: var(--title-font-size);
-  font-weight: var(--title-weight);
-  line-height: var(--title-line-height);
-  padding-block-end: var(--title-spacing);
-}
-
-.bs-empty-state :where(.bs-empty-state-description) {
-  color: var(--bs-empty-state-description-color);
-  font-size: var(--description-font-size);
-  font-weight: var(--description-weight);
-  line-height: var(--description-line-height);
-}
-
-.bs-empty-state :where(a) {
-  color: var(--bs-ink-blue);
-  text-decoration: underline;
-}
-
-.bs-empty-state :where(a:hover) {
-  cursor: pointer;
-}
-
-/* Call to Actions */
-
-.bs-empty-state
-  :where(
-    .bs-empty-state-description + *,
-    .bs-empty-state-title + *:not(.bs-empty-state-description)
-  ) {
-  margin-block-start: var(--cta-spacing, var(--bs-space-4));
-}
-
-/* Sizing */
-
-.bs-empty-state:where([data-size^='xs']) {
-  --col-gap: var(--bs-space-4);
-  --cta-spacing: var(--bs-space-2);
-  --icon-size: 1.5rem;
-  --title-color: var(--bs-ink-light);
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0;
-}
-
-.bs-empty-state:where([data-size^='sm']) {
-  --description-font-size: var(--bs-text-sm);
-  --icon-size: 2rem;
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0.125rem;
-}
-
-.bs-empty-state:where([data-size^='lg']) {
-  --col-gap: var(--bs-space-8);
-  --cta-spacing: var(--bs-space-6);
-  --description-font-size: var(--bs-text-md);
-  --icon-size: 4rem;
-  --title-font-size: var(--bs-text-xl);
-  --title-line-height: 110%;
-  --title-weight: var(--bs-font-bold);
-}

package/dist/components/filter-buttons.css

@@ -1,112 +0,0 @@
-/*
-custom properties:
---filterbtn-caret-size
---filterbtn-caret-transform
---filterbtn-color
---filterbtn-focus-color
---filterbtn-height
---filterbtn-text-size
---filterbtn-weight
-*/
-
-button:where(.bs-filter-button) {
-  --filterbtn-caret-size: 1rem;
-  --filterbtn-caret-transform: rotate(0deg);
-  --filterbtn-color: var(--bs-ink-blue);
-  --filterbtn-focus-color: transparent;
-  --filterbtn-height: 1.5rem;
-  --filterbtn-text-size: var(--bs-text-base);
-  --filterbtn-weight: 400;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.bs-filter-button {
-  align-items: center;
-  color: var(--filterbtn-color);
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--filterbtn-text-size);
-  font-weight: var(--filterbtn-weight);
-  height: var(--filterbtn-height);
-  line-height: 1.5;
-  transition: outline-color 100ms ease-in-out;
-  width: max-content;
-}
-.bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color) 2px;
-  border-radius: 0.25rem;
-  content: '';
-  display: block;
-  height: 100%;
-  position: absolute;
-  transform: scale(1.25);
-  width: 100%;
-}
-
-.bs-filter-button :where(.bs-icon),
-.bs-filter-button :where(span:has(svg:only-child)) {
-  display: block;
-  height: var(--filterbtn-caret-size);
-  line-height: 1;
-  transform: var(--filterbtn-caret-transform);
-  transform-origin: center;
-  transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size);
-}
-
-.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
-
-  --filterbtn-text-size: var(--bs-text-sm);
-  --filterbtn-caret-size: .75rem;
-}
-
-.bs-filter-button:where([data-size="sm"]) {
-  --filterbtn-text-size: var(--bs-text-sm);
-}
-
-.bs-filter-button:where([data-size="xs"]) {
-  --filterbtn-text-size: var(--bs-text-xs);
-  --filterbtn-weight: 600;
-}
-
-/* Hover state */
-.bs-filter-button:hover {
-  --filterbtn-color: var(--bs-blue-base);
-}
-
-/* Focus state */
-.bs-filter-button:where(:focus-visible) {
-  outline: none;
-  --filterbtn-focus-color: var(--bs-blue-base);
-}
-
-/* Filter open state */
-.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
-  --filterbtn-caret-transform: rotate(180deg);
-}
-
-/* Badge non-standard color */
-.bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-ink-blue);
-}
-
-:where(.dark) .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-blue-medium);
-}
-
-.bs-filter-button:hover :where(.bs-badge) {
-  --badge-bg: var(--filterbtn-color);
-}
-
-/* Disabled state */
-.bs-filter-button:where(:disabled) {
-  --filterbtn-color: var(--bs-ink-disabled);
-  cursor: default;
-}
-
-.bs-filter-button:where(:disabled) :where(.bs-badge) {
-  --badge-bg: var(--bs-bg-disabled);
-  --badge-text: var(--bs-ink-disabled);
-}

package/dist/components/flyout.css

@@ -1,71 +0,0 @@
-.bs-flyout {
-  background-color: var(--bs-bg-base-to-light);
-  box-shadow: var(--bs-shadow-drawerRight);
-  height: 100%;
-  left: 0;
-  margin: 0;
-  max-width: 100vw;
-  opacity: 0;
-  padding: 1.5rem;
-  position: fixed;
-  top: 0;
-  transform: translateX(-100%);
-  transition-duration: 300ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease;
-  width: 360px;
-  z-index: 1000;
-}
-
-.bs-flyout:where([data-absolute="true"]) {
-  position: absolute;
-}
-
-.bs-flyout:where([data-position="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-  left: auto;
-  right: 0;
-  transform: translateX(100%);
-}
-
-.bs-flyout:where([data-size="lg"]) {
-  width: 535px;
-}
-
-.bs-flyout:where([data-shown="true"]) {
-  opacity: 1;
-  /*
-  Needs to be "none" instead of "0" so as not to interfere with calculating
-  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
-  */
-  transform: none;
-}
-
-.bs-flyout :where(.bs-flyout-close-container) {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.bs-flyout :where(.bs-flyout-close-container button) {
-  cursor: pointer;
-  outline-offset: 2px;
-  padding: 2px;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-flyout:where(.bs-flyout-enter-from),
-.bs-flyout:where(.bs-flyout-leave-to) {
-  opacity: 0;
-  transform: translateX(-100%);
-}
-
-.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
-.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
-  transform: translateX(100%);
-}
-
-.bs-flyout:where(.bs-flyout-enter-to),
-.bs-flyout:where(.bs-flyout-leave-from) {
-  opacity: 1;
-  transform: translateX(0);
-}