@stackoverflow/stacks 1.7.1 → 1.8.0

package/dist/css/stacks.css

@@ -391,6 +391,11 @@ template {
 [hidden] {
   display: none;
 }
+fieldset {
+  border: 0;
+  min-width: 0;
+  padding: 0;
+}
 .svg-icon,
 .svg-spot {
   vertical-align: bottom;
@@ -399,6 +404,13 @@ template {
 .svg-spot:not(.native) * {
   fill: currentColor;
 }
+.is-disabled,
+.is-readonly,
+.has-success,
+.has-error,
+.has-warning {
+  position: relative;
+}
 .s-activity-indicator {
   --_ai-focus-ring: var(--focus-ring);
   --_ai-bg: var(--theme-secondary-400);
@@ -905,6 +917,7 @@ body.theme-highcontrast .s-btn {
   --_bu-bc-selected: var(--_bu-bc);
   --_bu-badge-o: 0.8;
 }
+fieldset[disabled] .s-btn,
 .s-btn[disabled],
 .s-btn[aria-disabled="true"] {
   --_bu-bs: none !important;
@@ -1076,6 +1089,11 @@ body.theme-highcontrast .s-btn.s-btn__link {
   --_li-fc-hover: var(--black-600);
   --_li-fc-visited: var(--black-700);
 }
+fieldset[disabled] .s-btn.s-btn__link {
+  box-shadow: none !important;
+  opacity: var(--_o-disabled-static);
+  pointer-events: none;
+}
 .s-btn.s-btn__link:active,
 .s-btn.s-btn__link:hover {
   color: var(--_li-fc-hover);
@@ -1130,16 +1148,16 @@ button.s-btn.s-btn__link:focus {
   transition: opacity 200ms var(--te-smooth);
 }
 .s-btn.s-btn__xs {
-  --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
   --_bu-fs: var(--fs-fine);
+  --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
   --_bu-p: 0.6em;
 }
 .s-btn.s-btn__sm {
   --_bu-fs: var(--fs-caption);
 }
 .s-btn.s-btn__md {
-  --_bu-br: calc(var(--br-sm) + var(--su-static1));
   --_bu-fs: var(--fs-body3);
+  --_bu-br: calc(var(--br-sm) + var(--su-static1));
   --_bu-p: 0.7em;
 }
 body.theme-highcontrast .s-btn.s-btn__danger,
@@ -1622,6 +1640,158 @@ a.s-card {
 .s-card p:last-of-type {
   margin-bottom: 0;
 }
+.s-checkbox,
+.s-radio {
+  --_ch-baw: var(--su-static1);
+  --_ch-bc: var(--bc-darker);
+  --_ch-bc-focus: var(--theme-secondary-300);
+  --_ch-bg: var(--white);
+  --_ch-bg-image: unset;
+  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+  background-color: var(--_ch-bg);
+  border: var(--_ch-baw) solid var(--_ch-bc);
+  appearance: none;
+  cursor: pointer;
+  font-size: inherit;
+  height: 1em;
+  margin: 0;
+  outline: 0;
+  vertical-align: middle;
+  width: 1em;
+}
+fieldset[disabled] .s-checkbox,
+fieldset[disabled] .s-radio,
+.s-checkbox[disabled],
+.s-radio[disabled] {
+  cursor: not-allowed;
+  opacity: var(--_o-disabled-static);
+}
+.s-check-group .s-checkbox,
+.s-check-group .s-radio {
+  margin-top: calc(var(--su2) + var(--su1));
+}
+input.s-checkbox,
+input.s-radio {
+  flex-shrink: 0;
+}
+.s-checkbox:focus,
+.s-radio:focus {
+  box-shadow: var(--_ch-bs-focus);
+}
+.s-checkbox {
+  background-image: var(--_ch-bg-image);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: var(--br-sm);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-checkbox:checked,
+  body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
+    --_ch-bc: var(--blue-700) !important;
+    --_ch-bc-focus: var(--_ch-bc);
+    --_ch-bg: var(--blue-300);
+  }
+}
+body.theme-highcontrast.theme-dark .s-checkbox:checked,
+body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
+  --_ch-bc: var(--blue-700) !important;
+  --_ch-bc-focus: var(--_ch-bc);
+  --_ch-bg: var(--blue-300);
+}
+.s-checkbox:checked,
+.s-checkbox:indeterminate {
+  --_ch-bc: var(--theme-secondary-400) !important;
+  --_ch-bg: var(--theme-secondary-400);
+}
+.s-checkbox:checked:focus,
+.s-checkbox:indeterminate:focus {
+  --_ch-bc-focus: var(--theme-secondary-400);
+}
+.s-checkbox:checked {
+  --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
+}
+.s-checkbox:indeterminate {
+  --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
+}
+.s-checkbox:focus {
+  border-color: var(--_ch-bc-focus);
+}
+.s-radio {
+  border-radius: var(--br-circle);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-radio:checked {
+    --_ch-bc: var(--blue-300);
+    outline: var(--su-static1) solid var(--black);
+  }
+}
+body.theme-highcontrast.theme-dark .s-radio:checked {
+  --_ch-bc: var(--blue-300);
+  outline: var(--su-static1) solid var(--black);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-radio:checked {
+    --_ch-bg: var(--black);
+  }
+}
+body.theme-dark .s-radio:checked,
+.theme-dark__forced .s-radio:checked,
+body.theme-system .theme-dark__forced .s-radio:checked {
+  --_ch-bg: var(--black);
+}
+.s-radio:checked {
+  --_ch-baw: 0.30769231em;
+  --_ch-bc: var(--theme-secondary-400);
+  --_ch-bg: var(--white);
+}
+.has-error .s-checkbox,
+.has-error .s-radio:not(:checked),
+.has-success .s-checkbox,
+.has-success .s-radio:not(:checked),
+.has-warning .s-checkbox,
+.has-warning .s-radio:not(:checked) {
+  --_ch-bc-focus: var(--_ch-bc);
+}
+.has-error .s-checkbox,
+.has-error .s-radio:not(:checked) {
+  --_ch-bc: var(--red-400);
+  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
+}
+.has-success .s-checkbox,
+.has-success .s-radio:not(:checked) {
+  --_ch-bc: var(--green-400);
+  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
+}
+.has-warning .s-checkbox,
+.has-warning .s-radio:not(:checked) {
+  --_ch-bc: var(--yellow-600);
+  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+}
+.s-check-control {
+  --_cc-ai: center;
+  align-items: var(--_cc-ai);
+  display: flex;
+  gap: var(--su8);
+}
+.s-check-group .s-check-control {
+  --_cc-ai: flex-start;
+}
+.s-check-control .s-label {
+  font-weight: normal;
+}
+.s-check-group {
+  --_cg-fd: column;
+  flex-direction: var(--_cg-fd);
+  display: flex;
+  gap: var(--su8);
+}
+.s-check-group.s-check-group__horizontal {
+  --_cg-fd: row;
+}
+.s-check-group legend.s-label {
+  margin-bottom: var(--su8);
+}
 .s-code-block {
   --_cb-line-numbers-bg: var(--black-050);
 }
@@ -1777,6 +1947,14 @@ pre.s-code-block::-webkit-scrollbar-corner {
   background-color: transparent;
   border-color: transparent;
 }
+.s-description {
+  color: var(--fc-medium);
+  font-size: var(--fs-caption);
+  padding: 0 var(--su2);
+}
+.is-disabled .s-description {
+  opacity: var(--_o-disabled-static);
+}
 .s-expandable {
   --_ex-after-h: 10px;
   --_ex-after-hmx: 0;
@@ -1841,388 +2019,219 @@ pre.s-code-block::-webkit-scrollbar-corner {
 }
 .s-input,
 .s-textarea {
+  --_in-bc: var(--bc-darker);
+  --_in-bc-focus: var(--theme-secondary-300);
+  --_in-bg: var(--white);
+  --_in-br: var(--br-sm);
+  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+  --_in-c: unset;
+  --_in-fc: var(--fc-dark);
+  --_in-fc-focus: var(--black);
+  --_in-fs: var(--fs-body1);
+  --_in-o: unset;
+  --_in-px: 0.7em;
+  --_in-py: 0.6em;
+  --_in-placeholder-fc: var(--black-200);
+  scrollbar-color: var(--scrollbar) transparent;
+  background-color: var(--_in-bg);
+  border: var(--su-static1) solid var(--_in-bc);
+  border-radius: var(--_in-br);
+  color: var(--_in-fc);
+  cursor: var(--_in-c);
+  font-size: var(--_in-fs);
+  opacity: var(--_in-o);
+  padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
   -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
-  padding: 0.6em 0.7em;
-  border: 1px solid var(--bc-darker);
-  border-radius: var(--br-sm);
-  background-color: var(--white);
-  color: var(--fc-dark);
-  font-size: var(--fs-body1);
   font-family: inherit;
-  scrollbar-color: var(--scrollbar) transparent;
+  margin: 0;
+  width: 100%;
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .s-input,
   .s-textarea {
-    font-size: 16px;
-    padding: 0.36em 0.55em;
+    --_in-fs: var(--su-static16);
+    --_in-px: 0.55em;
+    --_in-py: 0.36em;
   }
   .s-input::-webkit-input-placeholder,
   .s-textarea::-webkit-input-placeholder {
     line-height: normal !important;
   }
 }
-.s-input::-webkit-input-placeholder,
-.s-textarea::-webkit-input-placeholder {
-  color: var(--black-200);
-}
-body.theme-highcontrast .s-input::-webkit-input-placeholder,
-body.theme-highcontrast .s-textarea::-webkit-input-placeholder {
-  color: var(--black-400);
-}
-.s-input::placeholder,
-.s-textarea::placeholder {
-  color: var(--black-200);
-  opacity: 1;
-}
-body.theme-highcontrast .s-input::placeholder,
-body.theme-highcontrast .s-textarea::placeholder {
-  color: var(--black-400);
-}
-.s-input::-webkit-scrollbar,
-.s-textarea::-webkit-scrollbar {
-  width: calc(var(--su-static12) - var(--su-static2));
-  height: calc(var(--su-static12) - var(--su-static2));
-  background-color: transparent;
-}
-.s-input::-webkit-scrollbar-track,
-.s-textarea::-webkit-scrollbar-track {
-  border-radius: calc(var(--su-static12) - var(--su-static2));
-  background-color: transparent;
-}
-.s-input::-webkit-scrollbar-thumb,
-.s-textarea::-webkit-scrollbar-thumb {
-  border-radius: calc(var(--su-static12) - var(--su-static2));
-  background-color: var(--scrollbar);
-}
-.s-input::-webkit-scrollbar-corner,
-.s-textarea::-webkit-scrollbar-corner {
-  background-color: transparent;
-  border-color: transparent;
-}
-.s-input::-webkit-contacts-auto-fill-button,
-.s-textarea::-webkit-contacts-auto-fill-button {
-  background-color: var(--black);
-}
-.s-input:-webkit-autofill,
-.s-textarea:-webkit-autofill {
-  border-color: var(--blue-300);
-  -webkit-text-fill-color: var(--black);
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
-  transition: background-color 0s 50000s;
-}
-.s-input:-webkit-autofill:focus,
-.s-textarea:-webkit-autofill:focus {
-  border-color: var(--blue-300);
-  -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-}
-.s-input.s-input__search,
-.s-input.s-input__creditcard {
-  padding-left: var(--su-static32);
-}
-fieldset {
-  min-width: 0;
-  padding: 0;
-  border: 0;
-}
-fieldset[disabled] a,
-fieldset[disabled] .s-btn,
-fieldset[disabled] .s-link {
-  box-shadow: none !important;
-  opacity: var(--_o-disabled-static);
-  pointer-events: none;
-}
-fieldset[disabled] .s-checkbox,
-fieldset[disabled] .s-input-message,
-fieldset[disabled] .s-radio,
-fieldset[disabled] .s-toggle-switch,
-fieldset[disabled] .s-toggle-switch label {
-  cursor: not-allowed;
-  opacity: var(--_o-disabled-static);
+body.theme-highcontrast .s-input,
+body.theme-highcontrast .s-textarea {
+  --_in-bc: var(--black);
+  --_in-placeholder-fc: var(--black-400);
 }
 fieldset[disabled] .s-input,
 fieldset[disabled] .s-textarea,
-fieldset[disabled] .s-select > select {
-  cursor: not-allowed;
-  opacity: var(--_o-disabled-static);
-}
-.s-description {
-  padding: 0 var(--su2);
-  color: var(--fc-medium);
-  font-size: var(--fs-caption);
-}
-.s-input-fill {
-  padding: 0.6em 0.7em;
-  border: 1px solid var(--bc-darker);
-  border-right-width: 0;
-  border-left-width: 0;
-  background-color: var(--black-050);
-  color: var(--fc-medium);
-  font-family: inherit;
-  white-space: nowrap;
-  line-height: var(--lh-sm);
-}
-.s-input-fill.s-input-fill__clear {
-  border-color: transparent;
-  background-color: transparent;
+.s-input[disabled],
+.s-textarea[disabled],
+.s-input[readonly],
+.s-textarea[readonly],
+.is-readonly .s-input,
+.is-readonly .s-textarea {
+  --_in-c: not-allowed;
 }
-.s-input-fill.order-first {
-  border-left-width: 1px;
-  border-top-left-radius: var(--br-sm);
-  border-bottom-left-radius: var(--br-sm);
+fieldset[disabled] .s-input,
+fieldset[disabled] .s-textarea,
+.s-input[disabled],
+.s-textarea[disabled] {
+  --_in-o: var(--_o-disabled-static);
 }
-.s-input-fill.order-last {
-  border-right-width: 1px;
-  border-top-right-radius: var(--br-sm);
-  border-bottom-right-radius: var(--br-sm);
+.s-input[readonly],
+.s-textarea[readonly],
+.is-readonly .s-input,
+.is-readonly .s-textarea {
+  --_in-bg: var(--black-050);
+  --_in-bc: var(--bc-light);
+  --_in-fc: var(--black-200);
+  --_in-fc-focus: var(--_in-fc);
 }
-.s-select {
-  position: relative;
-  color: var(--fc-dark);
+body.theme-highcontrast .s-input[readonly],
+body.theme-highcontrast .s-textarea[readonly],
+body.theme-highcontrast .is-readonly .s-input,
+body.theme-highcontrast .is-readonly .s-textarea {
+  --_in-fc: var(--fc-light);
 }
-.s-select:before,
-.s-select:after {
-  content: "";
-  position: absolute;
-  z-index: var(--zi-selected);
-  right: 13px;
-  border-color: currentColor transparent;
-  border-style: solid;
-  border-width: 4px;
-  pointer-events: none;
+.has-error .s-input,
+.has-error .s-textarea,
+.has-success .s-input,
+.has-success .s-textarea,
+.has-warning .s-input,
+.has-warning .s-textarea {
+  --_in-bc-focus: var(--_in-bc);
 }
-.s-select:before {
-  top: calc(50% - 5px);
-  border-top-width: 0;
-  border-bottom-width: 4px;
+.has-error .s-input,
+.has-error .s-textarea {
+  --_in-bc: var(--red-400);
+  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
 }
-.s-select:after {
-  top: calc(50% + 1px);
-  border-top-width: 4px;
-  border-bottom-width: 0;
+body.theme-highcontrast .has-error .s-input,
+body.theme-highcontrast .has-error .s-textarea {
+  --_in-bc: var(--red-400);
 }
-.s-select > select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0.6em 0.7em;
-  padding-right: var(--su32);
-  border: 1px solid var(--bc-darker);
-  border-radius: var(--br-sm);
-  background-color: var(--white);
-  outline: 0;
-  font-size: var(--fs-body1);
-  font-family: inherit;
-  color: var(--black);
-  line-height: var(--lh-sm);
-}
-.s-select > select::-moz-focus-inner {
-  outline: none !important;
+.has-success .s-input,
+.has-success .s-textarea {
+  --_in-bc: var(--green-400);
+  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
 }
-.s-select > select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #000;
+body.theme-highcontrast .has-success .s-input,
+body.theme-highcontrast .has-success .s-textarea {
+  --_in-bc: var(--green-400);
 }
-.s-select > select::-ms-expand {
-  display: none;
+.has-warning .s-input,
+.has-warning .s-textarea {
+  --_in-bc: var(--yellow-600);
+  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+}
+body.theme-highcontrast .has-warning .s-input,
+body.theme-highcontrast .has-warning .s-textarea {
+  --_in-bc: var(--yellow-600);
+}
+.s-input.s-input__sm,
+.s-input.s-textarea__sm,
+.s-textarea.s-input__sm,
+.s-textarea.s-textarea__sm {
+  --_in-fs: var(--fs-caption);
+}
+.s-input.s-input__md,
+.s-input.s-textarea__md,
+.s-textarea.s-input__md,
+.s-textarea.s-textarea__md {
+  --_in-fs: var(--fs-body3);
+  --_in-br: calc(var(--br-sm) + var(--su-static1));
 }
 @supports (-webkit-overflow-scrolling: touch) {
-  .s-select > select {
-    font-size: 16px;
-    padding: 0.4em 0.55em;
-  }
-}
-.s-select > select::-webkit-contacts-auto-fill-button {
-  background-color: var(--black);
+  .s-input.s-input__md,
+  .s-input.s-textarea__md,
+  .s-textarea.s-input__md,
+  .s-textarea.s-textarea__md {
+    --_in-fs: 17px;
+    --_in-py: 0.4em;
+  }
+}
+.s-input.s-input__lg,
+.s-input.s-textarea__lg,
+.s-textarea.s-input__lg,
+.s-textarea.s-textarea__lg {
+  --_in-fs: var(--fs-title);
+  --_in-br: calc(var(--br-sm) + var(--su-static1));
+  --_in-px: 0.6em;
+  --_in-py: 0.45em;
+}
+.s-input.s-input__xl,
+.s-input.s-textarea__xl,
+.s-textarea.s-input__xl,
+.s-textarea.s-textarea__xl {
+  --_in-fs: var(--fs-headline1);
+  --_in-br: var(--br-md);
+  --_in-px: 0.5em;
+  --_in-py: 0.4em;
 }
-.s-select > select:-webkit-autofill {
-  border-color: var(--blue-300);
-  -webkit-text-fill-color: var(--black);
+.s-input:-webkit-autofill,
+.s-textarea:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
+  -webkit-text-fill-color: var(--black);
+  border-color: var(--blue-300);
   transition: background-color 0s 50000s;
 }
-.s-select > select:-webkit-autofill:focus {
+.s-input:-webkit-autofill:focus,
+.s-textarea:-webkit-autofill:focus {
   border-color: var(--blue-300);
   -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
 }
-.s-check-control {
-  display: flex;
-  gap: var(--su8);
-  align-items: center;
-}
-.s-check-control .s-label {
-  font-weight: normal;
-}
-.s-check-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--su8);
-}
-.s-check-group.s-check-group__horizontal {
-  flex-direction: row;
-}
-.s-check-group legend.s-label {
-  margin-bottom: var(--su8);
-}
-.s-check-group .s-check-control {
-  align-items: flex-start;
-}
-.s-check-group .s-checkbox,
-.s-check-group .s-radio {
-  margin-top: calc(var(--su2) + var(--su1));
-}
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  .s-checkbox,
-  .s-radio {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0;
-    width: 1em;
-    height: 1em;
-    border: 1px solid var(--bc-darker);
-    background-color: var(--white);
-    outline: 0;
-    font-size: inherit;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-  .s-checkbox::-ms-check,
-  .s-radio::-ms-check {
-    display: none;
-  }
-}
-input.s-checkbox,
-input.s-radio {
-  flex-shrink: 0;
-}
-.s-checkbox[disabled],
-.s-radio[disabled] {
-  opacity: var(--_o-disabled-static);
-  cursor: not-allowed;
-}
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  .s-checkbox {
-    border-radius: var(--br-sm);
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-  .s-checkbox:checked,
-  .s-checkbox:indeterminate {
-    border-color: var(--theme-secondary-400) !important;
-    background-color: var(--theme-secondary-400);
-  }
-  @media (prefers-color-scheme: dark) {
-    body.theme-highcontrast.theme-system .s-checkbox:checked,
-    body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
-      border-color: var(--blue-700) !important;
-      background-color: var(--blue-300);
-    }
-  }
-  body.theme-highcontrast.theme-dark .s-checkbox:checked,
-  body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
-    border-color: var(--blue-700) !important;
-    background-color: var(--blue-300);
-  }
-  .s-checkbox:checked:focus,
-  .s-checkbox:indeterminate:focus {
-    border-color: var(--theme-secondary-400);
-  }
-  .s-checkbox:checked {
-    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
-  }
-  .s-checkbox:indeterminate {
-    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
-  }
-  .s-checkbox:focus {
-    border-color: var(--theme-secondary-300);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-  }
-}
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  .s-radio {
-    border-radius: var(--br-circle);
-  }
-  .s-radio:checked {
-    border-color: var(--theme-secondary-400);
-    border-width: 0.30769231em;
-    background-color: hsl(0, 0%, 100%);
-  }
-  @media (prefers-color-scheme: dark) {
-    body.theme-highcontrast.theme-system .s-radio:checked {
-      border-color: var(--blue-300);
-      outline: 1px solid var(--black);
-    }
-  }
-  body.theme-highcontrast.theme-dark .s-radio:checked {
-    border-color: var(--blue-300);
-    outline: 1px solid var(--black);
-  }
-  .s-radio:focus {
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-  }
+.s-input::-webkit-contacts-auto-fill-button,
+.s-textarea::-webkit-contacts-auto-fill-button {
+  background-color: var(--black);
 }
-.s-input:focus,
-.s-input.has-focus,
-.s-textarea:focus,
-.s-select > select:focus {
-  border-color: var(--theme-secondary-300);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-  color: var(--black);
-  outline: 0;
+.s-input::placeholder,
+.s-textarea::placeholder,
+.s-input::-webkit-input-placeholder,
+.s-textarea::-webkit-input-placeholder {
+  color: var(--_in-placeholder-fc);
 }
-body.theme-highcontrast .s-input:focus,
-body.theme-highcontrast .s-input.has-focus,
-body.theme-highcontrast .s-textarea:focus,
-body.theme-highcontrast .s-select > select:focus {
-  border-color: var(--black);
+.s-input::placeholder,
+.s-textarea::placeholder {
+  opacity: 1;
 }
-.s-input:focus-within {
-  border-color: var(--theme-secondary-300);
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-  color: var(--black);
-  outline: 0;
+.s-input.s-input__creditcard,
+.s-input.s-textarea__creditcard,
+.s-textarea.s-input__creditcard,
+.s-textarea.s-textarea__creditcard,
+.s-input.s-input__search,
+.s-input.s-textarea__search,
+.s-textarea.s-input__search,
+.s-textarea.s-textarea__search {
+  --_in-pl: var(--su-static32);
 }
-body.theme-highcontrast .s-input:focus-within {
-  border-color: var(--black);
+.s-input:focus,
+.s-textarea:focus {
+  border-color: var(--_in-bc-focus);
+  box-shadow: var(--_in-bs-focus);
+  color: var(--_in-fc-focus);
+  outline: 0;
 }
-.s-input[disabled],
-.s-textarea[disabled],
-.s-select > select[disabled] {
-  cursor: not-allowed;
-  opacity: var(--_o-disabled-static);
+.s-input::-webkit-scrollbar,
+.s-textarea::-webkit-scrollbar {
+  width: calc(var(--su-static12) - var(--su-static2));
+  height: calc(var(--su-static12) - var(--su-static2));
+  background-color: transparent;
 }
-.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;
+.s-input::-webkit-scrollbar-track,
+.s-textarea::-webkit-scrollbar-track {
+  border-radius: calc(var(--su-static12) - var(--su-static2));
+  background-color: transparent;
 }
-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);
+.s-input::-webkit-scrollbar-thumb,
+.s-textarea::-webkit-scrollbar-thumb {
+  border-radius: calc(var(--su-static12) - var(--su-static2));
+  background-color: var(--scrollbar);
 }
-.is-disabled,
-.is-readonly,
-.has-success,
-.has-error,
-.has-warning {
-  position: relative;
+.s-input::-webkit-scrollbar-corner,
+.s-textarea::-webkit-scrollbar-corner {
+  background-color: transparent;
+  border-color: transparent;
 }
 .is-disabled .s-input,
 .is-readonly .s-input,
@@ -2231,12 +2240,17 @@ body.theme-highcontrast .is-readonly .s-select > select {
 .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);
+.s-input:focus-within {
+  border-color: var(--_in-bc-focus);
+  box-shadow: var(--_in-bs-focus);
+  color: var(--_in-fc-focus);
+  outline: 0;
+}
+body.theme-highcontrast .s-input:focus-within {
+  --_in-bc-focus: var(--black);
+}
+.s-input.s-input__md {
+  --_in-py: 0.5em;
 }
 .is-disabled .s-textarea,
 .is-readonly .s-textarea,
@@ -2245,167 +2259,115 @@ body.theme-highcontrast .is-readonly .s-select > select {
 .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 {
-  top: 1.5em;
-  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 {
-  text-decoration: underline;
-}
-.has-warning .s-input,
-.has-warning .s-textarea,
-.has-warning .s-checkbox,
-.has-warning .s-radio:not(:checked),
-.has-warning .s-select > select {
-  border-color: var(--yellow-600);
-}
-.has-warning .s-input:focus,
-.has-warning .s-textarea:focus,
-.has-warning .s-checkbox:focus,
-.has-warning .s-radio:not(:checked):focus,
-.has-warning .s-select > select:focus {
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
-}
-.has-warning .s-input-message {
-  color: var(--yellow-800);
-}
-.has-warning .s-input-message a {
-  color: var(--yellow-900);
+.s-textarea.s-textarea__md {
+  --_in-py: 0.72em;
 }
-.has-warning .s-input-icon {
-  color: var(--yellow-600);
+.s-textarea ~ .s-input-icon {
+  right: 1.5em;
+  top: 1.5em;
 }
-.has-error .s-input,
-.has-error .s-textarea,
-.has-error .s-checkbox,
-.has-error .s-radio:not(:checked),
-.has-error .s-select > select {
-  border-color: var(--red-400);
+.s-input-fill {
+  --_if-bc: var(--bc-darker);
+  --_if-bg: var(--black-050);
+  --_if-blw: 0;
+  --_if-blr: 0;
+  --_if-brr: 0;
+  --_if-brw: 0;
+  background-color: var(--_if-bg);
+  border: var(--su-static1) solid var(--_if-bc);
+  border-left-width: var(--_if-blw);
+  border-right-width: var(--_if-brw);
+  border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
+  color: var(--fc-medium);
+  font-family: inherit;
+  line-height: var(--lh-sm);
+  padding: 0.6em 0.7em;
+  white-space: nowrap;
 }
-.has-error .s-input:focus,
-.has-error .s-textarea:focus,
-.has-error .s-checkbox:focus,
-.has-error .s-radio:not(:checked):focus,
-.has-error .s-select > select:focus {
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
+.s-input-fill.s-input-fill__clear {
+  --_if-bc: transparent;
+  --_if-bg: transparent;
 }
-.has-error .s-input-message {
-  color: var(--red-500);
+.s-input-fill.order-first {
+  --_if-blw: var(--su-static1);
+  --_if-blr: var(--br-sm);
 }
-.has-error .s-input-message a {
-  color: var(--red-800);
+.s-input-fill.order-last {
+  --_if-brw: var(--su-static1);
+  --_if-brr: var(--br-sm);
 }
-.has-error .s-input-message a:hover {
-  color: var(--red-900);
+.s-input-icon {
+  --_ii-fc: unset;
+  --_ii-r: 0.7em;
+  color: var(--_ii-fc);
+  right: var(--_ii-r);
+  margin-top: -9px;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
 }
 .has-error .s-input-icon {
-  color: var(--red-400);
-}
-.has-success .s-input,
-.has-success .s-textarea,
-.has-success .s-checkbox,
-.has-success .s-radio:not(:checked),
-.has-success .s-select > select {
-  border-color: var(--green-400);
-}
-.has-success .s-input:focus,
-.has-success .s-textarea:focus,
-.has-success .s-checkbox:focus,
-.has-success .s-radio:not(:checked):focus,
-.has-success .s-select > select:focus {
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
-}
-.has-success .s-input-message {
-  color: var(--green-500);
-}
-.has-success .s-input-message a {
-  color: var(--green-800);
-}
-.has-success .s-input-message a:hover {
-  color: var(--green-900);
+  --_ii-fc: var(--red-400);
 }
 .has-success .s-input-icon {
-  color: var(--green-400);
-}
-.is-disabled .s-select:before,
-.is-disabled .s-select:after {
-  border-color: var(--bc-darker) transparent;
+  --_ii-fc: var(--green-400);
 }
-.is-disabled .s-description {
-  opacity: var(--_o-disabled-static);
+.has-warning .s-input-icon {
+  --_ii-fc: var(--yellow-600);
 }
 .is-disabled .s-input-icon {
-  color: var(--black-400);
+  --_ii-fc: var(--black-400);
 }
 .is-readonly .s-input-icon {
-  color: var(--black-200);
+  --_ii-fc: var(--black-200);
 }
 body.theme-highcontrast .is-readonly .s-input-icon {
-  color: var(--fc-light);
-}
-.s-input-icon {
-  position: absolute;
-  top: 50%;
-  right: 0.7em;
-  margin-top: -9px;
-  pointer-events: none;
+  --_ii-fc: var(--fc-light);
 }
-.s-input-icon.s-input-icon__search,
-.s-input-icon.s-input-icon__creditcard {
-  right: auto;
-  left: 0.7em;
+.s-input-icon.s-input-icon__creditcard,
+.s-input-icon.s-input-icon__search {
+  --_ii-r: auto;
   color: var(--black-400);
+  left: 0.7em;
 }
 .s-input-message {
-  padding: var(--su2);
+  --_im-fc: unset;
+  --_im-a-fc: unset;
+  --_im-a-fc-hover: unset;
+  color: var(--_im-fc);
   font-size: var(--fs-caption);
+  padding: var(--su2);
 }
-.s-input__sm,
-.s-textarea__sm,
-.s-select__sm > select {
-  font-size: var(--fs-caption);
+.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 {
+  text-decoration: underline;
 }
-.s-input__md,
-.s-textarea__md,
-.s-select__md > select {
-  font-size: var(--fs-body3);
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  border-radius: calc(var(--br-sm) + 1px);
-}
-.s-textarea__md {
-  padding-top: 0.72em;
-  padding-bottom: 0.72em;
-}
-.s-input__lg,
-.s-textarea__lg,
-.s-select__lg > select {
-  font-size: var(--fs-title);
-  padding: 0.45em 0.6em;
-  border-radius: calc(var(--br-sm) + 1px);
-}
-.s-input__xl,
-.s-textarea__xl,
-.s-select__xl > select {
-  font-size: var(--fs-headline1);
-  padding: 0.4em 0.5em;
-  border-radius: var(--br-md);
+fieldset[disabled] .s-input-message {
+  cursor: not-allowed;
+  opacity: var(--_o-disabled-static);
 }
-@supports (-webkit-overflow-scrolling: touch) {
-  .s-input__md,
-  .s-textarea__md {
-    font-size: 17px;
-    padding-top: 0.4em;
-    padding-bottom: 0.4em;
-  }
+.has-error .s-input-message {
+  --_im-fc: var(--red-500);
+  --_im-a-fc: var(--red-800);
+  --_im-a-fc-hover: var(--red-900);
+}
+.has-success .s-input-message {
+  --_im-fc: var(--green-500);
+  --_im-a-fc: var(--green-800);
+  --_im-a-fc-hover: var(--green-900);
+}
+.has-warning .s-input-message {
+  --_im-fc: var(--yellow-800);
+  --_im-a-fc: var(--yellow-900);
+}
+.s-input-message a {
+  color: var(--_im-a-fc);
+}
+.s-input-message a:hover {
+  color: var(--_im-a-fc-hover);
 }
 .s-label {
   --_la-fs: var(--fs-body2);
@@ -2420,7 +2382,8 @@ body.theme-highcontrast .is-readonly .s-input-icon {
 }
 fieldset[disabled] .s-label,
 .is-disabled .s-label,
-.s-check-control [disabled] + .s-label {
+.s-check-control .s-checkbox[disabled] + .s-label,
+.s-check-control .s-radio[disabled] + .s-label {
   cursor: not-allowed;
   opacity: var(--_o-disabled-static);
 }
@@ -2603,6 +2566,12 @@ a.s-link__muted,
   --_li-fc-hover: var(--black-600);
   --_li-fc-visited: var(--black-700);
 }
+fieldset[disabled] a,
+fieldset[disabled] .s-link {
+  box-shadow: none !important;
+  opacity: var(--_o-disabled-static);
+  pointer-events: none;
+}
 a:active,
 .s-link:active,
 a:hover,
@@ -3995,14 +3964,17 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
   overflow: hidden;
 }
 .s-post-summary .s-post-summary--content-menu-button {
-  padding: var(--su8) !important;
-  position: absolute !important;
   right: var(--su8);
   top: var(--su8);
 }
 .s-post-summary .s-post-summary--content-menu-button .svg-icon {
   margin: 0 !important;
 }
+.s-post-summary .s-post-summary--content-menu-button,
+.s-post-summary .s-post-summary--content-menu-button.s-btn {
+  padding: var(--su8);
+  position: absolute;
+}
 .s-post-summary .s-post-summary--content-title {
   word-break: break-word !important;
   overflow-wrap: break-word !important;
@@ -4873,6 +4845,157 @@ body.theme-highcontrast .s-prose {
   position: absolute;
   width: 100%;
 }
+.s-select {
+  --_se-arrow-bc: currentColor transparent;
+  --_se-arrow-size: var(--su-static4);
+  --_se-select-bc: var(--bc-darker);
+  --_se-select-bc-focus: var(--theme-secondary-300);
+  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+  --_se-select-bg: var(--white);
+  --_se-select-br: var(--br-sm);
+  --_se-select-fc: var(--black);
+  --_se-select-px: 0.7em;
+  --_se-select-py: 0.6em;
+  --_se-select-fs: var(--fs-body1);
+  color: var(--fc-dark);
+  position: relative;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+  .s-select {
+    --_se-select-fs: 16px;
+    --_se-select-px: 0.55em;
+    --_se-select-py: 0.4em;
+  }
+}
+.is-disabled .s-select,
+.is-readonly .s-select,
+.has-success .s-select,
+.has-error .s-select,
+.has-warning .s-select {
+  position: relative;
+}
+.has-error .s-select,
+.has-success .s-select,
+.has-warning .s-select {
+  --_se-select-bc-focus: var(--_se-select-bc);
+}
+.has-error .s-select {
+  --_se-select-bc: var(--red-400);
+  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
+}
+.has-success .s-select {
+  --_se-select-bc: var(--green-400);
+  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
+}
+.has-warning .s-select {
+  --_se-select-bc: var(--yellow-600);
+  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+}
+.is-disabled .s-select {
+  --_se-arrow-bc: var(--bc-darker) transparent;
+}
+.s-select.s-select__sm {
+  --_se-select-fs: var(--fs-caption);
+}
+.s-select.s-select__md {
+  --_se-select-fs: var(--fs-body3);
+  --_se-select-br: calc(var(--br-sm) + var(--su-static1));
+  --_se-select-py: 0.5em;
+}
+.s-select.s-select__lg {
+  --_se-select-fs: var(--fs-title);
+  --_se-select-br: calc(var(--br-sm) + var(--su-static1));
+  --_se-select-px: 0.6em;
+  --_se-select-py: 0.45em;
+}
+.s-select.s-select__xl {
+  --_se-select-fs: var(--fs-headline1);
+  --_se-select-br: var(--br-md);
+  --_se-select-px: 0.5em;
+  --_se-select-py: 0.4em;
+}
+select.s-select:-webkit-autofill,
+.s-select > select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
+  -webkit-text-fill-color: var(--black);
+  border-color: var(--blue-300);
+  transition: background-color 0s 50000s;
+}
+select.s-select:-webkit-autofill:focus,
+.s-select > select:-webkit-autofill:focus {
+  border-color: var(--blue-300);
+  -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
+}
+select.s-select::-webkit-contacts-auto-fill-button,
+.s-select > select::-webkit-contacts-auto-fill-button {
+  background-color: var(--black);
+}
+.s-select:before,
+.s-select:after {
+  border-color: var(--_se-arrow-bc);
+  border-style: solid;
+  border-width: var(--_se-arrow-size);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--su-static12) + var(--su-static1));
+  z-index: var(--zi-selected);
+}
+.s-select:after {
+  border-bottom-width: 0;
+  top: calc(50% + var(--su-static1));
+}
+.s-select:before {
+  border-top-width: 0;
+  top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+}
+.s-select > select {
+  background-color: var(--_se-select-bg);
+  border: var(--su-static1) solid var(--_se-select-bc);
+  border-radius: var(--_se-select-br);
+  color: var(--_se-select-fc);
+  font-size: var(--_se-select-fs);
+  padding: var(--_se-select-py) var(--_se-select-px);
+  appearance: none;
+  font-family: inherit;
+  height: 100%;
+  line-height: var(--lh-sm);
+  outline: 0;
+  padding-right: var(--su32);
+  position: relative;
+  width: 100%;
+}
+fieldset[disabled] .s-select > select,
+.s-select > select[disabled] {
+  cursor: not-allowed;
+  opacity: var(--_o-disabled-static);
+}
+.s-select > select[readonly],
+.is-readonly .s-select > select {
+  --_se-select-bc: var(--bc-light);
+  --_se-select-bg: var(--black-050);
+  --_se-select-fc: var(--black-200);
+  cursor: not-allowed;
+}
+body.theme-highcontrast .s-select > select[readonly],
+body.theme-highcontrast .is-readonly .s-select > select {
+  --_se-select-fc: var(--fc-light);
+}
+.s-select > select::-moz-focus-inner {
+  outline: none !important;
+}
+.s-select > select:focus {
+  border-color: var(--_se-select-bc-focus);
+  box-shadow: var(--_se-select-bs-focus);
+  color: var(--black);
+  outline: 0;
+}
+body.theme-highcontrast .s-select > select:focus {
+  --_se-select-bc-focus: var(--black);
+}
+.s-select .s-input-icon {
+  right: var(--su32);
+}
 .s-sidebarwidget {
   --_sw-bc: var(--bc-medium);
   --_sw-after-bc: var(--_sw-bc);
@@ -5519,7 +5642,7 @@ body.theme-highcontrast a.s-tag.is-selected:focus {
   --_ta-lh: 1.73333333;
 }
 .s-tag.s-tag__lg {
-  --_ta-br: calc(var(--br-sm) + 1px);
+  --_ta-br: calc(var(--br-sm) + var(--su-static1));
   --_ta-fs: var(--fs-subheading);
   --_ta-lh: 1.68421053;
   --_ta-px: var(--su6);
@@ -5646,6 +5769,11 @@ body.theme-highcontrast a.s-tag:not(.is-selected):active {
   --_ts-multiple-bg: unset;
   --_ts-multiple-fc: var(--black-500);
 }
+fieldset[disabled] .s-toggle-switch,
+fieldset[disabled] .s-toggle-switch label {
+  cursor: not-allowed;
+  opacity: var(--_o-disabled-static);
+}
 .s-toggle-switch.s-toggle-switch__multiple {
   align-items: stretch;
   display: flex;
@@ -22908,12 +23036,10 @@ ol {
   }
 }
 @media print {
-  .print\:d-block {
+  .print\:d-block  {
     display: block !important;
   }
-}
-@media print {
-  .print\:d-none {
+  .print\:d-none  {
     display: none !important;
   }
 }