@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

package/design-system/default-theme.css

@@ -6,13 +6,16 @@
   --x-size-border-width-badge-default: 0;
   --x-size-width-badge-default: 1.5em;
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs); }
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
-  right: calc(var(--x-size-width-badge-default) / 4); }
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
 
 [dir="rtl"] .x-badge {
-  left: calc(var(--x-size-width-badge-default) / 4); }
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
 
 .x-badge {
   border-radius: var(--x-size-border-radius-badge-default);
@@ -35,13 +38,15 @@
   padding: 2px;
   background: var(--x-color-background-badge-default);
   color: var(--x-color-text-badge-default);
-  border-color: var(--x-color-border-badge-default); }
-  [dir="rtl"] .x-badge {
-    transform: translate(-50%, -50%); }
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
 
 .x-badge-container {
-  position: relative; }
-
+  position: relative;
+}
 :root {
   --x-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -50,8 +55,8 @@
   --x-size-border-width-badge-default: 0;
   --x-size-width-badge-default: 1.5em;
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs); }
-
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -73,25 +78,41 @@
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-button {
-  padding-right: var(--x-size-padding-right-button-default); }
+  padding-right: var(--x-size-padding-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  padding-left: var(--x-size-padding-right-button-default); }
+  padding-left: var(--x-size-padding-right-button-default);
+}
+
 [dir="ltr"] .x-button {
-  padding-left: var(--x-size-padding-left-button-default); }
+  padding-left: var(--x-size-padding-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  padding-right: var(--x-size-padding-left-button-default); }
+  padding-right: var(--x-size-padding-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-left-width: var(--x-size-border-width-left-button-default); }
+  border-left-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-right-width: var(--x-size-border-width-left-button-default); }
+  border-right-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-right-width: var(--x-size-border-width-right-button-default); }
+  border-right-width: var(--x-size-border-width-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-left-width: var(--x-size-border-width-right-button-default); }
+  border-left-width: var(--x-size-border-width-right-button-default);
+}
+
 .x-button {
   display: inline-flex;
   justify-content: center;
@@ -111,13 +132,16 @@
   font-size: var(--x-size-font-button-default);
   font-weight: var(--x-number-font-weight-button-default);
   line-height: var(--x-size-line-height-button-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-button {
-      gap: 0; }
-      .x-button > *:not(:last-child) {
-        margin-right: var(--x-size-gap-button-default); } }
-
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-button {
+    gap: 0;
+  }
+  .x-button > *:not(:last-child) {
+    margin-right: var(--x-size-gap-button-default);
+  }
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -139,8 +163,8 @@
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
-
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -212,141 +236,177 @@
   --x-size-gap-dropdown-item-default: var(--x-size-base-03);
   --x-string-box-shadow-dropdown-default: none;
   --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden; }
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 
-@use 'sass:string';
 .x-dropdown {
   box-sizing: border-box;
   position: relative;
   font-size: var(--x-size-font-dropdown-default);
   font-family: var(--x-font-family-dropdown-default);
   font-weight: var(--x-number-font-weight-dropdown-default);
-  line-height: var(--x-size-line-height-dropdown-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    padding-right: var(--x-size-padding-right-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    padding-left: var(--x-size-padding-right-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    padding-left: var(--x-size-padding-left-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    padding-right: var(--x-size-padding-left-dropdown-toggle-default); }
+  line-height: var(--x-size-line-height-dropdown-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
+}
+.x-dropdown__toggle {
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  background: var(--x-color-background-dropdown-toggle-default);
+  color: var(--x-color-text-dropdown-toggle-default);
+  border-color: var(--x-color-border-dropdown-toggle-default);
+  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  width: var(--x-size-width-dropdown-toggle-default);
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0;
+  cursor: pointer;
+  overflow: var(--x-string-overflow-dropdown-toggle-default);
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__toggle {
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    background: var(--x-color-background-dropdown-toggle-default);
-    color: var(--x-color-text-dropdown-toggle-default);
-    border-color: var(--x-color-border-dropdown-toggle-default);
-    padding-top: var(--x-size-padding-top-dropdown-toggle-default);
-    padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    width: var(--x-size-width-dropdown-toggle-default);
-    display: flex;
-    flex-flow: row nowrap;
-    margin: 0;
-    cursor: pointer;
-    overflow: var(--x-string-overflow-dropdown-toggle-default);
-    box-shadow: var(--x-string-box-shadow-dropdown-default); }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__toggle {
-        gap: 0; }
-        .x-dropdown__toggle > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
-      margin-left: auto; }
-    [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
-      margin-right: auto; }
-  .x-dropdown__toggle-selected-value {
-    color: var(--x-color-text-dropdown-toggle-default-selected); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-left-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
-  .x-dropdown__items-list {
-    background: var(--x-color-background-dropdown-default);
-    box-sizing: border-box;
-    min-width: var(--x-size-min-width-dropdown-list-default);
-    position: absolute;
-    top: calc(100% + var(--x-size-gap-dropdown-default));
-    overflow: var(--x-string-overflow-dropdown-list-default);
-    border-color: var(--x-color-border-dropdown-list-default);
-    border-top-width: var(--x-size-border-width-top-dropdown-list-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    border-style: solid;
-    margin: 0;
-    padding: 0;
-    box-shadow: var(--x-string-box-shadow-dropdown-default);
-    z-index: 1; }
-    .x-dropdown__items-list:before, .x-dropdown__items-list:after {
-      content: '';
-      display: block;
-      height: var(--x-size-padding-vertical-dropdown-list-default); }
-  [dir="ltr"] .x-dropdown__item {
-    padding-left: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-    padding-right: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="ltr"] .x-dropdown__item {
-    padding-right: var(--x-size-padding-right-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-    padding-left: var(--x-size-padding-right-dropdown-item-default); }
+    gap: 0;
+  }
+  .x-dropdown__toggle > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown__toggle-selected-value {
+  color: var(--x-color-text-dropdown-toggle-default-selected);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+.x-dropdown__items-list {
+  background: var(--x-color-background-dropdown-default);
+  box-sizing: border-box;
+  min-width: var(--x-size-min-width-dropdown-list-default);
+  position: absolute;
+  top: calc(100% + var(--x-size-gap-dropdown-default));
+  overflow: var(--x-string-overflow-dropdown-list-default);
+  border-color: var(--x-color-border-dropdown-list-default);
+  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  border-style: solid;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+  z-index: 1;
+}
+.x-dropdown__items-list:before, .x-dropdown__items-list:after {
+  content: "";
+  display: block;
+  height: var(--x-size-padding-vertical-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-right-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-right-dropdown-item-default);
+}
+.x-dropdown__item {
+  background: var(--x-color-background-dropdown-default);
+  padding-top: var(--x-size-padding-top-dropdown-item-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__item {
-    background: var(--x-color-background-dropdown-default);
-    padding-top: var(--x-size-padding-top-dropdown-item-default);
-    padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    border: none;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    text-align: left;
-    width: 100%;
-    margin: 0;
-    white-space: nowrap;
-    cursor: pointer; }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__item {
-        gap: 0; }
-        .x-dropdown__item > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-      color: var(--x-color-text-dropdown-item-default-hover);
-      background-color: var(--x-color-background-dropdown-item-default-hover);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
-    .x-dropdown__item--is-selected {
-      color: var(--x-color-text-dropdown-item-default-selected);
-      background-color: var(--x-color-background-dropdown-item-default-selected);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
-    [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
-      margin-left: auto; }
-    [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
-      margin-right: auto; }
-  .x-dropdown--is-open {
-    --x-color-background-dropdown-toggle-default: var(
-      --x-color-background-dropdown-toggle-open-default
-    ); }
-  [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
-    right: 0; }
-  [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
-    left: 0; }
-
+    gap: 0;
+  }
+  .x-dropdown__item > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
+  color: var(--x-color-text-dropdown-item-default-hover);
+  background-color: var(--x-color-background-dropdown-item-default-hover);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+}
+.x-dropdown__item--is-selected {
+  color: var(--x-color-text-dropdown-item-default-selected);
+  background-color: var(--x-color-background-dropdown-item-default-selected);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+}
+[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown--is-open {
+  --x-color-background-dropdown-toggle-default: var(
+    --x-color-background-dropdown-toggle-open-default
+  );
+}
+[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+  right: 0;
+}
+[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
+  left: 0;
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -418,8 +478,8 @@
   --x-size-gap-dropdown-item-default: var(--x-size-base-03);
   --x-string-box-shadow-dropdown-default: none;
   --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden; }
-
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -451,17 +511,25 @@
   --x-font-family-facet-default: var(--x-font-family-title3);
   --x-size-font-facet-default: var(--x-size-font-title3);
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3); }
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-facet {
-  border-right-width: var(--x-size-border-width-right-facet-default); }
+  border-right-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-left-width: var(--x-size-border-width-right-facet-default); }
+  border-left-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="ltr"] .x-facet {
-  border-left-width: var(--x-size-border-width-left-facet-default); }
+  border-left-width: var(--x-size-border-width-left-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-right-width: var(--x-size-border-width-left-facet-default); }
+  border-right-width: var(--x-size-border-width-left-facet-default);
+}
+
 .x-facet {
   display: flex;
   flex-flow: column nowrap;
@@ -472,57 +540,73 @@
   border-style: solid;
   border-top-width: var(--x-size-border-width-top-facet-default);
   border-bottom-width: var(--x-size-border-width-bottom-facet-default);
-  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    text-align: left; }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    text-align: right; }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    padding-left: var(--x-size-padding-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    padding-right: var(--x-size-padding-left-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    padding-right: var(--x-size-padding-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    padding-left: var(--x-size-padding-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-left-facet-header-default); }
+  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  text-align: left;
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  text-align: right;
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-left: var(--x-size-padding-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-right: var(--x-size-padding-left-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-right: var(--x-size-padding-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-left: var(--x-size-padding-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-left-facet-header-default);
+}
+.x-facet > *:first-child, .x-facet__header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: stretch;
+  align-items: flex-start;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-facet-header-default);
+  border-color: var(--x-color-border-facet-header-default);
+  color: var(--x-color-text-facet-default);
+  gap: var(--x-size-gap-facet-header-default);
+  padding-top: var(--x-size-padding-top-facet-header-default);
+  padding-bottom: var(--x-size-padding-bottom-facet-header-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-facet-header-default);
+  border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
+  font-family: var(--x-font-family-facet-default);
+  font-size: var(--x-size-font-facet-default);
+  font-weight: var(--x-number-font-weight-facet-default);
+  line-height: var(--x-size-line-height-facet-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-facet > *:first-child, .x-facet__header {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: stretch;
-    align-items: flex-start;
-    box-sizing: border-box;
-    background-color: var(--x-color-background-facet-header-default);
-    border-color: var(--x-color-border-facet-header-default);
-    color: var(--x-color-text-facet-default);
-    gap: var(--x-size-gap-facet-header-default);
-    padding-top: var(--x-size-padding-top-facet-header-default);
-    padding-bottom: var(--x-size-padding-bottom-facet-header-default);
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-facet-header-default);
-    border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
-    font-family: var(--x-font-family-facet-default);
-    font-size: var(--x-size-font-facet-default);
-    font-weight: var(--x-number-font-weight-facet-default);
-    line-height: var(--x-size-line-height-facet-default); }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-facet > *:first-child, .x-facet__header {
-        gap: 0; }
-        .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
-          margin-right: var(--x-size-gap-facet-header-default); } }
-    .x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
-      --x-size-height-icon: var(--x-size-line-height-facet-default);
-      --x-size-width-icon: var(--x-size-line-height-facet-default); }
-      .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
-        margin-left: auto; }
-
+    gap: 0;
+  }
+  .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
+    margin-right: var(--x-size-gap-facet-header-default);
+  }
+}
+.x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
+  --x-size-height-icon: var(--x-size-line-height-facet-default);
+  --x-size-width-icon: var(--x-size-line-height-facet-default);
+}
+.x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
+  margin-left: auto;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -554,8 +638,8 @@
   --x-font-family-facet-default: var(--x-font-family-title3);
   --x-size-font-facet-default: var(--x-size-font-title3);
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3); }
-
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -584,25 +668,41 @@
   --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
   --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
   --x-number-font-weight-filter-count-default-selected: var(--x-number-font-weight-filter-count-default);
