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

package/dist/components/form-input-search.css

@@ -1,70 +0,0 @@
-:where(.bs-input-search) {
-  display: inline-block;
-  width: 100%;
-}
-
-.bs-input-search :where(.bs-icon svg) {
-  box-sizing: content-box;
-}
-
-.bs-input-search :where([data-component="bs-icon-search"]) {
-  --icon-size: var(--search-icon-size, 1.75rem);
-  padding: var(--search-icon-padding, 0 0 0 .75rem);
-}
-
-/* Clear Button */
-.bs-input-search button {
-  align-items: center;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  transition: transform 100ms ease-in-out;
-}
-
-.bs-input-search button:where(:active) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
-}
-
-.bs-input-search button:where(:focus) {
-  border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
-}
-
-
-/* Filter variant */
-
-.bs-input-search:where([data-variant="filter"]) {
-  --focus-border: transparent;
-  --input-border: transparent;
-  --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-blue-base);
-  --input-padding-block: 0 0.125rem;
-  --input-padding-inline: 0.5rem;
-  --input-placeholder: var(--bs-ink-light);
-  --input-text-size: var(--bs-text-sm);
-  --search-icon-size: 1rem;
-  --search-icon-padding: 0;
-}
-
-/* Filter variant: persist placeholder text color (`ink-light`) in dark mode */
-:where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::placeholder {
-  --input-placeholder: var(--bs-ink-light);  
-}
-
-/* Filter variant: cancels out base hover state styles */
-.bs-input-addon:where([data-variant="filter"]):hover {
-  --input-bg: var(--bs-bg-base);
-}
-
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
-  --input-bg: var(--bs-bg-base);
-  --input-border: transparent;
-}

package/dist/components/form-labels.css

@@ -1,36 +0,0 @@
-:where(label, legend),
-label:where(.bs-label) {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-
-.bs-label,
-:where(label, legend) {
-  --label-color: var(--bs-ink-base);
-  color: var(--label-color);
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: var(--bs-leading-base);
-}
-
-/* Required asterisk */
-:where(label, legend) :where([data-required]:not([data-required="false"])),
-.bs-label :where([data-required="true"]) {
-  color: var(--label-asterisk-color, var(--bs-ink-red));
-}
-
-/* Disabled state */
-:where(label[data-disabled]:not([data-disabled="false"])),
-:where(label[data-disabled]:not([data-disabled="false"])) *,
-.bs-label:where([data-disabled="true"]),
-.bs-label:where([data-disabled="true"]) * {
-  --label-asterisk-color: transparent;
-  --label-color: var(--bs-ink-disabled);
-}
-
-.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
-  content: '';
-  inset: 0 0 -.25rem 0;
-  position: absolute;
-}

package/dist/components/form-switches.css

@@ -1,150 +0,0 @@
-.bs-switch {
-  --box-shadow: var(--bs-ink-base);
-  --ball-background: var(--bs-white);
-  --ball-diameter: 1rem;
-  --inner-text-line-height: 1;
-  --inner-text-size: var(--bs-text-sm);
-  --inner-text-width: 1rem;
-  --inner-text-padding: 0.5rem;
-  --offset: 0.25rem;
-  --offset-double: .5rem;
-  --switch-background: var(--bs-gray-400);
-  --switch-height: 1.5rem;
-  --switch-width: 2.5rem;
-
-  border: none;
-  border-radius: 100vw;
-  cursor: pointer;
-  height: var(--switch-height);
-  position: relative;
-}
-
-.bs-switch:where([data-size="sm"]) {
-  --ball-diameter: .625rem;
-  --inner-text-line-height: 1.6666;
-  --inner-text-size: var(--bs-text-xs);
-  --inner-text-width: .75rem;
-  --inner-text-padding: 0.375rem;
-  --offset: 0.1875rem;
-  --offset-double: .375rem;
-  --switch-height: 1rem;
-  --switch-width: 1.875rem;
-}
-
-.bs-switch input,
-.bs-switch:where([data-size="sm"]) input {
-  cursor: pointer;
-  height: 100%;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-}
-
-.bs-switch span {
-  align-items: center;
-  background-color: var(--switch-background);
-  border-radius: 100vw;
-  display: inline-block;
-  font-size: var(--inner-text-size);
-  height: 100%;
-  padding: 0 var(--inner-text-padding);
-  pointer-events: none;
-  position: relative;
-  transition: 250ms;
-  width: var(--switch-width);
-}
-
-.bs-switch :where(input:checked) ~ :where(span),
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
-  --switch-background: var(--bs-blue-base);
-}
-
-/* Toggle "ball" */
-.bs-switch :where(span)::before {
-  background-color: var(--ball-background);
-  border-radius: 50%;
-  box-sizing: border-box;
-  content: '';
-  height: var(--ball-diameter);
-  left: var(--offset);
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  transition: inherit;
-  width: var(--ball-diameter);
-}
-
-.bs-switch :where(input:checked) ~ :where(span)::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
-}
-
-.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
-}
-
-
-/* Inner "on/off" text */
-.bs-switch :where(span)::after {
-  align-items: center;
-  color: var(--ball-background);
-  content: var(--inner-label-text);
-  display: flex;
-  height: 100%;
-  justify-content: var(--inner-label-position, flex-start);
-  left: 0;
-  line-height: var(--inner-text-line-height);
-  padding: var(--inner-text-padding);
-  position: absolute;
-  text-transform: capitalize;
-  top: 0;
-  width: 100%;
-}
-
-.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 3.5rem;
-}
-
-.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-
-.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
-  --inner-label-position: flex-end;
-  --inner-label-text: attr(data-inner-off-label);
-}
-
-.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
-  --inner-label-text: attr(data-inner-on-label);
-}
-
-/* Focus state */
-
-.bs-switch :where(input:focus-visible) + :where(span),
-.bs-switch:where(:focus-visible) :where(button span) {
-  box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-base));
-  outline: 2px solid transparent;
-}
-:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-to-base);
-}
-
-/* Disabled state */
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
-  --ball-background: var(--bs-ink-disabled);
-  --switch-background: var(--bs-bg-disabled);
-}
-
-.bs-switch input:where(:disabled) {
-  cursor: default;
-}

