@wwtdev/bsds-css 1.6.5 → 1.8.0

package/dist/components/dropdown-options.css

@@ -0,0 +1,115 @@
+/* Option list */
+.bs-dropdown-options {
+  list-style: none;
+  padding: 0;
+}
+
+.bs-dropdown-options :where(li:first-child) {
+  margin-top: 0.5rem;
+}
+
+/* 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;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  row-gap: 0.125rem;
+}
+
+/* Variant: 2-col */
+.bs-dropdown-options :where(li[data-variant~="2-col"]) {
+  grid-template-columns: min-content 1fr;
+}
+
+/* Variant: description */
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+  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)) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+  grid-column-start: 2;
+  height: 1.125rem;
+  line-height: 1.125rem;
+}
+
+/* Hover or data-selected */
+.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li[data-selected]) {
+  background-color: var(--bs-bg-medium);
+  border-left: 4px solid var(--bs-blue-base);
+  color: var(--bs-blue-base);
+  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-red-500);
+  color: var(--bs-red-500);
+}
+
+/* Hover or data-selected for 2-col/description variants */
+.bs-dropdown-options :where(li:not([data-variant~="2-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:not([data-variant~="2-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)) {
+  color: var(--bs-blue-base);
+}
+
+/* Hover or data-selected for negative + 2-col/description variants */
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-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"]:not([data-variant~="2-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)) {
+  color: var(--bs-red-500);
+}
+
+/* List option mouse click focus (do not show) */
+.bs-dropdown-options :where(li:focus:not(:focus-visible)){
+  outline: none;
+}
+
+/* data-variant="negative" list option mouse click focus (do not show) */
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+/* List option keyboard navigation focus */
+.bs-dropdown-options :where(li:focus-visible) {
+  --focus-border-color: var(--bs-blue-base);
+  border: 2px solid var(--focus-border-color);
+  outline: none;
+  padding-left: 0.625rem;
+}
+
+/* Navigation focus on a selected element should preserve 4px left border */
+.bs-dropdown-options :where(li[data-selected]:focus-visible) {
+  border-left: 4px solid var(--focus-border-color);
+  padding-left: 0.5rem;
+}
+
+/* data-variant="negative" list option keyboard navigation focus */
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
+  --focus-border-color: var(--bs-red-200);
+}

package/dist/components/dropdown.css

