@vkzstudio/muza-ui 1.0.2 → 1.0.4

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 (24) hide show
  1. package/CLAUDE_CONSUMER.md +238 -238
  2. package/README.md +168 -168
  3. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  4. package/dist/components/DatePicker/DatePicker.js +53 -53
  5. package/dist/components/ExpandableTable/ExpandableTable.d.ts.map +1 -1
  6. package/dist/components/ExpandableTable/ExpandableTable.js +162 -157
  7. package/dist/components/ExpandableTable/Table.d.ts +4 -1
  8. package/dist/components/ExpandableTable/Table.d.ts.map +1 -1
  9. package/dist/components/ExpandableTable/Table.js +82 -78
  10. package/dist/components/Lightbox/LightboxOverrides.css +5 -5
  11. package/dist/components/Loader/Loader.js +6 -6
  12. package/dist/fonts/Objectivity/OFL.txt +92 -92
  13. package/dist/globals.css +12 -12
  14. package/dist/muza-ui.css +1 -1
  15. package/dist/styles/3rd-parties.css +5 -5
  16. package/dist/styles/animations.css +41 -41
  17. package/dist/styles/breakpoints.css +4 -4
  18. package/dist/styles/primitives.css +155 -155
  19. package/dist/styles/token-colors.css +1201 -1201
  20. package/dist/styles/token-sizes.css +676 -676
  21. package/dist/styles/typography.css +84 -84
  22. package/dist/styles/utilities.css +66 -66
  23. package/dist/styles/white-label.css +25 -25
  24. package/package.json +1 -1