-  --x-size-line-height-filter-default: var(--x-size-line-height-text); }
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-filter {
-  padding-left: var(--x-size-padding-left-filter-default); }
+  padding-left: var(--x-size-padding-left-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  padding-right: var(--x-size-padding-left-filter-default); }
+  padding-right: var(--x-size-padding-left-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-  padding-right: var(--x-size-padding-right-filter-default); }
+  padding-right: var(--x-size-padding-right-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  padding-left: var(--x-size-padding-right-filter-default); }
+  padding-left: var(--x-size-padding-right-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-  border-right-width: var(--x-size-border-width-right-filter-default); }
+  border-right-width: var(--x-size-border-width-right-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  border-left-width: var(--x-size-border-width-right-filter-default); }
+  border-left-width: var(--x-size-border-width-right-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-  border-left-width: var(--x-size-border-width-left-filter-default); }
+  border-left-width: var(--x-size-border-width-left-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  border-right-width: var(--x-size-border-width-left-filter-default); }
+  border-right-width: var(--x-size-border-width-left-filter-default);
+}
+
 .x-filter {
   display: inline-flex;
   justify-content: flex-start;
@@ -623,27 +723,34 @@
   font-size: var(--x-size-font-filter-default);
   font-weight: var(--x-number-font-weight-filter-default);
   line-height: var(--x-size-line-height-filter-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-filter {
-      gap: 0; }
-      .x-filter > *:not(:last-child) {
-        margin-right: var(--x-size-gap-filter-default); } }
-  .x-filter > * {
-    flex: 0 0 auto; }
-  .x-filter__label {
-    flex: 0 1 auto; }
-  .x-filter__count {
-    font-weight: var(--x-number-font-weight-filter-count-default); }
-  .x-filter--is-selected {
-    --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-    --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-    --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-    --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-    --x-number-font-weight-filter-count-default: var(
-      --x-number-font-weight-filter-count-default-selected
-    ); }
-
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-filter {
+    gap: 0;
+  }
+  .x-filter > *:not(:last-child) {
+    margin-right: var(--x-size-gap-filter-default);
+  }
+}
+.x-filter > * {
+  flex: 0 0 auto;
+}
+.x-filter__label {
+  flex: 0 1 auto;
+}
+.x-filter__count {
+  font-weight: var(--x-number-font-weight-filter-count-default);
+}
+.x-filter--is-selected {
+  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
+  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
+  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
+  --x-number-font-weight-filter-count-default: var(
+    --x-number-font-weight-filter-count-default-selected
+  );
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -672,12 +779,13 @@
   --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
   --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
   --x-number-font-weight-filter-count-default-selected: var(--x-number-font-weight-filter-count-default);
-  --x-size-line-height-filter-default: var(--x-size-line-height-text); }
-
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px; }
+  --x-size-min-width-grid-item: 150px;
+}
 
 .x-grid {
   margin: 0;
@@ -687,20 +795,23 @@
   align-items: stretch;
   list-style: none;
   padding: var(--x-size-padding-grid);
-  gap: var(--x-size-gap-grid); }
-  .x-grid__item {
-    display: flex;
-    flex-flow: column nowrap; }
-    .x-grid__item > * {
-      flex-grow: 1; }
-  .x-grid--cols-auto .x-grid__item {
-    min-width: var(--x-size-min-width-grid-item); }
-
+  gap: var(--x-size-gap-grid);
+}
+.x-grid__item {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.x-grid__item > * {
+  flex-grow: 1;
+}
+.x-grid--cols-auto .x-grid__item {
+  min-width: var(--x-size-min-width-grid-item);
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px; }
-
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -708,7 +819,8 @@
   --x-size-height-icon-default: var(--x-size-height-icon-m);
   --x-string-stroke-linecap-icon-default: butt;
   --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px; }
+  --x-size-stroke-width-icon-default: 1px;
+}
 
 .x-icon {
   stroke: var(--x-color-stroke-icon-default);
@@ -724,8 +836,8 @@
   font-size: var(--x-size-height-icon-default);
   stroke-linecap: var(--x-string-stroke-linecap-icon-default);
   stroke-linejoin: var(--x-string-stroke-linejoin-icon-default);
-  stroke-width: var(--x-size-stroke-width-icon-default); }
-
+  stroke-width: var(--x-size-stroke-width-icon-default);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -733,8 +845,8 @@
   --x-size-height-icon-default: var(--x-size-height-icon-m);
   --x-string-stroke-linecap-icon-default: butt;
   --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px; }
