@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

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 (104) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/amount-estimator.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
11
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
12
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
15
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -36,7 +36,7 @@
36
36
  width: 100%;
37
37
  height: auto;
38
38
  overflow-y: auto;
39
- padding: var(--_ctm-lt-pg);
39
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
40
40
  //Input button group
41
41
  .input__btn__group {
42
42
  display: flex;
@@ -57,148 +57,385 @@
57
57
  gap: 12px;
58
58
  padding-inline: 10px;
59
59
  height: 40px;
60
- background-color: var(--_ctm-dn-it-se-bd-cr);
60
+
61
+ background-color: var(
62
+ --_ctm-mob-dn-it-se-bd-cr,
63
+ var(--_ctm-tab-dn-it-se-bd-cr, var(--_ctm-dn-it-se-bd-cr))
64
+ );
65
+
61
66
  border-color: var(
62
67
  --_show-border-im-se,
63
- var(--_ctm-dn-it-se-br-cr, var(--_tst-dn-br-cr))
68
+ var(
69
+ --_ctm-mob-dn-it-se-br-cr,
70
+ var(--_ctm-tab-dn-it-se-br-cr, var(--_ctm-dn-it-se-br-cr))
71
+ )
64
72
  );
65
73
  border-style: var(
66
74
  --_show-border-im-se,
67
- var(--_ctm-dn-it-se-br-se, var(--_tst-dn-br-se))
75
+ var(
76
+ --_ctm-mob-dn-it-se-br-se,
77
+ var(--_ctm-tab-dn-it-se-br-se, var(--_ctm-dn-it-se-br-se))
78
+ )
68
79
  );
69
80
  border-width: var(
70
81
  --_show-border-im-se,
71
- var(--_ctm-dn-it-se-br-wh, var(--_tst-dn-br-wh))
82
+ var(
83
+ --_ctm-mob-dn-it-se-br-wh,
84
+ var(--_ctm-tab-dn-it-se-br-wh, var(--_ctm-dn-it-se-br-wh))
85
+ )
72
86
  );
73
- border-radius: var(--_ctm-dn-it-se-br-rs, var(--_tst-dn-br-rs));
87
+
88
+ border-radius: var(
89
+ --_ctm-mob-dn-it-se-br-rs,
90
+ var(--_ctm-tab-dn-it-se-br-rs, var(--_ctm-dn-it-se-br-rs, var(--_tst-dn-br-rs)))
91
+ );
92
+
74
93
  box-shadow: var(
75
94
  --_show-shadow-im-se,
76
- var(--_ctm-dn-it-se-sw-ae, var(--_tst-dn-sw-ae))
77
- var(--_ctm-dn-it-se-sw-br, var(--_tst-dn-sw-br))
78
- var(--_ctm-dn-it-se-sw-sd, var(--_tst-dn-sw-sd))
79
- var(--_ctm-dn-it-se-sw-cr, var(--_tst-dn-sw-cr))
95
+ var(
96
+ --_ctm-mob-dn-it-se-sw-ae,
97
+ var(--_ctm-tab-dn-it-se-sw-ae, var(--_ctm-dn-it-se-sw-ae))
98
+ )
99
+ var(
100
+ --_ctm-mob-dn-it-se-sw-br,
101
+ var(--_ctm-tab-dn-it-se-sw-br, var(--_ctm-dn-it-se-sw-br))
102
+ )
103
+ var(
104
+ --_ctm-mob-dn-it-se-sw-sd,
105
+ var(--_ctm-tab-dn-it-se-sw-sd, var(--_ctm-dn-it-se-sw-sd))
106
+ )
107
+ var(
108
+ --_ctm-mob-dn-it-se-sw-cr,
109
+ var(--_ctm-tab-dn-it-se-sw-cr, var(--_ctm-dn-it-se-sw-cr))
110
+ )
80
111
  );
112
+
81
113
  svg {
82
- width: var(--_ctm-dn-it-se-in-se);
83
- height: var(--_ctm-dn-it-se-in-se);
114
+ width: var(
115
+ --_ctm-mob-dn-it-se-in-se,
116
+ var(--_ctm-tab-dn-it-se-in-se, var(--_ctm-dn-it-se-in-se))
117
+ );
118
+ height: var(
119
+ --_ctm-mob-dn-it-se-in-se,
120
+ var(--_ctm-tab-dn-it-se-in-se, var(--_ctm-dn-it-se-in-se))
121
+ );
84
122
  path {
85
- stroke: var(--_ctm-dn-it-se-in-c1);
123
+ stroke: var(
124
+ --_ctm-mob-dn-it-se-in-c1,
125
+ var(--_ctm-tab-dn-it-se-in-c1, var(--_ctm-dn-it-se-in-c1))
126
+ );
86
127
  }
87
128
  }
129
+
88
130
  input[type="text"] {
89
131
  height: auto;
90
- color: var(--_ctm-dn-it-se-cr);
91
- font-family: var(--_ctm-dn-it-se-ft-fy), sans-serif;
92
- font-size: var(--_ctm-dn-it-se-ft-se);
93
- font-weight: var(--_ctm-dn-it-se-ft-wt);
94
- font-style: var(--_ctm-dn-it-se-ft-se-ic);
95
- text-align: var(--_ctm-dn-it-se-tt-an);
96
- letter-spacing: var(--_ctm-dn-it-se-lr-sg);
97
- line-height: var(--_ctm-dn-it-se-le-ht);
98
- text-decoration: var(--_ctm-dn-it-se-ue);
132
+ color: var(
133
+ --_ctm-mob-dn-it-se-cr,
134
+ var(--_ctm-tab-dn-it-se-cr, var(--_ctm-dn-it-se-cr))
135
+ );
136
+ font-family: var(
137
+ --_ctm-mob-dn-it-se-ft-fy,
138
+ var(--_ctm-tab-dn-it-se-ft-fy, var(--_ctm-dn-it-se-ft-fy))
139
+ ),
140
+ sans-serif;
141
+ font-size: var(
142
+ --_ctm-mob-dn-it-se-ft-se,
143
+ var(--_ctm-tab-dn-it-se-ft-se, var(--_ctm-dn-it-se-ft-se))
144
+ );
145
+ font-weight: var(
146
+ --_ctm-mob-dn-it-se-ft-wt,
147
+ var(--_ctm-tab-dn-it-se-ft-wt, var(--_ctm-dn-it-se-ft-wt))
148
+ );
149
+ font-style: var(
150
+ --_ctm-mob-dn-it-se-ft-se-ic,
151
+ var(--_ctm-tab-dn-it-se-ft-se-ic, var(--_ctm-dn-it-se-ft-se-ic))
152
+ );
153
+ text-align: var(
154
+ --_ctm-mob-dn-it-se-tt-an,
155
+ var(--_ctm-tab-dn-it-se-tt-an, var(--_ctm-dn-it-se-tt-an))
156
+ );
157
+ letter-spacing: var(
158
+ --_ctm-mob-dn-it-se-lr-sg,
159
+ var(--_ctm-tab-dn-it-se-lr-sg, var(--_ctm-dn-it-se-lr-sg))
160
+ );
161
+ line-height: var(
162
+ --_ctm-mob-dn-it-se-le-ht,
163
+ var(--_ctm-tab-dn-it-se-le-ht, var(--_ctm-dn-it-se-le-ht))
164
+ );
165
+ text-decoration: var(
166
+ --_ctm-mob-dn-it-se-ue,
167
+ var(--_ctm-tab-dn-it-se-ue, var(--_ctm-dn-it-se-ue))
168
+ );
99
169
  }
170
+
100
171
  input::placeholder {
101
- color: var(--_ctm-dn-it-se-cr);
102
- font-family: var(--_ctm-dn-it-se-ft-fy), sans-serif;
103
- font-size: var(--_ctm-dn-it-se-ft-se);
104
- font-weight: var(--_ctm-dn-it-se-ft-wt);
105
- font-style: var(--_ctm-dn-it-se-ft-se-ic);
106
- text-align: var(--_ctm-dn-it-se-tt-an);
107
- letter-spacing: var(--_ctm-dn-it-se-lr-sg);
108
- line-height: var(--_ctm-dn-it-se-le-ht);
109
- text-decoration: var(--_ctm-dn-it-se-ue);
172
+ color: var(
173
+ --_ctm-mob-dn-it-se-cr,
174
+ var(--_ctm-tab-dn-it-se-cr, var(--_ctm-dn-it-se-cr))
175
+ );
176
+ font-family: var(
177
+ --_ctm-mob-dn-it-se-ft-fy,
178
+ var(--_ctm-tab-dn-it-se-ft-fy, var(--_ctm-dn-it-se-ft-fy))
179
+ ),
180
+ sans-serif;
181
+ font-size: var(
182
+ --_ctm-mob-dn-it-se-ft-se,
183
+ var(--_ctm-tab-dn-it-se-ft-se, var(--_ctm-dn-it-se-ft-se))
184
+ );
185
+ font-weight: var(
186
+ --_ctm-mob-dn-it-se-ft-wt,
187
+ var(--_ctm-tab-dn-it-se-ft-wt, var(--_ctm-dn-it-se-ft-wt))
188
+ );
189
+ font-style: var(
190
+ --_ctm-mob-dn-it-se-ft-se-ic,
191
+ var(--_ctm-tab-dn-it-se-ft-se-ic, var(--_ctm-dn-it-se-ft-se-ic))
192
+ );
193
+ text-align: var(
194
+ --_ctm-mob-dn-it-se-tt-an,
195
+ var(--_ctm-tab-dn-it-se-tt-an, var(--_ctm-dn-it-se-tt-an))
196
+ );
197
+ letter-spacing: var(
198
+ --_ctm-mob-dn-it-se-lr-sg,
199
+ var(--_ctm-tab-dn-it-se-lr-sg, var(--_ctm-dn-it-se-lr-sg))
200
+ );
201
+ line-height: var(
202
+ --_ctm-mob-dn-it-se-le-ht,
203
+ var(--_ctm-tab-dn-it-se-le-ht, var(--_ctm-dn-it-se-le-ht))
204
+ );
205
+ text-decoration: var(
206
+ --_ctm-mob-dn-it-se-ue,
207
+ var(--_ctm-tab-dn-it-se-ue, var(--_ctm-dn-it-se-ue))
208
+ );
110
209
  }
111
210
  }