@@ -1,23 +1,20 @@
-/* Positioning the parent */
-.bs-dropdown {
+/* Parent */
+.bs-dropdown-parent {
   display: inline-block;
   position: relative;
 }
 
-/* Option list */
-.bs-dropdown :where(ul) {
-  background-color: var(--bs-white);
+/* Content */
+.bs-dropdown {
+  background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   bottom: auto;
   box-shadow: var(--bs-shadow-contentMedium);
   line-height: 1.5rem;
-  list-style: none;
   margin: 0;
   max-height: 0;
-  max-width: 16.875rem;
   opacity: 0;
   overflow-y: auto;
-  padding: 0;
   position: absolute;
   top: calc(100% + 0.5rem);
   transition-duration: 75ms;
@@ -26,164 +23,42 @@
   z-index: 999;
 }
 
-/* (not) data-variant="fit" */
-.bs-dropdown:not([data-variant="fit"]) :where(ul) {
-  width: 16.875rem;
-}
-
-/* data-shown */
-.bs-dropdown:where([data-shown]) :where(ul) {
-  max-height: 20rem;
-  opacity: 1;
-  padding-top: 0.75rem;
-}
-
-/* data-position="top" */
-.bs-dropdown:where([data-position="top"]) :where(ul) {
-  bottom: calc(100% + 0.5rem);
-  top: auto;
-}
-
-/* data-justify="center" */
-.bs-dropdown:where([data-justify="center"]) :where(ul) {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/* Option list item */
-.bs-dropdown :where(ul 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;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  row-gap: 0.125rem;
-}
-
-/* data-variant="search" (search input) */
-.bs-dropdown :where(ul li[data-variant~="search"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-}
-
-/* data-variant="break" (list item) */
-.bs-dropdown :where(ul li[data-variant~="break"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-  padding: 0;
-}
-
-/* data-variant="break" (actual line break) */
-.bs-dropdown :where(ul li[data-variant~="break"] hr) {
-  background: var(--bs-navy-200);
-}
-
-/* data-variant="2-col" */
-.bs-dropdown :where(ul li[data-variant~="2-col"]) {
-  grid-template-columns: min-content 1fr;
-}
-
-/* data-variant="description" */
-/* Description will be the 2nd child in a 1-column item */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  height: 1.125rem;
-  line-height: 1.125rem;
-}
-
-/* data-variant="2-col description" */
-/* Description will be the 3rd child in a 2-column item */
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  grid-column-start: 2;
-  height: 1.125rem;
-  line-height: 1.125rem;
-}
-
-/* List item hover or data-selected */
-.bs-dropdown :where(ul li:hover),
-.bs-dropdown :where(ul li[data-selected]) {
-  background-color: var(--bs-bg-subtle);
-  border-left: 4px solid var(--bs-blue-400);
-  color: var(--bs-blue-400);
-  outline: none;
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  width: 10rem;
 }
 
-/* data-variant="search" or data-variant="break" hover */
-.bs-dropdown :where(ul li[data-variant~="search"]:hover),
-.bs-dropdown :where(ul li[data-variant~="break"]:hover) {
-  background-color: transparent;
-  border-left: none;
-  color: var(--bs-ink-base);
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  width: 20rem;
 }
 
-/* data-variant="negative" hover, data-selected, and both */
-.bs-dropdown :where(ul li[data-variant~="negative"]:hover),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]),
-.bs-dropdown :where(ul 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-red-500);
-  color: var(--bs-red-500);
+.bs-dropdown:where([data-width="lg"]) {
+  width: 40rem;
 }
 
-/* data-variant="description" or data-variant="2-col description" hover or data-selected */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
-  color: var(--bs-blue-400);
+.bs-dropdown:where([data-width="content"]) {
+  width: auto;
 }
 
-/* data-variant="negative description" or data-variant="2-col negative description" hover or data-selected */
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
-  color: var(--bs-red-500);
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
+  width: 100%;
 }
 
-/* List option mouse click focus (do not show) */
-.bs-dropdown :where(ul li:focus:not(:focus-visible)){
-  outline: none;
-}
-
-/* data-variant="negative" list option mouse click focus (do not show) */
-li[data-variant~="negative"]:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* List option keyboard navigation focus */
-.bs-dropdown :where(ul li:focus-visible) {
-  --focus-border-color: var(--bs-blue-400);
-  border: 2px solid var(--focus-border-color);
-  outline: none;
-  padding-left: 0.625rem;
+/* data-shown */
+.bs-dropdown:where([data-shown]) {
+  max-height: 20rem;
+  opacity: 1;
 }
 
-/* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown :where(ul li[data-selected]:focus-visible) {
-  border-left: 4px solid var(--focus-border-color);
-  padding-left: 0.5rem;
+/* data-top */
+.bs-dropdown:where([data-top]) {
+  bottom: calc(100% + 0.5rem);
+  top: auto;
 }
 
-/* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
-  --focus-border-color: var(--bs-red-200);
+/* data-justify="center" */
+.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
+  left: 50%;
+  transform: translateX(-50%);
 }
-
-

package/dist/components/form-booleans.css

@@ -54,7 +54,7 @@
 :where(input[type='checkbox'], input[type='radio']):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+    0 0 0 4px var(--outline-color, var(--bs-blue-base));
     outline: 2px solid transparent;
 }
 
@@ -69,7 +69,7 @@
 /* Checkbox's checkmark  */
 input:where([type='checkbox'])::before {
   --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-400);
+  --check-fill-color: var(--bs-blue-base);
 
   content: '';
   border-radius: 0.125rem;