-
+  --x-size-stroke-width-icon-default: 1px;
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -776,17 +888,25 @@
   --x-number-font-weight-input-group-placeholder-default: var(
     --x-number-font-weight-input-group-default
   );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light); }
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-input-group {
-  border-right-width: var(--x-size-border-width-right-input-group-default); }
+  border-right-width: var(--x-size-border-width-right-input-group-default);
+}
+
 [dir="rtl"] .x-input-group {
-  border-left-width: var(--x-size-border-width-right-input-group-default); }
+  border-left-width: var(--x-size-border-width-right-input-group-default);
+}
+
 [dir="ltr"] .x-input-group {
-  border-left-width: var(--x-size-border-width-left-input-group-default); }
+  border-left-width: var(--x-size-border-width-left-input-group-default);
+}
+
 [dir="rtl"] .x-input-group {
-  border-right-width: var(--x-size-border-width-left-input-group-default); }
+  border-right-width: var(--x-size-border-width-left-input-group-default);
+}
+
 .x-input-group {
   display: flex;
   flex-flow: row nowrap;
@@ -802,81 +922,108 @@
   border-top-width: var(--x-size-border-width-top-input-group-default);
   border-bottom-width: var(--x-size-border-width-bottom-input-group-default);
   border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
-  border-style: solid; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-input-group {
-      gap: 0; }
-      .x-input-group > *:not(:last-child) {
-        margin-right: var(--x-size-gap-input-group-default); } }
-  .x-input-group:focus-within {
-    border-color: var(--x-color-border-input-group-default-focus); }
-  .x-input-group > *,
-  .x-input-group > .x-input,
-  .x-input-group > .x-button {
-    flex: 0 0 auto;
-    font-family: var(--x-font-family-input-group-default);
-    font-size: var(--x-size-font-input-group-default);
-    font-weight: var(--x-number-font-weight-input-group-default);
-    line-height: var(--x-size-line-height-input-group-default); }
-  [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-    padding-left: 0; }
-  [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-    padding-right: 0; }
-  [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-    padding-right: 0; }
-  [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-    padding-left: 0; }
-  .x-input-group > *:not(.x-input-group__action) {
-    background-color: transparent;
-    color: var(--x-color-text-input-group-default);
-    border: none; }
-    [dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
-      padding-left: var(--x-size-padding-left-input-group-default); }
-    [dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
-      padding-right: var(--x-size-padding-left-input-group-default); }
-    [dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
-      padding-right: var(--x-size-padding-right-input-group-default); }
-    [dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
-      padding-left: var(--x-size-padding-right-input-group-default); }
-  .x-input-group > .x-input {
-    flex: 1 1 100%;
-    min-width: 0;
-    border: none; }
-    .x-input-group > .x-input::placeholder {
-      color: var(--x-color-text-input-group-placeholder-default);
-      font-family: var(--x-font-family-input-group-placeholder-default);
-      font-size: var(--x-size-font-input-group-placeholder-default);
-      font-weight: var(--x-number-font-weight-input-group-placeholder-default);
-      line-height: var(--x-size-line-height-input-group-placeholder-default); }
-  .x-input-group > .x-button {
-    height: var(--x-size-height-input-group-default);
-    min-height: var(--x-size-height-input-group-default);
-    margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
-    margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1); }
-  .x-input-group > .x-button:not(.x-input-group__action) {
-    font-weight: var(--x-number-font-weight-input-group-default-button); }
-    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-      margin-right: 0; }
-    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-      margin-left: 0; }
-    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-      margin-left: 0; }
-    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-      margin-right: 0; }
-  .x-input-group > .x-input-group__action {
-    box-sizing: border-box;
-    padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
-    min-width: var(--x-size-height-input-group-default);
-    border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default); }
-    [dir="ltr"] .x-input-group > .x-input-group__action:first-child {
-      margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1); }
-    [dir="rtl"] .x-input-group > .x-input-group__action:first-child {
-      margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1); }
-    [dir="ltr"] .x-input-group > .x-input-group__action:last-child {
-      margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1); }
-    [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
-      margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1); }
-
+  border-style: solid;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-input-group {
+    gap: 0;
+  }
+  .x-input-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-input-group-default);
+  }
+}
+.x-input-group:focus-within {
+  border-color: var(--x-color-border-input-group-default-focus);
+}
+.x-input-group > *,
+.x-input-group > .x-input,
+.x-input-group > .x-button {
+  flex: 0 0 auto;
+  font-family: var(--x-font-family-input-group-default);
+  font-size: var(--x-size-font-input-group-default);
+  font-weight: var(--x-number-font-weight-input-group-default);
+  line-height: var(--x-size-line-height-input-group-default);
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
+}
+.x-input-group > *:not(.x-input-group__action) {
+  background-color: transparent;
+  color: var(--x-color-text-input-group-default);
+  border: none;
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-left: var(--x-size-padding-left-input-group-default);
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-right: var(--x-size-padding-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-right: var(--x-size-padding-right-input-group-default);
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-left: var(--x-size-padding-right-input-group-default);
+}
+.x-input-group > .x-input {
+  flex: 1 1 100%;
+  min-width: 0;
+  border: none;
+}
+.x-input-group > .x-input::placeholder {
+  color: var(--x-color-text-input-group-placeholder-default);
+  font-family: var(--x-font-family-input-group-placeholder-default);
+  font-size: var(--x-size-font-input-group-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-group-placeholder-default);
+  line-height: var(--x-size-line-height-input-group-placeholder-default);
+}
+.x-input-group > .x-button {
+  height: var(--x-size-height-input-group-default);
+  min-height: var(--x-size-height-input-group-default);
+  margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
+}
+.x-input-group > .x-button:not(.x-input-group__action) {
+  font-weight: var(--x-number-font-weight-input-group-default-button);
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-right: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-left: 0;
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-left: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-right: 0;
+}
+.x-input-group > .x-input-group__action {
+  box-sizing: border-box;
+  padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
+  min-width: var(--x-size-height-input-group-default);
+  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -918,8 +1065,8 @@
   --x-number-font-weight-input-group-placeholder-default: var(
     --x-number-font-weight-input-group-default
   );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light); }
-
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -946,25 +1093,41 @@
   --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
   --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
   --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default); }
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-input {
-  padding-left: var(--x-size-padding-left-input-default); }
+  padding-left: var(--x-size-padding-left-input-default);
+}
+
 [dir="rtl"] .x-input {
-  padding-right: var(--x-size-padding-left-input-default); }
+  padding-right: var(--x-size-padding-left-input-default);
+}
+
 [dir="ltr"] .x-input {
-  padding-right: var(--x-size-padding-right-input-default); }
+  padding-right: var(--x-size-padding-right-input-default);
+}
+
 [dir="rtl"] .x-input {
-  padding-left: var(--x-size-padding-right-input-default); }
+  padding-left: var(--x-size-padding-right-input-default);
+}
+
 [dir="ltr"] .x-input {
-  border-right-width: var(--x-size-border-width-right-input-default); }
+  border-right-width: var(--x-size-border-width-right-input-default);
+}
+
 [dir="rtl"] .x-input {
-  border-left-width: var(--x-size-border-width-right-input-default); }
+  border-left-width: var(--x-size-border-width-right-input-default);
+}
+
 [dir="ltr"] .x-input {
-  border-left-width: var(--x-size-border-width-left-input-default); }
+  border-left-width: var(--x-size-border-width-left-input-default);
+}
+
 [dir="rtl"] .x-input {
-  border-right-width: var(--x-size-border-width-left-input-default); }
+  border-right-width: var(--x-size-border-width-left-input-default);
+}
+
 .x-input {
   box-sizing: border-box;
   margin: 0;
@@ -982,19 +1145,23 @@
   font-family: var(--x-font-family-input-default);
   font-size: var(--x-size-font-input-default);
   font-weight: var(--x-number-font-weight-input-default);
-  line-height: var(--x-size-line-height-input-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-input {
-      -webkit-appearance: none; } }
-  .x-input:focus {
-    border-color: var(--x-color-border-input-default-focus); }
-  .x-input::placeholder {
-    color: var(--x-color-text-input-placeholder-default);
-    font-family: var(--x-font-family-input-placeholder-default);
-    font-size: var(--x-size-font-input-placeholder-default);
-    font-weight: var(--x-number-font-weight-input-placeholder-default);
-    line-height: var(--x-size-line-height-input-placeholder-default); }
-
+  line-height: var(--x-size-line-height-input-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-input {
+    -webkit-appearance: none;
+  }
+}
+.x-input:focus {
+  border-color: var(--x-color-border-input-default-focus);
+}
+.x-input::placeholder {
+  color: var(--x-color-text-input-placeholder-default);
+  font-family: var(--x-font-family-input-placeholder-default);
+  font-size: var(--x-size-font-input-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-placeholder-default);
+  line-height: var(--x-size-line-height-input-placeholder-default);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -1021,17 +1188,17 @@
   --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
   --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
   --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default); }