211
+
112
212
  .confirm__btn {
113
213
  cursor: pointer;
114
214
  display: flex;
115
215
  justify-content: center;
116
216
  align-items: center;
117
- background-color: #000080;
118
- color: #fff;
119
217
  padding: 8px;
120
218
  gap: 8px;
121
219
  width: 100%;
122
220
  height: 100%;
123
- background-color: var(--_ctm-dn-vw-os-bn-dt-se-bd-cr);
221
+
222
+ background-color: var(
223
+ --_ctm-mob-dn-vw-os-bn-dt-se-bd-cr,
224
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-bd-cr, var(--_ctm-dn-vw-os-bn-dt-se-bd-cr))
225
+ );
226
+ color: var(
227
+ --_ctm-mob-dn-vw-os-bn-dt-se-cr,
228
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-cr, var(--_ctm-dn-vw-os-bn-dt-se-cr))
229
+ );
230
+
124
231
  border-color: var(
125
232
  --_show-border-im-se,
126
- var(--_ctm-dn-vw-os-bn-dt-se-br-cr, var(--_tst-dn-br-cr))
233
+ var(
234
+ --_ctm-mob-dn-vw-os-bn-dt-se-br-cr,
235
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-br-cr, var(--_ctm-dn-vw-os-bn-dt-se-br-cr))
236
+ )
127
237
  );
128
238
  border-style: var(
129
239
  --_show-border-im-se,
130
- var(--_ctm-dn-vw-os-bn-dt-se-br-se, var(--_tst-dn-br-se))
240
+ var(
241
+ --_ctm-mob-dn-vw-os-bn-dt-se-br-se,
242
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-br-se, var(--_ctm-dn-vw-os-bn-dt-se-br-se))
243
+ )
131
244
  );
132
245
  border-width: var(
133
246
  --_show-border-im-se,
134
- var(--_ctm-dn-vw-os-bn-dt-se-br-wh, var(--_tst-dn-br-wh))
247
+ var(
248
+ --_ctm-mob-dn-vw-os-bn-dt-se-br-wh,
249
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-br-wh, var(--_ctm-dn-vw-os-bn-dt-se-br-wh))
250
+ )
135
251
  );
