@stackoverflow/stacks 3.0.0-beta.20 → 3.0.0-beta.22

package/dist/css/stacks.css

@@ -869,9 +869,10 @@ a.s-badge:hover {
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
   color: var(--_no-fc);
-  border-width: 0 0 var(--su-static1);
+  display: flex;
+  align-items: center;
+  padding: var(--su16);
   inset: 0 0 auto 0;
-  padding: var(--su12);
   position: fixed;
   transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
   width: 100%;
@@ -1001,6 +1002,9 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   padding-right: var(--su2);
   white-space: nowrap;
 }
+button.s-banner--dismiss {
+  color: var(--_no-fc);
+}
 button.s-banner--dismiss:active {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
@@ -1011,11 +1015,23 @@ button.s-banner--dismiss.focus-inset-bordered {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
 }
-:has( > button.s-banner--dismiss) {
+.s-banner--actions {
+  display: flex;
+  margin-left: auto;
+  align-self: flex-start;
   padding-left: var(--su24);
+  color: var(--_no-fc);
   gap: calc(var(--su24) - var(--su2));
   overflow-wrap: initial !important;
 }
+.s-banner--actions > .s-link:not(.s-banner--dismiss) {
+  color: var(--_no-fc);
+}
+.s-banner--icon {
+  --_no-icon-bg: transparent;
+  margin-right: var(--su8);
+  align-self: flex-start;
+}
 .s-banner[aria-hidden="true"] {
   --_no-ty-offset: -1;
   opacity: 0;
@@ -1033,12 +1049,6 @@ button.s-banner--dismiss.focus-inset-bordered {
 .s-banner__body-pt {
   padding-top: 93px;
 }
-.s-banner .s-banner--container {
-  margin: 0 auto;
-  max-width: var(--su1024);
-  position: relative;
-  width: 100%;
-}
 .s-bling {
   --_bl-bg: unset;
   --_bl-size: calc(var(--su8) + var(--su2));
@@ -1302,6 +1312,9 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-g: var(--su8);
   --_bu-px: var(--su16);
   --_bu-py: calc(var(--su8) + var(--su2));
+  --_bu-badge-fs: var(--fs-caption);
+  --_bu-badge-px: var(--su6);
+  --_bu-badge-py: var(--su2);
   --_bu-dropdown-bw: var(--su-static4);
   background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) border-box;
   border: var(--_bu-baw) solid var(--_bu-bc, transparent);
@@ -1326,14 +1339,15 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
 }
 .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
   --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-  --_bu-bg-disabled: var(--theme-secondary-300);
+  --_bu-bg-disabled: var(--black-350);
   --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
   --_bu-fc: var(--white);
+  --_bu-fc-disabled: var(--black-050);
   --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
-  --_bu-badge-bg: var(--theme-secondary-200);
-  --_bu-badge-fc: var(--theme-secondary-600);
-  --_bu-badge-bg-disabled: var(--theme-secondary-200);
-  --_bu-badge-fc-disabled: var(--theme-secondary-300);
+  --_bu-badge-bg: var(--theme-secondary-500);
+  --_bu-badge-fc: var(--white);
+  --_bu-badge-bg-disabled: var(--black-250);
+  --_bu-badge-fc-disabled: var(--black-050);
 }
 .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
   --_bu-bg: transparent;
@@ -1343,10 +1357,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-fc: var(--theme-secondary-600);
   --_bu-fc-disabled: var(--theme-secondary-300);
   --_bu-fc-hover: var(--_bu-fc);
-  --_bu-badge-bg: var(--theme-secondary-500);
-  --_bu-badge-fc: var(--white);
-  --_bu-badge-bg-disabled: var(--theme-secondary-300);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--theme-secondary-100);
+  --_bu-badge-fc: var(--theme-secondary-500);
+  --_bu-badge-bg-disabled: var(--black-100);
+  --_bu-badge-fc-disabled: var(--black-350);
 }
 body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
   --_bu-bc: var(--theme-secondary-600);
@@ -1355,13 +1369,14 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
   --_bu-bg: var(--red-400);
   --_bu-fc: var(--white);
   --_bu-bg-disabled: var(--red-200);
