@empathyco/x-components 3.0.0-alpha.3 → 3.0.0-alpha.33

package/design-system/default-theme.css

@@ -0,0 +1,2230 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --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); }
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4); }
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4); }
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  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%); }
+
+.x-badge-container {
+  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);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --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); }
+
+:root {
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-button {
+  padding-right: var(--x-size-padding-right-button-default); }
+[dir="rtl"] .x-button {
+  padding-left: var(--x-size-padding-right-button-default); }
+[dir="ltr"] .x-button {
+  padding-left: var(--x-size-padding-left-button-default); }
+[dir="rtl"] .x-button {
+  padding-right: var(--x-size-padding-left-button-default); }
+[dir="ltr"] .x-button {
+  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); }
+[dir="ltr"] .x-button {
+  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); }
+.x-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0;
+  gap: var(--x-size-gap-button-default);
+  min-height: var(--x-size-height-button-default);
+  background-color: var(--x-color-background-button-default);
+  border-color: var(--x-color-border-button-default);
+  color: var(--x-color-text-button-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-button-default);
+  border-bottom-width: var(--x-size-border-width-bottom-button-default);
+  border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
+  font-family: var(--x-font-family-button-default);
+  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); } }
+
+:root {
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --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); }
+
+: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);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --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; }
+
+@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); }
+  .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); }
+  .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; }
+
+: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);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --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; }
+
+:root {
+  --x-color-background-facet-default: transparent;
+  --x-color-border-facet-default: var(--x-color-background-facet-default);
+  --x-color-text-facet-default: var(--x-color-text-default);
+  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
+  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
+  --x-size-border-width-facet-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-facet-header-default
+  );
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-right-facet-header-default: 0;
+  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-left-facet-header-default: 0;
+  --x-size-gap-facet-header-default: var(--x-size-base-03);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-facet {
+  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); }
+[dir="ltr"] .x-facet {
+  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); }
+.x-facet {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-facet-default);
+  border-color: var(--x-color-border-facet-default);
+  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); }
+  .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; }
+
+:root {
+  --x-color-background-facet-default: transparent;
+  --x-color-border-facet-default: var(--x-color-background-facet-default);
+  --x-color-text-facet-default: var(--x-color-text-default);
+  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
+  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
+  --x-size-border-width-facet-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-facet-header-default
+  );
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-right-facet-header-default: 0;
+  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-left-facet-header-default: 0;
+  --x-size-gap-facet-header-default: var(--x-size-base-03);
+  --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); }
+
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-filter {
+  padding-left: var(--x-size-padding-left-filter-default); }
+[dir="rtl"] .x-filter {
+  padding-right: var(--x-size-padding-left-filter-default); }
+[dir="ltr"] .x-filter {
+  padding-right: var(--x-size-padding-right-filter-default); }
+[dir="rtl"] .x-filter {
+  padding-left: var(--x-size-padding-right-filter-default); }
+[dir="ltr"] .x-filter {
+  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); }
+[dir="ltr"] .x-filter {
+  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); }
+.x-filter {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-sizing: border-box;
+  text-align: left;
+  gap: var(--x-size-gap-filter-default);
+  padding-top: var(--x-size-padding-top-filter-default);
+  padding-bottom: var(--x-size-padding-bottom-filter-default);
+  background-color: var(--x-color-background-filter-default);
+  border-color: var(--x-color-border-filter-default);
+  color: var(--x-color-text-filter-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-filter-default);
+  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
+  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
+  font-family: var(--x-font-family-filter-default);
+  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
+    ); }
+
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --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); }
+
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px; }
+
+.x-grid {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
+  grid-auto-flow: dense;
+  list-style: none;
+  padding: var(--x-size-padding-grid);
+  gap: var(--x-size-gap-grid); }
+  .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; }
+
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --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-icon {
+  stroke: var(--x-color-stroke-icon-default);
+  fill: var(--x-color-fill-icon-default);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  line-height: var(--x-size-height-icon-default);
+  width: var(--x-size-width-icon-default);
+  height: var(--x-size-height-icon-default);
+  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); }
+
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --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; }
+
+: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);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-input-group {
+  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); }
+[dir="ltr"] .x-input-group {
+  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); }
+.x-input-group {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  gap: var(--x-size-gap-input-group-default);
+  height: var(--x-size-height-input-group-default);
+  background-color: var(--x-color-background-input-group-default);
+  border-color: var(--x-color-border-input-group-default);
+  color: var(--x-color-text-input-group-default);
+  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: calc(var(--x-size-border-width-input-group-default) * -1); }
+    [dir="ltr"] .x-input-group > .x-button:first-child {
+      margin-right: 0; }
+    [dir="rtl"] .x-input-group > .x-button:first-child {
+      margin-left: 0; }
+    [dir="ltr"] .x-input-group > .x-button:last-child {
+      margin-left: 0; }
+    [dir="rtl"] .x-input-group > .x-button:last-child {
+      margin-right: 0; }
+  .x-input-group > .x-button:not(.x-input-group__action) {
+    font-weight: var(--x-number-font-weight-input-group-default-button); }
+  .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); }
+
+: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);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --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); }
+
+:root {
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-input {
+  padding-left: var(--x-size-padding-left-input-default); }
+[dir="rtl"] .x-input {
+  padding-right: var(--x-size-padding-left-input-default); }
+[dir="ltr"] .x-input {
+  padding-right: var(--x-size-padding-right-input-default); }
+[dir="rtl"] .x-input {
+  padding-left: var(--x-size-padding-right-input-default); }
+[dir="ltr"] .x-input {
+  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); }
+[dir="ltr"] .x-input {
+  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); }
+.x-input {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  height: var(--x-size-height-input-default);
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: var(--x-color-background-input-default);
+  border-color: var(--x-color-border-input-default);
+  color: var(--x-color-text-input-default);
+  border-top-width: var(--x-size-border-width-top-input-default);
+  border-bottom-width: var(--x-size-border-width-bottom-input-default);
+  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
+  border-style: solid;
+  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); }
+
+:root {
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --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); }
+
+: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; }
+
+@use 'sass:string';
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
+  gap: var(--x-size-gap-list);
+  margin: 0;
+  padding: var(--x-size-padding-list);
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  font-family: var(--x-font-family-text);
+  font-size: var(--x-size-font-text);
+  font-weight: var(--x-number-font-weight-text);
+  line-height: var(--x-size-line-height-text);
+  color: var(--x-color-text-default);
+  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; }
+
+.x-list--horizontal.x-list {
+  flex-flow: row nowrap; }
+
+.x-list--wrap.x-list {
+  flex-flow: row wrap; }
+
+.x-list--wrap-reverse.x-list {
+  flex-flow: row wrap-reverse; }
+
+.x-list--justify-stretch.x-list {
+  justify-content: stretch; }
+
+.x-list--justify-center.x-list {
+  justify-content: center; }
+
+.x-list--justify-end.x-list {
+  justify-content: flex-end; }
+
+.x-list--justify-start.x-list {
+  justify-content: flex-start; }
+
+.x-list--align-stretch.x-list {
+  align-items: stretch; }
+
+.x-list--align-center.x-list {
+  align-items: center; }
+
+.x-list--align-baseline.x-list {
+  align-items: baseline; }
+
+.x-list--align-end.x-list {
+  align-items: flex-end; }
+
+.x-list--align-start.x-list {
+  align-items: flex-start; }
+
+.x-list > .x-list__item--expand {
+  flex: 1 1 auto; }
+
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto; }
+
+.x-list.x-list--horizontal > .x-list__item--expand {
+  min-width: 0; }
+
+.x-list:not(.x-list--horizontal) > .x-list__item--expand {
+  min-height: 0; }
+
+.x-list > .x-list__item--stretch {
+  align-self: stretch; }
+
+.x-list > .x-list__item--flex-none {
+  flex: none; }
+
+.x-list > .x-list__item--01 {
+  flex: 1 12 auto; }
+
+.x-list > .x-list__item--02 {
+  flex: 2 11 auto; }
+
+.x-list > .x-list__item--03 {
+  flex: 3 10 auto; }
+
+.x-list > .x-list__item--04 {
+  flex: 4 9 auto; }
+
+.x-list > .x-list__item--05 {
+  flex: 5 8 auto; }
+
+.x-list > .x-list__item--06 {
+  flex: 6 7 auto; }
+
+.x-list > .x-list__item--07 {
+  flex: 7 6 auto; }
+
+.x-list > .x-list__item--08 {
+  flex: 8 5 auto; }
+
+.x-list > .x-list__item--09 {
+  flex: 9 4 auto; }
+
+.x-list > .x-list__item--10 {
+  flex: 10 3 auto; }
+
+.x-list > .x-list__item--11 {
+  flex: 11 2 auto; }
+
+.x-list > .x-list__item--12 {
+  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; }
+
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-message {
+  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); }
+[dir="ltr"] .x-message {
+  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); }
+.x-message {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: var(--x-string-justify-message-default);
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--x-size-gap-message-default);
+  padding: var(--x-size-padding-message-default);
+  background-color: var(--x-color-background-message-default);
+  border-color: var(--x-color-border-message-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-message-default);
+  border-bottom-width: var(--x-size-border-width-bottom-message-default);
+  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; }
+
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --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); }
+
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --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-option-list {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  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-color: var(--x-color-border-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-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-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;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --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); }
+
+:root {
+  --x-size-border-radius-picture-default: 0;
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
+  --x-color-background-picture-default: transparent;
+  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
+  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
+  --x-object-fit-picture-default: contain;
+  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
+  --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-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); }
+
+:root {
+  --x-size-border-radius-picture-default: 0;
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
+  --x-color-background-picture-default: transparent;
+  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
+  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
+  --x-object-fit-picture-default: contain;
+  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
+  --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); }
+
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-picture-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --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-result {
+  display: grid;
+  grid-template-columns: [result-start] 1fr [result-end];
+  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] auto [description-end];
+  box-sizing: border-box;
+  background-color: var(--x-color-background-result-default);
+  border-color: var(--x-color-border-result-default);
+  padding: var(--x-size-padding-result-default);
+  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; } }
+
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-picture-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --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; }
+
+: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-row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 1fr;
+  justify-items: var(--x-size-justify-row);
+  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; }
+
+.x-row--justify-start {
+  --x-size-justify-row: start; }
+
+.x-row--align-start {
+  --x-size-align-row: start; }
+
+.x-row--justify-center {
+  --x-size-justify-row: center; }
+
+.x-row--align-center {
+  --x-size-align-row: center; }
+
+.x-row--justify-end {
+  --x-size-justify-row: end; }
+
+.x-row--align-end {
+  --x-size-align-row: end; }
+
+.x-row--justify-stretch {
+  --x-size-justify-row: stretch; }
+
+.x-row--align-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; }
+
+: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-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); } }
+
+: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-sliding-panel {
+  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); }
+  .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)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
+    position: absolute;
+    z-index: 1;
+    content: '';
+    pointer-events: none;
+    height: 100%;
+    width: var(--x-size-width-sliding-panel-gradient);
+    opacity: 0; }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before {
+    background: linear-gradient(to right, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
+    left: 0; }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
+    background: linear-gradient(to left, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
+    right: 0; }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-start)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-end)::after {
+    opacity: 1; }
+  .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-color-background-sliding-panel-middle: rgba(255, 255, 255, 0.94);
+  --x-color-background-sliding-panel-end: rgba(255, 255, 255, 0);
+  --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); }
+
+: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);
+  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
+  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --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); }
+
+@use 'sass:string';
+[dir="ltr"] .x-suggestion-group {
+  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); }
+[dir="ltr"] .x-suggestion-group {
+  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); }
+.x-suggestion-group {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  box-sizing: border-box;
+  border: none;
+  background-color: var(--x-color-background-suggestion-group-default);
+  color: var(--x-color-text-suggestion-group-default);
+  font-family: var(--x-font-family-suggestion-group-default);
+  font-size: var(--x-size-font-suggestion-group-default);
+  line-height: var(--x-size-line-height-suggestion-group-default);
+  font-weight: var(--x-number-font-weight-suggestion-group-default);
+  cursor: pointer;
+  padding-top: var(--x-size-padding-top-suggestion-group-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
+  gap: var(--x-size-gap-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; }
+  .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);
+  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
+  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --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); }
+
+:root {
+  --x-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-background-suggestion-default: transparent;
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --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; }
+[dir="rtl"] .x-suggestion {
+  text-align: right; }
+[dir="ltr"] .x-suggestion {
+  padding-left: var(--x-size-padding-left-suggestion-default); }
+[dir="rtl"] .x-suggestion {
+  padding-right: var(--x-size-padding-left-suggestion-default); }
+[dir="ltr"] .x-suggestion {
+  padding-right: var(--x-size-padding-right-suggestion-default); }
+[dir="rtl"] .x-suggestion {
+  padding-left: var(--x-size-padding-right-suggestion-default); }
+.x-suggestion {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  box-sizing: border-box;
+  border: none;
+  background-color: var(--x-color-background-suggestion-default);
+  color: var(--x-color-text-suggestion-default);
+  font-family: var(--x-font-family-suggestion-default);
+  font-size: var(--x-size-font-suggestion-default);
+  line-height: var(--x-size-line-height-suggestion-default);
+  font-weight: var(--x-number-font-weight-suggestion-default);
+  cursor: pointer;
+  padding-top: var(--x-size-padding-top-suggestion-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
+  gap: var(--x-size-gap-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-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-background-suggestion-default: transparent;
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --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);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
+
+@use 'sass:string';
+[dir="ltr"] .x-tag {
+  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); }
+[dir="ltr"] .x-tag {
+  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); }
+[dir="ltr"] .x-tag {
+  padding-left: var(--x-size-padding-left-tag-default); }
+[dir="rtl"] .x-tag {
+  padding-right: var(--x-size-padding-left-tag-default); }
+[dir="ltr"] .x-tag {
+  padding-right: var(--x-size-padding-right-tag-default); }
+[dir="rtl"] .x-tag {
+  padding-left: var(--x-size-padding-right-tag-default); }
+.x-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-tag-default);
+  border-bottom-width: var(--x-size-border-width-bottom-tag-default);
+  border-radius: var(--x-size-border-radius-top-left-tag-default) var(--x-size-border-radius-top-right-tag-default) var(--x-size-border-radius-bottom-right-tag-default) var(--x-size-border-radius-bottom-left-tag-default);
+  background-color: var(--x-color-background-tag-default);
+  border-color: var(--x-color-border-tag-default);
+  color: var(--x-color-text-tag-default);
+  line-height: var(--x-size-line-height-tag-default);
+  font-family: var(--x-font-family-tag-default);
+  font-size: var(--x-size-font-tag-default);
+  font-weight: var(--x-number-font-weight-tag-default);
+  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-filter {
+    --x-color-background-filter: transparent;
+    --x-size-border-width-filter: 0;
+    --x-color-text-filter: var(--x-color-text-tag-default);
+    --x-size-padding-filter: 0;
+    --x-size-gap-filter: var(--x-size-gap-tag-default);
+    --x-font-family-filter: var(--x-font-family-tag-default);
+    --x-size-font-filter: var(--x-size-font-tag-default);
+    --x-number-font-weight-filter: var(--x-number-font-weight-tag-default);
+    --x-size-line-height-filter: var(--x-size-line-height-tag-default); }
+  .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-filter {
+      --x-color-text-filter: var(--x-color-text-tag-default-selected);
+      --x-font-family-filter: var(--x-font-family-tag-default-selected);
+      --x-size-font-filter: var(--x-size-font-tag-default-selected);
+      --x-number-font-weight-filter: var(--x-number-font-weight-tag-default-selected);
+      --x-size-line-height-filter: 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);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
+
+:root {
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --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-text {
+  font-family: var(--x-font-family-text);
+  font-size: var(--x-size-font-text);
+  font-weight: var(--x-number-font-weight-text);
+  line-height: var(--x-size-line-height-text);
+  -webkit-text-decoration: var(--x-string-text-decoration);
+          text-decoration: var(--x-string-text-decoration);
+  color: var(--x-color-text-default);
+  margin: 0; }
+
+.x-title1 {
+  font-family: var(--x-font-family-title1);
+  font-size: var(--x-size-font-title1);
+  font-weight: var(--x-number-font-weight-title1);
+  line-height: var(--x-size-line-height-title1);
+  -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; }
+
+.x-title2 {
+  font-family: var(--x-font-family-title2);
+  font-size: var(--x-size-font-title2);
+  font-weight: var(--x-number-font-weight-title2);
+  line-height: var(--x-size-line-height-title2);
+  -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; }
+
+.x-title3 {
+  font-family: var(--x-font-family-title3);
+  font-size: var(--x-size-font-title3);
+  font-weight: var(--x-number-font-weight-title3);
+  line-height: var(--x-size-line-height-title3);
+  -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; }
+
+.x-small {
+  font-family: var(--x-font-family-small);
+  font-size: var(--x-size-font-small);
+  font-weight: var(--x-number-font-weight-small);
+  line-height: var(--x-size-line-height-small);
+  -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; }
+
+.x-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap; }
+
+:root {
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --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; }
+
+: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; }
+
+:root {
+  --x-color-base-lead: #36515b;
+  --x-color-base-auxiliary: #667981;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff; }
+
+/* Update this value if adding more values */
+:root {
+  --x-size-base-01: 2px;
+  --x-size-base-02: 4px;
+  --x-size-base-03: 8px;
+  --x-size-base-04: 12px;
+  --x-size-base-05: 16px;
+  --x-size-base-06: 24px;
+  --x-size-base-07: 32px;
+  --x-size-base-08: 40px;
+  --x-size-base-09: 48px;
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 72px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 112px;
+  --x-size-base-16: 144px;
+  --x-size-base-17: 176px;
+  --x-size-base-18: 208px;
+  --x-size-base-19: 240px;
+  --x-size-base-20: 272px; }
+
+:root {
+  --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;
+  --x-size-font-base-l: 18px;
+  --x-size-font-base-xl: 32px;
+  --x-number-font-weight-base-light: 300;
+  --x-number-font-weight-base-regular: 400;
+  --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; }