136
- border-radius: var(--_ctm-dn-vw-os-bn-dt-se-br-rs, var(--_tst-dn-br-rs));
252
+ border-radius: var(
253
+ --_ctm-mob-dn-vw-os-bn-dt-se-br-rs,
254
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-br-rs, var(--_ctm-dn-vw-os-bn-dt-se-br-rs))
255
+ );
256
+
137
257
  box-shadow: var(
138
258
  --_show-shadow-im-se,
139
- var(--_ctm-dn-vw-os-bn-dt-se-sw-ae, var(--_tst-dn-sw-ae))
140
- var(--_ctm-dn-vw-os-bn-dt-se-sw-br, var(--_tst-dn-sw-br))
141
- var(--_ctm-dn-vw-os-bn-dt-se-sw-sd, var(--_tst-dn-sw-sd))
142
- var(--_ctm-dn-vw-os-bn-dt-se-sw-cr, var(--_tst-dn-sw-cr))
259
+ var(
260
+ --_ctm-mob-dn-vw-os-bn-dt-se-sw-ae,
261
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-sw-ae, var(--_ctm-dn-vw-os-bn-dt-se-sw-ae))
262
+ )
263
+ var(
264
+ --_ctm-mob-dn-vw-os-bn-dt-se-sw-br,
265
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-sw-br, var(--_ctm-dn-vw-os-bn-dt-se-sw-br))
266
+ )
267
+ var(
268
+ --_ctm-mob-dn-vw-os-bn-dt-se-sw-sd,
269
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-sw-sd, var(--_ctm-dn-vw-os-bn-dt-se-sw-sd))
270
+ )
271
+ var(
272
+ --_ctm-mob-dn-vw-os-bn-dt-se-sw-cr,
273
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-sw-cr, var(--_ctm-dn-vw-os-bn-dt-se-sw-cr))
274
+ )
275
+ );
276
+
277
+ font-family: var(
278
+ --_ctm-mob-dn-vw-os-bn-dt-se-ft-fy,
279
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-ft-fy, var(--_ctm-dn-vw-os-bn-dt-se-ft-fy))
280
+ ),
281
+ sans-serif;
282
+ font-size: var(
283
+ --_ctm-mob-dn-vw-os-bn-dt-se-ft-se,
284
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-ft-se, var(--_ctm-dn-vw-os-bn-dt-se-ft-se))
285
+ );
286
+ font-weight: var(
287
+ --_ctm-mob-dn-vw-os-bn-dt-se-ft-wt,
288
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-ft-wt, var(--_ctm-dn-vw-os-bn-dt-se-ft-wt))
289
+ );
290
+ font-style: var(
291
+ --_ctm-mob-dn-vw-os-bn-dt-se-ft-se-ic,
292
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-ft-se-ic, var(--_ctm-dn-vw-os-bn-dt-se-ft-se-ic))
293
+ );
294
+ text-align: var(
295
+ --_ctm-mob-dn-vw-os-bn-dt-se-tt-an,
296
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-tt-an, var(--_ctm-dn-vw-os-bn-dt-se-tt-an))
143
297
  );
144
- color: var(--_ctm-dn-vw-os-bn-dt-se-cr);
145
- font-family: var(--_ctm-dn-vw-os-bn-dt-se-ft-fy), sans-serif;
146
- font-size: var(--_ctm-dn-vw-os-bn-dt-se-ft-se);
147
- font-weight: var(--_ctm-dn-vw-os-bn-dt-se-ft-wt);
148
- font-style: var(--_ctm-dn-vw-os-bn-dt-se-ft-se-ic);
149
- text-align: var(--_ctm-dn-vw-os-bn-dt-se-tt-an);
150
- letter-spacing: var(--_ctm-dn-vw-os-bn-dt-se-lr-sg);
151
- line-height: var(--_ctm-dn-vw-os-bn-dt-se-le-ht);
152
- text-decoration: var(--_ctm-dn-vw-os-bn-dt-se-ue);
298
+ letter-spacing: var(
299
+ --_ctm-mob-dn-vw-os-bn-dt-se-lr-sg,
300
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-lr-sg, var(--_ctm-dn-vw-os-bn-dt-se-lr-sg))
301
+ );
302
+ line-height: var(
303
+ --_ctm-mob-dn-vw-os-bn-dt-se-le-ht,
304
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-le-ht, var(--_ctm-dn-vw-os-bn-dt-se-le-ht))
305
+ );
306
+ text-decoration: var(
307
+ --_ctm-mob-dn-vw-os-bn-dt-se-ue,
308
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-ue, var(--_ctm-dn-vw-os-bn-dt-se-ue))
309
+ );
310
+
153
311
  svg {
154
- width: var(--_ctm-dn-vw-os-bn-dt-se-in-se, var(--_ctm-dn-vw-os-bn-dt-se-in-ad-tt-sg));
312
+ width: var(
313
+ --_ctm-mob-dn-vw-os-bn-dt-se-in-se,
314
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-in-se, var(--_ctm-dn-vw-os-bn-dt-se-in-se))
315
+ );
155
316
  height: var(
156
- --_ctm-dn-vw-os-bn-dt-se-in-se,
157
- var(--_ctm-dn-vw-os-bn-dt-se-in-ad-tt-sg)
317
+ --_ctm-mob-dn-vw-os-bn-dt-se-in-se,
318
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-in-se, var(--_ctm-dn-vw-os-bn-dt-se-in-se))
158
319
  );
159
320
  path {
160
- stroke: var(--_ctm-dn-vw-os-bn-dt-se-in-c1);
321
+ stroke: var(
322
+ --_ctm-mob-dn-vw-os-bn-dt-se-in-c1,
323
+ var(--_ctm-tab-dn-vw-os-bn-dt-se-in-c1, var(--_ctm-dn-vw-os-bn-dt-se-in-c1))
324
+ );
161
325
  }
162
326
  }
163
327
  &:hover {
164
- // padding: 8px;
165
- // width: 300px;
166
- // height: 100%;
167
- background-color: var(--_ctm-dn-vw-os-bn-hr-se-bd-cr);
328
+ background-color: var(
329
+ --_ctm-mob-dn-vw-os-bn-hr-se-bd-cr,
330
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-bd-cr, var(--_ctm-dn-vw-os-bn-hr-se-bd-cr))
331
+ );
332
+
168
333
  border-color: var(
169
334
  --_show-border-im-se,
170
- var(--_ctm-dn-vw-os-bn-hr-se-br-cr, var(--_tst-dn-br-cr))
335
+ var(
336
+ --_ctm-mob-dn-vw-os-bn-hr-se-br-cr,
337
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-br-cr, var(--_ctm-dn-vw-os-bn-hr-se-br-cr))
338
+ )
171
339
  );
172
340
  border-style: var(
173
341
  --_show-border-im-se,
174
- var(--_ctm-dn-vw-os-bn-hr-se-br-se, var(--_tst-dn-br-se))
342
+ var(
343
+ --_ctm-mob-dn-vw-os-bn-hr-se-br-se,
344
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-br-se, var(--_ctm-dn-vw-os-bn-hr-se-br-se))
345
+ )
175
346
  );
176
347
  border-width: var(
177
348
  --_show-border-im-se,
178
- var(--_ctm-dn-vw-os-bn-hr-se-br-wh, var(--_tst-dn-br-wh))
349
+ var(
350
+ --_ctm-mob-dn-vw-os-bn-hr-se-br-wh,
351
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-br-wh, var(--_ctm-dn-vw-os-bn-hr-se-br-wh))
352
+ )
353
+ );
354
+ border-radius: var(
355
+ --_ctm-mob-dn-vw-os-bn-hr-se-br-rs,
356
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-br-rs, var(--_ctm-dn-vw-os-bn-hr-se-br-rs))
179
357
  );