-
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 :root {
   --x-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
   --x-size-gap-list: 0;
   --x-size-justify-list: stretch;
   --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch; }
+  --x-size-align-list-stretch: stretch;
+}
 
-@use 'sass:string';
 .x-list {
   display: flex;
   flex-flow: var(--x-string-flow-list);
@@ -1041,125 +1208,148 @@
   padding: var(--x-size-padding-list);
   justify-content: var(--x-size-justify-list);
   align-items: var(--x-size-align-list);
-  min-width: 0; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
-      gap: 0; }
-      .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-        margin-bottom: var(--x-size-gap-list); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list.x-list--horizontal {
-      gap: 0; }
-      .x-list.x-list--horizontal > *:not(:last-child) {
-        margin-right: var(--x-size-gap-list); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
-      gap: 0; }
-      .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-        margin-right: var(--x-size-gap-list);
-        margin-bottom: var(--x-size-gap-list); } }
+  min-width: 0;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
+  }
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+  }
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
+    gap: 0;
+  }
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
+  }
+}
 
 .x-list--vertical.x-list {
-  flex-flow: column nowrap; }
+  flex-flow: column nowrap;
+}
 
 .x-list--horizontal.x-list {
-  flex-flow: row nowrap; }
+  flex-flow: row nowrap;
+}
 
 .x-list--wrap.x-list {
-  flex-flow: row wrap; }
+  flex-flow: row wrap;
+}
 
 .x-list--wrap-reverse.x-list {
-  flex-flow: row wrap-reverse; }
+  flex-flow: row wrap-reverse;
+}
 
 .x-list--justify-stretch.x-list {
-  justify-content: stretch; }
+  justify-content: stretch;
+}
 
 .x-list--justify-center.x-list {
-  justify-content: center; }
+  justify-content: center;
+}
 
 .x-list--justify-end.x-list {
-  justify-content: flex-end; }
+  justify-content: flex-end;
+}
 
 .x-list--justify-start.x-list {
-  justify-content: flex-start; }
+  justify-content: flex-start;
+}
 
 .x-list--align-stretch.x-list {
-  align-items: stretch; }
+  align-items: stretch;
+}
 
 .x-list--align-center.x-list {
-  align-items: center; }
+  align-items: center;
+}
 
 .x-list--align-baseline.x-list {
-  align-items: baseline; }
+  align-items: baseline;
+}
 
 .x-list--align-end.x-list {
-  align-items: flex-end; }
+  align-items: flex-end;
+}
 
 .x-list--align-start.x-list {
-  align-items: flex-start; }
+  align-items: flex-start;
+}
 
 .x-list > .x-list__item--expand {
-  flex: 1 1 auto; }
-
+  flex: 1 1 auto;
+}
 .x-list > .x-list__item--no-expand {
-  flex: 0 0 auto; }
-
+  flex: 0 0 auto;
+}
 .x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0; }
-
+  min-width: 0;
+}
 .x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0; }
-
+  min-height: 0;
+}
 .x-list > .x-list__item--stretch {
-  align-self: stretch; }
-
+  align-self: stretch;
+}
 .x-list > .x-list__item--flex-none {
-  flex: none; }
-
+  flex: none;
+}
 .x-list > .x-list__item--01 {
-  flex: 1 12 auto; }
-
+  flex: 1 12 auto;
+}
 .x-list > .x-list__item--02 {
-  flex: 2 11 auto; }
-
+  flex: 2 11 auto;
+}
 .x-list > .x-list__item--03 {
-  flex: 3 10 auto; }
-
+  flex: 3 10 auto;
+}
 .x-list > .x-list__item--04 {
-  flex: 4 9 auto; }
-
+  flex: 4 9 auto;
+}
 .x-list > .x-list__item--05 {
-  flex: 5 8 auto; }
-
+  flex: 5 8 auto;
+}
 .x-list > .x-list__item--06 {
-  flex: 6 7 auto; }
-
+  flex: 6 7 auto;
+}
 .x-list > .x-list__item--07 {
-  flex: 7 6 auto; }
-
+  flex: 7 6 auto;
+}
 .x-list > .x-list__item--08 {
-  flex: 8 5 auto; }
-
+  flex: 8 5 auto;
+}
 .x-list > .x-list__item--09 {
-  flex: 9 4 auto; }
-
+  flex: 9 4 auto;
+}
 .x-list > .x-list__item--10 {
-  flex: 10 3 auto; }
-
+  flex: 10 3 auto;
+}
 .x-list > .x-list__item--11 {
-  flex: 11 2 auto; }
-
+  flex: 11 2 auto;
+}
 .x-list > .x-list__item--12 {
-  flex: 12 1 auto; }
-
+  flex: 12 1 auto;
+}
 :root {
   --x-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
   --x-size-gap-list: 0;
   --x-size-justify-list: stretch;
   --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch; }
-
+  --x-size-align-list-stretch: stretch;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -1179,17 +1369,25 @@
   --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
   --x-font-family-message-default: var(--x-font-family-title3);
   --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3); }
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-message {
-  border-left-width: var(--x-size-border-width-left-message-default); }
+  border-left-width: var(--x-size-border-width-left-message-default);
+}
+
 [dir="rtl"] .x-message {
-  border-right-width: var(--x-size-border-width-left-message-default); }
+  border-right-width: var(--x-size-border-width-left-message-default);
+}
+
 [dir="ltr"] .x-message {
-  border-right-width: var(--x-size-border-width-right-message-default); }
+  border-right-width: var(--x-size-border-width-right-message-default);
+}
+
 [dir="rtl"] .x-message {
-  border-left-width: var(--x-size-border-width-right-message-default); }
+  border-left-width: var(--x-size-border-width-right-message-default);
+}
+
 .x-message {
   display: flex;
   flex-flow: column nowrap;
@@ -1206,18 +1404,23 @@
   border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
   font-family: var(--x-font-family-message-default);
   font-size: var(--x-size-font-message-default);
-  font-weight: var(--x-number-font-weight-message-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-message {
-      gap: 0; }
-      .x-message > *:not(:last-child) {
-        margin-right: var(--x-size-gap-message-default); } }
-  .x-message,
-  .x-message > a {
-    color: var(--x-color-text-message-default); }
-  .x-message > p {
-    margin: 0; }
-
+  font-weight: var(--x-number-font-weight-message-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-message {
+    gap: 0;
+  }
+  .x-message > *:not(:last-child) {
+    margin-right: var(--x-size-gap-message-default);
+  }
+}
+.x-message,
+.x-message > a {
+  color: var(--x-color-text-message-default);
+}
+.x-message > p {
+  margin: 0;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -1237,8 +1440,8 @@
   --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
   --x-font-family-message-default: var(--x-font-family-title3);
   --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3); }