+  --_bu-fc-disabled: var(--black-050);
   --_bu-bg-hover: var(--red-500);
   --_bu-bg-selected: var(--red-500);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--red-100);
-  --_bu-badge-fc: var(--red-400);
-  --_bu-badge-bg-disabled: var(--white);
-  --_bu-badge-fc-disabled: var(--red-200);
+  --_bu-badge-bg: var(--red-500);
+  --_bu-badge-fc: var(--black-050);
+  --_bu-badge-bg-disabled: var(--red-300);
+  --_bu-badge-fc-disabled: var(--black-100);
 }
 .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bg: transparent;
@@ -1372,11 +1387,10 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
   --_bu-fc-disabled: var(--red-200);
   --_bu-fc-hover: var(--red-500);
   --_bu-fc-selected: var(--red-500);
-  --_bu-badge-bg: var(--red-400);
-  --_bu-badge-bg-selected: var(--red-400);
-  --_bu-badge-fc: var(--red-100);
-  --_bu-badge-bg-disabled: var(--red-200);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--red-100);
+  --_bu-badge-fc: var(--red-500);
+  --_bu-badge-bg-disabled: var(--red-100);
+  --_bu-badge-fc-disabled: var(--red-300);
 }
 body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bc: var(--red-600);
@@ -1389,22 +1403,23 @@ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bg-selected: var(--purple-500);
   --_bu-fc: var(--white);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--purple-100);
-  --_bu-badge-fc: var(--purple-400);
-  --_bu-badge-bg-disabled: var(--white);
-  --_bu-badge-fc-disabled: var(--purple-200);
+  --_bu-badge-bg: var(--purple-500);
+  --_bu-badge-fc: var(--black-050);
+  --_bu-badge-bg-disabled: var(--purple-300);
+  --_bu-badge-fc-disabled: var(--black-100);
 }
 .s-btn.s-btn__tonal {
   --_bu-bg: var(--black-150);
   --_bu-bg-disabled: var(--black-100);
   --_bu-bg-hover: var(--black-200);
+  --_bu-bg-selected: var(--black-200);
   --_bu-fc: var(--black);
   --_bu-fc-disabled: var(--black-300);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--black-500);