180
- border-radius: var(--_ctm-dn-vw-os-bn-hr-se-br-rs, var(--_tst-dn-br-rs));
358
+
181
359
  box-shadow: var(
182
360
  --_show-shadow-im-se,
183
- var(--_ctm-dn-vw-os-bn-hr-se-sw-ae, var(--_tst-dn-sw-ae))
184
- var(--_ctm-dn-vw-os-bn-hr-se-sw-br, var(--_tst-dn-sw-br))
185
- var(--_ctm-dn-vw-os-bn-hr-se-sw-sd, var(--_tst-dn-sw-sd))
186
- var(--_ctm-dn-vw-os-bn-hr-se-sw-cr, var(--_tst-dn-sw-cr))
187
- );
188
- color: var(--_ctm-dn-vw-os-bn-hr-se-cr);
189
- font-family: var(--_ctm-dn-vw-os-bn-hr-se-ft-fy), sans-serif;
190
- font-size: var(--_ctm-dn-vw-os-bn-hr-se-ft-se);
191
- font-weight: var(--_ctm-dn-vw-os-bn-hr-se-ft-wt);
192
- font-style: var(--_ctm-dn-vw-os-bn-hr-se-ft-se-ic);
193
- text-align: var(--_ctm-dn-vw-os-bn-hr-se-tt-an);
194
- letter-spacing: var(--_ctm-dn-vw-os-bn-hr-se-lr-sg);
195
- line-height: var(--_ctm-dn-vw-os-bn-hr-se-le-ht);
196
- text-decoration: var(--_ctm-dn-vw-os-bn-hr-se-ue);
361
+ var(
362
+ --_ctm-mob-dn-vw-os-bn-hr-se-sw-ae,
363
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-sw-ae, var(--_ctm-dn-vw-os-bn-hr-se-sw-ae))
364
+ )
365
+ var(
366
+ --_ctm-mob-dn-vw-os-bn-hr-se-sw-br,
367
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-sw-br, var(--_ctm-dn-vw-os-bn-hr-se-sw-br))
368
+ )
369
+ var(
370
+ --_ctm-mob-dn-vw-os-bn-hr-se-sw-sd,
371
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-sw-sd, var(--_ctm-dn-vw-os-bn-hr-se-sw-sd))
372
+ )
373
+ var(
374
+ --_ctm-mob-dn-vw-os-bn-hr-se-sw-cr,
375
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-sw-cr, var(--_ctm-dn-vw-os-bn-hr-se-sw-cr))
376
+ )
377
+ );
378
+
379
+ color: var(
380
+ --_ctm-mob-dn-vw-os-bn-hr-se-cr,
381
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-cr, var(--_ctm-dn-vw-os-bn-hr-se-cr))
382
+ );
383
+
384
+ font-family: var(
385
+ --_ctm-mob-dn-vw-os-bn-hr-se-ft-fy,
386
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-ft-fy, var(--_ctm-dn-vw-os-bn-hr-se-ft-fy))
387
+ ),
388
+ sans-serif;
389
+
390
+ font-size: var(
391
+ --_ctm-mob-dn-vw-os-bn-hr-se-ft-se,
392
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-ft-se, var(--_ctm-dn-vw-os-bn-hr-se-ft-se))
393
+ );
394
+
395
+ font-weight: var(
396
+ --_ctm-mob-dn-vw-os-bn-hr-se-ft-wt,
397
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-ft-wt, var(--_ctm-dn-vw-os-bn-hr-se-ft-wt))
398
+ );
399
+
400
+ font-style: var(
401
+ --_ctm-mob-dn-vw-os-bn-hr-se-ft-se-ic,
402
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-ft-se-ic, var(--_ctm-dn-vw-os-bn-hr-se-ft-se-ic))
403
+ );
404
+
405
+ text-align: var(
406
+ --_ctm-mob-dn-vw-os-bn-hr-se-tt-an,
407
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-tt-an, var(--_ctm-dn-vw-os-bn-hr-se-tt-an))
408
+ );
409
+
410
+ letter-spacing: var(
411
+ --_ctm-mob-dn-vw-os-bn-hr-se-lr-sg,
412
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-lr-sg, var(--_ctm-dn-vw-os-bn-hr-se-lr-sg))
413
+ );
414
+
415
+ line-height: var(
416
+ --_ctm-mob-dn-vw-os-bn-hr-se-le-ht,
417
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-le-ht, var(--_ctm-dn-vw-os-bn-hr-se-le-ht))
418
+ );
419
+
420
+ text-decoration: var(
421
+ --_ctm-mob-dn-vw-os-bn-hr-se-ue,
422
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-ue, var(--_ctm-dn-vw-os-bn-hr-se-ue))
423
+ );
424
+
197
425
  svg {
198
- width: var(--_ctm-dn-vw-os-bn-hr-se-in-se);
199
- height: var(--_ctm-dn-vw-os-bn-hr-se-in-se);
426
+ width: var(
427
+ --_ctm-mob-dn-vw-os-bn-hr-se-in-se,
428
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-in-se, var(--_ctm-dn-vw-os-bn-hr-se-in-se))
429
+ );
430
+ height: var(
431
+ --_ctm-mob-dn-vw-os-bn-hr-se-in-se,
432
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-in-se, var(--_ctm-dn-vw-os-bn-hr-se-in-se))
433
+ );
200
434
  path {
201
- stroke: var(--_ctm-dn-vw-os-bn-hr-se-in-c1);
435
+ stroke: var(
436
+ --_ctm-mob-dn-vw-os-bn-hr-se-in-c1,
437
+ var(--_ctm-tab-dn-vw-os-bn-hr-se-in-c1, var(--_ctm-dn-vw-os-bn-hr-se-in-c1))
438
+ );
202
439
  }
203
440
  }
204
441
  }
@@ -223,15 +460,52 @@
223
460
  cursor: pointer;
224
461
  font-weight: 600;
225
462
  color: var(--_primary-400);