-
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -1317,7 +1520,8 @@
   --x-font-decoration-option-list-button-default-hover: underline;
   --x-size-font-option-list-button-default: var(--x-size-font-text);
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold); }
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 
 .x-option-list {
   display: inline-flex;
@@ -1326,99 +1530,110 @@
   box-sizing: border-box;
   list-style-type: none;
   margin: 0;
-  padding: 0; }
-  [dir="ltr"] .x-option-list__item {
-    border-right-width: var(--x-size-border-width-right-option-list-item-default); }
-  [dir="rtl"] .x-option-list__item {
-    border-left-width: var(--x-size-border-width-right-option-list-item-default); }
-  [dir="ltr"] .x-option-list__item {
-    border-left-width: var(--x-size-border-width-left-option-list-item-default); }
-  [dir="rtl"] .x-option-list__item {
-    border-right-width: var(--x-size-border-width-left-option-list-item-default); }
-  .x-option-list__item {
-    border-top-color: var(--x-color-border-top-option-list-item-default);
-    border-right-color: var(--x-color-border-right-option-list-item-default);
-    border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
-    border-left-color: var(--x-color-border-left-option-list-item-default);
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-option-list-item-default);
-    border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default); }
-    .x-option-list__item.x-option-list__item--is-selected {
-      --x-color-border-option-list-item-default: var(
-        --x-color-border-option-list-item-default-selected
-      );
-      --x-color-border-top-option-list-item-default: var(
-        --x-color-border-top-option-list-item-default-selected
-      );
-      --x-color-border-right-option-list-item-default: var(
-        --x-color-border-right-option-list-item-default-selected
-      );
-      --x-color-border-bottom-option-list-item-default: var(
-        --x-color-border-bottom-option-list-item-default-selected
-      );
-      --x-color-border-left-option-list-item-default: var(
-        --x-color-border-left-option-list-item-default-selected
-      );
-      --x-size-border-width-top-option-list-item-default: var(
-        --x-size-border-width-top-option-list-item-default-selected
-      );
-      --x-size-border-width-right-option-list-item-default: var(
-        --x-size-border-width-right-option-list-item-default-selected
-      );
-      --x-size-border-width-bottom-option-list-item-default: var(
-        --x-size-border-width-bottom-option-list-item-default-selected
-      );
-      --x-size-border-width-left-option-list-item-default: var(
-        --x-size-border-width-left-option-list-item-default-selected
-      ); }
-      .x-option-list__item.x-option-list__item--is-selected .x-button {
-        --x-color-background-button-default: var(
-          --x-color-background-option-list-button-default-selected
-        );
-        --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
-        --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
-        --x-number-font-weight-option-list-button-default: var(
-          --x-number-font-weight-option-list-button-default-selected
-        ); }
-        .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
-          --x-color-background-button-default: var(
-            --x-color-background-option-list-button-default-selected-hover
-          );
-          --x-color-border-button-default: var(
-            --x-color-border-option-list-button-default-selected-hover
-          );
-          --x-color-text-button-default: var(
-            --x-color-text-option-list-button-default-selected-hover
-          ); }
-    .x-option-list__item:last-child {
-      --x-size-border-width-option-list-item-default: 0;
-      --x-size-border-width-top-option-list-item-default: 0;
-      --x-size-border-width-right-option-list-item-default: 0;
-      --x-size-border-width-bottom-option-list-item-default: 0;
-      --x-size-border-width-left-option-list-item-default: 0; }
-    .x-option-list__item .x-button {
-      --x-color-background-button-default: var(--x-color-background-option-list-button-default);
-      --x-color-border-button-default: var(--x-color-border-option-list-button-default);
-      --x-color-text-button-default: var(--x-color-text-option-list-button-default);
-      min-height: auto;
-      --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
-      --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
-      --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
-      --x-size-padding-bottom-button-default: var(
-        --x-size-padding-bottom-option-list-button-default
-      );
-      --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
-      --x-size-font-button-default: var(--x-size-font-option-list-button-default); }
-      .x-option-list__item .x-button:hover {
-        --x-color-background-button-default: var(
-          --x-color-background-option-list-button-default-hover
-        );
-        --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
-        --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
-        -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-                text-decoration: var(--x-font-decoration-option-list-button-default-hover); }
-
+  padding: 0;
+}
+[dir="ltr"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="ltr"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-left-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-left-option-list-item-default);
+}
+.x-option-list__item {
+  border-top-color: var(--x-color-border-top-option-list-item-default);
+  border-right-color: var(--x-color-border-right-option-list-item-default);
+  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+  border-left-color: var(--x-color-border-left-option-list-item-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-option-list-item-default);
+  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
+}
+.x-option-list__item.x-option-list__item--is-selected {
+  --x-color-border-option-list-item-default: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-top-option-list-item-default: var(
+    --x-color-border-top-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-right-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-bottom-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default: var(
+    --x-color-border-left-option-list-item-default-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-default-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-default-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-default-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected-hover
+  );
+  --x-color-border-button-default: var(
+    --x-color-border-option-list-button-default-selected-hover
+  );
+  --x-color-text-button-default: var(
+    --x-color-text-option-list-button-default-selected-hover
+  );
+}
+.x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: 0;
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+}
+.x-option-list__item .x-button {
+  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
+  min-height: auto;
+  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
+  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
+  --x-size-padding-bottom-button-default: var(
+    --x-size-padding-bottom-option-list-button-default
+  );
+  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
+}
+.x-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -1497,8 +1712,8 @@
   --x-font-decoration-option-list-button-default-hover: underline;
   --x-size-font-option-list-button-default: var(--x-size-font-text);
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold); }
-
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -1515,34 +1730,42 @@
   --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
   --x-mix-blend-mode-picture-default: none;
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default); }
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 
 .x-picture {
   display: block;
   overflow: hidden;
   border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
-  background: var(--x-color-background-picture-default); }
-  .x-picture__image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: var(--x-object-fit-picture-default);
-    mix-blend-mode: var(--x-mix-blend-mode-picture-default); }
-    .x-picture__image--fallback {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default); }
-      .x-picture__image--fallback > rect {
-        fill: var(--x-color-fill-picture-fallback-rect-default); }
-      .x-picture__image--fallback > path {
-        fill: var(--x-color-fill-picture-fallback-path-default); }
-    .x-picture__image--placeholder {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default); }
-      .x-picture__image--placeholder > rect {
-        fill: var(--x-color-fill-picture-placeholder-rect-default); }
-      .x-picture__image--placeholder > path {
-        fill: var(--x-color-fill-picture-placeholder-path-default); }
-
+  background: var(--x-color-background-picture-default);
+}
+.x-picture__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--x-object-fit-picture-default);
+  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
+}
+.x-picture__image--fallback {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
+}
+.x-picture__image--fallback > rect {
+  fill: var(--x-color-fill-picture-fallback-rect-default);
+}
+.x-picture__image--fallback > path {
+  fill: var(--x-color-fill-picture-fallback-path-default);
+}
+.x-picture__image--placeholder {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default);
+}
+.x-picture__image--placeholder > rect {
+  fill: var(--x-color-fill-picture-placeholder-rect-default);
+}
+.x-picture__image--placeholder > path {
+  fill: var(--x-color-fill-picture-placeholder-path-default);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -1559,8 +1782,8 @@
   --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
   --x-mix-blend-mode-picture-default: none;
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default); }
-
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-picture-default: var(--x-color-border-result-default);
@@ -1576,7 +1799,8 @@
   --x-size-border-width-result-default: 0;
   --x-size-border-width-result-picture-default: 0;
   --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0; }
+  --x-size-border-width-result-description-default: 0;
+}
 
 .x-result {
   display: grid;
@@ -1589,38 +1813,45 @@
   gap: var(--x-size-gap-result-default);
   border-style: solid;
   border-width: var(--x-size-border-width-result-default);
-  border-radius: var(--x-size-border-radius-result-default); }
-  .x-result > * {
-    min-width: 0; }
-  .x-result__picture {
-    grid-column: result;
-    grid-row: picture;
-    border-color: var(--x-color-border-result-picture-default);
-    padding: var(--x-size-padding-result-picture-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-picture-default); }
-  .x-result__overlay {
-    grid-column: result;
-    grid-row: overlay;
-    z-index: 1;
-    border-color: var(--x-color-border-result-overlay-default);
-    padding: var(--x-size-padding-result-overlay-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-overlay-default);
-    opacity: 0; }
-  .x-result__description {
-    grid-column: result;
-    grid-row: description;
-    border-color: var(--x-color-border-result-description-default);
-    padding: var(--x-size-padding-result-description-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-description-default); }
-  .x-result:hover .x-result__overlay {
-    opacity: 1; }
-  @media (hover: none) {
-    .x-result .x-result__overlay {
-      opacity: 1; } }
-
+  border-radius: var(--x-size-border-radius-result-default);
+}
+.x-result > * {
+  min-width: 0;
+}
+.x-result__picture {
+  grid-column: result;
+  grid-row: picture;
+  border-color: var(--x-color-border-result-picture-default);
+  padding: var(--x-size-padding-result-picture-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-picture-default);
+}
+.x-result__overlay {
+  grid-column: result;
+  grid-row: overlay;
+  z-index: 1;
+  border-color: var(--x-color-border-result-overlay-default);
+  padding: var(--x-size-padding-result-overlay-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-overlay-default);
+  opacity: 0;
+}
+.x-result__description {
+  grid-column: result;
+  grid-row: description;
+  border-color: var(--x-color-border-result-description-default);
+  padding: var(--x-size-padding-result-description-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-description-default);
+}
+.x-result:hover .x-result__overlay {
+  opacity: 1;
+}
+@media (hover: none) {
+  .x-result .x-result__overlay {
+    opacity: 1;
+  }
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-picture-default: var(--x-color-border-result-default);
@@ -1636,15 +1867,16 @@
   --x-size-border-width-result-default: 0;
   --x-size-border-width-result-picture-default: 0;
   --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0; }
