@kcascend/liquid-ui 0.0.1

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 (180) hide show
  1. package/README.md +64 -0
  2. package/dist/components/Accordion/Accordion.d.ts +3 -0
  3. package/dist/components/Accordion/Accordion.d.ts.map +1 -0
  4. package/dist/components/Accordion/Accordion.js +46 -0
  5. package/dist/components/Breadcrumb/Breadcrumb.d.ts +3 -0
  6. package/dist/components/Breadcrumb/Breadcrumb.d.ts.map +1 -0
  7. package/dist/components/Breadcrumb/Breadcrumb.js +34 -0
  8. package/dist/components/Button/Button.d.ts +3 -0
  9. package/dist/components/Button/Button.d.ts.map +1 -0
  10. package/dist/components/Button/Button.js +7 -0
  11. package/dist/components/Card/Card.d.ts +3 -0
  12. package/dist/components/Card/Card.d.ts.map +1 -0
  13. package/dist/components/Card/Card.js +19 -0
  14. package/dist/components/Checkbox/Checkbox.d.ts +3 -0
  15. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
  16. package/dist/components/Checkbox/Checkbox.js +17 -0
  17. package/dist/components/ContainedList/ContainedList.d.ts +3 -0
  18. package/dist/components/ContainedList/ContainedList.d.ts.map +1 -0
  19. package/dist/components/ContainedList/ContainedList.js +26 -0
  20. package/dist/components/DataTable/DataTable.d.ts +3 -0
  21. package/dist/components/DataTable/DataTable.d.ts.map +1 -0
  22. package/dist/components/DataTable/DataTable.js +20 -0
  23. package/dist/components/DescriptionList/DescriptionList.d.ts +3 -0
  24. package/dist/components/DescriptionList/DescriptionList.d.ts.map +1 -0
  25. package/dist/components/DescriptionList/DescriptionList.js +14 -0
  26. package/dist/components/Form/Form.d.ts +5 -0
  27. package/dist/components/Form/Form.d.ts.map +1 -0
  28. package/dist/components/Form/Form.js +32 -0
  29. package/dist/components/GridLayout/GridLayout.d.ts +4 -0
  30. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -0
  31. package/dist/components/GridLayout/GridLayout.js +138 -0
  32. package/dist/components/GridLayout/gridTokens.d.ts +18 -0
  33. package/dist/components/GridLayout/gridTokens.d.ts.map +1 -0
  34. package/dist/components/GridLayout/gridTokens.js +91 -0
  35. package/dist/components/Icon/Icon.d.ts +11 -0
  36. package/dist/components/Icon/Icon.d.ts.map +1 -0
  37. package/dist/components/Icon/Icon.js +25 -0
  38. package/dist/components/Icon/icons.d.ts +21 -0
  39. package/dist/components/Icon/icons.d.ts.map +1 -0
  40. package/dist/components/Icon/icons.js +20 -0
  41. package/dist/components/Icon/index.d.ts +3 -0
  42. package/dist/components/Icon/index.d.ts.map +1 -0
  43. package/dist/components/Icon/index.js +1 -0
  44. package/dist/components/Icons/Icons.d.ts +3 -0
  45. package/dist/components/Icons/Icons.d.ts.map +1 -0
  46. package/dist/components/Icons/Icons.js +1 -0
  47. package/dist/components/Index/Index.d.ts +3 -0
  48. package/dist/components/Index/Index.d.ts.map +1 -0
  49. package/dist/components/Index/Index.js +114 -0
  50. package/dist/components/InlineNotification/InlineNotification.d.ts +3 -0
  51. package/dist/components/InlineNotification/InlineNotification.d.ts.map +1 -0
  52. package/dist/components/InlineNotification/InlineNotification.js +47 -0
  53. package/dist/components/Link/Link.d.ts +3 -0
  54. package/dist/components/Link/Link.d.ts.map +1 -0
  55. package/dist/components/Link/Link.js +23 -0
  56. package/dist/components/Modal/Modal.d.ts +3 -0
  57. package/dist/components/Modal/Modal.d.ts.map +1 -0
  58. package/dist/components/Modal/Modal.js +27 -0
  59. package/dist/components/Pagination/Pagination.d.ts +3 -0
  60. package/dist/components/Pagination/Pagination.d.ts.map +1 -0
  61. package/dist/components/Pagination/Pagination.js +34 -0
  62. package/dist/components/Radio/Radio.d.ts +3 -0
  63. package/dist/components/Radio/Radio.d.ts.map +1 -0
  64. package/dist/components/Radio/Radio.js +13 -0
  65. package/dist/components/SearchInput/SearchInput.d.ts +3 -0
  66. package/dist/components/SearchInput/SearchInput.d.ts.map +1 -0
  67. package/dist/components/SearchInput/SearchInput.js +37 -0
  68. package/dist/components/SelectInput/SelectInput.d.ts +3 -0
  69. package/dist/components/SelectInput/SelectInput.d.ts.map +1 -0
  70. package/dist/components/SelectInput/SelectInput.js +14 -0
  71. package/dist/components/StructuredList/StructuredList.d.ts +3 -0
  72. package/dist/components/StructuredList/StructuredList.d.ts.map +1 -0
  73. package/dist/components/StructuredList/StructuredList.js +17 -0
  74. package/dist/components/Tabs/Tabs.d.ts +3 -0
  75. package/dist/components/Tabs/Tabs.d.ts.map +1 -0
  76. package/dist/components/Tabs/Tabs.js +27 -0
  77. package/dist/components/Tag/Tag.d.ts +3 -0
  78. package/dist/components/Tag/Tag.d.ts.map +1 -0
  79. package/dist/components/Tag/Tag.js +8 -0
  80. package/dist/components/TextArea/TextArea.d.ts +3 -0
  81. package/dist/components/TextArea/TextArea.d.ts.map +1 -0
  82. package/dist/components/TextArea/TextArea.js +15 -0
  83. package/dist/components/TextInput/TextInput.d.ts +3 -0
  84. package/dist/components/TextInput/TextInput.d.ts.map +1 -0
  85. package/dist/components/TextInput/TextInput.js +20 -0
  86. package/dist/components/ToggleInput/ToggleInput.d.ts +3 -0
  87. package/dist/components/ToggleInput/ToggleInput.d.ts.map +1 -0
  88. package/dist/components/ToggleInput/ToggleInput.js +10 -0
  89. package/dist/components/Tooltip/Tooltip.d.ts +3 -0
  90. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
  91. package/dist/components/Tooltip/Tooltip.js +13 -0
  92. package/dist/generated/tokens.d.ts +9836 -0
  93. package/dist/generated/tokens.d.ts.map +1 -0
  94. package/dist/generated/tokens.js +9834 -0
  95. package/dist/governance/accordionGovernance.d.ts +3 -0
  96. package/dist/governance/accordionGovernance.d.ts.map +1 -0
  97. package/dist/governance/accordionGovernance.js +9 -0
  98. package/dist/governance/breadcrumbGovernance.d.ts +3 -0
  99. package/dist/governance/breadcrumbGovernance.d.ts.map +1 -0
  100. package/dist/governance/breadcrumbGovernance.js +9 -0
  101. package/dist/governance/buttonGovernance.d.ts +3 -0
  102. package/dist/governance/buttonGovernance.d.ts.map +1 -0
  103. package/dist/governance/buttonGovernance.js +9 -0
  104. package/dist/governance/cardGovernance.d.ts +3 -0
  105. package/dist/governance/cardGovernance.d.ts.map +1 -0
  106. package/dist/governance/cardGovernance.js +9 -0
  107. package/dist/governance/checkboxGovernance.d.ts +3 -0
  108. package/dist/governance/checkboxGovernance.d.ts.map +1 -0
  109. package/dist/governance/checkboxGovernance.js +10 -0
  110. package/dist/governance/containedListGovernance.d.ts +3 -0
  111. package/dist/governance/containedListGovernance.d.ts.map +1 -0
  112. package/dist/governance/containedListGovernance.js +9 -0
  113. package/dist/governance/dataTableGovernance.d.ts +3 -0
  114. package/dist/governance/dataTableGovernance.d.ts.map +1 -0
  115. package/dist/governance/dataTableGovernance.js +10 -0
  116. package/dist/governance/descriptionListGovernance.d.ts +3 -0
  117. package/dist/governance/descriptionListGovernance.d.ts.map +1 -0
  118. package/dist/governance/descriptionListGovernance.js +9 -0
  119. package/dist/governance/formGovernance.d.ts +3 -0
  120. package/dist/governance/formGovernance.d.ts.map +1 -0
  121. package/dist/governance/formGovernance.js +9 -0
  122. package/dist/governance/gridLayoutGovernance.d.ts +3 -0
  123. package/dist/governance/gridLayoutGovernance.d.ts.map +1 -0
  124. package/dist/governance/gridLayoutGovernance.js +9 -0
  125. package/dist/governance/indexGovernance.d.ts +3 -0
  126. package/dist/governance/indexGovernance.d.ts.map +1 -0
  127. package/dist/governance/indexGovernance.js +9 -0
  128. package/dist/governance/inlineNotificationGovernance.d.ts +3 -0
  129. package/dist/governance/inlineNotificationGovernance.d.ts.map +1 -0
  130. package/dist/governance/inlineNotificationGovernance.js +9 -0
  131. package/dist/governance/linkGovernance.d.ts +3 -0
  132. package/dist/governance/linkGovernance.d.ts.map +1 -0
  133. package/dist/governance/linkGovernance.js +9 -0
  134. package/dist/governance/modalGovernance.d.ts +3 -0
  135. package/dist/governance/modalGovernance.d.ts.map +1 -0
  136. package/dist/governance/modalGovernance.js +10 -0
  137. package/dist/governance/paginationGovernance.d.ts +3 -0
  138. package/dist/governance/paginationGovernance.d.ts.map +1 -0
  139. package/dist/governance/paginationGovernance.js +10 -0
  140. package/dist/governance/radioGovernance.d.ts +3 -0
  141. package/dist/governance/radioGovernance.d.ts.map +1 -0
  142. package/dist/governance/radioGovernance.js +10 -0
  143. package/dist/governance/searchInputGovernance.d.ts +3 -0
  144. package/dist/governance/searchInputGovernance.d.ts.map +1 -0
  145. package/dist/governance/searchInputGovernance.js +10 -0
  146. package/dist/governance/selectInputGovernance.d.ts +3 -0
  147. package/dist/governance/selectInputGovernance.d.ts.map +1 -0
  148. package/dist/governance/selectInputGovernance.js +10 -0
  149. package/dist/governance/structuredListGovernance.d.ts +3 -0
  150. package/dist/governance/structuredListGovernance.d.ts.map +1 -0
  151. package/dist/governance/structuredListGovernance.js +9 -0
  152. package/dist/governance/tabsGovernance.d.ts +3 -0
  153. package/dist/governance/tabsGovernance.d.ts.map +1 -0
  154. package/dist/governance/tabsGovernance.js +10 -0
  155. package/dist/governance/tagGovernance.d.ts +3 -0
  156. package/dist/governance/tagGovernance.d.ts.map +1 -0
  157. package/dist/governance/tagGovernance.js +10 -0
  158. package/dist/governance/textAreaGovernance.d.ts +3 -0
  159. package/dist/governance/textAreaGovernance.d.ts.map +1 -0
  160. package/dist/governance/textAreaGovernance.js +10 -0
  161. package/dist/governance/textInputGovernance.d.ts +3 -0
  162. package/dist/governance/textInputGovernance.d.ts.map +1 -0
  163. package/dist/governance/textInputGovernance.js +10 -0
  164. package/dist/governance/toggleInputGovernance.d.ts +3 -0
  165. package/dist/governance/toggleInputGovernance.d.ts.map +1 -0
  166. package/dist/governance/toggleInputGovernance.js +10 -0
  167. package/dist/governance/tooltipGovernance.d.ts +3 -0
  168. package/dist/governance/tooltipGovernance.d.ts.map +1 -0
  169. package/dist/governance/tooltipGovernance.js +10 -0
  170. package/dist/index.d.ts +56 -0
  171. package/dist/index.d.ts.map +1 -0
  172. package/dist/index.js +52 -0
  173. package/dist/styles.css +4426 -0
  174. package/dist/tokens/components.css +559 -0
  175. package/dist/tokens/primitives.css +179 -0
  176. package/dist/tokens/semantic.css +376 -0
  177. package/dist/types.d.ts +336 -0
  178. package/dist/types.d.ts.map +1 -0
  179. package/dist/types.js +1 -0
  180. package/package.json +32 -0
