@empathyco/x-components 3.0.0-alpha.34 → 3.0.0-alpha.341

package/design-system/deprecated-full-theme.css

@@ -0,0 +1,2022 @@
+: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-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
+}
+: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);
+}
+
+[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-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
+
+.x-button--ghost.x-button,
+.x-button--ghost .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-ghost);
+  --x-color-border-button-default: var(--x-color-border-button-ghost);
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
+
+.x-button--ghost.x-button--ghost-start.x-button,
+.x-button--ghost.x-button--ghost-start .x-button {
+  --x-size-padding-left-button-default: 0;
+}
+
+.x-button--ghost.x-button--ghost-end.x-button,
+.x-button--ghost.x-button--ghost-end .x-button {
+  --x-size-padding-right-button-default: 0;
+}
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
+
+.x-button--pill.x-button,
+.x-button--pill .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-pill
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-pill
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-pill
+  );
+}
+:root {
+  --x-color-background-button-primary: var(--x-color-background-button-default);
+  --x-color-border-button-primary: var(--x-color-border-button-default);
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
+
+.x-button--primary.x-button,
+.x-button--primary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-primary);
+  --x-color-border-button-default: var(--x-color-border-button-primary);
+  --x-color-text-button-default: var(--x-color-text-button-primary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
+}
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
+
+.x-button--round.x-button,
+.x-button--round .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-round
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-round
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-round
+  );
+  min-width: var(--x-size-height-button-default);
+  --x-size-padding-left-button-default: 0;
+  --x-size-padding-right-button-default: 0;
+}
+:root {
+  --x-color-background-button-secondary: transparent;
+  --x-color-border-button-secondary: var(--x-color-border-button-default);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
+
+.x-button--secondary.x-button,
+.x-button--secondary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-secondary);
+  --x-color-border-button-default: var(--x-color-border-button-secondary);
+  --x-color-text-button-default: var(--x-color-text-button-secondary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
+}
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
+
+.x-button--tertiary.x-button,
+.x-button--tertiary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-tertiary);
+  --x-color-border-button-default: var(--x-color-border-button-tertiary);
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}
+: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);
+}
+.x-icon.x-filled {
+  stroke: none;
+  fill: var(--x-color-stroke-icon-default);
+}
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
+
+.x-icon--l {
+  --x-size-width-icon-default: var(--x-size-width-icon-l);
+  --x-size-height-icon-default: var(--x-size-height-icon-l);
+}
+:root {
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
+}
+
+.x-icon--m {
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+}
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
+
+.x-icon--s {
+  --x-size-width-icon-default: var(--x-size-width-icon-s);
+  --x-size-height-icon-default: var(--x-size-height-icon-s);
+}
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
+
+.x-icon--xl {
+  --x-size-width-icon-default: var(--x-size-width-icon-xl);
+  --x-size-height-icon-default: var(--x-size-height-icon-xl);
+}
+:root {
+  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
+
+.x-input-group--card.x-input-group,
+.x-input-group--card .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-card
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-card
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-card
+  );
+}
+.x-input-group--card.x-input-group__action:first-child,
+.x-input-group--card .x-input-group__action:first-child {
+  --x-size-border-radius-top-right-input-group-default: 0;
+  --x-size-border-radius-bottom-right-input-group-default: 0;
+}
+.x-input-group--card.x-input-group__action:last-child,
+.x-input-group--card .x-input-group__action:last-child {
+  --x-size-border-radius-top-left-input-group-default: 0;
+  --x-size-border-radius-bottom-left-input-group-default: 0;
+}
+: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);
+}
+
+[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 > .x-input-placeholder, .x-input-group > .x-input::placeholder {
+  color: var(--x-color-text-input-group-placeholder-default);
+  font-family: var(--x-font-family-input-group-placeholder-default);
+  font-size: var(--x-size-font-input-group-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-group-placeholder-default);
+  line-height: var(--x-size-line-height-input-group-placeholder-default);
+}
+.x-input-group > .x-button {
+  height: var(--x-size-height-input-group-default);
+  min-height: var(--x-size-height-input-group-default);
+  margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
+}
+.x-input-group > .x-button:not(.x-input-group__action) {
+  font-weight: var(--x-number-font-weight-input-group-default-button);
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-right: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-left: 0;
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-left: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-right: 0;
+}
+.x-input-group > .x-input-group__action {
+  box-sizing: border-box;
+  padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
+  min-width: var(--x-size-height-input-group-default);
+  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
+
+.x-input-group--line .x-input-group,
+.x-input-group--line.x-input-group {
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
+  --x-size-border-width-right-input-group-default: var(
+    --x-size-border-width-right-input-group-line
+  );
+  --x-size-border-width-bottom-input-group-default: var(
+    --x-size-border-width-bottom-input-group-line
+  );
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
+}
+.x-input-group--line .x-input-group > *:not(.x-input-group__action),
+.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
+  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
+  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(
+      var(--x-size-border-width-inline-input-group-line) * -1
+    ) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(
+      var(--x-size-border-width-inline-input-group-line) * -1
+    ) !important;
+}
+.x-input-group--line .x-input-group > .x-input-group__action,
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
+}
+
+.x-input--card.x-input,
+.x-input--card .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
+  --x-size-border-radius-bottom-right-input-default: var(
+    --x-size-border-radius-bottom-right-input-card
+  );
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
+  );
+}
+: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);
+}
+
+[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 {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  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 > .x-input-placeholder {
+  position: absolute;
+  height: 100%;
+}
+.x-input > .x-input {
+  background: none;
+  border: none;
+  padding: 0;
+  flex: 1 1 auto;
+}
+.x-input > .x-input-placeholder, .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-size-padding-top-input-line: var(--x-size-base-03);
+  --x-size-padding-right-input-line: 0;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
+
+.x-input--line .x-input,
+.x-input--line.x-input {
+  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
+  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
+  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
+  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
+}
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
+
+.x-input--pill.x-input,
+.x-input--pill .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
+}
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
+
+.x-picture--colored.x-picture {
+  --x-color-background-picture-default: var(--x-color-background-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture-image {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture--fallback {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
+}
+.x-picture--colored.x-picture .x-picture--placeholder {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
+}
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
+
+.x-picture--cover.x-picture {
+  position: relative;
+}
+
+.x-result:hover .x-picture--cover:after,
+.x-picture--cover:hover:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
+  width: 100%;
+  height: 100%;
+}
+: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: normal;
+  --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) !important;
+  --x-mix-blend-mode-picture-default: var(
+    --x-mix-blend-mode-picture-fallback-default
+  ) !important;
+}
+.x-picture-image--fallback > rect {
+  fill: var(--x-color-fill-picture-fallback-rect-default) !important;
+}
+.x-picture-image--fallback > path {
+  fill: var(--x-color-fill-picture-fallback-path-default) !important;
+}
+.x-picture-image--placeholder {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default) !important;
+  --x-mix-blend-mode-picture-default: var(
+    --x-mix-blend-mode-picture-placeholder-default
+  ) !important;
+}
+.x-picture-image--placeholder > rect {
+  fill: var(--x-color-fill-picture-placeholder-rect-default) !important;
+}
+.x-picture-image--placeholder > path {
+  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
+}
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
+
+.x-picture--fixed-ratio.x-picture {
+  aspect-ratio: var(--x-number-aspect-ratio-picture);
+  width: 100%;
+}
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
+
+.x-picture--zoom .x-picture-image {
+  transition: transform var(--x-number-zoom-duration-picture) ease-out;
+}
+.x-picture--zoom .x-picture-image:hover {
+  transform: scale(var(--x-number-zoom-scale-picture));
+}
+:root {
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
+
+.x-result__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);
+}
+: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, 0.00001);
+  }
+  .x-scroll:hover {
+    --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
+    --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
+  }
+}
+
+.x-base-scroll {
+  overflow-y: var(--x-string-overflow-scroll, auto);
+}
+.x-sliding-panel {
+  z-index: 0;
+  background-color: var(--x-color-background-sliding-panel);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
+  -webkit-mask: none;
+          mask: none;
+}
+.x-sliding-panel__scroll > * {
+  flex: 0 0 auto;
+}
+.x-sliding-panel__scroll > .x-list {
+  --x-string-flow-list: row nowrap;
+}
+.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
+: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-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-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-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-bottom-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-left-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(
+    --x-size-border-radius-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);
+}
+
+[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);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
+.x-suggestion-group {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-suggestion-group-default);
+  color: var(--x-color-text-suggestion-group-default);
+  border-color: var(--x-color-border-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);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-group-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion-group {
+    gap: 0;
+  }
+  .x-suggestion-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-group-default);
+  }
+}
+.x-suggestion-group .x-suggestion {
+  padding: 0;
+  flex: 1 1 auto;
+  border: none;
+}
+.x-suggestion-group .x-button {
+  --x-color-background-button-default: transparent;
+  --x-color-border-button-default: transparent;
+  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
+  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
+  --x-size-padding-right-button-default: 0;
+  --x-size-padding-left-button-default: 0;
+  border: none;
+}
+:root {
+  --x-string-align-items-suggestion-default: center;
+  --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-text-suggestion-filter-default: var(--x-color-base-neutral-35);
+  --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-text-suggestion-default-matching-curated: var(
+    --x-color-text-suggestion-default-matching
+  );
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
+  --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-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --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
+  );
+  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
+  --x-text-transform-suggestion-filter-default: none;
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(
+    --x-font-family-suggestion-matching-part-default
+  );
+  --x-size-font-suggestion-matching-part-default-curated: var(
+    --x-size-font-suggestion-matching-part-default
+  );
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+    --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+    --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(
+    --x-font-family-suggestion-default-matching
+  );
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+    --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+}
+
+[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);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-right-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-right-suggestion-default);
+}
+
+.x-suggestion {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  align-items: var(--x-string-align-items-suggestion-default);
+  background-color: var(--x-color-background-suggestion-default);
+  color: var(--x-color-text-suggestion-default);
+  border-color: var(--x-color-border-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);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion {
+    gap: 0;
+  }
+  .x-suggestion > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-default);
+  }
+}
+.x-suggestion__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__filter {
+  font-family: var(--x-font-family-suggestion-filter-default);
+  font-size: var(--x-size-font-suggestion-filter-default);
+  line-height: var(--x-size-line-height-suggestion-filter-default);
+  font-weight: var(--x-number-font-weight-suggestion-filter-default);
+  text-transform: var(--x-text-transform-suggestion-filter-default);
+  color: var(--x-color-text-suggestion-filter-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;
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(
+    --x-font-family-suggestion-default-matching-curated
+  );
+  --x-size-font-suggestion-default-curated: var(
+    --x-size-font-suggestion-default-matching-curated
+  );
+  --x-size-line-height-suggestion-default-curated: var(
+    --x-size-line-height-suggestion-default-matching-curated
+  );
+  --x-number-font-weight-suggestion-default-curated: var(
+    --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(
+    --x-color-text-suggestion-default-matching-curated
+  );
+}
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
+
+.x-tag--card.x-tag,
+.x-tag--card .x-tag {
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
+  --x-size-border-radius-bottom-right-tag-default: var(
+    --x-size-border-radius-bottom-right-tag-card
+  );
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
+}
+: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-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --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);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
+
+[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-suggestion {
+  --x-color-background-suggestion-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-default: 0;
+  --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-default: 0;
+  --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(
+    --x-size-border-radius-bottom-right-tag-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-default: var(
+    --x-size-border-radius-bottom-left-tag-default
+  );
+  --x-size-border-radius-top-right-suggestion-default: var(
+    --x-size-border-radius-top-right-tag-default
+  );
+  --x-size-border-radius-top-left-suggestion-default: var(
+    --x-size-border-radius-top-left-tag-default
+  );
+  --x-font-family-suggestion-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-suggestion-group {
+  --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-group-default: 0;
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-group-default: 0;
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(
+    --x-size-border-radius-bottom-right-tag-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(
+    --x-size-border-radius-bottom-left-tag-default
+  );
+  --x-size-border-radius-top-right-suggestion-group-default: var(
+    --x-size-border-radius-top-right-tag-default
+  );
+  --x-size-border-radius-top-left-suggestion-group-default: var(
+    --x-size-border-radius-top-left-tag-default
+  );
+  --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-filter {
+  --x-color-background-filter-default: transparent;
+  --x-size-border-width-filter-default: 0;
+  --x-color-text-filter-default: var(--x-color-text-tag-default);
+  --x-size-padding-top-filter-default: 0;
+  --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-filter-default: 0;
+  --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+  --x-font-family-filter-default: var(--x-font-family-tag-default);
+  --x-size-font-filter-default: var(--x-size-font-tag-default);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+  --x-size-line-height-filter-default: var(--x-size-line-height-tag-default);
+}
+.x-tag.x-tag.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated);
+  border-color: var(--x-color-border-tag-default-curated);
+  color: var(--x-color-text-tag-default-curated);
+  line-height: var(--x-size-line-height-tag-default-curated);
+  font-family: var(--x-font-family-tag-default-curated);
+  font-size: var(--x-size-font-tag-default-curated);
+  font-weight: var(--x-number-font-weight-tag-default-curated);
+}
+.x-tag.x-tag.x-tag--is-selected {
+  background-color: var(--x-color-background-tag-default-selected);
+  border-color: var(--x-color-border-tag-default-selected);
+  color: var(--x-color-text-tag-default-selected);
+  line-height: var(--x-size-line-height-tag-default-selected);
+  font-family: var(--x-font-family-tag-default-selected);
+  font-size: var(--x-size-font-tag-default-selected);
+  font-weight: var(--x-number-font-weight-tag-default-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated-selected);
+  border-color: var(--x-color-border-tag-default-curated-selected);
+  color: var(--x-color-text-tag-default-curated-selected);
+  line-height: var(--x-size-line-height-tag-default-curated-selected);
+  font-family: var(--x-font-family-tag-default-curated-selected);
+  font-size: var(--x-size-font-tag-default-curated-selected);
+  font-weight: var(--x-number-font-weight-tag-default-curated-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-filter {
+  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
+}
+:root {
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
+
+.x-tag--ghost.x-tag,
+.x-tag--ghost .x-tag {
+  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
+  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
+  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
+  --x-color-background-tag-default-curated-selected: var(
+    --x-color-background-tag-curated-selected-ghost
+  );
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-curated-selected-ghost
+  );
+}
+:root {
+  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+}
+
+.x-tag--pill.x-tag,
+.x-tag--pill .x-tag {
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
+  --x-size-border-radius-bottom-right-tag-default: var(
+    --x-size-border-radius-bottom-right-tag-pill
+  );
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
+}
+.x-text--accent {
+  --x-color-text-default: var(--x-color-text-accent);
+}
+:root {
+  --x-color-text-accent: var(--x-color-base-accent);
+}
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
+: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;
+  --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,
+.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;
+}
+.x-text--light.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+}
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
+.x-font-color--lead {
+  color: var(--x-color-base-lead) !important;
+}
+
+.x-font-color--auxiliary {
+  color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-font-color--neutral-10 {
+  color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-font-color--neutral-35 {
+  color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-font-color--neutral-70 {
+  color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-font-color--neutral-95 {
+  color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-font-color--neutral-100 {
+  color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important;
+}
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important;
+}
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important;
+}
+
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important;
+}
+.x-font-size--01 {
+  font-size: var(--x-size-base-01) !important;
+  line-height: 1.5;
+}
+.x-font-size--02 {
+  font-size: var(--x-size-base-02) !important;
+  line-height: 1.5;
+}
+.x-font-size--03 {
+  font-size: var(--x-size-base-03) !important;
+  line-height: 1.5;
+}
+.x-font-size--04 {
+  font-size: var(--x-size-base-04) !important;
+  line-height: 1.5;
+}
+.x-font-size--05 {
+  font-size: var(--x-size-base-05) !important;
+  line-height: 1.5;
+}
+.x-font-size--06 {
+  font-size: var(--x-size-base-06) !important;
+  line-height: 1.5;
+}
+.x-font-size--07 {
+  font-size: var(--x-size-base-07) !important;
+  line-height: 1.5;
+}
+.x-font-size--08 {
+  font-size: var(--x-size-base-08) !important;
+  line-height: 1.5;
+}
+.x-font-size--09 {
+  font-size: var(--x-size-base-09) !important;
+  line-height: 1.5;
+}
+.x-font-size--10 {
+  font-size: var(--x-size-base-10) !important;
+  line-height: 1.5;
+}
+.x-font-size--11 {
+  font-size: var(--x-size-base-11) !important;
+  line-height: 1.5;
+}
+.x-font-size--12 {
+  font-size: var(--x-size-base-12) !important;
+  line-height: 1.5;
+}
+.x-font-size--13 {
+  font-size: var(--x-size-base-13) !important;
+  line-height: 1.5;
+}
+.x-font-size--14 {
+  font-size: var(--x-size-base-14) !important;
+  line-height: 1.5;
+}
+.x-font-size--15 {
+  font-size: var(--x-size-base-15) !important;
+  line-height: 1.5;
+}
+.x-font-size--16 {
+  font-size: var(--x-size-base-16) !important;
+  line-height: 1.5;
+}
+.x-font-size--17 {
+  font-size: var(--x-size-base-17) !important;
+  line-height: 1.5;
+}
+.x-font-size--18 {
+  font-size: var(--x-size-base-18) !important;
+  line-height: 1.5;
+}
+.x-font-size--19 {
+  font-size: var(--x-size-base-19) !important;
+  line-height: 1.5;
+}
+.x-font-size--20 {
+  font-size: var(--x-size-base-20) !important;
+  line-height: 1.5;
+}
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
+}
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
+}
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
+.x-underline {
+  text-decoration-line: underline;
+}
+
+.x-overline {
+  text-decoration-line: overline;
+}
+
+.x-line-through {
+  text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  text-decoration-line: none;
+}
+.x-uppercase {
+  text-transform: uppercase;
+}
+
+.x-lowercase {
+  text-transform: lowercase;
+}
+
+.x-capitalize {
+  text-transform: capitalize;
+}
+
+.x-normal-case {
+  text-transform: none;
+}