-
+  --x-size-border-width-result-description-default: 0;
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
   --x-size-justify-row: stretch;
   --x-size-align-row: center;
   --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0; }
+  --x-size-start-row-item: 0;
+}
 
 .x-row {
   display: grid;
@@ -1654,169 +1886,222 @@
   align-items: var(--x-size-align-row);
   padding: var(--x-size-padding-row);
   gap: var(--x-size-gap-row);
-  margin: 0; }
-  .x-row__item {
-    grid-column-start: var(--x-size-start-row-item);
-    grid-column-end: span var(--x-size-span-row-item);
-    list-style: none; }
-  .x-row__item--span-1 {
-    --x-size-span-row-item: 1; }
-  .x-row__item--span-2 {
-    --x-size-span-row-item: 2; }
-  .x-row__item--span-3 {
-    --x-size-span-row-item: 3; }
-  .x-row__item--span-4 {
-    --x-size-span-row-item: 4; }
-  .x-row__item--span-5 {
-    --x-size-span-row-item: 5; }
-  .x-row__item--span-6 {
-    --x-size-span-row-item: 6; }
-  .x-row__item--span-7 {
-    --x-size-span-row-item: 7; }
-  .x-row__item--span-8 {
-    --x-size-span-row-item: 8; }
-  .x-row__item--span-9 {
-    --x-size-span-row-item: 9; }
-  .x-row__item--span-10 {
-    --x-size-span-row-item: 10; }
-  .x-row__item--span-11 {
-    --x-size-span-row-item: 11; }
-  .x-row__item--span-12 {
-    --x-size-span-row-item: 12; }
-  .x-row__item--start-1 {
-    --x-size-start-row-item: 1; }
-  .x-row__item--start-2 {
-    --x-size-start-row-item: 2; }
-  .x-row__item--start-3 {
-    --x-size-start-row-item: 3; }
-  .x-row__item--start-4 {
-    --x-size-start-row-item: 4; }
-  .x-row__item--start-5 {
-    --x-size-start-row-item: 5; }
-  .x-row__item--start-6 {
-    --x-size-start-row-item: 6; }
-  .x-row__item--start-7 {
-    --x-size-start-row-item: 7; }
-  .x-row__item--start-8 {
-    --x-size-start-row-item: 8; }
-  .x-row__item--start-9 {
-    --x-size-start-row-item: 9; }
-  .x-row__item--start-10 {
-    --x-size-start-row-item: 10; }
-  .x-row__item--start-11 {
-    --x-size-start-row-item: 11; }
-  .x-row__item--start-12 {
-    --x-size-start-row-item: 12; }
+  margin: 0;
+}
+.x-row__item {
+  grid-column-start: var(--x-size-start-row-item);
+  grid-column-end: span var(--x-size-span-row-item);
+  list-style: none;
+}
+.x-row__item--span-1 {
+  --x-size-span-row-item: 1;
+}
+.x-row__item--span-2 {
+  --x-size-span-row-item: 2;
+}
+.x-row__item--span-3 {
+  --x-size-span-row-item: 3;
+}
+.x-row__item--span-4 {
+  --x-size-span-row-item: 4;
+}
+.x-row__item--span-5 {
+  --x-size-span-row-item: 5;
+}
+.x-row__item--span-6 {
+  --x-size-span-row-item: 6;
+}
+.x-row__item--span-7 {
+  --x-size-span-row-item: 7;
+}
+.x-row__item--span-8 {
+  --x-size-span-row-item: 8;
+}
+.x-row__item--span-9 {
+  --x-size-span-row-item: 9;
+}
+.x-row__item--span-10 {
+  --x-size-span-row-item: 10;
+}
+.x-row__item--span-11 {
+  --x-size-span-row-item: 11;
+}
+.x-row__item--span-12 {
+  --x-size-span-row-item: 12;
+}
+.x-row__item--start-1 {
+  --x-size-start-row-item: 1;
+}
+.x-row__item--start-2 {
+  --x-size-start-row-item: 2;
+}
+.x-row__item--start-3 {
+  --x-size-start-row-item: 3;
+}
+.x-row__item--start-4 {
+  --x-size-start-row-item: 4;
+}
+.x-row__item--start-5 {
+  --x-size-start-row-item: 5;
+}
+.x-row__item--start-6 {
+  --x-size-start-row-item: 6;
+}
+.x-row__item--start-7 {
+  --x-size-start-row-item: 7;
+}
+.x-row__item--start-8 {
+  --x-size-start-row-item: 8;
+}
+.x-row__item--start-9 {
+  --x-size-start-row-item: 9;
+}
+.x-row__item--start-10 {
+  --x-size-start-row-item: 10;
+}
+.x-row__item--start-11 {
+  --x-size-start-row-item: 11;
+}
+.x-row__item--start-12 {
+  --x-size-start-row-item: 12;
+}
 
 .x-row--justify-start {
-  --x-size-justify-row: start; }
+  --x-size-justify-row: start;
+}
 
 .x-row--align-start {
-  --x-size-align-row: start; }
+  --x-size-align-row: start;
+}
 
 .x-row--justify-center {
-  --x-size-justify-row: center; }
+  --x-size-justify-row: center;
+}
 
 .x-row--align-center {
-  --x-size-align-row: center; }
+  --x-size-align-row: center;
+}
 
 .x-row--justify-end {
-  --x-size-justify-row: end; }
+  --x-size-justify-row: end;
+}
 
 .x-row--align-end {
-  --x-size-align-row: end; }
+  --x-size-align-row: end;
+}
 
 .x-row--justify-stretch {
-  --x-size-justify-row: stretch; }
+  --x-size-justify-row: stretch;
+}
 
 .x-row--align-stretch {
-  --x-size-align-row: stretch; }
-
+  --x-size-align-row: stretch;
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
   --x-size-justify-row: stretch;
   --x-size-align-row: center;
   --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0; }