package/dist/components/form-text-fields.css

@@ -1,201 +0,0 @@
-:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
-:where(label + textarea, label > textarea),
-:where(label + select, label > select) {
-  margin-top: 0.25rem;
-}
-
-/*
-Custom properties:
---input-bg (background color)
---input-border (border color)
---input-border-width (border width)
---input-caret (caret color)
---input-padding-block (padding block)
---input-padding-inline (padding inline)
---input-placeholder (placeholder color)
---input-text-size (font size)
-*/
-
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea,
-select,
-:is(.bs-input, .bs-select, .bs-textarea) {
-  appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-color: var(--input-border, var(--bs-border-input));
-  border-radius: 0.25rem;
-  border-style: solid;
-  border-width: var(--input-border-width, 1px);
-  caret-color: var(--input-caret, var(--bs-blue-base));
-  color: var(--bs-ink-base);
-  font-size: var(--input-text-size, var(--bs-text-base));
-  font-weight: 400;
-  height: 2.5rem;
-  line-height: var(--bs-leading-base);
-  padding-block: var(--input-padding-block, 0.0625rem);
-  padding-inline: var(--input-padding-inline, 0.75rem);
-}
-
-:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-:where(.dark) textarea,
-:where(.dark) select,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
-  --input-bg: transparent;
-}
-
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea,
-select,
-:is(.bs-input, .bs-select, .bs-textarea) {
-  width: 100%;
-}
-
-input:where([type='text'], [type='email'], [type='url']),
-select,
-.bs-input:where([type='text'], [type='email'], [type='url']),
-:is(.bs-input, .bs-select, .bs-textarea) {
-  text-overflow: ellipsis;
-}
-
-.bs-textarea,
-textarea {
-  height: auto;
-  padding-block: 0.5rem;
-  resize: vertical;
-}
-
-:is(input, textarea, select)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  color: var(--input-placeholder, var(--bs-violet-100));
-}
-
-:where(.dark) :is(input, textarea, select)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  --input-placeholder: var(--bs-violet-200);
-}
-
-:is(input, textarea, select):where(:focus-visible)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
-  opacity: 0;
-}
-
-/* FOCUS state */
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
-:is(select, .bs-select):where(:focus) {
-  --input-border: var(--bs-blue-base);
-  outline-style: none;
-  outline-width: 0px;
-}
-
-/* OPEN state */
-:is(select, .bs-select):where(:open) {
-  background: var(--bs-bg-base-to-light);
-}
-
-/* DISABLED state */
-:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
-  --input-border: var(--bs-ink-disabled);
-  --input-bg: var(--bs-bg-disabled);
-  color: var(--bs-ink-disabled);
-}
-
-/* Text inputs should not have a border when disabled */
-:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
-textarea:where(:disabled),
-select:where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
-  --input-border-width: 0px;
-}
-
-/* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])),
-:is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
-  --input-border: var(--bs-ink-red);
-}
-
-/*
-Removes the built-in 'margin' on bottom of textarea
-see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
-*/
-:has(> textarea:only-child),
-:has(> .bs-textarea:only-child) {
-  display: block;
-  line-height: 0;
-}
-
-/* chrome user agent styling was applying opacity: 0.7 */
-:where(select:disabled) {
-  opacity: 1;
-}
-
-:is(input, textarea, select):disabled::placeholder,
-:is(input, textarea, select)[disabled]::placeholder,
-:is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
-:is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
-  opacity: 0;
-}
-
-/* Select */
-
-select,
-.bs-select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1em 1em;
-  padding-right: var(--bs-space-9);
-}
-select[multiple],
-.bs-select[multiple] {
-  background-image: none;
-  height: auto;
-}
-
-:where(.dark) select,
-:where(.dark) .bs-select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-
-:where(.dark) select:where(:disabled),
-:where(.dark) .bs-select:where(:disabled) {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-
-/* Allows for styling a button to look like a select input */
-:where(button).bs-select {
-  align-items: center;
-  /* Remove this for buttons since they will have the caret added */
-  background-image: none;
-  cursor: pointer;
-  display: flex;
-  padding-right: var(--input-padding-inline, 0.75rem);
-}
-
-:where(.dark) :where(button).bs-select,
-:where(.dark) :where(button).bs-select:where(:disabled) {
-  background-image: none;
-}
-
-:where(button).bs-select :where(*:first-child) {
-  flex-grow: 1;
-  text-align: left;
-}
-
-:where(button).bs-select :where(.bs-icon) {
-  color: var(--bs-ink-base);
-  transform: none;
-  transition-duration: 200ms;
-  transition-property: transform;
-  transition-timing-function: ease-in-out;
-}
-
-:where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
-  transform: rotate(180deg);
-}