@@ -104,7 +104,7 @@ input:where([type='checkbox']):where(:indeterminate)::after {
 /* Radio's dot */
 input:where([type='radio'])::before {
   --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-400);
+  --radio-fill-color: var(--bs-blue-base);
 
   background-color: var(--radio-fill-color);
   border-radius: 50%;
@@ -159,24 +159,24 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 /* Disabled State */
 
 input:where([type='checkbox'], [type='radio']):disabled {
-  --box-shadow: var(--bs-gray-400);
+  --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
   cursor: default;
 }
 
 input:where([type='checkbox']):checked:disabled::before,
 input:where([type='checkbox']):indeterminate:disabled::before {
-  --check-fill-color: var(--bs-gray-400);
+  --check-fill-color: var(--bs-bg-disabled);
 }
 
 input:where([type='radio']):checked:disabled::before {
-  --radio-fill-color: var(--bs-gray-400);
+  --radio-fill-color: var(--bs-bg-disabled);
 }
 
 
 /* Error state */
 
 input:where([type='checkbox'], [type='radio'])[data-error] {
-  --box-shadow: var(--bs-red-500);
-  --outline-color: var(--bs-red-200);
+  --box-shadow: var(--bs-red-base);
+  --outline-color: var(--bs-red-base);
 }

package/dist/components/form-character-count.css

@@ -9,9 +9,9 @@
 :where([disabled], [data-disabled]) + .bs-character-count,
 :where([disabled], [data-disabled]) .bs-character-count,
 .bs-character-count:where([data-disabled]) {
-  color: var(--bs-gray-400);
+  color: var(--bs-ink-disabled);
 }
 
 .bs-character-count:where([data-error]) {
-  color: var(--bs-red-400);
+  color: var(--bs-ink-red);
 }

package/dist/components/form-elements.css

@@ -1,6 +1,6 @@
 /* Generally applicable (all input types) */
 :where([data-required]) {
-  color: var(--bs-red-500);
+  color: var(--bs-ink-red);
   font-weight: var(--bs-font-bold, 600);
 }
 
@@ -9,15 +9,15 @@
 }
 
 :where(.box) :is(input, textarea, select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-subtle);
+  --offset-color: var(--bs-bg-medium);
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert);
+  --offset-color: var(--bs-bg-invert-base);
 }
 
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]) {
-  --input-border: var(--bs-red-500);
+  --input-border: var(--bs-ink-red);
 }
 
 /* Fieldset */

package/dist/components/form-hints.css

@@ -1,6 +1,7 @@
 .bs-hint {
+  --hint-color: var(--bs-ink-light);
   min-width: 0;
-  color: var(--bs-ink-light);
+  color: var(--hint-color);
   font-size: var(--bs-text-xs);
   padding: 0;
   margin: 0;
@@ -9,5 +10,5 @@
 }
 
 .bs-hint:where([data-error]) {
-  color: var(--bs-red-400);
+  --hint-color: var(--bs-ink-red);
 }

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

@@ -127,7 +127,7 @@ and issues with box-sizing
 
 /* -------- Focus styles -------- */
 .bs-input-addon {
-  --focus-border: var(--bs-blue-400);
+  --focus-border: var(--bs-blue-base);
 }
 
 .bs-input-addon:where(:not([data-multifocus]):focus-within),

package/dist/components/form-labels.css

@@ -10,9 +10,9 @@
 }
 
 :where([data-required]) {
-  color: var(--bs-red-500);
+  color: var(--bs-ink-red);
 }
 
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
-  --label-color: var(--bs-ink-light);
+  --label-color: var(--bs-ink-disabled);
 }

package/dist/components/form-switches.css

@@ -45,7 +45,7 @@
 
 .bs-switch input:where(:checked) ~ span,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
-  --switch-background: var(--bs-blue-400);
+  --switch-background: var(--bs-blue-base);
 }
 
 /* Toggle "ball" */