-
+  --x-size-start-row-item: 0;
+}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
   --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
   --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 
 .x-scroll {
-  overflow-y: var(--x-string-overflow-scroll); }
-  @media (hover: hover) {
-    .x-scroll {
-      scrollbar-width: auto;
-      scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar); }
-      .x-scroll::-webkit-scrollbar {
-        width: 17px; }
-        .x-scroll::-webkit-scrollbar-track {
-          background: var(--x-color-background-scroll-bar); }
-        .x-scroll::-webkit-scrollbar-thumb {
-          width: 5px;
-          border-radius: 15px;
-          background: var(--x-color-thumb-scroll-bar);
-          background-clip: content-box;
-          border: solid 4px rgba(0, 0, 0, 1e-05); }
-      .x-scroll:hover {
-        --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
-        --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover); } }
-
+  overflow-y: var(--x-string-overflow-scroll);
+}
+@media (hover: hover) {
+  .x-scroll {
+    scrollbar-width: auto;
+    scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar {
+    width: 17px;
+  }
+  .x-scroll::-webkit-scrollbar-track {
+    background: var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar-thumb {
+    width: 5px;
+    border-radius: 15px;
+    background: var(--x-color-thumb-scroll-bar);
+    background-clip: content-box;
+    border: solid 4px rgba(0, 0, 0, 0.00001);
+  }
+  .x-scroll:hover {
+    --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
+    --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
+  }
+}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
   --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
   --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
-
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 .x-sliding-panel {
   z-index: 0;
-  background-color: var(--x-color-background-sliding-panel); }
-  .x-sliding-panel__button.x-button {
-    --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
-    pointer-events: none; }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-    pointer-events: all; }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
-    transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow))); }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
-    transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow))); }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-    opacity: 0; }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
-    opacity: 1;
-    pointer-events: all; }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
-    opacity: 1;
-    pointer-events: all; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
-    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient))); }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
-    -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-            mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
-    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
-    -webkit-mask: none;
-            mask: none; }
-  .x-sliding-panel__scroll > * {
-    flex: 0 0 auto; }
-  .x-sliding-panel__scroll > .x-list {
-    --x-string-flow-list: row nowrap; }
-
+  background-color: var(--x-color-background-sliding-panel);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: none;
+          mask: none;
+}
+.x-sliding-panel__scroll > * {
+  flex: 0 0 auto;
+}
+.x-sliding-panel__scroll > .x-list {
+  --x-string-flow-list: row nowrap;
+}
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02); }
-
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
@@ -1840,25 +2125,41 @@
   --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default); }
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-suggestion-group {
-  padding-left: var(--x-size-padding-left-suggestion-group-default); }
+  padding-left: var(--x-size-padding-left-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-  padding-right: var(--x-size-padding-left-suggestion-group-default); }
+  padding-right: var(--x-size-padding-left-suggestion-group-default);
+}
+
 [dir="ltr"] .x-suggestion-group {
-  padding-right: var(--x-size-padding-right-suggestion-group-default); }
+  padding-right: var(--x-size-padding-right-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-  padding-left: var(--x-size-padding-right-suggestion-group-default); }
+  padding-left: var(--x-size-padding-right-suggestion-group-default);
+}
+
 [dir="ltr"] .x-suggestion-group {
-  border-left-width: var(--x-size-border-width-left-suggestion-group-default); }
+  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-  border-right-width: var(--x-size-border-width-left-suggestion-group-default); }
+  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
 [dir="ltr"] .x-suggestion-group {
-  border-right-width: var(--x-size-border-width-right-suggestion-group-default); }
+  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-  border-left-width: var(--x-size-border-width-right-suggestion-group-default); }
+  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
 .x-suggestion-group {
   display: flex;
   flex-flow: row nowrap;
@@ -1877,25 +2178,30 @@
   border-style: solid;
   border-top-width: var(--x-size-border-width-top-suggestion-group-default);
   border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
-  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-suggestion-group {
-      gap: 0; }
-      .x-suggestion-group > *:not(:last-child) {
-        margin-right: var(--x-size-gap-suggestion-group-default); } }
-  .x-suggestion-group .x-suggestion {
-    padding: 0;
-    flex: 1 1 auto;
-    border: none; }
-  .x-suggestion-group .x-button {
-    --x-color-background-button-default: transparent;
-    --x-color-border-button-default: transparent;
-    --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
-    --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
-    --x-size-padding-right-button-default: 0;
-    --x-size-padding-left-button-default: 0;
-    border: none; }
-
+  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion-group {
+    gap: 0;
+  }
+  .x-suggestion-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-group-default);
+  }
+}
+.x-suggestion-group .x-suggestion {
+  padding: 0;
+  flex: 1 1 auto;
+  border: none;
+}
+.x-suggestion-group .x-button {
+  --x-color-background-button-default: transparent;
+  --x-color-border-button-default: transparent;
+  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
+  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
+  --x-size-padding-right-button-default: 0;
+  --x-size-padding-left-button-default: 0;
+  border: none;
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
@@ -1919,8 +2225,8 @@
   --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default); }
-
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -1960,29 +2266,49 @@
   --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
