@wwtdev/bsds-css 2.1.2 → 2.1.4

package/dist/wwt-bsds.css

@@ -352,6 +352,9 @@ button {
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 
+  /* Special use cases */
+  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
+
   /* deprecate / phase out.. */
   --bs-bg-subtle: var(--bs-gray-100);
   --bs-bg-invert: var(--bs-navy-500);
@@ -1047,7 +1050,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: 600;
+  font-weight: var(--btn-weight, 600);
   height: var(--btn-height, 2.5rem);
   justify-content: center;
   line-height: 1.5;
@@ -1150,10 +1153,10 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   --btn-padding: 0;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-text-size: var(--bs-text-md);
+  --btn-weight: 400;
   background-color: transparent;
   color: var(--bs-blue-500);
   cursor: pointer;
-  font-weight: 400;
   line-height: 150%;
 }
 .bs-button:where([data-text]:not([data-text="false"])):hover {
@@ -1166,24 +1169,41 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
+}
+/* ------------ Button Sizes, Media-based Text Sizing -------------- */
+/* Std button: Mobile text size, WM text size */
+.bs-button {
+  --btn-text-size: 1rem;
+}
+@media (min-width: 752px) {
+  .bs-button {
+    --btn-text-size: 1.125rem;
+  }
 }
-/* ------------ Button Size -------------- */
 .bs-button:where([data-size^='sm']) {
   --btn-height: 1.75rem;
   --btn-padding: .25rem .75rem .375rem;
+  /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
 }
-.bs-button:where([data-size][data-text]:not([data-text="false"])) {
+/* Text buttons: For now, text size not dependent on media size */
+.bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
   --btn-padding: 0;
+  --btn-text-size: var(--bs-text-md);
 }
 .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-base);
 }
-/* Size XS only applies to text buttons */
+/* Size XS & XXS only applies to text buttons */
 .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-sm);
 }
+.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
+}
 /* ------------ Disabled Styling ------------ */
 :where(button:disabled),
 .bs-button:where(:disabled),
@@ -1240,12 +1260,11 @@ a.bs-circle-button {
   outline: none;
   text-decoration: none;
 }
-.bs-circle-button::before {
+.bs-circle-button :where(.bs-circle-button-icon)::before {
   border-color: var(--btn-border-color);
   border-radius: var(--btn-border-radius);
   border-style: solid;
   border-width: 0.125rem;
-  content: '';
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
@@ -1268,15 +1287,16 @@ a.bs-circle-button {
 .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
   --icon-size: var(--btn-icon-size);
 }
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+/* 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-border-radius: 0.5rem;
+  --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"])) {
@@ -1317,9 +1337,12 @@ a.bs-circle-button {
     inset 0 0 0 1px var(--btn-main),
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
-.bs-circle-button:focus-visible {
+.bs-circle-button:where(:focus-visible) {
   --btn-border-color: var(--btn-main);
 }
+.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
+  content: '';
+}
 /* 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);
@@ -1329,6 +1352,22 @@ a.bs-circle-button {
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
   background-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: var(--bs-text-sm);
+}
+.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .3125rem;
+  --btn-icon-size: .625rem;
+  --btn-text-size: var(--bs-text-base);
+}
+.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .25rem;
+  --btn-icon-size: .5rem;
+  --btn-text-size: var(--bs-text-sm);
+}
 /* Parent */
 .bs-dropdown-parent {
   display: inline-block;
@@ -1479,15 +1518,14 @@ a.bs-circle-button {
 }
 /* Option list */
 .bs-dropdown-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
+  margin-block: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
-  padding: 0;
-}
-.bs-dropdown-options :where(li:first-child) {
-  margin-top: 0.5rem;
+  padding-block: 0.5rem;
 }
 /* Option list item */
 .bs-dropdown-options :where(li) {
@@ -1502,11 +1540,8 @@ a.bs-circle-button {
        column-gap: 0.5rem;
   cursor: pointer;
   display: grid;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 1.25rem;
-  padding-right: 1.375rem;
-  padding-top: 0.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 1.25rem;
   row-gap: 0.125rem;
   word-break: break-word;
   word-wrap: break-word;
@@ -1516,14 +1551,14 @@ a.bs-circle-button {
   grid-template-columns: min-content 1fr;
 }
 /* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+.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);
   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)) {
+.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;
@@ -1531,7 +1566,7 @@ a.bs-circle-button {
   line-height: 1.125rem;
 }
 /* Hover or data-selected */
-.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
   border-left: 4px solid var(--bs-blue-base);
@@ -1548,17 +1583,17 @@ a.bs-circle-button {
   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)) {
+.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)) {
+.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) */
@@ -1585,11 +1620,35 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
   --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;
+}
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
+}
 @media (min-width: 752px)  {
   .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(li:focus-visible) {
+    padding-left: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+    padding-left: 0.5rem;
+  }
 }
 /*
 custom properties:
@@ -1684,20 +1743,22 @@ label:where(.bs-label) {
 .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);
 }
-:where([data-required]:not([data-required="false"])),
+/* Required asterisk */
+:where(label, legend) :where([data-required]:not([data-required="false"])),
 .bs-label :where([data-required="true"]) {
-  --label-color: var(--bs-ink-red);
+  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);
 }
 /* Generally applicable (all input types) */