package/dist/styles/token-sizes.css CHANGED
@@ -1,676 +1,676 @@
1
- /* width >= 1024px */
2
- @theme static {
3
- /* number */
4
- --radius-none: var(--spacing-0);
5
- --radius-2xs: var(--spacing-2);
6
- --radius-xs: var(--spacing-4);
7
- --radius-sm: var(--spacing-8);
8
- --radius-md: var(--spacing-12);
9
- --radius-lg: var(--spacing-16);
10
- --radius-xl: var(--spacing-20);
11
- --radius-2xl: var(--spacing-24);
12
- --radius-3xl: var(--spacing-32);
13
- --radius-full: var(--spacing-360);
14
- --spacing-none: var(--spacing-0);
15
- --spacing-3xs: var(--spacing-2);
16
- --spacing-2xs: var(--spacing-4);
17
- --spacing-xs: var(--spacing-6);
18
- --spacing-sm: var(--spacing-8);
19
- --spacing-md: var(--spacing-12);
20
- --spacing-lg: var(--spacing-16);
21
- --spacing-xl: var(--spacing-20);
22
- --spacing-2xl: var(--spacing-24);
23
- --spacing-3xl: var(--spacing-32);
24
- --spacing-4xl: var(--spacing-40);
25
- --spacing-5xl: var(--spacing-48);
26
- --spacing-6xl: var(--spacing-56);
27
- --spacing-7xl: var(--spacing-64);
28
- --spacing-8xl: var(--spacing-72);
29
- --spacing-9xl: var(--spacing-80);
30
- --spacing-10xl: var(--spacing-120);
31
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
32
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
33
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
34
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
35
- --spacing-comp-accordion-p: var(--spacing-2xl);
36
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
37
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
38
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
39
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
40
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
41
- --spacing-comp-alert-gap-lg: var(--spacing-md);
42
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
43
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
44
- --spacing-comp-alert-ico-size: var(--spacing-xl);
45
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
46
- --spacing-comp-attachment-p: var(--spacing-2xl);
47
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
48
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
49
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
50
- --spacing-comp-button-p-none: 0px;
51
- --spacing-comp-button-gap: var(--spacing-8);
52
- --spacing-comp-button-p-xxs: var(--spacing-8);
53
- --spacing-comp-button-p-xs: var(--spacing-12);
54
- --spacing-comp-button-p-md: var(--spacing-16);
55
- --spacing-comp-button-p-sm: var(--spacing-24);
56
- --spacing-comp-button-h-xs: var(--spacing-32);
57
- --spacing-comp-button-p-def: var(--spacing-32);
58
- --spacing-comp-button-p-lg: var(--spacing-32);
59
- --spacing-comp-button-w-xs: var(--spacing-32);
60
- --spacing-comp-button-h-sm: var(--spacing-48);
61
- --spacing-comp-button-w-sm: var(--spacing-48);
62
- --spacing-comp-button-h-def: var(--spacing-56);
63
- --spacing-comp-button-w-def: var(--spacing-56);
64
- --spacing-comp-button-h-lg: var(--spacing-64);
65
- --spacing-comp-button-w-lg: var(--spacing-64);
66
- --spacing-comp-button-arrow-size: var(--spacing-4xl);
67
- --spacing-comp-calendar-ico-size: var(--spacing-16);
68
- --spacing-comp-calendar-window-size: var(--spacing-40);
69
- --spacing-comp-card-p-hor: var(--spacing-2xl);
70
- --spacing-comp-card-p-ver: var(--spacing-2xl);
71
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
72
- --spacing-comp-card-category-p: var(--spacing-3xl);
73
- --spacing-comp-card-category-h: var(--spacing-96);
74
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
75
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
76
- --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
77
- --spacing-comp-carousel-circle-size: var(--spacing-28);
78
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
79
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
80
- --spacing-comp-dialog-p: var(--spacing-3xl);
81
- --spacing-comp-dialog-gap: var(--spacing-4xl);
82
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
83
- --spacing-comp-dialog-img-h: var(--spacing-64);
84
- --spacing-comp-dialog-img-w: 114px;
85
- --spacing-comp-dialog-w-sm: var(--spacing-400);
86
- --spacing-comp-dialog-w-md: var(--spacing-640);
87
- --spacing-comp-dialog-w-lg: var(--spacing-980);
88
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
89
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
90
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
91
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
92
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
93
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
94
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
95
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
96
- --spacing-comp-header-gap: var(--spacing-lg);
97
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
98
- --spacing-comp-help-button-p: var(--spacing-32);
99
- --spacing-comp-help-button-h: var(--spacing-56);
100
- --spacing-comp-input-gap: var(--spacing-8);
101
- --spacing-comp-input-spacing-pin: var(--spacing-8);
102
- --spacing-comp-input-p-hor: var(--spacing-24);
103
- --spacing-comp-input-h-small: var(--spacing-48);
104
- --spacing-comp-input-h-def: var(--spacing-56);
105
- --spacing-comp-input-h-large: var(--spacing-64);
106
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
107
- --spacing-comp-login-circle-size: var(--spacing-80);
108
- --spacing-comp-paggination-size: var(--spacing-4xl);
109
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
110
- --spacing-comp-pin-indicator-size: var(--spacing-12);
111
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
112
- --spacing-comp-popup-p: var(--spacing-2xl);
113
- --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
114
- --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
115
- --spacing-comp-radio-w-stroke: var(--spacing-1);
116
- --spacing-comp-radio-dot-size: var(--spacing-10);
117
- --spacing-comp-segmented-control-p: var(--spacing-12);
118
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
119
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
120
- --spacing-comp-select-p-large: var(--spacing-16);
121
- --spacing-comp-select-p-def: var(--spacing-24);
122
- --spacing-comp-select-h-small: var(--spacing-48);
123
- --spacing-comp-select-h-def: var(--spacing-56);
124
- --spacing-comp-select-h-large: var(--spacing-64);
125
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
126
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
127
- --spacing-comp-stepper-gap: var(--spacing-sm);
128
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
129
- --spacing-comp-story-gap-content: var(--spacing-6xl);
130
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
131
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
132
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
133
- --spacing-comp-switch-height-def: 0px;
134
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
135
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
136
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
137
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
138
- --spacing-comp-table-p: var(--spacing-2xl);
139
- --spacing-comp-table-img-size: var(--spacing-40);
140
- --spacing-comp-table-h: var(--spacing-72);
141
- --spacing-comp-tag-dot-size: var(--spacing-6);
142
- --spacing-comp-tag-ico-size: var(--spacing-16);
143
- --spacing-comp-tag-h-sm: var(--spacing-24);
144
- --spacing-comp-tag-h-def: var(--spacing-32);
145
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
146
- --spacing-comp-time-picker-container-h: var(--spacing-56);
147
- --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
148
- --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
149
- --spacing-comp-top-nav-bar-h: var(--spacing-80);
150
- --spacing-comp-view-client-p-hor: var(--spacing-sm);
151
- --spacing-comp-view-client-p-left: var(--spacing-sm);
152
- --spacing-comp-view-client-p-right: var(--spacing-lg);
153
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
154
- --spacing-comp-view-client-gap: var(--spacing-4xl);
155
- --spacing-comp-view-client-corner-radius: var(--radius-full);
156
- --spacing-icon-xsmall: var(--spacing-16);
157
- --spacing-icon-small: var(--spacing-20);
158
- --spacing-icon-medium: var(--spacing-24);
159
- --spacing-icon-large: var(--spacing-32);
160
- --spacing-icon-xlarge: var(--spacing-56);
161
- --spacing-icon-2xlarge: var(--spacing-64);
162
- --spacing-layout-p-top: var(--spacing-40);
163
- --spacing-layout-gap-web: 96px;
164
- --spacing-layout-gap-standard: 120px;
165
- --spacing-layout-p-bottom: var(--spacing-120);
166
- --spacing-layout-p-standard: var(--spacing-120);
167
- }
168
- /* max 1024px */
169
- @media (width < 64rem) {
170
- :root {
171
- /* number */
172
- --radius-none: var(--spacing-0);
173
- --radius-2xs: var(--spacing-2);
174
- --radius-xs: var(--spacing-4);
175
- --radius-sm: var(--spacing-8);
176
- --radius-md: var(--spacing-12);
177
- --radius-lg: var(--spacing-16);
178
- --radius-2xl: var(--spacing-20);
179
- --radius-xl: var(--spacing-20);
180
- --radius-3xl: var(--spacing-24);
181
- --radius-full: var(--spacing-360);
182
- --spacing-none: var(--spacing-0);
183
- --spacing-3xs: var(--spacing-2);
184
- --spacing-2xs: var(--spacing-4);
185
- --spacing-xs: var(--spacing-6);
186
- --spacing-sm: var(--spacing-8);
187
- --spacing-md: var(--spacing-12);
188
- --spacing-lg: var(--spacing-16);
189
- --spacing-xl: var(--spacing-20);
190
- --spacing-2xl: var(--spacing-24);
191
- --spacing-3xl: var(--spacing-32);
192
- --spacing-4xl: var(--spacing-40);
193
- --spacing-5xl: var(--spacing-48);
194
- --spacing-6xl: var(--spacing-56);
195
- --spacing-7xl: var(--spacing-64);
196
- --spacing-8xl: var(--spacing-72);
197
- --spacing-9xl: var(--spacing-80);
198
- --spacing-10xl: var(--spacing-120);
199
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
200
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
201
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
202
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
203
- --spacing-comp-accordion-p: var(--spacing-2xl);
204
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
205
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
206
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
207
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
208
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
209
- --spacing-comp-alert-gap-lg: var(--spacing-md);
210
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
211
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
212
- --spacing-comp-alert-ico-size: var(--spacing-xl);
213
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
214
- --spacing-comp-attachment-p: var(--spacing-2xl);
215
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
216
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
217
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
218
- --spacing-comp-button-p-none: 0px;
219
- --spacing-comp-button-gap: var(--spacing-8);
220
- --spacing-comp-button-p-xxs: var(--spacing-8);
221
- --spacing-comp-button-p-xs: var(--spacing-12);
222
- --spacing-comp-button-p-md: var(--spacing-16);
223
- --spacing-comp-button-p-sm: var(--spacing-24);
224
- --spacing-comp-button-h-xs: var(--spacing-32);
225
- --spacing-comp-button-p-def: var(--spacing-32);
226
- --spacing-comp-button-p-lg: var(--spacing-32);
227
- --spacing-comp-button-w-xs: var(--spacing-32);
228
- --spacing-comp-button-h-sm: var(--spacing-48);
229
- --spacing-comp-button-w-sm: var(--spacing-48);
230
- --spacing-comp-button-h-def: var(--spacing-56);
231
- --spacing-comp-button-w-def: var(--spacing-56);
232
- --spacing-comp-button-h-lg: var(--spacing-64);
233
- --spacing-comp-button-w-lg: var(--spacing-64);
234
- --spacing-comp-button-arrow-size: var(--spacing-4xl);
235
- --spacing-comp-calendar-ico-size: var(--spacing-16);
236
- --spacing-comp-calendar-window-size: var(--spacing-40);
237
- --spacing-comp-card-p-hor: var(--spacing-2xl);
238
- --spacing-comp-card-p-ver: var(--spacing-2xl);
239
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
240
- --spacing-comp-card-category-p: var(--spacing-2xl);
241
- --spacing-comp-card-category-h: var(--spacing-96);
242
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
243
- --spacing-comp-card-dashboard-p-right: var(--spacing-3xl);
244
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-7xl);
245
- --spacing-comp-carousel-circle-size: var(--spacing-28);
246
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
247
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
248
- --spacing-comp-dialog-p: var(--spacing-3xl);
249
- --spacing-comp-dialog-gap: var(--spacing-4xl);
250
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
251
- --spacing-comp-dialog-img-h: var(--spacing-64);
252
- --spacing-comp-dialog-img-w: 114px;
253
- --spacing-comp-dialog-w-sm: var(--spacing-400);
254
- --spacing-comp-dialog-w-lg: var(--spacing-640);
255
- --spacing-comp-dialog-w-md: var(--spacing-640);
256
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
257
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
258
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
259
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
260
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
261
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
262
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
263
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
264
- --spacing-comp-header-gap: var(--spacing-lg);
265
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
266
- --spacing-comp-help-button-p: var(--spacing-24);
267
- --spacing-comp-help-button-h: var(--spacing-56);
268
- --spacing-comp-input-gap: var(--spacing-8);
269
- --spacing-comp-input-spacing-pin: var(--spacing-8);
270
- --spacing-comp-input-p-hor: var(--spacing-24);
271
- --spacing-comp-input-h-small: var(--spacing-48);
272
- --spacing-comp-input-h-def: var(--spacing-56);
273
- --spacing-comp-input-h-large: var(--spacing-64);
274
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
275
- --spacing-comp-login-circle-size: var(--spacing-80);
276
- --spacing-comp-paggination-size: var(--spacing-4xl);
277
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
278
- --spacing-comp-pin-indicator-size: var(--spacing-12);
279
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
280
- --spacing-comp-popup-p: var(--spacing-2xl);
281
- --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
282
- --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
283
- --spacing-comp-radio-w-stroke: var(--spacing-1);
284
- --spacing-comp-radio-dot-size: var(--spacing-10);
285
- --spacing-comp-segmented-control-p: var(--spacing-12);
286
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
287
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
288
- --spacing-comp-select-p-large: var(--spacing-16);
289
- --spacing-comp-select-p-def: var(--spacing-24);
290
- --spacing-comp-select-h-small: var(--spacing-48);
291
- --spacing-comp-select-h-def: var(--spacing-56);
292
- --spacing-comp-select-h-large: var(--spacing-64);
293
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
294
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
295
- --spacing-comp-stepper-gap: var(--spacing-sm);
296
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
297
- --spacing-comp-story-gap-content: var(--spacing-sm);
298
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
299
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
300
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
301
- --spacing-comp-switch-height-def: 0px;
302
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
303
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
304
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
305
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
306
- --spacing-comp-table-p: var(--spacing-2xl);
307
- --spacing-comp-table-img-size: var(--spacing-40);
308
- --spacing-comp-table-h: var(--spacing-72);
309
- --spacing-comp-tag-dot-size: var(--spacing-6);
310
- --spacing-comp-tag-ico-size: var(--spacing-16);
311
- --spacing-comp-tag-h-sm: var(--spacing-24);
312
- --spacing-comp-tag-h-def: var(--spacing-32);
313
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
314
- --spacing-comp-time-picker-container-h: var(--spacing-56);
315
- --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
316
- --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
317
- --spacing-comp-top-nav-bar-h: var(--spacing-80);
318
- --spacing-comp-view-client-p-hor: var(--spacing-md);
319
- --spacing-comp-view-client-p-right: var(--spacing-md);
320
- --spacing-comp-view-client-p-left: var(--spacing-lg);
321
- --spacing-comp-view-client-corner-radius: var(--radius-3xl);
322
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
323
- --spacing-comp-view-client-gap: var(--spacing-4xl);
324
- --spacing-icon-xsmall: var(--spacing-16);
325
- --spacing-icon-medium: var(--spacing-20);
326
- --spacing-icon-small: var(--spacing-20);
327
- --spacing-icon-large: var(--spacing-24);
328
- --spacing-icon-xlarge: var(--spacing-48);
329
- --spacing-icon-2xlarge: var(--spacing-56);
330
- --spacing-layout-p-top: var(--spacing-40);
331
- --spacing-layout-p-standard: var(--spacing-48);
332
- --spacing-layout-gap-web: 64px;
333
- --spacing-layout-gap-standard: 112px;
334
- --spacing-layout-p-bottom: var(--spacing-120);
335
- }
336
- }
337
-
338
- /* max 768px */
339
- @media (width < 48rem) {
340
- :root {
341
- /* number */
342
- --radius-none: var(--spacing-0);
343
- --radius-2xs: var(--spacing-2);
344
- --radius-xs: var(--spacing-4);
345
- --radius-sm: var(--spacing-8);
346
- --radius-md: var(--spacing-12);
347
- --radius-lg: var(--spacing-16);
348
- --radius-2xl: var(--spacing-20);
349
- --radius-xl: var(--spacing-20);
350
- --radius-3xl: var(--spacing-24);
351
- --radius-full: var(--spacing-360);
352
- --spacing-none: var(--spacing-0);
353
- --spacing-3xs: var(--spacing-2);
354
- --spacing-2xs: var(--spacing-4);
355
- --spacing-xs: var(--spacing-6);
356
- --spacing-sm: var(--spacing-8);
357
- --spacing-md: var(--spacing-12);
358
- --spacing-lg: var(--spacing-16);
359
- --spacing-xl: var(--spacing-20);
360
- --spacing-2xl: var(--spacing-24);
361
- --spacing-3xl: var(--spacing-32);
362
- --spacing-4xl: var(--spacing-40);
363
- --spacing-5xl: var(--spacing-48);
364
- --spacing-6xl: var(--spacing-56);
365
- --spacing-7xl: var(--spacing-64);
366
- --spacing-8xl: var(--spacing-72);
367
- --spacing-9xl: var(--spacing-80);
368
- --spacing-10xl: var(--spacing-120);
369
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
370
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
371
- --spacing-comp-accordion-p: var(--spacing-lg);
372
- --spacing-comp-accordion-p-hor: var(--spacing-lg);
373
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
374
- --spacing-comp-accordion-settings-p: var(--spacing-lg);
375
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
376
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
377
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
378
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
379
- --spacing-comp-alert-gap-lg: var(--spacing-md);
380
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
381
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
382
- --spacing-comp-alert-ico-size: var(--spacing-xl);
383
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
384
- --spacing-comp-attachment-p: var(--spacing-xl);
385
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
386
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
387
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
388
- --spacing-comp-button-p-none: 0px;
389
- --spacing-comp-button-gap: var(--spacing-8);
390
- --spacing-comp-button-p-xxs: var(--spacing-8);
391
- --spacing-comp-button-p-xs: var(--spacing-12);
392
- --spacing-comp-button-p-md: var(--spacing-16);
393
- --spacing-comp-button-p-sm: var(--spacing-20);
394
- --spacing-comp-button-h-xs: var(--spacing-32);
395
- --spacing-comp-button-p-def: var(--spacing-32);
396
- --spacing-comp-button-p-lg: var(--spacing-32);
397
- --spacing-comp-button-w-xs: var(--spacing-32);
398
- --spacing-comp-button-h-sm: var(--spacing-48);
399
- --spacing-comp-button-w-sm: var(--spacing-48);
400
- --spacing-comp-button-h-def: var(--spacing-56);
401
- --spacing-comp-button-w-def: var(--spacing-56);
402
- --spacing-comp-button-h-lg: var(--spacing-64);
403
- --spacing-comp-button-w-lg: var(--spacing-64);
404
- --spacing-comp-button-arrow-size: var(--spacing-4xl);
405
- --spacing-comp-calendar-ico-size: var(--spacing-16);
406
- --spacing-comp-calendar-window-size: var(--spacing-40);
407
- --spacing-comp-card-p-ver: var(--spacing-lg);
408
- --spacing-comp-card-p-hor: var(--spacing-xl);
409
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
410
- --spacing-comp-card-category-p: var(--spacing-2xl);
411
- --spacing-comp-card-category-h: var(--spacing-96);
412
- --spacing-comp-card-dashboard-p: var(--spacing-2xl);
413
- --spacing-comp-card-dashboard-p-right: var(--spacing-2xl);
414
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-6xl);
415
- --spacing-comp-carousel-circle-size: var(--spacing-24);
416
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
417
- --spacing-comp-dialog-p: var(--spacing-xl);
418
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-xl);
419
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
420
- --spacing-comp-dialog-gap: var(--spacing-3xl);
421
- --spacing-comp-dialog-img-h: var(--spacing-56);
422
- --spacing-comp-dialog-img-w: 100px;
423
- --spacing-comp-dialog-w-lg: var(--spacing-335);
424
- --spacing-comp-dialog-w-md: var(--spacing-335);
425
- --spacing-comp-dialog-w-sm: var(--spacing-335);
426
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
427
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
428
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
429
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
430
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
431
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
432
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
433
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
434
- --spacing-comp-header-gap: var(--spacing-lg);
435
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
436
- --spacing-comp-help-button-p: var(--spacing-24);
437
- --spacing-comp-help-button-h: var(--spacing-48);
438
- --spacing-comp-input-gap: var(--spacing-8);
439
- --spacing-comp-input-spacing-pin: var(--spacing-8);
440
- --spacing-comp-input-p-hor: var(--spacing-20);
441
- --spacing-comp-input-h-small: var(--spacing-48);
442
- --spacing-comp-input-h-def: var(--spacing-56);
443
- --spacing-comp-input-h-large: var(--spacing-64);
444
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
445
- --spacing-comp-login-circle-size: var(--spacing-64);
446
- --spacing-comp-paggination-size: var(--spacing-4xl);
447
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
448
- --spacing-comp-pin-indicator-size: var(--spacing-12);
449
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
450
- --spacing-comp-popup-p: var(--spacing-xl);
451
- --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
452
- --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
453
- --spacing-comp-radio-w-stroke: var(--spacing-1);
454
- --spacing-comp-radio-dot-size: var(--spacing-10);
455
- --spacing-comp-segmented-control-p: var(--spacing-12);
456
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
457
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
458
- --spacing-comp-select-p-large: var(--spacing-16);
459
- --spacing-comp-select-p-def: var(--spacing-20);
460
- --spacing-comp-select-h-small: var(--spacing-48);
461
- --spacing-comp-select-h-def: var(--spacing-56);
462
- --spacing-comp-select-h-large: var(--spacing-64);
463
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
464
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
465
- --spacing-comp-stepper-gap: var(--spacing-sm);
466
- --spacing-comp-stepper-btn-size: var(--spacing-3xl);
467
- --spacing-comp-story-gap-content: var(--spacing-sm);
468
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
469
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
470
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
471
- --spacing-comp-switch-height-def: 0px;
472
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
473
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
474
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
475
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
476
- --spacing-comp-table-p: var(--spacing-xl);
477
- --spacing-comp-table-img-size: var(--spacing-32);
478
- --spacing-comp-table-h: var(--spacing-72);
479
- --spacing-comp-tag-dot-size: var(--spacing-6);
480
- --spacing-comp-tag-ico-size: var(--spacing-16);
481
- --spacing-comp-tag-h-sm: var(--spacing-24);
482
- --spacing-comp-tag-h-def: var(--spacing-32);
483
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
484
- --spacing-comp-time-picker-container-h: var(--spacing-48);
485
- --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
486
- --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
487
- --spacing-comp-top-nav-bar-h: var(--spacing-80);
488
- --spacing-comp-view-client-p-hor: var(--spacing-md);
489
- --spacing-comp-view-client-p-right: var(--spacing-md);
490
- --spacing-comp-view-client-gap: var(--spacing-lg);
491
- --spacing-comp-view-client-p-left: var(--spacing-lg);
492
- --spacing-comp-view-client-corner-radius: var(--radius-3xl);
493
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
494
- --spacing-icon-xsmall: var(--spacing-16);
495
- --spacing-icon-medium: var(--spacing-20);
496
- --spacing-icon-small: var(--spacing-20);
497
- --spacing-icon-large: var(--spacing-24);
498
- --spacing-icon-xlarge: var(--spacing-48);
499
- --spacing-icon-2xlarge: var(--spacing-56);
500
- --spacing-layout-p-standard: var(--spacing-20);
501
- --spacing-layout-gap-web: 48px;
502
- --spacing-layout-p-top: var(--spacing-56);
503
- --spacing-layout-p-bottom: var(--spacing-80);
504
- --spacing-layout-gap-standard: 96px;
505
- }
506
- }
507
-
508
- /* min 1600px */
509
- @media (width >= 100rem) {
510
- :root {
511
- /* number */
512
- --radius-none: var(--spacing-0);
513
- --radius-2xs: var(--spacing-2);
514
- --radius-xs: var(--spacing-4);
515
- --radius-sm: var(--spacing-8);
516
- --radius-md: var(--spacing-12);
517
- --radius-lg: var(--spacing-16);
518
- --radius-xl: var(--spacing-20);
519
- --radius-2xl: var(--spacing-24);
520
- --radius-3xl: var(--spacing-32);
521
- --radius-full: var(--spacing-360);
522
- --spacing-none: var(--spacing-0);
523
- --spacing-3xs: var(--spacing-2);
524
- --spacing-2xs: var(--spacing-4);
525
- --spacing-xs: var(--spacing-6);
526
- --spacing-sm: var(--spacing-8);
527
- --spacing-md: var(--spacing-12);
528
- --spacing-lg: var(--spacing-16);
529
- --spacing-xl: var(--spacing-20);
530
- --spacing-2xl: var(--spacing-24);
531
- --spacing-3xl: var(--spacing-32);
532
- --spacing-4xl: var(--spacing-40);
533
- --spacing-5xl: var(--spacing-48);
534
- --spacing-6xl: var(--spacing-56);
535
- --spacing-7xl: var(--spacing-64);
536
- --spacing-8xl: var(--spacing-72);
537
- --spacing-9xl: var(--spacing-80);
538
- --spacing-10xl: var(--spacing-120);
539
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
540
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
541
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
542
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
543
- --spacing-comp-accordion-p: var(--spacing-2xl);
544
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
545
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
546
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
547
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
548
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
549
- --spacing-comp-alert-gap-lg: var(--spacing-md);
550
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
551
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
552
- --spacing-comp-alert-ico-size: var(--spacing-xl);
553
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
554
- --spacing-comp-attachment-p: var(--spacing-2xl);
555
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
556
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
557
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
558
- --spacing-comp-button-p-none: 0px;
559
- --spacing-comp-button-gap: var(--spacing-8);
560
- --spacing-comp-button-p-xxs: var(--spacing-8);
561
- --spacing-comp-button-p-xs: var(--spacing-12);
562
- --spacing-comp-button-p-md: var(--spacing-16);
563
- --spacing-comp-button-p-sm: var(--spacing-24);
564
- --spacing-comp-button-h-xs: var(--spacing-32);
565
- --spacing-comp-button-p-def: var(--spacing-32);
566
- --spacing-comp-button-p-lg: var(--spacing-32);
567
- --spacing-comp-button-w-xs: var(--spacing-32);
568
- --spacing-comp-button-h-sm: var(--spacing-48);
569
- --spacing-comp-button-w-sm: var(--spacing-48);
570
- --spacing-comp-button-h-def: var(--spacing-56);
571
- --spacing-comp-button-w-def: var(--spacing-56);
572
- --spacing-comp-button-h-lg: var(--spacing-64);
573
- --spacing-comp-button-w-lg: var(--spacing-64);
574
- --spacing-comp-button-arrow-size: var(--spacing-4xl);
575
- --spacing-comp-calendar-ico-size: var(--spacing-16);
576
- --spacing-comp-calendar-window-size: var(--spacing-40);
577
- --spacing-comp-card-p-ver: var(--spacing-2xl);
578
- --spacing-comp-card-p-hor: var(--spacing-3xl);
579
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
580
- --spacing-comp-card-category-p: var(--spacing-3xl);
581
- --spacing-comp-card-category-h: var(--spacing-96);
582
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
583
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
584
- --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
585
- --spacing-comp-carousel-circle-size: var(--spacing-28);
586
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
587
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
588
- --spacing-comp-dialog-p: var(--spacing-3xl);
589
- --spacing-comp-dialog-gap: var(--spacing-4xl);
590
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
591
- --spacing-comp-dialog-img-h: var(--spacing-64);
592
- --spacing-comp-dialog-img-w: 114px;
593
- --spacing-comp-dialog-w-sm: var(--spacing-400);
594
- --spacing-comp-dialog-w-md: var(--spacing-640);
595
- --spacing-comp-dialog-w-lg: var(--spacing-980);
596
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
597
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
598
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
599
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
600
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
601
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
602
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
603
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
604
- --spacing-comp-header-gap: var(--spacing-lg);
605
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
606
- --spacing-comp-help-button-p: var(--spacing-32);
607
- --spacing-comp-help-button-h: var(--spacing-56);
608
- --spacing-comp-input-gap: var(--spacing-8);
609
- --spacing-comp-input-spacing-pin: var(--spacing-8);
610
- --spacing-comp-input-p-hor: var(--spacing-24);
611
- --spacing-comp-input-h-small: var(--spacing-48);
612
- --spacing-comp-input-h-def: var(--spacing-56);
613
- --spacing-comp-input-h-large: var(--spacing-64);
614
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
615
- --spacing-comp-login-circle-size: var(--spacing-80);
616
- --spacing-comp-paggination-size: var(--spacing-4xl);
617
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
618
- --spacing-comp-pin-indicator-size: var(--spacing-12);
619
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
620
- --spacing-comp-popup-p: var(--spacing-2xl);
621
- --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
622
- --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
623
- --spacing-comp-radio-w-stroke: var(--spacing-1);
624
- --spacing-comp-radio-dot-size: var(--spacing-10);
625
- --spacing-comp-segmented-control-p: var(--spacing-12);
626
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
627
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
628
- --spacing-comp-select-p-large: var(--spacing-16);
629
- --spacing-comp-select-p-def: var(--spacing-24);
630
- --spacing-comp-select-h-small: var(--spacing-48);
631
- --spacing-comp-select-h-def: var(--spacing-56);
632
- --spacing-comp-select-h-large: var(--spacing-64);
633
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
634
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
635
- --spacing-comp-stepper-gap: var(--spacing-sm);
636
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
637
- --spacing-comp-story-gap-content: var(--spacing-6xl);
638
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
639
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
640
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
641
- --spacing-comp-switch-height-def: 0px;
642
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
643
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
644
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
645
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
646
- --spacing-comp-table-p: var(--spacing-2xl);
647
- --spacing-comp-table-img-size: var(--spacing-40);
648
- --spacing-comp-table-h: var(--spacing-72);
649
- --spacing-comp-tag-dot-size: var(--spacing-6);
650
- --spacing-comp-tag-ico-size: var(--spacing-16);
651
- --spacing-comp-tag-h-sm: var(--spacing-24);
652
- --spacing-comp-tag-h-def: var(--spacing-32);
653
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
654
- --spacing-comp-time-picker-container-h: var(--spacing-56);
655
- --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
656
- --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
657
- --spacing-comp-top-nav-bar-h: var(--spacing-80);
658
- --spacing-comp-view-client-p-hor: var(--spacing-sm);
659
- --spacing-comp-view-client-p-left: var(--spacing-sm);
660
- --spacing-comp-view-client-p-right: var(--spacing-lg);
661
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
662
- --spacing-comp-view-client-gap: var(--spacing-4xl);
663
- --spacing-comp-view-client-corner-radius: var(--radius-full);
664
- --spacing-icon-xsmall: var(--spacing-16);
665
- --spacing-icon-small: var(--spacing-20);
666
- --spacing-icon-medium: var(--spacing-24);
667
- --spacing-icon-large: var(--spacing-32);
668
- --spacing-icon-xlarge: var(--spacing-56);
669
- --spacing-icon-2xlarge: var(--spacing-64);
670
- --spacing-layout-p-standard: var(--spacing-50);
671
- --spacing-layout-p-top: var(--spacing-56);
672
- --spacing-layout-gap-web: 96px;
673
- --spacing-layout-gap-standard: 120px;
674
- --spacing-layout-p-bottom: var(--spacing-120);
675
- }
676
- }
1
+ /* width >= 1024px */
2
+ @theme static {
3
+ /* number */
4
+ --radius-none: var(--spacing-0);
5
+ --radius-2xs: var(--spacing-2);
6
+ --radius-xs: var(--spacing-4);
7
+ --radius-sm: var(--spacing-8);
8
+ --radius-md: var(--spacing-12);
9
+ --radius-lg: var(--spacing-16);
10
+ --radius-xl: var(--spacing-20);
11
+ --radius-2xl: var(--spacing-24);
12
+ --radius-3xl: var(--spacing-32);
13
+ --radius-full: var(--spacing-360);
14
+ --spacing-none: var(--spacing-0);
15
+ --spacing-3xs: var(--spacing-2);
16
+ --spacing-2xs: var(--spacing-4);
17
+ --spacing-xs: var(--spacing-6);
18
+ --spacing-sm: var(--spacing-8);
19
+ --spacing-md: var(--spacing-12);
20
+ --spacing-lg: var(--spacing-16);
21
+ --spacing-xl: var(--spacing-20);
22
+ --spacing-2xl: var(--spacing-24);
23
+ --spacing-3xl: var(--spacing-32);
24
+ --spacing-4xl: var(--spacing-40);
25
+ --spacing-5xl: var(--spacing-48);
26
+ --spacing-6xl: var(--spacing-56);
27
+ --spacing-7xl: var(--spacing-64);
28
+ --spacing-8xl: var(--spacing-72);
29
+ --spacing-9xl: var(--spacing-80);
30
+ --spacing-10xl: var(--spacing-120);
31
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
32
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
33
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
34
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
35
+ --spacing-comp-accordion-p: var(--spacing-2xl);
36
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
37
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
38
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
39
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
40
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
41
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
42
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
43
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
44
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
45
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
46
+ --spacing-comp-attachment-p: var(--spacing-2xl);
47
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
48
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
49
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
50
+ --spacing-comp-button-p-none: 0px;
51
+ --spacing-comp-button-gap: var(--spacing-8);
52
+ --spacing-comp-button-p-xxs: var(--spacing-8);
53
+ --spacing-comp-button-p-xs: var(--spacing-12);
54
+ --spacing-comp-button-p-md: var(--spacing-16);
55
+ --spacing-comp-button-p-sm: var(--spacing-24);
56
+ --spacing-comp-button-h-xs: var(--spacing-32);
57
+ --spacing-comp-button-p-def: var(--spacing-32);
58
+ --spacing-comp-button-p-lg: var(--spacing-32);
59
+ --spacing-comp-button-w-xs: var(--spacing-32);
60
+ --spacing-comp-button-h-sm: var(--spacing-48);
61
+ --spacing-comp-button-w-sm: var(--spacing-48);
62
+ --spacing-comp-button-h-def: var(--spacing-56);
63
+ --spacing-comp-button-w-def: var(--spacing-56);
64
+ --spacing-comp-button-h-lg: var(--spacing-64);
65
+ --spacing-comp-button-w-lg: var(--spacing-64);
66
+ --spacing-comp-button-arrow-size: var(--spacing-4xl);
67
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
68
+ --spacing-comp-calendar-window-size: var(--spacing-40);
69
+ --spacing-comp-card-p-hor: var(--spacing-2xl);
70
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
71
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
72
+ --spacing-comp-card-category-p: var(--spacing-3xl);
73
+ --spacing-comp-card-category-h: var(--spacing-96);
74
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
75
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
76
+ --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
77
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
78
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
79
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
80
+ --spacing-comp-dialog-p: var(--spacing-3xl);
81
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
82
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
83
+ --spacing-comp-dialog-img-h: var(--spacing-64);
84
+ --spacing-comp-dialog-img-w: 114px;
85
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
86
+ --spacing-comp-dialog-w-md: var(--spacing-640);
87
+ --spacing-comp-dialog-w-lg: var(--spacing-980);
88
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
89
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
90
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
91
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
92
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
93
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
94
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
95
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
96
+ --spacing-comp-header-gap: var(--spacing-lg);
97
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
98
+ --spacing-comp-help-button-p: var(--spacing-32);
99
+ --spacing-comp-help-button-h: var(--spacing-56);
100
+ --spacing-comp-input-gap: var(--spacing-8);
101
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
102
+ --spacing-comp-input-p-hor: var(--spacing-24);
103
+ --spacing-comp-input-h-small: var(--spacing-48);
104
+ --spacing-comp-input-h-def: var(--spacing-56);
105
+ --spacing-comp-input-h-large: var(--spacing-64);
106
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
107
+ --spacing-comp-login-circle-size: var(--spacing-80);
108
+ --spacing-comp-paggination-size: var(--spacing-4xl);
109
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
110
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
111
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
112
+ --spacing-comp-popup-p: var(--spacing-2xl);
113
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
114
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
115
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
116
+ --spacing-comp-radio-dot-size: var(--spacing-10);
117
+ --spacing-comp-segmented-control-p: var(--spacing-12);
118
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
119
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
120
+ --spacing-comp-select-p-large: var(--spacing-16);
121
+ --spacing-comp-select-p-def: var(--spacing-24);
122
+ --spacing-comp-select-h-small: var(--spacing-48);
123
+ --spacing-comp-select-h-def: var(--spacing-56);
124
+ --spacing-comp-select-h-large: var(--spacing-64);
125
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
126
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
127
+ --spacing-comp-stepper-gap: var(--spacing-sm);
128
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
129
+ --spacing-comp-story-gap-content: var(--spacing-6xl);
130
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
131
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
132
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
133
+ --spacing-comp-switch-height-def: 0px;
134
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
135
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
136
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
137
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
138
+ --spacing-comp-table-p: var(--spacing-2xl);
139
+ --spacing-comp-table-img-size: var(--spacing-40);
140
+ --spacing-comp-table-h: var(--spacing-72);
141
+ --spacing-comp-tag-dot-size: var(--spacing-6);
142
+ --spacing-comp-tag-ico-size: var(--spacing-16);
143
+ --spacing-comp-tag-h-sm: var(--spacing-24);
144
+ --spacing-comp-tag-h-def: var(--spacing-32);
145
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
146
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
147
+ --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
148
+ --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
149
+ --spacing-comp-top-nav-bar-h: var(--spacing-80);
150
+ --spacing-comp-view-client-p-hor: var(--spacing-sm);
151
+ --spacing-comp-view-client-p-left: var(--spacing-sm);
152
+ --spacing-comp-view-client-p-right: var(--spacing-lg);
153
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
154
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
155
+ --spacing-comp-view-client-corner-radius: var(--radius-full);
156
+ --spacing-icon-xsmall: var(--spacing-16);
157
+ --spacing-icon-small: var(--spacing-20);
158
+ --spacing-icon-medium: var(--spacing-24);
159
+ --spacing-icon-large: var(--spacing-32);
160
+ --spacing-icon-xlarge: var(--spacing-56);
161
+ --spacing-icon-2xlarge: var(--spacing-64);
162
+ --spacing-layout-p-top: var(--spacing-40);
163
+ --spacing-layout-gap-web: 96px;
164
+ --spacing-layout-gap-standard: 120px;
165
+ --spacing-layout-p-bottom: var(--spacing-120);
166
+ --spacing-layout-p-standard: var(--spacing-120);
167
+ }
168
+ /* max 1024px */
169
+ @media (width < 64rem) {
170
+ :root {
171
+ /* number */
172
+ --radius-none: var(--spacing-0);
173
+ --radius-2xs: var(--spacing-2);
174
+ --radius-xs: var(--spacing-4);
175
+ --radius-sm: var(--spacing-8);
176
+ --radius-md: var(--spacing-12);
177
+ --radius-lg: var(--spacing-16);
178
+ --radius-2xl: var(--spacing-20);
179
+ --radius-xl: var(--spacing-20);
180
+ --radius-3xl: var(--spacing-24);
181
+ --radius-full: var(--spacing-360);
182
+ --spacing-none: var(--spacing-0);
183
+ --spacing-3xs: var(--spacing-2);
184
+ --spacing-2xs: var(--spacing-4);
185
+ --spacing-xs: var(--spacing-6);
186
+ --spacing-sm: var(--spacing-8);
187
+ --spacing-md: var(--spacing-12);
188
+ --spacing-lg: var(--spacing-16);
189
+ --spacing-xl: var(--spacing-20);
190
+ --spacing-2xl: var(--spacing-24);
191
+ --spacing-3xl: var(--spacing-32);
192
+ --spacing-4xl: var(--spacing-40);
193
+ --spacing-5xl: var(--spacing-48);
194
+ --spacing-6xl: var(--spacing-56);
195
+ --spacing-7xl: var(--spacing-64);
196
+ --spacing-8xl: var(--spacing-72);
197
+ --spacing-9xl: var(--spacing-80);
198
+ --spacing-10xl: var(--spacing-120);
199
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
200
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
201
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
202
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
203
+ --spacing-comp-accordion-p: var(--spacing-2xl);
204
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
205
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
206
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
207
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
208
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
209
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
210
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
211
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
212
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
213
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
214
+ --spacing-comp-attachment-p: var(--spacing-2xl);
215
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
216
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
217
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
218
+ --spacing-comp-button-p-none: 0px;
219
+ --spacing-comp-button-gap: var(--spacing-8);
220
+ --spacing-comp-button-p-xxs: var(--spacing-8);
221
+ --spacing-comp-button-p-xs: var(--spacing-12);
222
+ --spacing-comp-button-p-md: var(--spacing-16);
223
+ --spacing-comp-button-p-sm: var(--spacing-24);
224
+ --spacing-comp-button-h-xs: var(--spacing-32);
225
+ --spacing-comp-button-p-def: var(--spacing-32);
226
+ --spacing-comp-button-p-lg: var(--spacing-32);
227
+ --spacing-comp-button-w-xs: var(--spacing-32);
228
+ --spacing-comp-button-h-sm: var(--spacing-48);
229
+ --spacing-comp-button-w-sm: var(--spacing-48);
230
+ --spacing-comp-button-h-def: var(--spacing-56);
231
+ --spacing-comp-button-w-def: var(--spacing-56);
232
+ --spacing-comp-button-h-lg: var(--spacing-64);
233
+ --spacing-comp-button-w-lg: var(--spacing-64);
234
+ --spacing-comp-button-arrow-size: var(--spacing-4xl);
235
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
236
+ --spacing-comp-calendar-window-size: var(--spacing-40);
237
+ --spacing-comp-card-p-hor: var(--spacing-2xl);
238
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
239
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
240
+ --spacing-comp-card-category-p: var(--spacing-2xl);
241
+ --spacing-comp-card-category-h: var(--spacing-96);
242
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
243
+ --spacing-comp-card-dashboard-p-right: var(--spacing-3xl);
244
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-7xl);
245
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
246
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
247
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
248
+ --spacing-comp-dialog-p: var(--spacing-3xl);
249
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
250
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
251
+ --spacing-comp-dialog-img-h: var(--spacing-64);
252
+ --spacing-comp-dialog-img-w: 114px;
253
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
254
+ --spacing-comp-dialog-w-lg: var(--spacing-640);
255
+ --spacing-comp-dialog-w-md: var(--spacing-640);
256
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
257
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
258
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
259
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
260
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
261
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
262
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
263
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
264
+ --spacing-comp-header-gap: var(--spacing-lg);
265
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
266
+ --spacing-comp-help-button-p: var(--spacing-24);
267
+ --spacing-comp-help-button-h: var(--spacing-56);
268
+ --spacing-comp-input-gap: var(--spacing-8);
269
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
270
+ --spacing-comp-input-p-hor: var(--spacing-24);
271
+ --spacing-comp-input-h-small: var(--spacing-48);
272
+ --spacing-comp-input-h-def: var(--spacing-56);
273
+ --spacing-comp-input-h-large: var(--spacing-64);
274
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
275
+ --spacing-comp-login-circle-size: var(--spacing-80);
276
+ --spacing-comp-paggination-size: var(--spacing-4xl);
277
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
278
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
279
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
280
+ --spacing-comp-popup-p: var(--spacing-2xl);
281
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
282
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
283
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
284
+ --spacing-comp-radio-dot-size: var(--spacing-10);
285
+ --spacing-comp-segmented-control-p: var(--spacing-12);
286
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
287
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
288
+ --spacing-comp-select-p-large: var(--spacing-16);
289
+ --spacing-comp-select-p-def: var(--spacing-24);
290
+ --spacing-comp-select-h-small: var(--spacing-48);
291
+ --spacing-comp-select-h-def: var(--spacing-56);
292
+ --spacing-comp-select-h-large: var(--spacing-64);
293
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
294
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
295
+ --spacing-comp-stepper-gap: var(--spacing-sm);
296
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
297
+ --spacing-comp-story-gap-content: var(--spacing-sm);
298
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
299
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
300
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
301
+ --spacing-comp-switch-height-def: 0px;
302
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
303
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
304
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
305
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
306
+ --spacing-comp-table-p: var(--spacing-2xl);
307
+ --spacing-comp-table-img-size: var(--spacing-40);
308
+ --spacing-comp-table-h: var(--spacing-72);
309
+ --spacing-comp-tag-dot-size: var(--spacing-6);
310
+ --spacing-comp-tag-ico-size: var(--spacing-16);
311
+ --spacing-comp-tag-h-sm: var(--spacing-24);
312
+ --spacing-comp-tag-h-def: var(--spacing-32);
313
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
314
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
315
+ --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
316
+ --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
317
+ --spacing-comp-top-nav-bar-h: var(--spacing-80);
318
+ --spacing-comp-view-client-p-hor: var(--spacing-md);
319
+ --spacing-comp-view-client-p-right: var(--spacing-md);
320
+ --spacing-comp-view-client-p-left: var(--spacing-lg);
321
+ --spacing-comp-view-client-corner-radius: var(--radius-3xl);
322
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
323
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
324
+ --spacing-icon-xsmall: var(--spacing-16);
325
+ --spacing-icon-medium: var(--spacing-20);
326
+ --spacing-icon-small: var(--spacing-20);
327
+ --spacing-icon-large: var(--spacing-24);
328
+ --spacing-icon-xlarge: var(--spacing-48);
329
+ --spacing-icon-2xlarge: var(--spacing-56);
330
+ --spacing-layout-p-top: var(--spacing-40);
331
+ --spacing-layout-p-standard: var(--spacing-48);
332
+ --spacing-layout-gap-web: 64px;
333
+ --spacing-layout-gap-standard: 112px;
334
+ --spacing-layout-p-bottom: var(--spacing-120);
335
+ }
336
+ }
337
+
338
+ /* max 768px */
339
+ @media (width < 48rem) {
340
+ :root {
341
+ /* number */
342
+ --radius-none: var(--spacing-0);
343
+ --radius-2xs: var(--spacing-2);
344
+ --radius-xs: var(--spacing-4);
345
+ --radius-sm: var(--spacing-8);
346
+ --radius-md: var(--spacing-12);
347
+ --radius-lg: var(--spacing-16);
348
+ --radius-2xl: var(--spacing-20);
349
+ --radius-xl: var(--spacing-20);
350
+ --radius-3xl: var(--spacing-24);
351
+ --radius-full: var(--spacing-360);
352
+ --spacing-none: var(--spacing-0);
353
+ --spacing-3xs: var(--spacing-2);
354
+ --spacing-2xs: var(--spacing-4);
355
+ --spacing-xs: var(--spacing-6);
356
+ --spacing-sm: var(--spacing-8);
357
+ --spacing-md: var(--spacing-12);
358
+ --spacing-lg: var(--spacing-16);
359
+ --spacing-xl: var(--spacing-20);
360
+ --spacing-2xl: var(--spacing-24);
361
+ --spacing-3xl: var(--spacing-32);
362
+ --spacing-4xl: var(--spacing-40);
363
+ --spacing-5xl: var(--spacing-48);
364
+ --spacing-6xl: var(--spacing-56);
365
+ --spacing-7xl: var(--spacing-64);
366
+ --spacing-8xl: var(--spacing-72);
367
+ --spacing-9xl: var(--spacing-80);
368
+ --spacing-10xl: var(--spacing-120);
369
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
370
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
371
+ --spacing-comp-accordion-p: var(--spacing-lg);
372
+ --spacing-comp-accordion-p-hor: var(--spacing-lg);
373
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
374
+ --spacing-comp-accordion-settings-p: var(--spacing-lg);
375
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
376
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
377
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
378
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
379
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
380
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
381
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
382
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
383
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
384
+ --spacing-comp-attachment-p: var(--spacing-xl);
385
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
386
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
387
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
388
+ --spacing-comp-button-p-none: 0px;
389
+ --spacing-comp-button-gap: var(--spacing-8);
390
+ --spacing-comp-button-p-xxs: var(--spacing-8);
391
+ --spacing-comp-button-p-xs: var(--spacing-12);
392
+ --spacing-comp-button-p-md: var(--spacing-16);
393
+ --spacing-comp-button-p-sm: var(--spacing-20);
394
+ --spacing-comp-button-h-xs: var(--spacing-32);
395
+ --spacing-comp-button-p-def: var(--spacing-32);
396
+ --spacing-comp-button-p-lg: var(--spacing-32);
397
+ --spacing-comp-button-w-xs: var(--spacing-32);
398
+ --spacing-comp-button-h-sm: var(--spacing-48);
399
+ --spacing-comp-button-w-sm: var(--spacing-48);
400
+ --spacing-comp-button-h-def: var(--spacing-56);
401
+ --spacing-comp-button-w-def: var(--spacing-56);
402
+ --spacing-comp-button-h-lg: var(--spacing-64);
403
+ --spacing-comp-button-w-lg: var(--spacing-64);
404
+ --spacing-comp-button-arrow-size: var(--spacing-4xl);
405
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
406
+ --spacing-comp-calendar-window-size: var(--spacing-40);
407
+ --spacing-comp-card-p-ver: var(--spacing-lg);
408
+ --spacing-comp-card-p-hor: var(--spacing-xl);
409
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
410
+ --spacing-comp-card-category-p: var(--spacing-2xl);
411
+ --spacing-comp-card-category-h: var(--spacing-96);
412
+ --spacing-comp-card-dashboard-p: var(--spacing-2xl);
413
+ --spacing-comp-card-dashboard-p-right: var(--spacing-2xl);
414
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-6xl);
415
+ --spacing-comp-carousel-circle-size: var(--spacing-24);
416
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
417
+ --spacing-comp-dialog-p: var(--spacing-xl);
418
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-xl);
419
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
420
+ --spacing-comp-dialog-gap: var(--spacing-3xl);
421
+ --spacing-comp-dialog-img-h: var(--spacing-56);
422
+ --spacing-comp-dialog-img-w: 100px;
423
+ --spacing-comp-dialog-w-lg: var(--spacing-335);
424
+ --spacing-comp-dialog-w-md: var(--spacing-335);
425
+ --spacing-comp-dialog-w-sm: var(--spacing-335);
426
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
427
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
428
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
429
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
430
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
431
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
432
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
433
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
434
+ --spacing-comp-header-gap: var(--spacing-lg);
435
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
436
+ --spacing-comp-help-button-p: var(--spacing-24);
437
+ --spacing-comp-help-button-h: var(--spacing-48);
438
+ --spacing-comp-input-gap: var(--spacing-8);
439
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
440
+ --spacing-comp-input-p-hor: var(--spacing-20);
441
+ --spacing-comp-input-h-small: var(--spacing-48);
442
+ --spacing-comp-input-h-def: var(--spacing-56);
443
+ --spacing-comp-input-h-large: var(--spacing-64);
444
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
445
+ --spacing-comp-login-circle-size: var(--spacing-64);
446
+ --spacing-comp-paggination-size: var(--spacing-4xl);
447
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
448
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
449
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
450
+ --spacing-comp-popup-p: var(--spacing-xl);
451
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
452
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
453
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
454
+ --spacing-comp-radio-dot-size: var(--spacing-10);
455
+ --spacing-comp-segmented-control-p: var(--spacing-12);
456
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
457
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
458
+ --spacing-comp-select-p-large: var(--spacing-16);
459
+ --spacing-comp-select-p-def: var(--spacing-20);
460
+ --spacing-comp-select-h-small: var(--spacing-48);
461
+ --spacing-comp-select-h-def: var(--spacing-56);
462
+ --spacing-comp-select-h-large: var(--spacing-64);
463
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
464
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
465
+ --spacing-comp-stepper-gap: var(--spacing-sm);
466
+ --spacing-comp-stepper-btn-size: var(--spacing-3xl);
467
+ --spacing-comp-story-gap-content: var(--spacing-sm);
468
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
469
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
470
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
471
+ --spacing-comp-switch-height-def: 0px;
472
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
473
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
474
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
475
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
476
+ --spacing-comp-table-p: var(--spacing-xl);
477
+ --spacing-comp-table-img-size: var(--spacing-32);
478
+ --spacing-comp-table-h: var(--spacing-72);
479
+ --spacing-comp-tag-dot-size: var(--spacing-6);
480
+ --spacing-comp-tag-ico-size: var(--spacing-16);
481
+ --spacing-comp-tag-h-sm: var(--spacing-24);
482
+ --spacing-comp-tag-h-def: var(--spacing-32);
483
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
484
+ --spacing-comp-time-picker-container-h: var(--spacing-48);
485
+ --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
486
+ --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
487
+ --spacing-comp-top-nav-bar-h: var(--spacing-80);
488
+ --spacing-comp-view-client-p-hor: var(--spacing-md);
489
+ --spacing-comp-view-client-p-right: var(--spacing-md);
490
+ --spacing-comp-view-client-gap: var(--spacing-lg);
491
+ --spacing-comp-view-client-p-left: var(--spacing-lg);
492
+ --spacing-comp-view-client-corner-radius: var(--radius-3xl);
493
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
494
+ --spacing-icon-xsmall: var(--spacing-16);
495
+ --spacing-icon-medium: var(--spacing-20);
496
+ --spacing-icon-small: var(--spacing-20);
497
+ --spacing-icon-large: var(--spacing-24);
498
+ --spacing-icon-xlarge: var(--spacing-48);
499
+ --spacing-icon-2xlarge: var(--spacing-56);
500
+ --spacing-layout-p-standard: var(--spacing-20);
501
+ --spacing-layout-gap-web: 48px;
502
+ --spacing-layout-p-top: var(--spacing-56);
503
+ --spacing-layout-p-bottom: var(--spacing-80);
504
+ --spacing-layout-gap-standard: 96px;
505
+ }
506
+ }
507
+
508
+ /* min 1600px */
509
+ @media (width >= 100rem) {
510
+ :root {
511
+ /* number */
512
+ --radius-none: var(--spacing-0);
513
+ --radius-2xs: var(--spacing-2);
514
+ --radius-xs: var(--spacing-4);
515
+ --radius-sm: var(--spacing-8);
516
+ --radius-md: var(--spacing-12);
517
+ --radius-lg: var(--spacing-16);
518
+ --radius-xl: var(--spacing-20);
519
+ --radius-2xl: var(--spacing-24);
520
+ --radius-3xl: var(--spacing-32);
521
+ --radius-full: var(--spacing-360);
522
+ --spacing-none: var(--spacing-0);
523
+ --spacing-3xs: var(--spacing-2);
524
+ --spacing-2xs: var(--spacing-4);
525
+ --spacing-xs: var(--spacing-6);
526
+ --spacing-sm: var(--spacing-8);
527
+ --spacing-md: var(--spacing-12);
528
+ --spacing-lg: var(--spacing-16);
529
+ --spacing-xl: var(--spacing-20);
530
+ --spacing-2xl: var(--spacing-24);
531
+ --spacing-3xl: var(--spacing-32);
532
+ --spacing-4xl: var(--spacing-40);
533
+ --spacing-5xl: var(--spacing-48);
534
+ --spacing-6xl: var(--spacing-56);
535
+ --spacing-7xl: var(--spacing-64);
536
+ --spacing-8xl: var(--spacing-72);
537
+ --spacing-9xl: var(--spacing-80);
538
+ --spacing-10xl: var(--spacing-120);
539
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
540
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
541
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
542
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
543
+ --spacing-comp-accordion-p: var(--spacing-2xl);
544
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
545
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
546
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
547
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
548
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
549
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
550
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
551
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
552
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
553
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
554
+ --spacing-comp-attachment-p: var(--spacing-2xl);
555
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
556
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
557
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
558
+ --spacing-comp-button-p-none: 0px;
559
+ --spacing-comp-button-gap: var(--spacing-8);
560
+ --spacing-comp-button-p-xxs: var(--spacing-8);
561
+ --spacing-comp-button-p-xs: var(--spacing-12);
562
+ --spacing-comp-button-p-md: var(--spacing-16);
563
+ --spacing-comp-button-p-sm: var(--spacing-24);
564
+ --spacing-comp-button-h-xs: var(--spacing-32);
565
+ --spacing-comp-button-p-def: var(--spacing-32);
566
+ --spacing-comp-button-p-lg: var(--spacing-32);
567
+ --spacing-comp-button-w-xs: var(--spacing-32);
568
+ --spacing-comp-button-h-sm: var(--spacing-48);
569
+ --spacing-comp-button-w-sm: var(--spacing-48);
570
+ --spacing-comp-button-h-def: var(--spacing-56);
571
+ --spacing-comp-button-w-def: var(--spacing-56);
572
+ --spacing-comp-button-h-lg: var(--spacing-64);
573
+ --spacing-comp-button-w-lg: var(--spacing-64);
574
+ --spacing-comp-button-arrow-size: var(--spacing-4xl);
575
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
576
+ --spacing-comp-calendar-window-size: var(--spacing-40);
577
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
578
+ --spacing-comp-card-p-hor: var(--spacing-3xl);
579
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
580
+ --spacing-comp-card-category-p: var(--spacing-3xl);
581
+ --spacing-comp-card-category-h: var(--spacing-96);
582
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
583
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
584
+ --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
585
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
586
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
587
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
588
+ --spacing-comp-dialog-p: var(--spacing-3xl);
589
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
590
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
591
+ --spacing-comp-dialog-img-h: var(--spacing-64);
592
+ --spacing-comp-dialog-img-w: 114px;
593
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
594
+ --spacing-comp-dialog-w-md: var(--spacing-640);
595
+ --spacing-comp-dialog-w-lg: var(--spacing-980);
596
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
597
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
598
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
599
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
600
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
601
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
602
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
603
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
604
+ --spacing-comp-header-gap: var(--spacing-lg);
605
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
606
+ --spacing-comp-help-button-p: var(--spacing-32);
607
+ --spacing-comp-help-button-h: var(--spacing-56);
608
+ --spacing-comp-input-gap: var(--spacing-8);
609
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
610
+ --spacing-comp-input-p-hor: var(--spacing-24);
611
+ --spacing-comp-input-h-small: var(--spacing-48);
612
+ --spacing-comp-input-h-def: var(--spacing-56);
613
+ --spacing-comp-input-h-large: var(--spacing-64);
614
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
615
+ --spacing-comp-login-circle-size: var(--spacing-80);
616
+ --spacing-comp-paggination-size: var(--spacing-4xl);
617
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
618
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
619
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
620
+ --spacing-comp-popup-p: var(--spacing-2xl);
621
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
622
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
623
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
624
+ --spacing-comp-radio-dot-size: var(--spacing-10);
625
+ --spacing-comp-segmented-control-p: var(--spacing-12);
626
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
627
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
628
+ --spacing-comp-select-p-large: var(--spacing-16);
629
+ --spacing-comp-select-p-def: var(--spacing-24);
630
+ --spacing-comp-select-h-small: var(--spacing-48);
631
+ --spacing-comp-select-h-def: var(--spacing-56);
632
+ --spacing-comp-select-h-large: var(--spacing-64);
633
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
634
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
635
+ --spacing-comp-stepper-gap: var(--spacing-sm);
636
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
637
+ --spacing-comp-story-gap-content: var(--spacing-6xl);
638
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
639
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
640
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
641
+ --spacing-comp-switch-height-def: 0px;
642
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
643
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
644
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
645
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
646
+ --spacing-comp-table-p: var(--spacing-2xl);
647
+ --spacing-comp-table-img-size: var(--spacing-40);
648
+ --spacing-comp-table-h: var(--spacing-72);
649
+ --spacing-comp-tag-dot-size: var(--spacing-6);
650
+ --spacing-comp-tag-ico-size: var(--spacing-16);
651
+ --spacing-comp-tag-h-sm: var(--spacing-24);
652
+ --spacing-comp-tag-h-def: var(--spacing-32);
653
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
654
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
655
+ --spacing-comp-top-nav-bar-p-hor: var(--spacing-lg);
656
+ --spacing-comp-top-nav-bar-p-ver: var(--spacing-3xl);
657
+ --spacing-comp-top-nav-bar-h: var(--spacing-80);
658
+ --spacing-comp-view-client-p-hor: var(--spacing-sm);
659
+ --spacing-comp-view-client-p-left: var(--spacing-sm);
660
+ --spacing-comp-view-client-p-right: var(--spacing-lg);
661
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
662
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
663
+ --spacing-comp-view-client-corner-radius: var(--radius-full);
664
+ --spacing-icon-xsmall: var(--spacing-16);
665
+ --spacing-icon-small: var(--spacing-20);
666
+ --spacing-icon-medium: var(--spacing-24);
667
+ --spacing-icon-large: var(--spacing-32);
668
+ --spacing-icon-xlarge: var(--spacing-56);
669
+ --spacing-icon-2xlarge: var(--spacing-64);
670
+ --spacing-layout-p-standard: var(--spacing-50);
671
+ --spacing-layout-p-top: var(--spacing-56);
672
+ --spacing-layout-gap-web: 96px;
673
+ --spacing-layout-gap-standard: 120px;
674
+ --spacing-layout-p-bottom: var(--spacing-120);
675
+ }
676
+ }