@@ -111,21 +111,21 @@
 
 .bs-switch :where(input:focus-visible) + span {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+    0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
 :where(.box) .bs-switch :where(input:focus-visible) + span {
-  --offset-color: var(--bs-bg-subtle);
+  --offset-color: var(--bs-bg-medium);
 }
 :where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
-  --offset-color: var(--bs-bg-invert);
+  --offset-color: var(--bs-bg-invert-base);
 }
 
 /* Disabled state */
 
 .bs-switch:where([data-disabled]) {
-  --ball-background: var(--bs-gray-400);
-  --switch-background: var(--bs-gray-200);
+  --ball-background: var(--bs-ink-disabled);
+  --switch-background: var(--bs-bg-disabled);
 }
 
 .bs-switch input:where(:disabled) {

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

@@ -6,13 +6,15 @@
 
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea, select {
+  --input-bg: var(--bs-bg-base);
+  --input-border: var(--bs-violet-medium);
   appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-color: var(--input-border, var(--bs-violet-300));
+  background-color: var(--input-bg);
+  border-color: var(--input-border);
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
-  caret-color: var(--bs-blue-400);
+  caret-color: var(--bs-blue-base);
   color: var(--bs-ink-base);
   font-size: var(--bs-text-base);
   font-weight: 400;
@@ -35,26 +37,26 @@ textarea {
 }
 
 :is(input, textarea, select)::placeholder {
-  color: var(--bs-violet-200);
+  color: var(--bs-violet-lightest);
 }
 :is(input, textarea, select):where(:focus-visible)::placeholder {
   opacity: 0;
 }
 
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible) {
-  --input-border: var(--bs-blue-400);
+  --input-border: var(--bs-blue-base);
   outline-width: 0px;
 }
 
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
-  --input-border: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
-  color: var(--bs-gray-400);
+  --input-border: var(--bs-ink-disabled);
+  --input-bg: var(--bs-bg-disabled);
+  color: var(--bs-ink-disabled);
 }
 
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]) {
-  --input-border: var(--bs-red-500);
+  --input-border: var(--bs-ink-red);
 }
 
 /*
@@ -74,7 +76,7 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 
 :is(input, textarea, select):disabled::placeholder,
 :is(input, textarea, select)[disabled]::placeholder {
-  color: var(--bs-gray-400);
+  color: var(--bs-ink-disabled);
   opacity: 1;
 }
 

package/dist/components/loader.css

@@ -0,0 +1,85 @@
+.bs-loader {
+  --loader-dot-bg: var(--bs-blue-500); /* possibly add variants if requested */
+  --loader-dot-size: .75rem;
+  --loader-dot-top: 18px;
+  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
+  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
+  --loader-height: 3rem;
+  --loader-width: 4rem;
+  display: block;
+  height: var(--loader-height);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  position: relative;
+  width: var(--loader-width);
+}
+.bs-loader:where([data-size="sm"]) {
+  --loader-dot-size: .5rem;
+  --loader-dot-top: 0;
+  --loader-dot-translate: 1.125rem;
+  --loader-height: .5rem;
+  --loader-width: 3rem;
+}
+.bs-loader:where([data-size="lg"]) {
+  --loader-dot-size: 1rem;
+  --loader-dot-translate: 2.375rem;
+  --loader-height: 4rem;
+  --loader-width: 6rem;
+}
+
+/* ----- loader dots ----- */
+.bs-loader > :where(div) {
+  background-color: var(--loader-dot-bg);
+  border-radius: 50%;
+  height: var(--loader-dot-size);
+  position: absolute;
+  top: var(--loader-dot-top);
+  width: var(--loader-dot-size);
+}
+
+.bs-loader > :where(div) {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.bs-loader > :where(div:nth-child(1)) {
+  animation: loading-1 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(2)) {
+  animation: loading-2 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(3)) {
+  animation: loading-2 0.6s infinite;
+  left: 40%;
+}
+.bs-loader > :where(div:nth-child(4)) {
+  animation: loading-3 0.6s infinite;
+  left: 80%;
+}
+
+@keyframes loading-1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes loading-2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(var(--loader-dot-translate), 0);
+  }
+}
+
+@keyframes loading-3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}

package/dist/components/modal.css

@@ -0,0 +1,32 @@
+.bs-modal {
+  background-color: var(--bs-bg-base-elevated);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentHigh);
+  left: 1.5rem;
+  max-height: calc(100% - 3rem);
+  opacity: 0;
+  overflow: auto;
+  padding: 1.5rem;
+  position: fixed;
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition-duration: 75ms;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  z-index: 9999;
+}
+
+.bs-modal:where([data-shown]) {
+  opacity: 1;
+}
+
+@media (min-width: 752px) {
+  .bs-modal {
+    left: 50%;
+    margin: 0;
+    max-height: 40.625rem;
+    transform: translate(-50%, -50%);
+    width: 35rem;
+  }
+}