226
- color: var(--_ctm-dn-wt-tt-ss-cr);
227
- font-family: var(--_ctm-dn-wt-tt-ss-ft-fy), sans-serif;
228
- font-size: var(--_ctm-dn-wt-tt-ss-ft-se);
229
- font-weight: var(--_ctm-dn-wt-tt-ss-ft-wt);
230
- font-style: var(--_ctm-dn-wt-tt-ss-ft-se-ic);
231
- text-align: var(--_ctm-dn-wt-tt-ss-tt-an);
232
- letter-spacing: var(--_ctm-dn-wt-tt-ss-lr-sg);
233
- line-height: var(--_ctm-dn-wt-tt-ss-le-ht);
234
- text-decoration: var(--_ctm-dn-wt-tt-ss-ue);
463
+ color: var(
464
+ --_ctm-mob-dn-wt-tt-ss-cr,
465
+ var(--_ctm-tab-dn-wt-tt-ss-cr, var(--_ctm-dn-wt-tt-ss-cr))
466
+ );
467
+
468
+ font-family: var(
469
+ --_ctm-mob-dn-wt-tt-ss-ft-fy,
470
+ var(--_ctm-tab-dn-wt-tt-ss-ft-fy, var(--_ctm-dn-wt-tt-ss-ft-fy))
471
+ ),
472
+ sans-serif;
473
+
474
+ font-size: var(
475
+ --_ctm-mob-dn-wt-tt-ss-ft-se,
476
+ var(--_ctm-tab-dn-wt-tt-ss-ft-se, var(--_ctm-dn-wt-tt-ss-ft-se))
477
+ );
478
+
479
+ font-weight: var(
480
+ --_ctm-mob-dn-wt-tt-ss-ft-wt,
481
+ var(--_ctm-tab-dn-wt-tt-ss-ft-wt, var(--_ctm-dn-wt-tt-ss-ft-wt))
482
+ );
483
+
484
+ font-style: var(
485
+ --_ctm-mob-dn-wt-tt-ss-ft-se-ic,
486
+ var(--_ctm-tab-dn-wt-tt-ss-ft-se-ic, var(--_ctm-dn-wt-tt-ss-ft-se-ic))
487
+ );
488
+
489
+ text-align: var(
490
+ --_ctm-mob-dn-wt-tt-ss-tt-an,
491
+ var(--_ctm-tab-dn-wt-tt-ss-tt-an, var(--_ctm-dn-wt-tt-ss-tt-an))
492
+ );
493
+
494
+ letter-spacing: var(
495
+ --_ctm-mob-dn-wt-tt-ss-lr-sg,
496
+ var(--_ctm-tab-dn-wt-tt-ss-lr-sg, var(--_ctm-dn-wt-tt-ss-lr-sg))
497
+ );
498
+
499
+ line-height: var(
500
+ --_ctm-mob-dn-wt-tt-ss-le-ht,
501
+ var(--_ctm-tab-dn-wt-tt-ss-le-ht, var(--_ctm-dn-wt-tt-ss-le-ht))
502
+ );
503
+
504
+ text-decoration: var(
505
+ --_ctm-mob-dn-wt-tt-ss-ue,
506
+ var(--_ctm-tab-dn-wt-tt-ss-ue, var(--_ctm-dn-wt-tt-ss-ue))
507
+ );
508
+
235
509
  button {
236
510
  svg {
237
511
  path {
@@ -241,19 +515,97 @@
241
515
  }
242
516
  }
243
517
  .form__title {
244
- font-size: 18px;
245
- font-weight: 600;
246
- color: var(--_gray-800);
247
518
  margin-top: 12px;
248
- color: var(--_ctm-dn-wt-tt-ss-cr-dc);
249
- font-family: var(--_ctm-dn-wt-tt-ss-ft-fy-dc), sans-serif;
250
- font-size: var(--_ctm-dn-wt-tt-ss-ft-se-dc);
251
- font-weight: var(--_ctm-dn-wt-tt-ss-ft-wt-dc);
252
- font-style: var(--_ctm-dn-wt-tt-ss-ft-se-ic-dc);
253
- text-align: var(--_ctm-dn-wt-tt-ss-tt-an-dc);
254
- letter-spacing: var(--_ctm-dn-wt-tt-ss-lr-sg-dc);
255
- line-height: var(--_ctm-dn-wt-tt-ss-le-ht-dc);
256
- text-decoration: var(--_ctm-dn-wt-tt-ss-ue-dc);
519
+
520
+ color: var(
521
+ --_ctm-mob-dn-wt-tt-ss-cr-dc,
522
+ var(--_ctm-tab-dn-wt-tt-ss-cr-dc, var(--_ctm-dn-wt-tt-ss-cr-dc))
523
+ );
524
+
525
+ font-family: var(
526
+ --_ctm-mob-dn-wt-tt-ss-ft-fy-dc,
527
+ var(--_ctm-tab-dn-wt-tt-ss-ft-fy-dc, var(--_ctm-dn-wt-tt-ss-ft-fy-dc))
528
+ ),
529
+ sans-serif;
530
+
531
+ font-size: var(
532
+ --_ctm-mob-dn-wt-tt-ss-ft-se-dc,
533
+ var(--_ctm-tab-dn-wt-tt-ss-ft-se-dc, var(--_ctm-dn-wt-tt-ss-ft-se-dc))
534
+ );
535
+
536
+ font-weight: var(
537
+ --_ctm-mob-dn-wt-tt-ss-ft-wt-dc,
538
+ var(--_ctm-tab-dn-wt-tt-ss-ft-wt-dc, var(--_ctm-dn-wt-tt-ss-ft-wt-dc))
539
+ );
540
+
541
+ font-style: var(
542
+ --_ctm-mob-dn-wt-tt-ss-ft-se-ic-dc,
543
+ var(--_ctm-tab-dn-wt-tt-ss-ft-se-ic-dc, var(--_ctm-dn-wt-tt-ss-ft-se-ic-dc))
544
+ );
545
+
546
+ text-align: var(
547
+ --_ctm-mob-dn-wt-tt-ss-tt-an-dc,
548
+ var(--_ctm-tab-dn-wt-tt-ss-tt-an-dc, var(--_ctm-dn-wt-tt-ss-tt-an-dc))
549
+ );
550
+
551
+ letter-spacing: var(
552
+ --_ctm-mob-dn-wt-tt-ss-lr-sg-dc,
553
+ var(--_ctm-tab-dn-wt-tt-ss-lr-sg-dc, var(--_ctm-dn-wt-tt-ss-lr-sg-dc))
554
+ );
555
+
556
+ line-height: var(
557
+ --_ctm-mob-dn-wt-tt-ss-le-ht-dc,
558
+ var(--_ctm-tab-dn-wt-tt-ss-le-ht-dc, var(--_ctm-dn-wt-tt-ss-le-ht-dc))
559
+ );
560
+
561
+ text-decoration: var(
562
+ --_ctm-mob-dn-wt-tt-ss-ue-dc,
563
+ var(--_ctm-tab-dn-wt-tt-ss-ue-dc, var(--_ctm-dn-wt-tt-ss-ue-dc))
564
+ );
565
+ }
566
+ .est__dropdown {
567
+ & > button {
568
+ width: 100%;
569
+ & > span:last-child {
570
+ position: absolute;
571
+ top: 30;
572
+ right: 8;
573
+ }
574
+ }
575
+ }
576
+ .input__div {
577
+ margin-top: 10px;
578
+ display: flex;
579
+ flex-direction: column;
580
+ gap: 6px;
581
+ label {
582
+ font-size: 14px;
583
+ color: var(--_gray-700);
584
+ margin-bottom: 8px;
585
+ display: block;
586
+ }
587
+
588
+ input {
589
+ width: 100%;
590
+ padding: 6px 5px;
591
+ border: 1px solid var(--_gray-400);
592
+ border-radius: 6px;
593
+ font-size: 1rem;
594
+ font-family: inherit;
595
+ transition:
596
+ border-color 0.2s ease,
597
+ box-shadow 0.2s ease;
598
+ }
599
+
600
+ input:focus {
601
+ border-color: #4f46e5; /* Indigo */
602
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
603
+ outline: none;
604
+ }
605
+ .error__message {
606
+ color: red;
607
+ font-size: 12px;
608
+ }
257
609
  }
258
610
  }