-  --_bu-badge-fc: var(--white);
-  --_bu-badge-bg-disabled: var(--black-300);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--black-200);
+  --_bu-badge-fc: var(--black-600);
+  --_bu-badge-bg-disabled: var(--black-100);
+  --_bu-badge-fc-disabled: var(--black-350);
 }
 body.theme-highcontrast .s-btn.s-btn__tonal {
   --_bu-bc: var(--black-300);
@@ -1577,8 +1592,8 @@ p .s-btn.s-btn__link {
 .s-btn--radio:checked + .s-btn {
   --_bu-bg-selected-overlay-o: 20%;
   --_bu-bg-selected-overlay: color-mix(in srgb, var(--_bu-bg-selected, var(--_bu-bg)), var(--white) var(--_bu-bg-selected-overlay-o));
-  --_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
-  --_bu-bg-gradient-bottom: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+  --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+  --_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
   background: linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) border-box;
   color: var(--_bu-fc-selected, var(--_bu-fc));
 }
@@ -1612,10 +1627,11 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
   background-color: var(--_bu-badge-bg);
   border-radius: var(--br-pill);
   display: inline-block;
-  font-size: var(--fs-caption);
+  font-size: var(--_bu-badge-fs);
   line-height: inherit;
   opacity: var(--_bu-badge-o);
-  padding: var(--su1) var(--su4) 0;
+  padding: var(--_bu-badge-py) var(--_bu-badge-px);
+  margin-block: calc(var(--_bu-badge-py) * -1);
 }
 .s-btn .s-btn--number {
   color: var(--_bu-badge-fc, var(--_bu-fc));
@@ -1637,6 +1653,9 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
 .s-btn.s-btn__sm {
   --_bu-lh: var(--lh-sm);
   --_bu-px: var(--su12);
+  --_bu-badge-fs: var(--fs-fine);
+  --_bu-badge-py: var(--su1);
+  --_bu-badge-px: calc(var(--su2) + var(--su1));
 }
 .s-btn.s-btn__xs {
   --_bu-g: var(--su4);
@@ -1652,6 +1671,7 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
   --_bu-fs: var(--fs-body2);
   --_bu-px: var(--su24);
   --_bu-py: calc(var(--su12) + var(--su1));
+  --_bu-badge-py: calc(var(--su2) + var(--su1));
 }
 .s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
 .s-btn--radio:focus-visible + .s-btn {
@@ -3351,8 +3371,9 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
 /**
  * Generate styles for a notice-based component
  *
- * Usage example:
+ * Usage examples:
  * .construct-notice-component(s-banner);
+ * .construct-notice-component(s-notice);
  *
  * @baseClass - The base class name for the notice component
  */
@@ -3494,6 +3515,9 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
   padding-right: var(--su2);
   white-space: nowrap;
 }
+button.s-notice--dismiss {
+  color: var(--_no-fc);
+}
 button.s-notice--dismiss:active {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
@@ -3504,19 +3528,24 @@ button.s-notice--dismiss.focus-inset-bordered {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
 }
-:has( > button.s-notice--dismiss) {
+.s-notice--actions {
+  display: flex;
+  margin-left: auto;
+  align-self: flex-start;
   padding-left: var(--su24);
+  color: var(--_no-fc);
   gap: calc(var(--su24) - var(--su2));
   overflow-wrap: initial !important;
 }
+.s-notice--actions > .s-link:not(.s-notice--dismiss) {
+  color: var(--_no-fc);
+}
 .s-notice--icon {
   background: var(--_no-icon-bg);
   border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
   padding: var(--_no-pd);
   margin-right: var(--su12);
   align-self: stretch;
-  display: flex;
-  align-items: top;
   margin-top: calc(var(--_no-pd) * -1);
   margin-bottom: calc(var(--_no-pd) * -1);
 }
@@ -4992,285 +5021,122 @@ body.theme-highcontrast .is-readonly .s-select > select {
   right: var(--su32);
 }
 .s-sidebarwidget {
-  --_sw-bc: var(--bc-medium);
-  background-color: var(--white);
-  border: var(--su-static1) solid var(--_sw-bc);
-  border-radius: var(--br-md);
-  font-size: var(--fs-body1);
-}
-.s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link),
-.s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link):visited {
-  color: var(--black-600);
-}
-.s-sidebarwidget.s-sidebarwidget__blue {
-  --_sw-bc: var(--blue-300);
-  background-color: var(--blue-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
-  --_sw-bc: var(--blue-500);
-}
-.s-sidebarwidget.s-sidebarwidget__blue:after,
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow {
-  --_sw-bc: var(--yellow-300);
-  background-color: var(--yellow-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
-  --_sw-bc: var(--yellow-500);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow:after,
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget.s-sidebarwidget__green {
-  --_sw-bc: var(--green-300);
-  background-color: var(--green-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
-  --_sw-bc: var(--green-500);
-}
-.s-sidebarwidget.s-sidebarwidget__green:after,
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget .s-sidebarwidget--action {
-  color: var(--blue-400);
   font-size: var(--fs-body1);
-  font-weight: normal;
-  margin-left: auto;
 }
 .s-sidebarwidget .s-sidebarwidget--content {
-  margin: 0;
-  padding: var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__items),
-.s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
   display: flex;
+  padding: var(--su12) 0 var(--su16) 0;
+  font-size: var(--fs-body2);
 }
-.s-sidebarwidget .s-sidebarwidget--content + .s-sidebarwidget--content {
-  border-top: var(--su-static1) solid var(--bc-light);
-}
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items {
-  padding: var(--su6) var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items,
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items.s-sidebarwidget__block-items .s-sidebarwidget--item {
-  display: block;
-}
-.s-sidebarwidget .s-sidebarwidget--content:active {
-  outline: none;
+.s-sidebarwidget .s-sidebarwidget--content .s-sidebarwidget--action {
+  font-size: var(--fs-fine);
+  margin-left: var(--su16);
+  align-self: flex-start;
 }
 .s-sidebarwidget .s-sidebarwidget--header {
   align-items: center;
-  border-top: var(--su-static1) solid var(--bc-light);
-  color: var(--black-600);
   display: flex;
-  font-size: var(--fs-body2);
-  font-weight: bold;
-  justify-content: flex-start;
-  line-height: var(--lh-xs);
+  padding: var(--su4) 0;
+}
+.s-sidebarwidget .s-sidebarwidget--header > h1,
+.s-sidebarwidget .s-sidebarwidget--header h2,
+.s-sidebarwidget .s-sidebarwidget--header h3,
+.s-sidebarwidget .s-sidebarwidget--header h4,
+.s-sidebarwidget .s-sidebarwidget--header h5,
+.s-sidebarwidget .s-sidebarwidget--header h6 {
   margin: 0;
-  padding: var(--su16) var(--su16) 0;
-}
-.s-sidebarwidget .s-sidebarwidget--header:first-child {
-  border-top: none;
-}
-.s-sidebarwidget .s-sidebarwidget--header + .s-expandable:not(.is-expanded) {
-  margin-bottom: var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control {
-  cursor: pointer;
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
-  border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-  border-left-color: var(--black-400);
-  border-right-width: 0;
-  content: '';
-  float: left;
-  margin-right: var(--su12);
-  margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px);
-  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control[aria-expanded='true']:before {
-  transform: rotate(90deg);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
-  font-size: var(--fs-caption);
-  font-weight: bold;
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .s-sidebarwidget--action {
-  font-weight: normal;
-  line-height: calc(var(--lh-base) * var(--fs-caption));
-}
-.s-sidebarwidget .s-sidebarwidget--header:active {
-  outline: none;
-}
-.s-sidebarwidget .s-sidebarwidget--item {
-  margin: var(--su12) 0;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"],
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"],
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"],
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] {
-  color: var(--black);
-  font-weight: bold;
-  position: relative;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"]:before,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"]:before,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
-  border-left-color: var(--theme-primary);
-  border-left-style: solid;
-  border-left-width: calc(var(--su-static1) * 3);
-  content: '';
-  height: calc(100% + var(--su16));
-  left: 0;
-  margin-left: var(--sun16);
-  margin-top: var(--sun8);
-  position: absolute;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a:visited {
-  color: inherit;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav {
-  list-style-type: none;
-  margin-left: var(--su8);
-  padding-left: 0;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li {
-  background-image: url("data:image/svg+xml;,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--black-225%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
-  background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2);
-  background-repeat: no-repeat;
-  background-size: auto calc(var(--su-static8) + var(--su-static2));
-  margin-top: var(--su-static12);
-  padding-left: var(--su-static16);
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"],
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] {
-  background-image: url("data:image/svg+xml;,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--theme-primary%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
-  color: var(--black);
-  font-weight: bold;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a:visited {
-  color: inherit;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items {
-  border-collapse: separate;
-  border-spacing: var(--su16) var(--su12);
-  padding: var(--su6) 0 0;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item {
-  display: table-row;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
-  padding: 0;
+  padding-right: var(--su6);
+  font-size: var(--fs-body1);
+  font-weight: 500;
 }
-.s-spinner {
-  --_sp-baw: calc(var(--su-static1) * 3);
-  --_sp-size: var(--su-static24);
-  height: var(--_sp-size);
-  width: var(--_sp-size);
-  position: relative;
-  text-align: left;
+.s-sidebarwidget .s-sidebarwidget--header .s-sidebarwidget--action {
+  margin-left: auto;
 }
-.s-spinner.s-spinner__xs {
-  --_sp-baw: var(--su-static1);
-  --_sp-size: var(--su-static12);
+.s-sidebarwidget .s-sidebarwidget--footer {
+  display: flex;
+  font-size: var(--fs-body2);
 }
-.s-spinner.s-spinner__sm {
-  --_sp-baw: var(--su-static2);
-  --_sp-size: var(--su-static16);
+.s-sidebarwidget .s-sidebarwidget--footer .s-sidebarwidget--action {
+  flex: 1;
 }
-.s-spinner.s-spinner__md {
-  --_sp-baw: var(--su-static4);
-  --_sp-size: var(--su-static32);
+.s-sidebarwidget .s-sidebarwidget--action:is(a, button) {
+  white-space: nowrap;
 }
-.s-spinner.s-spinner__lg {
-  --_sp-baw: var(--su-static6);
-  --_sp-size: var(--su-static48);
+.s-loader {
+  --_ld-color: var(--black-600);
+  --_ld-gap: calc(var(--_ld-size) / 2);
+  --_ld-size: calc(var(--su4) + var(--su1));
+  --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5);
+  display: flex;
+  gap: var(--_ld-gap);
+  margin-top: var(--_ld-gap);
 }
-.s-spinner:after,
-.s-spinner:before {
-  border: var(--_sp-baw) solid currentColor;
-  border-radius: var(--br-circle);
-  content: '';
-  height: 100%;
-  position: absolute;
-  width: 100%;
+.s-loader__sm {
+  --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2);
+  margin-left: var(--su1);
+  margin-right: var(--su1);
 }
-.s-spinner:after {
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+.s-loader__lg {
+  --_ld-size: var(--su8);
 }
-.s-spinner:before {
-  opacity: 0.25;
-  transform: rotate(90deg);
+.s-loader:before,
+.s-loader .s-loader--sr-text:before,
+.s-loader:after {
+  background-color: currentColor;
+  content: "";
+  display: block;
+  height: var(--_ld-size);
+  width: var(--_ld-size);
+  animation: loader-animation 0.8s cubic-bezier(1, 1, 0, 1) infinite;
 }
-.is-loading {
-  --_li-offset: 0.6em;
-  --_il-size: 1.23076923em;
-  padding-left: 2.2em;
-  position: relative;
+.s-loader .s-loader--sr-text {
+  display: block;
+  flex-shrink: 0;
+  height: var(--_ld-size);
+  width: var(--_ld-size);
+  font-size: 0;
+  overflow: visible;
 }
-.is-loading:after,
-.is-loading:before {
-  border-radius: var(--br-circle);
-  border-style: solid;
-  border-width: var(--su-static2);
-  content: "";
-  height: var(--_il-size);
-  left: var(--_li-offset);
-  position: absolute;
-  top: calc(50% - var(--_li-offset));
-  width: var(--_il-size);
+.s-loader .s-loader--sr-text:before {
+  animation-delay: 0.25s;
 }
-.is-loading:after {
-  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-  border-color: transparent;
-  border-left-color: currentColor;
-  filter: invert(0);
-  transform-origin: 50% 50% var(--su-static1);
+.s-loader:after {
+  animation-delay: 0.5s;
 }
-.is-loading:before {
-  border-color: currentColor;
-  opacity: 0.3;
+@media (prefers-reduced-motion: reduce) {
+  .s-loader:before,
+  .s-loader .s-loader--sr-text:before,
+  .s-loader:after {
+    animation: loader-animation-reduced-motion 2s ease-in-out infinite;
+  }
 }
-@keyframes s-spinner-rotate {
-  from {
-    transform: rotate(0deg);
+@keyframes loader-animation {
+  0%,
+  1%,
+  99%,
+  to {
+    opacity: 0.2;
+    transform: translateY(0);
   }
+  49%,
+  50% {
+    opacity: 1;
+    transform: translateY(var(--_ld-offset));
+  }
+  51% {
+    opacity: 0.2;
+    transform: translateY(var(--_ld-offset));
+  }
+}
+@keyframes loader-animation-reduced-motion {
+  0%,
   to {
-    transform: rotate(360deg);
+    opacity: 0.3;
+    transform: none;
+  }
+  50% {
+    opacity: 1;
+    transform: none;
   }
 }
 .s-table {
@@ -5737,6 +5603,9 @@ a.s-tag:active {
   padding-bottom: var(--su8);
   padding-top: var(--su8);
   pointer-events: all;
+  display: flex;
+  align-items: center;
+  min-width: var(--su448);
 }
 .s-toggle-switch {
   --_ts-bg: var(--black-350);