-  ); }
+  );
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-suggestion {
-  text-align: left; }
+  text-align: left;
+}
+
 [dir="rtl"] .x-suggestion {
-  text-align: right; }
+  text-align: right;
+}
+
 [dir="ltr"] .x-suggestion {
-  padding-left: var(--x-size-padding-left-suggestion-default); }
+  padding-left: var(--x-size-padding-left-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-  padding-right: var(--x-size-padding-left-suggestion-default); }
+  padding-right: var(--x-size-padding-left-suggestion-default);
+}
+
 [dir="ltr"] .x-suggestion {
-  padding-right: var(--x-size-padding-right-suggestion-default); }
+  padding-right: var(--x-size-padding-right-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-  padding-left: var(--x-size-padding-right-suggestion-default); }
+  padding-left: var(--x-size-padding-right-suggestion-default);
+}
+
 [dir="ltr"] .x-suggestion {
-  border-left-width: var(--x-size-border-width-left-suggestion-default); }
+  border-left-width: var(--x-size-border-width-left-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-  border-right-width: var(--x-size-border-width-left-suggestion-default); }
+  border-right-width: var(--x-size-border-width-left-suggestion-default);
+}
+
 [dir="ltr"] .x-suggestion {
-  border-right-width: var(--x-size-border-width-right-suggestion-default); }
+  border-right-width: var(--x-size-border-width-right-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-  border-left-width: var(--x-size-border-width-right-suggestion-default); }
+  border-left-width: var(--x-size-border-width-right-suggestion-default);
+}
+
 .x-suggestion {
   display: flex;
   flex-flow: row nowrap;
@@ -2002,32 +2328,39 @@
   border-style: solid;
   border-top-width: var(--x-size-border-width-top-suggestion-default);
   border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
-  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-suggestion {
-      gap: 0; }
-      .x-suggestion > *:not(:last-child) {
-        margin-right: var(--x-size-gap-suggestion-default); } }
-  .x-suggestion__query {
-    flex: 1 1 auto; }
-  .x-suggestion__matching-part,
-  .x-suggestion .x-identifier-result__matching-part {
-    font-family: var(--x-font-family-suggestion-matching-part-default);
-    font-size: var(--x-size-font-suggestion-matching-part-default);
-    line-height: var(--x-size-line-height-suggestion-matching-part-default);
-    font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
-    color: var(--x-color-text-suggestion-matching-part-default); }
-  .x-suggestion--matching {
-    --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
-    --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
-    --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
-    --x-number-font-weight-suggestion-default: var(
-      --x-number-font-weight-suggestion-default-matching
-    );
-    --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching); }
-  .x-suggestion > .x-identifier-result {
-    flex: none; }
-
+  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion {
+    gap: 0;
+  }
+  .x-suggestion > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-default);
+  }
+}
+.x-suggestion__query {
+  flex: 1 1 auto;
+}
+.x-suggestion__matching-part,
+.x-suggestion .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default);
+  font-size: var(--x-size-font-suggestion-matching-part-default);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
+  color: var(--x-color-text-suggestion-matching-part-default);
+}
+.x-suggestion--matching {
+  --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
+  --x-number-font-weight-suggestion-default: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+  --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
+}
+.x-suggestion > .x-identifier-result {
+  flex: none;
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -2067,8 +2400,8 @@
   --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
-  ); }
-
+  );
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -2113,25 +2446,41 @@
   --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
   --x-number-font-weight-tag-default-curated-selected: var(
     --x-number-font-weight-tag-default-selected
-  ); }
+  );
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-tag {
-  border-left-width: var(--x-size-border-width-left-tag-default); }
+  border-left-width: var(--x-size-border-width-left-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  border-right-width: var(--x-size-border-width-left-tag-default); }
+  border-right-width: var(--x-size-border-width-left-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-  border-right-width: var(--x-size-border-width-right-tag-default); }
+  border-right-width: var(--x-size-border-width-right-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  border-left-width: var(--x-size-border-width-right-tag-default); }
+  border-left-width: var(--x-size-border-width-right-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-  padding-left: var(--x-size-padding-left-tag-default); }
+  padding-left: var(--x-size-padding-left-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  padding-right: var(--x-size-padding-left-tag-default); }
+  padding-right: var(--x-size-padding-left-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-  padding-right: var(--x-size-padding-right-tag-default); }
+  padding-right: var(--x-size-padding-right-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  padding-left: var(--x-size-padding-right-tag-default); }
+  padding-left: var(--x-size-padding-right-tag-default);
+}
+
 .x-tag {
   display: flex;
   align-items: center;
@@ -2152,102 +2501,112 @@
   gap: var(--x-size-gap-tag-default);
   min-height: var(--x-size-height-tag-default);
   min-width: calc(3 * var(--x-size-line-height-tag-default));
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-tag {
-      gap: 0; }
-      .x-tag > *:not(:last-child) {
-        margin-right: var(--x-size-gap-tag-default); } }
-  .x-tag.x-suggestion {
-    --x-color-background-suggestion-default: var(--x-color-background-tag-default);
-    --x-color-text-suggestion-default: var(--x-color-text-tag-default);
-    --x-color-border-suggestion-default: var(--x-color-border-tag-default);
-    --x-size-padding-top-suggestion-default:  0;
-    --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
-    --x-size-padding-bottom-suggestion-default: 0;
-    --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
-    --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
-    --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
-    --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
-    --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
-    --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
-    --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
-    --x-font-family-suggestion-default: var(--x-font-family-tag-default);
-    --x-size-font-suggestion-default: var(--x-size-font-tag-default);
-    --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
-    --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default); }
-  .x-tag.x-suggestion-group {
-    --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
-    --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
-    --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
-    --x-size-padding-top-suggestion-group-default:  0;
-    --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
-    --x-size-padding-bottom-suggestion-group-default: 0;
-    --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
-    --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
-    --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
-    --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
-    --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
-    --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
-    --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
-    --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
-    --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
-    --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
-    --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
-    --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default); }
-  .x-tag.x-filter {
-    --x-color-background-filter-default: transparent;
-    --x-size-border-width-filter-default: 0;
-    --x-color-text-filter-default: var(--x-color-text-tag-default);
-    --x-size-padding-top-filter-default: 0;
-    --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
-    --x-size-padding-bottom-filter-default: 0;
-    --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
-    --x-size-gap-filter-default: var(--x-size-gap-tag-default);
-    --x-font-family-filter-default: var(--x-font-family-tag-default);
-    --x-size-font-filter-default: var(--x-size-font-tag-default);
-    --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
-    --x-size-line-height-filter-default: var(--x-size-line-height-tag-default); }
-  .x-tag.x-tag.x-tag--is-curated {
-    background-color: var(--x-color-background-tag-default-curated);
-    border-color: var(--x-color-border-tag-default-curated);
-    color: var(--x-color-text-tag-default-curated);
-    line-height: var(--x-size-line-height-tag-default-curated);
-    font-family: var(--x-font-family-tag-default-curated);
-    font-size: var(--x-size-font-tag-default-curated);
-    font-weight: var(--x-number-font-weight-tag-default-curated); }
-  .x-tag.x-tag.x-tag--is-selected {
-    background-color: var(--x-color-background-tag-default-selected);
-    border-color: var(--x-color-border-tag-default-selected);
-    color: var(--x-color-text-tag-default-selected);
-    line-height: var(--x-size-line-height-tag-default-selected);
-    font-family: var(--x-font-family-tag-default-selected);
-    font-size: var(--x-size-font-tag-default-selected);
-    font-weight: var(--x-number-font-weight-tag-default-selected); }
-    .x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
-      background-color: var(--x-color-background-tag-default-curated-selected);
-      border-color: var(--x-color-border-tag-default-curated-selected);
-      color: var(--x-color-text-tag-default-curated-selected);
-      line-height: var(--x-size-line-height-tag-default-curated-selected);
-      font-family: var(--x-font-family-tag-default-curated-selected);
-      font-size: var(--x-size-font-tag-default-curated-selected);
-      font-weight: var(--x-number-font-weight-tag-default-curated-selected); }
-    .x-tag.x-tag.x-tag--is-selected.x-filter {
-      --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
-      --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
-      --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
-      --x-number-font-weight-filter-count-default-selected: var(
-        --x-number-font-weight-tag-default-selected
-      );
-      --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected); }
-
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-tag {
+    gap: 0;
+  }
+  .x-tag > *:not(:last-child) {
+    margin-right: var(--x-size-gap-tag-default);
+  }
+}
+.x-tag.x-suggestion {
+  --x-color-background-suggestion-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-default: 0;
+  --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-default: 0;
+  --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-suggestion-group {
+  --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-group-default: 0;
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-group-default: 0;
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-filter {
+  --x-color-background-filter-default: transparent;
+  --x-size-border-width-filter-default: 0;
+  --x-color-text-filter-default: var(--x-color-text-tag-default);
+  --x-size-padding-top-filter-default: 0;
+  --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-filter-default: 0;
+  --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+  --x-font-family-filter-default: var(--x-font-family-tag-default);
+  --x-size-font-filter-default: var(--x-size-font-tag-default);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+  --x-size-line-height-filter-default: var(--x-size-line-height-tag-default);
+}
+.x-tag.x-tag.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated);
+  border-color: var(--x-color-border-tag-default-curated);
+  color: var(--x-color-text-tag-default-curated);
+  line-height: var(--x-size-line-height-tag-default-curated);
+  font-family: var(--x-font-family-tag-default-curated);
+  font-size: var(--x-size-font-tag-default-curated);
+  font-weight: var(--x-number-font-weight-tag-default-curated);
+}
+.x-tag.x-tag.x-tag--is-selected {
+  background-color: var(--x-color-background-tag-default-selected);
+  border-color: var(--x-color-border-tag-default-selected);
+  color: var(--x-color-text-tag-default-selected);
+  line-height: var(--x-size-line-height-tag-default-selected);
+  font-family: var(--x-font-family-tag-default-selected);
+  font-size: var(--x-size-font-tag-default-selected);
+  font-weight: var(--x-number-font-weight-tag-default-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated-selected);
+  border-color: var(--x-color-border-tag-default-curated-selected);
+  color: var(--x-color-text-tag-default-curated-selected);
+  line-height: var(--x-size-line-height-tag-default-curated-selected);
+  font-family: var(--x-font-family-tag-default-curated-selected);
+  font-size: var(--x-size-font-tag-default-curated-selected);
+  font-weight: var(--x-number-font-weight-tag-default-curated-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-filter {
+  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -2292,8 +2651,8 @@
   --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
   --x-number-font-weight-tag-default-curated-selected: var(
     --x-number-font-weight-tag-default-selected
-  ); }
-
+  );
+}
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);
   --x-font-family-text: var(--x-font-family-base);
@@ -2320,7 +2679,8 @@
   --x-size-font-small: var(--x-size-font-base-xs);
   --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
   --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none; }
+  --x-string-text-decoration-small: none;
+}
 
 .x,
 .x-text {
@@ -2331,7 +2691,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration);
           text-decoration: var(--x-string-text-decoration);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title1 {
   font-family: var(--x-font-family-title1);
@@ -2341,7 +2702,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title1);
           text-decoration: var(--x-string-text-decoration-title1);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title2 {
   font-family: var(--x-font-family-title2);
@@ -2351,7 +2713,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title2);
           text-decoration: var(--x-string-text-decoration-title2);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title3 {
   font-family: var(--x-font-family-title3);
@@ -2361,7 +2724,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title3);
           text-decoration: var(--x-string-text-decoration-title3);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-small {
   font-family: var(--x-font-family-small);
@@ -2371,13 +2735,14 @@
   -webkit-text-decoration: var(--x-string-text-decoration-small);
           text-decoration: var(--x-string-text-decoration-small);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap; }
-
+  white-space: nowrap;
+}
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);
   --x-font-family-text: var(--x-font-family-base);
@@ -2404,15 +2769,15 @@
   --x-size-font-small: var(--x-size-font-base-xs);
   --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
   --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none; }
-
+  --x-string-text-decoration-small: none;
+}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px; }
-
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #36515b;
   --x-color-base-auxiliary: #667981;
@@ -2424,8 +2789,8 @@
   --x-color-base-accent: #b90276;
   --x-color-base-enable: #00705c;
   --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent; }
-
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2446,10 +2811,10 @@
   --x-size-base-17: 176px;
   --x-size-base-18: 208px;
   --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
+  --x-size-base-20: 272px;
+}
 :root {
-  --x-font-family-base: 'Montserrat', sans-serif;
+  --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
   --x-size-font-base-s: 14px;
   --x-size-font-base-m: 16px;
@@ -2460,4 +2825,5 @@
   --x-number-font-weight-base-bold: 600;
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px; }
+  --x-size-line-height-base-l: 32px;
+}