259
611
  .payment__methods {
@@ -266,37 +618,67 @@
266
618
  margin: 16px;
267
619
  padding-bottom: 10px;
268
620
  margin-bottom: 0px;
269
- color: var(--_primary-400);
270
- color: var(--_ctm-dn-sg-ne-cr);
271
- font-family: var(--_ctm-dn-sg-ne-ft-fy), sans-serif;
272
- font-size: var(--_ctm-dn-sg-ne-ft-se);
273
- font-weight: var(--_ctm-dn-sg-ne-ft-wt);
274
- font-style: var(--_ctm-dn-it-se-ft-se-ic);
275
- text-align: var(--_ctm-dn-sg-ne-tt-an);
276
- letter-spacing: var(--_ctm-dn-it-se-lr-sg);
277
- line-height: var(--_ctm-dn-sg-ne-le-ht);
278
- text-decoration: var(--_ctm-dn-wt-tt-ss-ue-dc);
621
+ color: var(
622
+ --_ctm-mob-dn-sg-ne-cr,
623
+ var(--_ctm-tab-dn-sg-ne-cr, var(--_ctm-dn-sg-ne-cr))
624
+ );
625
+ font-family: var(
626
+ --_ctm-mob-dn-sg-ne-ft-fy,
627
+ var(--_ctm-tab-dn-sg-ne-ft-fy, var(--_ctm-dn-sg-ne-ft-fy))
628
+ ),
629
+ sans-serif;
630
+ font-size: var(
631
+ --_ctm-mob-dn-sg-ne-ft-se,
632
+ var(--_ctm-tab-dn-sg-ne-ft-se, var(--_ctm-dn-sg-ne-ft-se))
633
+ );
634
+ font-weight: var(
635
+ --_ctm-mob-dn-sg-ne-ft-wt,
636
+ var(--_ctm-tab-dn-sg-ne-ft-wt, var(--_ctm-dn-sg-ne-ft-wt))
637
+ );
638
+ font-style: var(
639
+ --_ctm-mob-dn-it-se-ft-se-ic,
640
+ var(--_ctm-tab-dn-it-se-ft-se-ic, var(--_ctm-dn-it-se-ft-se-ic))
641
+ );
642
+ text-align: var(
643
+ --_ctm-mob-dn-sg-ne-tt-an,
644
+ var(--_ctm-tab-dn-sg-ne-tt-an, var(--_ctm-dn-sg-ne-tt-an))
645
+ );
646
+ letter-spacing: var(
647
+ --_ctm-mob-dn-it-se-lr-sg,
648
+ var(--_ctm-tab-dn-it-se-lr-sg, var(--_ctm-dn-it-se-lr-sg))
649
+ );
650
+ line-height: var(
651
+ --_ctm-mob-dn-sg-ne-le-ht,
652
+ var(--_ctm-tab-dn-sg-ne-le-ht, var(--_ctm-dn-sg-ne-le-ht))
653
+ );
654
+ text-decoration: var(
655
+ --_ctm-mob-dn-wt-tt-ss-ue-dc,
656
+ var(--_ctm-tab-dn-wt-tt-ss-ue-dc, var(--_ctm-dn-wt-tt-ss-ue-dc))
657
+ );
279
658
  }