@@ -1800,12 +1861,19 @@ textarea {
 :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) {
   --input-border: var(--bs-blue-base);
   outline-style: none;
   outline-width: 0px;
 }
+/* HOVER state */
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
+:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
+  --input-bg: var(--bs-bg-input-hover);
+}
+/* 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);
@@ -1831,15 +1899,13 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
   opacity: 1;
 }
 :is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select)[disabled]::-moz-placeholder {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 :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 {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 /* Select */
 select,
@@ -1878,6 +1944,9 @@ select,
   pointer-events: none;
   position: relative;
 }
+.bs-input-addon * {
+  background-color: transparent;
+}
 /**
 Implement an outer 'border' via pseudo-element instead of
 on main element to avoid content shifting, double-stroke effect,
@@ -1918,7 +1987,6 @@ and issues with box-sizing
   width: 100%;
 }
 .bs-input-addon > *:where(:not(.bs-input-addon)) {
-  background-color: var(--input-bg, var(--bs-bg-base));
   border-width: 0px;
   display: flex;
   height: 100%;
@@ -1951,7 +2019,7 @@ and issues with box-sizing
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 .bs-input-addon:where([data-variant="inner-bordered"]),
 .bs-input-addon:where([data-variant="inner-bordered"]) :where(.bs-input-addon) {
-  --input-addon-nested-border: var(--bs-violet-100);
+  --input-addon-nested-border: var(--bs-violet-lightest);
 }
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
 .bs-input-addon > :where(:not(:last-child, :focus-within))::after {
@@ -1979,6 +2047,10 @@ and issues with box-sizing
 .bs-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
   border-radius: 0px;
 }
+/* -------- Hover styles -------- */
+.bs-input-addon:hover {
+  --input-bg: var(--bs-bg-input-hover);
+}
 /* -------- Focus styles -------- */
 .bs-input-addon {
   --focus-border: var(--bs-blue-base);
@@ -2027,9 +2099,9 @@ and issues with box-sizing
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-gray-200);
-  --input-border: var(--bs-gray-400);
-  color: var(--bs-gray-400);
+  --input-bg: var(--bs-bg-disabled);
+  --input-border: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;
@@ -2093,6 +2165,10 @@ and issues with box-sizing
   --search-icon-size: 1rem;
   --search-icon-padding: 0;
 }
+/* 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) {
@@ -2353,12 +2429,12 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   transition: 250ms;
   width: var(--switch-width);
 }
-.bs-switch input:where(:checked) ~ span,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+.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 span::before {
+.bs-switch :where(span)::before {
   background-color: var(--ball-background);
   border-radius: 50%;
   box-sizing: border-box;
@@ -2372,28 +2448,22 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   width: var(--ball-diameter);
   z-index: 2;
 }
-.bs-switch input:where(:checked) ~ span::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span::before {
+.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 input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
+.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 span:where([data-inner-on-label][data-inner-off-label]) {
-  color: white;
-  --switch-width: 3.5rem;
-}
-.bs-switch:where([data-size="sm"]) span:where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-.bs-switch span::after {
+.bs-switch :where(span)::after {
   align-items: center;
   color: var(--ball-background);
+  content: var(--inner-label-text);
   display: flex;
   height: 100%;
-  justify-content: flex-start;
+  justify-content: var(--inner-label-position, flex-start);
   left: 0;
   line-height: var(--inner-text-line-height);
   padding: var(--inner-text-padding);
@@ -2402,30 +2472,39 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   top: 0;
   width: 100%;
 }
-.bs-switch input:where(:not(:checked)) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) span:where([data-inner-on-label][data-inner-off-label])::after  {
-  content: attr(data-inner-off-label);
-  justify-content: flex-end;
+.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 3.5rem;
 }
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::after {
-  content: attr(data-inner-on-label);
-  justify-content: flex-start;
+.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) + span {
+.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) + span {
+: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) + span {
+: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-base);
 }
 /* Disabled state */
-.bs-switch:where([data-disabled]:not([data-disabled="false"])) {
+.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);
 }
@@ -2466,7 +2545,16 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 .bs-modal:where([data-shown]:not([data-shown="false"])) {
   opacity: 1;
 }
-.bs-modal :where(.close-button-container) {
+.bs-modal :where(.modal-header) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+.bs-modal :where(.modal-title) {
+  flex-grow: 1;
+}
+.bs-modal :where(.only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 1.5rem;