package/dist/components/horizontal-navigation-mobile.css

@@ -1,234 +0,0 @@
-.bs-horizontal-nav-mobile {
-  --bg-color: var(--bs-bg-light);
-  --top-offset: 48px;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: var(--top-offset);
-  z-index: 1000;
-}
-
-@media (min-width: 1166px) {
-  .bs-horizontal-nav-mobile {
-    display: none;
-  }
-}
-
-/* ===== Toggle ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle) {
-  align-items: center;
-  background-color: var(--bs-bg-light);
-  color: var(--bs-ink-light);
-  cursor: pointer;
-  display: flex;
-  height: var(--bs-horizontal-nav-height);
-  justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-  padding-top: 0.5rem;
-  width: 100%;
-}
-
-.bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-toggle) {
-  display: none;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title) {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title-icon) {
-  color: var(--bs-ink-blue);
-  height: 1rem;
-  width: 1rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-caret) {
-  height: 0.75rem;
-  transform: none;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: ease-in-out;
-  width: 0.75rem;
-}
-
-.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-toggle-caret) {
-  transform: rotate(180deg);
-}
-
-/* ===== Nav Menu Container ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu) {
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  background-color: var(--bg-color);
-  display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  /* 100vh - top offset - toggle height */
-  max-height: calc(100dvh - var(--top-offset) - 48px);
-  opacity: 0;
-  overflow: scroll;
-  scrollbar-width: none;  /* Firefox */
-  transition-duration: 200ms;
-  transition-property: opacity;
-  transition-timing-function: ease;
-}
-
-.bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-menu) {
-  max-height: calc(100dvh - var(--top-offset));
-}
-
-.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-menu) {
-  opacity: 1;
-}
-
-/* ===== Nav List ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul) {
-  background-color: var(--bg-color);
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-}
-
-/* ===== Nav Items ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li) {
-  border-top: 1px solid var(--bs-border-base);
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li:last-child) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
-  color: var(--bs-ink-light);
-  cursor: pointer;
-  display: flex;
-  font-weight: 400;
-  padding-bottom: 0.75rem;
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-  padding-top: 0.75rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a:hover),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a:hover) {
-  color: var(--bs-ink-blue);
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]) {
-  color: var(--bs-ink-base);
-  font-weight: 600;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]:hover),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]:hover) {
-  color: var(--bs-ink-blue);
-}
-
-/* ===== Nested Nav Items ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle) {
-  align-items: center;
-  color: var(--bs-ink-light);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 0.75rem;
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-  padding-top: 0.75rem;
-  width: 100%;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle[data-active="true"]) {
-  font-weight: 600;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-toggle) {
-  background-color: var(--bs-bg-medium);
-  color: var(--bs-ink-blue);
-  font-weight: 600;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle:hover) {
-  color: var(--bs-ink-blue);
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle-caret) {
-  height: 0.75rem;
-  transform: none;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: ease-in-out;
-  width: 0.75rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
-  transform: rotate(180deg);
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu) {
-  background-color: var(--bs-bg-medium);
-  display: none;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-menu) {
-  display: block;
-}
-
-/* ===== External Links ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links) {
-  margin-top: auto;
-  padding-top: 2.25rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-
-/* ===== End Items ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items) {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
-  margin-top: auto;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items > *:not(button)) {
-  padding-bottom: 0.75rem;
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-  padding-top: 0.75rem;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items > button) {
-  margin-bottom: 0.75rem;
-  margin-left: 2.25rem;
-  margin-right: 2.25rem;
-  margin-top: 0.75rem;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-from),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-to) {
-  opacity: 0;
-}
-
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-to),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-from) {
-  opacity: 1;
-}