659
+
280
660
  .stack {
281
661
  display: grid;
282
662
  background-color: #fff;
283
663
  &.stack__vertical {
284
664
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
285
- gap: var(--_ctm-lt-im-sg);
286
- padding: var(--_ctm-lt-im-pg);
665
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
666
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
287
667
  }
288
668
  &.stack__horizontal {
289
669
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
290
- gap: var(--_ctm-lt-im-sg);
291
- padding: var(--_ctm-lt-im-pg);
670
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
671
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
292
672
  background-color: #fff;
293
673
  }
294
674
  &.grid {
295
675
  display: grid;
296
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
297
- // grid-template-columns: repeat(2, minmax(auto, 1fr));
298
- gap: var(--_ctm-lt-im-sg);
299
- padding: var(--_ctm-lt-im-pg);
676
+ grid-template-columns: repeat(
677
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
678
+ minmax(auto, 1fr)
679
+ );
680
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
681
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
300
682
  }
301
683
  .item {
302
684
  display: flex;
@@ -304,28 +686,64 @@
304
686
  align-items: center;
305
687
  cursor: pointer;
306
688
  background-color: var(--_primary-25);
307
- padding: var(--_ctm-dn-im-se-vl-pg) var(--_ctm-dn-im-se-hl-pg);
308
689
  flex-wrap: wrap;
309
- background-color: var(--_ctm-dn-im-se-bd-cr);
690
+ padding: var(
691
+ --_ctm-mob-dn-im-se-vl-pg,
692
+ var(--_ctm-tab-dn-im-se-vl-pg, var(--_ctm-dn-im-se-vl-pg))
693
+ )
694
+ var(
695
+ --_ctm-mob-dn-im-se-hl-pg,
696
+ var(--_ctm-tab-dn-im-se-hl-pg, var(--_ctm-dn-im-se-hl-pg))
697
+ );
698
+ background-color: var(
699
+ --_ctm-mob-dn-im-se-bd-cr,
700
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
701
+ );
702
+
310
703
  border-color: var(
311
704
  --_show-border-im-se,
312
- var(--_ctm-dn-im-se-br-cr, var(--_tst-dn-br-cr))
705
+ var(
706
+ --_ctm-mob-dn-im-se-br-cr,
707
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
708
+ )
313
709
  );
314
710
  border-style: var(
315
711
  --_show-border-im-se,
316
- var(--_ctm-dn-im-se-br-se, var(--_tst-dn-br-se))
712
+ var(
713
+ --_ctm-mob-dn-im-se-br-se,
714
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
715
+ )
317
716
  );
318
717
  border-width: var(
319
718
  --_show-border-im-se,
320
- var(--_ctm-dn-im-se-br-wh, var(--_tst-dn-br-wh))
719
+ var(
720
+ --_ctm-mob-dn-im-se-br-wh,
721
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
722
+ )
321
723
  );
322
- border-radius: var(--_ctm-dn-im-se-br-rs, var(--_tst-dn-br-rs));
724
+ border-radius: var(
725
+ --_ctm-mob-dn-im-se-br-rs,
726
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
727
+ );
728
+
323
729
  box-shadow: var(
324
730
  --_show-shadow-im-se,
325
- var(--_ctm-dn-im-se-sw-ae, var(--_tst-dn-sw-ae))
326
- var(--_ctm-dn-im-se-sw-br, var(--_tst-dn-sw-br))
327
- var(--_ctm-dn-im-se-sw-sd, var(--_tst-dn-sw-sd))
328
- var(--_ctm-dn-im-se-sw-cr, var(--_tst-dn-sw-cr))
731
+ var(
732
+ --_ctm-mob-dn-im-se-sw-ae,
733
+ var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
734
+ )
735
+ var(
736
+ --_ctm-mob-dn-im-se-sw-br,
737
+ var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
738
+ )
739
+ var(
740
+ --_ctm-mob-dn-im-se-sw-sd,
741
+ var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
742
+ )
743
+ var(
744
+ --_ctm-mob-dn-im-se-sw-cr,
745
+ var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
746
+ )
329
747
  );
330
748
  .left__col {
331
749
  display: inline-block;
@@ -344,7 +762,10 @@
344
762
  gap: 16px;
345
763
  font-weight: 500;
346
764
  flex-wrap: wrap;
347
- justify-content: var(--_ctm-dn-im-se-ct-at);
765
+ justify-content: var(
766
+ --_ctm-mob-dn-im-se-ct-at,
767
+ var(--_ctm-tab-dn-im-se-ct-at, var(--_ctm-dn-im-se-ct-at))
768
+ );
348
769
 
349
770
  span {
350
771
  line-height: 12px;
@@ -353,16 +774,55 @@
353
774
  .card {
354
775
  width: 60px;
355
776
  height: 50px;
356
- background-color: var(--_ctm-dn-sg-md-lo-bd-cr);
357
- border-color: var(--_ctm-dn-sg-md-lo-br-cr);
358
- border-style: var(--_ctm-dn-sg-md-lo-br-se);
359
- border-width: var(--_ctm-dn-sg-md-lo-br-wh);
360
- border-radius: var(--_ctm-dn-sg-md-lo-br-rs);
777
+ background-color: var(
778
+ --_ctm-mob-dn-sg-md-lo-bd-cr,
779
+ var(--_ctm-tab-dn-sg-md-lo-bd-cr, var(--_ctm-dn-sg-md-lo-bd-cr))
780
+ );
781
+ border-color: var(
782
+ --_ctm-mob-dn-sg-md-lo-br-cr,
783
+ var(--_ctm-tab-dn-sg-md-lo-br-cr, var(--_ctm-dn-sg-md-lo-br-cr))
784
+ );
785
+ border-style: var(
786
+ --_ctm-mob-dn-sg-md-lo-br-se,
787
+ var(--_ctm-tab-dn-sg-md-lo-br-se, var(--_ctm-dn-sg-md-lo-br-se))
788
+ );
789
+ border-width: var(
790
+ --_ctm-mob-dn-sg-md-lo-br-wh,
791
+ var(--_ctm-tab-dn-sg-md-lo-br-wh, var(--_ctm-dn-sg-md-lo-br-wh))
792
+ );
793
+ border-radius: var(
794
+ --_ctm-mob-dn-sg-md-lo-br-rs,
795
+ var(--_ctm-tab-dn-sg-md-lo-br-rs, var(--_ctm-dn-sg-md-lo-br-rs))
796
+ );
361
797
  box-shadow: var(
362
- var(--_ctm-dn-sg-md-lo-sw-ae, var(--_tst-dn-sw-ae))
363
- var(--_ctm-dn-sg-md-lo-sw-br, var(--_tst-dn-sw-br))
364
- var(--_ctm-dn-sg-md-lo-sw-sd, var(--_tst-dn-sw-sd))
365
- var(--_ctm-dn-sg-md-lo-sw-cr, var(--_tst-dn-sw-cr))
798
+ var(
799
+ --_ctm-mob-dn-sg-md-lo-sw-ae,
800
+ var(
801
+ --_ctm-tab-dn-sg-md-lo-sw-ae,
802
+ var(--_ctm-dn-sg-md-lo-sw-ae, var(--_tst-dn-sw-ae))
803
+ )
804
+ )
805
+ var(
806
+ --_ctm-mob-dn-sg-md-lo-sw-br,
807
+ var(
808
+ --_ctm-tab-dn-sg-md-lo-sw-br,
809
+ var(--_ctm-dn-sg-md-lo-sw-br, var(--_tst-dn-sw-br))
810
+ )
811
+ )
812
+ var(
813
+ --_ctm-mob-dn-sg-md-lo-sw-sd,
814
+ var(
815
+ --_ctm-tab-dn-sg-md-lo-sw-sd,
816
+ var(--_ctm-dn-sg-md-lo-sw-sd, var(--_tst-dn-sw-sd))
817
+ )
818
+ )
819
+ var(
820
+ --_ctm-mob-dn-sg-md-lo-sw-cr,
821
+ var(
822
+ --_ctm-tab-dn-sg-md-lo-sw-cr,
823
+ var(--_ctm-dn-sg-md-lo-sw-cr, var(--_tst-dn-sw-cr))
824
+ )
825
+ )
366
826
  );
367
827
  }
368
828
  }
@@ -372,41 +832,59 @@
372
832
  width: 100%;
373
833
  border-collapse: collapse;
374
834
  border-radius: 6px;
375
- background-color: var(--_ctm-dn-te-bd-cr);
835
+ background-color: var(
836
+ --_ctm-mob-dn-te-bd-cr,
837
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
838
+ );
376
839
  border-color: var(
377
840
  --_show-border-im-se,
378
- var(--_ctm-dn-te-br-cr, var(--_tst-dn-br-cr))
841
+ var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)))
379
842
  );
380
843
  border-style: var(
381
844
  --_show-border-im-se,
382
- var(--_ctm-dn-te-br-se, var(--_tst-dn-br-se))
845
+ var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)))
383
846
  );
384
847
  border-width: var(
385
848
  --_show-border-im-se,
386
- var(--_ctm-dn-te-br-wh, var(--_tst-dn-br-wh))
849
+ var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)))
850
+ );
851
+ border-radius: var(
852
+ --_ctm-mob-dn-te-br-rs,
853
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
387
854
  );
388
- border-radius: var(--_ctm-dn-te-br-rs, var(--_tst-dn-br-rs));
389
855
  box-shadow: var(
390
856
  --_show-shadow-im-se,
391
- var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae))
392
- var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br))
393
- var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd))
394
- var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr))
857
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
858
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
859
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
860
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
395
861
  );
396
862
  &[data-header-divider="true"] {
397
863
  thead tr th {
398
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
864
+ border-bottom: 1px solid
865
+ var(
866
+ --_ctm-mob-dn-rw-ds-hr-dr,
867
+ var(--_ctm-tab-dn-rw-ds-hr-dr, var(--_ctm-dn-rw-ds-hr-dr))
868
+ );
399
869
  }
400
870
  }
401
871
  &[data-row-divider="true"] {
402
872
  tbody tr td {
403
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
873
+ border-bottom: 1px solid
874
+ var(
875
+ --_ctm-mob-dn-rw-ds-rw-dr,
876
+ var(--_ctm-tab-dn-rw-ds-rw-dr, var(--_ctm-dn-rw-ds-rw-dr))
877
+ );
404
878
  }
405
879
  }
