@stackoverflow/stacks 1.3.0 → 1.3.1

package/dist/css/stacks.css

@@ -400,45 +400,86 @@ template {
   fill: currentColor;
 }
 .s-activity-indicator {
+  --_focus-ring: var(--focus-ring);
+  --_bg-color: var(--theme-secondary-400);
   display: inline-block;
   min-width: var(--su-static12);
   min-height: var(--su-static12);
   padding: var(--su2) var(--su4);
   line-height: 1.1;
-  background-color: var(--theme-secondary-400);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+  background-color: var(--_bg-color);
+  box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring);
   border-radius: 1000px;
   font-size: var(--fs-fine);
   font-weight: 600;
   color: hsl(0, 0%, 100%);
   text-transform: uppercase;
 }
-body.theme-highcontrast .s-activity-indicator {
-  color: var(--white);
+.s-activity-indicator.s-activity-indicator__success {
+  --_bg-color: var(--green-500);
+  --_focus-ring: var(--focus-ring-success);
 }
-.s-activity-indicator__success {
-  background-color: var(--green-500);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
+.s-activity-indicator.s-activity-indicator__warning {
+  --_bg-color: var(--yellow-600);
+  --_focus-ring: var(--focus-ring-warning);
 }
-.s-activity-indicator__warning {
-  background-color: var(--yellow-600);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+.s-activity-indicator.s-activity-indicator__danger {
+  --_bg-color: var(--red-500);
+  --_focus-ring: var(--focus-ring-error);
 }
-.s-activity-indicator__danger {
-  background-color: var(--red-500);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
+body.theme-highcontrast .s-activity-indicator {
+  color: var(--white);
 }
 .s-avatar {
+  --_size: var(--su-static16);
+  --_br: var(--br-sm);
+  --_fs-letter: calc(var(--su-static12) - var(--su-static1));
+  --_scale-badge: 1;
   display: inline-block;
   position: relative;
-  width: var(--su-static16);
-  height: var(--su-static16);
-  border-radius: var(--br-sm);
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: var(--_br);
   background-color: hsl(0, 0%, 100%);
   background-repeat: no-repeat;
   background-size: 100%;
   vertical-align: bottom;
 }
+.s-avatar.s-avatar__24 {
+  --_size: var(--su-static24);
+  --_fs-letter: var(--su-static16);
+  --_scale-badge: 1.1;
+}
+.s-avatar.s-avatar__32 {
+  --_size: var(--su-static32);
+  --_br: var(--br-md);
+  --_fs-letter: calc(var(--su-static24) - var(--su-static2));
+  --_scale-badge: 1.3;
+}
+.s-avatar.s-avatar__48 {
+  --_size: var(--su-static48);
+  --_br: var(--br-md);
+  --_fs-letter: calc(var(--su-static32) + var(--su-static2));
+  --_scale-badge: 1.6;
+}
+.s-avatar.s-avatar__64 {
+  --_size: var(--su-static64);
+  --_br: var(--br-lg);
+  --_fs-letter: calc(var(--su-static48) - var(--su-static4));
+  --_scale-badge: 2.4;
+}
+.s-avatar.s-avatar__96 {
+  --_size: var(--su-static96);
+  --_br: calc(var(--br-lg) + var(--br-sm));
+  --_fs-letter: calc(var(--su-static64) + var(--su-static2));
+  --_scale-badge: 3;
+}
+.s-avatar.s-avatar__128 {
+  --_size: var(--su-static128);
+  --_br: calc(var(--br-lg) + var(--br-sm));
+  --_fs-letter: calc(var(--su-static96) - var(--su-static8));
+  --_scale-badge: 3;
+}
 body.theme-highcontrast .s-avatar {
   background-color: var(--black);
   box-shadow: 0 0 0 1px var(--black);
@@ -450,7 +491,7 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
 .s-avatar .s-avatar--letter {
   display: block;
   color: hsl(0, 0%, 100%);
-  font-size: 11px;
+  font-size: var(--_fs-letter);
   font-weight: bold;
   line-height: 1.4;
   text-align: center;
@@ -464,113 +505,15 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   position: absolute;
   right: -4px;
   bottom: -4px;
+  -webkit-transform: scale(var(--_scale-badge));
+  transform: scale(var(--_scale-badge));
 }
 .s-avatar .s-avatar--image {
-  width: var(--su-static16);
-  height: var(--su-static16);
-  border-radius: var(--br-sm);
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: var(--_br);
   display: block;
 }
-.s-avatar.s-avatar__24 {
-  width: var(--su-static24);
-  height: var(--su-static24);
-}
-.s-avatar.s-avatar__24 .s-avatar--letter {
-  font-size: 16px;
-}
-.s-avatar.s-avatar__24 .s-avatar--badge {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.s-avatar.s-avatar__24 .s-avatar--image {
-  width: var(--su-static24);
-  height: var(--su-static24);
-}
-.s-avatar.s-avatar__32 {
-  width: var(--su-static32);
-  height: var(--su-static32);
-  border-radius: var(--br-md);
-}
-.s-avatar.s-avatar__32 .s-avatar--letter {
-  font-size: 22px;
-}
-.s-avatar.s-avatar__32 .s-avatar--badge {
-  -webkit-transform: scale(1.3);
-  transform: scale(1.3);
-}
-.s-avatar.s-avatar__32 .s-avatar--image {
-  width: var(--su-static32);
-  height: var(--su-static32);
-  border-radius: var(--br-md);
-}
-.s-avatar.s-avatar__48 {
-  width: var(--su-static48);
-  height: var(--su-static48);
-  border-radius: var(--br-md);
-}
-.s-avatar.s-avatar__48 .s-avatar--letter {
-  font-size: 34px;
-}
-.s-avatar.s-avatar__48 .s-avatar--badge {
-  -webkit-transform: scale(1.6);
-  transform: scale(1.6);
-}
-.s-avatar.s-avatar__48 .s-avatar--image {
-  width: var(--su-static48);
-  height: var(--su-static48);
-  border-radius: var(--br-md);
-}
-.s-avatar.s-avatar__64 {
-  width: var(--su-static64);
-  height: var(--su-static64);
-  border-radius: var(--br-lg);
-}
-.s-avatar.s-avatar__64 .s-avatar--letter {
-  font-size: 44px;
-}
-.s-avatar.s-avatar__64 .s-avatar--badge {
-  -webkit-transform: scale(2.4);
-  transform: scale(2.4);
-}
-.s-avatar.s-avatar__64 .s-avatar--image {
-  width: var(--su-static64);
-  height: var(--su-static64);
-  border-radius: var(--br-lg);
-}
-.s-avatar.s-avatar__96 {
-  width: var(--su-static96);
-  height: var(--su-static96);
-  border-radius: calc(var(--br-lg) + var(--br-sm));
-}
-.s-avatar.s-avatar__96 .s-avatar--letter {
-  font-size: 66px;
-}
-.s-avatar.s-avatar__96 .s-avatar--badge {
-  -webkit-transform: scale(3);
-  transform: scale(3);
-}
-.s-avatar.s-avatar__96 .s-avatar--image {
-  width: var(--su-static96);
-  height: var(--su-static96);
-  border-radius: calc(var(--br-lg) + var(--br-sm));
-}
-.s-avatar.s-avatar__128 {
-  width: var(--su-static128);
-  height: var(--su-static128);
-  border-radius: calc(var(--br-lg) + var(--br-lg));
-}
-.s-avatar.s-avatar__128 .s-avatar--letter {
-  font-size: 88px;
-}
-.s-avatar.s-avatar__128 .s-avatar--badge {
-  -webkit-transform: scale(3);
-  transform: scale(3);
-}
-.s-avatar.s-avatar__128 .s-avatar--image {
-  width: var(--su-static128);
-  height: var(--su-static128);
-  border-radius: calc(var(--br-lg) + var(--br-lg));
-}
 .s-badge,
 .s-topbar--notice {
   display: inline-flex;
@@ -800,7 +743,7 @@ body.theme-highcontrast .s-badge__danger.s-badge__filled {
   display: flex;
   flex-wrap: wrap;
   align-items: start;
-  color: var(--black-150);
+  color: var(--black-200);
   font-size: var(--fs-caption);
 }
 .s-breadcrumbs .s-breadcrumbs--item {
@@ -815,7 +758,7 @@ body.theme-highcontrast .s-badge__danger.s-badge__filled {
   margin-left: var(--su4);
 }
 body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
-  color: var(--black-350);
+  color: var(--fc-light);
 }
 @media (max-width: 640px) {
   .s-breadcrumbs .s-breadcrumbs--divider {
@@ -824,10 +767,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   }
 }
 .s-breadcrumbs .s-breadcrumbs--link {
-  color: var(--black-350);
+  color: var(--fc-light);
 }
 .s-breadcrumbs .s-breadcrumbs--link:hover {
-  color: var(--black-600);
+  color: var(--fc-medium);
 }
 .s-btn-group {
   display: flex;
@@ -1217,81 +1160,28 @@ fieldset[disabled] a,
 fieldset[disabled] .s-btn,
 fieldset[disabled] .s-link {
   box-shadow: none !important;
-  opacity: 0.5;
+  opacity: var(--_o-disabled-static);
   pointer-events: none;
 }
 fieldset[disabled] .s-checkbox,
 fieldset[disabled] .s-input-message,
-fieldset[disabled] .s-label,
 fieldset[disabled] .s-radio,
 fieldset[disabled] .s-toggle-switch,
 fieldset[disabled] .s-toggle-switch label {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--_o-disabled-static);
 }
 fieldset[disabled] .s-input,
 fieldset[disabled] .s-textarea,
 fieldset[disabled] .s-select > select {
   cursor: not-allowed;
-  opacity: 0.5;
-}
-.s-label {
-  padding: 0 var(--su2);
-  color: var(--fc-dark);
-  font-family: inherit;
-  font-size: var(--fs-body2);
-  font-weight: 600;
-}
-.s-label[for] {
-  cursor: pointer;
-}
-.s-label--status {
-  margin-left: var(--su4);
-  padding: var(--su2) var(--su8);
-  border-radius: 1000px;
-  background-color: var(--black-050);
-  color: var(--fc-medium);
-  font-size: var(--fs-caption);
-  font-weight: 400;
-  vertical-align: text-bottom;
-}
-body.theme-highcontrast .s-label--status {
-  border: 1px solid currentColor;
-}
-.s-label--status.s-label--status__required {
-  background-color: var(--red-100);
-  color: var(--red-600);
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .s-label--status.s-label--status__required {
-    color: var(--red-800);
-  }
-}
-body.theme-dark .s-label--status.s-label--status__required,
-.theme-dark__forced .s-label--status.s-label--status__required,
-body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
-  color: var(--red-800);
-}
-.s-label--status.s-label--status__new {
-  background-color: var(--green-100);
-  color: var(--green-700);
-}
-.s-label--status.s-label--status__beta {
-  background-color: var(--blue-100);
-  color: var(--blue-700);
+  opacity: var(--_o-disabled-static);
 }
 .s-description {
   padding: 0 var(--su2);
   color: var(--fc-medium);
   font-size: var(--fs-caption);
 }
-.s-label .s-description,
-.s-label .s-input-message {
-  padding: 0;
-  margin-top: 4px;
-  margin-bottom: 0;
-  font-weight: normal;
-}
 .s-input-fill {
   padding: 0.6em 0.7em;
   border: 1px solid var(--bc-darker);
@@ -1412,7 +1302,7 @@ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required
 }
 .s-checkbox[disabled],
 .s-radio[disabled] {
-  opacity: 0.5;
+  opacity: var(--_o-disabled-static);
   cursor: not-allowed;
 }
 @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
@@ -1503,52 +1393,59 @@ body.theme-highcontrast .s-input:focus-within {
 }
 .s-input[disabled],
 .s-textarea[disabled],
-.s-select > select[disabled],
-.s-input[read-only],
-.s-textarea[read-only],
-.s-select > select[read-only] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-body.theme-highcontrast .s-input[disabled],
-body.theme-highcontrast .s-textarea[disabled],
-body.theme-highcontrast .s-select > select[disabled],
-body.theme-highcontrast .s-input[read-only],
-body.theme-highcontrast .s-textarea[read-only],
-body.theme-highcontrast .s-select > select[read-only] {
-  opacity: 0.5;
-}
-.s-input[disabled],
-.s-textarea[disabled],
 .s-select > select[disabled] {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--_o-disabled-static);
+}
+.s-input[readonly],
+.s-textarea[readonly],
+.s-select > select[readonly],
+.is-readonly .s-input,
+.is-readonly .s-textarea,
+.is-readonly .s-select > select {
+  border-color: var(--bc-light);
+  background-color: var(--black-050);
+  color: var(--black-200);
+  cursor: not-allowed;
+}
+body.theme-highcontrast .s-input[readonly],
+body.theme-highcontrast .s-textarea[readonly],
+body.theme-highcontrast .s-select > select[readonly],
+body.theme-highcontrast .is-readonly .s-input,
+body.theme-highcontrast .is-readonly .s-textarea,
+body.theme-highcontrast .is-readonly .s-select > select {
+  color: var(--fc-light);
 }
 .is-disabled,
+.is-readonly,
 .has-success,
 .has-error,
 .has-warning {
   position: relative;
 }
 .is-disabled .s-input,
+.is-readonly .s-input,
 .has-success .s-input,
 .has-error .s-input,
 .has-warning .s-input {
   padding-right: var(--su32);
 }
 .is-disabled .s-select .s-input-icon,
+.is-readonly .s-select .s-input-icon,
 .has-success .s-select .s-input-icon,
 .has-error .s-select .s-input-icon,
 .has-warning .s-select .s-input-icon {
   right: var(--su32);
 }
 .is-disabled .s-textarea,
+.is-readonly .s-textarea,
 .has-success .s-textarea,
 .has-error .s-textarea,
 .has-warning .s-textarea {
   padding-right: var(--su48);
 }
 .is-disabled .s-textarea ~ .s-input-icon,
+.is-readonly .s-textarea ~ .s-input-icon,
 .has-success .s-textarea ~ .s-input-icon,
 .has-error .s-textarea ~ .s-input-icon,
 .has-warning .s-textarea ~ .s-input-icon {
@@ -1556,6 +1453,7 @@ body.theme-highcontrast .s-select > select[read-only] {
   right: 1.5em;
 }
 .is-disabled .s-input-message a,
+.is-readonly .s-input-message a,
 .has-success .s-input-message a,
 .has-error .s-input-message a,
 .has-warning .s-input-message a {
@@ -1640,19 +1538,17 @@ body.theme-highcontrast .s-select > select[read-only] {
 .is-disabled .s-select:after {
   border-color: var(--bc-darker) transparent;
 }
-.is-disabled .s-label,
 .is-disabled .s-description {
-  opacity: 0.5;
-}
-.is-disabled .s-label .s-description,
-.is-disabled .s-description .s-description {
-  opacity: unset;
+  opacity: var(--_o-disabled-static);
 }
 .is-disabled .s-input-icon {
   color: var(--black-400);
 }
-.is-disabled .s-label {
-  cursor: not-allowed;
+.is-readonly .s-input-icon {
+  color: var(--black-200);
+}
+body.theme-highcontrast .is-readonly .s-input-icon {
+  color: var(--fc-light);
 }
 .s-input-icon {
   position: absolute;
@@ -1673,25 +1569,21 @@ body.theme-highcontrast .s-select > select[read-only] {
 }
 .s-input__sm,
 .s-textarea__sm,
-.s-label__sm,
 .s-select__sm > select {
   font-size: var(--fs-caption);
 }
 .s-input__md,
 .s-textarea__md,
-.s-label__md,
 .s-select__md > select {
   font-size: var(--fs-body3);
 }
 .s-input__lg,
 .s-textarea__lg,
-.s-label__lg,
 .s-select__lg > select {
   font-size: var(--fs-title);
 }
 .s-input__xl,
 .s-textarea__xl,
-.s-label__xl,
 .s-select__xl > select {
   font-size: var(--fs-headline1);
 }
@@ -1726,6 +1618,101 @@ body.theme-highcontrast .s-select > select[read-only] {
     padding-bottom: 0.4em;
   }
 }
+.s-label {
+  --_fs: var(--fs-body2);
+  color: var(--fc-dark);
+  font-family: inherit;
+  font-size: var(--_fs);
+  font-weight: 600;
+  padding: 0 var(--su2);
+}
+.s-label[for] {
+  cursor: pointer;
+}
+fieldset[disabled] .s-label,
+.is-disabled .s-label {
+  cursor: not-allowed;
+  opacity: var(--_o-disabled-static);
+}
+fieldset[disabled] .s-label .s-description,
+.is-disabled .s-label .s-description {
+  opacity: unset;
+}
+.is-readonly .s-label {
+  cursor: not-allowed;
+}
+.s-label .s-description,
+.s-label .s-input-message {
+  font-weight: normal;
+  margin-bottom: 0;
+  margin-top: var(--su4);
+  padding: 0;
+}
+.s-label.s-label__sm {
+  --_fs: var(--fs-caption);
+}
+.s-label.s-label__md {
+  --_fs: var(--fs-body3);
+}
+.s-label.s-label__lg {
+  --_fs: var(--fs-title);
+}
+.s-label.s-label__xl {
+  --_fs: var(--fs-headline1);
+}
+.s-label--status {
+  --_b: none;
+  --_bg: var(--black-050);
+  --_fc: var(--fc-medium);
+  background-color: var(--_bg);
+  border: var(--_b);
+  border-radius: 1000px;
+  color: var(--_fc);
+  font-size: var(--fs-caption);
+  font-weight: 400;
+  margin-left: var(--su4);
+  padding: var(--su2) var(--su8);
+  vertical-align: text-bottom;
+}
+body.theme-highcontrast .s-label--status {
+  --_b: var(--su-static1) solid currentColor;
+}
+.s-label--status.s-label--status__required {
+  --_bg: var(--red-100);
+  --_fc: var(--red-700);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-label--status.s-label--status__required {
+    --_bg: var(--red-050);
+    --_fc: var(--red-800);
+  }
+}
+body.theme-dark .s-label--status.s-label--status__required,
+.theme-dark__forced .s-label--status.s-label--status__required,
+body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
+  --_bg: var(--red-050);
+  --_fc: var(--red-800);
+}
+.s-label--status.s-label--status__new {
+  --_bg: var(--green-100);
+  --_fc: var(--green-700);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-label--status.s-label--status__new {
+    --_bg: var(--green-050);
+    --_fc: var(--green-800);
+  }
+}
+body.theme-dark .s-label--status.s-label--status__new,
+.theme-dark__forced .s-label--status.s-label--status__new,
+body.theme-system .theme-dark__forced .s-label--status.s-label--status__new {
+  --_bg: var(--green-050);
+  --_fc: var(--green-800);
+}
+.s-label--status.s-label--status__beta {
+  --_bg: var(--blue-100);
+  --_fc: var(--blue-700);
+}
 .s-menu {
   list-style: none;
   margin: 0;
@@ -2384,7 +2371,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
   line-height: var(--lh-md);
   font-weight: normal;
   word-break: break-word !important;
-  word-wrap: break-word !important;
   overflow-wrap: break-word !important;
   -webkit-hyphens: auto !important;
   -moz-hyphens: auto !important;
@@ -2401,7 +2387,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
 }
 .s-post-summary--content .s-post-summary--content-title a {
   word-break: break-word !important;
-  word-wrap: break-word !important;
   overflow-wrap: break-word !important;
   -webkit-hyphens: auto !important;
   -moz-hyphens: auto !important;
@@ -2435,7 +2420,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word !important;
-  word-wrap: break-word !important;
   overflow-wrap: break-word !important;
   -webkit-hyphens: auto !important;
   -moz-hyphens: auto !important;
@@ -2526,11 +2510,11 @@ body.theme-highcontrast .s-post-summary--answer:before {
 }
 .s-post-summary__ignored .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta),
 .s-post-summary__deleted .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta) {
-  opacity: 0.6;
+  opacity: calc(var(--_o-disabled-static) * 1.2);
 }
 .s-post-summary__ignored .s-post-summary--stats-item:not(.s-badge):not(.is-deleted),
 .s-post-summary__deleted .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
-  opacity: 0.6;
+  opacity: calc(var(--_o-disabled-static) * 1.2);
   filter: grayscale(100%);
 }
 .s-post-summary__ignored .s-post-summary--content-title a,
@@ -2553,12 +2537,12 @@ body.theme-highcontrast .s-post-summary--answer:before {
 }
 .s-post-summary__ignored .s-post-summary--meta > *:not(.s-post-summary--meta-tags),
 .s-post-summary__deleted .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
-  opacity: 0.6;
+  opacity: calc(var(--_o-disabled-static) * 1.2);
   filter: grayscale(100%);
 }
 .s-post-summary__ignored .s-post-summary--meta-tags > a,
 .s-post-summary__deleted .s-post-summary--meta-tags > a {
-  opacity: 0.6;
+  opacity: calc(var(--_o-disabled-static) * 1.2);
   filter: grayscale(100%);
 }
 .s-progress,
@@ -2699,7 +2683,7 @@ body.theme-highcontrast .s-progress__privilege .s-progress--bar {
   border-radius: 0;
   padding: var(--su12) var(--su6) 0 var(--su6);
   text-align: center;
-  color: var(--black-300);
+  color: var(--black-500);
   z-index: var(--zi-base);
 }
 .s-progress.s-progress__stepped .s-progress--stop {
@@ -2791,13 +2775,13 @@ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
   --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2);
   font-size: 15px;
   line-height: var(--s-prose-line-height);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .s-prose p {
   margin-bottom: var(--s-prose-spacing);
 }
 .s-prose pre {
-  word-wrap: normal;
+  overflow-wrap: normal;
 }
 .s-prose code {
   font-size: var(--fs-body1);
@@ -2819,10 +2803,10 @@ body.theme-highcontrast .s-prose hr {
   background-color: var(--black-500);
 }
 .s-prose li {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .s-prose li pre {
-  word-wrap: normal;
+  overflow-wrap: normal;
 }
 .s-prose p:last-child,
 .s-prose dl:last-child,
@@ -3347,6 +3331,39 @@ body.theme-system .theme-dark__forced .s-prose kbd {
     }
   }
 }
+.is-loading {
+  position: relative;
+  padding-left: 2.2em;
+}
+.is-loading:before {
+  content: "";
+  position: absolute;
+  opacity: 0.3;
+  left: 0.6em;
+  top: calc(50% - 0.6em);
+  width: 1.23076923em;
+  height: 1.23076923em;
+  border-width: 2px;
+  border-style: solid;
+  border-color: currentColor;
+  border-radius: var(--br-circle);
+}
+.is-loading:after {
+  content: "";
+  position: absolute;
+  left: 0.6em;
+  top: calc(50% - 0.6em);
+  width: 1.23076923em;
+  height: 1.23076923em;
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
+  border-left-color: currentColor;
+  border-radius: var(--br-circle);
+  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+  filter: invert(0);
+  transform-origin: 50% 50% 1px;
+}
 @keyframes s-spinner-rotate {
   from {
     transform: rotate(0deg);
@@ -3541,11 +3558,7 @@ body.theme-system .theme-dark__forced .s-prose kbd {
 }
 .s-table tr.is-disabled th:not(.is-enabled),
 .s-table tr.is-disabled td:not(.is-enabled) {
-  opacity: 0.3;
-}
-body.theme-highcontrast .s-table tr.is-disabled th:not(.is-enabled),
-body.theme-highcontrast .s-table tr.is-disabled td:not(.is-enabled) {
-  opacity: 0.8;
+  opacity: calc(var(--_o-disabled) * 0.6);
 }
 .s-table--cell1 {
   width: 8.33333333%;
@@ -4021,84 +4034,77 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   }
 }
 .s-uploader {
-  align-items: center;
-  background-color: var(--black-025);
-  border-radius: var(--br-lg);
-  display: flex;
-  min-height: var(--su-static128);
-  justify-content: center;
-  padding: var(--su8) var(--su16);
+  --_bg: var(--black-025);
+  --_bg-focus: var(--black-050);
+  --_bg-bc: var(--black-150);
+  --_focus-ring-color: var(--focus-ring);
+  --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   position: relative;
-  text-align: center;
-}
-.s-uploader:before {
-  --s-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--black-150);
-  -webkit-mask-image: var(--s-uploader-background-image);
-  mask-image: var(--s-uploader-background-image);
-  border-radius: var(--br-lg);
-}
-body.theme-highcontrast .s-uploader:before {
-  background-color: var(--black-400);
 }
-.s-uploader.has-error {
-  background-color: var(--red-050);
+body.theme-highcontrast .s-uploader {
+  --_bg-bc-hc: var(--black-400);
 }
-.s-uploader.has-error:before {
-  background-color: var(--red-400);
+.s-uploader.is-active {
+  --_bg: var(--black-050);
+  --_bg-bc: var(--black-200);
 }
-body.theme-highcontrast .s-uploader.has-error:before {
-  background-color: var(--red-400);
+.s-uploader.is-disabled {
+  opacity: var(--_o-disabled-static);
 }
-.s-uploader.has-error .s-link {
-  color: var(--red-900);
+.s-uploader.has-error {
+  --_bg: var(--red-050);
+  --_bg-focus: var(--red-100);
+  --_bg-bc: var(--red-400);
+  --_bg-bc-hc-state: var(--red-400);
+  --_focus-ring-color: var(--focus-ring-error);
+  --_link-fc: var(--red-900);
 }
 .s-uploader.has-success {
-  background-color: var(--green-025);
-}
-.s-uploader.has-success:before {
-  background-color: var(--green-400);
-}
-body.theme-highcontrast .s-uploader.has-success:before {
-  background-color: var(--green-400);
-}
-.s-uploader.has-success .s-link {
-  color: var(--green-900);
-}
-.s-uploader.has-warning {
-  background-color: var(--yellow-050);
-}
-.s-uploader.has-warning:before {
-  background-color: var(--yellow-400);
-}
-body.theme-highcontrast .s-uploader.has-warning:before {
-  background-color: var(--yellow-400);
-}
-.s-uploader.has-warning .s-link {
-  color: var(--yellow-900);
-}
-.s-uploader.is-active {
-  background-color: var(--black-050);
-}
-.s-uploader.is-active:before {
-  background-color: var(--black-200);
-}
-body.theme-highcontrast .s-uploader.is-active:before {
-  background-color: var(--black);
+  --_bg: var(--green-025);
+  --_bg-focus: var(--green-050);
+  --_bg-bc: var(--green-400);
+  --_bg-bc-hc-state: var(--green-400);
+  --_focus-ring-color: var(--focus-ring-success);
+  --_link-fc: var(--green-900);
 }
-.s-uploader.is-disabled {
-  opacity: 0.5;
+.s-uploader.has-warning {
+  --_bg: var(--yellow-050);
+  --_bg-focus: var(--yellow-100);
+  --_bg-bc: var(--yellow-400);
+  --_bg-bc-hc-state: var(--yellow-400);
+  --_focus-ring-color: var(--focus-ring-warning);
+  --_link-fc: var(--yellow-900);
+}
+.s-uploader.has-error .s-link,
+.s-uploader.has-success .s-link,
+.s-uploader.has-warning .s-link {
+  color: var(--_link-fc);
 }
 .s-uploader input[type="file"]::file-selector-button {
   cursor: pointer;
 }
+.s-uploader .s-uploader--container {
+  align-items: center;
+  background-color: var(--_bg);
+  border-radius: var(--br-lg);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: var(--su-static128);
+  padding: var(--su8) var(--su16);
+  position: relative;
+  text-align: center;
+}
+.s-uploader .s-uploader--container:before {
+  -webkit-mask-image: var(--_bg-b-image);
+  mask-image: var(--_bg-b-image);
+  background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
+  content: '';
+  border-radius: var(--br-lg);
+  display: block;
+  position: absolute;
+  inset: 0;
+}
 .s-uploader .s-uploader--input {
   cursor: pointer;
   height: 100%;
@@ -4106,10 +4112,11 @@ body.theme-highcontrast .s-uploader.is-active:before {
   opacity: 0;
   position: absolute;
   width: 100%;
+  z-index: var(--zi-selected);
 }
 .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
-  background-color: var(--black-050);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+  background-color: var(--_bg-focus);
+  box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
 }
 .s-uploader .s-uploader--preview {
   max-width: 100%;
@@ -4170,8 +4177,7 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
   object-fit: cover;
 }
 .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail:not(img) {
-  --s-uploader--preview-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
-  background-image: var(--s-uploader--preview-document-icon);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
   background-position: center;
   background-repeat: no-repeat;
 }
@@ -4897,6 +4903,8 @@ body.theme-system .theme-light__forced {
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
   --focus-ring-error: hsla(358, 62%, 47%, 0.15);
   --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
+  --_o-disabled: 0.5;
+  --_o-disabled-static: 0.5;
   --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
   --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
   --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
@@ -5068,6 +5076,8 @@ body:not(.theme-dark) .theme-dark__forced {
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
   --focus-ring-error: hsla(358, 62%, 52%, 0.3);
   --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
+  --_o-disabled: 0.5;
+  --_o-disabled-static: 0.5;
   --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
   --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
   --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5237,6 +5247,8 @@ body:not(.theme-dark) .theme-dark__forced .themed {
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
     --focus-ring-error: hsla(358, 62%, 52%, 0.3);
     --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
     --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5407,6 +5419,7 @@ body.theme-system.theme-highcontrast .theme-light__forced {
   --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
   --focus-ring-error: hsla(358, 62%, 47%, 0.9);
   --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
+  --_o-disabled: 0.8;
   --bs-sm: none;
   --bs-md: none;
   --bs-lg: none;
@@ -5528,6 +5541,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --fc-dark: var(--black-900);
   --fc-medium: var(--black-700);
   --fc-light: var(--black-500);
+  --_o-disabled: 0.8;
   --bs-sm: none;
   --bs-md: none;
   --bs-lg: none;
@@ -5649,6 +5663,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --fc-dark: var(--black-900);
     --fc-medium: var(--black-700);
     --fc-light: var(--black-500);
+    --_o-disabled: 0.8;
     --bs-sm: none;
     --bs-md: none;
     --bs-lg: none;
@@ -13214,23 +13229,18 @@ p {
 }
 .ow-normal {
   overflow-wrap: normal !important;
-  word-wrap: normal !important;
 }
 .ow-break-word {
   overflow-wrap: break-word !important;
-  word-wrap: break-word !important;
 }
 .ow-inherit {
   overflow-wrap: inherit !important;
-  word-wrap: inherit !important;
 }
 .ow-initial {
   overflow-wrap: initial !important;
-  word-wrap: initial !important;
 }
 .ow-unset {
   overflow-wrap: unset !important;
-  word-wrap: unset !important;
 }
 .hyphens-none {
   hyphens: none !important;
@@ -13245,7 +13255,6 @@ p {
 }
 .break-word {
   word-break: break-word !important;
-  word-wrap: break-word !important;
   overflow-wrap: break-word !important;
   -webkit-hyphens: auto !important;
   -moz-hyphens: auto !important;
@@ -13486,7 +13495,7 @@ ol {
   padding: 0;
   position: absolute;
   width: 1px;
-  word-wrap: normal;
+  overflow-wrap: normal;
 }
 .float-left {
   float: left !important;
@@ -19126,51 +19135,6 @@ body *:before,
 body *:after {
   box-sizing: inherit;
 }
-.s-banner__body-pt {
-  padding-top: 93px;
-}
-.s-banner {
-  position: fixed;
-  z-index: calc(var(--zi-navigation-fixed) - 1);
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-  padding: var(--su12);
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: none;
-  color: var(--fc-medium);
-  font-size: var(--fs-body1);
-}
-.s-banner[aria-hidden="true"] {
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transform: translate3d(0, -50px, 0);
-  transform: translate3d(0, -50px, 0);
-}
-.s-banner[aria-hidden="false"] {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transform: translate3d(0, 49px, 0);
-  transform: translate3d(0, 49px, 0);
-}
-.s-banner.is-pinned {
-  z-index: calc(var(--zi-navigation-fixed) + 1);
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-.s-banner.s-banner__important {
-  border-color: transparent;
-  color: var(--white);
-}
-.s-banner--container {
-  position: relative;
-  width: 100%;
-  max-width: calc(var(--s-step) * 10);
-  margin: 0 auto;
-}
 .s-btn {
   position: relative;
   display: inline-block;
@@ -19218,7 +19182,7 @@ button[type="reset"] .s-btn {
   box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
 }
 .s-btn[disabled] {
-  opacity: 0.5;
+  opacity: var(--_o-disabled-static);
   pointer-events: none;
   box-shadow: none !important;
 }
@@ -19282,7 +19246,7 @@ button[type="reset"] .s-btn {
   border-bottom-width: 0;
 }
 .s-btn .s-btn--badge {
-  opacity: 0.5;
+  opacity: var(--_o-disabled);
   display: inline-block;
   border-radius: var(--br-sm);
   padding: var(--su2) calc(var(--su4) - var(--su1));
@@ -19290,9 +19254,6 @@ button[type="reset"] .s-btn {
   line-height: var(--lh-xs);
   background-color: currentColor;
 }
-body.theme-highcontrast .s-btn .s-btn--badge {
-  opacity: 0.8;
-}
 .s-btn .s-btn--number {
   color: var(--white);
 }
@@ -19772,38 +19733,6 @@ body.theme-highcontrast .s-btn__link {
   margin-bottom: -0.3em;
   transition: opacity 200ms var(--te-smooth);
 }
-.s-btn.is-loading {
-  padding-left: 2.2em;
-}
-.s-btn.is-loading:before {
-  content: "";
-  position: absolute;
-  opacity: 0.3;
-  left: 0.6em;
-  top: calc(50% - 0.6em);
-  width: 1.23076923em;
-  height: 1.23076923em;
-  border-width: 2px;
-  border-style: solid;
-  border-color: currentColor;
-  border-radius: var(--br-circle);
-}
-.s-btn.is-loading:after {
-  content: "";
-  position: absolute;
-  left: 0.6em;
-  top: calc(50% - 0.6em);
-  width: 1.23076923em;
-  height: 1.23076923em;
-  border-width: 2px;
-  border-style: solid;
-  border-color: transparent;
-  border-left-color: currentColor;
-  border-radius: var(--br-circle);
-  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-  filter: invert(0);
-  transform-origin: 50% 50% 1px;
-}
 .s-btn.is-loading .svg-icon:first-child {
   margin-left: -23px;
   opacity: 0;
@@ -20271,188 +20200,439 @@ body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
 .s-link-preview--footer a:focus {
   color: var(--black-600);
 }
-.s-notice {
-  padding: var(--su16);
-  border: 1px solid transparent;
-  border-radius: var(--br-sm);
-  color: var(--fc-medium);
+.s-banner {
+  background: var(--_bg, var(--black-050));
+  border-color: var(--_bc, var(--bc-medium));
+  border-style: solid;
+  color: var(--_fc, var(--fc-medium));
   font-size: var(--fs-body1);
-}
-.s-toast .s-notice {
-  max-width: 44rem;
+  --_x-offset: 0;
+  border-width: var(--su-static1) 0;
+  inset: 0 0 auto 0;
+  padding: var(--su12);
+  position: fixed;
   width: 100%;
-  padding-top: var(--su8);
-  padding-bottom: var(--su8);
-  box-shadow: var(--bs-sm);
-  pointer-events: all;
+  z-index: calc(var(--zi-navigation-fixed) - 1);
+  -webkit-transform: translate3d(0, var(--_x-offset), 0);
+  transform: translate3d(0, var(--_x-offset), 0);
 }
-.s-notice .s-notice--btn {
-  color: var(--fc-dark);
+.s-banner code {
+  background: var(--_code-bg, transparent);
+}
+.s-banner .s-banner--btn {
+  color: inherit;
   padding: var(--su8);
 }
-.s-notice__info,
+.s-banner .s-banner--btn:focus,
+.s-banner .s-banner--btn:hover {
+  background: var(--_btn-focus-bg, var(--black-100));
+}
+.s-banner .s-banner--btn:active {
+  background: var(--_btn-active-bg, var(--black-150));
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-banner:not(.s-banner__important) {
+    --_bc: var(--_bg);
+  }
+}
+body.theme-dark .s-banner:not(.s-banner__important),
+.theme-dark__forced .s-banner:not(.s-banner__important),
+body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
+  --_bc: var(--_bg);
+}
+body.theme-highcontrast .s-banner:not(.s-banner__important) {
+  --_bc: currentColor;
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
+    --_bc: currentColor;
+  }
+}
+body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
+  --_bc: currentColor;
+}
+.s-banner__important {
+  --_bc: var(--_bg);
+  --_bg: var(--black-700);
+  --_fc: var(--white);
+  --_btn-focus-bg: var(--black-800);
+  --_btn-active-bg: var(--black-900);
+}
+body.theme-highcontrast .s-banner__important {
+  --_bc: var(--_bg);
+}
+.s-banner__danger {
+  --_bc: var(--red-200);
+  --_bg: var(--red-050);
+  --_btn-focus-bg: var(--red-100);
+  --_btn-active-bg: var(--red-200);
+}
+body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
+  --_bg: var(--red-200);
+}
+.s-banner__danger.s-banner__important {
+  --_bc: var(--_bg);
+  --_bg: var(--red-500);
+  --_btn-focus-bg: var(--red-600);
+  --_btn-active-bg: var(--red-700);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-banner__danger.s-banner__important {
+    --_bg: var(--red-400);
+    --_fc: var(--black-900);
+  }
+}
+body.theme-dark .s-banner__danger.s-banner__important,
+.theme-dark__forced .s-banner__danger.s-banner__important,
+body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
+  --_bg: var(--red-400);
+  --_fc: var(--black-900);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
+    --_bg: var(--red-500);
+    --_fc: var(--white);
+  }
+}
+body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
+  --_bg: var(--red-500);
+  --_fc: var(--white);
+}
 .s-banner__info {
-  border-color: var(--theme-secondary-150);
-  background-color: var(--theme-secondary-050);
+  --_bc: var(--theme-secondary-150);
+  --_bg: var(--theme-secondary-050);
+  --_btn-focus-bg: var(--theme-secondary-100);
+  --_btn-active-bg: var(--theme-secondary-150);
+  --_code-bg: var(--theme-secondary-150);
+}
+body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
+  --_bg: var(--theme-secondary-100);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
+    --_bg: var(--theme-secondary-100);
+  }
+}
+body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
+  --_bg: var(--theme-secondary-100);
 }
-.s-notice__info.s-notice__important,
-.s-banner__info.s-notice__important,
-.s-notice__info.s-banner__important,
 .s-banner__info.s-banner__important {
-  background-color: var(--theme-secondary-400);
+  --_bc: var(--_bg);
+  --_bg: var(--theme-secondary-400);
+  --_btn-focus-bg: var(--theme-secondary-500);
+  --_btn-active-bg: var(--theme-secondary-600);
 }
-.s-notice__info .s-notice--btn:focus,
-.s-banner__info .s-notice--btn:focus,
-.s-notice__info .s-notice--btn:hover,
-.s-banner__info .s-notice--btn:hover {
-  background-color: var(--theme-secondary-300);
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-banner__info.s-banner__important {
+    --_bg: var(--theme-secondary-300);
+    --_fc: var(--black-900);
+  }
 }
-.s-notice__info .s-notice--btn:active,
-.s-banner__info .s-notice--btn:active {
-  background-color: var(--theme-secondary-400);
+body.theme-dark .s-banner__info.s-banner__important,
+.theme-dark__forced .s-banner__info.s-banner__important,
+body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
+  --_bg: var(--theme-secondary-300);
+  --_fc: var(--black-900);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
+    --_bg: var(--theme-secondary-400);
+    --_fc: var(--white);
+  }
 }
-.s-notice__info code,
-.s-banner__info code {
-  background-color: var(--theme-secondary-150);
+body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
+  --_bg: var(--theme-secondary-400);
+  --_fc: var(--white);
 }
-.s-notice__success,
 .s-banner__success {
-  border-color: var(--green-200);
-  background-color: var(--green-050);
+  --_bc: var(--green-200);
+  --_bg: var(--green-050);
+  --_btn-focus-bg: var(--green-100);
+  --_btn-active-bg: var(--green-200);
 }
-body.theme-highcontrast .s-notice__success,
-body.theme-highcontrast .s-banner__success {
-  background-color: var(--green-200);
-  border-color: var(--green-400);
+body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
+  --_bg: var(--green-200);
 }
-.s-notice__success.s-notice__important,
-.s-banner__success.s-notice__important,
-.s-notice__success.s-banner__important,
 .s-banner__success.s-banner__important {
-  background-color: var(--green-400);
-  color: var(--black-900);
+  --_bc: var(--_bg);
+  --_bg: var(--green-400);
+  --_fc: var(--black-900);
+  --_btn-focus-bg: var(--green-500);
+  --_btn-active-bg: var(--green-600);
 }
-body.theme-highcontrast .s-notice__success.s-notice__important,
-body.theme-highcontrast .s-banner__success.s-notice__important,
-body.theme-highcontrast .s-notice__success.s-banner__important,
-body.theme-highcontrast .s-banner__success.s-banner__important {
-  background-color: var(--green-500);
-  color: var(--white);
-  border-color: transparent;
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-banner__success.s-banner__important {
+    --_bg: var(--green-500);
+    --_fc: var(--white);
+  }
 }
-.s-notice__success .s-notice--btn:focus,
-.s-banner__success .s-notice--btn:focus,
-.s-notice__success .s-notice--btn:hover,
-.s-banner__success .s-notice--btn:hover {
-  background-color: var(--green-100);
+body.theme-dark .s-banner__success.s-banner__important,
+.theme-dark__forced .s-banner__success.s-banner__important,
+body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
+  --_bg: var(--green-500);
+  --_fc: var(--white);
 }
-.s-notice__success .s-notice--btn:active,
-.s-banner__success .s-notice--btn:active {
-  background-color: var(--green-200);
+body.theme-highcontrast .s-banner__success.s-banner__important {
+  --_bg: var(--green-500);
+  --_fc: var(--white);
 }
-.s-notice__warning,
 .s-banner__warning {
-  border-color: var(--yellow-300);
-  background-color: var(--yellow-050);
+  --_bc: var(--yellow-300);
+  --_bg: var(--yellow-050);
+  --_btn-focus-bg: var(--yellow-200);
+  --_btn-active-bg: var(--yellow-300);
+  --_code-bg: var(--yellow-200);
 }
-body.theme-highcontrast .s-notice__warning,
-body.theme-highcontrast .s-banner__warning {
-  background-color: var(--yellow-200);
-  border-color: var(--yellow-700);
+body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
+  --_bg: var(--yellow-200);
 }
-.s-notice__warning.s-notice__important,
-.s-banner__warning.s-notice__important,
-.s-notice__warning.s-banner__important,
 .s-banner__warning.s-banner__important {
-  background-color: var(--yellow-400);
-  color: var(--black-900);
+  --_bc: var(--_bg);
+  --_bg: var(--yellow-400);
+  --_btn-focus-bg: var(--yellow-500);
+  --_btn-active-bg: var(--yellow-600);
+  --_fc: var(--black-900);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-banner__warning.s-banner__important {
+    --_bg: var(--yellow-600);
+    --_fc: var(--white);
+  }
+}
+body.theme-dark .s-banner__warning.s-banner__important,
+.theme-dark__forced .s-banner__warning.s-banner__important,
+body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
+  --_bg: var(--yellow-600);
+  --_fc: var(--white);
 }
-body.theme-highcontrast .s-notice__warning.s-notice__important,
-body.theme-highcontrast .s-banner__warning.s-notice__important,
-body.theme-highcontrast .s-notice__warning.s-banner__important,
 body.theme-highcontrast .s-banner__warning.s-banner__important {
-  background-color: var(--yellow-500);
-  color: var(--white);
-  border-color: transparent;
+  --_bg: var(--yellow-700);
+  --_fc: var(--white);
 }
-.s-notice__warning .s-notice--btn:focus,
-.s-banner__warning .s-notice--btn:focus,
-.s-notice__warning .s-notice--btn:hover,
-.s-banner__warning .s-notice--btn:hover {
-  background-color: var(--yellow-200);
+.s-banner__body-pt {
+  padding-top: 93px;
 }
-.s-notice__warning .s-notice--btn:active,
-.s-banner__warning .s-notice--btn:active {
-  background-color: var(--yellow-300);
+.s-banner.is-pinned {
+  z-index: calc(var(--zi-navigation-fixed) + 1);
 }
-.s-notice__warning code,
-.s-banner__warning code {
-  background-color: var(--yellow-200);
+.s-banner[aria-hidden="true"] {
+  --_x-offset: -50px;
+  visibility: hidden;
+  opacity: 0;
 }
-.s-notice__danger,
-.s-banner__danger {
-  border-color: var(--red-200);
-  background-color: var(--red-050);
+.s-banner[aria-hidden="false"] {
+  --_x-offset: 49px;
+  visibility: visible;
+  opacity: 1;
 }
-body.theme-highcontrast .s-notice__danger,
-body.theme-highcontrast .s-banner__danger {
-  background-color: var(--red-200);
-  border-color: var(--red-500);
+.s-banner .s-banner--container {
+  position: relative;
+  width: 100%;
+  max-width: calc(var(--s-step) * 10);
+  margin: 0 auto;
 }
-body.theme-highcontrast .s-notice__danger.s-notice__important,
-body.theme-highcontrast .s-banner__danger.s-notice__important,
-body.theme-highcontrast .s-notice__danger.s-banner__important,
-body.theme-highcontrast .s-banner__danger.s-banner__important {
-  background-color: var(--red-500);
+.s-notice {
+  background: var(--_bg, var(--black-050));
+  border-color: var(--_bc, var(--bc-medium));
+  border-style: solid;
+  color: var(--_fc, var(--fc-medium));
+  font-size: var(--fs-body1);
+  border-radius: var(--br-sm);
+  border-width: var(--su-static1);
+  padding: var(--su16);
 }
-.s-notice__danger.s-notice__important,
-.s-banner__danger.s-notice__important,
-.s-notice__danger.s-banner__important,
-.s-banner__danger.s-banner__important {
-  background-color: var(--red-400);
+.s-notice code {
+  background: var(--_code-bg, transparent);
 }
-.s-notice__danger .s-notice--btn:focus,
-.s-banner__danger .s-notice--btn:focus,
-.s-notice__danger .s-notice--btn:hover,
-.s-banner__danger .s-notice--btn:hover {
-  background-color: var(--red-100);
+.s-notice .s-notice--btn {
+  color: inherit;
+  padding: var(--su8);
 }
-.s-notice__danger .s-notice--btn:active,
-.s-banner__danger .s-notice--btn:active {
-  background-color: var(--red-200);
+.s-notice .s-notice--btn:focus,
+.s-notice .s-notice--btn:hover {
+  background: var(--_btn-focus-bg, var(--black-100));
+}
+.s-notice .s-notice--btn:active {
+  background: var(--_btn-active-bg, var(--black-150));
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-notice:not(.s-notice__important) {
+    --_bc: var(--_bg);
+  }
+}
+body.theme-dark .s-notice:not(.s-notice__important),
+.theme-dark__forced .s-notice:not(.s-notice__important),
+body.theme-system .theme-dark__forced .s-notice:not(.s-notice__important) {
+  --_bc: var(--_bg);
+}
+body.theme-highcontrast .s-notice:not(.s-notice__important) {
+  --_bc: currentColor;
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-notice:not(.s-notice__important) {
+    --_bc: currentColor;
+  }
+}
+body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
+  --_bc: currentColor;
 }
 .s-notice__important {
-  border-color: transparent;
-  background-color: var(--black-700);
-  color: var(--white);
+  --_bc: var(--_bg);
+  --_bg: var(--black-700);
+  --_fc: var(--white);
+  --_btn-focus-bg: var(--black-800);
+  --_btn-active-bg: var(--black-900);
+}
+body.theme-highcontrast .s-notice__important {
+  --_bc: var(--_bg);
+}
+.s-notice__danger {
+  --_bc: var(--red-200);
+  --_bg: var(--red-050);
+  --_btn-focus-bg: var(--red-100);
+  --_btn-active-bg: var(--red-200);
+}
+body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
+  --_bg: var(--red-200);
+}
+.s-notice__danger.s-notice__important {
+  --_bc: var(--_bg);
+  --_bg: var(--red-500);
+  --_btn-focus-bg: var(--red-600);
+  --_btn-active-bg: var(--red-700);
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .s-notice__info,
-  body.theme-system .s-notice__success,
-  body.theme-system .s-notice__warning,
-  body.theme-system .s-notice__danger {
-    border-color: transparent;
+  body.theme-system .s-notice__danger.s-notice__important {
+    --_bg: var(--red-400);
+    --_fc: var(--black-900);
   }
 }
-body.theme-dark .s-notice__info,
-body.theme-dark .s-notice__success,
-body.theme-dark .s-notice__warning,
-body.theme-dark .s-notice__danger,
-.theme-dark__forced .s-notice__info,
-.theme-dark__forced .s-notice__success,
-.theme-dark__forced .s-notice__warning,
-.theme-dark__forced .s-notice__danger,
-body.theme-system .theme-dark__forced .s-notice__info,
-body.theme-system .theme-dark__forced .s-notice__success,
-body.theme-system .theme-dark__forced .s-notice__warning,
-body.theme-system .theme-dark__forced .s-notice__danger {
-  border-color: transparent;
+body.theme-dark .s-notice__danger.s-notice__important,
+.theme-dark__forced .s-notice__danger.s-notice__important,
+body.theme-system .theme-dark__forced .s-notice__danger.s-notice__important {
+  --_bg: var(--red-400);
+  --_fc: var(--black-900);
 }
-body.theme-highcontrast .s-notice__info,
-body.theme-highcontrast .s-notice__success,
-body.theme-highcontrast .s-notice__warning,
-body.theme-highcontrast .s-notice__danger {
-  border-color: currentColor;
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-notice__danger.s-notice__important {
+    --_bg: var(--red-500);
+    --_fc: var(--white);
+  }
+}
+body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
+  --_bg: var(--red-500);
+  --_fc: var(--white);
+}
+.s-notice__info {
+  --_bc: var(--theme-secondary-150);
+  --_bg: var(--theme-secondary-050);
+  --_btn-focus-bg: var(--theme-secondary-100);
+  --_btn-active-bg: var(--theme-secondary-150);
+  --_code-bg: var(--theme-secondary-150);
+}
+body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
+  --_bg: var(--theme-secondary-100);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-notice__info:not(.s-notice__important) {
+    --_bg: var(--theme-secondary-100);
+  }
+}
+body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
+  --_bg: var(--theme-secondary-100);
+}
+.s-notice__info.s-notice__important {
+  --_bc: var(--_bg);
+  --_bg: var(--theme-secondary-400);
+  --_btn-focus-bg: var(--theme-secondary-500);
+  --_btn-active-bg: var(--theme-secondary-600);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-notice__info.s-notice__important {
+    --_bg: var(--theme-secondary-300);
+    --_fc: var(--black-900);
+  }
+}
+body.theme-dark .s-notice__info.s-notice__important,
+.theme-dark__forced .s-notice__info.s-notice__important,
+body.theme-system .theme-dark__forced .s-notice__info.s-notice__important {
+  --_bg: var(--theme-secondary-300);
+  --_fc: var(--black-900);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-notice__info.s-notice__important {
+    --_bg: var(--theme-secondary-400);
+    --_fc: var(--white);
+  }
+}
+body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
+  --_bg: var(--theme-secondary-400);
+  --_fc: var(--white);
+}
+.s-notice__success {
+  --_bc: var(--green-200);
+  --_bg: var(--green-050);
+  --_btn-focus-bg: var(--green-100);
+  --_btn-active-bg: var(--green-200);
+}
+body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
+  --_bg: var(--green-200);
+}
+.s-notice__success.s-notice__important {
+  --_bc: var(--_bg);
+  --_bg: var(--green-400);
+  --_fc: var(--black-900);
+  --_btn-focus-bg: var(--green-500);
+  --_btn-active-bg: var(--green-600);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-notice__success.s-notice__important {
+    --_bg: var(--green-500);
+    --_fc: var(--white);
+  }
+}
+body.theme-dark .s-notice__success.s-notice__important,
+.theme-dark__forced .s-notice__success.s-notice__important,
+body.theme-system .theme-dark__forced .s-notice__success.s-notice__important {
+  --_bg: var(--green-500);
+  --_fc: var(--white);
+}
+body.theme-highcontrast .s-notice__success.s-notice__important {
+  --_bg: var(--green-500);
+  --_fc: var(--white);
+}
+.s-notice__warning {
+  --_bc: var(--yellow-300);
+  --_bg: var(--yellow-050);
+  --_btn-focus-bg: var(--yellow-200);
+  --_btn-active-bg: var(--yellow-300);
+  --_code-bg: var(--yellow-200);
+}
+body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
+  --_bg: var(--yellow-200);
+}
+.s-notice__warning.s-notice__important {
+  --_bc: var(--_bg);
+  --_bg: var(--yellow-400);
+  --_btn-focus-bg: var(--yellow-500);
+  --_btn-active-bg: var(--yellow-600);
+  --_fc: var(--black-900);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-notice__warning.s-notice__important {
+    --_bg: var(--yellow-600);
+    --_fc: var(--white);
+  }
+}
+body.theme-dark .s-notice__warning.s-notice__important,
+.theme-dark__forced .s-notice__warning.s-notice__important,
+body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
+  --_bg: var(--yellow-600);
+  --_fc: var(--white);
+}
+body.theme-highcontrast .s-notice__warning.s-notice__important {
+  --_bg: var(--yellow-700);
+  --_fc: var(--white);
 }
 .s-toast {
   visibility: hidden;
@@ -20479,6 +20659,14 @@ body.theme-highcontrast .s-notice__danger {
     transform: none;
   }
 }
+.s-toast .s-notice {
+  max-width: 44rem;
+  width: 100%;
+  padding-top: var(--su8);
+  padding-bottom: var(--su8);
+  box-shadow: var(--bs-sm);
+  pointer-events: all;
+}
 .s-tag {
   display: inline-flex;
   align-items: center;