package/dist/styles.css ADDED
@@ -0,0 +1,4426 @@
1
+ @import 'normalize.css/normalize.css';
2
+ @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&family=Roboto+Condensed:wght@500;600&display=swap');
3
+
4
+ :root {
5
+ --primitives-color-base-white: #ffffffff;
6
+ --primitives-color-base-black: #000000ff;
7
+ --primitives-color-gray-10: #f4f4f4ff;
8
+ --primitives-color-gray-20: #e0e0e0ff;
9
+ --primitives-color-gray-30: #c6c6c6ff;
10
+ --primitives-color-gray-40: #a8a8a8ff;
11
+ --primitives-color-gray-50: #8d8d8dff;
12
+ --primitives-color-gray-60: #6f6f6fff;
13
+ --primitives-color-gray-70: #525252ff;
14
+ --primitives-color-gray-80: #393939ff;
15
+ --primitives-color-gray-90: #262626ff;
16
+ --primitives-color-gray-100: #161616ff;
17
+ --primitives-color-albacore-10: #eaf6faff;
18
+ --primitives-color-albacore-20: #d5ecf3ff;
19
+ --primitives-color-albacore-30: #aad6e4ff;
20
+ --primitives-color-albacore-40: #80bfd2ff;
21
+ --primitives-color-albacore-50: #58a7bdff;
22
+ --primitives-color-albacore-60: #378ca5ff;
23
+ --primitives-color-albacore-70: #187089ff;
24
+ --primitives-color-albacore-80: #035268ff;
25
+ --primitives-color-albacore-90: #002c3aff;
26
+ --primitives-color-green-10: #defbe6ff;
27
+ --primitives-color-green-20: #a7f0baff;
28
+ --primitives-color-green-30: #6fdc8cff;
29
+ --primitives-color-green-40: #42be65ff;
30
+ --primitives-color-green-50: #24a148ff;
31
+ --primitives-color-green-60: #198038ff;
32
+ --primitives-color-green-70: #0e6027ff;
33
+ --primitives-color-green-80: #044317ff;
34
+ --primitives-color-green-90: #022d0dff;
35
+ --primitives-color-green-100: #071908ff;
36
+ --primitives-color-yellow-10: #fcf4d6ff;
37
+ --primitives-color-yellow-20: #fddc69ff;
38
+ --primitives-color-yellow-30: #f1c21bff;
39
+ --primitives-color-yellow-40: #d2a106ff;
40
+ --primitives-color-yellow-50: #b28600ff;
41
+ --primitives-color-yellow-60: #8e6a00ff;
42
+ --primitives-color-yellow-70: #684e00ff;
43
+ --primitives-color-yellow-80: #483700ff;
44
+ --primitives-color-yellow-90: #302400ff;
45
+ --primitives-color-yellow-100: #1c1500ff;
46
+ --primitives-color-red-10: #fff1f1ff;
47
+ --primitives-color-red-20: #ffd7d9ff;
48
+ --primitives-color-red-30: #ffb3b8ff;
49
+ --primitives-color-red-40: #ff8389ff;
50
+ --primitives-color-red-50: #fa4d56ff;
51
+ --primitives-color-red-60: #da1e28ff;
52
+ --primitives-color-red-70: #a2191fff;
53
+ --primitives-color-red-80: #750e13ff;
54
+ --primitives-color-red-90: #520408ff;
55
+ --primitives-color-red-100: #2d0709ff;
56
+ --primitives-color-blue-10: #edf5ffff;
57
+ --primitives-color-blue-20: #d0e2ffff;
58
+ --primitives-color-blue-30: #a6c8ffff;
59
+ --primitives-color-blue-40: #78a9ffff;
60
+ --primitives-color-blue-50: #4589ffff;
61
+ --primitives-color-blue-60: #0f62feff;
62
+ --primitives-color-blue-70: #0043ceff;
63
+ --primitives-color-blue-80: #002d9cff;
64
+ --primitives-color-blue-90: #001d6cff;
65
+ --primitives-color-blue-100: #001141ff;
66
+ --primitives-color-purple-10: #f6f2ffff;
67
+ --primitives-color-purple-20: #e8daffff;
68
+ --primitives-color-purple-30: #d4bbffff;
69
+ --primitives-color-purple-40: #be95ffff;
70
+ --primitives-color-purple-50: #a56effff;
71
+ --primitives-color-purple-60: #8a3ffcff;
72
+ --primitives-color-purple-70: #6929c4ff;
73
+ --primitives-color-purple-80: #491d8bff;
74
+ --primitives-color-purple-90: #31135eff;
75
+ --primitives-color-purple-100: #1c0f30ff;
76
+ --primitives-color-rainforest-10: #f5fcfaff;
77
+ --primitives-color-rainforest-20: #cdeee5ff;
78
+ --primitives-color-rainforest-30: #a7decfff;
79
+ --primitives-color-rainforest-40: #84ccb7ff;
80
+ --primitives-color-rainforest-50: #63b79fff;
81
+ --primitives-color-rainforest-60: #459f86ff;
82
+ --primitives-color-rainforest-70: #00755cff;
83
+ --primitives-color-rainforest-80: #1d5a48ff;
84
+ --primitives-color-rainforest-90: #102f26ff;
85
+ --primitives-color-salmon-10: #fff6f5ff;
86
+ --primitives-color-salmon-20: #ffd2ccff;
87
+ --primitives-color-salmon-30: #ffb1a3ff;
88
+ --primitives-color-salmon-40: #fa937eff;
89
+ --primitives-color-salmon-50: #f0785fff;
90
+ --primitives-color-salmon-60: #e16044ff;
91
+ --primitives-color-salmon-70: #ce4a2eff;
92
+ --primitives-color-salmon-80: #8a3321ff;
93
+ --primitives-color-salmon-90: #481c12ff;
94
+ --primitives-color-alpha-gray-10-25: #f4f4f440;
95
+ --primitives-color-alpha-gray-50-25: #8d8d8d40;
96
+ --primitives-color-alpha-gray-50-50: #8d8d8d80;
97
+ --primitives-color-alpha-gray-100-25: #16161640;
98
+ --primitives-color-alpha-white-0: #ffffff00;
99
+ --primitives-color-alpha-white-25: #ffffff40;
100
+ --primitives-color-alpha-black-60: #00000099;
101
+ --primitives-space-0: 0px;
102
+ --primitives-space-2: 2px;
103
+ --primitives-space-4: 4px;
104
+ --primitives-space-8: 8px;
105
+ --primitives-space-12: 12px;
106
+ --primitives-space-16: 16px;
107
+ --primitives-space-20: 20px;
108
+ --primitives-space-24: 24px;
109
+ --primitives-space-32: 32px;
110
+ --primitives-space-40: 40px;
111
+ --primitives-space-48: 48px;
112
+ --primitives-space-64: 64px;
113
+ --primitives-space-80: 80px;
114
+ --primitives-space-96: 96px;
115
+ --primitives-space-160: 160px;
116
+ --primitives-stroke-1: 1px;
117
+ --primitives-stroke-2: 2px;
118
+ --primitives-stroke-4: 4px;
119
+ --primitives-typography-family-roboto-condensed: Roboto Condensed;
120
+ --primitives-typography-family-cabin: Cabin;
121
+ --primitives-typography-weight-regular: Regular;
122
+ --primitives-typography-weight-medium: Medium;
123
+ --primitives-typography-weight-semibold: SemiBold;
124
+ --primitives-typography-weight-bold: Bold;
125
+ --primitives-typography-size-12: 12px;
126
+ --primitives-typography-size-14: 14px;
127
+ --primitives-typography-size-16: 16px;
128
+ --primitives-typography-size-18: 18px;
129
+ --primitives-typography-size-20: 20px;
130
+ --primitives-typography-size-24: 24px;
131
+ --primitives-typography-size-28: 28px;
132
+ --primitives-typography-size-32: 32px;
133
+ --primitives-typography-size-36: 36px;
134
+ --primitives-typography-size-40: 40px;
135
+ --primitives-typography-size-44: 44px;
136
+ --primitives-typography-size-48: 48px;
137
+ --primitives-typography-size-54: 54px;
138
+ --primitives-typography-size-60: 60px;
139
+ --primitives-typography-size-68: 68px;
140
+ --primitives-typography-size-76: 76px;
141
+ --primitives-typography-size-84: 84px;
142
+ --primitives-typography-letter-spacing-0: 0px;
143
+ --primitives-typography-letter-spacing-minus-024: -0.24px;
144
+ --primitives-typography-letter-spacing-plus-016: 0.16px;
145
+ --primitives-typography-letter-spacing-plus-032: 0.32px;
146
+ --primitives-typography-letter-spacing-minus-016: -0.16px;
147
+ --primitives-typography-line-height-16: 16px;
148
+ --primitives-typography-line-height-18: 18px;
149
+ --primitives-typography-line-height-20: 20px;
150
+ --primitives-typography-line-height-24: 24px;
151
+ --primitives-typography-line-height-28: 28px;
152
+ --primitives-typography-line-height-32: 32px;
153
+ --primitives-typography-line-height-36: 36px;
154
+ --primitives-typography-line-height-40: 40px;
155
+ --primitives-typography-line-height-44: 44px;
156
+ --primitives-typography-line-height-48: 48px;
157
+ --primitives-typography-line-height-50: 50px;
158
+ --primitives-typography-line-height-56: 56px;
159
+ --primitives-typography-line-height-64: 64px;
160
+ --primitives-typography-line-height-70: 70px;
161
+ --primitives-typography-line-height-76: 76px;
162
+ --primitives-opacity-0: 0px;
163
+ --primitives-opacity-40: 40px;
164
+ --primitives-opacity-60: 60px;
165
+ --primitives-opacity-80: 80px;
166
+ --primitives-opacity-100: 100px;
167
+ --primitives-radius-0: 0px;
168
+ --primitives-radius-4: 4px;
169
+ --primitives-radius-8: 8px;
170
+ --primitives-radius-16: 16px;
171
+ --primitives-radius-999: 999px;
172
+ --primitives-size-12: 12px;
173
+ --primitives-size-16: 16px;
174
+ --primitives-size-20: 20px;
175
+ --primitives-size-24: 24px;
176
+ --primitives-size-32: 32px;
177
+ --primitives-size-40: 40px;
178
+ --primitives-size-44: 44px;
179
+ --primitives-size-48: 48px;
180
+ --primitives-width-288: 288px;
181
+ --primitives-width-608: 608px;
182
+ }
183
+
184
+ :root {
185
+ --font-display-01-font-family: "Roboto Condensed";
186
+ --font-display-01-font-size: 68px;
187
+ --font-display-01-font-weight: 600;
188
+ --font-display-01-line-height: 76px;
189
+ --font-display-01-letter-spacing: -0.24px;
190
+ --font-display-01-text-transform: none;
191
+ --font-display-01: 600 68px/76px "Roboto Condensed";
192
+ --font-display-02-font-family: "Roboto Condensed";
193
+ --font-display-02-font-size: 60px;
194
+ --font-display-02-font-weight: 600;
195
+ --font-display-02-line-height: 70px;
196
+ --font-display-02-letter-spacing: -0.16px;
197
+ --font-display-02-text-transform: none;
198
+ --font-display-02: 600 60px/70px "Roboto Condensed";
199
+ --font-display-mobile-01-font-family: "Roboto Condensed";
200
+ --font-display-mobile-01-font-size: 48px;
201
+ --font-display-mobile-01-font-weight: 600;
202
+ --font-display-mobile-01-line-height: 56px;
203
+ --font-display-mobile-01-letter-spacing: 0px;
204
+ --font-display-mobile-01-text-transform: none;
205
+ --font-display-mobile-01: 600 48px/56px "Roboto Condensed";
206
+ --font-display-mobile-02-font-family: "Roboto Condensed";
207
+ --font-display-mobile-02-font-size: 40px;
208
+ --font-display-mobile-02-font-weight: 600;
209
+ --font-display-mobile-02-line-height: 48px;
210
+ --font-display-mobile-02-letter-spacing: 0px;
211
+ --font-display-mobile-02-text-transform: none;
212
+ --font-display-mobile-02: 600 40px/48px "Roboto Condensed";
213
+ --font-heading-01-font-family: "Roboto Condensed";
214
+ --font-heading-01-font-size: 54px;
215
+ --font-heading-01-font-weight: 500;
216
+ --font-heading-01-line-height: 64px;
217
+ --font-heading-01-letter-spacing: 0px;
218
+ --font-heading-01-text-transform: none;
219
+ --font-heading-01: 500 54px/64px "Roboto Condensed";
220
+ --font-heading-02-font-family: "Roboto Condensed";
221
+ --font-heading-02-font-size: 40px;
222
+ --font-heading-02-font-weight: 500;
223
+ --font-heading-02-line-height: 50px;
224
+ --font-heading-02-letter-spacing: 0px;
225
+ --font-heading-02-text-transform: none;
226
+ --font-heading-02: 500 40px/50px "Roboto Condensed";
227
+ --font-heading-03-font-family: "Roboto Condensed";
228
+ --font-heading-03-font-size: 32px;
229
+ --font-heading-03-font-weight: 500;
230
+ --font-heading-03-line-height: 40px;
231
+ --font-heading-03-letter-spacing: 0px;
232
+ --font-heading-03-text-transform: none;
233
+ --font-heading-03: 500 32px/40px "Roboto Condensed";
234
+ --font-heading-04-font-family: "Roboto Condensed";
235
+ --font-heading-04-font-size: 24px;
236
+ --font-heading-04-font-weight: 500;
237
+ --font-heading-04-line-height: 32px;
238
+ --font-heading-04-letter-spacing: 0px;
239
+ --font-heading-04-text-transform: none;
240
+ --font-heading-04: 500 24px/32px "Roboto Condensed";
241
+ --font-heading-compact-01-font-family: "Roboto Condensed";
242
+ --font-heading-compact-01-font-size: 18px;
243
+ --font-heading-compact-01-font-weight: 600;
244
+ --font-heading-compact-01-line-height: 24px;
245
+ --font-heading-compact-01-letter-spacing: 0px;
246
+ --font-heading-compact-01-text-transform: uppercase;
247
+ --font-heading-compact-01: 600 18px/24px "Roboto Condensed";
248
+ --font-heading-compact-02-font-family: "Cabin";
249
+ --font-heading-compact-02-font-size: 16px;
250
+ --font-heading-compact-02-font-weight: 600;
251
+ --font-heading-compact-02-line-height: 24px;
252
+ --font-heading-compact-02-letter-spacing: 0px;
253
+ --font-heading-compact-02-text-transform: none;
254
+ --font-heading-compact-02: 600 16px/24px "Cabin";
255
+ --font-heading-mobile-01-font-family: "Roboto Condensed";
256
+ --font-heading-mobile-01-font-size: 36px;
257
+ --font-heading-mobile-01-font-weight: 500;
258
+ --font-heading-mobile-01-line-height: 44px;
259
+ --font-heading-mobile-01-letter-spacing: 0px;
260
+ --font-heading-mobile-01-text-transform: none;
261
+ --font-heading-mobile-01: 500 36px/44px "Roboto Condensed";
262
+ --font-heading-mobile-02-font-family: "Roboto Condensed";
263
+ --font-heading-mobile-02-font-size: 32px;
264
+ --font-heading-mobile-02-font-weight: 500;
265
+ --font-heading-mobile-02-line-height: 40px;
266
+ --font-heading-mobile-02-letter-spacing: 0px;
267
+ --font-heading-mobile-02-text-transform: none;
268
+ --font-heading-mobile-02: 500 32px/40px "Roboto Condensed";
269
+ --font-heading-mobile-03-font-family: "Roboto Condensed";
270
+ --font-heading-mobile-03-font-size: 28px;
271
+ --font-heading-mobile-03-font-weight: 500;
272
+ --font-heading-mobile-03-line-height: 36px;
273
+ --font-heading-mobile-03-letter-spacing: 0px;
274
+ --font-heading-mobile-03-text-transform: none;
275
+ --font-heading-mobile-03: 500 28px/36px "Roboto Condensed";
276
+ --font-heading-mobile-04-font-family: "Roboto Condensed";
277
+ --font-heading-mobile-04-font-size: 20px;
278
+ --font-heading-mobile-04-font-weight: 500;
279
+ --font-heading-mobile-04-line-height: 28px;
280
+ --font-heading-mobile-04-letter-spacing: 0px;
281
+ --font-heading-mobile-04-text-transform: none;
282
+ --font-heading-mobile-04: 500 20px/28px "Roboto Condensed";
283
+ --font-body-01-font-family: "Cabin";
284
+ --font-body-01-font-size: 18px;
285
+ --font-body-01-font-weight: 400;
286
+ --font-body-01-line-height: 28px;
287
+ --font-body-01-letter-spacing: 0px;
288
+ --font-body-01-text-transform: none;
289
+ --font-body-01: 400 18px/28px "Cabin";
290
+ --font-body-02-font-family: "Cabin";
291
+ --font-body-02-font-size: 16px;
292
+ --font-body-02-font-weight: 400;
293
+ --font-body-02-line-height: 24px;
294
+ --font-body-02-letter-spacing: 0px;
295
+ --font-body-02-text-transform: none;
296
+ --font-body-02: 400 16px/24px "Cabin";
297
+ --font-body-03-font-family: "Cabin";
298
+ --font-body-03-font-size: 14px;
299
+ --font-body-03-font-weight: 400;
300
+ --font-body-03-line-height: 20px;
301
+ --font-body-03-letter-spacing: 0.16px;
302
+ --font-body-03-text-transform: none;
303
+ --font-body-03: 400 14px/20px "Cabin";
304
+ --font-utility-helper-font-family: "Cabin";
305
+ --font-utility-helper-font-size: 12px;
306
+ --font-utility-helper-font-weight: 400;
307
+ --font-utility-helper-line-height: 16px;
308
+ --font-utility-helper-letter-spacing: 0.32px;
309
+ --font-utility-helper-text-transform: none;
310
+ --font-utility-helper: 400 12px/16px "Cabin";
311
+ --font-utility-label-01-font-family: "Cabin";
312
+ --font-utility-label-01-font-size: 14px;
313
+ --font-utility-label-01-font-weight: 500;
314
+ --font-utility-label-01-line-height: 18px;
315
+ --font-utility-label-01-letter-spacing: 0.16px;
316
+ --font-utility-label-01-text-transform: none;
317
+ --font-utility-label-01: 500 14px/18px "Cabin";
318
+ --font-utility-label-02-font-family: "Cabin";
319
+ --font-utility-label-02-font-size: 12px;
320
+ --font-utility-label-02-font-weight: 500;
321
+ --font-utility-label-02-line-height: 16px;
322
+ --font-utility-label-02-letter-spacing: 0.32px;
323
+ --font-utility-label-02-text-transform: none;
324
+ --font-utility-label-02: 500 12px/16px "Cabin";
325
+ --semantic-color-background-background: var(--primitives-color-base-white);
326
+ --semantic-color-background-background-inverse: var(--primitives-color-gray-80);
327
+ --semantic-color-background-background-selected: var(--primitives-color-alpha-gray-50-25);
328
+ --semantic-color-background-background-brand-strong: var(--primitives-color-albacore-70);
329
+ --semantic-color-background-background-brand-subtle: var(--primitives-color-albacore-10);
330
+ --semantic-color-background-background-disabled: var(--primitives-color-gray-20);
331
+ --semantic-color-background-transparent: var(--primitives-color-alpha-white-0);
332
+ --semantic-color-background-background-info: var(--primitives-color-blue-10);
333
+ --semantic-color-background-background-success: var(--primitives-color-green-10);
334
+ --semantic-color-background-background-warning: var(--primitives-color-yellow-10);
335
+ --semantic-color-background-background-error: var(--primitives-color-red-10);
336
+ --semantic-color-surface-surface-01: var(--primitives-color-gray-10);
337
+ --semantic-color-surface-surface-01-hover: var(--primitives-color-gray-20);
338
+ --semantic-color-surface-surface-01-selected: var(--primitives-color-gray-20);
339
+ --semantic-color-surface-surface-02: var(--primitives-color-base-white);
340
+ --semantic-color-surface-surface-02-hover: var(--primitives-color-gray-10);
341
+ --semantic-color-surface-surface-03: var(--primitives-color-gray-20);
342
+ --semantic-color-surface-surface-03-hover: var(--primitives-color-gray-30);
343
+ --semantic-color-surface-surface-02-selected: var(--primitives-color-gray-10);
344
+ --semantic-color-text-text-primary: var(--primitives-color-gray-100);
345
+ --semantic-color-text-text-secondary: var(--primitives-color-gray-70);
346
+ --semantic-color-text-text-placeholder: var(--primitives-color-gray-60);
347
+ --semantic-color-text-text-helper: var(--primitives-color-gray-60);
348
+ --semantic-color-text-text-error: var(--primitives-color-red-60);
349
+ --semantic-color-text-text-inverse: var(--primitives-color-base-white);
350
+ --semantic-color-text-text-disabled: var(--primitives-color-gray-40);
351
+ --semantic-color-text-text-brand: var(--primitives-color-albacore-70);
352
+ --semantic-color-text-text-on-color-disabled: var(--primitives-color-gray-70);
353
+ --semantic-color-text-text-on-color: var(--primitives-color-base-white);
354
+ --semantic-color-text-text-on-color-selected: var(--primitives-color-base-white);
355
+ --semantic-color-link-link-primary: var(--primitives-color-blue-60);
356
+ --semantic-color-link-link-primary-hover: var(--primitives-color-blue-70);
357
+ --semantic-color-link-link-inverse: var(--primitives-color-blue-40);
358
+ --semantic-color-link-link-inverse-hover: var(--primitives-color-blue-30);
359
+ --semantic-color-link-link-visited: var(--primitives-color-purple-60);
360
+ --semantic-color-link-link-inverse-visited: var(--primitives-color-purple-40);
361
+ --semantic-color-icon-icon-primary: var(--primitives-color-gray-90);
362
+ --semantic-color-icon-icon-secondary: var(--primitives-color-gray-70);
363
+ --semantic-color-icon-icon-interactive: var(--primitives-color-blue-60);
364
+ --semantic-color-icon-icon-disabled: var(--primitives-color-gray-40);
365
+ --semantic-color-icon-icon-brand: var(--primitives-color-albacore-70);
366
+ --semantic-color-icon-icon-error: var(--primitives-color-red-60);
367
+ --semantic-color-icon-icon-selected: var(--primitives-color-albacore-70);
368
+ --semantic-color-icon-icon-on-color-selected: var(--primitives-color-base-white);
369
+ --semantic-color-icon-icon-on-color-disabled: var(--primitives-color-gray-70);
370
+ --semantic-color-icon-icon-on-color: var(--primitives-color-base-white);
371
+ --semantic-color-status-status-success: var(--primitives-color-green-50);
372
+ --semantic-color-status-status-warning: var(--primitives-color-yellow-50);
373
+ --semantic-color-status-status-error: var(--primitives-color-red-60);
374
+ --semantic-color-status-status-info: var(--primitives-color-blue-70);
375
+ --semantic-color-status-status-success-inverse: var(--primitives-color-green-40);
376
+ --semantic-color-status-status-warning-inverse: var(--primitives-color-yellow-30);
377
+ --semantic-color-status-status-error-inverse: var(--primitives-color-red-50);
378
+ --semantic-color-status-status-info-inverse: var(--primitives-color-blue-50);
379
+ --semantic-color-border-border-subtle: var(--primitives-color-gray-20);
380
+ --semantic-color-border-border-strong: var(--primitives-color-gray-50);
381
+ --semantic-color-border-border-inverse: var(--primitives-color-gray-100);
382
+ --semantic-color-border-border-disabled: var(--primitives-color-gray-20);
383
+ --semantic-color-border-border-selected: var(--primitives-color-albacore-70);
384
+ --semantic-color-border-border-error: var(--primitives-color-red-60);
385
+ --semantic-color-border-border-brand: var(--primitives-color-albacore-70);
386
+ --semantic-color-action-action-primary: var(--primitives-color-albacore-70);
387
+ --semantic-color-action-action-primary-hover: var(--primitives-color-albacore-80);
388
+ --semantic-color-action-action-primary-active: var(--primitives-color-albacore-80);
389
+ --semantic-color-action-action-tertiary: var(--primitives-color-albacore-70);
390
+ --semantic-color-action-action-tertiary-hover: var(--primitives-color-albacore-80);
391
+ --semantic-color-action-action-tertiary-active: var(--primitives-color-albacore-80);
392
+ --semantic-color-action-action-secondary: var(--primitives-color-albacore-70);
393
+ --semantic-color-action-action-secondary-hover: var(--primitives-color-albacore-70);
394
+ --semantic-color-action-action-secondary-active: var(--primitives-color-albacore-80);
395
+ --semantic-color-action-action-danger-primary: var(--primitives-color-red-60);
396
+ --semantic-color-action-action-danger-secondary: var(--primitives-color-red-60);
397
+ --semantic-color-action-action-danger-hover: var(--primitives-color-red-70);
398
+ --semantic-color-action-action-danger-active: var(--primitives-color-red-80);
399
+ --semantic-color-action-action-separator: var(--primitives-color-gray-20);
400
+ --semantic-color-action-action-disabled: var(--primitives-color-gray-30);
401
+ --semantic-color-focus-focus: var(--primitives-color-blue-60);
402
+ --semantic-color-focus-focus-inverse: var(--primitives-color-base-white);
403
+ --semantic-color-focus-focus-inset: var(--primitives-color-base-white);
404
+ --semantic-color-overlay-scrim: var(--primitives-color-alpha-black-60);
405
+ --semantic-color-tag-background-neutral: var(--primitives-color-gray-10);
406
+ --semantic-color-tag-background-blue: var(--primitives-color-blue-10);
407
+ --semantic-color-tag-background-green: var(--primitives-color-green-10);
408
+ --semantic-color-tag-background-purple: var(--primitives-color-purple-10);
409
+ --semantic-color-tag-text-neutral: var(--primitives-color-gray-100);
410
+ --semantic-color-tag-text-blue: var(--primitives-color-blue-70);
411
+ --semantic-color-tag-text-green: var(--primitives-color-green-80);
412
+ --semantic-color-tag-text-purple: var(--primitives-color-purple-70);
413
+ --semantic-layout-inset-sm: var(--primitives-space-12);
414
+ --semantic-layout-inset-md: var(--primitives-space-16);
415
+ --semantic-layout-inset-lg: var(--primitives-space-24);
416
+ --semantic-layout-inset-xs: var(--primitives-space-8);
417
+ --semantic-layout-inset-xl: var(--primitives-space-32);
418
+ --semantic-layout-inset-2xs: var(--primitives-space-4);
419
+ --semantic-layout-inset-2xl: var(--primitives-space-48);
420
+ --semantic-layout-inset-4xl: var(--primitives-space-96);
421
+ --semantic-layout-inset-3xl: var(--primitives-space-64);
422
+ --semantic-layout-stack-xs: var(--primitives-space-4);
423
+ --semantic-layout-stack-sm: var(--primitives-space-8);
424
+ --semantic-layout-stack-md: var(--primitives-space-12);
425
+ --semantic-layout-stack-lg: var(--primitives-space-16);
426
+ --semantic-layout-stack-xl: var(--primitives-space-24);
427
+ --semantic-layout-stack-2xl: var(--semantic-layout-spacing-32);
428
+ --semantic-layout-stack-3xl: var(--semantic-layout-spacing-40);
429
+ --semantic-layout-stack-4xl: var(--semantic-layout-spacing-48);
430
+ --semantic-layout-stack-2xs: var(--primitives-space-2);
431
+ --semantic-layout-inline-xs: var(--primitives-space-8);
432
+ --semantic-layout-inline-sm: var(--primitives-space-12);
433
+ --semantic-layout-inline-md: var(--primitives-space-16);
434
+ --semantic-layout-inline-lg: var(--primitives-space-24);
435
+ --semantic-layout-inline-xl: var(--semantic-layout-spacing-32);
436
+ --semantic-layout-icon-sm: var(--primitives-size-20);
437
+ --semantic-layout-icon-md: var(--primitives-size-24);
438
+ --semantic-layout-icon-lg: var(--primitives-size-32);
439
+ --semantic-layout-icon-xs: var(--primitives-size-16);
440
+ --semantic-layout-radius-control: var(--primitives-radius-4);
441
+ --semantic-layout-radius-container: var(--primitives-radius-8);
442
+ --semantic-layout-radius-pill: var(--primitives-radius-999);
443
+ --semantic-layout-stroke-default: var(--primitives-stroke-1);
444
+ --semantic-layout-stroke-strong: var(--primitives-stroke-2);
445
+ --semantic-layout-stroke-divider: var(--primitives-stroke-1);
446
+ --semantic-layout-stroke-divider-strong: var(--primitives-stroke-4);
447
+ --semantic-layout-section-gap: var(--primitives-space-32);
448
+ --semantic-layout-section-gap-lg: var(--primitives-space-48);
449
+ --semantic-layout-focus-ring-width: var(--primitives-stroke-2);
450
+ --semantic-layout-focus-ring-offset: var(--primitives-stroke-2);
451
+ --semantic-layout-control-height-sm: var(--primitives-size-40);
452
+ --semantic-layout-control-height-md: var(--primitives-size-44);
453
+ --semantic-layout-control-height-lg: var(--primitives-size-48);
454
+ --semantic-layout-control-padding-sm: var(--primitives-space-12);
455
+ --semantic-layout-control-padding-md: var(--primitives-space-16);
456
+ --semantic-layout-control-padding-lg: var(--primitives-space-20);
457
+ --semantic-layout-control-padding-xs: var(--primitives-space-8);
458
+ --semantic-layout-control-icon-gap: var(--primitives-space-4);
459
+ --semantic-layout-control-height-compact-sm: var(--primitives-size-24);
460
+ --semantic-layout-control-height-compact-md: var(--primitives-size-32);
461
+ --semantic-layout-control-width-md: var(--primitives-size-48);
462
+ --semantic-layout-target-min: var(--primitives-size-44);
463
+ --semantic-layout-target-recommended: var(--primitives-size-44);
464
+ --semantic-layout-spacing-0: var(--primitives-space-0);
465
+ --semantic-layout-spacing-4: var(--primitives-space-4);
466
+ --semantic-layout-spacing-8: var(--primitives-space-8);
467
+ --semantic-layout-spacing-12: var(--primitives-space-12);
468
+ --semantic-layout-spacing-16: var(--primitives-space-16);
469
+ --semantic-layout-spacing-24: var(--primitives-space-24);
470
+ --semantic-layout-spacing-32: var(--primitives-space-32);
471
+ --semantic-layout-spacing-40: var(--primitives-space-40);
472
+ --semantic-layout-spacing-48: var(--primitives-space-48);
473
+ --semantic-layout-spacing-64: var(--primitives-space-64);
474
+ --semantic-layout-spacing-80: var(--primitives-space-80);
475
+ --semantic-layout-spacing-96: var(--primitives-space-96);
476
+ --semantic-layout-spacing-160: var(--primitives-space-160);
477
+ --semantic-layout-width-md: var(--primitives-width-608);
478
+ --semantic-layout-width-xs: var(--primitives-width-288);
479
+ --semantic-type-display-display-01-family: var(--primitives-typography-family-roboto-condensed);
480
+ --semantic-type-display-display-01-weight: var(--primitives-typography-weight-semibold);
481
+ --semantic-type-display-display-01-size: var(--primitives-typography-size-68);
482
+ --semantic-type-display-display-01-line-height: var(--primitives-typography-line-height-76);
483
+ --semantic-type-display-display-01-letter-spacing: var(--primitives-typography-letter-spacing-minus-024);
484
+ --semantic-type-display-display-02-family: var(--primitives-typography-family-roboto-condensed);
485
+ --semantic-type-display-display-02-weight: var(--primitives-typography-weight-semibold);
486
+ --semantic-type-display-display-02-size: var(--primitives-typography-size-60);
487
+ --semantic-type-display-display-02-line-height: var(--primitives-typography-line-height-70);
488
+ --semantic-type-display-display-02-letter-spacing: var(--primitives-typography-letter-spacing-minus-016);
489
+ --semantic-type-heading-heading-01-family: var(--primitives-typography-family-roboto-condensed);
490
+ --semantic-type-heading-heading-01-weight: var(--primitives-typography-weight-medium);
491
+ --semantic-type-heading-heading-01-size: var(--primitives-typography-size-54);
492
+ --semantic-type-heading-heading-01-line-height: var(--primitives-typography-line-height-64);
493
+ --semantic-type-heading-heading-01-letter-spacing: var(--primitives-typography-letter-spacing-0);
494
+ --semantic-type-heading-heading-02-family: var(--primitives-typography-family-roboto-condensed);
495
+ --semantic-type-heading-heading-02-weight: var(--primitives-typography-weight-medium);
496
+ --semantic-type-heading-heading-02-size: var(--primitives-typography-size-40);
497
+ --semantic-type-heading-heading-02-line-height: var(--primitives-typography-line-height-50);
498
+ --semantic-type-heading-heading-02-letter-spacing: var(--primitives-typography-letter-spacing-0);
499
+ --semantic-type-heading-heading-03-family: var(--primitives-typography-family-roboto-condensed);
500
+ --semantic-type-heading-heading-03-weight: var(--primitives-typography-weight-medium);
501
+ --semantic-type-heading-heading-03-size: var(--primitives-typography-size-32);
502
+ --semantic-type-heading-heading-03-line-height: var(--primitives-typography-line-height-40);
503
+ --semantic-type-heading-heading-03-letter-spacing: var(--primitives-typography-letter-spacing-0);
504
+ --semantic-type-heading-heading-04-family: var(--primitives-typography-family-roboto-condensed);
505
+ --semantic-type-heading-heading-04-weight: var(--primitives-typography-weight-medium);
506
+ --semantic-type-heading-heading-04-size: var(--primitives-typography-size-24);
507
+ --semantic-type-heading-heading-04-line-height: var(--primitives-typography-line-height-32);
508
+ --semantic-type-heading-heading-04-letter-spacing: var(--primitives-typography-letter-spacing-0);
509
+ --semantic-type-heading-heading-compact-01-family: var(--primitives-typography-family-roboto-condensed);
510
+ --semantic-type-heading-heading-compact-01-weight: var(--primitives-typography-weight-semibold);
511
+ --semantic-type-heading-heading-compact-01-size: var(--primitives-typography-size-18);
512
+ --semantic-type-heading-heading-compact-01-line-height: var(--primitives-typography-line-height-24);
513
+ --semantic-type-heading-heading-compact-01-letter-spacing: var(--primitives-typography-letter-spacing-0);
514
+ --semantic-type-heading-heading-compact-02-family: var(--primitives-typography-family-cabin);
515
+ --semantic-type-heading-heading-compact-02-weight: var(--primitives-typography-weight-semibold);
516
+ --semantic-type-heading-heading-compact-02-size: var(--primitives-typography-size-16);
517
+ --semantic-type-heading-heading-compact-02-line-height: var(--primitives-typography-line-height-24);
518
+ --semantic-type-heading-heading-compact-02-letter-spacing: var(--primitives-typography-letter-spacing-0);
519
+ --semantic-type-body-lg-family: var(--primitives-typography-family-cabin);
520
+ --semantic-type-body-lg-size: var(--primitives-typography-size-18);
521
+ --semantic-type-body-lg-line-height: var(--primitives-typography-line-height-28);
522
+ --semantic-type-body-lg-letter-spacing: var(--primitives-typography-letter-spacing-0);
523
+ --semantic-type-body-lg-weight: var(--primitives-typography-weight-regular);
524
+ --semantic-type-body-md-family: var(--primitives-typography-family-cabin);
525
+ --semantic-type-body-md-size: var(--primitives-typography-size-16);
526
+ --semantic-type-body-md-line-height: var(--primitives-typography-line-height-24);
527
+ --semantic-type-body-md-letter-spacing: var(--primitives-typography-letter-spacing-0);
528
+ --semantic-type-body-md-weight: var(--primitives-typography-weight-regular);
529
+ --semantic-type-body-sm-family: var(--primitives-typography-family-cabin);
530
+ --semantic-type-body-sm-size: var(--primitives-typography-size-14);
531
+ --semantic-type-body-sm-line-height: var(--primitives-typography-line-height-20);
532
+ --semantic-type-body-sm-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
533
+ --semantic-type-body-sm-weight: var(--primitives-typography-weight-regular);
534
+ --semantic-type-label-label-01-family: var(--primitives-typography-family-cabin);
535
+ --semantic-type-label-label-01-size: var(--primitives-typography-size-14);
536
+ --semantic-type-label-label-01-line-height: var(--primitives-typography-line-height-18);
537
+ --semantic-type-label-label-01-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
538
+ --semantic-type-label-label-01-weight: var(--primitives-typography-weight-medium);
539
+ --semantic-type-label-label-02-family: var(--primitives-typography-family-cabin);
540
+ --semantic-type-label-label-02-size: var(--primitives-typography-size-12);
541
+ --semantic-type-label-label-02-line-height: var(--primitives-typography-line-height-16);
542
+ --semantic-type-label-label-02-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
543
+ --semantic-type-label-label-02-weight: var(--primitives-typography-weight-medium);
544
+ --semantic-type-label-label-compact-family: var(--primitives-typography-family-cabin);
545
+ --semantic-type-label-label-compact-weight: var(--primitives-typography-weight-medium);
546
+ --semantic-type-label-label-compact-size: var(--primitives-typography-size-14);
547
+ --semantic-type-label-label-compact-line-height: var(--primitives-typography-line-height-16);
548
+ --semantic-type-label-label-compact-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
549
+ --semantic-type-label-label-lg-family: var(--semantic-type-label-label-01-family);
550
+ --semantic-type-label-label-lg-weight: var(--semantic-type-label-label-01-weight);
551
+ --semantic-type-label-label-lg-size: var(--semantic-type-body-md-size);
552
+ --semantic-type-label-label-lg-line-height: var(--semantic-type-body-md-line-height);
553
+ --semantic-type-label-label-lg-letter-spacing: var(--semantic-type-body-md-letter-spacing);
554
+ --semantic-type-helper-helper-01-family: var(--primitives-typography-family-cabin);
555
+ --semantic-type-helper-helper-01-size: var(--primitives-typography-size-12);
556
+ --semantic-type-helper-helper-01-line-height: var(--primitives-typography-line-height-16);
557
+ --semantic-type-helper-helper-01-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
558
+ --semantic-type-helper-helper-01-weight: var(--primitives-typography-weight-regular);
559
+ }
560
+
561
+ :root {
562
+ --component-accordion-layout-width: 608px;
563
+ --component-accordion-layout-border-width: var(--primitives-stroke-1);
564
+ --component-accordion-layout-header-min-height: var(--primitives-size-48);
565
+ --component-accordion-layout-item-min-height: var(--primitives-size-48);
566
+ --component-accordion-layout-header-padding-x: var(--primitives-space-16);
567
+ --component-accordion-layout-item-padding-x: var(--primitives-space-16);
568
+ --component-accordion-layout-header-padding-y: var(--primitives-space-8);
569
+ --component-accordion-layout-item-padding-y: var(--primitives-space-8);
570
+ --component-accordion-layout-header-gap: var(--primitives-space-16);
571
+ --component-accordion-layout-content-padding-x: var(--primitives-space-16);
572
+ --component-accordion-layout-content-padding-top: var(--primitives-space-8);
573
+ --component-accordion-layout-content-padding-bottom: var(--primitives-space-24);
574
+ --component-accordion-layout-content-padding-right: var(--primitives-space-64);
575
+ --component-accordion-layout-icon-size: var(--primitives-size-24);
576
+ --component-accordion-color-header-background-default: rgba(255, 255, 255, 0);
577
+ --component-accordion-color-header-background-hover: var(--semantic-color-surface-surface-01-hover);
578
+ --component-accordion-color-surface-default: var(--semantic-color-surface-surface-01);
579
+ --component-accordion-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
580
+ --component-accordion-color-border-subtle: var(--semantic-color-border-border-subtle);
581
+ --component-accordion-color-text-title: var(--semantic-color-text-text-primary);
582
+ --component-accordion-color-text-title-disabled: var(--semantic-color-text-text-disabled);
583
+ --component-accordion-color-text-content: var(--semantic-color-text-text-primary);
584
+ --component-accordion-color-icon-default: #666666;
585
+ --component-accordion-color-icon-disabled: var(--semantic-color-icon-icon-disabled);
586
+ --component-accordion-color-focus-ring: var(--semantic-color-focus-focus);
587
+ --component-accordion-typography-title-font-family: var(--primitives-typography-family-cabin);
588
+ --component-accordion-typography-title-font-size: var(--primitives-typography-size-14);
589
+ --component-accordion-typography-title-font-weight: var(--primitives-typography-weight-regular);
590
+ --component-accordion-typography-title-line-height: var(--primitives-typography-line-height-20);
591
+ --component-accordion-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
592
+ --component-accordion-typography-content-font-family: var(--primitives-typography-family-cabin);
593
+ --component-accordion-typography-content-font-size: var(--primitives-typography-size-14);
594
+ --component-accordion-typography-content-font-weight: var(--primitives-typography-weight-regular);
595
+ --component-accordion-typography-content-line-height: var(--primitives-typography-line-height-20);
596
+ --component-accordion-typography-content-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
597
+ --component-breadcrumb-layout-gap: var(--semantic-layout-inline-xs);
598
+ --component-breadcrumb-color-label-text-default: var(--semantic-color-link-link-primary);
599
+ --component-breadcrumb-color-label-text-hover: var(--semantic-color-link-link-primary-hover);
600
+ --component-breadcrumb-color-label-text-current: var(--semantic-color-text-text-primary);
601
+ --component-breadcrumb-color-separator-text: var(--semantic-color-text-text-secondary);
602
+ --component-breadcrumb-color-border-focus: var(--semantic-color-focus-focus);
603
+ --component-breadcrumb-typography-label-font-family: var(--primitives-typography-family-cabin);
604
+ --component-breadcrumb-typography-label-font-size: var(--primitives-typography-size-14);
605
+ --component-breadcrumb-typography-label-font-weight: var(--primitives-typography-weight-regular);
606
+ --component-breadcrumb-typography-label-line-height: var(--primitives-typography-line-height-20);
607
+ --component-breadcrumb-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
608
+ --component-breadcrumb-typography-separator-font-family: var(--primitives-typography-family-cabin);
609
+ --component-breadcrumb-typography-separator-font-size: var(--primitives-typography-size-14);
610
+ --component-breadcrumb-typography-separator-font-weight: var(--primitives-typography-weight-regular);
611
+ --component-breadcrumb-typography-separator-line-height: var(--primitives-typography-line-height-20);
612
+ --component-breadcrumb-typography-separator-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
613
+ --component-button-layout-gap: var(--primitives-space-4);
614
+ --component-button-layout-radius: var(--primitives-radius-0);
615
+ --component-button-layout-height-sm: var(--primitives-size-40);
616
+ --component-button-layout-height-md: var(--primitives-size-44);
617
+ --component-button-layout-height-lg: var(--primitives-size-48);
618
+ --component-button-layout-padding-x-sm: var(--primitives-space-12);
619
+ --component-button-layout-padding-x-md: var(--primitives-space-16);
620
+ --component-button-layout-padding-x-lg: var(--primitives-space-20);
621
+ --component-button-layout-focus-ring-width: 2px;
622
+ --component-button-layout-focus-ring-offset: 2px;
623
+ --component-button-typography-label-font-family: var(--primitives-typography-family-cabin);
624
+ --component-button-typography-label-font-size: var(--primitives-typography-size-14);
625
+ --component-button-typography-label-line-height: var(--primitives-typography-line-height-18);
626
+ --component-button-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
627
+ --component-button-color-focus-ring-default: var(--primitives-color-blue-60);
628
+ --component-button-color-focus-ring-inset: var(--primitives-color-base-white);
629
+ --component-button-color-primary-background-default: var(--semantic-color-action-action-primary);
630
+ --component-button-color-primary-background-hover: var(--primitives-color-albacore-80);
631
+ --component-button-color-primary-background-active: var(--primitives-color-albacore-80);
632
+ --component-button-color-primary-background-disabled: var(--semantic-color-background-background-disabled);
633
+ --component-button-color-primary-text-default: var(--semantic-color-text-text-on-color);
634
+ --component-button-color-primary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
635
+ --component-button-color-secondary-background-default: var(--semantic-color-background-background);
636
+ --component-button-color-secondary-background-hover: var(--semantic-color-action-action-primary);
637
+ --component-button-color-secondary-background-active: var(--primitives-color-albacore-80);
638
+ --component-button-color-secondary-background-disabled: var(--semantic-color-background-background-disabled);
639
+ --component-button-color-secondary-text-default: var(--semantic-color-action-action-primary);
640
+ --component-button-color-secondary-text-hover: var(--semantic-color-text-text-on-color);
641
+ --component-button-color-secondary-text-active: var(--semantic-color-text-text-on-color);
642
+ --component-button-color-secondary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
643
+ --component-button-color-secondary-border-default: var(--semantic-color-action-action-primary);
644
+ --component-button-color-secondary-border-focus: var(--semantic-color-link-link-primary);
645
+ --component-button-color-tertiary-background-hover: var(--semantic-color-surface-surface-01-hover);
646
+ --component-button-color-tertiary-background-active: var(--semantic-color-surface-surface-01-selected);
647
+ --component-button-color-tertiary-background-disabled: var(--semantic-color-background-background-disabled);
648
+ --component-button-color-tertiary-text-default: var(--semantic-color-action-action-primary);
649
+ --component-button-color-tertiary-text-hover: var(--primitives-color-albacore-80);
650
+ --component-button-color-tertiary-text-active: var(--primitives-color-albacore-80);
651
+ --component-button-color-tertiary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
652
+ --component-button-color-danger-background-default: var(--semantic-color-status-status-error);
653
+ --component-button-color-danger-background-hover: var(--primitives-color-red-70);
654
+ --component-button-color-danger-background-active: var(--primitives-color-red-80);
655
+ --component-button-color-danger-background-disabled: var(--semantic-color-background-background-disabled);
656
+ --component-button-color-danger-text-default: var(--semantic-color-text-text-on-color);
657
+ --component-button-color-danger-text-disabled: var(--semantic-color-text-text-on-color-disabled);
658
+ --component-card-layout-width: 320px;
659
+ --component-card-layout-padding-x: var(--primitives-space-16);
660
+ --component-card-layout-padding-y: var(--primitives-space-16);
661
+ --component-card-layout-header-gap: var(--primitives-space-8);
662
+ --component-card-layout-header-body-gap: var(--primitives-space-32);
663
+ --component-card-layout-details-gap: var(--primitives-space-12);
664
+ --component-card-layout-details-column-gap: var(--primitives-space-16);
665
+ --component-card-layout-details-label-width: 104px;
666
+ --component-card-layout-footer-top-gap: var(--primitives-space-32);
667
+ --component-card-layout-action-min-width: var(--primitives-space-96);
668
+ --component-card-layout-focus-ring-width: 2px;
669
+ --component-card-layout-focus-ring-offset: 2px;
670
+ --component-card-color-surface-default: var(--semantic-color-surface-surface-01);
671
+ --component-card-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
672
+ --component-card-color-surface-selected: var(--semantic-color-surface-surface-01-selected);
673
+ --component-card-color-surface-disabled: var(--semantic-color-background-background-disabled);
674
+ --component-card-color-border-focus: var(--semantic-color-focus-focus);
675
+ --component-card-color-title-text: var(--semantic-color-text-text-primary);
676
+ --component-card-color-title-disabled-text: var(--semantic-color-text-text-disabled);
677
+ --component-card-color-description-text: var(--semantic-color-text-text-secondary);
678
+ --component-card-color-description-disabled-text: var(--semantic-color-text-text-disabled);
679
+ --component-card-color-detail-text-type: color;
680
+ --component-card-color-detail-text-value: #161616ff;
681
+ --component-card-color-detail-disabled-text-type: color;
682
+ --component-card-color-detail-disabled-text-value: #a8a8a8ff;
683
+ --component-card-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
684
+ --component-card-typography-title-font-size: var(--primitives-typography-size-32);
685
+ --component-card-typography-title-font-weight: var(--primitives-typography-weight-medium);
686
+ --component-card-typography-title-line-height: var(--primitives-typography-line-height-40);
687
+ --component-card-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
688
+ --component-card-typography-description-font-family: var(--primitives-typography-family-cabin);
689
+ --component-card-typography-description-font-size: var(--primitives-typography-size-14);
690
+ --component-card-typography-description-font-weight: var(--primitives-typography-weight-regular);
691
+ --component-card-typography-description-line-height: var(--primitives-typography-line-height-20);
692
+ --component-card-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
693
+ --component-card-typography-detail-font-family-type: string;
694
+ --component-card-typography-detail-font-family-value: Cabin;
695
+ --component-card-typography-detail-font-size-type: dimension;
696
+ --component-card-typography-detail-font-size-value: 14px;
697
+ --component-card-typography-detail-font-weight-type: number;
698
+ --component-card-typography-detail-font-weight-value: Regular;
699
+ --component-card-typography-detail-line-height-type: dimension;
700
+ --component-card-typography-detail-line-height-value: 20px;
701
+ --component-card-typography-detail-letter-spacing-type: dimension;
702
+ --component-card-typography-detail-letter-spacing-value: 0.16px;
703
+ --component-checkbox-background-checked: var(--semantic-color-text-text-primary);
704
+ --component-checkbox-background-checked-disabled: var(--semantic-color-border-border-disabled);
705
+ --component-checkbox-border-default: var(--semantic-color-border-border-strong);
706
+ --component-checkbox-border-hover: var(--semantic-color-text-text-primary);
707
+ --component-checkbox-border-focus: var(--semantic-color-focus-focus);
708
+ --component-checkbox-border-disabled: var(--semantic-color-border-border-disabled);
709
+ --component-checkbox-text-label: var(--semantic-color-text-text-primary);
710
+ --component-checkbox-text-label-disabled: var(--semantic-color-text-text-disabled);
711
+ --component-checkbox-icon-check: var(--primitives-color-base-white);
712
+ --component-checkbox-label-family: var(--primitives-typography-family-cabin);
713
+ --component-checkbox-label-size: var(--primitives-typography-size-12);
714
+ --component-checkbox-label-line-height: var(--primitives-typography-line-height-16);
715
+ --component-checkbox-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
716
+ --component-checkbox-layout-size: var(--primitives-size-20);
717
+ --component-checkbox-layout-label-gap: var(--primitives-space-4);
718
+ --component-checkbox-layout-radius: var(--primitives-radius-0);
719
+ --component-checkbox-layout-border-width: var(--primitives-stroke-1);
720
+ --component-contained-list-layout-width: 320px;
721
+ --component-contained-list-layout-padding-x: var(--primitives-space-16);
722
+ --component-contained-list-layout-divider-width: var(--primitives-stroke-1);
723
+ --component-contained-list-layout-item-min-height: var(--primitives-size-48);
724
+ --component-contained-list-layout-header-on-page-min-height: var(--primitives-size-32);
725
+ --component-contained-list-layout-header-disclosed-min-height: var(--primitives-size-48);
726
+ --component-contained-list-color-surface-default: var(--semantic-color-surface-surface-01);
727
+ --component-contained-list-color-divider-subtle: var(--semantic-color-border-border-subtle);
728
+ --component-contained-list-color-header-background-disclosed: var(--semantic-color-surface-surface-01);
729
+ --component-contained-list-color-header-text-on-page: var(--semantic-color-text-text-primary);
730
+ --component-contained-list-color-header-text-disclosed: var(--semantic-color-text-text-secondary);
731
+ --component-contained-list-color-item-text: var(--semantic-color-text-text-primary);
732
+ --component-contained-list-typography-header-title-on-page-font-family: var(--primitives-typography-family-cabin);
733
+ --component-contained-list-typography-header-title-on-page-font-size: var(--primitives-typography-size-16);
734
+ --component-contained-list-typography-header-title-on-page-font-weight: var(--primitives-typography-weight-semibold);
735
+ --component-contained-list-typography-header-title-on-page-line-height: var(--primitives-typography-line-height-24);
736
+ --component-contained-list-typography-header-title-on-page-letter-spacing: var(--primitives-typography-letter-spacing-0);
737
+ --component-contained-list-typography-header-title-disclosed-font-family: var(--primitives-typography-family-cabin);
738
+ --component-contained-list-typography-header-title-disclosed-font-size: var(--primitives-typography-size-14);
739
+ --component-contained-list-typography-header-title-disclosed-font-weight: var(--primitives-typography-weight-medium);
740
+ --component-contained-list-typography-header-title-disclosed-line-height: var(--primitives-typography-line-height-18);
741
+ --component-contained-list-typography-header-title-disclosed-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
742
+ --component-contained-list-typography-item-label-font-family: var(--primitives-typography-family-cabin);
743
+ --component-contained-list-typography-item-label-font-size: var(--primitives-typography-size-16);
744
+ --component-contained-list-typography-item-label-font-weight: var(--primitives-typography-weight-regular);
745
+ --component-contained-list-typography-item-label-line-height: var(--primitives-typography-line-height-24);
746
+ --component-contained-list-typography-item-label-letter-spacing: var(--primitives-typography-letter-spacing-0);
747
+ --component-data-table-layout-width: 720px;
748
+ --component-data-table-layout-row-height: var(--primitives-size-48);
749
+ --component-data-table-layout-checkbox-column-width: var(--primitives-size-48);
750
+ --component-data-table-layout-cell-padding-x: var(--primitives-space-16);
751
+ --component-data-table-layout-cell-padding-y: var(--primitives-space-12);
752
+ --component-data-table-layout-border-width: var(--primitives-stroke-1);
753
+ --component-data-table-layout-header-gap: var(--primitives-space-4);
754
+ --component-data-table-layout-header-padding-top: var(--primitives-space-16);
755
+ --component-data-table-layout-header-padding-x: var(--primitives-space-16);
756
+ --component-data-table-layout-header-padding-bottom: var(--primitives-space-32);
757
+ --component-data-table-color-surface-default: var(--semantic-color-surface-surface-01);
758
+ --component-data-table-color-surface-header: var(--semantic-color-background-background-disabled);
759
+ --component-data-table-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
760
+ --component-data-table-color-surface-selected: var(--semantic-color-background-background-selected);
761
+ --component-data-table-color-border-subtle: var(--semantic-color-border-border-subtle);
762
+ --component-data-table-color-text-title: var(--semantic-color-text-text-primary);
763
+ --component-data-table-color-text-description: var(--semantic-color-text-text-secondary);
764
+ --component-data-table-color-text-header: var(--semantic-color-text-text-primary);
765
+ --component-data-table-color-text-cell: var(--semantic-color-text-text-primary);
766
+ --component-data-table-color-focus-ring: var(--semantic-color-focus-focus);
767
+ --component-data-table-color-focus-inset: var(--semantic-color-focus-focus-inset);
768
+ --component-data-table-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
769
+ --component-data-table-typography-title-font-size: var(--primitives-typography-size-32);
770
+ --component-data-table-typography-title-font-weight: var(--primitives-typography-weight-medium);
771
+ --component-data-table-typography-title-line-height: var(--primitives-typography-line-height-40);
772
+ --component-data-table-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
773
+ --component-data-table-typography-description-font-family: var(--primitives-typography-family-cabin);
774
+ --component-data-table-typography-description-font-size: var(--primitives-typography-size-14);
775
+ --component-data-table-typography-description-font-weight: var(--primitives-typography-weight-regular);
776
+ --component-data-table-typography-description-line-height: var(--primitives-typography-line-height-20);
777
+ --component-data-table-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
778
+ --component-data-table-typography-header-font-family: var(--primitives-typography-family-cabin);
779
+ --component-data-table-typography-header-font-size: var(--primitives-typography-size-16);
780
+ --component-data-table-typography-header-font-weight: var(--primitives-typography-weight-semibold);
781
+ --component-data-table-typography-header-line-height: var(--primitives-typography-line-height-24);
782
+ --component-data-table-typography-header-letter-spacing: var(--primitives-typography-letter-spacing-0);
783
+ --component-data-table-typography-cell-font-family: var(--primitives-typography-family-cabin);
784
+ --component-data-table-typography-cell-font-size: var(--primitives-typography-size-16);
785
+ --component-data-table-typography-cell-font-weight: var(--primitives-typography-weight-regular);
786
+ --component-data-table-typography-cell-line-height: var(--primitives-typography-line-height-24);
787
+ --component-data-table-typography-cell-letter-spacing: var(--primitives-typography-letter-spacing-0);
788
+ --component-description-list-layout-width: 288px;
789
+ --component-description-list-layout-gap: var(--primitives-space-12);
790
+ --component-description-list-layout-column-gap: var(--primitives-space-16);
791
+ --component-description-list-layout-label-width: 104px;
792
+ --component-description-list-color-label-text: var(--semantic-color-text-text-secondary);
793
+ --component-description-list-color-description-text: var(--semantic-color-text-text-primary);
794
+ --component-description-list-typography-label-font-family: var(--primitives-typography-family-cabin);
795
+ --component-description-list-typography-label-font-size: var(--primitives-typography-size-14);
796
+ --component-description-list-typography-label-font-weight: var(--primitives-typography-weight-medium);
797
+ --component-description-list-typography-label-line-height: var(--primitives-typography-line-height-18);
798
+ --component-description-list-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
799
+ --component-description-list-typography-description-font-family: var(--primitives-typography-family-cabin);
800
+ --component-description-list-typography-description-font-size: var(--primitives-typography-size-14);
801
+ --component-description-list-typography-description-font-weight: var(--primitives-typography-weight-regular);
802
+ --component-description-list-typography-description-line-height: var(--primitives-typography-line-height-20);
803
+ --component-description-list-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
804
+ --component-form-layout-width: 480px;
805
+ --component-form-layout-header-gap: var(--primitives-space-8);
806
+ --component-form-layout-header-body-gap: var(--semantic-layout-stack-3xl);
807
+ --component-form-layout-body-item-gap: var(--semantic-layout-stack-2xl);
808
+ --component-form-layout-body-column-gap: var(--semantic-layout-inline-xl);
809
+ --component-form-layout-footer-top-gap: var(--semantic-layout-stack-4xl);
810
+ --component-form-layout-actions-gap: var(--semantic-layout-inline-md);
811
+ --component-form-layout-action-min-width: var(--primitives-space-96);
812
+ --component-form-color-header-title-text: var(--semantic-color-text-text-primary);
813
+ --component-form-color-header-description-text: var(--semantic-color-text-text-secondary);
814
+ --component-form-typography-header-title-font-family: var(--primitives-typography-family-roboto-condensed);
815
+ --component-form-typography-header-title-font-size: var(--primitives-typography-size-32);
816
+ --component-form-typography-header-title-font-weight: var(--primitives-typography-weight-medium);
817
+ --component-form-typography-header-title-line-height: var(--primitives-typography-line-height-40);
818
+ --component-form-typography-header-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
819
+ --component-form-typography-header-description-font-family: var(--primitives-typography-family-cabin);
820
+ --component-form-typography-header-description-font-size: var(--primitives-typography-size-14);
821
+ --component-form-typography-header-description-font-weight: var(--primitives-typography-weight-regular);
822
+ --component-form-typography-header-description-line-height: var(--primitives-typography-line-height-20);
823
+ --component-form-typography-header-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
824
+ --component-index-background-default: var(--semantic-color-background-background);
825
+ --component-index-background-hover: var(--semantic-color-surface-surface-01-hover);
826
+ --component-index-background-selected: var(--semantic-color-background-background-selected);
827
+ --component-index-background-disabled: var(--semantic-color-background-background-disabled);
828
+ --component-index-border-default: var(--semantic-color-border-border-subtle);
829
+ --component-index-border-selected: var(--semantic-color-border-border-selected);
830
+ --component-index-border-focus: var(--semantic-color-focus-focus);
831
+ --component-index-text-default: var(--semantic-color-text-text-primary);
832
+ --component-index-text-selected: var(--semantic-color-text-text-primary);
833
+ --component-index-text-disabled: var(--semantic-color-text-text-disabled);
834
+ --component-index-icon-default: #525252;
835
+ --component-index-icon-disabled: var(--semantic-color-icon-icon-disabled);
836
+ --component-index-item-size: var(--semantic-layout-control-height-md);
837
+ --component-index-gap: 0px;
838
+ --component-index-label-family: var(--semantic-type-label-label-01-family);
839
+ --component-index-label-weight: var(--semantic-type-label-label-01-weight);
840
+ --component-index-label-size: var(--semantic-type-label-label-01-size);
841
+ --component-index-label-line-height: var(--semantic-type-label-label-01-line-height);
842
+ --component-index-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
843
+ --component-index-label-weight-selected: var(--semantic-type-label-label-02-weight);
844
+ --component-index-indicator-height: var(--semantic-layout-stroke-strong);
845
+ --component-index-indicator-inset: var(--semantic-layout-inset-md);
846
+ --component-inline-notification-layout-min-height: var(--primitives-size-48);
847
+ --component-inline-notification-layout-indicator-width: var(--primitives-space-4);
848
+ --component-inline-notification-layout-padding-x: var(--primitives-space-16);
849
+ --component-inline-notification-layout-padding-y: var(--primitives-space-12);
850
+ --component-inline-notification-layout-shell-gap: var(--primitives-space-16);
851
+ --component-inline-notification-layout-details-gap: var(--primitives-space-16);
852
+ --component-inline-notification-layout-copy-gap: var(--primitives-space-2);
853
+ --component-inline-notification-layout-content-gap: 0;
854
+ --component-inline-notification-layout-content-gap-actionable: var(--primitives-space-8);
855
+ --component-inline-notification-color-background-information: #edf5ff;
856
+ --component-inline-notification-color-background-success: #defbe6;
857
+ --component-inline-notification-color-background-warning: #fcf4d6;
858
+ --component-inline-notification-color-background-error: #fff1f1;
859
+ --component-inline-notification-color-status-information: var(--semantic-color-status-status-info);
860
+ --component-inline-notification-color-status-success: var(--semantic-color-status-status-success);
861
+ --component-inline-notification-color-status-warning: var(--semantic-color-status-status-warning);
862
+ --component-inline-notification-color-status-error: var(--semantic-color-status-status-error);
863
+ --component-inline-notification-color-text-primary: var(--semantic-color-text-text-primary);
864
+ --component-inline-notification-color-dismiss-icon: #666666;
865
+ --component-inline-notification-color-focus-ring: var(--semantic-color-focus-focus);
866
+ --component-inline-notification-typography-title-family: var(--semantic-type-label-label-01-family);
867
+ --component-inline-notification-typography-title-weight: var(--semantic-type-label-label-01-weight);
868
+ --component-inline-notification-typography-title-size: var(--semantic-type-label-label-01-size);
869
+ --component-inline-notification-typography-title-line-height: var(--semantic-type-label-label-01-line-height);
870
+ --component-inline-notification-typography-title-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
871
+ --component-inline-notification-typography-body-family: var(--semantic-type-body-sm-family);
872
+ --component-inline-notification-typography-body-weight: var(--semantic-type-body-sm-weight);
873
+ --component-inline-notification-typography-body-size: var(--semantic-type-body-sm-size);
874
+ --component-inline-notification-typography-body-line-height: var(--semantic-type-body-sm-line-height);
875
+ --component-inline-notification-typography-body-letter-spacing: var(--semantic-type-body-sm-letter-spacing);
876
+ --component-link-inline-label-text-default: var(--semantic-color-link-link-primary);
877
+ --component-link-inline-label-text-hover: var(--semantic-color-link-link-primary-hover);
878
+ --component-link-inline-label-text-visited: var(--semantic-color-link-link-visited);
879
+ --component-link-inline-label-sm-family: var(--primitives-typography-family-cabin);
880
+ --component-link-inline-label-sm-size: var(--primitives-typography-size-12);
881
+ --component-link-inline-label-sm-line-height: var(--primitives-typography-line-height-16);
882
+ --component-link-inline-label-sm-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
883
+ --component-link-inline-label-md-family: var(--primitives-typography-family-cabin);
884
+ --component-link-inline-label-md-size: var(--primitives-typography-size-14);
885
+ --component-link-inline-label-md-line-height: var(--primitives-typography-line-height-16);
886
+ --component-link-inline-label-md-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
887
+ --component-link-inline-label-lg-family: var(--primitives-typography-family-cabin);
888
+ --component-link-inline-label-lg-size: var(--primitives-typography-size-16);
889
+ --component-link-inline-label-lg-line-height: var(--primitives-typography-line-height-24);
890
+ --component-link-inline-label-lg-letter-spacing: 0px;
891
+ --component-link-inline-border-focus: var(--semantic-color-focus-focus);
892
+ --component-link-standalone-label-text-default: var(--semantic-color-link-link-primary);
893
+ --component-link-standalone-label-text-hover: var(--semantic-color-link-link-primary-hover);
894
+ --component-link-standalone-label-text-visited: var(--semantic-color-link-link-visited);
895
+ --component-link-standalone-label-sm-family: var(--primitives-typography-family-cabin);
896
+ --component-link-standalone-label-sm-size: var(--primitives-typography-size-12);
897
+ --component-link-standalone-label-sm-line-height: var(--primitives-typography-line-height-16);
898
+ --component-link-standalone-label-sm-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
899
+ --component-link-standalone-label-md-family: var(--primitives-typography-family-cabin);
900
+ --component-link-standalone-label-md-size: var(--primitives-typography-size-14);
901
+ --component-link-standalone-label-md-line-height: var(--primitives-typography-line-height-16);
902
+ --component-link-standalone-label-md-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
903
+ --component-link-standalone-label-lg-family: var(--primitives-typography-family-cabin);
904
+ --component-link-standalone-label-lg-size: var(--primitives-typography-size-16);
905
+ --component-link-standalone-label-lg-line-height: var(--primitives-typography-line-height-24);
906
+ --component-link-standalone-label-lg-letter-spacing: 0px;
907
+ --component-link-standalone-icon-gap: var(--semantic-layout-inline-sm);
908
+ --component-link-standalone-border-focus: var(--semantic-color-focus-focus);
909
+ --component-modal-layout-width-md: 608px;
910
+ --component-modal-layout-padding-x: var(--primitives-space-24);
911
+ --component-modal-layout-padding-y: var(--primitives-space-24);
912
+ --component-modal-layout-header-gap: var(--primitives-space-24);
913
+ --component-modal-layout-header-content-gap: var(--primitives-space-4);
914
+ --component-modal-layout-content-gap: var(--primitives-space-32);
915
+ --component-modal-layout-content-padding-bottom: var(--primitives-space-48);
916
+ --component-modal-layout-content-text-margin-right: 96px;
917
+ --component-modal-layout-footer-actions-gap: var(--primitives-space-16);
918
+ --component-modal-layout-footer-actions-left-width: 280px;
919
+ --component-modal-layout-footer-actions-option-width: 140px;
920
+ --component-modal-layout-footer-action-min-width: 96px;
921
+ --component-modal-layout-close-size: var(--primitives-size-24);
922
+ --component-modal-layout-border-width: var(--primitives-stroke-1);
923
+ --component-modal-color-surface-default: var(--semantic-color-surface-surface-01);
924
+ --component-modal-color-border-default: var(--semantic-color-border-border-subtle);
925
+ --component-modal-color-text-label: var(--semantic-color-text-text-secondary);
926
+ --component-modal-color-text-title: var(--semantic-color-text-text-primary);
927
+ --component-modal-color-text-body: var(--semantic-color-text-text-primary);
928
+ --component-modal-color-icon-default: var(--semantic-color-icon-icon-secondary);
929
+ --component-modal-color-focus-ring: var(--semantic-color-focus-focus);
930
+ --component-modal-typography-label-font-family: var(--primitives-typography-family-cabin);
931
+ --component-modal-typography-label-font-size: var(--primitives-typography-size-14);
932
+ --component-modal-typography-label-font-weight: var(--primitives-typography-weight-regular);
933
+ --component-modal-typography-label-line-height: var(--primitives-typography-line-height-20);
934
+ --component-modal-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
935
+ --component-modal-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
936
+ --component-modal-typography-title-font-size: var(--primitives-typography-size-32);
937
+ --component-modal-typography-title-font-weight: var(--primitives-typography-weight-medium);
938
+ --component-modal-typography-title-line-height: var(--primitives-typography-line-height-40);
939
+ --component-modal-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
940
+ --component-modal-typography-body-font-family: var(--primitives-typography-family-cabin);
941
+ --component-modal-typography-body-font-size: var(--primitives-typography-size-18);
942
+ --component-modal-typography-body-font-weight: var(--primitives-typography-weight-regular);
943
+ --component-modal-typography-body-line-height: var(--primitives-typography-line-height-28);
944
+ --component-modal-typography-body-letter-spacing: var(--primitives-typography-letter-spacing-0);
945
+ --component-pagination-background-default: var(--semantic-color-background-background);
946
+ --component-pagination-background-hover: var(--semantic-color-surface-surface-01-hover);
947
+ --component-pagination-background-selected: var(--semantic-color-background-background-selected);
948
+ --component-pagination-background-disabled: var(--semantic-color-background-background-disabled);
949
+ --component-pagination-border-default: var(--semantic-color-border-border-subtle);
950
+ --component-pagination-border-selected: var(--semantic-color-border-border-selected);
951
+ --component-pagination-border-focus: var(--semantic-color-focus-focus);
952
+ --component-pagination-text-default: var(--semantic-color-text-text-primary);
953
+ --component-pagination-text-selected: var(--semantic-color-text-text-primary);
954
+ --component-pagination-text-disabled: var(--semantic-color-text-text-disabled);
955
+ --component-pagination-icon-default: #525252;
956
+ --component-pagination-icon-disabled: var(--semantic-color-icon-icon-disabled);
957
+ --component-pagination-item-size: var(--semantic-layout-control-height-md);
958
+ --component-pagination-gap: 0px;
959
+ --component-pagination-label-family: var(--semantic-type-label-label-01-family);
960
+ --component-pagination-label-weight: var(--semantic-type-label-label-01-weight);
961
+ --component-pagination-label-size: var(--semantic-type-label-label-01-size);
962
+ --component-pagination-label-line-height: var(--semantic-type-label-label-01-line-height);
963
+ --component-pagination-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
964
+ --component-pagination-label-weight-selected: var(--semantic-type-label-label-02-weight);
965
+ --component-pagination-indicator-height: 4px;
966
+ --component-pagination-indicator-inset: var(--semantic-layout-inset-md);
967
+ --component-radio-border-default: var(--semantic-color-border-border-strong);
968
+ --component-radio-border-disabled: var(--semantic-color-border-border-disabled);
969
+ --component-radio-border-focus: var(--semantic-color-focus-focus);
970
+ --component-radio-icon-default: var(--semantic-color-icon-icon-primary);
971
+ --component-radio-icon-disabled: var(--semantic-color-icon-icon-disabled);
972
+ --component-radio-text-label: var(--semantic-color-text-text-primary);
973
+ --component-radio-text-label-disabled: var(--semantic-color-text-text-disabled);
974
+ --component-radio-label-family: var(--semantic-type-label-label-02-family);
975
+ --component-radio-label-size: var(--semantic-type-label-label-02-size);
976
+ --component-radio-label-line-height: var(--semantic-type-label-label-02-line-height);
977
+ --component-radio-label-letter-spacing: var(--semantic-type-label-label-02-letter-spacing);
978
+ --component-radio-layout-target: var(--semantic-layout-target-min);
979
+ --component-radio-layout-label-gap: var(--semantic-layout-stack-xs);
980
+ --component-radio-layout-size: var(--semantic-layout-icon-sm);
981
+ --component-radio-layout-icon-gap: var(--semantic-layout-control-icon-gap);
982
+ --component-search-layout-height: var(--primitives-size-48);
983
+ --component-search-layout-padding: var(--primitives-space-16);
984
+ --component-search-layout-gap: var(--primitives-space-12);
985
+ --component-search-layout-border-width-default: 1px;
986
+ --component-search-layout-border-width-strong: 2px;
987
+ --component-search-background-default: var(--primitives-color-gray-10);
988
+ --component-search-background-focus: var(--primitives-color-gray-10);
989
+ --component-search-background-disabled: var(--primitives-color-gray-20);
990
+ --component-search-border-default: var(--primitives-color-gray-40);
991
+ --component-search-border-hover: var(--primitives-color-gray-40);
992
+ --component-search-border-focus: var(--primitives-color-blue-60);
993
+ --component-search-border-disabled: var(--primitives-color-gray-20);
994
+ --component-search-text-input: var(--primitives-color-gray-100);
995
+ --component-search-text-placeholder: var(--primitives-color-gray-50);
996
+ --component-search-text-disabled: var(--primitives-color-gray-30);
997
+ --component-search-icon-default: var(--primitives-color-gray-60);
998
+ --component-search-icon-disabled: var(--primitives-color-gray-30);
999
+ --component-search-icon-hover: var(--primitives-color-gray-100);
1000
+ --component-search-input-family: Cabin;
1001
+ --component-search-input-size: var(--primitives-typography-size-16);
1002
+ --component-search-input-line-height: var(--primitives-typography-line-height-24);
1003
+ --component-search-input-letter-spacing: var(--primitives-typography-letter-spacing-0);
1004
+ --component-select-family-type: string;
1005
+ --component-select-family-value: Cabin;
1006
+ --component-select-weight-type: number;
1007
+ --component-select-weight-value: Regular;
1008
+ --component-select-size-type: dimension;
1009
+ --component-select-size-value: 16px;
1010
+ --component-select-line-height-type: dimension;
1011
+ --component-select-line-height-value: 24px;
1012
+ --component-select-letter-spacing-type: dimension;
1013
+ --component-select-letter-spacing-value: 0px;
1014
+ --component-structured-list-layout-width: 500px;
1015
+ --component-structured-list-layout-padding-x: var(--primitives-space-16);
1016
+ --component-structured-list-layout-column-gap: var(--primitives-space-16);
1017
+ --component-structured-list-layout-divider-width: var(--primitives-stroke-1);
1018
+ --component-structured-list-layout-header-padding-top: var(--primitives-space-16);
1019
+ --component-structured-list-layout-header-padding-bottom: var(--primitives-space-8);
1020
+ --component-structured-list-layout-row-padding-top: var(--primitives-space-16);
1021
+ --component-structured-list-layout-row-padding-bottom: var(--primitives-space-24);
1022
+ --component-structured-list-color-divider-subtle: var(--semantic-color-border-border-subtle);
1023
+ --component-structured-list-color-text-header: var(--semantic-color-text-text-primary);
1024
+ --component-structured-list-color-text-row: var(--semantic-color-text-text-secondary);
1025
+ --component-structured-list-typography-header-column-font-family: var(--primitives-typography-family-cabin);
1026
+ --component-structured-list-typography-header-column-font-size: var(--primitives-typography-size-14);
1027
+ --component-structured-list-typography-header-column-font-weight: var(--primitives-typography-weight-medium);
1028
+ --component-structured-list-typography-header-column-line-height: var(--primitives-typography-line-height-18);
1029
+ --component-structured-list-typography-header-column-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
1030
+ --component-structured-list-typography-row-column-font-family: var(--primitives-typography-family-cabin);
1031
+ --component-structured-list-typography-row-column-font-size: var(--primitives-typography-size-14);
1032
+ --component-structured-list-typography-row-column-font-weight: var(--primitives-typography-weight-regular);
1033
+ --component-structured-list-typography-row-column-line-height: var(--primitives-typography-line-height-20);
1034
+ --component-structured-list-typography-row-column-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
1035
+ --component-tabs-tab-background-default: var(--semantic-color-surface-surface-01);
1036
+ --component-tabs-tab-background-hover: var(--semantic-color-surface-surface-01-hover);
1037
+ --component-tabs-tab-background-selected: var(--semantic-color-surface-surface-01);
1038
+ --component-tabs-tab-background-disabled: var(--semantic-color-background-background-disabled);
1039
+ --component-tabs-tab-text-default: var(--semantic-color-text-text-secondary);
1040
+ --component-tabs-tab-text-hover: var(--semantic-color-text-text-primary);
1041
+ --component-tabs-tab-text-selected: var(--semantic-color-text-text-primary);
1042
+ --component-tabs-tab-text-disabled: var(--semantic-color-text-text-disabled);
1043
+ --component-tabs-tab-height: var(--semantic-layout-control-height-lg);
1044
+ --component-tabs-tab-padding-x: var(--semantic-layout-inset-md);
1045
+ --component-tabs-tab-gap: var(--semantic-layout-inline-xs);
1046
+ --component-tabs-label-family: var(--semantic-type-label-label-01-family);
1047
+ --component-tabs-label-weight: var(--semantic-type-label-label-01-weight);
1048
+ --component-tabs-label-size: var(--semantic-type-label-label-01-size);
1049
+ --component-tabs-label-line-height: var(--semantic-type-label-label-01-line-height);
1050
+ --component-tabs-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
1051
+ --component-tabs-indicator-default: var(--semantic-color-border-border-brand);
1052
+ --component-tabs-indicator-stroke-width: var(--semantic-layout-stroke-strong);
1053
+ --component-tabs-divider: var(--semantic-color-border-border-subtle);
1054
+ --component-tabs-divider-width: var(--semantic-layout-stroke-default);
1055
+ --component-tabs-border-focus: var(--semantic-color-focus-focus);
1056
+ --component-tag-layout-radius: var(--semantic-layout-radius-pill);
1057
+ --component-tag-layout-height-sm: var(--semantic-layout-control-height-compact-sm);
1058
+ --component-tag-layout-height-md: var(--semantic-layout-control-height-compact-md);
1059
+ --component-tag-layout-padding-x-sm: var(--semantic-layout-inset-xs);
1060
+ --component-tag-layout-padding-x-md: var(--semantic-layout-inset-sm);
1061
+ --component-tag-color-background-neutral: var(--semantic-color-surface-surface-01);
1062
+ --component-tag-color-background-blue: #EDF5FF;
1063
+ --component-tag-color-background-green: #DEFBE6;
1064
+ --component-tag-color-background-purple: #F6F2FF;
1065
+ --component-tag-color-text-neutral: var(--semantic-color-text-text-primary);
1066
+ --component-tag-color-text-blue: #0043CE;
1067
+ --component-tag-color-text-green: #044317;
1068
+ --component-tag-color-text-purple: #6929C4;
1069
+ --component-tag-typography-label-font-family: var(--semantic-type-label-label-02-family);
1070
+ --component-tag-typography-label-font-weight: var(--semantic-type-label-label-02-weight);
1071
+ --component-tag-typography-label-font-size: var(--semantic-type-label-label-02-size);
1072
+ --component-tag-typography-label-line-height: var(--semantic-type-label-label-02-line-height);
1073
+ --component-tag-typography-label-letter-spacing: var(--semantic-type-label-label-02-letter-spacing);
1074
+ --component-text-area-family-type: string;
1075
+ --component-text-area-family-value: Cabin;
1076
+ --component-text-area-size-type: dimension;
1077
+ --component-text-area-size-value: 16px;
1078
+ --component-text-area-line-height-type: dimension;
1079
+ --component-text-area-line-height-value: 24px;
1080
+ --component-text-area-letter-spacing-type: dimension;
1081
+ --component-text-area-letter-spacing-value: 0px;
1082
+ --component-input-layout-radius: var(--primitives-radius-0);
1083
+ --component-input-layout-leading-icon-gap: var(--primitives-space-4);
1084
+ --component-input-layout-status-icon-gap: var(--primitives-space-4);
1085
+ --component-toggle-track-off-default: var(--semantic-color-border-border-strong);
1086
+ --component-toggle-track-off-hover: var(--semantic-color-border-border-strong);
1087
+ --component-toggle-track-on-default: var(--semantic-color-action-action-primary);
1088
+ --component-toggle-track-on-hover: var(--semantic-color-action-action-primary-hover);
1089
+ --component-toggle-track-disabled: var(--semantic-color-action-action-disabled);
1090
+ --component-toggle-track-focus: var(--semantic-color-focus-focus);
1091
+ --component-toggle-track-width-md: var(--semantic-layout-control-width-md);
1092
+ --component-toggle-track-height-md: var(--semantic-layout-icon-md);
1093
+ --component-toggle-track-radius: var(--semantic-layout-radius-pill);
1094
+ --component-toggle-thumb-default: var(--semantic-color-icon-icon-on-color);
1095
+ --component-toggle-thumb-disabled: var(--semantic-color-icon-icon-on-color-disabled);
1096
+ --component-toggle-thumb-size-md: var(--semantic-layout-icon-xs);
1097
+ --component-toggle-text-label: var(--semantic-color-text-text-primary);
1098
+ --component-toggle-text-label-disabled: var(--semantic-color-text-text-disabled);
1099
+ --component-toggle-label-family: var(--semantic-type-label-label-01-family);
1100
+ --component-toggle-label-weight: var(--semantic-type-label-label-01-weight);
1101
+ --component-toggle-label-size: var(--semantic-type-label-label-01-size);
1102
+ --component-toggle-label-line-height: var(--semantic-type-label-label-01-line-height);
1103
+ --component-toggle-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
1104
+ --component-toggle-padding: var(--semantic-layout-inset-2xs);
1105
+ --component-toggle-label-gap: var(--semantic-layout-stack-xs);
1106
+ --component-toggle-target: var(--semantic-layout-target-min);
1107
+ --component-tooltip-background: var(--semantic-color-background-background-inverse);
1108
+ --component-tooltip-text: var(--semantic-color-text-text-inverse);
1109
+ --component-tooltip-arrow: var(--semantic-color-background-background-inverse);
1110
+ --component-tooltip-arrow-margin-left: -3px;
1111
+ --component-tooltip-arrow-margin-right: -3px;
1112
+ --component-tooltip-padding-x: var(--semantic-layout-inset-sm);
1113
+ --component-tooltip-padding-y: var(--semantic-layout-inset-xs);
1114
+ --component-tooltip-body-family: var(--semantic-type-helper-helper-01-family);
1115
+ --component-tooltip-body-weight: var(--semantic-type-helper-helper-01-weight);
1116
+ --component-tooltip-body-size: var(--semantic-type-helper-helper-01-size);
1117
+ --component-tooltip-body-line-height: var(--semantic-type-helper-helper-01-line-height);
1118
+ --component-tooltip-body-letter-spacing: var(--semantic-type-helper-helper-01-letter-spacing);
1119
+ }
1120
+
1121
+ .liquid-accordion {
1122
+ width: min(100%, var(--component-accordion-layout-width, 608px));
1123
+ }
1124
+
1125
+ .liquid-accordion__item {
1126
+ background: transparent;
1127
+ }
1128
+
1129
+ .liquid-accordion__heading {
1130
+ margin: 0;
1131
+ }
1132
+
1133
+ .liquid-accordion__trigger {
1134
+ box-sizing: border-box;
1135
+ display: flex;
1136
+ align-items: center;
1137
+ justify-content: space-between;
1138
+ gap: 16px;
1139
+ width: 100%;
1140
+ min-height: var(--component-accordion-layout-item-min-height, 48px);
1141
+ padding: var(--component-accordion-layout-item-padding-y, 8px)
1142
+ var(--component-accordion-layout-item-padding-x, 16px);
1143
+ border: 0;
1144
+ border-top: var(--component-accordion-layout-border-width, 1px) solid
1145
+ var(--component-accordion-color-border-subtle, #e0e0e0);
1146
+ background: var(
1147
+ --component-accordion-color-surface-default,
1148
+ rgba(255, 255, 255, 0)
1149
+ );
1150
+ color: inherit;
1151
+ text-align: left;
1152
+ cursor: pointer;
1153
+ }
1154
+
1155
+ .liquid-accordion__trigger:hover:not(:disabled) {
1156
+ background: var(--component-accordion-color-surface-hover, #f4f4f4);
1157
+ }
1158
+
1159
+ .liquid-accordion__trigger:focus-visible {
1160
+ outline: none;
1161
+ box-shadow: inset 0 0 0 2px
1162
+ var(--component-accordion-color-focus-ring, #0f62fe);
1163
+ }
1164
+
1165
+ .liquid-accordion__item--disabled .liquid-accordion__trigger {
1166
+ cursor: not-allowed;
1167
+ }
1168
+
1169
+ .liquid-accordion__title {
1170
+ color: var(--component-accordion-color-text-title, #161616);
1171
+ font-family: var(
1172
+ --component-accordion-typography-title-font-family,
1173
+ Cabin,
1174
+ sans-serif
1175
+ );
1176
+ font-size: var(--component-accordion-typography-title-font-size, 14px);
1177
+ font-weight: 400;
1178
+ line-height: var(--component-accordion-typography-title-line-height, 20px);
1179
+ letter-spacing: var(
1180
+ --component-accordion-typography-title-letter-spacing,
1181
+ 0.16px
1182
+ );
1183
+ }
1184
+
1185
+ .liquid-accordion__item--disabled .liquid-accordion__title {
1186
+ color: var(--component-accordion-color-text-title-disabled, #a8a8a8);
1187
+ }
1188
+
1189
+ .liquid-accordion__icon {
1190
+ display: inline-flex;
1191
+ align-items: center;
1192
+ justify-content: center;
1193
+ width: var(--component-accordion-layout-icon-size, 24px);
1194
+ height: var(--component-accordion-layout-icon-size, 24px);
1195
+ color: var(--component-accordion-color-icon-default, #666666);
1196
+ transition: transform 120ms ease;
1197
+ }
1198
+
1199
+ .liquid-accordion__item--open .liquid-accordion__icon {
1200
+ transform: rotate(180deg);
1201
+ }
1202
+
1203
+ .liquid-accordion__item--disabled .liquid-accordion__icon {
1204
+ color: var(--component-accordion-color-icon-disabled, #a8a8a8);
1205
+ }
1206
+
1207
+ .liquid-accordion__panel {
1208
+ border-bottom: var(--component-accordion-layout-border-width, 1px) solid
1209
+ var(--component-accordion-color-border-subtle, #e0e0e0);
1210
+ padding: 8px var(--component-accordion-layout-content-padding-x, 16px)
1211
+ var(--component-accordion-layout-content-padding-bottom, 24px);
1212
+ }
1213
+
1214
+ .liquid-accordion__text-margin {
1215
+ padding-right: 64px;
1216
+ }
1217
+
1218
+ .liquid-accordion__content {
1219
+ color: var(--component-accordion-color-text-content, #161616);
1220
+ font-family: var(
1221
+ --component-accordion-typography-content-font-family,
1222
+ Cabin,
1223
+ sans-serif
1224
+ );
1225
+ font-size: var(--component-accordion-typography-content-font-size, 14px);
1226
+ font-weight: 400;
1227
+ line-height: var(--component-accordion-typography-content-line-height, 20px);
1228
+ letter-spacing: var(
1229
+ --component-accordion-typography-content-letter-spacing,
1230
+ 0.16px
1231
+ );
1232
+ }
1233
+
1234
+ .liquid-breadcrumb {
1235
+ display: flex;
1236
+ align-items: center;
1237
+ gap: var(--component-breadcrumb-layout-gap, 8px);
1238
+ }
1239
+
1240
+ .liquid-breadcrumb__list {
1241
+ display: flex;
1242
+ align-items: center;
1243
+ gap: var(--component-breadcrumb-layout-gap, 8px);
1244
+ list-style: none;
1245
+ margin: 0;
1246
+ padding: 0;
1247
+ }
1248
+
1249
+ .liquid-breadcrumb__item,
1250
+ .liquid-breadcrumb__separator {
1251
+ display: inline-flex;
1252
+ align-items: center;
1253
+ }
1254
+
1255
+ .liquid-breadcrumb__item {
1256
+ gap: var(--component-breadcrumb-layout-gap, 8px);
1257
+ }
1258
+
1259
+ .liquid-breadcrumb__link,
1260
+ .liquid-breadcrumb__current,
1261
+ .liquid-breadcrumb__separator {
1262
+ font-family: var(
1263
+ --component-breadcrumb-typography-label-font-family,
1264
+ Cabin,
1265
+ sans-serif
1266
+ );
1267
+ font-size: var(--component-breadcrumb-typography-label-font-size, 14px);
1268
+ font-weight: var(--component-breadcrumb-typography-label-font-weight, 400);
1269
+ line-height: var(--component-breadcrumb-typography-label-line-height, 20px);
1270
+ letter-spacing: var(
1271
+ --component-breadcrumb-typography-label-letter-spacing,
1272
+ 0.16px
1273
+ );
1274
+ }
1275
+
1276
+ .liquid-breadcrumb__link {
1277
+ background: transparent;
1278
+ border: 0;
1279
+ color: var(--component-breadcrumb-color-label-text-default, #0f62fe);
1280
+ cursor: pointer;
1281
+ padding: 0;
1282
+ text-decoration: none;
1283
+ }
1284
+
1285
+ .liquid-breadcrumb__link:hover {
1286
+ color: var(--component-breadcrumb-color-label-text-hover, #0043ce);
1287
+ }
1288
+
1289
+ .liquid-breadcrumb__link:focus-visible,
1290
+ .liquid-breadcrumb__item.liquid-breadcrumb__item--is-focus
1291
+ .liquid-breadcrumb__link {
1292
+ outline: 2px solid var(--component-breadcrumb-color-border-focus, #0f62fe);
1293
+ outline-offset: 2px;
1294
+ }
1295
+
1296
+ .liquid-breadcrumb__item.liquid-breadcrumb__item--is-hover
1297
+ .liquid-breadcrumb__link {
1298
+ color: var(--component-breadcrumb-color-label-text-hover, #0043ce);
1299
+ }
1300
+
1301
+ .liquid-breadcrumb__current {
1302
+ color: var(--component-breadcrumb-color-label-text-current, #161616);
1303
+ }
1304
+
1305
+ .liquid-breadcrumb__separator {
1306
+ color: var(--component-breadcrumb-color-separator-text, #525252);
1307
+ font-family: var(
1308
+ --component-breadcrumb-typography-separator-font-family,
1309
+ Cabin,
1310
+ sans-serif
1311
+ );
1312
+ font-size: var(--component-breadcrumb-typography-separator-font-size, 14px);
1313
+ font-weight: var(
1314
+ --component-breadcrumb-typography-separator-font-weight,
1315
+ 400
1316
+ );
1317
+ line-height: var(
1318
+ --component-breadcrumb-typography-separator-line-height,
1319
+ 20px
1320
+ );
1321
+ letter-spacing: var(
1322
+ --component-breadcrumb-typography-separator-letter-spacing,
1323
+ 0.16px
1324
+ );
1325
+ }
1326
+
1327
+ .liquid-button {
1328
+ display: inline-flex;
1329
+ align-items: center;
1330
+ justify-content: center;
1331
+ gap: var(--component-button-layout-gap, 4px);
1332
+ border-style: solid;
1333
+ border-width: 1px;
1334
+ border-radius: var(--component-button-layout-radius, 0px);
1335
+ font-family: var(--component-button-typography-label-font-family, Cabin);
1336
+ font-size: var(--component-button-typography-label-font-size, 14px);
1337
+ font-weight: 400;
1338
+ line-height: var(--component-button-typography-label-line-height, 18px);
1339
+ letter-spacing: var(
1340
+ --component-button-typography-label-letter-spacing,
1341
+ 0.16px
1342
+ );
1343
+ text-decoration: none;
1344
+ user-select: none;
1345
+ transition:
1346
+ background-color 120ms ease,
1347
+ border-color 120ms ease,
1348
+ color 120ms ease,
1349
+ box-shadow 120ms ease,
1350
+ transform 120ms ease;
1351
+ cursor: pointer;
1352
+ }
1353
+
1354
+ .liquid-button[data-size='sm'] {
1355
+ min-height: var(--component-button-layout-height-sm, 40px);
1356
+ padding-inline: var(--component-button-layout-padding-x-sm, 12px);
1357
+ }
1358
+
1359
+ .liquid-button[data-size='md'] {
1360
+ min-height: var(--component-button-layout-height-md, 44px);
1361
+ padding-inline: var(--component-button-layout-padding-x-md, 16px);
1362
+ }
1363
+
1364
+ .liquid-button[data-size='lg'] {
1365
+ min-height: var(--component-button-layout-height-lg, 48px);
1366
+ padding-inline: var(--component-button-layout-padding-x-lg, 20px);
1367
+ }
1368
+
1369
+ .liquid-button:focus-visible {
1370
+ box-shadow:
1371
+ 0 0 0 var(--component-button-layout-focus-ring-offset, 2px)
1372
+ var(--component-button-color-focus-ring-inset, #ffffff),
1373
+ 0 0 0
1374
+ calc(
1375
+ var(--component-button-layout-focus-ring-width, 2px) +
1376
+ var(--component-button-layout-focus-ring-offset, 2px)
1377
+ )
1378
+ var(--component-button-color-focus-ring-default, #0f62fe);
1379
+ outline: none;
1380
+ }
1381
+
1382
+ .liquid-button:active:not(:disabled) {
1383
+ transform: translateY(1px);
1384
+ }
1385
+
1386
+ .liquid-button:disabled {
1387
+ cursor: not-allowed;
1388
+ }
1389
+
1390
+ /* primary */
1391
+ .liquid-button[data-variant='primary'] {
1392
+ background: var(--component-button-color-primary-background-default, #187089);
1393
+ color: var(--component-button-color-primary-text-default, #ffffff);
1394
+ border-color: transparent;
1395
+ }
1396
+
1397
+ .liquid-button[data-variant='primary']:hover:not(:disabled) {
1398
+ background: var(--component-button-color-primary-background-hover, #035268);
1399
+ }
1400
+
1401
+ .liquid-button[data-variant='primary']:active:not(:disabled) {
1402
+ background: var(--component-button-color-primary-background-active, #035268);
1403
+ }
1404
+
1405
+ .liquid-button[data-variant='primary']:disabled {
1406
+ background: var(
1407
+ --component-button-color-primary-background-disabled,
1408
+ #e0e0e0
1409
+ );
1410
+ color: var(--component-button-color-primary-text-disabled, #525252);
1411
+ }
1412
+
1413
+ /* secondary */
1414
+ .liquid-button[data-variant='secondary'] {
1415
+ background: var(
1416
+ --component-button-color-secondary-background-default,
1417
+ #ffffff
1418
+ );
1419
+ color: var(--component-button-color-secondary-text-default, #187089);
1420
+ border-color: var(--component-button-color-secondary-border-default, #187089);
1421
+ }
1422
+
1423
+ .liquid-button[data-variant='secondary']:hover:not(:disabled) {
1424
+ background: var(--component-button-color-secondary-background-hover, #187089);
1425
+ color: var(--component-button-color-secondary-text-hover, #ffffff);
1426
+ }
1427
+
1428
+ .liquid-button[data-variant='secondary']:active:not(:disabled) {
1429
+ background: var(
1430
+ --component-button-color-secondary-background-active,
1431
+ #035268
1432
+ );
1433
+ color: var(--component-button-color-secondary-text-active, #ffffff);
1434
+ }
1435
+
1436
+ .liquid-button[data-variant='secondary']:focus-visible {
1437
+ border-color: var(--component-button-color-secondary-border-focus, #0f62fe);
1438
+ }
1439
+
1440
+ .liquid-button[data-variant='secondary']:disabled {
1441
+ background: var(
1442
+ --component-button-color-secondary-background-disabled,
1443
+ #e0e0e0
1444
+ );
1445
+ color: var(--component-button-color-secondary-text-disabled, #525252);
1446
+ }
1447
+
1448
+ /* tertiary */
1449
+ .liquid-button[data-variant='tertiary'] {
1450
+ background: transparent;
1451
+ color: var(--component-button-color-tertiary-text-default, #187089);
1452
+ border-color: transparent;
1453
+ }
1454
+
1455
+ .liquid-button[data-variant='tertiary']:hover:not(:disabled) {
1456
+ background: var(--component-button-color-tertiary-background-hover, #e0e0e0);
1457
+ color: var(--component-button-color-tertiary-text-hover, #035268);
1458
+ }
1459
+
1460
+ .liquid-button[data-variant='tertiary']:active:not(:disabled) {
1461
+ background: var(--component-button-color-tertiary-background-active, #e0e0e0);
1462
+ color: var(--component-button-color-tertiary-text-active, #035268);
1463
+ }
1464
+
1465
+ .liquid-button[data-variant='tertiary']:disabled {
1466
+ background: var(
1467
+ --component-button-color-tertiary-background-disabled,
1468
+ #e0e0e0
1469
+ );
1470
+ color: var(--component-button-color-tertiary-text-disabled, #525252);
1471
+ }
1472
+
1473
+ /* danger */
1474
+ .liquid-button[data-variant='danger'] {
1475
+ background: var(--component-button-color-danger-background-default, #da1e28);
1476
+ color: var(--component-button-color-danger-text-default, #ffffff);
1477
+ border-color: transparent;
1478
+ }
1479
+
1480
+ .liquid-button[data-variant='danger']:hover:not(:disabled) {
1481
+ background: var(--component-button-color-danger-background-hover, #a2191f);
1482
+ }
1483
+
1484
+ .liquid-button[data-variant='danger']:active:not(:disabled) {
1485
+ background: var(--component-button-color-danger-background-active, #750e13);
1486
+ }
1487
+
1488
+ .liquid-button[data-variant='danger']:disabled {
1489
+ background: var(--component-button-color-danger-background-disabled, #e0e0e0);
1490
+ color: var(--component-button-color-danger-text-disabled, #525252);
1491
+ }
1492
+
1493
+ .liquid-card {
1494
+ width: min(100%, var(--component-card-layout-width, 320px));
1495
+ }
1496
+
1497
+ .liquid-card__container {
1498
+ display: flex;
1499
+ flex-direction: column;
1500
+ width: 100%;
1501
+ background: var(--component-card-color-surface-default, #f4f4f4);
1502
+ border: 1px solid transparent;
1503
+ padding: var(--component-card-layout-padding-y, 16px)
1504
+ var(--component-card-layout-padding-x, 16px);
1505
+ transition:
1506
+ background-color 120ms ease,
1507
+ border-color 120ms ease,
1508
+ box-shadow 120ms ease;
1509
+ }
1510
+
1511
+ .liquid-card:focus-within .liquid-card__container,
1512
+ .liquid-card.liquid-card--is-focus .liquid-card__container {
1513
+ background: var(--component-card-color-surface-selected, #e0e0e0);
1514
+ border-color: var(--component-card-color-border-focus, #0f62fe);
1515
+ box-shadow: 0 0 0 var(--component-card-layout-focus-ring-offset, 2px)
1516
+ var(--component-card-color-border-focus, #0f62fe);
1517
+ }
1518
+
1519
+ .liquid-card__header {
1520
+ display: flex;
1521
+ flex-direction: column;
1522
+ gap: var(--component-card-layout-header-gap, 8px);
1523
+ width: 100%;
1524
+ padding-bottom: var(--component-card-layout-header-body-gap, 32px);
1525
+ }
1526
+
1527
+ .liquid-card__title,
1528
+ .liquid-card__description,
1529
+ .liquid-card__detail-label,
1530
+ .liquid-card__detail-value {
1531
+ margin: 0;
1532
+ word-break: break-word;
1533
+ }
1534
+
1535
+ .liquid-card__title {
1536
+ color: var(--component-card-color-title-text, #161616);
1537
+ font-family: var(
1538
+ --component-card-typography-title-font-family,
1539
+ 'Roboto Condensed',
1540
+ sans-serif
1541
+ );
1542
+ font-size: var(--component-card-typography-title-font-size, 32px);
1543
+ font-weight: var(--component-card-typography-title-font-weight, 500);
1544
+ line-height: var(--component-card-typography-title-line-height, 40px);
1545
+ letter-spacing: var(--component-card-typography-title-letter-spacing, 0px);
1546
+ }
1547
+
1548
+ .liquid-card__description {
1549
+ color: var(--component-card-color-description-text, #525252);
1550
+ font-family: var(
1551
+ --component-card-typography-description-font-family,
1552
+ Cabin,
1553
+ sans-serif
1554
+ );
1555
+ font-size: var(--component-card-typography-description-font-size, 14px);
1556
+ font-weight: var(--component-card-typography-description-font-weight, 400);
1557
+ line-height: var(--component-card-typography-description-line-height, 20px);
1558
+ letter-spacing: var(
1559
+ --component-card-typography-description-letter-spacing,
1560
+ 0.16px
1561
+ );
1562
+ }
1563
+
1564
+ .liquid-card__body {
1565
+ width: 100%;
1566
+ }
1567
+
1568
+ .liquid-card__detail-list {
1569
+ display: flex;
1570
+ flex-direction: column;
1571
+ gap: var(--component-card-layout-details-gap, 12px);
1572
+ margin: 0;
1573
+ width: 100%;
1574
+ }
1575
+
1576
+ .liquid-card__detail-row {
1577
+ display: grid;
1578
+ align-items: center;
1579
+ column-gap: var(--component-card-layout-details-column-gap, 16px);
1580
+ grid-template-columns:
1581
+ minmax(0, var(--component-card-layout-details-label-width, 104px))
1582
+ minmax(0, 1fr);
1583
+ }
1584
+
1585
+ .liquid-card__detail-label {
1586
+ color: var(--component-card-color-detail-label-text, #525252);
1587
+ font-family: var(
1588
+ --component-card-typography-detail-label-font-family,
1589
+ Cabin,
1590
+ sans-serif
1591
+ );
1592
+ font-size: var(--component-card-typography-detail-label-font-size, 14px);
1593
+ font-weight: var(--component-card-typography-detail-label-font-weight, 500);
1594
+ line-height: var(--component-card-typography-detail-label-line-height, 18px);
1595
+ letter-spacing: var(
1596
+ --component-card-typography-detail-label-letter-spacing,
1597
+ 0.16px
1598
+ );
1599
+ }
1600
+
1601
+ .liquid-card__detail-value {
1602
+ color: var(--component-card-color-detail-value-text, #161616);
1603
+ font-family: var(
1604
+ --component-card-typography-detail-value-font-family,
1605
+ Cabin,
1606
+ sans-serif
1607
+ );
1608
+ font-size: var(--component-card-typography-detail-value-font-size, 14px);
1609
+ font-weight: var(--component-card-typography-detail-value-font-weight, 400);
1610
+ line-height: var(--component-card-typography-detail-value-line-height, 20px);
1611
+ letter-spacing: var(
1612
+ --component-card-typography-detail-value-letter-spacing,
1613
+ 0.16px
1614
+ );
1615
+ }
1616
+
1617
+ .liquid-card__footer {
1618
+ display: flex;
1619
+ width: 100%;
1620
+ padding-top: var(--component-card-layout-footer-top-gap, 32px);
1621
+ }
1622
+
1623
+ .liquid-card__action-button {
1624
+ min-width: var(--component-card-layout-action-min-width, 96px);
1625
+ width: 100%;
1626
+ }
1627
+
1628
+ .liquid-card[data-disabled='true'] .liquid-card__container,
1629
+ .liquid-card.liquid-card--is-disabled .liquid-card__container {
1630
+ background: var(--component-card-color-surface-disabled, #e0e0e0);
1631
+ }
1632
+
1633
+ .liquid-card[data-disabled='true'] .liquid-card__title,
1634
+ .liquid-card.liquid-card--is-disabled .liquid-card__title {
1635
+ color: var(--component-card-color-title-disabled-text, #525252);
1636
+ }
1637
+
1638
+ .liquid-card[data-disabled='true'] .liquid-card__description,
1639
+ .liquid-card.liquid-card--is-disabled .liquid-card__description {
1640
+ color: var(--component-card-color-description-disabled-text, #525252);
1641
+ }
1642
+
1643
+ .liquid-card[data-disabled='true'] .liquid-card__detail-label,
1644
+ .liquid-card.liquid-card--is-disabled .liquid-card__detail-label {
1645
+ color: var(--component-card-color-detail-label-disabled-text, #525252);
1646
+ }
1647
+
1648
+ .liquid-card[data-disabled='true'] .liquid-card__detail-value,
1649
+ .liquid-card.liquid-card--is-disabled .liquid-card__detail-value {
1650
+ color: var(--component-card-color-detail-value-disabled-text, #525252);
1651
+ }
1652
+
1653
+ /* ─────────────────────────────────────────
1654
+ Checkbox – token-driven styles
1655
+ ───────────────────────────────────────── */
1656
+
1657
+ .liquid-checkbox {
1658
+ display: inline-flex;
1659
+ align-items: center;
1660
+ gap: var(--component-checkbox-layout-label-gap, 4px);
1661
+ cursor: pointer;
1662
+ user-select: none;
1663
+ }
1664
+
1665
+ .liquid-checkbox[data-disabled] {
1666
+ cursor: not-allowed;
1667
+ }
1668
+
1669
+ /* Visually hide the native input while keeping it accessible and focusable */
1670
+ .liquid-checkbox__input {
1671
+ position: absolute;
1672
+ width: 1px;
1673
+ height: 1px;
1674
+ padding: 0;
1675
+ margin: -1px;
1676
+ overflow: hidden;
1677
+ clip: rect(0, 0, 0, 0);
1678
+ white-space: nowrap;
1679
+ border: 0;
1680
+ }
1681
+
1682
+ /* ── Visual checkbox box ── */
1683
+ .liquid-checkbox__box {
1684
+ flex-shrink: 0;
1685
+ display: inline-flex;
1686
+ align-items: center;
1687
+ justify-content: center;
1688
+ width: var(--component-checkbox-layout-size, 20px);
1689
+ height: var(--component-checkbox-layout-size, 20px);
1690
+ border-radius: var(--component-checkbox-layout-radius, 0px);
1691
+ border: var(--component-checkbox-layout-border-width, 1px) solid
1692
+ var(--component-checkbox-border-default, #8d8d8d);
1693
+ background: transparent;
1694
+ transition:
1695
+ background-color 120ms ease,
1696
+ border-color 120ms ease;
1697
+ position: relative;
1698
+ }
1699
+
1700
+ /* ── Check / Dash icons – hidden until their state applies ── */
1701
+ .liquid-checkbox__check-icon,
1702
+ .liquid-checkbox__dash-icon {
1703
+ position: absolute;
1704
+ inset: 50% auto auto 50%;
1705
+ transform: translate(-50%, -50%);
1706
+ opacity: 0;
1707
+ width: 14px;
1708
+ height: 14px;
1709
+ pointer-events: none;
1710
+ transition: opacity 80ms ease;
1711
+ }
1712
+
1713
+ /* ── Checked state ── */
1714
+ .liquid-checkbox__input:checked ~ .liquid-checkbox__box {
1715
+ background: var(--component-checkbox-background-checked, #161616);
1716
+ border-color: var(--component-checkbox-background-checked, #161616);
1717
+ position: relative;
1718
+ }
1719
+
1720
+ .liquid-checkbox__input:checked
1721
+ ~ .liquid-checkbox__box
1722
+ .liquid-checkbox__check-icon {
1723
+ opacity: 1;
1724
+ }
1725
+
1726
+ /* ── Indeterminate state ── */
1727
+ .liquid-checkbox__input:indeterminate ~ .liquid-checkbox__box {
1728
+ background: var(--component-checkbox-background-checked, #161616);
1729
+ border-color: var(--component-checkbox-background-checked, #161616);
1730
+ position: relative;
1731
+ }
1732
+
1733
+ .liquid-checkbox__input:indeterminate
1734
+ ~ .liquid-checkbox__box
1735
+ .liquid-checkbox__dash-icon {
1736
+ opacity: 1;
1737
+ }
1738
+
1739
+ /* ── Hover (non-disabled) ── */
1740
+ .liquid-checkbox:not([data-disabled]):hover .liquid-checkbox__box {
1741
+ border-color: var(--component-checkbox-border-hover, #161616);
1742
+ }
1743
+
1744
+ .liquid-checkbox:not([data-disabled]):hover
1745
+ .liquid-checkbox__input:checked
1746
+ ~ .liquid-checkbox__box,
1747
+ .liquid-checkbox:not([data-disabled]):hover
1748
+ .liquid-checkbox__input:indeterminate
1749
+ ~ .liquid-checkbox__box {
1750
+ background: var(--component-checkbox-background-checked, #161616);
1751
+ border-color: var(--component-checkbox-background-checked, #161616);
1752
+ }
1753
+
1754
+ /* ── Focus-visible ring ── */
1755
+ .liquid-checkbox__input:focus-visible ~ .liquid-checkbox__box {
1756
+ box-shadow:
1757
+ 0 0 0 2px #ffffff,
1758
+ 0 0 0 4px var(--component-checkbox-border-focus, #0f62fe);
1759
+ }
1760
+
1761
+ /* ── Disabled – unchecked ── */
1762
+ .liquid-checkbox__input:disabled ~ .liquid-checkbox__box {
1763
+ border-color: var(--component-checkbox-border-disabled, #c6c6c6);
1764
+ background: transparent;
1765
+ }
1766
+
1767
+ /* ── Disabled – checked or indeterminate ── */
1768
+ .liquid-checkbox__input:disabled:checked ~ .liquid-checkbox__box,
1769
+ .liquid-checkbox__input:disabled:indeterminate ~ .liquid-checkbox__box {
1770
+ background: var(--component-checkbox-background-checked-disabled, #c6c6c6);
1771
+ border-color: var(--component-checkbox-background-checked-disabled, #c6c6c6);
1772
+ }
1773
+
1774
+ /* ── Label text ── */
1775
+ .liquid-checkbox__label-text {
1776
+ font-family: var(--component-checkbox-label-family, Cabin);
1777
+ font-size: var(--component-checkbox-label-size, 12px);
1778
+ font-weight: 400;
1779
+ line-height: var(--component-checkbox-label-line-height, 16px);
1780
+ letter-spacing: var(--component-checkbox-label-letter-spacing, 0.32px);
1781
+ color: var(--component-checkbox-text-label, #161616);
1782
+ }
1783
+
1784
+ .liquid-checkbox[data-disabled] .liquid-checkbox__label-text {
1785
+ color: var(--component-checkbox-text-label-disabled, #a8a8a8);
1786
+ }
1787
+
1788
+ /* ── Utility: visually hidden but screen-reader readable ── */
1789
+ .liquid-sr-only {
1790
+ position: absolute;
1791
+ width: 1px;
1792
+ height: 1px;
1793
+ padding: 0;
1794
+ margin: -1px;
1795
+ overflow: hidden;
1796
+ clip: rect(0, 0, 0, 0);
1797
+ white-space: nowrap;
1798
+ border: 0;
1799
+ }
1800
+
1801
+ .liquid-contained-list {
1802
+ width: min(100%, var(--component-contained-list-layout-width, 320px));
1803
+ }
1804
+
1805
+ .liquid-contained-list__table {
1806
+ width: 100%;
1807
+ }
1808
+
1809
+ .liquid-contained-list__row {
1810
+ display: flex;
1811
+ align-items: center;
1812
+ min-height: var(--component-contained-list-layout-item-min-height, 48px);
1813
+ padding-inline: var(--component-contained-list-layout-padding-x, 16px);
1814
+ }
1815
+
1816
+ .liquid-contained-list__body .liquid-contained-list__row {
1817
+ border-bottom: var(--component-contained-list-layout-divider-width, 1px) solid
1818
+ var(--component-contained-list-color-divider-subtle, #e0e0e0);
1819
+ }
1820
+
1821
+ .liquid-contained-list__header--on-page .liquid-contained-list__row {
1822
+ min-height: var(
1823
+ --component-contained-list-layout-header-on-page-min-height,
1824
+ 32px
1825
+ );
1826
+ }
1827
+
1828
+ .liquid-contained-list__header--disclosed .liquid-contained-list__row {
1829
+ min-height: var(
1830
+ --component-contained-list-layout-header-disclosed-min-height,
1831
+ 48px
1832
+ );
1833
+ background: var(
1834
+ --component-contained-list-color-header-background-disclosed,
1835
+ #f4f4f4
1836
+ );
1837
+ }
1838
+
1839
+ .liquid-contained-list__title,
1840
+ .liquid-contained-list__item-label {
1841
+ flex: 1 0 0;
1842
+ min-width: 0;
1843
+ word-break: break-word;
1844
+ }
1845
+
1846
+ .liquid-contained-list__title--on-page {
1847
+ color: var(--component-contained-list-color-header-text-on-page, #161616);
1848
+ font-family: var(
1849
+ --component-contained-list-typography-header-title-on-page-font-family,
1850
+ Cabin,
1851
+ sans-serif
1852
+ );
1853
+ font-size: var(
1854
+ --component-contained-list-typography-header-title-on-page-font-size,
1855
+ 16px
1856
+ );
1857
+ font-weight: var(
1858
+ --component-contained-list-typography-header-title-on-page-font-weight,
1859
+ 600
1860
+ );
1861
+ line-height: var(
1862
+ --component-contained-list-typography-header-title-on-page-line-height,
1863
+ 24px
1864
+ );
1865
+ letter-spacing: var(
1866
+ --component-contained-list-typography-header-title-on-page-letter-spacing,
1867
+ 0px
1868
+ );
1869
+ }
1870
+
1871
+ .liquid-contained-list__title--disclosed {
1872
+ color: var(--component-contained-list-color-header-text-disclosed, #525252);
1873
+ font-family: var(
1874
+ --component-contained-list-typography-header-title-disclosed-font-family,
1875
+ Cabin,
1876
+ sans-serif
1877
+ );
1878
+ font-size: var(
1879
+ --component-contained-list-typography-header-title-disclosed-font-size,
1880
+ 14px
1881
+ );
1882
+ font-weight: var(
1883
+ --component-contained-list-typography-header-title-disclosed-font-weight,
1884
+ 500
1885
+ );
1886
+ line-height: var(
1887
+ --component-contained-list-typography-header-title-disclosed-line-height,
1888
+ 18px
1889
+ );
1890
+ letter-spacing: var(
1891
+ --component-contained-list-typography-header-title-disclosed-letter-spacing,
1892
+ 0.16px
1893
+ );
1894
+ }
1895
+
1896
+ .liquid-contained-list__item-label {
1897
+ color: var(--component-contained-list-color-item-text, #161616);
1898
+ font-family: var(
1899
+ --component-contained-list-typography-item-label-font-family,
1900
+ Cabin,
1901
+ sans-serif
1902
+ );
1903
+ font-size: var(
1904
+ --component-contained-list-typography-item-label-font-size,
1905
+ 16px
1906
+ );
1907
+ font-weight: var(
1908
+ --component-contained-list-typography-item-label-font-weight,
1909
+ 400
1910
+ );
1911
+ line-height: var(
1912
+ --component-contained-list-typography-item-label-line-height,
1913
+ 24px
1914
+ );
1915
+ letter-spacing: var(
1916
+ --component-contained-list-typography-item-label-letter-spacing,
1917
+ 0px
1918
+ );
1919
+ }
1920
+
1921
+ .liquid-data-table {
1922
+ width: min(100%, var(--component-data-table-layout-width, 720px));
1923
+ background: var(--component-data-table-color-surface-default, #f4f4f4);
1924
+ }
1925
+
1926
+ .liquid-data-table__header {
1927
+ display: grid;
1928
+ gap: var(--component-data-table-layout-header-gap, 4px);
1929
+ padding: var(--component-data-table-layout-header-padding-top, 16px)
1930
+ var(--component-data-table-layout-header-padding-x, 16px)
1931
+ var(--component-data-table-layout-header-padding-bottom, 32px);
1932
+ background: var(--component-data-table-color-surface-default, #f4f4f4);
1933
+ }
1934
+
1935
+ .liquid-data-table__title {
1936
+ margin: 0;
1937
+ color: var(--component-data-table-color-text-title, #161616);
1938
+ font-family: var(
1939
+ --component-data-table-typography-title-font-family,
1940
+ 'Roboto Condensed',
1941
+ sans-serif
1942
+ );
1943
+ font-size: var(--component-data-table-typography-title-font-size, 32px);
1944
+ font-weight: var(--component-data-table-typography-title-font-weight, 500);
1945
+ line-height: var(--component-data-table-typography-title-line-height, 40px);
1946
+ letter-spacing: var(
1947
+ --component-data-table-typography-title-letter-spacing,
1948
+ 0px
1949
+ );
1950
+ }
1951
+
1952
+ .liquid-data-table__description {
1953
+ margin: 0;
1954
+ color: var(--component-data-table-color-text-description, #525252);
1955
+ font-family: var(
1956
+ --component-data-table-typography-description-font-family,
1957
+ Cabin,
1958
+ sans-serif
1959
+ );
1960
+ font-size: var(--component-data-table-typography-description-font-size, 14px);
1961
+ font-weight: var(
1962
+ --component-data-table-typography-description-font-weight,
1963
+ 400
1964
+ );
1965
+ line-height: var(
1966
+ --component-data-table-typography-description-line-height,
1967
+ 20px
1968
+ );
1969
+ letter-spacing: var(
1970
+ --component-data-table-typography-description-letter-spacing,
1971
+ 0.16px
1972
+ );
1973
+ }
1974
+
1975
+ .liquid-data-table__table {
1976
+ width: 100%;
1977
+ border-collapse: collapse;
1978
+ border-top: var(--component-data-table-layout-border-width, 1px) solid
1979
+ var(--component-data-table-color-border-subtle, #e0e0e0);
1980
+ border-bottom: var(--component-data-table-layout-border-width, 1px) solid
1981
+ var(--component-data-table-color-border-subtle, #e0e0e0);
1982
+ }
1983
+
1984
+ .liquid-data-table__column-row {
1985
+ background: var(--component-data-table-color-surface-header, #e0e0e0);
1986
+ }
1987
+
1988
+ .liquid-data-table__column-header,
1989
+ .liquid-data-table__cell {
1990
+ height: var(--component-data-table-layout-row-height, 48px);
1991
+ box-sizing: border-box;
1992
+ padding: var(--component-data-table-layout-cell-padding-y, 12px)
1993
+ var(--component-data-table-layout-cell-padding-x, 16px);
1994
+ border-bottom: var(--component-data-table-layout-border-width, 1px) solid
1995
+ var(--component-data-table-color-border-subtle, #e0e0e0);
1996
+ }
1997
+
1998
+ .liquid-data-table__column-header {
1999
+ color: var(--component-data-table-color-text-header, #161616);
2000
+ font-family: var(
2001
+ --component-data-table-typography-header-font-family,
2002
+ Cabin,
2003
+ sans-serif
2004
+ );
2005
+ font-size: var(--component-data-table-typography-header-font-size, 16px);
2006
+ font-weight: var(--component-data-table-typography-header-font-weight, 600);
2007
+ line-height: var(--component-data-table-typography-header-line-height, 24px);
2008
+ letter-spacing: var(
2009
+ --component-data-table-typography-header-letter-spacing,
2010
+ 0px
2011
+ );
2012
+ text-align: left;
2013
+ }
2014
+
2015
+ .liquid-data-table__cell {
2016
+ color: var(--component-data-table-color-text-cell, #161616);
2017
+ font-family: var(
2018
+ --component-data-table-typography-cell-font-family,
2019
+ Cabin,
2020
+ sans-serif
2021
+ );
2022
+ font-size: var(--component-data-table-typography-cell-font-size, 16px);
2023
+ font-weight: var(--component-data-table-typography-cell-font-weight, 400);
2024
+ line-height: var(--component-data-table-typography-cell-line-height, 24px);
2025
+ letter-spacing: var(
2026
+ --component-data-table-typography-cell-letter-spacing,
2027
+ 0px
2028
+ );
2029
+ text-align: left;
2030
+ }
2031
+
2032
+ .liquid-data-table__row {
2033
+ background: var(--component-data-table-color-surface-default, #f4f4f4);
2034
+ transition: background-color 120ms ease;
2035
+ }
2036
+
2037
+ .liquid-data-table__row:hover {
2038
+ background: var(--component-data-table-color-surface-hover, #e8e8e8);
2039
+ }
2040
+
2041
+ .liquid-data-table__row[data-selected] {
2042
+ background: var(--component-data-table-color-surface-selected, #d0e2ff);
2043
+ }
2044
+
2045
+ .liquid-data-table__column-header[data-align='right'],
2046
+ .liquid-data-table__cell[data-align='right'] {
2047
+ text-align: right;
2048
+ }
2049
+
2050
+ .liquid-data-table__checkbox-column {
2051
+ width: var(--component-data-table-layout-checkbox-column-width, 48px);
2052
+ min-width: var(--component-data-table-layout-checkbox-column-width, 48px);
2053
+ padding-inline: 0;
2054
+ text-align: center;
2055
+ }
2056
+
2057
+ .liquid-data-table__checkbox-column .liquid-checkbox {
2058
+ width: 100%;
2059
+ align-items: center;
2060
+ justify-content: center;
2061
+ }
2062
+
2063
+ .liquid-data-table__checkbox-column
2064
+ .liquid-checkbox__input:focus-visible
2065
+ ~ .liquid-checkbox__box {
2066
+ box-shadow:
2067
+ 0 0 0 2px var(--component-data-table-color-focus-inset, #ffffff),
2068
+ 0 0 0 4px var(--component-data-table-color-focus-ring, #0f62fe);
2069
+ }
2070
+
2071
+ .liquid-description-list {
2072
+ width: min(100%, var(--component-description-list-layout-width, 288px));
2073
+ }
2074
+
2075
+ .liquid-description-list__content {
2076
+ display: flex;
2077
+ flex-direction: column;
2078
+ gap: var(--component-description-list-layout-gap, 12px);
2079
+ margin: 0;
2080
+ width: 100%;
2081
+ }
2082
+
2083
+ .liquid-description-list__row {
2084
+ display: grid;
2085
+ align-items: center;
2086
+ column-gap: var(--component-description-list-layout-column-gap, 16px);
2087
+ grid-template-columns:
2088
+ minmax(0, var(--component-description-list-layout-label-width, 104px))
2089
+ minmax(0, 1fr);
2090
+ }
2091
+
2092
+ .liquid-description-list__label,
2093
+ .liquid-description-list__value {
2094
+ margin: 0;
2095
+ min-width: 0;
2096
+ word-break: break-word;
2097
+ }
2098
+
2099
+ .liquid-description-list__label {
2100
+ color: var(--component-description-list-color-label-text, #525252);
2101
+ font-family: var(
2102
+ --component-description-list-typography-label-font-family,
2103
+ Cabin,
2104
+ sans-serif
2105
+ );
2106
+ font-size: var(--component-description-list-typography-label-font-size, 14px);
2107
+ font-weight: var(
2108
+ --component-description-list-typography-label-font-weight,
2109
+ 500
2110
+ );
2111
+ line-height: var(
2112
+ --component-description-list-typography-label-line-height,
2113
+ 18px
2114
+ );
2115
+ letter-spacing: var(
2116
+ --component-description-list-typography-label-letter-spacing,
2117
+ 0.16px
2118
+ );
2119
+ }
2120
+
2121
+ .liquid-description-list__value {
2122
+ color: var(--component-description-list-color-description-text, #161616);
2123
+ font-family: var(
2124
+ --component-description-list-typography-description-font-family,
2125
+ Cabin,
2126
+ sans-serif
2127
+ );
2128
+ font-size: var(
2129
+ --component-description-list-typography-description-font-size,
2130
+ 14px
2131
+ );
2132
+ font-weight: var(
2133
+ --component-description-list-typography-description-font-weight,
2134
+ 400
2135
+ );
2136
+ line-height: var(
2137
+ --component-description-list-typography-description-line-height,
2138
+ 20px
2139
+ );
2140
+ letter-spacing: var(
2141
+ --component-description-list-typography-description-letter-spacing,
2142
+ 0.16px
2143
+ );
2144
+ }
2145
+
2146
+ .liquid-form {
2147
+ width: min(100%, var(--component-form-layout-width, 480px));
2148
+ display: flex;
2149
+ flex-direction: column;
2150
+ gap: var(--component-form-layout-header-body-gap, 40px);
2151
+ }
2152
+
2153
+ .liquid-form__header {
2154
+ display: flex;
2155
+ flex-direction: column;
2156
+ gap: var(--component-form-layout-header-gap, 8px);
2157
+ }
2158
+
2159
+ .liquid-form__title,
2160
+ .liquid-form__description {
2161
+ margin: 0;
2162
+ word-break: break-word;
2163
+ }
2164
+
2165
+ .liquid-form__title {
2166
+ color: var(--component-form-color-header-title-text, #161616);
2167
+ font-family: var(
2168
+ --component-form-typography-header-title-font-family,
2169
+ 'Roboto Condensed',
2170
+ sans-serif
2171
+ );
2172
+ font-size: var(--component-form-typography-header-title-font-size, 32px);
2173
+ font-weight: var(--component-form-typography-header-title-font-weight, 500);
2174
+ line-height: var(--component-form-typography-header-title-line-height, 40px);
2175
+ letter-spacing: var(
2176
+ --component-form-typography-header-title-letter-spacing,
2177
+ 0px
2178
+ );
2179
+ }
2180
+
2181
+ .liquid-form__description {
2182
+ color: var(--component-form-color-header-description-text, #525252);
2183
+ font-family: var(
2184
+ --component-form-typography-header-description-font-family,
2185
+ Cabin,
2186
+ sans-serif
2187
+ );
2188
+ font-size: var(
2189
+ --component-form-typography-header-description-font-size,
2190
+ 14px
2191
+ );
2192
+ font-weight: var(
2193
+ --component-form-typography-header-description-font-weight,
2194
+ 400
2195
+ );
2196
+ line-height: var(
2197
+ --component-form-typography-header-description-line-height,
2198
+ 20px
2199
+ );
2200
+ letter-spacing: var(
2201
+ --component-form-typography-header-description-letter-spacing,
2202
+ 0.16px
2203
+ );
2204
+ }
2205
+
2206
+ .liquid-form__content {
2207
+ display: flex;
2208
+ flex-direction: column;
2209
+ gap: var(--component-form-layout-footer-top-gap, 48px);
2210
+ width: 100%;
2211
+ }
2212
+
2213
+ .liquid-form__body {
2214
+ display: flex;
2215
+ flex-direction: column;
2216
+ gap: var(--component-form-layout-body-item-gap, 32px);
2217
+ width: 100%;
2218
+ }
2219
+
2220
+ .liquid-form__row {
2221
+ display: flex;
2222
+ align-items: flex-start;
2223
+ column-gap: var(--component-form-layout-body-column-gap, 32px);
2224
+ width: 100%;
2225
+ }
2226
+
2227
+ .liquid-form__item {
2228
+ width: 100%;
2229
+ }
2230
+
2231
+ .liquid-form__item[data-grow='true'] {
2232
+ flex: 1 0 0;
2233
+ min-width: 0;
2234
+ }
2235
+
2236
+ .liquid-form__footer {
2237
+ width: 100%;
2238
+ }
2239
+
2240
+ .liquid-form__actions {
2241
+ display: flex;
2242
+ align-items: flex-start;
2243
+ gap: var(--component-form-layout-actions-gap, 16px);
2244
+ width: 100%;
2245
+ }
2246
+
2247
+ .liquid-form__action-button {
2248
+ min-width: var(--component-form-layout-action-min-width, 96px);
2249
+ }
2250
+
2251
+ .liquid-grid {
2252
+ display: grid;
2253
+ box-sizing: border-box;
2254
+ width: 100%;
2255
+ max-width: var(--liquid-grid-max-width, none);
2256
+ margin-inline: var(--liquid-grid-margin-inline, auto);
2257
+ padding-inline: var(--liquid-grid-margin-sm, 16px);
2258
+ grid-template-columns: repeat(
2259
+ var(--liquid-grid-columns-sm, 4),
2260
+ minmax(0, 1fr)
2261
+ );
2262
+ column-gap: var(--liquid-grid-gutter-sm, 16px);
2263
+ row-gap: var(--liquid-grid-row-gap-sm, 0px);
2264
+ align-items: var(--liquid-grid-align, stretch);
2265
+ }
2266
+
2267
+ .liquid-grid__column {
2268
+ display: var(--liquid-grid-column-display-sm, block);
2269
+ min-width: 0;
2270
+ box-sizing: border-box;
2271
+ grid-column: var(--liquid-grid-column-sm, span 1);
2272
+ }
2273
+
2274
+ @media (min-width: 672px) {
2275
+ .liquid-grid {
2276
+ padding-inline: var(
2277
+ --liquid-grid-margin-md,
2278
+ var(--liquid-grid-margin-sm, 16px)
2279
+ );
2280
+ grid-template-columns: repeat(
2281
+ var(--liquid-grid-columns-md, var(--liquid-grid-columns-sm, 4)),
2282
+ minmax(0, 1fr)
2283
+ );
2284
+ column-gap: var(
2285
+ --liquid-grid-gutter-md,
2286
+ var(--liquid-grid-gutter-sm, 16px)
2287
+ );
2288
+ row-gap: var(--liquid-grid-row-gap-md, var(--liquid-grid-row-gap-sm, 0px));
2289
+ }
2290
+
2291
+ .liquid-grid__column {
2292
+ display: var(
2293
+ --liquid-grid-column-display-md,
2294
+ var(--liquid-grid-column-display-sm, block)
2295
+ );
2296
+ grid-column: var(
2297
+ --liquid-grid-column-md,
2298
+ var(--liquid-grid-column-sm, span 1)
2299
+ );
2300
+ }
2301
+ }
2302
+
2303
+ @media (min-width: 1056px) {
2304
+ .liquid-grid {
2305
+ padding-inline: var(
2306
+ --liquid-grid-margin-lg,
2307
+ var(--liquid-grid-margin-md, 16px)
2308
+ );
2309
+ grid-template-columns: repeat(
2310
+ var(--liquid-grid-columns-lg, var(--liquid-grid-columns-md, 8)),
2311
+ minmax(0, 1fr)
2312
+ );
2313
+ column-gap: var(
2314
+ --liquid-grid-gutter-lg,
2315
+ var(--liquid-grid-gutter-md, 16px)
2316
+ );
2317
+ row-gap: var(--liquid-grid-row-gap-lg, var(--liquid-grid-row-gap-md, 0px));
2318
+ }
2319
+
2320
+ .liquid-grid__column {
2321
+ display: var(
2322
+ --liquid-grid-column-display-lg,
2323
+ var(--liquid-grid-column-display-md, block)
2324
+ );
2325
+ grid-column: var(
2326
+ --liquid-grid-column-lg,
2327
+ var(--liquid-grid-column-md, span 1)
2328
+ );
2329
+ }
2330
+ }
2331
+
2332
+ @media (min-width: 1312px) {
2333
+ .liquid-grid {
2334
+ padding-inline: var(
2335
+ --liquid-grid-margin-xlg,
2336
+ var(--liquid-grid-margin-lg, 16px)
2337
+ );
2338
+ grid-template-columns: repeat(
2339
+ var(--liquid-grid-columns-xlg, var(--liquid-grid-columns-lg, 16)),
2340
+ minmax(0, 1fr)
2341
+ );
2342
+ column-gap: var(
2343
+ --liquid-grid-gutter-xlg,
2344
+ var(--liquid-grid-gutter-lg, 32px)
2345
+ );
2346
+ row-gap: var(--liquid-grid-row-gap-xlg, var(--liquid-grid-row-gap-lg, 0px));
2347
+ }
2348
+
2349
+ .liquid-grid__column {
2350
+ display: var(
2351
+ --liquid-grid-column-display-xlg,
2352
+ var(--liquid-grid-column-display-lg, block)
2353
+ );
2354
+ grid-column: var(
2355
+ --liquid-grid-column-xlg,
2356
+ var(--liquid-grid-column-lg, span 1)
2357
+ );
2358
+ }
2359
+ }
2360
+
2361
+ @media (min-width: 1584px) {
2362
+ .liquid-grid {
2363
+ padding-inline: var(
2364
+ --liquid-grid-margin-max,
2365
+ var(--liquid-grid-margin-xlg, 24px)
2366
+ );
2367
+ grid-template-columns: repeat(
2368
+ var(--liquid-grid-columns-max, var(--liquid-grid-columns-xlg, 16)),
2369
+ minmax(0, 1fr)
2370
+ );
2371
+ column-gap: var(
2372
+ --liquid-grid-gutter-max,
2373
+ var(--liquid-grid-gutter-xlg, 32px)
2374
+ );
2375
+ row-gap: var(
2376
+ --liquid-grid-row-gap-max,
2377
+ var(--liquid-grid-row-gap-xlg, 0px)
2378
+ );
2379
+ }
2380
+
2381
+ .liquid-grid__column {
2382
+ display: var(
2383
+ --liquid-grid-column-display-max,
2384
+ var(--liquid-grid-column-display-xlg, block)
2385
+ );
2386
+ grid-column: var(
2387
+ --liquid-grid-column-max,
2388
+ var(--liquid-grid-column-xlg, span 1)
2389
+ );
2390
+ }
2391
+ }
2392
+
2393
+ .liquid-index {
2394
+ display: inline-flex;
2395
+ align-items: center;
2396
+ gap: var(--component-index-gap, 0px);
2397
+ width: 100%;
2398
+ }
2399
+
2400
+ .liquid-index__item {
2401
+ position: relative;
2402
+ box-sizing: border-box;
2403
+ display: inline-flex;
2404
+ align-items: center;
2405
+ justify-content: center;
2406
+ width: var(--component-index-item-size, 48px);
2407
+ height: var(--component-index-item-size, 48px);
2408
+ min-width: var(--component-index-item-size, 48px);
2409
+ border: 0;
2410
+ margin: 0;
2411
+ padding: 0;
2412
+ background: var(--component-index-background-default, transparent);
2413
+ color: var(--component-index-text-default, #525252);
2414
+ cursor: pointer;
2415
+ transition:
2416
+ background-color 120ms ease,
2417
+ color 120ms ease,
2418
+ box-shadow 120ms ease;
2419
+ }
2420
+
2421
+ .liquid-index__item:hover:not(:disabled) {
2422
+ background: var(--component-index-background-hover, #e0e0e0);
2423
+ }
2424
+
2425
+ .liquid-index__item:focus-visible {
2426
+ outline: none;
2427
+ box-shadow: inset 0 0 0 2px var(--component-index-border-focus, #0f62fe);
2428
+ }
2429
+
2430
+ .liquid-index__item:disabled {
2431
+ background: var(--component-index-background-disabled, transparent);
2432
+ color: var(--component-index-text-disabled, #a8a8a8);
2433
+ cursor: not-allowed;
2434
+ }
2435
+
2436
+ .liquid-index__item--icon {
2437
+ color: var(--component-index-icon-default, #525252);
2438
+ }
2439
+
2440
+ .liquid-index__item--icon svg {
2441
+ width: 24px;
2442
+ height: 24px;
2443
+ display: block;
2444
+ }
2445
+
2446
+ .liquid-index__item[data-selected] {
2447
+ color: var(--component-index-text-selected, #161616);
2448
+ }
2449
+
2450
+ .liquid-index__label {
2451
+ font-family: var(--component-index-label-family, Cabin);
2452
+ font-size: var(--component-index-label-size, 16px);
2453
+ font-weight: var(--component-index-label-weight, 400);
2454
+ line-height: var(--component-index-label-line-height, 24px);
2455
+ letter-spacing: var(--component-index-label-letter-spacing, 0px);
2456
+ }
2457
+
2458
+ .liquid-index__item[data-selected] .liquid-index__label {
2459
+ font-weight: var(--component-index-label-weight-selected, 600);
2460
+ }
2461
+
2462
+ .liquid-index__indicator {
2463
+ position: absolute;
2464
+ left: var(--component-index-indicator-inset, 16px);
2465
+ right: var(--component-index-indicator-inset, 16px);
2466
+ bottom: 0;
2467
+ height: var(--component-index-indicator-height, 4px);
2468
+ background: var(--component-index-border-selected, #187089);
2469
+ }
2470
+
2471
+ .liquid-inline-notification {
2472
+ width: 100%;
2473
+ min-width: 0;
2474
+ min-height: var(--component-inline-notification-layout-min-height, 48px);
2475
+ display: flex;
2476
+ align-items: stretch;
2477
+ background: var(
2478
+ --component-inline-notification-color-background-information,
2479
+ #edf5ff
2480
+ );
2481
+ }
2482
+
2483
+ .liquid-inline-notification[data-status='success'] {
2484
+ background: var(
2485
+ --component-inline-notification-color-background-success,
2486
+ #defbe6
2487
+ );
2488
+ }
2489
+
2490
+ .liquid-inline-notification[data-status='warning'] {
2491
+ background: var(
2492
+ --component-inline-notification-color-background-warning,
2493
+ #fcf4d6
2494
+ );
2495
+ }
2496
+
2497
+ .liquid-inline-notification[data-status='error'] {
2498
+ background: var(
2499
+ --component-inline-notification-color-background-error,
2500
+ #fff1f1
2501
+ );
2502
+ }
2503
+
2504
+ .liquid-inline-notification__indicator {
2505
+ width: var(--component-inline-notification-layout-indicator-width, 4px);
2506
+ flex-shrink: 0;
2507
+ background: var(
2508
+ --component-inline-notification-color-status-information,
2509
+ #0043ce
2510
+ );
2511
+ }
2512
+
2513
+ .liquid-inline-notification[data-status='success']
2514
+ .liquid-inline-notification__indicator {
2515
+ background: var(
2516
+ --component-inline-notification-color-status-success,
2517
+ #24a148
2518
+ );
2519
+ }
2520
+
2521
+ .liquid-inline-notification[data-status='warning']
2522
+ .liquid-inline-notification__indicator {
2523
+ background: var(
2524
+ --component-inline-notification-color-status-warning,
2525
+ #b28600
2526
+ );
2527
+ }
2528
+
2529
+ .liquid-inline-notification[data-status='error']
2530
+ .liquid-inline-notification__indicator {
2531
+ background: var(--component-inline-notification-color-status-error, #da1e28);
2532
+ }
2533
+
2534
+ .liquid-inline-notification__shell {
2535
+ display: flex;
2536
+ flex: 1 0 0;
2537
+ min-width: 0;
2538
+ align-items: flex-start;
2539
+ gap: var(--component-inline-notification-layout-shell-gap, 16px);
2540
+ padding-inline: var(--component-inline-notification-layout-padding-x, 16px);
2541
+ padding-block: var(--component-inline-notification-layout-padding-y, 12px);
2542
+ }
2543
+
2544
+ .liquid-inline-notification__details {
2545
+ display: flex;
2546
+ flex: 1 0 0;
2547
+ min-width: 0;
2548
+ align-items: flex-start;
2549
+ gap: var(--component-inline-notification-layout-details-gap, 16px);
2550
+ }
2551
+
2552
+ .liquid-inline-notification__status-icon {
2553
+ width: 24px;
2554
+ height: 24px;
2555
+ flex-shrink: 0;
2556
+ display: inline-flex;
2557
+ align-items: center;
2558
+ justify-content: center;
2559
+ color: var(--component-inline-notification-color-status-information, #0043ce);
2560
+ }
2561
+
2562
+ .liquid-inline-notification[data-status='success']
2563
+ .liquid-inline-notification__status-icon {
2564
+ color: var(--component-inline-notification-color-status-success, #24a148);
2565
+ }
2566
+
2567
+ .liquid-inline-notification[data-status='warning']
2568
+ .liquid-inline-notification__status-icon {
2569
+ color: var(--component-inline-notification-color-status-warning, #b28600);
2570
+ }
2571
+
2572
+ .liquid-inline-notification[data-status='error']
2573
+ .liquid-inline-notification__status-icon {
2574
+ color: var(--component-inline-notification-color-status-error, #da1e28);
2575
+ }
2576
+
2577
+ .liquid-inline-notification__content {
2578
+ display: flex;
2579
+ flex: 1 0 0;
2580
+ min-width: 0;
2581
+ flex-direction: column;
2582
+ gap: var(--component-inline-notification-layout-content-gap, 0px);
2583
+ }
2584
+
2585
+ .liquid-inline-notification[data-kind='actionable']
2586
+ .liquid-inline-notification__content {
2587
+ gap: var(--component-inline-notification-layout-content-gap-actionable, 8px);
2588
+ }
2589
+
2590
+ .liquid-inline-notification__copy {
2591
+ display: flex;
2592
+ flex-direction: column;
2593
+ gap: var(--component-inline-notification-layout-copy-gap, 2px);
2594
+ min-width: 0;
2595
+ }
2596
+
2597
+ .liquid-inline-notification__title,
2598
+ .liquid-inline-notification__body {
2599
+ margin: 0;
2600
+ min-width: 0;
2601
+ color: var(--component-inline-notification-color-text-primary, #161616);
2602
+ }
2603
+
2604
+ .liquid-inline-notification__title {
2605
+ font-family: var(
2606
+ --component-inline-notification-typography-title-family,
2607
+ Cabin
2608
+ );
2609
+ font-size: var(--component-inline-notification-typography-title-size, 14px);
2610
+ font-weight: var(
2611
+ --component-inline-notification-typography-title-weight,
2612
+ 500
2613
+ );
2614
+ line-height: var(
2615
+ --component-inline-notification-typography-title-line-height,
2616
+ 18px
2617
+ );
2618
+ letter-spacing: var(
2619
+ --component-inline-notification-typography-title-letter-spacing,
2620
+ 0.16px
2621
+ );
2622
+ }
2623
+
2624
+ .liquid-inline-notification__body {
2625
+ font-family: var(
2626
+ --component-inline-notification-typography-body-family,
2627
+ Cabin
2628
+ );
2629
+ font-size: var(--component-inline-notification-typography-body-size, 14px);
2630
+ font-weight: var(--component-inline-notification-typography-body-weight, 400);
2631
+ line-height: var(
2632
+ --component-inline-notification-typography-body-line-height,
2633
+ 20px
2634
+ );
2635
+ letter-spacing: var(
2636
+ --component-inline-notification-typography-body-letter-spacing,
2637
+ 0.16px
2638
+ );
2639
+ }
2640
+
2641
+ .liquid-inline-notification__actions {
2642
+ display: flex;
2643
+ align-items: center;
2644
+ }
2645
+
2646
+ .liquid-inline-notification__dismiss {
2647
+ width: 24px;
2648
+ height: 24px;
2649
+ flex-shrink: 0;
2650
+ border: 0;
2651
+ margin: 0;
2652
+ padding: 0;
2653
+ background: transparent;
2654
+ color: var(--component-inline-notification-color-dismiss-icon, #666666);
2655
+ display: inline-flex;
2656
+ align-items: center;
2657
+ justify-content: center;
2658
+ cursor: pointer;
2659
+ }
2660
+
2661
+ .liquid-inline-notification__dismiss-icon {
2662
+ display: inline-flex;
2663
+ }
2664
+
2665
+ .liquid-inline-notification__dismiss:focus-visible {
2666
+ outline: 2px solid
2667
+ var(--component-inline-notification-color-focus-ring, #0f62fe);
2668
+ outline-offset: 1px;
2669
+ }
2670
+
2671
+ .liquid-link {
2672
+ display: inline-flex;
2673
+ align-items: center;
2674
+ gap: var(--component-link-standalone-icon-gap, 8px);
2675
+ border: 0;
2676
+ margin: 0;
2677
+ padding: 0;
2678
+ background: transparent;
2679
+ color: var(--component-link-inline-label-text-default, #0f62fe);
2680
+ cursor: pointer;
2681
+ font-family: var(--component-link-inline-label-md-family, Cabin, sans-serif);
2682
+ font-size: var(--component-link-inline-label-md-size, 14px);
2683
+ font-weight: 500;
2684
+ line-height: var(--component-link-inline-label-md-line-height, 16px);
2685
+ letter-spacing: var(--component-link-inline-label-md-letter-spacing, 0.32px);
2686
+ text-decoration: none;
2687
+ text-underline-offset: 1px;
2688
+ }
2689
+
2690
+ .liquid-link[data-size='sm'] {
2691
+ font-family: var(--component-link-inline-label-sm-family, Cabin, sans-serif);
2692
+ font-size: var(--component-link-inline-label-sm-size, 12px);
2693
+ line-height: var(--component-link-inline-label-sm-line-height, 16px);
2694
+ letter-spacing: var(--component-link-inline-label-sm-letter-spacing, 0.32px);
2695
+ }
2696
+
2697
+ .liquid-link[data-size='md'] {
2698
+ font-family: var(--component-link-inline-label-md-family, Cabin, sans-serif);
2699
+ font-size: var(--component-link-inline-label-md-size, 14px);
2700
+ line-height: var(--component-link-inline-label-md-line-height, 16px);
2701
+ letter-spacing: var(--component-link-inline-label-md-letter-spacing, 0.32px);
2702
+ }
2703
+
2704
+ .liquid-link[data-size='lg'] {
2705
+ font-family: var(--component-link-inline-label-lg-family, Cabin, sans-serif);
2706
+ font-size: var(--component-link-inline-label-lg-size, 16px);
2707
+ line-height: var(--component-link-inline-label-lg-line-height, 24px);
2708
+ letter-spacing: var(--component-link-inline-label-lg-letter-spacing, 0px);
2709
+ }
2710
+
2711
+ .liquid-link[data-appearance='inline'] {
2712
+ color: var(--component-link-inline-label-text-default, #0f62fe);
2713
+ text-decoration: underline;
2714
+ }
2715
+
2716
+ .liquid-link[data-appearance='inline']:hover,
2717
+ .liquid-link[data-appearance='inline'][data-state='hover'] {
2718
+ color: var(--component-link-inline-label-text-hover, #0043ce);
2719
+ }
2720
+
2721
+ .liquid-link[data-appearance='inline']:visited,
2722
+ .liquid-link[data-appearance='inline'][data-state='visited'] {
2723
+ color: var(--component-link-inline-label-text-visited, #8a3ffc);
2724
+ }
2725
+
2726
+ .liquid-link[data-appearance='standalone'] {
2727
+ color: var(--component-link-standalone-label-text-default, #0f62fe);
2728
+ text-decoration: none;
2729
+ }
2730
+
2731
+ .liquid-link[data-appearance='standalone']:hover,
2732
+ .liquid-link[data-appearance='standalone'][data-state='hover'] {
2733
+ color: var(--component-link-standalone-label-text-hover, #0043ce);
2734
+ text-decoration: underline;
2735
+ }
2736
+
2737
+ .liquid-link[data-appearance='standalone']:visited,
2738
+ .liquid-link[data-appearance='standalone'][data-state='visited'] {
2739
+ color: var(--component-link-standalone-label-text-visited, #8a3ffc);
2740
+ }
2741
+
2742
+ .liquid-link[data-appearance='standalone'][data-state='focus'] {
2743
+ text-decoration: underline;
2744
+ }
2745
+
2746
+ .liquid-link:focus-visible,
2747
+ .liquid-link[data-state='focus'] {
2748
+ outline: 2px solid var(--component-link-standalone-border-focus, #0f62fe);
2749
+ outline-offset: 0;
2750
+ }
2751
+
2752
+ .liquid-link[data-appearance='inline']:focus-visible,
2753
+ .liquid-link[data-appearance='inline'][data-state='focus'] {
2754
+ outline-color: var(--component-link-inline-border-focus, #0f62fe);
2755
+ }
2756
+
2757
+ .liquid-link__label {
2758
+ white-space: nowrap;
2759
+ }
2760
+
2761
+ .liquid-link__icon {
2762
+ display: inline-flex;
2763
+ align-items: center;
2764
+ justify-content: center;
2765
+ color: currentColor;
2766
+ }
2767
+
2768
+ .liquid-link[data-size='sm'] .liquid-link__icon,
2769
+ .liquid-link[data-size='md'] .liquid-link__icon {
2770
+ width: 16px;
2771
+ height: 16px;
2772
+ }
2773
+
2774
+ .liquid-link[data-size='lg'] .liquid-link__icon {
2775
+ width: 20px;
2776
+ height: 20px;
2777
+ }
2778
+
2779
+ .liquid-modal {
2780
+ width: min(100%, var(--component-modal-layout-width-md, 608px));
2781
+ display: flex;
2782
+ flex-direction: column;
2783
+ background: var(--component-modal-color-surface-default, #f4f4f4);
2784
+ border: var(--component-modal-layout-border-width, 1px) solid
2785
+ var(--component-modal-color-border-default, #e0e0e0);
2786
+ box-sizing: border-box;
2787
+ }
2788
+
2789
+ .liquid-modal__header {
2790
+ display: flex;
2791
+ gap: var(--component-modal-layout-header-gap, 24px);
2792
+ align-items: flex-start;
2793
+ justify-content: space-between;
2794
+ padding-block: var(--component-modal-layout-padding-y, 24px);
2795
+ padding-inline: var(--component-modal-layout-padding-x, 24px);
2796
+ }
2797
+
2798
+ .liquid-modal__header-content {
2799
+ display: flex;
2800
+ flex: 1 0 0;
2801
+ min-width: 0;
2802
+ flex-direction: column;
2803
+ gap: var(--component-modal-layout-header-content-gap, 4px);
2804
+ }
2805
+
2806
+ .liquid-modal__label {
2807
+ margin: 0;
2808
+ color: var(--component-modal-color-text-label, #525252);
2809
+ font-family: var(
2810
+ --component-modal-typography-label-font-family,
2811
+ Cabin,
2812
+ sans-serif
2813
+ );
2814
+ font-size: var(--component-modal-typography-label-font-size, 14px);
2815
+ font-weight: var(--component-modal-typography-label-font-weight, 400);
2816
+ line-height: var(--component-modal-typography-label-line-height, 20px);
2817
+ letter-spacing: var(
2818
+ --component-modal-typography-label-letter-spacing,
2819
+ 0.16px
2820
+ );
2821
+ }
2822
+
2823
+ .liquid-modal__title {
2824
+ margin: 0;
2825
+ color: var(--component-modal-color-text-title, #161616);
2826
+ font-family: var(
2827
+ --component-modal-typography-title-font-family,
2828
+ 'Roboto Condensed',
2829
+ sans-serif
2830
+ );
2831
+ font-size: var(--component-modal-typography-title-font-size, 32px);
2832
+ font-weight: var(--component-modal-typography-title-font-weight, 500);
2833
+ line-height: var(--component-modal-typography-title-line-height, 40px);
2834
+ letter-spacing: var(--component-modal-typography-title-letter-spacing, 0px);
2835
+ }
2836
+
2837
+ .liquid-modal__close {
2838
+ border: none;
2839
+ margin: 0;
2840
+ padding: 0;
2841
+ width: var(--component-modal-layout-close-size, 24px);
2842
+ height: var(--component-modal-layout-close-size, 24px);
2843
+ display: inline-flex;
2844
+ align-items: center;
2845
+ justify-content: center;
2846
+ color: var(--component-modal-color-icon-default, #525252);
2847
+ background: transparent;
2848
+ cursor: pointer;
2849
+ }
2850
+
2851
+ .liquid-modal__close:focus-visible {
2852
+ outline: var(--component-modal-layout-border-width, 1px) solid
2853
+ var(--component-modal-color-focus-ring, #0f62fe);
2854
+ outline-offset: 2px;
2855
+ }
2856
+
2857
+ .liquid-modal__close-icon {
2858
+ display: inline-flex;
2859
+ }
2860
+
2861
+ .liquid-modal__content {
2862
+ display: flex;
2863
+ flex-direction: column;
2864
+ gap: var(--component-modal-layout-content-gap, 32px);
2865
+ padding-inline: var(--component-modal-layout-padding-x, 24px);
2866
+ padding-bottom: var(--component-modal-layout-content-padding-bottom, 48px);
2867
+ }
2868
+
2869
+ .liquid-modal__description-wrap {
2870
+ padding-right: var(--component-modal-layout-content-text-margin-right, 96px);
2871
+ }
2872
+
2873
+ .liquid-modal__description {
2874
+ margin: 0;
2875
+ color: var(--component-modal-color-text-body, #161616);
2876
+ font-family: var(
2877
+ --component-modal-typography-body-font-family,
2878
+ Cabin,
2879
+ sans-serif
2880
+ );
2881
+ font-size: var(--component-modal-typography-body-font-size, 18px);
2882
+ font-weight: var(--component-modal-typography-body-font-weight, 400);
2883
+ line-height: var(--component-modal-typography-body-line-height, 28px);
2884
+ letter-spacing: var(--component-modal-typography-body-letter-spacing, 0px);
2885
+ }
2886
+
2887
+ .liquid-modal__body {
2888
+ width: 100%;
2889
+ }
2890
+
2891
+ .liquid-modal__footer {
2892
+ padding-inline: var(--component-modal-layout-padding-x, 24px);
2893
+ padding-bottom: var(--component-modal-layout-padding-y, 24px);
2894
+ }
2895
+
2896
+ .liquid-modal__actions {
2897
+ width: 100%;
2898
+ }
2899
+
2900
+ .liquid-modal__actions-single,
2901
+ .liquid-modal__actions-double,
2902
+ .liquid-modal__actions-left {
2903
+ display: flex;
2904
+ gap: var(--component-modal-layout-footer-actions-gap, 16px);
2905
+ }
2906
+
2907
+ .liquid-modal__actions-single {
2908
+ width: min(
2909
+ 100%,
2910
+ var(--component-modal-layout-footer-actions-left-width, 280px)
2911
+ );
2912
+ }
2913
+
2914
+ .liquid-modal__actions-double {
2915
+ width: 100%;
2916
+ }
2917
+
2918
+ .liquid-modal__actions-split {
2919
+ display: flex;
2920
+ width: 100%;
2921
+ justify-content: space-between;
2922
+ align-items: center;
2923
+ gap: var(--component-modal-layout-footer-actions-gap, 16px);
2924
+ }
2925
+
2926
+ .liquid-modal__actions-left {
2927
+ width: min(
2928
+ 100%,
2929
+ var(--component-modal-layout-footer-actions-left-width, 280px)
2930
+ );
2931
+ }
2932
+
2933
+ .liquid-modal__action {
2934
+ flex: 1 0 0;
2935
+ min-width: var(--component-modal-layout-footer-action-min-width, 96px);
2936
+ }
2937
+
2938
+ .liquid-modal__action--single {
2939
+ width: 100%;
2940
+ }
2941
+
2942
+ .liquid-modal__action--option {
2943
+ width: min(
2944
+ 100%,
2945
+ var(--component-modal-layout-footer-actions-option-width, 140px)
2946
+ );
2947
+ }
2948
+
2949
+ .liquid-modal[data-tone='passive'] .liquid-modal__title {
2950
+ margin-bottom: 2px;
2951
+ }
2952
+
2953
+ @media (max-width: 768px) {
2954
+ .liquid-modal {
2955
+ width: 100%;
2956
+ }
2957
+
2958
+ .liquid-modal__description-wrap {
2959
+ padding-right: 0;
2960
+ }
2961
+
2962
+ .liquid-modal__actions-split {
2963
+ flex-direction: column;
2964
+ align-items: stretch;
2965
+ }
2966
+
2967
+ .liquid-modal__actions-left,
2968
+ .liquid-modal__actions-single,
2969
+ .liquid-modal__action--option {
2970
+ width: 100%;
2971
+ }
2972
+ }
2973
+
2974
+ .liquid-pagination {
2975
+ display: inline-flex;
2976
+ align-items: center;
2977
+ gap: var(--component-pagination-gap, 0px);
2978
+ }
2979
+
2980
+ .liquid-pagination__item {
2981
+ position: relative;
2982
+ box-sizing: border-box;
2983
+ display: inline-flex;
2984
+ align-items: center;
2985
+ justify-content: center;
2986
+ width: var(--component-pagination-item-size, 48px);
2987
+ height: var(--component-pagination-item-size, 48px);
2988
+ min-width: var(--component-pagination-item-size, 48px);
2989
+ border: 0;
2990
+ margin: 0;
2991
+ padding: 0;
2992
+ background: var(--component-pagination-background-default, transparent);
2993
+ color: var(--component-pagination-text-default, #525252);
2994
+ cursor: pointer;
2995
+ transition:
2996
+ background-color 120ms ease,
2997
+ color 120ms ease,
2998
+ box-shadow 120ms ease;
2999
+ }
3000
+
3001
+ .liquid-pagination__item:hover:not(:disabled) {
3002
+ background: var(--component-pagination-background-hover, #e0e0e0);
3003
+ }
3004
+
3005
+ .liquid-pagination__item:focus-visible {
3006
+ outline: none;
3007
+ box-shadow: inset 0 0 0 2px var(--component-pagination-border-focus, #0f62fe);
3008
+ }
3009
+
3010
+ .liquid-pagination__item:disabled {
3011
+ background: var(--component-pagination-background-disabled, transparent);
3012
+ color: var(--component-pagination-icon-disabled, #a8a8a8);
3013
+ cursor: not-allowed;
3014
+ }
3015
+
3016
+ .liquid-pagination__item--icon {
3017
+ color: var(--component-pagination-icon-default, #525252);
3018
+ }
3019
+
3020
+ .liquid-pagination__item--icon svg {
3021
+ width: 24px;
3022
+ height: 24px;
3023
+ display: block;
3024
+ }
3025
+
3026
+ .liquid-pagination__item--number {
3027
+ color: var(--component-pagination-text-default, #525252);
3028
+ }
3029
+
3030
+ .liquid-pagination__item--number[data-selected] {
3031
+ color: var(--component-pagination-text-selected, #161616);
3032
+ }
3033
+
3034
+ .liquid-pagination__label {
3035
+ font-family: var(--component-pagination-label-family, Cabin);
3036
+ font-size: var(--component-pagination-label-size, 16px);
3037
+ font-weight: var(--component-pagination-label-weight, 400);
3038
+ line-height: var(--component-pagination-label-line-height, 24px);
3039
+ letter-spacing: var(--component-pagination-label-letter-spacing, 0px);
3040
+ }
3041
+
3042
+ .liquid-pagination__item--number[data-selected] .liquid-pagination__label {
3043
+ font-weight: var(--component-pagination-label-weight-selected, 600);
3044
+ }
3045
+
3046
+ .liquid-pagination__indicator {
3047
+ position: absolute;
3048
+ left: var(--component-pagination-indicator-inset, 16px);
3049
+ right: var(--component-pagination-indicator-inset, 16px);
3050
+ bottom: 0;
3051
+ height: var(--component-pagination-indicator-height, 4px);
3052
+ background: var(--component-pagination-border-selected, #187089);
3053
+ }
3054
+
3055
+ /* ─────────────────────────────────────────
3056
+ Radio – token-driven styles
3057
+ ───────────────────────────────────────── */
3058
+
3059
+ .liquid-radio {
3060
+ display: inline-flex;
3061
+ align-items: center;
3062
+ min-height: var(--component-radio-layout-target, 44px);
3063
+ gap: var(--component-radio-layout-label-gap, 4px);
3064
+ cursor: pointer;
3065
+ user-select: none;
3066
+ }
3067
+
3068
+ .liquid-radio[data-disabled] {
3069
+ cursor: not-allowed;
3070
+ }
3071
+
3072
+ /* Visually hide the native input while keeping it accessible and focusable */
3073
+ .liquid-radio__input {
3074
+ position: absolute;
3075
+ width: 1px;
3076
+ height: 1px;
3077
+ padding: 0;
3078
+ margin: -1px;
3079
+ overflow: hidden;
3080
+ clip: rect(0, 0, 0, 0);
3081
+ white-space: nowrap;
3082
+ border: 0;
3083
+ }
3084
+
3085
+ /* ── Visual radio control ── */
3086
+ .liquid-radio__control {
3087
+ flex-shrink: 0;
3088
+ display: inline-flex;
3089
+ align-items: center;
3090
+ justify-content: center;
3091
+ width: var(--component-radio-layout-size, 16px);
3092
+ height: var(--component-radio-layout-size, 16px);
3093
+ border-radius: 999px;
3094
+ border: 1px solid var(--component-radio-border-default, #8d8d8d);
3095
+ background: transparent;
3096
+ transition:
3097
+ box-shadow 120ms ease,
3098
+ border-color 120ms ease;
3099
+ }
3100
+
3101
+ .liquid-radio__dot {
3102
+ display: inline-flex;
3103
+ align-items: center;
3104
+ justify-content: center;
3105
+ width: calc(
3106
+ var(--component-radio-layout-size, 16px) -
3107
+ (var(--component-radio-layout-icon-gap, 4px) * 2)
3108
+ );
3109
+ height: calc(
3110
+ var(--component-radio-layout-size, 16px) -
3111
+ (var(--component-radio-layout-icon-gap, 4px) * 2)
3112
+ );
3113
+ color: var(--component-radio-icon-default, #161616);
3114
+ transform: scale(0);
3115
+ transition:
3116
+ transform 120ms ease,
3117
+ color 120ms ease;
3118
+ }
3119
+
3120
+ .liquid-radio__dot svg {
3121
+ width: 100%;
3122
+ height: 100%;
3123
+ display: block;
3124
+ }
3125
+
3126
+ /* ── Checked state ── */
3127
+ .liquid-radio__input:checked ~ .liquid-radio__control .liquid-radio__dot {
3128
+ transform: scale(1);
3129
+ }
3130
+
3131
+ /* ── Hover (non-disabled) ── */
3132
+ .liquid-radio:not([data-disabled]):hover .liquid-radio__control {
3133
+ border-color: var(--component-radio-icon-default, #161616);
3134
+ }
3135
+
3136
+ /* ── Focus-visible ring with white gap ── */
3137
+ .liquid-radio__input:focus-visible ~ .liquid-radio__control {
3138
+ box-shadow:
3139
+ 0 0 0 2px #ffffff,
3140
+ 0 0 0 4px var(--component-radio-border-focus, #0f62fe);
3141
+ }
3142
+
3143
+ /* ── Disabled ── */
3144
+ .liquid-radio__input:disabled ~ .liquid-radio__control {
3145
+ border-color: var(--component-radio-border-disabled, #c6c6c6);
3146
+ background: transparent;
3147
+ }
3148
+
3149
+ .liquid-radio__input:disabled ~ .liquid-radio__control .liquid-radio__dot {
3150
+ color: var(--component-radio-icon-disabled, #a8a8a8);
3151
+ }
3152
+
3153
+ /* ── Label text ── */
3154
+ .liquid-radio__label-text {
3155
+ font-family: var(--component-radio-label-family, Cabin);
3156
+ font-size: var(--component-radio-label-size, 12px);
3157
+ font-weight: 400;
3158
+ line-height: var(--component-radio-label-line-height, 16px);
3159
+ letter-spacing: var(--component-radio-label-letter-spacing, 0.32px);
3160
+ color: var(--component-radio-text-label, #161616);
3161
+ }
3162
+
3163
+ .liquid-radio[data-disabled] .liquid-radio__label-text {
3164
+ color: var(--component-radio-text-label-disabled, #a8a8a8);
3165
+ }
3166
+
3167
+ /* ── Utility: visually hidden but screen-reader readable ── */
3168
+ .liquid-sr-only {
3169
+ position: absolute;
3170
+ width: 1px;
3171
+ height: 1px;
3172
+ padding: 0;
3173
+ margin: -1px;
3174
+ overflow: hidden;
3175
+ clip: rect(0, 0, 0, 0);
3176
+ white-space: nowrap;
3177
+ border: 0;
3178
+ }
3179
+
3180
+ .liquid-search-input {
3181
+ --component-search-clear-radius: var(--component-input-layout-radius, 0px);
3182
+
3183
+ box-sizing: border-box;
3184
+ display: flex;
3185
+ align-items: center;
3186
+ gap: var(--component-search-layout-gap, 12px);
3187
+ height: var(--component-search-layout-height, 48px);
3188
+ padding-inline: var(--component-search-layout-padding, 16px);
3189
+ overflow: hidden;
3190
+ border-style: solid;
3191
+ border-width: 0 0 1px;
3192
+ border-color: var(--component-search-border-default, #8d8d8d);
3193
+ background: var(--component-search-background-default, #f4f4f4);
3194
+ transition:
3195
+ background-color 120ms ease,
3196
+ border-color 120ms ease,
3197
+ box-shadow 120ms ease;
3198
+ }
3199
+
3200
+ .liquid-search-input:hover:not([data-tone='disabled']) {
3201
+ border-bottom-width: 2px;
3202
+ border-color: var(--component-search-border-hover, #8d8d8d);
3203
+ }
3204
+
3205
+ .liquid-search-input:focus-within:not([data-tone='disabled']) {
3206
+ border-width: 2px;
3207
+ border-color: var(--component-search-border-focus, #0f62fe);
3208
+ background: var(--component-search-background-focus, #f4f4f4);
3209
+ }
3210
+
3211
+ .liquid-search-input[data-tone='disabled'] {
3212
+ border-bottom-width: 1px;
3213
+ border-color: var(--component-search-border-disabled, #e0e0e0);
3214
+ background: var(--component-search-background-disabled, #e0e0e0);
3215
+ }
3216
+
3217
+ .liquid-search-input__label {
3218
+ display: inline-flex;
3219
+ align-items: center;
3220
+ flex: none;
3221
+ cursor: text;
3222
+ }
3223
+
3224
+ .liquid-search-input__search-icon {
3225
+ display: inline-flex;
3226
+ align-items: center;
3227
+ justify-content: center;
3228
+ width: 24px;
3229
+ height: 24px;
3230
+ color: var(--component-search-icon-default, #525252);
3231
+ pointer-events: none;
3232
+ }
3233
+
3234
+ .liquid-search-input[data-tone='disabled'] .liquid-search-input__search-icon {
3235
+ color: var(--component-search-icon-disabled, #a8a8a8);
3236
+ }
3237
+
3238
+ .liquid-search-input__input {
3239
+ flex: 1 1 auto;
3240
+ min-width: 0;
3241
+ height: 100%;
3242
+ border: 0;
3243
+ background: transparent;
3244
+ color: var(--component-search-text-input, #161616);
3245
+ font-family: var(--component-search-input-family, Cabin);
3246
+ font-size: var(--component-search-input-size, 16px);
3247
+ font-weight: 400;
3248
+ line-height: var(--component-search-input-line-height, 24px);
3249
+ letter-spacing: var(--component-search-input-letter-spacing, 0px);
3250
+ outline: none;
3251
+ /* Remove browser default search input decorations */
3252
+ -webkit-appearance: none;
3253
+ appearance: none;
3254
+ }
3255
+
3256
+ .liquid-search-input__input::-webkit-search-cancel-button,
3257
+ .liquid-search-input__input::-webkit-search-decoration {
3258
+ -webkit-appearance: none;
3259
+ appearance: none;
3260
+ }
3261
+
3262
+ .liquid-search-input__input::placeholder {
3263
+ color: var(--component-search-text-placeholder, #6f6f6f);
3264
+ opacity: 1;
3265
+ }
3266
+
3267
+ .liquid-search-input__input:disabled {
3268
+ color: var(--component-search-text-disabled, #a8a8a8);
3269
+ cursor: not-allowed;
3270
+ }
3271
+
3272
+ .liquid-search-input__input:disabled::placeholder {
3273
+ color: var(--component-search-text-disabled, #a8a8a8);
3274
+ }
3275
+
3276
+ .liquid-search-input__clear {
3277
+ display: inline-flex;
3278
+ align-items: center;
3279
+ justify-content: center;
3280
+ flex: none;
3281
+ width: 24px;
3282
+ height: 24px;
3283
+ padding: 0;
3284
+ border: 0;
3285
+ background: transparent;
3286
+ color: var(--component-search-icon-default, #525252);
3287
+ cursor: pointer;
3288
+ border-radius: var(--component-search-clear-radius, 0px);
3289
+ transition: color 120ms ease;
3290
+ }
3291
+
3292
+ .liquid-search-input__clear:hover {
3293
+ color: var(--component-search-icon-hover, #161616);
3294
+ }
3295
+
3296
+ .liquid-search-input__clear:focus-visible {
3297
+ outline: 2px solid var(--component-search-border-focus, #0f62fe);
3298
+ outline-offset: 1px;
3299
+ }
3300
+
3301
+ .liquid-select-input {
3302
+ --component-select-label-gap: 4px;
3303
+ --component-select-field-text-label: #525252;
3304
+ --component-select-label-family: Cabin;
3305
+ --component-select-label-size: 14px;
3306
+ --component-select-label-weight: 500;
3307
+ --component-select-label-line-height: 18px;
3308
+ --component-select-label-letter-spacing: 0.16px;
3309
+ --component-select-field-icon-gap: 4px;
3310
+ --component-select-field-border-width-default: 1px;
3311
+ --component-select-field-border-width-strong: 2px;
3312
+ --component-select-field-border-default: #8d8d8d;
3313
+ --component-select-field-background-default: #f4f4f4;
3314
+ --component-select-field-height-sm: 40px;
3315
+ --component-select-field-height-md: 44px;
3316
+ --component-select-field-height-lg: 48px;
3317
+ --component-select-field-padding-sm: 12px;
3318
+ --component-select-field-padding-md: 16px;
3319
+ --component-select-field-padding-lg: 20px;
3320
+ --component-select-field-border-hover: #8d8d8d;
3321
+ --component-select-field-border-focus: #0f62fe;
3322
+ --component-select-field-background-focus: #f4f4f4;
3323
+ --component-select-field-border-error: #da1e28;
3324
+ --component-select-field-border-disabled: #e0e0e0;
3325
+ --component-select-field-background-disabled: #e0e0e0;
3326
+ --component-select-field-text-value: #161616;
3327
+ --component-select-value-family: Cabin;
3328
+ --component-select-value-size: 16px;
3329
+ --component-select-value-weight: 400;
3330
+ --component-select-value-line-height: 24px;
3331
+ --component-select-value-letter-spacing: 0px;
3332
+ --component-select-field-text-disabled: #a8a8a8;
3333
+ --component-select-field-text-placeholder: #6f6f6f;
3334
+ --component-select-field-icon-chevron: #525252;
3335
+ --component-select-field-icon-error: #da1e28;
3336
+ --component-select-field-icon-warning: #f1c21b;
3337
+ --component-select-field-icon-disabled: #a8a8a8;
3338
+ --component-select-field-text-helper: #6f6f6f;
3339
+ --component-select-helper-family: Cabin;
3340
+ --component-select-helper-size: 12px;
3341
+ --component-select-helper-weight: 400;
3342
+ --component-select-helper-line-height: 16px;
3343
+ --component-select-helper-letter-spacing: 0.32px;
3344
+ --component-select-field-text-error: #da1e28;
3345
+
3346
+ display: flex;
3347
+ flex-direction: column;
3348
+ align-items: flex-start;
3349
+ gap: var(--component-select-label-gap, 4px);
3350
+ width: 100%;
3351
+ }
3352
+
3353
+ .liquid-select-input__label {
3354
+ color: var(--component-select-field-text-label, #525252);
3355
+ font-family: var(--component-select-label-family, Cabin);
3356
+ font-size: var(--component-select-label-size, 14px);
3357
+ font-weight: var(--component-select-label-weight, 500);
3358
+ line-height: var(--component-select-label-line-height, 18px);
3359
+ letter-spacing: var(--component-select-label-letter-spacing, 0.16px);
3360
+ }
3361
+
3362
+ .liquid-select-input__field {
3363
+ box-sizing: border-box;
3364
+ display: flex;
3365
+ align-items: center;
3366
+ width: 100%;
3367
+ overflow: hidden;
3368
+ gap: var(--component-select-field-icon-gap, 4px);
3369
+ border-style: solid;
3370
+ border-width: 0 0 var(--component-select-field-border-width-default, 1px);
3371
+ border-color: var(--component-select-field-border-default, #8d8d8d);
3372
+ background: var(--component-select-field-background-default, #f4f4f4);
3373
+ transition:
3374
+ border-color 120ms ease,
3375
+ border-width 120ms ease,
3376
+ background-color 120ms ease;
3377
+ }
3378
+
3379
+ .liquid-select-input[data-size='sm'] .liquid-select-input__field {
3380
+ min-height: var(--component-select-field-height-sm, 40px);
3381
+ padding-inline: var(--component-select-field-padding-sm, 12px);
3382
+ }
3383
+
3384
+ .liquid-select-input[data-size='md'] .liquid-select-input__field {
3385
+ min-height: var(--component-select-field-height-md, 44px);
3386
+ padding-inline: var(--component-select-field-padding-md, 16px);
3387
+ }
3388
+
3389
+ .liquid-select-input[data-size='lg'] .liquid-select-input__field {
3390
+ min-height: var(--component-select-field-height-lg, 48px);
3391
+ padding-inline: var(--component-select-field-padding-lg, 20px);
3392
+ }
3393
+
3394
+ .liquid-select-input:hover:not([data-tone='disabled'])
3395
+ .liquid-select-input__field {
3396
+ border-bottom-width: var(--component-select-field-border-width-strong, 2px);
3397
+ border-color: var(--component-select-field-border-hover, #8d8d8d);
3398
+ }
3399
+
3400
+ .liquid-select-input:focus-within:not([data-tone='disabled'])
3401
+ .liquid-select-input__field {
3402
+ border-width: var(--component-select-field-border-width-strong, 2px);
3403
+ border-color: var(--component-select-field-border-focus, #0f62fe);
3404
+ background: var(--component-select-field-background-focus, #f4f4f4);
3405
+ }
3406
+
3407
+ .liquid-select-input[data-tone='error'] .liquid-select-input__field {
3408
+ border-width: var(--component-select-field-border-width-strong, 2px);
3409
+ border-color: var(--component-select-field-border-error, #da1e28);
3410
+ }
3411
+
3412
+ .liquid-select-input[data-tone='disabled'] .liquid-select-input__field {
3413
+ border-width: var(--component-select-field-border-width-default, 1px);
3414
+ border-color: var(--component-select-field-border-disabled, #e0e0e0);
3415
+ background: var(--component-select-field-background-disabled, #e0e0e0);
3416
+ }
3417
+
3418
+ .liquid-select-input__select {
3419
+ flex: 1 1 auto;
3420
+ min-width: 0;
3421
+ width: 100%;
3422
+ border: 0;
3423
+ background: transparent;
3424
+ color: var(--component-select-field-text-value, #161616);
3425
+ font-family: var(--component-select-value-family, Cabin);
3426
+ font-size: var(--component-select-value-size, 16px);
3427
+ font-weight: var(--component-select-value-weight, 400);
3428
+ line-height: var(--component-select-value-line-height, 24px);
3429
+ letter-spacing: var(--component-select-value-letter-spacing, 0px);
3430
+ outline: none;
3431
+ appearance: none;
3432
+ -webkit-appearance: none;
3433
+ cursor: pointer;
3434
+ }
3435
+
3436
+ .liquid-select-input__select:disabled {
3437
+ color: var(--component-select-field-text-disabled, #a8a8a8);
3438
+ cursor: not-allowed;
3439
+ }
3440
+
3441
+ .liquid-select-input__select:invalid {
3442
+ color: var(--component-select-field-text-placeholder, #6f6f6f);
3443
+ }
3444
+
3445
+ .liquid-select-input__status-icon,
3446
+ .liquid-select-input__chevron {
3447
+ display: inline-flex;
3448
+ align-items: center;
3449
+ justify-content: center;
3450
+ flex: none;
3451
+ width: 20px;
3452
+ height: 20px;
3453
+ }
3454
+
3455
+ .liquid-select-input__chevron {
3456
+ color: var(--component-select-field-icon-chevron, #525252);
3457
+ pointer-events: none;
3458
+ }
3459
+
3460
+ .liquid-select-input[data-tone='disabled'] .liquid-select-input__chevron {
3461
+ color: var(--component-select-field-icon-disabled, #a8a8a8);
3462
+ }
3463
+
3464
+ .liquid-select-input__status-icon[data-tone='error'] {
3465
+ color: var(--component-select-field-icon-error, #da1e28);
3466
+ }
3467
+
3468
+ .liquid-select-input__status-icon[data-tone='warning'] {
3469
+ color: var(--component-select-field-icon-warning, #f1c21b);
3470
+ }
3471
+
3472
+ .liquid-select-input__helper {
3473
+ color: var(--component-select-field-text-helper, #6f6f6f);
3474
+ font-family: var(--component-select-helper-family, Cabin);
3475
+ font-size: var(--component-select-helper-size, 12px);
3476
+ font-weight: var(--component-select-helper-weight, 400);
3477
+ line-height: var(--component-select-helper-line-height, 16px);
3478
+ letter-spacing: var(--component-select-helper-letter-spacing, 0.32px);
3479
+ }
3480
+
3481
+ .liquid-select-input__helper[data-tone='error'] {
3482
+ color: var(--component-select-field-text-error, #da1e28);
3483
+ }
3484
+
3485
+ .liquid-select-input__helper[data-tone='disabled'] {
3486
+ color: var(--component-select-field-text-disabled, #a8a8a8);
3487
+ }
3488
+
3489
+ .liquid-structured-list {
3490
+ width: min(100%, var(--component-structured-list-layout-width, 500px));
3491
+ }
3492
+
3493
+ .liquid-structured-list__table {
3494
+ width: 100%;
3495
+ }
3496
+
3497
+ .liquid-structured-list__row {
3498
+ display: flex;
3499
+ align-items: flex-start;
3500
+ gap: var(--component-structured-list-layout-column-gap, 16px);
3501
+ border-bottom: var(--component-structured-list-layout-divider-width, 1px)
3502
+ solid var(--component-structured-list-color-divider-subtle, #e0e0e0);
3503
+ padding-inline: var(--component-structured-list-layout-padding-x, 16px);
3504
+ }
3505
+
3506
+ .liquid-structured-list__header .liquid-structured-list__row {
3507
+ padding-top: var(--component-structured-list-layout-header-padding-top, 16px);
3508
+ padding-bottom: var(
3509
+ --component-structured-list-layout-header-padding-bottom,
3510
+ 8px
3511
+ );
3512
+ }
3513
+
3514
+ .liquid-structured-list__body .liquid-structured-list__row {
3515
+ padding-top: var(--component-structured-list-layout-row-padding-top, 16px);
3516
+ padding-bottom: var(
3517
+ --component-structured-list-layout-row-padding-bottom,
3518
+ 24px
3519
+ );
3520
+ }
3521
+
3522
+ .liquid-structured-list__header-cell,
3523
+ .liquid-structured-list__cell {
3524
+ flex: 1 0 0;
3525
+ min-width: 0;
3526
+ word-break: break-word;
3527
+ }
3528
+
3529
+ .liquid-structured-list__header-cell {
3530
+ color: var(--component-structured-list-color-text-header, #161616);
3531
+ font-family: var(
3532
+ --component-structured-list-typography-header-column-font-family,
3533
+ Cabin,
3534
+ sans-serif
3535
+ );
3536
+ font-size: var(
3537
+ --component-structured-list-typography-header-column-font-size,
3538
+ 14px
3539
+ );
3540
+ font-weight: var(
3541
+ --component-structured-list-typography-header-column-font-weight,
3542
+ 500
3543
+ );
3544
+ line-height: var(
3545
+ --component-structured-list-typography-header-column-line-height,
3546
+ 18px
3547
+ );
3548
+ letter-spacing: var(
3549
+ --component-structured-list-typography-header-column-letter-spacing,
3550
+ 0.16px
3551
+ );
3552
+ text-align: left;
3553
+ }
3554
+
3555
+ .liquid-structured-list__cell {
3556
+ color: var(--component-structured-list-color-text-row, #525252);
3557
+ font-family: var(
3558
+ --component-structured-list-typography-row-column-font-family,
3559
+ Cabin,
3560
+ sans-serif
3561
+ );
3562
+ font-size: var(
3563
+ --component-structured-list-typography-row-column-font-size,
3564
+ 14px
3565
+ );
3566
+ font-weight: var(
3567
+ --component-structured-list-typography-row-column-font-weight,
3568
+ 400
3569
+ );
3570
+ line-height: var(
3571
+ --component-structured-list-typography-row-column-line-height,
3572
+ 20px
3573
+ );
3574
+ letter-spacing: var(
3575
+ --component-structured-list-typography-row-column-letter-spacing,
3576
+ 0.16px
3577
+ );
3578
+ text-align: left;
3579
+ }
3580
+
3581
+ .liquid-structured-list__header-cell[data-align='right'],
3582
+ .liquid-structured-list__cell[data-align='right'] {
3583
+ text-align: right;
3584
+ }
3585
+
3586
+ .liquid-tabs {
3587
+ display: inline-flex;
3588
+ }
3589
+
3590
+ .liquid-tabs__tablist {
3591
+ display: inline-flex;
3592
+ align-items: stretch;
3593
+ }
3594
+
3595
+ .liquid-tabs[data-orientation='vertical'] .liquid-tabs__tablist {
3596
+ flex-direction: column;
3597
+ width: 180px;
3598
+ }
3599
+
3600
+ .liquid-tabs__tab {
3601
+ position: relative;
3602
+ box-sizing: border-box;
3603
+ display: inline-flex;
3604
+ align-items: center;
3605
+ justify-content: flex-start;
3606
+ min-width: 96px;
3607
+ height: var(--component-tabs-tab-height, 48px);
3608
+ padding-inline: var(--component-tabs-tab-padding-x, 16px);
3609
+ gap: var(--component-tabs-tab-gap, 4px);
3610
+ border: 0;
3611
+ border-right: var(--component-tabs-divider-width, 1px) solid
3612
+ var(--component-tabs-divider, #e0e0e0);
3613
+ border-bottom: var(--component-tabs-divider-width, 1px) solid
3614
+ var(--component-tabs-divider, #e0e0e0);
3615
+ background: var(--component-tabs-tab-background-default, #f4f4f4);
3616
+ color: var(--component-tabs-tab-text-default, #525252);
3617
+ cursor: pointer;
3618
+ text-align: left;
3619
+ transition:
3620
+ background-color 120ms ease,
3621
+ color 120ms ease,
3622
+ box-shadow 120ms ease;
3623
+ }
3624
+
3625
+ .liquid-tabs__tab:hover:not(:disabled) {
3626
+ background: var(--component-tabs-tab-background-hover, #e8e8e8);
3627
+ color: var(--component-tabs-tab-text-hover, #161616);
3628
+ }
3629
+
3630
+ .liquid-tabs__tab[data-selected] {
3631
+ background: var(--component-tabs-tab-background-selected, #f4f4f4);
3632
+ color: var(--component-tabs-tab-text-selected, #161616);
3633
+ border-bottom-color: transparent;
3634
+ }
3635
+
3636
+ .liquid-tabs[data-orientation='vertical'] .liquid-tabs__tab {
3637
+ width: 100%;
3638
+ min-width: 0;
3639
+ }
3640
+
3641
+ .liquid-tabs[data-orientation='vertical'] .liquid-tabs__tab[data-selected] {
3642
+ border-right-color: transparent;
3643
+ border-bottom-color: var(--component-tabs-divider, #e0e0e0);
3644
+ }
3645
+
3646
+ .liquid-tabs__tab:focus-visible {
3647
+ outline: none;
3648
+ box-shadow: inset 0 0 0 2px var(--component-tabs-border-focus, #0f62fe);
3649
+ z-index: 1;
3650
+ }
3651
+
3652
+ .liquid-tabs__tab:disabled {
3653
+ background: var(--component-tabs-tab-background-disabled, #e0e0e0);
3654
+ color: var(--component-tabs-tab-text-disabled, #a8a8a8);
3655
+ cursor: not-allowed;
3656
+ }
3657
+
3658
+ .liquid-tabs__label {
3659
+ font-family: var(--component-tabs-label-family, Cabin);
3660
+ font-size: var(--component-tabs-label-size, 16px);
3661
+ font-weight: var(--component-tabs-label-weight, 400);
3662
+ line-height: var(--component-tabs-label-line-height, 24px);
3663
+ letter-spacing: var(--component-tabs-label-letter-spacing, 0px);
3664
+ white-space: nowrap;
3665
+ }
3666
+
3667
+ .liquid-tabs__tab[data-selected] .liquid-tabs__label {
3668
+ font-weight: 600;
3669
+ }
3670
+
3671
+ .liquid-tabs__indicator {
3672
+ position: absolute;
3673
+ background: var(--component-tabs-indicator-default, #187089);
3674
+ }
3675
+
3676
+ .liquid-tabs[data-orientation='horizontal'] .liquid-tabs__indicator {
3677
+ left: 0;
3678
+ right: calc(-1 * var(--component-tabs-divider-width, 1px));
3679
+ top: 0;
3680
+ height: var(--component-tabs-indicator-stroke-width, 2px);
3681
+ }
3682
+
3683
+ .liquid-tabs[data-orientation='vertical'] .liquid-tabs__indicator {
3684
+ left: 0;
3685
+ top: 0;
3686
+ bottom: calc(-1 * var(--component-tabs-divider-width, 1px));
3687
+ width: var(--component-tabs-indicator-stroke-width, 2px);
3688
+ }
3689
+ .liquid-tabs[data-orientation='vertical'] .liquid-tabs__indicator {
3690
+ left: 0;
3691
+ top: 0;
3692
+ bottom: calc(-1 * var(--component-tabs-divider-width, 1px));
3693
+ width: var(--component-tabs-indicator-stroke-width, 2px);
3694
+ }
3695
+
3696
+ .liquid-tag {
3697
+ box-sizing: border-box;
3698
+ display: inline-flex;
3699
+ align-items: center;
3700
+ justify-content: center;
3701
+ border-radius: var(--component-tag-layout-radius, 999px);
3702
+ white-space: nowrap;
3703
+ }
3704
+
3705
+ .liquid-tag[data-size='sm'] {
3706
+ min-height: var(--component-tag-layout-height-sm, 20px);
3707
+ padding-inline: var(--component-tag-layout-padding-x-sm, 4px);
3708
+ }
3709
+
3710
+ .liquid-tag[data-size='md'] {
3711
+ min-height: var(--component-tag-layout-height-md, 24px);
3712
+ padding-inline: var(--component-tag-layout-padding-x-md, 8px);
3713
+ }
3714
+
3715
+ .liquid-tag[data-color='neutral'] {
3716
+ background: var(--component-tag-color-background-neutral, #f4f4f4);
3717
+ color: var(--component-tag-color-text-neutral, #161616);
3718
+ }
3719
+
3720
+ .liquid-tag[data-color='blue'] {
3721
+ background: var(--component-tag-color-background-blue, #edf5ff);
3722
+ color: var(--component-tag-color-text-blue, #0043ce);
3723
+ }
3724
+
3725
+ .liquid-tag[data-color='green'] {
3726
+ background: var(--component-tag-color-background-green, #defbe6);
3727
+ color: var(--component-tag-color-text-green, #044317);
3728
+ }
3729
+
3730
+ .liquid-tag[data-color='purple'] {
3731
+ background: var(--component-tag-color-background-purple, #f6f2ff);
3732
+ color: var(--component-tag-color-text-purple, #6929c4);
3733
+ }
3734
+
3735
+ .liquid-tag__label {
3736
+ font-family: var(--component-tag-typography-label-font-family, Cabin);
3737
+ font-size: var(--component-tag-typography-label-font-size, 12px);
3738
+ font-weight: var(--component-tag-typography-label-font-weight, 500);
3739
+ line-height: var(--component-tag-typography-label-line-height, 16px);
3740
+ letter-spacing: var(--component-tag-typography-label-letter-spacing, 0.32px);
3741
+ }
3742
+
3743
+ .liquid-text-area {
3744
+ --component-text-area-layout-label-gap: 4px;
3745
+ --component-text-area-layout-min-height-sm: 120px;
3746
+ --component-text-area-layout-min-height-md: 120px;
3747
+ --component-text-area-layout-min-height-lg: 128px;
3748
+ --component-text-area-layout-padding-x-sm: 12px;
3749
+ --component-text-area-layout-padding-x-md: 16px;
3750
+ --component-text-area-layout-padding-x-lg: 20px;
3751
+ --component-text-area-layout-padding-y-sm: 12px;
3752
+ --component-text-area-layout-padding-y-md: 12px;
3753
+ --component-text-area-layout-padding-y-lg: 16px;
3754
+ --component-text-area-text-label: #525252;
3755
+ --component-text-area-label-family: Cabin;
3756
+ --component-text-area-label-size: 14px;
3757
+ --component-text-area-label-line-height: 18px;
3758
+ --component-text-area-label-letter-spacing: 0.16px;
3759
+ --component-text-area-layout-border-width-default: 1px;
3760
+ --component-text-area-layout-border-width-strong: 2px;
3761
+ --component-text-area-border-default: #8d8d8d;
3762
+ --component-text-area-border-hover: #8d8d8d;
3763
+ --component-text-area-border-focus: #0f62fe;
3764
+ --component-text-area-border-error: #da1e28;
3765
+ --component-text-area-border-disabled: #e0e0e0;
3766
+ --component-text-area-layout-radius: var(
3767
+ --component-input-layout-radius,
3768
+ 0px
3769
+ );
3770
+ --component-text-area-background-default: #f4f4f4;
3771
+ --component-text-area-background-focus: #f4f4f4;
3772
+ --component-text-area-background-disabled: #e0e0e0;
3773
+ --component-text-area-text-value: #161616;
3774
+ --component-text-area-value-family: Cabin;
3775
+ --component-text-area-value-size: 16px;
3776
+ --component-text-area-value-line-height: 24px;
3777
+ --component-text-area-value-letter-spacing: 0px;
3778
+ --component-text-area-text-placeholder: #6f6f6f;
3779
+ --component-text-area-text-disabled: #a8a8a8;
3780
+ --component-text-area-layout-status-icon-gap: var(
3781
+ --component-input-layout-status-icon-gap,
3782
+ 4px
3783
+ );
3784
+ --component-text-area-icon-error: #da1e28;
3785
+ --component-text-area-icon-warning: #f1c21b;
3786
+ --component-text-area-text-helper: #6f6f6f;
3787
+ --component-text-area-helper-family: Cabin;
3788
+ --component-text-area-helper-size: 12px;
3789
+ --component-text-area-helper-line-height: 16px;
3790
+ --component-text-area-helper-letter-spacing: 0.32px;
3791
+ --component-text-area-text-error: #da1e28;
3792
+ --component-text-area-text-warning: #161616;
3793
+
3794
+ display: flex;
3795
+ flex-direction: column;
3796
+ align-items: flex-start;
3797
+ gap: var(--component-text-area-layout-label-gap, 4px);
3798
+ width: 100%;
3799
+ }
3800
+
3801
+ .liquid-text-area[data-size='sm'] {
3802
+ --_liquid-text-area-min-height: var(
3803
+ --component-text-area-layout-min-height-sm,
3804
+ 120px
3805
+ );
3806
+ --_liquid-text-area-padding-inline: var(
3807
+ --component-text-area-layout-padding-x-sm,
3808
+ 12px
3809
+ );
3810
+ --_liquid-text-area-padding-block: var(
3811
+ --component-text-area-layout-padding-y-sm,
3812
+ 12px
3813
+ );
3814
+ }
3815
+
3816
+ .liquid-text-area[data-size='md'] {
3817
+ --_liquid-text-area-min-height: var(
3818
+ --component-text-area-layout-min-height-md,
3819
+ 120px
3820
+ );
3821
+ --_liquid-text-area-padding-inline: var(
3822
+ --component-text-area-layout-padding-x-md,
3823
+ 16px
3824
+ );
3825
+ --_liquid-text-area-padding-block: var(
3826
+ --component-text-area-layout-padding-y-md,
3827
+ 12px
3828
+ );
3829
+ }
3830
+
3831
+ .liquid-text-area[data-size='lg'] {
3832
+ --_liquid-text-area-min-height: var(
3833
+ --component-text-area-layout-min-height-lg,
3834
+ 128px
3835
+ );
3836
+ --_liquid-text-area-padding-inline: var(
3837
+ --component-text-area-layout-padding-x-lg,
3838
+ 20px
3839
+ );
3840
+ --_liquid-text-area-padding-block: var(
3841
+ --component-text-area-layout-padding-y-lg,
3842
+ 16px
3843
+ );
3844
+ }
3845
+
3846
+ .liquid-text-area__label {
3847
+ color: var(--component-text-area-text-label, #525252);
3848
+ font-family: var(--component-text-area-label-family, Cabin);
3849
+ font-size: var(--component-text-area-label-size, 14px);
3850
+ font-weight: 400;
3851
+ line-height: var(--component-text-area-label-line-height, 18px);
3852
+ letter-spacing: var(--component-text-area-label-letter-spacing, 0.16px);
3853
+ white-space: nowrap;
3854
+ }
3855
+
3856
+ .liquid-text-area__field {
3857
+ box-sizing: border-box;
3858
+ display: flex;
3859
+ align-items: flex-start;
3860
+ width: 100%;
3861
+ min-height: var(--_liquid-text-area-min-height);
3862
+ overflow: hidden;
3863
+ border-style: solid;
3864
+ border-width: 0 0 var(--component-text-area-layout-border-width-default, 1px);
3865
+ border-color: var(--component-text-area-border-default, #8d8d8d);
3866
+ border-radius: var(--component-text-area-layout-radius, 0px);
3867
+ background: var(--component-text-area-background-default, #f4f4f4);
3868
+ padding-inline: var(--_liquid-text-area-padding-inline);
3869
+ padding-block: var(--_liquid-text-area-padding-block);
3870
+ transition:
3871
+ background-color 120ms ease,
3872
+ border-color 120ms ease,
3873
+ color 120ms ease,
3874
+ box-shadow 120ms ease;
3875
+ }
3876
+
3877
+ .liquid-text-area:hover:not([data-tone='disabled']) .liquid-text-area__field {
3878
+ border-color: var(--component-text-area-border-hover, #8d8d8d);
3879
+ }
3880
+
3881
+ .liquid-text-area:focus-within .liquid-text-area__field {
3882
+ border-width: 0 0 var(--component-text-area-layout-border-width-strong, 2px);
3883
+ border-color: var(--component-text-area-border-focus, #0f62fe);
3884
+ background: var(--component-text-area-background-focus, #f4f4f4);
3885
+ }
3886
+
3887
+ .liquid-text-area[data-tone='error'] .liquid-text-area__field {
3888
+ border-width: 0 0 var(--component-text-area-layout-border-width-strong, 2px);
3889
+ border-color: var(--component-text-area-border-error, #da1e28);
3890
+ }
3891
+
3892
+ .liquid-text-area[data-tone='disabled'] .liquid-text-area__field {
3893
+ border-color: var(--component-text-area-border-disabled, #e0e0e0);
3894
+ background: var(--component-text-area-background-disabled, #e0e0e0);
3895
+ }
3896
+
3897
+ .liquid-text-area__textarea {
3898
+ flex: 1 1 auto;
3899
+ min-width: 0;
3900
+ min-height: calc(
3901
+ var(--_liquid-text-area-min-height) -
3902
+ (var(--_liquid-text-area-padding-block) * 2)
3903
+ );
3904
+ border: 0;
3905
+ background: transparent;
3906
+ color: var(--component-text-area-text-value, #161616);
3907
+ font-family: var(--component-text-area-value-family, Cabin);
3908
+ font-size: var(--component-text-area-value-size, 16px);
3909
+ font-weight: 400;
3910
+ line-height: var(--component-text-area-value-line-height, 24px);
3911
+ letter-spacing: var(--component-text-area-value-letter-spacing, 0px);
3912
+ outline: none;
3913
+ resize: none;
3914
+ }
3915
+
3916
+ .liquid-text-area__textarea::placeholder {
3917
+ color: var(--component-text-area-text-placeholder, #6f6f6f);
3918
+ opacity: 1;
3919
+ }
3920
+
3921
+ .liquid-text-area__textarea:disabled {
3922
+ color: var(--component-text-area-text-disabled, #a8a8a8);
3923
+ cursor: not-allowed;
3924
+ }
3925
+
3926
+ .liquid-text-area__textarea:disabled::placeholder {
3927
+ color: var(--component-text-area-text-disabled, #a8a8a8);
3928
+ }
3929
+
3930
+ .liquid-text-area__status-icon {
3931
+ display: inline-flex;
3932
+ flex: none;
3933
+ align-items: center;
3934
+ justify-content: center;
3935
+ width: 16px;
3936
+ height: 16px;
3937
+ margin-inline-start: var(--component-text-area-layout-status-icon-gap, 4px);
3938
+ margin-block-start: 4px;
3939
+ }
3940
+
3941
+ .liquid-text-area__status-icon[data-tone='error'] {
3942
+ color: var(--component-text-area-icon-error, #da1e28);
3943
+ }
3944
+
3945
+ .liquid-text-area__status-icon[data-tone='warning'] {
3946
+ color: var(--component-text-area-icon-warning, #f1c21b);
3947
+ }
3948
+
3949
+ .liquid-text-area__helper {
3950
+ color: var(--component-text-area-text-helper, #6f6f6f);
3951
+ font-family: var(--component-text-area-helper-family, Cabin);
3952
+ font-size: var(--component-text-area-helper-size, 12px);
3953
+ font-weight: 400;
3954
+ line-height: var(--component-text-area-helper-line-height, 16px);
3955
+ letter-spacing: var(--component-text-area-helper-letter-spacing, 0.32px);
3956
+ }
3957
+
3958
+ .liquid-text-area__helper[data-tone='error'] {
3959
+ color: var(--component-text-area-text-error, #da1e28);
3960
+ }
3961
+
3962
+ .liquid-text-area__helper[data-tone='warning'] {
3963
+ color: var(--component-text-area-text-warning, #161616);
3964
+ }
3965
+
3966
+ .liquid-text-area__helper[data-tone='disabled'] {
3967
+ color: var(--component-text-area-text-disabled, #a8a8a8);
3968
+ }
3969
+
3970
+ .liquid-text-input {
3971
+ --component-input-label-gap: 4px;
3972
+ --component-input-text-label: #525252;
3973
+ --component-input-label-family: Cabin;
3974
+ --component-input-label-size: 14px;
3975
+ --component-input-label-line-height: 18px;
3976
+ --component-input-label-letter-spacing: 0.16px;
3977
+ --component-input-border-default: #8d8d8d;
3978
+ --component-input-background-default: #f4f4f4;
3979
+ --component-input-height-sm: 40px;
3980
+ --component-input-height-md: 44px;
3981
+ --component-input-height-lg: 48px;
3982
+ --component-input-padding-sm: 12px;
3983
+ --component-input-padding-md: 16px;
3984
+ --component-input-padding-lg: 20px;
3985
+ --component-input-border-hover: #8d8d8d;
3986
+ --component-input-border-focus: #0f62fe;
3987
+ --component-input-background-focus: #f4f4f4;
3988
+ --component-input-border-error: #da1e28;
3989
+ --component-input-border-disabled: #e0e0e0;
3990
+ --component-input-background-disabled: #e0e0e0;
3991
+ --component-input-icon-default: #525252;
3992
+ --component-input-icon-error: #da1e28;
3993
+ --component-input-icon-warning: #f1c21b;
3994
+ --component-input-text-value: #161616;
3995
+ --component-input-value-family: Cabin;
3996
+ --component-input-value-size: 16px;
3997
+ --component-input-value-line-height: 24px;
3998
+ --component-input-value-letter-spacing: 0px;
3999
+ --component-input-text-placeholder: #6f6f6f;
4000
+ --component-input-text-disabled: #a8a8a8;
4001
+ --component-input-text-helper: #6f6f6f;
4002
+ --component-input-helper-family: Cabin;
4003
+ --component-input-helper-size: 12px;
4004
+ --component-input-helper-line-height: 16px;
4005
+ --component-input-helper-letter-spacing: 0.32px;
4006
+ --component-input-text-error: #da1e28;
4007
+
4008
+ display: flex;
4009
+ flex-direction: column;
4010
+ align-items: flex-start;
4011
+ gap: var(--component-input-label-gap, 4px);
4012
+ width: 100%;
4013
+ }
4014
+
4015
+ .liquid-text-input__label {
4016
+ color: var(--component-input-text-label, #525252);
4017
+ font-family: var(--component-input-label-family, Cabin);
4018
+ font-size: var(--component-input-label-size, 14px);
4019
+ font-weight: 400;
4020
+ line-height: var(--component-input-label-line-height, 18px);
4021
+ letter-spacing: var(--component-input-label-letter-spacing, 0.16px);
4022
+ white-space: nowrap;
4023
+ }
4024
+
4025
+ .liquid-text-input__field {
4026
+ box-sizing: border-box;
4027
+ display: flex;
4028
+ align-items: center;
4029
+ width: 100%;
4030
+ overflow: hidden;
4031
+ border-style: solid;
4032
+ border-width: 0 0 1px;
4033
+ border-color: var(--component-input-border-default, #8d8d8d);
4034
+ background: var(--component-input-background-default, #f4f4f4);
4035
+ transition:
4036
+ background-color 120ms ease,
4037
+ border-color 120ms ease,
4038
+ box-shadow 120ms ease,
4039
+ color 120ms ease;
4040
+ }
4041
+
4042
+ .liquid-text-input[data-size='sm'] .liquid-text-input__field {
4043
+ min-height: var(--component-input-height-sm, 40px);
4044
+ padding-inline: var(--component-input-padding-sm, 12px);
4045
+ }
4046
+
4047
+ .liquid-text-input[data-size='md'] .liquid-text-input__field {
4048
+ min-height: var(--component-input-height-md, 44px);
4049
+ padding-inline: var(--component-input-padding-md, 16px);
4050
+ }
4051
+
4052
+ .liquid-text-input[data-size='lg'] .liquid-text-input__field {
4053
+ min-height: var(--component-input-height-lg, 48px);
4054
+ padding-inline: var(--component-input-padding-lg, 20px);
4055
+ }
4056
+
4057
+ .liquid-text-input:hover:not([data-tone='disabled']) .liquid-text-input__field {
4058
+ border-color: var(--component-input-border-hover, #8d8d8d);
4059
+ }
4060
+
4061
+ .liquid-text-input:focus-within .liquid-text-input__field {
4062
+ border-width: 2px;
4063
+ border-color: var(--component-input-border-focus, #0f62fe);
4064
+ background: var(--component-input-background-focus, #f4f4f4);
4065
+ }
4066
+
4067
+ .liquid-text-input[data-tone='error'] .liquid-text-input__field {
4068
+ border-width: 2px;
4069
+ border-color: var(--component-input-border-error, #da1e28);
4070
+ }
4071
+
4072
+ .liquid-text-input[data-tone='warning'] .liquid-text-input__field {
4073
+ border-color: var(--component-input-border-default, #8d8d8d);
4074
+ }
4075
+
4076
+ .liquid-text-input[data-tone='disabled'] .liquid-text-input__field {
4077
+ border-color: var(--component-input-border-disabled, #e0e0e0);
4078
+ background: var(--component-input-background-disabled, #e0e0e0);
4079
+ }
4080
+
4081
+ .liquid-text-input__leading-icon,
4082
+ .liquid-text-input__status-icon {
4083
+ display: inline-flex;
4084
+ flex: none;
4085
+ align-items: center;
4086
+ justify-content: center;
4087
+ }
4088
+
4089
+ .liquid-text-input__leading-icon {
4090
+ margin-inline-end: var(--component-input-layout-leading-icon-gap, 4px);
4091
+ color: var(--component-input-icon-default, #525252);
4092
+ }
4093
+
4094
+ .liquid-text-input__status-icon {
4095
+ width: 16px;
4096
+ height: 16px;
4097
+ margin-inline-start: var(--component-input-layout-status-icon-gap, 4px);
4098
+ }
4099
+
4100
+ .liquid-text-input__status-icon[data-tone='error'] {
4101
+ color: var(--component-input-icon-error, #da1e28);
4102
+ }
4103
+
4104
+ .liquid-text-input__status-icon[data-tone='warning'] {
4105
+ color: var(--component-input-icon-warning, #f1c21b);
4106
+ }
4107
+
4108
+ .liquid-text-input__input {
4109
+ flex: 1 1 auto;
4110
+ min-width: 0;
4111
+ height: 100%;
4112
+ border: 0;
4113
+ background: transparent;
4114
+ color: var(--component-input-text-value, #161616);
4115
+ font-family: var(--component-input-value-family, Cabin);
4116
+ font-size: var(--component-input-value-size, 16px);
4117
+ font-weight: 400;
4118
+ line-height: var(--component-input-value-line-height, 24px);
4119
+ letter-spacing: var(--component-input-value-letter-spacing, 0px);
4120
+ outline: none;
4121
+ }
4122
+
4123
+ .liquid-text-input__input::placeholder {
4124
+ color: var(--component-input-text-placeholder, #6f6f6f);
4125
+ opacity: 1;
4126
+ }
4127
+
4128
+ .liquid-text-input__input:disabled {
4129
+ color: var(--component-input-text-disabled, #a8a8a8);
4130
+ cursor: not-allowed;
4131
+ }
4132
+
4133
+ .liquid-text-input__input:disabled::placeholder {
4134
+ color: var(--component-input-text-disabled, #a8a8a8);
4135
+ }
4136
+
4137
+ .liquid-text-input__helper {
4138
+ color: var(--component-input-text-helper, #6f6f6f);
4139
+ font-family: var(--component-input-helper-family, Cabin);
4140
+ font-size: var(--component-input-helper-size, 12px);
4141
+ font-weight: 400;
4142
+ line-height: var(--component-input-helper-line-height, 16px);
4143
+ letter-spacing: var(--component-input-helper-letter-spacing, 0.32px);
4144
+ white-space: nowrap;
4145
+ }
4146
+
4147
+ .liquid-text-input__helper[data-tone='error'] {
4148
+ color: var(--component-input-text-error, #da1e28);
4149
+ }
4150
+
4151
+ .liquid-text-input__helper[data-tone='disabled'] {
4152
+ color: var(--component-input-text-disabled, #a8a8a8);
4153
+ }
4154
+
4155
+ .liquid-toggle-input {
4156
+ display: inline-flex;
4157
+ align-items: center;
4158
+ min-height: var(--component-toggle-target, 44px);
4159
+ gap: var(--component-toggle-label-gap, 4px);
4160
+ cursor: pointer;
4161
+ user-select: none;
4162
+ }
4163
+
4164
+ .liquid-toggle-input[data-disabled] {
4165
+ cursor: not-allowed;
4166
+ }
4167
+
4168
+ .liquid-toggle-input__input {
4169
+ position: absolute;
4170
+ width: 1px;
4171
+ height: 1px;
4172
+ padding: 0;
4173
+ margin: -1px;
4174
+ overflow: hidden;
4175
+ clip: rect(0, 0, 0, 0);
4176
+ white-space: nowrap;
4177
+ border: 0;
4178
+ }
4179
+
4180
+ .liquid-toggle-input__track {
4181
+ flex-shrink: 0;
4182
+ box-sizing: border-box;
4183
+ display: inline-flex;
4184
+ align-items: center;
4185
+ width: var(--component-toggle-track-width-md, 48px);
4186
+ height: var(--component-toggle-track-height-md, 24px);
4187
+ padding: var(--component-toggle-padding, 2px);
4188
+ border-radius: var(--component-toggle-track-radius, 999px);
4189
+ background: var(--component-toggle-track-off-default, #8d8d8d);
4190
+ transition:
4191
+ background-color 120ms ease,
4192
+ box-shadow 120ms ease;
4193
+ }
4194
+
4195
+ .liquid-toggle-input__thumb {
4196
+ display: inline-block;
4197
+ width: var(--component-toggle-thumb-size-md, 16px);
4198
+ height: var(--component-toggle-thumb-size-md, 16px);
4199
+ border-radius: 999px;
4200
+ background: var(--component-toggle-thumb-default, #ffffff);
4201
+ transform: translateX(0);
4202
+ transition:
4203
+ transform 120ms ease,
4204
+ background-color 120ms ease;
4205
+ }
4206
+
4207
+ .liquid-toggle-input__input:checked ~ .liquid-toggle-input__track {
4208
+ background: var(--component-toggle-track-on-default, #187089);
4209
+ }
4210
+
4211
+ .liquid-toggle-input__input:checked
4212
+ ~ .liquid-toggle-input__track
4213
+ .liquid-toggle-input__thumb {
4214
+ transform: translateX(
4215
+ calc(
4216
+ var(--component-toggle-track-width-md, 48px) -
4217
+ var(--component-toggle-thumb-size-md, 16px) -
4218
+ (var(--component-toggle-padding, 2px) * 2)
4219
+ )
4220
+ );
4221
+ }
4222
+
4223
+ .liquid-toggle-input:not([data-disabled]):hover .liquid-toggle-input__track {
4224
+ background: var(--component-toggle-track-off-hover, #8d8d8d);
4225
+ }
4226
+
4227
+ .liquid-toggle-input:not([data-disabled]):hover
4228
+ .liquid-toggle-input__input:checked
4229
+ ~ .liquid-toggle-input__track {
4230
+ background: var(--component-toggle-track-on-hover, #035268);
4231
+ }
4232
+
4233
+ .liquid-toggle-input__input:focus-visible ~ .liquid-toggle-input__track {
4234
+ box-shadow:
4235
+ 0 0 0 2px #ffffff,
4236
+ 0 0 0 4px var(--component-toggle-track-focus, #0f62fe);
4237
+ }
4238
+
4239
+ .liquid-toggle-input__input:disabled ~ .liquid-toggle-input__track {
4240
+ background: var(--component-toggle-track-disabled, #c6c6c6);
4241
+ }
4242
+
4243
+ .liquid-toggle-input__input:disabled
4244
+ ~ .liquid-toggle-input__track
4245
+ .liquid-toggle-input__thumb {
4246
+ background: var(--component-toggle-thumb-disabled, #8d8d8d);
4247
+ }
4248
+
4249
+ .liquid-toggle-input__label-text {
4250
+ color: var(--component-toggle-text-label, #161616);
4251
+ font-family: var(--component-toggle-label-family, Cabin);
4252
+ font-size: var(--component-toggle-label-size, 14px);
4253
+ font-weight: var(--component-toggle-label-weight, 500);
4254
+ line-height: var(--component-toggle-label-line-height, 18px);
4255
+ letter-spacing: var(--component-toggle-label-letter-spacing, 0.16px);
4256
+ }
4257
+
4258
+ .liquid-toggle-input[data-disabled] .liquid-toggle-input__label-text {
4259
+ color: var(--component-toggle-text-label-disabled, #a8a8a8);
4260
+ }
4261
+
4262
+ .liquid-tooltip {
4263
+ display: inline-flex;
4264
+ position: relative;
4265
+ width: fit-content;
4266
+ }
4267
+
4268
+ .liquid-tooltip__trigger {
4269
+ display: inline-flex;
4270
+ }
4271
+
4272
+ .liquid-tooltip__popover {
4273
+ display: inline-flex;
4274
+ opacity: 0;
4275
+ pointer-events: none;
4276
+ position: absolute;
4277
+ visibility: hidden;
4278
+ z-index: 1;
4279
+ transition: opacity 140ms ease;
4280
+ }
4281
+
4282
+ .liquid-tooltip:hover .liquid-tooltip__popover,
4283
+ .liquid-tooltip:focus-within .liquid-tooltip__popover {
4284
+ opacity: 1;
4285
+ visibility: visible;
4286
+ }
4287
+
4288
+ .liquid-tooltip[data-position='top'] .liquid-tooltip__popover {
4289
+ bottom: calc(100% + 8px);
4290
+ flex-direction: column;
4291
+ }
4292
+
4293
+ .liquid-tooltip[data-position='top'][data-alignment='start']
4294
+ .liquid-tooltip__popover {
4295
+ left: 0;
4296
+ }
4297
+
4298
+ .liquid-tooltip[data-position='top'][data-alignment='center']
4299
+ .liquid-tooltip__popover {
4300
+ left: 50%;
4301
+ transform: translateX(-50%);
4302
+ }
4303
+
4304
+ .liquid-tooltip[data-position='top'][data-alignment='end']
4305
+ .liquid-tooltip__popover {
4306
+ right: 0;
4307
+ }
4308
+
4309
+ .liquid-tooltip[data-position='bottom'] .liquid-tooltip__popover {
4310
+ top: calc(100% + 8px);
4311
+ flex-direction: column-reverse;
4312
+ }
4313
+
4314
+ .liquid-tooltip[data-position='bottom'][data-alignment='start']
4315
+ .liquid-tooltip__popover {
4316
+ left: 0;
4317
+ }
4318
+
4319
+ .liquid-tooltip[data-position='bottom'][data-alignment='center']
4320
+ .liquid-tooltip__popover {
4321
+ left: 50%;
4322
+ transform: translateX(-50%);
4323
+ }
4324
+
4325
+ .liquid-tooltip[data-position='bottom'][data-alignment='end']
4326
+ .liquid-tooltip__popover {
4327
+ right: 0;
4328
+ }
4329
+
4330
+ .liquid-tooltip[data-position='left'] .liquid-tooltip__popover {
4331
+ right: calc(100% + 8px);
4332
+ flex-direction: row;
4333
+ }
4334
+
4335
+ .liquid-tooltip[data-position='left'][data-alignment='start']
4336
+ .liquid-tooltip__popover {
4337
+ top: 0;
4338
+ }
4339
+
4340
+ .liquid-tooltip[data-position='left'][data-alignment='center']
4341
+ .liquid-tooltip__popover {
4342
+ top: 50%;
4343
+ transform: translateY(-50%);
4344
+ }
4345
+
4346
+ .liquid-tooltip[data-position='left'][data-alignment='end']
4347
+ .liquid-tooltip__popover {
4348
+ bottom: 0;
4349
+ }
4350
+
4351
+ .liquid-tooltip[data-position='right'] .liquid-tooltip__popover {
4352
+ left: calc(100% + 8px);
4353
+ flex-direction: row-reverse;
4354
+ }
4355
+
4356
+ .liquid-tooltip[data-position='right'][data-alignment='start']
4357
+ .liquid-tooltip__popover {
4358
+ top: 0;
4359
+ }
4360
+
4361
+ .liquid-tooltip[data-position='right'][data-alignment='center']
4362
+ .liquid-tooltip__popover {
4363
+ top: 50%;
4364
+ transform: translateY(-50%);
4365
+ }
4366
+
4367
+ .liquid-tooltip[data-position='right'][data-alignment='end']
4368
+ .liquid-tooltip__popover {
4369
+ bottom: 0;
4370
+ }
4371
+
4372
+ .liquid-tooltip__body {
4373
+ align-items: center;
4374
+ background: var(--component-tooltip-background, #393939);
4375
+ display: inline-flex;
4376
+ padding-block: var(--component-tooltip-padding-y, 8px);
4377
+ padding-inline: var(--component-tooltip-padding-x, 12px);
4378
+ }
4379
+
4380
+ .liquid-tooltip__text {
4381
+ color: var(--component-tooltip-text, #ffffff);
4382
+ font-family: var(--component-tooltip-body-family, Cabin);
4383
+ font-size: var(--component-tooltip-body-size, 12px);
4384
+ font-weight: var(--component-tooltip-body-weight, 400);
4385
+ letter-spacing: var(--component-tooltip-body-letter-spacing, 0.32px);
4386
+ line-height: var(--component-tooltip-body-line-height, 16px);
4387
+ white-space: nowrap;
4388
+ }
4389
+
4390
+ .liquid-tooltip__caret {
4391
+ align-items: center;
4392
+ color: var(--component-tooltip-arrow, #393939);
4393
+ display: inline-flex;
4394
+ justify-content: center;
4395
+ padding-inline: 12px;
4396
+ }
4397
+
4398
+ .liquid-tooltip[data-position='right'] .liquid-tooltip__caret {
4399
+ margin-right: var(--component-tooltip-arrow-margin-right, -3px);
4400
+ padding-inline: 0;
4401
+ }
4402
+
4403
+ .liquid-tooltip[data-position='left'] .liquid-tooltip__caret {
4404
+ margin-left: var(--component-tooltip-arrow-margin-left, -3px);
4405
+ padding-inline: 0;
4406
+ }
4407
+
4408
+ .liquid-tooltip__caret-svg {
4409
+ display: block;
4410
+ }
4411
+
4412
+ .liquid-tooltip[data-position='top'] .liquid-tooltip__caret-svg {
4413
+ transform: rotate(0deg);
4414
+ }
4415
+
4416
+ .liquid-tooltip[data-position='bottom'] .liquid-tooltip__caret-svg {
4417
+ transform: rotate(180deg);
4418
+ }
4419
+
4420
+ .liquid-tooltip[data-position='left'] .liquid-tooltip__caret-svg {
4421
+ transform: rotate(-90deg);
4422
+ }
4423
+
4424
+ .liquid-tooltip[data-position='right'] .liquid-tooltip__caret-svg {
4425
+ transform: rotate(90deg);
4426
+ }