@empathyco/x-components 6.0.0-alpha.14 → 6.0.0-alpha.16

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

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -53,6 +52,7 @@
 .x-sticky {
   position: sticky !important;
 }
+
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -1299,6 +1299,71 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
+
+.x-shadow--none {
+  box-shadow: none !important;
+}
+
+.x-shadow--01 {
+  box-shadow: var(--x-string-box-shadow-01) !important;
+}
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
+}
+.x-shadow--02 {
+  box-shadow: var(--x-string-box-shadow-02) !important;
+}
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
+}
+.x-shadow--03 {
+  box-shadow: var(--x-string-box-shadow-03) !important;
+}
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
+}
+.x-shadow--04 {
+  box-shadow: var(--x-string-box-shadow-04) !important;
+}
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
+}
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
+}
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
+}
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
+}
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
+}
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
+}
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+}
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
+}
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+}
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
+}
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+}
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
+}
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1367,71 +1432,6 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
-
-.x-shadow--none {
-  box-shadow: none !important;
-}
-
-.x-shadow--01 {
-  box-shadow: var(--x-string-box-shadow-01) !important;
-}
-.x-shadow--bottom-01 {
-  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
-}
-.x-shadow--02 {
-  box-shadow: var(--x-string-box-shadow-02) !important;
-}
-.x-shadow--bottom-02 {
-  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
-}
-.x-shadow--03 {
-  box-shadow: var(--x-string-box-shadow-03) !important;
-}
-.x-shadow--bottom-03 {
-  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
-}
-.x-shadow--04 {
-  box-shadow: var(--x-string-box-shadow-04) !important;
-}
-.x-shadow--bottom-04 {
-  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
-}
-.x-shadow--05 {
-  box-shadow: var(--x-string-box-shadow-05) !important;
-}
-.x-shadow--bottom-05 {
-  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
-}
-.x-shadow--06 {
-  box-shadow: var(--x-string-box-shadow-06) !important;
-}
-.x-shadow--bottom-06 {
-  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
-}
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
-}
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
-}
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
-}
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
-}
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
-}
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
-}
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
-}
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
-}
 *[class*=x-border-width--] {
   border-width: 0;
 }
@@ -4165,96 +4165,6 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
-: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;
@@ -4388,40 +4298,130 @@
   );
 }
 :root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
-.x-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 {
+  --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
+  );
+}
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
+.x-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 {
   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 {
@@ -4454,44 +4454,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-: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);
-}
 /* @deprecated */
 :root {
   --x-size-padding-row-02: var(--x-size-base-02);
@@ -4806,6 +4768,9 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4879,9 +4844,6 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
 
 .x-result.x-result--card {
   overflow: hidden;
@@ -4965,24 +4927,6 @@
   --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-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;
@@ -5021,6 +4965,24 @@
 .x-picture-image--placeholder > path {
   fill: var(--x-color-fill-picture-placeholder-path-default) !important;
 }
+: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);
+}
 :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);
@@ -5544,15 +5506,6 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5574,6 +5527,15 @@
   --x-size-font-message-default: var(--x-size-font-title3);
   --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -6835,49 +6797,6 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
-: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);
@@ -7012,6 +6931,49 @@
 [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
   margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
+:root {
+  --x-color-background-input-group-default: var(--x-color-background-input-default);
+  --x-color-border-input-group-default: var(--x-color-border-input-default);
+  --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-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);
@@ -7336,6 +7298,11 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+: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;
@@ -7371,11 +7338,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 
 .x-grid-list {
   margin: 0;
@@ -7871,13 +7833,6 @@
 :root {
   --x-size-width-dropdown-s: 74px;
 }
-:root {
-  --x-size-width-dropdown-s: 74px;
-}
-
-.x-dropdown.x-dropdown--s {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
-}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7929,6 +7884,44 @@
     --x-size-border-width-left-dropdown-list-pill
   );
 }
+: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);
+}
 :root {
   --x-size-width-dropdown-m: 130px;
 }
@@ -8417,16 +8410,6 @@
   --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);
 }
-: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 {
@@ -8438,6 +8421,16 @@
   --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-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);
+}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8476,6 +8469,16 @@
   --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);
 }
+: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);
+}
 :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);
@@ -8511,16 +8514,6 @@
   --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);
 }
-: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 {
@@ -8566,11 +8559,6 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-: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 {
@@ -8611,6 +8599,98 @@
   --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-width-dropdown-s: 74px;
+}
+
+.x-dropdown.x-dropdown--s {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
+}
+: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-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);
@@ -8650,16 +8730,6 @@
   --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-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);
@@ -8699,6 +8769,16 @@
 .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-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8742,87 +8822,7 @@
   --x-size-border-width-base: 1px;
 }
 :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);
-  }
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
 }