npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.6 → 6.0.0-alpha.60 - Mend

@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (823) hide show

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

@@ -1,19 +1,4 @@
-.x-uppercase {
-  text-transform: uppercase;
-}
-.x-lowercase {
-  text-transform: lowercase;
-}
-.x-capitalize {
-  text-transform: capitalize;
-}
-.x-normal-case {
-  text-transform: none;
-}
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -52,932 +37,946 @@
 .x-sticky {
   position: sticky !important;
 }
-.x-margin--auto {
-  margin: auto !important;
+.x-padding--00 {
+  padding: 0 !important;
 }
-.x-margin--00 {
-  margin: 0 !important;
+.x-padding--01 {
+  padding: var(--x-size-base-01) !important;
 }
-.x-margin--01 {
-  margin: var(--x-size-base-01) !important;
+.x-padding--02 {
+  padding: var(--x-size-base-02) !important;
 }
-.x-margin--02 {
-  margin: var(--x-size-base-02) !important;
+.x-padding--03 {
+  padding: var(--x-size-base-03) !important;
 }
-.x-margin--03 {
-  margin: var(--x-size-base-03) !important;
+.x-padding--04 {
+  padding: var(--x-size-base-04) !important;
 }
-.x-margin--04 {
-  margin: var(--x-size-base-04) !important;
+.x-padding--05 {
+  padding: var(--x-size-base-05) !important;
 }
-.x-margin--05 {
-  margin: var(--x-size-base-05) !important;
+.x-padding--06 {
+  padding: var(--x-size-base-06) !important;
 }
-.x-margin--06 {
-  margin: var(--x-size-base-06) !important;
+.x-padding--07 {
+  padding: var(--x-size-base-07) !important;
 }
-.x-margin--07 {
-  margin: var(--x-size-base-07) !important;
+.x-padding--08 {
+  padding: var(--x-size-base-08) !important;
 }
-.x-margin--08 {
-  margin: var(--x-size-base-08) !important;
+.x-padding--09 {
+  padding: var(--x-size-base-09) !important;
 }
-.x-margin--09 {
-  margin: var(--x-size-base-09) !important;
+.x-padding--10 {
+  padding: var(--x-size-base-10) !important;
 }
-.x-margin--10 {
-  margin: var(--x-size-base-10) !important;
+.x-padding--11 {
+  padding: var(--x-size-base-11) !important;
 }
-.x-margin--11 {
-  margin: var(--x-size-base-11) !important;
+.x-padding--12 {
+  padding: var(--x-size-base-12) !important;
 }
-.x-margin--12 {
-  margin: var(--x-size-base-12) !important;
+.x-padding--13 {
+  padding: var(--x-size-base-13) !important;
 }
-.x-margin--13 {
-  margin: var(--x-size-base-13) !important;
+.x-padding--14 {
+  padding: var(--x-size-base-14) !important;
 }
-.x-margin--14 {
-  margin: var(--x-size-base-14) !important;
+.x-padding--15 {
+  padding: var(--x-size-base-15) !important;
 }
-.x-margin--15 {
-  margin: var(--x-size-base-15) !important;
+.x-padding--16 {
+  padding: var(--x-size-base-16) !important;
 }
-.x-margin--16 {
-  margin: var(--x-size-base-16) !important;
+.x-padding--17 {
+  padding: var(--x-size-base-17) !important;
 }
-.x-margin--17 {
-  margin: var(--x-size-base-17) !important;
+.x-padding--18 {
+  padding: var(--x-size-base-18) !important;
 }
-.x-margin--18 {
-  margin: var(--x-size-base-18) !important;
+.x-padding--19 {
+  padding: var(--x-size-base-19) !important;
 }
-.x-margin--19 {
-  margin: var(--x-size-base-19) !important;
+.x-padding--20 {
+  padding: var(--x-size-base-20) !important;
 }
-.x-margin--20 {
-  margin: var(--x-size-base-20) !important;
+.x-padding--top-00 {
+  padding-top: 0 !important;
 }
-.x-margin--top-auto {
-  margin-top: auto !important;
+.x-padding--bottom-00 {
+  padding-bottom: 0 !important;
 }
-.x-margin--bottom-auto {
-  margin-bottom: auto !important;
+[dir="ltr"] .x-padding--right-00 {
+  padding-right: 0 !important;
 }
-[dir="ltr"] .x-margin--right-auto {
-  margin-right: auto !important;
+[dir="rtl"] .x-padding--right-00 {
+  padding-left: 0 !important;
 }
-[dir="rtl"] .x-margin--right-auto {
-  margin-left: auto !important;
+[dir="ltr"] .x-padding--left-00 {
+  padding-left: 0 !important;
 }
-[dir="ltr"] .x-margin--left-auto {
-  margin-left: auto !important;
+[dir="rtl"] .x-padding--left-00 {
+  padding-right: 0 !important;
 }
-[dir="rtl"] .x-margin--left-auto {
-  margin-right: auto !important;
+.x-padding--top-01 {
+  padding-top: var(--x-size-base-01) !important;
 }
-.x-margin--top-00 {
-  margin-top: 0 !important;
+.x-padding--bottom-01 {
+  padding-bottom: var(--x-size-base-01) !important;
 }
-.x-margin--bottom-00 {
-  margin-bottom: 0 !important;
+[dir="ltr"] .x-padding--right-01 {
+  padding-right: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--right-00 {
-  margin-right: 0 !important;
+[dir="rtl"] .x-padding--right-01 {
+  padding-left: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-margin--right-00 {
-  margin-left: 0 !important;
+[dir="ltr"] .x-padding--left-01 {
+  padding-left: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--left-00 {
-  margin-left: 0 !important;
+[dir="rtl"] .x-padding--left-01 {
+  padding-right: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-margin--left-00 {
-  margin-right: 0 !important;
+.x-padding--top-02 {
+  padding-top: var(--x-size-base-02) !important;
 }
-.x-margin--top-01 {
-  margin-top: var(--x-size-base-01) !important;
+.x-padding--bottom-02 {
+  padding-bottom: var(--x-size-base-02) !important;
 }
-.x-margin--bottom-01 {
-  margin-bottom: var(--x-size-base-01) !important;
+[dir="ltr"] .x-padding--right-02 {
+  padding-right: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-margin--right-01 {
-  margin-right: var(--x-size-base-01) !important;
+[dir="rtl"] .x-padding--right-02 {
+  padding-left: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--right-01 {
-  margin-left: var(--x-size-base-01) !important;
+[dir="ltr"] .x-padding--left-02 {
+  padding-left: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-margin--left-01 {
-  margin-left: var(--x-size-base-01) !important;
+[dir="rtl"] .x-padding--left-02 {
+  padding-right: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--left-01 {
-  margin-right: var(--x-size-base-01) !important;
+.x-padding--top-03 {
+  padding-top: var(--x-size-base-03) !important;
 }
-.x-margin--top-02 {
-  margin-top: var(--x-size-base-02) !important;
+.x-padding--bottom-03 {
+  padding-bottom: var(--x-size-base-03) !important;
 }
-.x-margin--bottom-02 {
-  margin-bottom: var(--x-size-base-02) !important;
+[dir="ltr"] .x-padding--right-03 {
+  padding-right: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--right-02 {
-  margin-right: var(--x-size-base-02) !important;
+[dir="rtl"] .x-padding--right-03 {
+  padding-left: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-margin--right-02 {
-  margin-left: var(--x-size-base-02) !important;
+[dir="ltr"] .x-padding--left-03 {
+  padding-left: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--left-02 {
-  margin-left: var(--x-size-base-02) !important;
+[dir="rtl"] .x-padding--left-03 {
+  padding-right: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-margin--left-02 {
-  margin-right: var(--x-size-base-02) !important;
+.x-padding--top-04 {
+  padding-top: var(--x-size-base-04) !important;
 }
-.x-margin--top-03 {
-  margin-top: var(--x-size-base-03) !important;
+.x-padding--bottom-04 {
+  padding-bottom: var(--x-size-base-04) !important;
 }
-.x-margin--bottom-03 {
-  margin-bottom: var(--x-size-base-03) !important;
+[dir="ltr"] .x-padding--right-04 {
+  padding-right: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-margin--right-03 {
-  margin-right: var(--x-size-base-03) !important;
+[dir="rtl"] .x-padding--right-04 {
+  padding-left: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--right-03 {
-  margin-left: var(--x-size-base-03) !important;
+[dir="ltr"] .x-padding--left-04 {
+  padding-left: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-margin--left-03 {
-  margin-left: var(--x-size-base-03) !important;
+[dir="rtl"] .x-padding--left-04 {
+  padding-right: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--left-03 {
-  margin-right: var(--x-size-base-03) !important;
+.x-padding--top-05 {
+  padding-top: var(--x-size-base-05) !important;
 }
-.x-margin--top-04 {
-  margin-top: var(--x-size-base-04) !important;
+.x-padding--bottom-05 {
+  padding-bottom: var(--x-size-base-05) !important;
 }
-.x-margin--bottom-04 {
-  margin-bottom: var(--x-size-base-04) !important;
+[dir="ltr"] .x-padding--right-05 {
+  padding-right: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-margin--right-04 {
-  margin-right: var(--x-size-base-04) !important;
+[dir="rtl"] .x-padding--right-05 {
+  padding-left: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-margin--right-04 {
-  margin-left: var(--x-size-base-04) !important;
+[dir="ltr"] .x-padding--left-05 {
+  padding-left: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-margin--left-04 {
-  margin-left: var(--x-size-base-04) !important;
+[dir="rtl"] .x-padding--left-05 {
+  padding-right: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-margin--left-04 {
-  margin-right: var(--x-size-base-04) !important;
+.x-padding--top-06 {
+  padding-top: var(--x-size-base-06) !important;
 }
-.x-margin--top-05 {
-  margin-top: var(--x-size-base-05) !important;
+.x-padding--bottom-06 {
+  padding-bottom: var(--x-size-base-06) !important;
 }
-.x-margin--bottom-05 {
-  margin-bottom: var(--x-size-base-05) !important;
+[dir="ltr"] .x-padding--right-06 {
+  padding-right: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-margin--right-05 {
-  margin-right: var(--x-size-base-05) !important;
+[dir="rtl"] .x-padding--right-06 {
+  padding-left: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-margin--right-05 {
-  margin-left: var(--x-size-base-05) !important;
+[dir="ltr"] .x-padding--left-06 {
+  padding-left: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-margin--left-05 {
-  margin-left: var(--x-size-base-05) !important;
+[dir="rtl"] .x-padding--left-06 {
+  padding-right: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-margin--left-05 {
-  margin-right: var(--x-size-base-05) !important;
+.x-padding--top-07 {
+  padding-top: var(--x-size-base-07) !important;
 }
-.x-margin--top-06 {
-  margin-top: var(--x-size-base-06) !important;
+.x-padding--bottom-07 {
+  padding-bottom: var(--x-size-base-07) !important;
 }
-.x-margin--bottom-06 {
-  margin-bottom: var(--x-size-base-06) !important;
+[dir="ltr"] .x-padding--right-07 {
+  padding-right: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-margin--right-06 {
-  margin-right: var(--x-size-base-06) !important;
+[dir="rtl"] .x-padding--right-07 {
+  padding-left: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-margin--right-06 {
-  margin-left: var(--x-size-base-06) !important;
+[dir="ltr"] .x-padding--left-07 {
+  padding-left: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-margin--left-06 {
-  margin-left: var(--x-size-base-06) !important;
+[dir="rtl"] .x-padding--left-07 {
+  padding-right: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-margin--left-06 {
-  margin-right: var(--x-size-base-06) !important;
+.x-padding--top-08 {
+  padding-top: var(--x-size-base-08) !important;
 }
-.x-margin--top-07 {
-  margin-top: var(--x-size-base-07) !important;
+.x-padding--bottom-08 {
+  padding-bottom: var(--x-size-base-08) !important;
 }
-.x-margin--bottom-07 {
-  margin-bottom: var(--x-size-base-07) !important;
+[dir="ltr"] .x-padding--right-08 {
+  padding-right: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-margin--right-07 {
-  margin-right: var(--x-size-base-07) !important;
+[dir="rtl"] .x-padding--right-08 {
+  padding-left: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-margin--right-07 {
-  margin-left: var(--x-size-base-07) !important;
+[dir="ltr"] .x-padding--left-08 {
+  padding-left: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-margin--left-07 {
-  margin-left: var(--x-size-base-07) !important;
+[dir="rtl"] .x-padding--left-08 {
+  padding-right: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-margin--left-07 {
-  margin-right: var(--x-size-base-07) !important;
+.x-padding--top-09 {
+  padding-top: var(--x-size-base-09) !important;
 }
-.x-margin--top-08 {
-  margin-top: var(--x-size-base-08) !important;
+.x-padding--bottom-09 {
+  padding-bottom: var(--x-size-base-09) !important;
 }
-.x-margin--bottom-08 {
-  margin-bottom: var(--x-size-base-08) !important;
+[dir="ltr"] .x-padding--right-09 {
+  padding-right: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-margin--right-08 {
-  margin-right: var(--x-size-base-08) !important;
+[dir="rtl"] .x-padding--right-09 {
+  padding-left: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-margin--right-08 {
-  margin-left: var(--x-size-base-08) !important;
+[dir="ltr"] .x-padding--left-09 {
+  padding-left: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-margin--left-08 {
-  margin-left: var(--x-size-base-08) !important;
+[dir="rtl"] .x-padding--left-09 {
+  padding-right: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-margin--left-08 {
-  margin-right: var(--x-size-base-08) !important;
+.x-padding--top-10 {
+  padding-top: var(--x-size-base-10) !important;
 }
-.x-margin--top-09 {
-  margin-top: var(--x-size-base-09) !important;
+.x-padding--bottom-10 {
+  padding-bottom: var(--x-size-base-10) !important;
 }
-.x-margin--bottom-09 {
-  margin-bottom: var(--x-size-base-09) !important;
+[dir="ltr"] .x-padding--right-10 {
+  padding-right: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-margin--right-09 {
-  margin-right: var(--x-size-base-09) !important;
+[dir="rtl"] .x-padding--right-10 {
+  padding-left: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-margin--right-09 {
-  margin-left: var(--x-size-base-09) !important;
+[dir="ltr"] .x-padding--left-10 {
+  padding-left: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-margin--left-09 {
-  margin-left: var(--x-size-base-09) !important;
+[dir="rtl"] .x-padding--left-10 {
+  padding-right: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-margin--left-09 {
-  margin-right: var(--x-size-base-09) !important;
+.x-padding--top-11 {
+  padding-top: var(--x-size-base-11) !important;
 }
-.x-margin--top-10 {
-  margin-top: var(--x-size-base-10) !important;
+.x-padding--bottom-11 {
+  padding-bottom: var(--x-size-base-11) !important;
 }
-.x-margin--bottom-10 {
-  margin-bottom: var(--x-size-base-10) !important;
+[dir="ltr"] .x-padding--right-11 {
+  padding-right: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-margin--right-10 {
-  margin-right: var(--x-size-base-10) !important;
+[dir="rtl"] .x-padding--right-11 {
+  padding-left: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-margin--right-10 {
-  margin-left: var(--x-size-base-10) !important;
+[dir="ltr"] .x-padding--left-11 {
+  padding-left: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-margin--left-10 {
-  margin-left: var(--x-size-base-10) !important;
+[dir="rtl"] .x-padding--left-11 {
+  padding-right: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-margin--left-10 {
-  margin-right: var(--x-size-base-10) !important;
+.x-padding--top-12 {
+  padding-top: var(--x-size-base-12) !important;
 }
-.x-margin--top-11 {
-  margin-top: var(--x-size-base-11) !important;
+.x-padding--bottom-12 {
+  padding-bottom: var(--x-size-base-12) !important;
 }
-.x-margin--bottom-11 {
-  margin-bottom: var(--x-size-base-11) !important;
+[dir="ltr"] .x-padding--right-12 {
+  padding-right: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-margin--right-11 {
-  margin-right: var(--x-size-base-11) !important;
+[dir="rtl"] .x-padding--right-12 {
+  padding-left: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-margin--right-11 {
-  margin-left: var(--x-size-base-11) !important;
+[dir="ltr"] .x-padding--left-12 {
+  padding-left: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-margin--left-11 {
-  margin-left: var(--x-size-base-11) !important;
+[dir="rtl"] .x-padding--left-12 {
+  padding-right: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-margin--left-11 {
-  margin-right: var(--x-size-base-11) !important;
+.x-padding--top-13 {
+  padding-top: var(--x-size-base-13) !important;
 }
-.x-margin--top-12 {
-  margin-top: var(--x-size-base-12) !important;
+.x-padding--bottom-13 {
+  padding-bottom: var(--x-size-base-13) !important;
 }
-.x-margin--bottom-12 {
-  margin-bottom: var(--x-size-base-12) !important;
+[dir="ltr"] .x-padding--right-13 {
+  padding-right: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-margin--right-12 {
-  margin-right: var(--x-size-base-12) !important;
+[dir="rtl"] .x-padding--right-13 {
+  padding-left: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-margin--right-12 {
-  margin-left: var(--x-size-base-12) !important;
+[dir="ltr"] .x-padding--left-13 {
+  padding-left: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-margin--left-12 {
-  margin-left: var(--x-size-base-12) !important;
+[dir="rtl"] .x-padding--left-13 {
+  padding-right: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-margin--left-12 {
-  margin-right: var(--x-size-base-12) !important;
+.x-padding--top-14 {
+  padding-top: var(--x-size-base-14) !important;
 }
-.x-margin--top-13 {
-  margin-top: var(--x-size-base-13) !important;
+.x-padding--bottom-14 {
+  padding-bottom: var(--x-size-base-14) !important;
 }
-.x-margin--bottom-13 {
-  margin-bottom: var(--x-size-base-13) !important;
+[dir="ltr"] .x-padding--right-14 {
+  padding-right: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-margin--right-13 {
-  margin-right: var(--x-size-base-13) !important;
+[dir="rtl"] .x-padding--right-14 {
+  padding-left: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-margin--right-13 {
-  margin-left: var(--x-size-base-13) !important;
+[dir="ltr"] .x-padding--left-14 {
+  padding-left: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-margin--left-13 {
-  margin-left: var(--x-size-base-13) !important;
+[dir="rtl"] .x-padding--left-14 {
+  padding-right: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-margin--left-13 {
-  margin-right: var(--x-size-base-13) !important;
+.x-padding--top-15 {
+  padding-top: var(--x-size-base-15) !important;
 }
-.x-margin--top-14 {
-  margin-top: var(--x-size-base-14) !important;
+.x-padding--bottom-15 {
+  padding-bottom: var(--x-size-base-15) !important;
 }
-.x-margin--bottom-14 {
-  margin-bottom: var(--x-size-base-14) !important;
+[dir="ltr"] .x-padding--right-15 {
+  padding-right: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-margin--right-14 {
-  margin-right: var(--x-size-base-14) !important;
+[dir="rtl"] .x-padding--right-15 {
+  padding-left: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-margin--right-14 {
-  margin-left: var(--x-size-base-14) !important;
+[dir="ltr"] .x-padding--left-15 {
+  padding-left: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-margin--left-14 {
-  margin-left: var(--x-size-base-14) !important;
+[dir="rtl"] .x-padding--left-15 {
+  padding-right: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-margin--left-14 {
-  margin-right: var(--x-size-base-14) !important;
+.x-padding--top-16 {
+  padding-top: var(--x-size-base-16) !important;
 }
-.x-margin--top-15 {
-  margin-top: var(--x-size-base-15) !important;
+.x-padding--bottom-16 {
+  padding-bottom: var(--x-size-base-16) !important;
 }
-.x-margin--bottom-15 {
-  margin-bottom: var(--x-size-base-15) !important;
+[dir="ltr"] .x-padding--right-16 {
+  padding-right: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-margin--right-15 {
-  margin-right: var(--x-size-base-15) !important;
+[dir="rtl"] .x-padding--right-16 {
+  padding-left: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-margin--right-15 {
-  margin-left: var(--x-size-base-15) !important;
+[dir="ltr"] .x-padding--left-16 {
+  padding-left: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-margin--left-15 {
-  margin-left: var(--x-size-base-15) !important;
+[dir="rtl"] .x-padding--left-16 {
+  padding-right: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-margin--left-15 {
-  margin-right: var(--x-size-base-15) !important;
+.x-padding--top-17 {
+  padding-top: var(--x-size-base-17) !important;
 }
-.x-margin--top-16 {
-  margin-top: var(--x-size-base-16) !important;
+.x-padding--bottom-17 {
+  padding-bottom: var(--x-size-base-17) !important;
 }
-.x-margin--bottom-16 {
-  margin-bottom: var(--x-size-base-16) !important;
+[dir="ltr"] .x-padding--right-17 {
+  padding-right: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-margin--right-16 {
-  margin-right: var(--x-size-base-16) !important;
+[dir="rtl"] .x-padding--right-17 {
+  padding-left: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-margin--right-16 {
-  margin-left: var(--x-size-base-16) !important;
+[dir="ltr"] .x-padding--left-17 {
+  padding-left: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-margin--left-16 {
-  margin-left: var(--x-size-base-16) !important;
+[dir="rtl"] .x-padding--left-17 {
+  padding-right: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-margin--left-16 {
-  margin-right: var(--x-size-base-16) !important;
+.x-padding--top-18 {
+  padding-top: var(--x-size-base-18) !important;
 }
-.x-margin--top-17 {
-  margin-top: var(--x-size-base-17) !important;
+.x-padding--bottom-18 {
+  padding-bottom: var(--x-size-base-18) !important;
 }
-.x-margin--bottom-17 {
-  margin-bottom: var(--x-size-base-17) !important;
+[dir="ltr"] .x-padding--right-18 {
+  padding-right: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-margin--right-17 {
-  margin-right: var(--x-size-base-17) !important;
+[dir="rtl"] .x-padding--right-18 {
+  padding-left: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-margin--right-17 {
-  margin-left: var(--x-size-base-17) !important;
+[dir="ltr"] .x-padding--left-18 {
+  padding-left: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-margin--left-17 {
-  margin-left: var(--x-size-base-17) !important;
+[dir="rtl"] .x-padding--left-18 {
+  padding-right: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-margin--left-17 {
-  margin-right: var(--x-size-base-17) !important;
+.x-padding--top-19 {
+  padding-top: var(--x-size-base-19) !important;
 }
-.x-margin--top-18 {
-  margin-top: var(--x-size-base-18) !important;
+.x-padding--bottom-19 {
+  padding-bottom: var(--x-size-base-19) !important;
 }
-.x-margin--bottom-18 {
-  margin-bottom: var(--x-size-base-18) !important;
+[dir="ltr"] .x-padding--right-19 {
+  padding-right: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-margin--right-18 {
-  margin-right: var(--x-size-base-18) !important;
+[dir="rtl"] .x-padding--right-19 {
+  padding-left: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-margin--right-18 {
-  margin-left: var(--x-size-base-18) !important;
+[dir="ltr"] .x-padding--left-19 {
+  padding-left: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-margin--left-18 {
-  margin-left: var(--x-size-base-18) !important;
+[dir="rtl"] .x-padding--left-19 {
+  padding-right: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-margin--left-18 {
-  margin-right: var(--x-size-base-18) !important;
+.x-padding--top-20 {
+  padding-top: var(--x-size-base-20) !important;
 }
-.x-margin--top-19 {
-  margin-top: var(--x-size-base-19) !important;
+.x-padding--bottom-20 {
+  padding-bottom: var(--x-size-base-20) !important;
 }
-.x-margin--bottom-19 {
-  margin-bottom: var(--x-size-base-19) !important;
+[dir="ltr"] .x-padding--right-20 {
+  padding-right: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-margin--right-19 {
-  margin-right: var(--x-size-base-19) !important;
+[dir="rtl"] .x-padding--right-20 {
+  padding-left: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-margin--right-19 {
-  margin-left: var(--x-size-base-19) !important;
+[dir="ltr"] .x-padding--left-20 {
+  padding-left: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-margin--left-19 {
-  margin-left: var(--x-size-base-19) !important;
+[dir="rtl"] .x-padding--left-20 {
+  padding-right: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-margin--left-19 {
-  margin-right: var(--x-size-base-19) !important;
+.x-margin--auto {
+  margin: auto !important;
 }
-.x-margin--top-20 {
-  margin-top: var(--x-size-base-20) !important;
+.x-margin--00 {
+  margin: 0 !important;
 }
-.x-margin--bottom-20 {
-  margin-bottom: var(--x-size-base-20) !important;
+.x-margin--01 {
+  margin: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--right-20 {
-  margin-right: var(--x-size-base-20) !important;
+.x-margin--02 {
+  margin: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--right-20 {
-  margin-left: var(--x-size-base-20) !important;
+.x-margin--03 {
+  margin: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--left-20 {
-  margin-left: var(--x-size-base-20) !important;
+.x-margin--04 {
+  margin: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--left-20 {
-  margin-right: var(--x-size-base-20) !important;
+.x-margin--05 {
+  margin: var(--x-size-base-05) !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
+.x-margin--06 {
+  margin: var(--x-size-base-06) !important;
 }
-.x-line-height--tight {
-  line-height: 1.25 !important;
+.x-margin--07 {
+  margin: var(--x-size-base-07) !important;
 }
-.x-line-height--snug {
-  line-height: 1.375 !important;
+.x-margin--08 {
+  margin: var(--x-size-base-08) !important;
 }
-.x-line-height--normal {
-  line-height: 1.5 !important;
+.x-margin--09 {
+  margin: var(--x-size-base-09) !important;
 }
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
+.x-margin--10 {
+  margin: var(--x-size-base-10) !important;
 }
-.x-line-height--loose {
-  line-height: 2 !important;
+.x-margin--11 {
+  margin: var(--x-size-base-11) !important;
 }
-.x-padding--00 {
-  padding: 0 !important;
+.x-margin--12 {
+  margin: var(--x-size-base-12) !important;
 }
-.x-padding--01 {
-  padding: var(--x-size-base-01) !important;
+.x-margin--13 {
+  margin: var(--x-size-base-13) !important;
 }
-.x-padding--02 {
-  padding: var(--x-size-base-02) !important;
+.x-margin--14 {
+  margin: var(--x-size-base-14) !important;
 }
-.x-padding--03 {
-  padding: var(--x-size-base-03) !important;
+.x-margin--15 {
+  margin: var(--x-size-base-15) !important;
 }
-.x-padding--04 {
-  padding: var(--x-size-base-04) !important;
+.x-margin--16 {
+  margin: var(--x-size-base-16) !important;
 }
-.x-padding--05 {
-  padding: var(--x-size-base-05) !important;
+.x-margin--17 {
+  margin: var(--x-size-base-17) !important;
 }
-.x-padding--06 {
-  padding: var(--x-size-base-06) !important;
+.x-margin--18 {
+  margin: var(--x-size-base-18) !important;
 }
-.x-padding--07 {
-  padding: var(--x-size-base-07) !important;
+.x-margin--19 {
+  margin: var(--x-size-base-19) !important;
 }
-.x-padding--08 {
-  padding: var(--x-size-base-08) !important;
+.x-margin--20 {
+  margin: var(--x-size-base-20) !important;
 }
-.x-padding--09 {
-  padding: var(--x-size-base-09) !important;
+.x-margin--top-auto {
+  margin-top: auto !important;
 }
-.x-padding--10 {
-  padding: var(--x-size-base-10) !important;
+.x-margin--bottom-auto {
+  margin-bottom: auto !important;
 }
-.x-padding--11 {
-  padding: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--right-auto {
+  margin-right: auto !important;
 }
-.x-padding--12 {
-  padding: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--right-auto {
+  margin-left: auto !important;
 }
-.x-padding--13 {
-  padding: var(--x-size-base-13) !important;
+[dir="ltr"] .x-margin--left-auto {
+  margin-left: auto !important;
 }
-.x-padding--14 {
-  padding: var(--x-size-base-14) !important;
+[dir="rtl"] .x-margin--left-auto {
+  margin-right: auto !important;
 }
-.x-padding--15 {
-  padding: var(--x-size-base-15) !important;
+.x-margin--top-00 {
+  margin-top: 0 !important;
 }
-.x-padding--16 {
-  padding: var(--x-size-base-16) !important;
+.x-margin--bottom-00 {
+  margin-bottom: 0 !important;
 }
-.x-padding--17 {
-  padding: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--right-00 {
+  margin-right: 0 !important;
 }
-.x-padding--18 {
-  padding: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--right-00 {
+  margin-left: 0 !important;
 }
-.x-padding--19 {
-  padding: var(--x-size-base-19) !important;
+[dir="ltr"] .x-margin--left-00 {
+  margin-left: 0 !important;
 }
-.x-padding--20 {
-  padding: var(--x-size-base-20) !important;
+[dir="rtl"] .x-margin--left-00 {
+  margin-right: 0 !important;
 }
-.x-padding--top-00 {
-  padding-top: 0 !important;
+.x-margin--top-01 {
+  margin-top: var(--x-size-base-01) !important;
 }
-.x-padding--bottom-00 {
-  padding-bottom: 0 !important;
+.x-margin--bottom-01 {
+  margin-bottom: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-padding--right-00 {
-  padding-right: 0 !important;
+[dir="ltr"] .x-margin--right-01 {
+  margin-right: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-padding--right-00 {
-  padding-left: 0 !important;
+[dir="rtl"] .x-margin--right-01 {
+  margin-left: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-padding--left-00 {
-  padding-left: 0 !important;
+[dir="ltr"] .x-margin--left-01 {
+  margin-left: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-padding--left-00 {
-  padding-right: 0 !important;
+[dir="rtl"] .x-margin--left-01 {
+  margin-right: var(--x-size-base-01) !important;
 }
-.x-padding--top-01 {
-  padding-top: var(--x-size-base-01) !important;
+.x-margin--top-02 {
+  margin-top: var(--x-size-base-02) !important;
 }
-.x-padding--bottom-01 {
-  padding-bottom: var(--x-size-base-01) !important;
+.x-margin--bottom-02 {
+  margin-bottom: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-padding--right-01 {
-  padding-right: var(--x-size-base-01) !important;
+[dir="ltr"] .x-margin--right-02 {
+  margin-right: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-padding--right-01 {
-  padding-left: var(--x-size-base-01) !important;
+[dir="rtl"] .x-margin--right-02 {
+  margin-left: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-padding--left-01 {
-  padding-left: var(--x-size-base-01) !important;
+[dir="ltr"] .x-margin--left-02 {
+  margin-left: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-padding--left-01 {
-  padding-right: var(--x-size-base-01) !important;
+[dir="rtl"] .x-margin--left-02 {
+  margin-right: var(--x-size-base-02) !important;
 }
-.x-padding--top-02 {
-  padding-top: var(--x-size-base-02) !important;
+.x-margin--top-03 {
+  margin-top: var(--x-size-base-03) !important;
 }
-.x-padding--bottom-02 {
-  padding-bottom: var(--x-size-base-02) !important;
+.x-margin--bottom-03 {
+  margin-bottom: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-padding--right-02 {
-  padding-right: var(--x-size-base-02) !important;
+[dir="ltr"] .x-margin--right-03 {
+  margin-right: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-padding--right-02 {
-  padding-left: var(--x-size-base-02) !important;
+[dir="rtl"] .x-margin--right-03 {
+  margin-left: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-padding--left-02 {
-  padding-left: var(--x-size-base-02) !important;
+[dir="ltr"] .x-margin--left-03 {
+  margin-left: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-padding--left-02 {
-  padding-right: var(--x-size-base-02) !important;
+[dir="rtl"] .x-margin--left-03 {
+  margin-right: var(--x-size-base-03) !important;
 }
-.x-padding--top-03 {
-  padding-top: var(--x-size-base-03) !important;
+.x-margin--top-04 {
+  margin-top: var(--x-size-base-04) !important;
 }
-.x-padding--bottom-03 {
-  padding-bottom: var(--x-size-base-03) !important;
+.x-margin--bottom-04 {
+  margin-bottom: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-padding--right-03 {
-  padding-right: var(--x-size-base-03) !important;
+[dir="ltr"] .x-margin--right-04 {
+  margin-right: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-padding--right-03 {
-  padding-left: var(--x-size-base-03) !important;
+[dir="rtl"] .x-margin--right-04 {
+  margin-left: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-padding--left-03 {
-  padding-left: var(--x-size-base-03) !important;
+[dir="ltr"] .x-margin--left-04 {
+  margin-left: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-padding--left-03 {
-  padding-right: var(--x-size-base-03) !important;
+[dir="rtl"] .x-margin--left-04 {
+  margin-right: var(--x-size-base-04) !important;
 }
-.x-padding--top-04 {
-  padding-top: var(--x-size-base-04) !important;
+.x-margin--top-05 {
+  margin-top: var(--x-size-base-05) !important;
 }
-.x-padding--bottom-04 {
-  padding-bottom: var(--x-size-base-04) !important;
+.x-margin--bottom-05 {
+  margin-bottom: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-padding--right-04 {
-  padding-right: var(--x-size-base-04) !important;
+[dir="ltr"] .x-margin--right-05 {
+  margin-right: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-padding--right-04 {
-  padding-left: var(--x-size-base-04) !important;
+[dir="rtl"] .x-margin--right-05 {
+  margin-left: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-padding--left-04 {
-  padding-left: var(--x-size-base-04) !important;
+[dir="ltr"] .x-margin--left-05 {
+  margin-left: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-padding--left-04 {
-  padding-right: var(--x-size-base-04) !important;
+[dir="rtl"] .x-margin--left-05 {
+  margin-right: var(--x-size-base-05) !important;
 }
-.x-padding--top-05 {
-  padding-top: var(--x-size-base-05) !important;
+.x-margin--top-06 {
+  margin-top: var(--x-size-base-06) !important;
 }
-.x-padding--bottom-05 {
-  padding-bottom: var(--x-size-base-05) !important;
+.x-margin--bottom-06 {
+  margin-bottom: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-padding--right-05 {
-  padding-right: var(--x-size-base-05) !important;
+[dir="ltr"] .x-margin--right-06 {
+  margin-right: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-padding--right-05 {
-  padding-left: var(--x-size-base-05) !important;
+[dir="rtl"] .x-margin--right-06 {
+  margin-left: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-padding--left-05 {
-  padding-left: var(--x-size-base-05) !important;
+[dir="ltr"] .x-margin--left-06 {
+  margin-left: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-padding--left-05 {
-  padding-right: var(--x-size-base-05) !important;
+[dir="rtl"] .x-margin--left-06 {
+  margin-right: var(--x-size-base-06) !important;
 }
-.x-padding--top-06 {
-  padding-top: var(--x-size-base-06) !important;
+.x-margin--top-07 {
+  margin-top: var(--x-size-base-07) !important;
 }
-.x-padding--bottom-06 {
-  padding-bottom: var(--x-size-base-06) !important;
+.x-margin--bottom-07 {
+  margin-bottom: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-padding--right-06 {
-  padding-right: var(--x-size-base-06) !important;
+[dir="ltr"] .x-margin--right-07 {
+  margin-right: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-padding--right-06 {
-  padding-left: var(--x-size-base-06) !important;
+[dir="rtl"] .x-margin--right-07 {
+  margin-left: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-padding--left-06 {
-  padding-left: var(--x-size-base-06) !important;
+[dir="ltr"] .x-margin--left-07 {
+  margin-left: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-padding--left-06 {
-  padding-right: var(--x-size-base-06) !important;
+[dir="rtl"] .x-margin--left-07 {
+  margin-right: var(--x-size-base-07) !important;
 }
-.x-padding--top-07 {
-  padding-top: var(--x-size-base-07) !important;
+.x-margin--top-08 {
+  margin-top: var(--x-size-base-08) !important;
 }
-.x-padding--bottom-07 {
-  padding-bottom: var(--x-size-base-07) !important;
+.x-margin--bottom-08 {
+  margin-bottom: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-padding--right-07 {
-  padding-right: var(--x-size-base-07) !important;
+[dir="ltr"] .x-margin--right-08 {
+  margin-right: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-padding--right-07 {
-  padding-left: var(--x-size-base-07) !important;
+[dir="rtl"] .x-margin--right-08 {
+  margin-left: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-padding--left-07 {
-  padding-left: var(--x-size-base-07) !important;
+[dir="ltr"] .x-margin--left-08 {
+  margin-left: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-padding--left-07 {
-  padding-right: var(--x-size-base-07) !important;
+[dir="rtl"] .x-margin--left-08 {
+  margin-right: var(--x-size-base-08) !important;
 }
-.x-padding--top-08 {
-  padding-top: var(--x-size-base-08) !important;
+.x-margin--top-09 {
+  margin-top: var(--x-size-base-09) !important;
 }
-.x-padding--bottom-08 {
-  padding-bottom: var(--x-size-base-08) !important;
+.x-margin--bottom-09 {
+  margin-bottom: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-padding--right-08 {
-  padding-right: var(--x-size-base-08) !important;
+[dir="ltr"] .x-margin--right-09 {
+  margin-right: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-padding--right-08 {
-  padding-left: var(--x-size-base-08) !important;
+[dir="rtl"] .x-margin--right-09 {
+  margin-left: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-padding--left-08 {
-  padding-left: var(--x-size-base-08) !important;
+[dir="ltr"] .x-margin--left-09 {
+  margin-left: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-padding--left-08 {
-  padding-right: var(--x-size-base-08) !important;
+[dir="rtl"] .x-margin--left-09 {
+  margin-right: var(--x-size-base-09) !important;
 }
-.x-padding--top-09 {
-  padding-top: var(--x-size-base-09) !important;
+.x-margin--top-10 {
+  margin-top: var(--x-size-base-10) !important;
 }
-.x-padding--bottom-09 {
-  padding-bottom: var(--x-size-base-09) !important;
+.x-margin--bottom-10 {
+  margin-bottom: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-padding--right-09 {
-  padding-right: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--right-10 {
+  margin-right: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-padding--right-09 {
-  padding-left: var(--x-size-base-09) !important;
+[dir="rtl"] .x-margin--right-10 {
+  margin-left: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-padding--left-09 {
-  padding-left: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--left-10 {
+  margin-left: var(--x-size-base-10) !important;
+}
+[dir="rtl"] .x-margin--left-10 {
+  margin-right: var(--x-size-base-10) !important;
+}
+.x-margin--top-11 {
+  margin-top: var(--x-size-base-11) !important;
+}
+.x-margin--bottom-11 {
+  margin-bottom: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-padding--left-09 {
-  padding-right: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--right-11 {
+  margin-right: var(--x-size-base-11) !important;
 }
-.x-padding--top-10 {
-  padding-top: var(--x-size-base-10) !important;
+[dir="rtl"] .x-margin--right-11 {
+  margin-left: var(--x-size-base-11) !important;
 }
-.x-padding--bottom-10 {
-  padding-bottom: var(--x-size-base-10) !important;
+[dir="ltr"] .x-margin--left-11 {
+  margin-left: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-padding--right-10 {
-  padding-right: var(--x-size-base-10) !important;
+[dir="rtl"] .x-margin--left-11 {
+  margin-right: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-padding--right-10 {
-  padding-left: var(--x-size-base-10) !important;
+.x-margin--top-12 {
+  margin-top: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-padding--left-10 {
-  padding-left: var(--x-size-base-10) !important;
+.x-margin--bottom-12 {
+  margin-bottom: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-padding--left-10 {
-  padding-right: var(--x-size-base-10) !important;
+[dir="ltr"] .x-margin--right-12 {
+  margin-right: var(--x-size-base-12) !important;
 }
-.x-padding--top-11 {
-  padding-top: var(--x-size-base-11) !important;
+[dir="rtl"] .x-margin--right-12 {
+  margin-left: var(--x-size-base-12) !important;
 }
-.x-padding--bottom-11 {
-  padding-bottom: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--left-12 {
+  margin-left: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-padding--right-11 {
-  padding-right: var(--x-size-base-11) !important;
+[dir="rtl"] .x-margin--left-12 {
+  margin-right: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-padding--right-11 {
-  padding-left: var(--x-size-base-11) !important;
+.x-margin--top-13 {
+  margin-top: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-padding--left-11 {
-  padding-left: var(--x-size-base-11) !important;
+.x-margin--bottom-13 {
+  margin-bottom: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-padding--left-11 {
-  padding-right: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--right-13 {
+  margin-right: var(--x-size-base-13) !important;
 }
-.x-padding--top-12 {
-  padding-top: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--right-13 {
+  margin-left: var(--x-size-base-13) !important;
 }
-.x-padding--bottom-12 {
-  padding-bottom: var(--x-size-base-12) !important;
+[dir="ltr"] .x-margin--left-13 {
+  margin-left: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-padding--right-12 {
-  padding-right: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--left-13 {
+  margin-right: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-padding--right-12 {
-  padding-left: var(--x-size-base-12) !important;
+.x-margin--top-14 {
+  margin-top: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-padding--left-12 {
-  padding-left: var(--x-size-base-12) !important;
+.x-margin--bottom-14 {
+  margin-bottom: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-padding--left-12 {
-  padding-right: var(--x-size-base-12) !important;
+[dir="ltr"] .x-margin--right-14 {
+  margin-right: var(--x-size-base-14) !important;
 }
-.x-padding--top-13 {
-  padding-top: var(--x-size-base-13) !important;
+[dir="rtl"] .x-margin--right-14 {
+  margin-left: var(--x-size-base-14) !important;
 }
-.x-padding--bottom-13 {
-  padding-bottom: var(--x-size-base-13) !important;
+[dir="ltr"] .x-margin--left-14 {
+  margin-left: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-padding--right-13 {
-  padding-right: var(--x-size-base-13) !important;
+[dir="rtl"] .x-margin--left-14 {
+  margin-right: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-padding--right-13 {
-  padding-left: var(--x-size-base-13) !important;
+.x-margin--top-15 {
+  margin-top: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-padding--left-13 {
-  padding-left: var(--x-size-base-13) !important;
+.x-margin--bottom-15 {
+  margin-bottom: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-padding--left-13 {
-  padding-right: var(--x-size-base-13) !important;
+[dir="ltr"] .x-margin--right-15 {
+  margin-right: var(--x-size-base-15) !important;
 }
-.x-padding--top-14 {
-  padding-top: var(--x-size-base-14) !important;
+[dir="rtl"] .x-margin--right-15 {
+  margin-left: var(--x-size-base-15) !important;
 }
-.x-padding--bottom-14 {
-  padding-bottom: var(--x-size-base-14) !important;
+[dir="ltr"] .x-margin--left-15 {
+  margin-left: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-padding--right-14 {
-  padding-right: var(--x-size-base-14) !important;
+[dir="rtl"] .x-margin--left-15 {
+  margin-right: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-padding--right-14 {
-  padding-left: var(--x-size-base-14) !important;
+.x-margin--top-16 {
+  margin-top: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-padding--left-14 {
-  padding-left: var(--x-size-base-14) !important;
+.x-margin--bottom-16 {
+  margin-bottom: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-padding--left-14 {
-  padding-right: var(--x-size-base-14) !important;
+[dir="ltr"] .x-margin--right-16 {
+  margin-right: var(--x-size-base-16) !important;
 }
-.x-padding--top-15 {
-  padding-top: var(--x-size-base-15) !important;
+[dir="rtl"] .x-margin--right-16 {
+  margin-left: var(--x-size-base-16) !important;
 }
-.x-padding--bottom-15 {
-  padding-bottom: var(--x-size-base-15) !important;
+[dir="ltr"] .x-margin--left-16 {
+  margin-left: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-padding--right-15 {
-  padding-right: var(--x-size-base-15) !important;
+[dir="rtl"] .x-margin--left-16 {
+  margin-right: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-padding--right-15 {
-  padding-left: var(--x-size-base-15) !important;
+.x-margin--top-17 {
+  margin-top: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-padding--left-15 {
-  padding-left: var(--x-size-base-15) !important;
+.x-margin--bottom-17 {
+  margin-bottom: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-padding--left-15 {
-  padding-right: var(--x-size-base-15) !important;
+[dir="ltr"] .x-margin--right-17 {
+  margin-right: var(--x-size-base-17) !important;
 }
-.x-padding--top-16 {
-  padding-top: var(--x-size-base-16) !important;
+[dir="rtl"] .x-margin--right-17 {
+  margin-left: var(--x-size-base-17) !important;
 }
-.x-padding--bottom-16 {
-  padding-bottom: var(--x-size-base-16) !important;
+[dir="ltr"] .x-margin--left-17 {
+  margin-left: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-padding--right-16 {
-  padding-right: var(--x-size-base-16) !important;
+[dir="rtl"] .x-margin--left-17 {
+  margin-right: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-padding--right-16 {
-  padding-left: var(--x-size-base-16) !important;
+.x-margin--top-18 {
+  margin-top: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-padding--left-16 {
-  padding-left: var(--x-size-base-16) !important;
+.x-margin--bottom-18 {
+  margin-bottom: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-padding--left-16 {
-  padding-right: var(--x-size-base-16) !important;
+[dir="ltr"] .x-margin--right-18 {
+  margin-right: var(--x-size-base-18) !important;
 }
-.x-padding--top-17 {
-  padding-top: var(--x-size-base-17) !important;
+[dir="rtl"] .x-margin--right-18 {
+  margin-left: var(--x-size-base-18) !important;
 }
-.x-padding--bottom-17 {
-  padding-bottom: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--left-18 {
+  margin-left: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-padding--right-17 {
-  padding-right: var(--x-size-base-17) !important;
+[dir="rtl"] .x-margin--left-18 {
+  margin-right: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-padding--right-17 {
-  padding-left: var(--x-size-base-17) !important;
+.x-margin--top-19 {
+  margin-top: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-padding--left-17 {
-  padding-left: var(--x-size-base-17) !important;
+.x-margin--bottom-19 {
+  margin-bottom: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-padding--left-17 {
-  padding-right: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--right-19 {
+  margin-right: var(--x-size-base-19) !important;
 }
-.x-padding--top-18 {
-  padding-top: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--right-19 {
+  margin-left: var(--x-size-base-19) !important;
 }
-.x-padding--bottom-18 {
-  padding-bottom: var(--x-size-base-18) !important;
+[dir="ltr"] .x-margin--left-19 {
+  margin-left: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-padding--right-18 {
-  padding-right: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--left-19 {
+  margin-right: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-padding--right-18 {
-  padding-left: var(--x-size-base-18) !important;
+.x-margin--top-20 {
+  margin-top: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-padding--left-18 {
-  padding-left: var(--x-size-base-18) !important;
+.x-margin--bottom-20 {
+  margin-bottom: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-padding--left-18 {
-  padding-right: var(--x-size-base-18) !important;
+[dir="ltr"] .x-margin--right-20 {
+  margin-right: var(--x-size-base-20) !important;
 }
-.x-padding--top-19 {
-  padding-top: var(--x-size-base-19) !important;
+[dir="rtl"] .x-margin--right-20 {
+  margin-left: var(--x-size-base-20) !important;
 }
-.x-padding--bottom-19 {
-  padding-bottom: var(--x-size-base-19) !important;
+[dir="ltr"] .x-margin--left-20 {
+  margin-left: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-padding--right-19 {
-  padding-right: var(--x-size-base-19) !important;
+[dir="rtl"] .x-margin--left-20 {
+  margin-right: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-padding--right-19 {
-  padding-left: var(--x-size-base-19) !important;
+.x-uppercase {
+  text-transform: uppercase;
 }
-[dir="ltr"] .x-padding--left-19 {
-  padding-left: var(--x-size-base-19) !important;
+.x-lowercase {
+  text-transform: lowercase;
 }
-[dir="rtl"] .x-padding--left-19 {
-  padding-right: var(--x-size-base-19) !important;
+.x-capitalize {
+  text-transform: capitalize;
 }
-.x-padding--top-20 {
-  padding-top: var(--x-size-base-20) !important;
+.x-normal-case {
+  text-transform: none;
 }
-.x-padding--bottom-20 {
-  padding-bottom: var(--x-size-base-20) !important;
+.x-line-height--none {
+  line-height: 1 !important;
+}
+.x-line-height--tight {
+  line-height: 1.25 !important;
 }
-[dir="ltr"] .x-padding--right-20 {
-  padding-right: var(--x-size-base-20) !important;
+.x-line-height--snug {
+  line-height: 1.375 !important;
 }
-[dir="rtl"] .x-padding--right-20 {
-  padding-left: var(--x-size-base-20) !important;
+.x-line-height--normal {
+  line-height: 1.5 !important;
 }
-[dir="ltr"] .x-padding--left-20 {
-  padding-left: var(--x-size-base-20) !important;
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
 }
-[dir="rtl"] .x-padding--left-20 {
-  padding-right: var(--x-size-base-20) !important;
+.x-line-height--loose {
+  line-height: 2 !important;
 }
 .x-line-clamp--2 {
   overflow: hidden !important;
@@ -1022,6 +1021,86 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !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-color--lead {
   color: var(--x-color-base-lead) !important;
 }
@@ -1108,6 +1187,49 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
+.x-fill--lead {
+  fill: var(--x-color-base-lead) !important;
+}
+.x-fill--auxiliary {
+  fill: var(--x-color-base-auxiliary) !important;
+}
+.x-fill--neutral-10 {
+  fill: var(--x-color-base-neutral-10) !important;
+}
+.x-fill--neutral-35 {
+  fill: var(--x-color-base-neutral-35) !important;
+}
+.x-fill--neutral-70 {
+  fill: var(--x-color-base-neutral-70) !important;
+}
+.x-fill--neutral-95 {
+  fill: var(--x-color-base-neutral-95) !important;
+}
+.x-fill--neutral-100 {
+  fill: var(--x-color-base-neutral-100) !important;
+}
+.x-fill--accent {
+  fill: var(--x-color-base-accent) !important;
+}
+.x-fill--enable {
+  fill: var(--x-color-base-enable) !important;
+}
+.x-fill--disable {
+  fill: var(--x-color-base-disable) !important;
+}
+.x-fill--transparent {
+  fill: var(--x-color-base-transparent) !important;
+}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1176,49 +1298,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-fill--lead {
-  fill: var(--x-color-base-lead) !important;
-}
-.x-fill--auxiliary {
-  fill: var(--x-color-base-auxiliary) !important;
-}
-.x-fill--neutral-10 {
-  fill: var(--x-color-base-neutral-10) !important;
-}
-.x-fill--neutral-35 {
-  fill: var(--x-color-base-neutral-35) !important;
-}
-.x-fill--neutral-70 {
-  fill: var(--x-color-base-neutral-70) !important;
-}
-.x-fill--neutral-95 {
-  fill: var(--x-color-base-neutral-95) !important;
-}
-.x-fill--neutral-100 {
-  fill: var(--x-color-base-neutral-100) !important;
-}
-.x-fill--accent {
-  fill: var(--x-color-base-accent) !important;
-}
-.x-fill--enable {
-  fill: var(--x-color-base-enable) !important;
-}
-.x-fill--disable {
-  fill: var(--x-color-base-disable) !important;
-}
-.x-fill--transparent {
-  fill: var(--x-color-base-transparent) !important;
-}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1313,124 +1392,44 @@
 .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;
-}
-.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-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
 }
-.x-font-size--09 {
-  font-size: var(--x-size-base-09) !important;
-  line-height: 1.5;
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
 }
-.x-font-size--10 {
-  font-size: var(--x-size-base-10) !important;
-  line-height: 1.5;
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
 }
-.x-font-size--11 {
-  font-size: var(--x-size-base-11) !important;
-  line-height: 1.5;
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
 }
-.x-font-size--12 {
-  font-size: var(--x-size-base-12) !important;
-  line-height: 1.5;
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
 }
-.x-font-size--13 {
-  font-size: var(--x-size-base-13) !important;
-  line-height: 1.5;
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
 }
-.x-font-size--14 {
-  font-size: var(--x-size-base-14) !important;
-  line-height: 1.5;
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
 }
-.x-font-size--15 {
-  font-size: var(--x-size-base-15) !important;
-  line-height: 1.5;
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
 }
-.x-font-size--16 {
-  font-size: var(--x-size-base-16) !important;
-  line-height: 1.5;
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
 }
-.x-font-size--17 {
-  font-size: var(--x-size-base-17) !important;
-  line-height: 1.5;
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
 }
-.x-font-size--18 {
-  font-size: var(--x-size-base-18) !important;
-  line-height: 1.5;
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
 }
-.x-font-size--19 {
-  font-size: var(--x-size-base-19) !important;
-  line-height: 1.5;
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
 }
-.x-font-size--20 {
-  font-size: var(--x-size-base-20) !important;
-  line-height: 1.5;
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
 }
 *[class*=x-border-width--] {
   border-width: 0;
@@ -3375,12 +3374,12 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.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--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3436,21 +3435,6 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
-.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;
@@ -3553,6 +3537,21 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.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-color-text-accent: var(--x-color-base-accent);
 }
@@ -3900,24 +3899,6 @@
   --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);
 }
-: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-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -3959,6 +3940,24 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
+:root {
+  --x-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-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4165,66 +4164,6 @@
     --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 {
-  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 {
-  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 {
-  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-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4447,6 +4386,66 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+: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 {
+  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 {
+  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 {
+  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-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
@@ -4806,23 +4805,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 .x-result {
   display: grid;
@@ -4876,6 +4858,23 @@
     opacity: 1;
   }
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --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);
 }
@@ -4896,15 +4895,6 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
-:root {
-  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
-  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
-  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
-  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
-  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-progress-bar-default: 0;
-}
 .x-progress-bar {
   display: inline-block;
@@ -4925,6 +4915,15 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
+:root {
+  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
+  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
+  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
+  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
+  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-progress-bar-default: 0;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -4957,6 +4956,14 @@
   --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-number-aspect-ratio-picture: 1;
+}
+.x-picture--fixed-ratio.x-picture {
+  aspect-ratio: var(--x-number-aspect-ratio-picture);
+  width: 100%;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5014,17 +5021,29 @@
   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%;
+  --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);
 }
 :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-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -5051,24 +5070,11 @@
   --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%;
+  --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);
 }
 :root {
   --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
@@ -5077,6 +5083,14 @@
   --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-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5350,19 +5364,49 @@
           text-decoration: var(--x-font-decoration-option-list-button-default-hover);
 }
 :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);
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
 }
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5409,6 +5453,96 @@
     --x-number-font-weight-base-regular
   );
 }
+.x-option-list--bottom.x-option-list,
+.x-option-list--bottom .x-option-list {
+  --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
+  --x-color-text-option-list-button-default-hover: var(
+    --x-color-text-option-list-button-bottom-hover
+  );
+  --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-top-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-top-option-list-item-bottom
+  );
+  --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
+  --x-size-border-width-option-list-item-default: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-bottom
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-bottom
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-bottom
+  );
+  --x-font-decoration-option-list-button-default-hover: var(
+    --x-font-decoration-option-list-button-bottom-hover
+  );
+  --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-bottom
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
+.x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
+  --x-color-text-option-list-button-default-selected: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected-hover
+  );
+  --x-color-border-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-bottom-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-bottom-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-bottom-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-bottom-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-bottom-selected
+  );
+  --x-number-font-weight-option-list-button-default-selected: var(
+    --x-number-font-weight-option-list-button-bottom-selected
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item:last-child,
+.x-option-list--bottom .x-option-list .x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: inherit;
+  --x-size-border-width-top-option-list-item-default: inherit;
+  --x-size-border-width-right-option-list-item-default: inherit;
+  --x-size-border-width-bottom-option-list-item-default: inherit;
+  --x-size-border-width-left-option-list-item-default: inherit;
+}
+:root {
+  --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;
@@ -5439,10 +5573,6 @@
   --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;
-}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5530,6 +5660,22 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 /* @deprecated */
 [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5796,257 +5942,85 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-11);
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-11);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-11);
-  }
-}
-.x-list--padding-12.x-list {
-  padding: var(--x-size-padding-list-12);
-}
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-12);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-12);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-12);
-  }
-}
-.x-list--padding-13.x-list {
-  padding: var(--x-size-padding-list-13);
-}
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-13);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-13);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-13);
-  }
-}
-/* @deprecated */
-:root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
-}
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
-.x-list {
-  display: flex;
-  flex-flow: var(--x-string-flow-list);
-  list-style: none;
-  gap: var(--x-size-gap-list);
-  margin: 0;
-  padding: var(--x-size-padding-list);
-  justify-content: var(--x-size-justify-list);
-  align-items: var(--x-size-align-list);
-  min-width: 0;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list);
-  }
-  .x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-  }
-  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
-    gap: 0;
-  }
-  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-    margin-bottom: var(--x-size-gap-list);
-  }
-}
-.x-list--vertical.x-list {
-  flex-flow: column nowrap;
-}
-.x-list--horizontal.x-list {
-  flex-flow: row nowrap;
-}
-.x-list--wrap.x-list {
-  flex-flow: row wrap;
-}
-.x-list--wrap-reverse.x-list {
-  flex-flow: row wrap-reverse;
-}
-.x-list--justify-stretch.x-list {
-  justify-content: stretch;
-}
-.x-list--justify-center.x-list {
-  justify-content: center;
-}
-.x-list--justify-end.x-list {
-  justify-content: flex-end;
-}
-.x-list--justify-start.x-list {
-  justify-content: flex-start;
-}
-.x-list--align-stretch.x-list {
-  align-items: stretch;
-}
-.x-list--align-center.x-list {
-  align-items: center;
-}
-.x-list--align-baseline.x-list {
-  align-items: baseline;
-}
-.x-list--align-end.x-list {
-  align-items: flex-end;
-}
-.x-list--align-start.x-list {
-  align-items: flex-start;
-}
-.x-list > .x-list__item--expand {
-  flex: 1 1 auto;
-}
-.x-list > .x-list__item--no-expand {
-  flex: 0 0 auto;
-}
-.x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0;
-}
-.x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0;
-}
-.x-list > .x-list__item--stretch {
-  align-self: stretch;
-}
-.x-list > .x-list__item--flex-none {
-  flex: none;
-}
-.x-list > .x-list__item--01 {
-  flex: 1 12 auto;
-}
-.x-list > .x-list__item--02 {
-  flex: 2 11 auto;
-}
-.x-list > .x-list__item--03 {
-  flex: 3 10 auto;
-}
-.x-list > .x-list__item--04 {
-  flex: 4 9 auto;
-}
-.x-list > .x-list__item--05 {
-  flex: 5 8 auto;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-11);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
+  }
 }
-.x-list > .x-list__item--06 {
-  flex: 6 7 auto;
+.x-list--padding-12.x-list {
+  padding: var(--x-size-padding-list-12);
 }
-.x-list > .x-list__item--07 {
-  flex: 7 6 auto;
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-12);
 }
-.x-list > .x-list__item--08 {
-  flex: 8 5 auto;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-12);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
+  }
 }
-.x-list > .x-list__item--09 {
-  flex: 9 4 auto;
+.x-list--padding-13.x-list {
+  padding: var(--x-size-padding-list-13);
 }
-.x-list > .x-list__item--10 {
-  flex: 10 3 auto;
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-13);
 }
-.x-list > .x-list__item--11 {
-  flex: 11 2 auto;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-13);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
+  }
 }
-.x-list > .x-list__item--12 {
-  flex: 12 1 auto;
+:root {
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
@@ -6570,6 +6544,188 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
+  gap: var(--x-size-gap-list);
+  margin: 0;
+  padding: var(--x-size-padding-list);
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  min-width: 0;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
+  }
+  .x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+  }
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
+    gap: 0;
+  }
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
+  }
+}
+.x-list--vertical.x-list {
+  flex-flow: column nowrap;
+}
+.x-list--horizontal.x-list {
+  flex-flow: row nowrap;
+}
+.x-list--wrap.x-list {
+  flex-flow: row wrap;
+}
+.x-list--wrap-reverse.x-list {
+  flex-flow: row wrap-reverse;
+}
+.x-list--justify-stretch.x-list {
+  justify-content: stretch;
+}
+.x-list--justify-center.x-list {
+  justify-content: center;
+}
+.x-list--justify-end.x-list {
+  justify-content: flex-end;
+}
+.x-list--justify-start.x-list {
+  justify-content: flex-start;
+}
+.x-list--align-stretch.x-list {
+  align-items: stretch;
+}
+.x-list--align-center.x-list {
+  align-items: center;
+}
+.x-list--align-baseline.x-list {
+  align-items: baseline;
+}
+.x-list--align-end.x-list {
+  align-items: flex-end;
+}
+.x-list--align-start.x-list {
+  align-items: flex-start;
+}
+.x-list > .x-list__item--expand {
+  flex: 1 1 auto;
+}
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto;
+}
+.x-list.x-list--horizontal > .x-list__item--expand {
+  min-width: 0;
+}
+.x-list:not(.x-list--horizontal) > .x-list__item--expand {
+  min-height: 0;
+}
+.x-list > .x-list__item--stretch {
+  align-self: stretch;
+}
+.x-list > .x-list__item--flex-none {
+  flex: none;
+}
+.x-list > .x-list__item--01 {
+  flex: 1 12 auto;
+}
+.x-list > .x-list__item--02 {
+  flex: 2 11 auto;
+}
+.x-list > .x-list__item--03 {
+  flex: 3 10 auto;
+}
+.x-list > .x-list__item--04 {
+  flex: 4 9 auto;
+}
+.x-list > .x-list__item--05 {
+  flex: 5 8 auto;
+}
+.x-list > .x-list__item--06 {
+  flex: 6 7 auto;
+}
+.x-list > .x-list__item--07 {
+  flex: 7 6 auto;
+}
+.x-list > .x-list__item--08 {
+  flex: 8 5 auto;
+}
+.x-list > .x-list__item--09 {
+  flex: 9 4 auto;
+}
+.x-list > .x-list__item--10 {
+  flex: 10 3 auto;
+}
+.x-list > .x-list__item--11 {
+  flex: 11 2 auto;
+}
+.x-list > .x-list__item--12 {
+  flex: 12 1 auto;
+}
+:root {
+  --x-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-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);
@@ -6635,32 +6791,6 @@
   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-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6704,15 +6834,6 @@
   );
   --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);
-  --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);
-}
 :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);
@@ -6899,6 +7020,15 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
+: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 {
@@ -6933,6 +7063,13 @@
   --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);
 }
+: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 {
@@ -6952,13 +7089,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-: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);
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7009,6 +7139,34 @@
   --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
   --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
 }
+:root {
+  --x-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);
@@ -7078,220 +7236,70 @@
 }
 .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-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);
-}
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
-:root {
-  --x-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-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-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
-.x-option-list--bottom.x-option-list,
-.x-option-list--bottom .x-option-list {
-  --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
-  --x-color-text-option-list-button-default-hover: var(
-    --x-color-text-option-list-button-bottom-hover
-  );
-  --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
-  --x-color-border-right-option-list-item-default: var(
-    --x-color-border-top-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-default: var(
-    --x-color-border-top-option-list-item-bottom
-  );
-  --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
-  --x-size-border-width-option-list-item-default: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-bottom
-  );
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-bottom
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-bottom
-  );
-  --x-font-decoration-option-list-button-default-hover: var(
-    --x-font-decoration-option-list-button-bottom-hover
-  );
-  --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
-  --x-number-font-weight-option-list-button-default: var(
-    --x-number-font-weight-option-list-button-bottom
-  );
+  border: none;
+  padding: 0;
+  flex: 1 1 auto;
 }
-.x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
-.x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
-  --x-color-text-option-list-button-default-selected: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected-hover
-  );
-  --x-color-border-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-bottom-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-bottom-selected
-  );
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-bottom-selected
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-bottom-selected
-  );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-bottom-selected
+.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-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);
+}
+: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-number-font-weight-option-list-button-default-selected: var(
-    --x-number-font-weight-option-list-button-bottom-selected
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
   );
 }
-.x-option-list--bottom.x-option-list .x-option-list__item:last-child,
-.x-option-list--bottom .x-option-list .x-option-list__item:last-child {
-  --x-size-border-width-option-list-item-default: inherit;
-  --x-size-border-width-top-option-list-item-default: inherit;
-  --x-size-border-width-right-option-list-item-default: inherit;
-  --x-size-border-width-bottom-option-list-item-default: inherit;
-  --x-size-border-width-left-option-list-item-default: inherit;
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
 }
 :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-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-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7306,18 +7314,18 @@
   --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);
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
 }
 :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-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7327,6 +7335,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;
@@ -7357,26 +7370,6 @@
   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-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
-.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
-}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7403,6 +7396,19 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
+}
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -7410,6 +7416,31 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  padding-bottom: var(--x-size-padding-bottom-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter-container,
+.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
+  width: 100%;
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7546,105 +7577,13 @@
 .x-filter__count, .x-facet-filter__count {
   font-weight: var(--x-number-font-weight-filter-count-default);
 }
-.x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
-  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-  --x-number-font-weight-filter-count-default: var(
-    --x-number-font-weight-filter-count-default-selected
-  );
-}
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-.x-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
-  width: 100%;
-}
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
-.x-facet--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
-:root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
-:root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
-.x-facet--line.x-facet,
-.x-facet--line .x-facet {
-  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
-  --x-size-border-width-right-facet-header-default: var(
-    --x-size-border-width-right-facet-header-line
-  );
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-bottom-facet-header-line
-  );
-  --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
+.x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
+  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
+  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
+  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
+  --x-number-font-weight-filter-count-default: var(
+    --x-number-font-weight-filter-count-default-selected
   );
 }
 :root {
@@ -7660,6 +7599,14 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7693,6 +7640,30 @@
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
   --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
+.x-facet--line.x-facet,
+.x-facet--line .x-facet {
+  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
+  --x-size-border-width-right-facet-header-default: var(
+    --x-size-border-width-right-facet-header-line
+  );
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-bottom-facet-header-line
+  );
+  --x-size-border-width-left-facet-header-default: var(
+    --x-size-border-width-left-facet-header-line
+  );
+}
 :root {
   --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
@@ -7861,6 +7832,9 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
@@ -7868,9 +7842,6 @@
 :root {
   --x-size-width-dropdown-s: 74px;
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7886,6 +7857,14 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
+:root {
+  --x-size-gap-dropdown-pill: var(--x-size-base-03);
+  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+}
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -8344,12 +8323,17 @@
   left: 0;
 }
 :root {
-  --x-size-gap-dropdown-pill: var(--x-size-base-03);
-  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
 :root {
   --x-size-gap-dropdown-card: var(--x-size-base-03);
@@ -8364,15 +8348,35 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
-: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-dropdown--card {
+  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-left-dropdown-default: var(
+    --x-size-border-radius-top-left-dropdown-card
+  );
+  --x-size-border-radius-top-right-dropdown-default: var(
+    --x-size-border-radius-top-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-bottom-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(
+    --x-size-border-radius-bottom-left-dropdown-card
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-top-dropdown-list-default: var(
+    --x-size-border-width-top-dropdown-list-card
+  );
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-right-dropdown-list-card
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-bottom-dropdown-list-card
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-left-dropdown-list-card
+  );
 }
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
@@ -8395,6 +8399,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);
@@ -8496,6 +8510,11 @@
   --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);
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 :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);
@@ -8523,11 +8542,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 {
@@ -8568,49 +8582,6 @@
   --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-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
-.x-dropdown--card {
-  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-left-dropdown-default: var(
-    --x-size-border-radius-top-left-dropdown-card
-  );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-top-dropdown-list-default: var(
-    --x-size-border-width-top-dropdown-list-card
-  );
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
-  );
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,6 +8674,23 @@
   --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);
 }
+: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-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 {
@@ -8728,16 +8716,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);
@@ -8799,6 +8777,13 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #243d48;
   --x-color-base-auxiliary: #bfe1ec;
@@ -8813,16 +8798,30 @@
   --x-color-base-transparent: transparent;
 }
 :root {
-  --x-size-border-radius-base-none: 0;
-  --x-size-border-radius-base-s: var(--x-size-base-02);
-  --x-size-border-radius-base-m: var(--x-size-base-06);
-  --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px;
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
 }
-: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);
-}