406
880
  &[data-column-divider="true"] {
407
881
  tbody tr td,
408
882
  thead tr th {
409
- border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
883
+ border-right: 1px solid
884
+ var(
885
+ --_ctm-mob-dn-rw-ds-cn-dr,
886
+ var(--_ctm-tab-dn-rw-ds-cn-dr, var(--_ctm-dn-rw-ds-cn-dr))
887
+ );
410
888
  }
411
889
 
412
890
  tbody tr td:last-child,
@@ -421,53 +899,121 @@
421
899
  }
422
900
  }
423
901
  thead {
424
- height: var(--_ctm-lt-hr-ht);
902
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-dn-lt-hr-ht)));
425
903
  tr {
426
904
  th {
427
- padding: var(--_ctm-lt-hr-cl-pg);
428
- text-align: var(--_ctm-lt-ct-at);
905
+ padding: var(
906
+ --_ctm-mob-lt-hr-cl-pg,
907
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-dn-lt-hr-cl-pg))
908
+ );
909
+ text-align: var(
910
+ --_ctm-mob-lt-ct-at,
911
+ var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at))
912
+ );
429
913
  border: 0;
430
- background-color: var(--_ctm-dn-te-hr-bd-cr);
431
- color: var(--_ctm-dn-hr-tt-cr);
432
- font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
433
- font-size: var(--_ctm-dn-hr-tt-ft-se);
434
- font-weight: var(--_ctm-dn-hr-tt-ft-wt);
435
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
436
- text-align: var(--_ctm-dn-hr-tt-tt-an);
437
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
438
- line-height: var(--_ctm-dn-hr-tt-le-ht);
439
- text-decoration: var(--_ctm-dn-hr-tt-ue);
914
+ background-color: var(
915
+ --_ctm-mob-dn-te-hr-bd-cr,
916
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
917
+ );
918
+ color: var(
919
+ --_ctm-mob-dn-hr-tt-cr,
920
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
921
+ );
922
+ font-family: var(
923
+ --_ctm-mob-dn-hr-tt-ft-fy,
924
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)),
925
+ sans-serif
926
+ );
927
+ font-size: var(
928
+ --_ctm-mob-dn-hr-tt-ft-se,
929
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
930
+ );
931
+ font-weight: var(
932
+ --_ctm-mob-dn-hr-tt-ft-wt,
933
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
934
+ );
935
+ font-style: var(
936
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
937
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
938
+ );
939
+ text-align: var(
940
+ --_ctm-mob-dn-hr-tt-tt-an,
941
+ var(--_ctm-tab-dn-hr-tt-an, var(--_ctm-dn-hr-tt-an))
942
+ );
943
+ letter-spacing: var(
944
+ --_ctm-mob-dn-hr-tt-lr-sg,
945
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
946
+ );
947
+ line-height: var(
948
+ --_ctm-mob-dn-hr-tt-le-ht,
949
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
950
+ );
951
+ text-decoration: var(
952
+ --_ctm-mob-dn-hr-tt-ue,
953
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
954
+ );
440
955
  }
441
956
  }
442
957
  }
443
958
  tbody {
444
959
  tr {
445
- padding: var(--_ctm-lt-rw-cl-pg);
446
- height: var(--_ctm-lt-rw-ht);
447
- background-color: var(--_ctm-dn-te-rw-bd-cr);
448
- text-align: var(--_ctm-lt-ct-at);
960
+ padding: var(
961
+ --_ctm-mob-lt-rw-cl-pg,
962
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-dn-lt-rw-cl-pg))
963
+ );
964
+ height: var(
965
+ --_ctm-mob-lt-rw-ht,
966
+ var(--_ctm-tab-lt-rw-ht, var(--_ctm-dn-lt-rw-ht))
967
+ );
968
+ background-color: var(
969
+ --_ctm-mob-dn-te-rw-bd-cr,
970
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
971
+ );
972
+ text-align: var(
973
+ --_ctm-mob-lt-ct-at,
974
+ var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at))
975
+ );
449
976
  th,
450
977
  td {
451
978
  border: 0;
452
979
  padding: inherit;
453
- color: var(--_ctm-dn-te-rw-cr);
454
- font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
455
- font-size: var(--_ctm-dn-te-rw-ft-se);
456
- font-weight: var(--_ctm-dn-te-rw-ft-wt);
457
- font-style: var(--_ctm-dn-te-rw-ft-se-ic);
458
- text-align: var(--_ctm-dn-te-rw-tt-an);
459
- letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
460
- line-height: var(--_ctm-dn-te-rw-le-ht);
461
- text-decoration: var(--_ctm-dn-te-rw-ue);
462
- .d__flex {
463
- display: flex;
464
- align-items: center;
465
- justify-content: center;
466
- gap: 8px;
467
- input[type="radio"] {
468
- width: auto;
469
- }
470
- }
980
+ color: var(
981
+ --_ctm-mob-dn-te-rw-cr,
982
+ var(--_ctm-tab-dn-te-rw-cr, var(--_ctm-dn-te-rw-cr))
983
+ );
984
+ font-family: var(
985
+ --_ctm-mob-dn-te-rw-ft-fy,
986
+ var(--_ctm-tab-dn-te-rw-ft-fy, var(--_ctm-dn-te-rw-ft-fy))
987
+ ),
988
+ sans-serif;
989
+ font-size: var(
990
+ --_ctm-mob-dn-te-rw-ft-se,
991
+ var(--_ctm-tab-dn-te-rw-ft-se, var(--_ctm-dn-te-rw-ft-se))
992
+ );
993
+ font-weight: var(
994
+ --_ctm-mob-dn-te-rw-ft-wt,
995
+ var(--_ctm-tab-dn-te-rw-ft-wt, var(--_ctm-dn-te-rw-ft-wt))
996
+ );
997
+ font-style: var(
998
+ --_ctm-mob-dn-te-rw-ft-se-ic,
999
+ var(--_ctm-tab-dn-te-rw-ft-se-ic, var(--_ctm-dn-te-rw-ft-se-ic))
1000
+ );
1001
+ text-align: var(
1002
+ --_ctm-mob-dn-te-rw-tt-an,
1003
+ var(--_ctm-tab-dn-te-rw-tt-an, var(--_ctm-dn-te-rw-tt-an))
1004
+ );
1005
+ letter-spacing: var(
1006
+ --_ctm-mob-dn-te-rw-lr-sg,
1007
+ var(--_ctm-tab-dn-te-rw-lr-sg, var(--_ctm-dn-te-rw-lr-sg))
1008
+ );
1009
+ line-height: var(
1010
+ --_ctm-mob-dn-te-rw-le-ht,
1011
+ var(--_ctm-tab-dn-te-rw-le-ht, var(--_ctm-dn-te-rw-le-ht))
1012
+ );
1013
+ text-decoration: var(
1014
+ --_ctm-mob-dn-te-rw-ue,
1015
+ var(--_ctm-tab-dn-te-rw-ue, var(--_ctm-dn-te-rw-ue))
1016
+ );
471
1017
  }
472
1018
  }
473
1019
  }