@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.62

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 (132) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2155 -1671
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +2027 -1128
  16. package/dist/bundle.scss +1489 -841
  17. package/dist/bundleCategories.scss +301 -0
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +113 -78
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1025 -485
  23. package/dist/cart-summary.scss +1234 -569
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +647 -367
  27. package/dist/cartDropdownOverlay.scss +10 -1
  28. package/dist/category-groups-element.scss +108 -127
  29. package/dist/category-groups-product-grid.scss +147 -120
  30. package/dist/category-groups-product-image.scss +1457 -1162
  31. package/dist/category-groups-product-options.scss +685 -590
  32. package/dist/category-groups-product-price.scss +3244 -1966
  33. package/dist/category-groups-quota-details.scss +464 -210
  34. package/dist/category.scss +50 -26
  35. package/dist/checkout.scss +16 -24
  36. package/dist/confirm-modal.scss +2 -22
  37. package/dist/container.scss +54 -32
  38. package/dist/countdown.scss +443 -256
  39. package/dist/coupon.scss +16 -19
  40. package/dist/default-dropdown.scss +1 -12
  41. package/dist/embroider-template-1-v2.scss +172 -123
  42. package/dist/embroider-template-1.scss +104 -68
  43. package/dist/embroidery.scss +31 -30
  44. package/dist/employee-bulk-order.scss +142 -418
  45. package/dist/faq.scss +408 -228
  46. package/dist/filter-results.scss +265 -125
  47. package/dist/filters.scss +1682 -831
  48. package/dist/gallery-slider-temp.scss +811 -445
  49. package/dist/global-styles.scss +7 -23
  50. package/dist/grid.scss +33 -25
  51. package/dist/hotspot.scss +115 -68
  52. package/dist/image-temp.scss +38 -24
  53. package/dist/item-stock.scss +16 -9
  54. package/dist/kitDetails.scss +4301 -2721
  55. package/dist/kits.scss +19 -24
  56. package/dist/language-selector.scss +361 -211
  57. package/dist/last-x-orders.scss +174 -95
  58. package/dist/layouter-item.scss +106 -76
  59. package/dist/layouter-pro-item.scss +95 -89
  60. package/dist/layouter-pro.scss +92 -87
  61. package/dist/layouter.scss +264 -79
  62. package/dist/light-box-v2.scss +104 -89
  63. package/dist/login.scss +600 -311
  64. package/dist/map.scss +391 -228
  65. package/dist/marchandiserSets.scss +104 -95
  66. package/dist/mega-menu-container.scss +109 -96
  67. package/dist/mega-menu.scss +731 -624
  68. package/dist/menu-item.scss +2 -2
  69. package/dist/menu-v2.scss +619 -507
  70. package/dist/multi-select-dropdown.scss +3 -27
  71. package/dist/my-templates.scss +9 -38
  72. package/dist/option-bar.scss +375 -215
  73. package/dist/order-status.scss +1117 -643
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +1778 -1228
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +176 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +659 -316
  87. package/dist/product-price.scss +2562 -1284
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +451 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +137 -56
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +121 -82
  99. package/dist/repeater-embla-controls.scss +26 -37
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +817 -554
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +198 -90
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +198 -61
  111. package/dist/social.scss +145 -80
  112. package/dist/stack.scss +34 -23
  113. package/dist/static-global.scss +26 -44
  114. package/dist/stockStatus.scss +19 -11
  115. package/dist/store-locations.scss +1105 -577
  116. package/dist/tab-container.scss +108 -81
  117. package/dist/table-common.scss +408 -217
  118. package/dist/table.scss +511 -269
  119. package/dist/text-temp.scss +7 -8
  120. package/dist/theme-classes.scss +13 -17
  121. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  122. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  123. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  125. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  126. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  127. package/dist/uom-selector.scss +949 -489
  128. package/dist/user-elements.scss +892 -574
  129. package/dist/variant-picker.scss +2555 -1281
  130. package/dist/volume-pricing.scss +1037 -541
  131. package/dist/widget.scss +1 -0
  132. package/package.json +1 -1
package/dist/login.scss CHANGED
@@ -3,18 +3,24 @@
3
3
  @use "./functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
-
7
6
  &[data-element-type="login"],
8
7
  &[data-element-type="resetPassword"],
9
8
  &[data-element-type="forgotPassword"] {
10
- width: var(--_sf-el-wh-st-mx,
11
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
12
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
13
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
20
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
15
21
  position: relative;
16
22
 
17
- &>.wrapper {
23
+ & > .wrapper {
18
24
  // display: flex;
19
25
  // align-items: center;
20
26
  // justify-content: center;
@@ -44,6 +50,14 @@
44
50
  --_show-shadow: none;
45
51
  }
46
52
 
53
+ // Form > Icons > show/hide. Scoped to the fields' leading icons: the password
54
+ // field's eye is a control, not a designed icon, so it stays visible and keeps
55
+ // its own styling. A dedicated variable (not `--_show-icon`) keeps this clear of
56
+ // the Login button's icon, which reads that one.
57
+ &[data-field-icon="false"] {
58
+ --_field-icon-display: none;
59
+ }
60
+
47
61
  .auth-container {
48
62
  .logn__main__div {
49
63
  height: var(--_height-100-dvh);
@@ -52,7 +66,7 @@
52
66
  width: 100%;
53
67
  position: var(--_p-relative);
54
68
 
55
- &>div {
69
+ & > div {
56
70
  &.loader {
57
71
  position: var(--_p-absolute);
58
72
  z-index: var(--_higher-zIndex);
@@ -73,9 +87,11 @@
73
87
 
74
88
  &::before {
75
89
  animation: shine 1.5s infinite;
76
- background: linear-gradient(to right,
77
- rgba(255, 255, 255, 0) 0%,
78
- rgba(255, 255, 255, 0.8) 100%);
90
+ background: linear-gradient(
91
+ to right,
92
+ rgba(255, 255, 255, 0) 0%,
93
+ rgba(255, 255, 255, 0.8) 100%
94
+ );
79
95
  content: "";
80
96
  display: block;
81
97
  height: 90px;
@@ -87,7 +103,7 @@
87
103
  z-index: 2;
88
104
  }
89
105
 
90
- &>img {
106
+ & > img {
91
107
  // z-index: 3;
92
108
  width: var(--_sf-img-sz);
93
109
  height: var(--_sf-img-sz);
@@ -100,7 +116,7 @@
100
116
  --_col-gap: 0px;
101
117
  grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
102
118
 
103
- &>div {
119
+ & > div {
104
120
  width: 100%;
105
121
 
106
122
  &.left__div {
@@ -115,7 +131,7 @@
115
131
  object-fit: cover;
116
132
  }
117
133
 
118
- &>div {
134
+ & > div {
119
135
  &.left__box__parent {
120
136
  max-width: 65%;
121
137
  margin-inline: auto;
@@ -124,7 +140,7 @@
124
140
  --_sf-gp: var(--_gap-24);
125
141
  gap: calc(var(--_sf-gp) * 1.25);
126
142
 
127
- &>div {
143
+ & > div {
128
144
  &.box {
129
145
  display: var(--_d-flex);
130
146
  color: var(--_base-white);
@@ -139,14 +155,14 @@
139
155
  height: var(--_sf-img-size);
140
156
  }
141
157
 
142
- &>div {
158
+ & > div {
143
159
  display: var(--_d-flex);
144
160
  flex-direction: column;
145
161
  row-gap: calc(var(--_sf-gp) * 0.5);
146
162
  align-items: flex-start;
147
163
  flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
148
164
 
149
- &>p {
165
+ & > p {
150
166
  color: var(--_base-white);
151
167
  margin: 0;
152
168
 
@@ -177,45 +193,75 @@
177
193
  justify-content: center;
178
194
  align-items: center;
179
195
  // margin: var(--_ctm-lt-mn);
180
- padding: var(--_ctm-lt-pg);
196
+ padding: prepareMediaVariable(--_ctm-lt-pg);
197
+ background-color: prepareMediaVariable(
198
+ --_ctm-dn-ln-wt-bd-cr,
199
+ prepareMediaVariable(--_ctm-dn-wt-bd-cr, transparent)
200
+ );
201
+ border-color: prepareMediaVariable(
202
+ --_ctm-dn-ln-wt-br-cr,
203
+ prepareMediaVariable(--_ctm-dn-wt-br-cr, transparent)
204
+ );
205
+ border-style: prepareMediaVariable(
206
+ --_ctm-dn-ln-wt-br-se,
207
+ prepareMediaVariable(--_ctm-dn-wt-br-se, none)
208
+ );
209
+ border-width: prepareMediaVariable(
210
+ --_ctm-dn-ln-wt-br-wh,
211
+ prepareMediaVariable(--_ctm-dn-wt-br-wh, 0px)
212
+ );
213
+ border-radius: prepareMediaVariable(
214
+ --_ctm-dn-ln-wt-br-rs,
215
+ prepareMediaVariable(--_ctm-dn-wt-br-rs, 0px)
216
+ );
217
+
218
+ box-shadow: var(
219
+ --_show-shadow,
220
+ prepareMediaVariable(
221
+ --_ctm-dn-ln-wt-sw-ae,
222
+ prepareMediaVariable(--_ctm-dn-wt-sw-ae, 0px 0px)
223
+ )
224
+ prepareMediaVariable(
225
+ --_ctm-dn-ln-wt-sw-br,
226
+ prepareMediaVariable(--_ctm-dn-wt-sw-br, 0px)
227
+ )
228
+ prepareMediaVariable(
229
+ --_ctm-dn-ln-wt-sw-sd,
230
+ prepareMediaVariable(--_ctm-dn-wt-sw-sd, 0px)
231
+ )
232
+ prepareMediaVariable(
233
+ --_ctm-dn-ln-wt-sw-cr,
234
+ prepareMediaVariable(--_ctm-dn-wt-sw-cr, transparent)
235
+ )
236
+ );
181
237
  }
182
238
 
183
239
  // Login Box
184
240
  .loginBox {
185
241
  width: 100%;
242
+ height: 100%;
186
243
  display: flex;
187
244
  flex-direction: column;
188
245
  box-sizing: border-box;
189
- gap: prepareMediaVariable(--_ctm-dn-ln-wt-im-gp,
190
- prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px));
191
- background-color: prepareMediaVariable(--_ctm-dn-ln-wt-bd-cr,
192
- prepareMediaVariable(--_ctm-dn-wt-bd-cr, transparent));
193
- padding: prepareMediaVariable(--_ctm-dn-ln-wt-pg,
194
- prepareMediaVariable(--_ctm-dn-wt-pg, 0px));
195
-
196
- border-color: prepareMediaVariable(--_ctm-dn-ln-wt-br-cr,
197
- prepareMediaVariable(--_ctm-dn-wt-br-cr, transparent));
198
- border-style: prepareMediaVariable(--_ctm-dn-ln-wt-br-se,
199
- prepareMediaVariable(--_ctm-dn-wt-br-se, none));
200
- border-width: prepareMediaVariable(--_ctm-dn-ln-wt-br-wh,
201
- prepareMediaVariable(--_ctm-dn-wt-br-wh, 0px));
202
- border-radius: prepareMediaVariable(--_ctm-dn-ln-wt-br-rs,
203
- prepareMediaVariable(--_ctm-dn-wt-br-rs, 0px));
204
-
205
- box-shadow: var(--_show-shadow,
206
- prepareMediaVariable(--_ctm-dn-ln-wt-sw-ae,
207
- prepareMediaVariable(--_ctm-dn-wt-sw-ae, 0px 0px)) prepareMediaVariable(--_ctm-dn-ln-wt-sw-br,
208
- prepareMediaVariable(--_ctm-dn-wt-sw-br, 0px)) prepareMediaVariable(--_ctm-dn-ln-wt-sw-sd,
209
- prepareMediaVariable(--_ctm-dn-wt-sw-sd, 0px)) prepareMediaVariable(--_ctm-dn-ln-wt-sw-cr,
210
- prepareMediaVariable(--_ctm-dn-wt-sw-cr, transparent)));
246
+ gap: prepareMediaVariable(
247
+ --_ctm-dn-ln-wt-im-gp,
248
+ prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px)
249
+ );
250
+
251
+ padding: prepareMediaVariable(
252
+ --_ctm-dn-ln-wt-pg,
253
+ prepareMediaVariable(--_ctm-dn-wt-pg, 0px)
254
+ );
211
255
  }
212
256
 
213
257
  .login_box_header {
214
258
  display: flex;
215
259
  flex-direction: column;
216
260
  padding: var(--_ctm-mob-dn-wt-ds-pg, var(--_ctm-tab-dn-wt-ds-pg, var(--_ctm-dn-wt-ds-pg)));
217
- gap: var(--_ctm-mob-dn-wt-ds-im-gp,
218
- var(--_ctm-tab-dn-wt-ds-im-gp, var(--_ctm-dn-wt-ds-im-gp)));
261
+ gap: var(
262
+ --_ctm-mob-dn-wt-ds-im-gp,
263
+ var(--_ctm-tab-dn-wt-ds-im-gp, var(--_ctm-dn-wt-ds-im-gp))
264
+ );
219
265
 
220
266
  .rounded__fill {
221
267
  width: 60px;
@@ -249,7 +295,7 @@
249
295
  margin-bottom: 24px;
250
296
  }
251
297
 
252
- &>div:has(.log_in_title) {
298
+ & > div:has(.log_in_title) {
253
299
  display: flex;
254
300
  flex-direction: column;
255
301
  gap: 4px;
@@ -257,54 +303,96 @@
257
303
 
258
304
  // Title Styles
259
305
  .log_in_title {
260
- font-family: var(--_ctm-mob-dn-te-ft-fy,
261
- var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy)));
262
- text-transform: var(--_ctm-mob-dn-te-tt-tm,
263
- var(--_ctm-tab-dn-te-tt-tm, var(--_ctm-dn-te-tt-tm)));
264
- word-wrap: var(--_ctm-mob-dn-te-wd-wp,
265
- var(--_ctm-tab-dn-te-wd-wp, var(--_ctm-dn-te-wd-wp)));
266
- word-break: var(--_ctm-mob-dn-te-wd-bk,
267
- var(--_ctm-tab-dn-te-wd-bk, var(--_ctm-dn-te-wd-bk)));
306
+ font-family: var(
307
+ --_ctm-mob-dn-te-ft-fy,
308
+ var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
309
+ );
310
+ text-transform: var(
311
+ --_ctm-mob-dn-te-tt-tm,
312
+ var(--_ctm-tab-dn-te-tt-tm, var(--_ctm-dn-te-tt-tm))
313
+ );
314
+ word-wrap: var(
315
+ --_ctm-mob-dn-te-wd-wp,
316
+ var(--_ctm-tab-dn-te-wd-wp, var(--_ctm-dn-te-wd-wp))
317
+ );
318
+ word-break: var(
319
+ --_ctm-mob-dn-te-wd-bk,
320
+ var(--_ctm-tab-dn-te-wd-bk, var(--_ctm-dn-te-wd-bk))
321
+ );
268
322
  color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
269
- font-weight: var(--_ctm-mob-dn-te-ft-wt,
270
- var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt)));
271
- font-size: var(--_ctm-mob-dn-te-ft-se,
272
- var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se)));
273
- text-decoration: var(--_ctm-mob-dn-te-ue,
274
- var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue, )));
275
- letter-spacing: var(--_ctm-mob-dn-te-lr-sg,
276
- var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg)));
277
- line-height: var(--_ctm-mob-dn-te-le-ht,
278
- var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht)));
279
- font-style: var(--_ctm-mob-dn-te-ft-se-ic,
280
- var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic)));
281
- text-align: var(--_ctm-mob-dn-te-tt-an,
282
- var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an)));
323
+ font-weight: var(
324
+ --_ctm-mob-dn-te-ft-wt,
325
+ var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
326
+ );
327
+ font-size: var(
328
+ --_ctm-mob-dn-te-ft-se,
329
+ var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
330
+ );
331
+ text-decoration: var(
332
+ --_ctm-mob-dn-te-ue,
333
+ var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue,))
334
+ );
335
+ letter-spacing: var(
336
+ --_ctm-mob-dn-te-lr-sg,
337
+ var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
338
+ );
339
+ line-height: var(
340
+ --_ctm-mob-dn-te-le-ht,
341
+ var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
342
+ );
343
+ font-style: var(
344
+ --_ctm-mob-dn-te-ft-se-ic,
345
+ var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
346
+ );
347
+ text-align: var(
348
+ --_ctm-mob-dn-te-tt-an,
349
+ var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
350
+ );
283
351
  }
284
352
 
285
353
  .desc {
286
354
  word-break: break-word;
287
- font-family: var(--_ctm-mob-dn-dn-ft-fy,
288
- var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy)));
289
- text-transform: var(--_ctm-mob-dn-dn-tt-tm,
290
- var(--_ctm-tab-dn-dn-tt-tm, var(--_ctm-dn-dn-tt-tm)));
291
- word-wrap: var(--_ctm-mob-dn-dn-wd-wp,
292
- var(--_ctm-tab-dn-dn-wd-wp, var(--_ctm-dn-dn-wd-wp)));
355
+ font-family: var(
356
+ --_ctm-mob-dn-dn-ft-fy,
357
+ var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy))
358
+ );
359
+ text-transform: var(
360
+ --_ctm-mob-dn-dn-tt-tm,
361
+ var(--_ctm-tab-dn-dn-tt-tm, var(--_ctm-dn-dn-tt-tm))
362
+ );
363
+ word-wrap: var(
364
+ --_ctm-mob-dn-dn-wd-wp,
365
+ var(--_ctm-tab-dn-dn-wd-wp, var(--_ctm-dn-dn-wd-wp))
366
+ );
293
367
  color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr)));
294
- font-weight: var(--_ctm-mob-dn-dn-ft-wt,
295
- var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt)));
296
- font-size: var(--_ctm-mob-dn-dn-ft-se,
297
- var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se)));
298
- text-decoration: var(--_ctm-mob-dn-dn-ue,
299
- var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue, )));
300
- letter-spacing: var(--_ctm-mob-dn-dn-lr-sg,
301
- var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg)));
302
- line-height: var(--_ctm-mob-dn-dn-le-ht,
303
- var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht)));
304
- font-style: var(--_ctm-mob-dn-dn-ft-se-ic,
305
- var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic)));
306
- text-align: var(--_ctm-mob-dn-dn-tt-an,
307
- var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an)));
368
+ font-weight: var(
369
+ --_ctm-mob-dn-dn-ft-wt,
370
+ var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt))
371
+ );
372
+ font-size: var(
373
+ --_ctm-mob-dn-dn-ft-se,
374
+ var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se))
375
+ );
376
+ text-decoration: var(
377
+ --_ctm-mob-dn-dn-ue,
378
+ var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue,))
379
+ );
380
+ letter-spacing: var(
381
+ --_ctm-mob-dn-dn-lr-sg,
382
+ var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg))
383
+ );
384
+ line-height: var(
385
+ --_ctm-mob-dn-dn-le-ht,
386
+ var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht))
387
+ );
388
+ font-style: var(
389
+ --_ctm-mob-dn-dn-ft-se-ic,
390
+ var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic))
391
+ );
392
+ text-align: var(
393
+ --_ctm-mob-dn-dn-tt-an,
394
+ var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an))
395
+ );
308
396
  }
309
397
  }
310
398
 
@@ -314,8 +402,10 @@
314
402
 
315
403
  .form_fields {
316
404
  // margin-top: 36px;
317
- gap: var(--_ctm-mob-dn-ln-wt-im-gp,
318
- var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp)));
405
+ gap: var(
406
+ --_ctm-mob-dn-ln-wt-im-gp,
407
+ var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp))
408
+ );
319
409
  display: flex;
320
410
  flex-direction: column;
321
411
 
@@ -382,8 +472,10 @@
382
472
  }
383
473
  }
384
474
 
385
- background-color: var(--_sf-hr-bd-cr,
386
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr));
475
+ background-color: var(
476
+ --_sf-hr-bd-cr,
477
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr)
478
+ );
387
479
 
388
480
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-pg));
389
481
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wh));
@@ -394,21 +486,32 @@
394
486
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-at));
395
487
  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-gp));
396
488
 
397
- border-radius: var(--_sf-hr-br-rs,
398
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs));
489
+ border-radius: var(
490
+ --_sf-hr-br-rs,
491
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs)
492
+ );
399
493
 
400
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr));
494
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae))
495
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br))
496
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd))
497
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr));
401
498
 
402
499
  &[data-show-border="true"] {
403
500
  width: 100%;
404
- border-color: var(--_sf-hr-br-cr,
405
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr));
406
-
407
- border-style: var(--_sf-hr-br-se,
408
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se));
409
-
410
- border-width: var(--_sf-hr-br-wh,
411
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh));
501
+ border-color: var(
502
+ --_sf-hr-br-cr,
503
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr)
504
+ );
505
+
506
+ border-style: var(
507
+ --_sf-hr-br-se,
508
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se)
509
+ );
510
+
511
+ border-width: var(
512
+ --_sf-hr-br-wh,
513
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh)
514
+ );
412
515
  }
413
516
 
414
517
  .txt {
@@ -416,15 +519,19 @@
416
519
 
417
520
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-cr));
418
521
 
419
- font-family: var(--_sf-hr-ft-fy,
420
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy));
421
- text-transform: var(--_sf-hr-tt-tm,
422
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-tm));
423
- word-wrap: var(--_sf-hr-wd-wp,
424
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-wp));
425
- word-break: var(--_sf-hr-wd-bk,
426
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-bk));
427
-
522
+ font-family: var(
523
+ --_sf-hr-ft-fy,
524
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy)
525
+ );
526
+ text-transform: var(
527
+ --_sf-hr-tt-tm,
528
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-tm)
529
+ );
530
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-wp));
531
+ word-break: var(
532
+ --_sf-hr-wd-bk,
533
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-bk)
534
+ );
428
535
  &.flex__overflow {
429
536
  white-space: normal;
430
537
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -432,20 +539,30 @@
432
539
 
433
540
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se));
434
541
 
435
- font-weight: var(--_sf-hr-ft-wt,
436
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt));
542
+ font-weight: var(
543
+ --_sf-hr-ft-wt,
544
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt)
545
+ );
437
546
 
438
- font-style: var(--_sf-hr-ft-se-ic,
439
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic));
547
+ font-style: var(
548
+ --_sf-hr-ft-se-ic,
549
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic)
550
+ );
440
551
 
441
- text-align: var(--_sf-hr-tt-an,
442
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an));
552
+ text-align: var(
553
+ --_sf-hr-tt-an,
554
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an)
555
+ );
443
556
 
444
- letter-spacing: var(--_sf-hr-lr-sg,
445
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg));
557
+ letter-spacing: var(
558
+ --_sf-hr-lr-sg,
559
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg)
560
+ );
446
561
 
447
- line-height: var(--_sf-hr-le-ht,
448
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht));
562
+ line-height: var(
563
+ --_sf-hr-le-ht,
564
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht)
565
+ );
449
566
 
450
567
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
451
568
  }
@@ -458,8 +575,10 @@
458
575
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
459
576
 
460
577
  path {
461
- stroke: var(--_sf-hr-in-c1,
462
- prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1));
578
+ stroke: var(
579
+ --_sf-hr-in-c1,
580
+ prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1)
581
+ );
463
582
  // Overrides the stroke-width presentation attribute baked into the icon markup.
464
583
  stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-se-wh, 1.25);
465
584
  }
@@ -495,43 +614,65 @@
495
614
  .field__group {
496
615
  // margin-bottom: 16px;
497
616
  position: relative;
498
- gap: var(--_ctm-mob-dn-fm-fd-is-im-gp,
499
- var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp)));
617
+ gap: var(
618
+ --_ctm-mob-dn-fm-fd-is-im-gp,
619
+ var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp))
620
+ );
500
621
  display: flex;
501
622
  flex-direction: column;
502
623
 
503
624
  .input__label {
504
- display: flex;
505
- align-items: center;
506
- font-family: var(--_ctm-mob-dn-fm-ll-ft-fy,
507
- var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy)));
508
- text-transform: var(--_ctm-mob-dn-fm-ll-tt-tm,
509
- var(--_ctm-tab-dn-fm-ll-tt-tm, var(--_ctm-dn-fm-ll-tt-tm)));
510
- word-wrap: var(--_ctm-mob-dn-fm-ll-wd-wp,
511
- var(--_ctm-tab-dn-fm-ll-wd-wp, var(--_ctm-dn-fm-ll-wd-wp)));
512
- word-break: var(--_ctm-mob-dn-fm-ll-wd-bk,
513
- var(--_ctm-tab-dn-fm-ll-wd-bk, var(--_ctm-dn-fm-ll-wd-bk)));
514
-
625
+ // display: flex;
626
+ // align-items: center;
627
+ font-family: var(
628
+ --_ctm-mob-dn-fm-ll-ft-fy,
629
+ var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
630
+ );
631
+ text-transform: var(
632
+ --_ctm-mob-dn-fm-ll-tt-tm,
633
+ var(--_ctm-tab-dn-fm-ll-tt-tm, var(--_ctm-dn-fm-ll-tt-tm))
634
+ );
635
+ word-wrap: var(
636
+ --_ctm-mob-dn-fm-ll-wd-wp,
637
+ var(--_ctm-tab-dn-fm-ll-wd-wp, var(--_ctm-dn-fm-ll-wd-wp))
638
+ );
639
+ word-break: var(
640
+ --_ctm-mob-dn-fm-ll-wd-bk,
641
+ var(--_ctm-tab-dn-fm-ll-wd-bk, var(--_ctm-dn-fm-ll-wd-bk))
642
+ );
515
643
  &.flex__overflow {
516
644
  white-space: normal;
517
645
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
518
646
  }
519
-
520
647
  color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr)));
521
- font-weight: var(--_ctm-mob-dn-fm-ll-ft-wt,
522
- var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt)));
523
- font-size: var(--_ctm-mob-dn-fm-ll-ft-se,
524
- var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se)));
525
- text-decoration: var(--_ctm-mob-dn-fm-ll-ue,
526
- var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue)));
527
- letter-spacing: var(--_ctm-mob-dn-fm-ll-lr-sg,
528
- var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg)));
529
- line-height: var(--_ctm-mob-dn-fm-ll-le-ht,
530
- var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht)));
531
- font-style: var(--_ctm-mob-dn-fm-ll-ft-se-ic,
532
- var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic)));
533
- text-align: var(--_ctm-mob-dn-fm-ll-tt-an,
534
- var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an)));
648
+ font-weight: var(
649
+ --_ctm-mob-dn-fm-ll-ft-wt,
650
+ var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt))
651
+ );
652
+ font-size: var(
653
+ --_ctm-mob-dn-fm-ll-ft-se,
654
+ var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se))
655
+ );
656
+ text-decoration: var(
657
+ --_ctm-mob-dn-fm-ll-ue,
658
+ var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue))
659
+ );
660
+ letter-spacing: var(
661
+ --_ctm-mob-dn-fm-ll-lr-sg,
662
+ var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg))
663
+ );
664
+ line-height: var(
665
+ --_ctm-mob-dn-fm-ll-le-ht,
666
+ var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht))
667
+ );
668
+ font-style: var(
669
+ --_ctm-mob-dn-fm-ll-ft-se-ic,
670
+ var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic))
671
+ );
672
+ text-align: var(
673
+ --_ctm-mob-dn-fm-ll-tt-an,
674
+ var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an))
675
+ );
535
676
  // gap: 4px;
536
677
  // margin-bottom: 4px;
537
678
  // font-size: 16px;
@@ -542,23 +683,46 @@
542
683
  display: flex;
543
684
  align-items: center;
544
685
  border-radius: prepareMediaVariable(--_ctm-dn-fm-it-br-rs);
545
- border-color: var(--_ctm-mob-dn-fm-it-br-cr,
546
- var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr)));
547
- border-radius: var(--_ctm-mob-dn-fm-it-br-rs,
548
- var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs)));
549
- border-style: var(--_ctm-mob-dn-fm-it-br-se,
550
- var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se)));
551
- border-width: var(--_ctm-mob-dn-fm-it-br-wh,
552
- var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh)));
553
- box-shadow: var(--_ctm-mob-dn-fm-it-sw-ae,
554
- var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))) var(--_ctm-mob-dn-fm-it-sw-br,
555
- var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))) var(--_ctm-mob-dn-fm-it-sw-sd,
556
- var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))) var(--_ctm-mob-dn-fm-it-sw-cr,
557
- var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr)));
558
- background-color: var(--_ctm-mob-dn-fm-it-bd-cr,
559
- var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr)));
560
- padding: var(--_ctm-mob-dn-fm-it-pg,
561
- var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
686
+ border-color: var(
687
+ --_ctm-mob-dn-fm-it-br-cr,
688
+ var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
689
+ );
690
+ border-radius: var(
691
+ --_ctm-mob-dn-fm-it-br-rs,
692
+ var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
693
+ );
694
+ border-style: var(
695
+ --_ctm-mob-dn-fm-it-br-se,
696
+ var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
697
+ );
698
+ border-width: var(
699
+ --_ctm-mob-dn-fm-it-br-wh,
700
+ var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
701
+ );
702
+ box-shadow: var(
703
+ --_ctm-mob-dn-fm-it-sw-ae,
704
+ var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
705
+ )
706
+ var(
707
+ --_ctm-mob-dn-fm-it-sw-br,
708
+ var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
709
+ )
710
+ var(
711
+ --_ctm-mob-dn-fm-it-sw-sd,
712
+ var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
713
+ )
714
+ var(
715
+ --_ctm-mob-dn-fm-it-sw-cr,
716
+ var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
717
+ );
718
+ background-color: var(
719
+ --_ctm-mob-dn-fm-it-bd-cr,
720
+ var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
721
+ );
722
+ padding: var(
723
+ --_ctm-mob-dn-fm-it-pg,
724
+ var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg))
725
+ );
562
726
  gap: prepareMediaVariable(--_ctm-dn-fm-it-im-gp);
563
727
  transition:
564
728
  background-color 0.2s,
@@ -591,23 +755,17 @@
591
755
  }
592
756
 
593
757
  // position: relative;
594
- svg {
595
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
596
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
597
-
598
- path {
599
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
600
- // Overrides the stroke-width presentation attribute baked into the icon markup.
601
- stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
602
- }
603
- }
758
+ // Deliberately no blanket `svg` rule here. It also matched the password
759
+ // field's eye button, so Icons > Size / Color / Stroke Width restyled a
760
+ // control that section does not own. The icons Icons DOES own carry the
761
+ // vars on their own classes below.
604
762
 
605
763
  .placeholder_icon_start_login {
606
764
  // position: absolute;
607
765
  z-index: 10;
608
766
  // top: 12px;
609
767
  // left: 10px;
610
- display: flex;
768
+ display: var(--_field-icon-display, flex);
611
769
  align-items: center;
612
770
 
613
771
  svg {
@@ -637,7 +795,7 @@
637
795
  .placeholder_icon_start {
638
796
  // position: absolute;
639
797
  z-index: 10;
640
- display: flex;
798
+ display: var(--_field-icon-display, flex);
641
799
  align-items: center;
642
800
  // top: 11px;
643
801
  // left: 10px;
@@ -678,37 +836,64 @@
678
836
  input:-webkit-autofill:hover,
679
837
  input:-webkit-autofill:focus {
680
838
  -webkit-box-shadow: 0 0 0px 1000px prepareMediaVariable(--_ctm-dn-fm-it-bd-cr) inset;
681
- -webkit-text-fill-color: var(--_ctm-mob-dn-fm-it-cr,
682
- var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr)));
839
+ -webkit-text-fill-color: var(
840
+ --_ctm-mob-dn-fm-it-cr,
841
+ var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
842
+ );
683
843
  }
684
844
 
685
845
  input {
686
846
  // padding-left: 38px;
687
847
 
688
- font-family: var(--_ctm-mob-dn-fm-it-ft-fy,
689
- var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy)));
690
- text-transform: var(--_ctm-mob-dn-fm-it-tt-tm,
691
- var(--_ctm-tab-dn-fm-it-tt-tm, var(--_ctm-dn-fm-it-tt-tm)));
692
- word-wrap: var(--_ctm-mob-dn-fm-it-wd-wp,
693
- var(--_ctm-tab-dn-fm-it-wd-wp, var(--_ctm-dn-fm-it-wd-wp)));
694
- word-break: var(--_ctm-mob-dn-fm-it-wd-bk,
695
- var(--_ctm-tab-dn-fm-it-wd-bk, var(--_ctm-dn-fm-it-wd-bk)));
696
- color: var(--_ctm-mob-dn-fm-it-cr,
697
- var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr)));
698
- font-weight: var(--_ctm-mob-dn-fm-it-ft-wt,
699
- var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt)));
700
- font-size: var(--_ctm-mob-dn-fm-it-ft-se,
701
- var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se)));
702
- text-decoration: var(--_ctm-mob-dn-fm-it-ue,
703
- var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue)));
704
- letter-spacing: var(--_ctm-mob-dn-fm-it-lr-sg,
705
- var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg)));
706
- line-height: var(--_ctm-mob-dn-fm-it-le-ht,
707
- var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht)));
708
- font-style: var(--_ctm-mob-dn-fm-it-ft-se-ic,
709
- var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic)));
710
- text-align: var(--_ctm-mob-dn-fm-it-tt-an,
711
- var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an)));
848
+ font-family: var(
849
+ --_ctm-mob-dn-fm-it-ft-fy,
850
+ var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy))
851
+ );
852
+ text-transform: var(
853
+ --_ctm-mob-dn-fm-it-tt-tm,
854
+ var(--_ctm-tab-dn-fm-it-tt-tm, var(--_ctm-dn-fm-it-tt-tm))
855
+ );
856
+ word-wrap: var(
857
+ --_ctm-mob-dn-fm-it-wd-wp,
858
+ var(--_ctm-tab-dn-fm-it-wd-wp, var(--_ctm-dn-fm-it-wd-wp))
859
+ );
860
+ word-break: var(
861
+ --_ctm-mob-dn-fm-it-wd-bk,
862
+ var(--_ctm-tab-dn-fm-it-wd-bk, var(--_ctm-dn-fm-it-wd-bk))
863
+ );
864
+ color: var(
865
+ --_ctm-mob-dn-fm-it-cr,
866
+ var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
867
+ );
868
+ font-weight: var(
869
+ --_ctm-mob-dn-fm-it-ft-wt,
870
+ var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt))
871
+ );
872
+ font-size: var(
873
+ --_ctm-mob-dn-fm-it-ft-se,
874
+ var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se))
875
+ );
876
+ text-decoration: var(
877
+ --_ctm-mob-dn-fm-it-ue,
878
+ var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue))
879
+ );
880
+ letter-spacing: var(
881
+ --_ctm-mob-dn-fm-it-lr-sg,
882
+ var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg))
883
+ );
884
+ line-height: var(
885
+ --_ctm-mob-dn-fm-it-le-ht,
886
+ var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht))
887
+ );
888
+ font-style: var(
889
+ --_ctm-mob-dn-fm-it-ft-se-ic,
890
+ var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic))
891
+ );
892
+ // Always left, never the Input section's Text Align. What the shopper is
893
+ // typing has to sit where the caret starts and next to the field's leading
894
+ // icon; centred or right-aligned entry reads as broken, and the alignment
895
+ // control is there for the label and button text, not for live input.
896
+ text-align: left;
712
897
  // border-color: var(--_ctm-mob-dn-fm-it-br-cr,
713
898
  // var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr)));
714
899
  // border-radius: var(--_ctm-mob-dn-fm-it-br-rs,
@@ -729,6 +914,11 @@
729
914
  }
730
915
  }
731
916
 
917
+ // Show/hide password. A control rather than a designed icon, so it is fixed at
918
+ // a readable size and the Show Icon toggle leaves it alone — hiding it would
919
+ // strand anyone who needs to check what they typed. Color is the exception: it
920
+ // follows the field glyph beside it, so an editor recoloring the form's icons
921
+ // does not leave this one stranded in gray.
732
922
  .view__icon {
733
923
  // position: absolute;
734
924
  z-index: 10;
@@ -738,13 +928,12 @@
738
928
  align-items: center;
739
929
 
740
930
  svg {
741
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
742
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
931
+ width: 20px;
932
+ height: 20px;
743
933
 
744
934
  path {
745
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
746
- // Overrides the stroke-width presentation attribute baked into the icon markup.
747
- stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
935
+ stroke: prepareMediaVariable(--_ctm-dn-fm-is-in-c1, var(--_gray-500));
936
+ stroke-width: 1.25;
748
937
  }
749
938
  }
750
939
  }
@@ -902,7 +1091,10 @@
902
1091
 
903
1092
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-rs));
904
1093
 
905
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr));
1094
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae))
1095
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br))
1096
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd))
1097
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr));
906
1098
 
907
1099
  &[data-show-border="true"] {
908
1100
  width: 100%;
@@ -922,7 +1114,6 @@
922
1114
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-tm));
923
1115
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-wp));
924
1116
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-bk));
925
-
926
1117
  &.flex__overflow {
927
1118
  white-space: normal;
928
1119
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1183,12 +1374,16 @@
1183
1374
  display: flex;
1184
1375
  align-items: center;
1185
1376
  justify-content: space-between;
1186
- padding: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-pg,
1187
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-pg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-pg)));
1377
+ padding: var(
1378
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-pg,
1379
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-pg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-pg))
1380
+ );
1188
1381
 
1189
1382
  &:hover {
1190
- padding: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-pg,
1191
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-pg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-pg)));
1383
+ padding: var(
1384
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-pg,
1385
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-pg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-pg))
1386
+ );
1192
1387
  }
1193
1388
 
1194
1389
  // margin-top: 20px;
@@ -1278,8 +1473,10 @@
1278
1473
  }
1279
1474
  }
1280
1475
 
1281
- background-color: var(--_sf-hr-bd-cr,
1282
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-bd-cr));
1476
+ background-color: var(
1477
+ --_sf-hr-bd-cr,
1478
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-bd-cr)
1479
+ );
1283
1480
 
1284
1481
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-pg));
1285
1482
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wh));
@@ -1287,26 +1484,41 @@
1287
1484
  flex-direction: var(--_sf-fd-bn);
1288
1485
  align-items: center;
1289
1486
 
1290
- justify-content: var(--_sf-hr-at,
1291
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-at));
1487
+ justify-content: var(
1488
+ --_sf-hr-at,
1489
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-at)
1490
+ );
1292
1491
  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-gp));
1293
1492
 
1294
- border-radius: var(--_sf-hr-br-rs,
1295
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-rs));
1493
+ border-radius: var(
1494
+ --_sf-hr-br-rs,
1495
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-rs)
1496
+ );
1296
1497
 
1297
- box-shadow: var(--_sf-hr-sw-ae,
1298
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-cr));
1498
+ box-shadow: var(
1499
+ --_sf-hr-sw-ae,
1500
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-ae)
1501
+ )
1502
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-br))
1503
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-sd))
1504
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-cr));
1299
1505
 
1300
1506
  &[data-show-border="true"] {
1301
1507
  width: 100%;
1302
- border-color: var(--_sf-hr-br-cr,
1303
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-cr));
1304
-
1305
- border-style: var(--_sf-hr-br-se,
1306
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-se));
1307
-
1308
- border-width: var(--_sf-hr-br-wh,
1309
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-wh));
1508
+ border-color: var(
1509
+ --_sf-hr-br-cr,
1510
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-cr)
1511
+ );
1512
+
1513
+ border-style: var(
1514
+ --_sf-hr-br-se,
1515
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-se)
1516
+ );
1517
+
1518
+ border-width: var(
1519
+ --_sf-hr-br-wh,
1520
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-wh)
1521
+ );
1310
1522
  }
1311
1523
 
1312
1524
  .txt {
@@ -1314,37 +1526,56 @@
1314
1526
 
1315
1527
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-cr));
1316
1528
 
1317
- font-family: var(--_sf-hr-ft-fy,
1318
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-fy));
1319
- text-transform: var(--_sf-hr-tt-tm,
1320
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-tm));
1321
- word-wrap: var(--_sf-hr-wd-wp,
1322
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-wp));
1323
- word-break: var(--_sf-hr-wd-bk,
1324
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-bk));
1325
-
1529
+ font-family: var(
1530
+ --_sf-hr-ft-fy,
1531
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-fy)
1532
+ );
1533
+ text-transform: var(
1534
+ --_sf-hr-tt-tm,
1535
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-tm)
1536
+ );
1537
+ word-wrap: var(
1538
+ --_sf-hr-wd-wp,
1539
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-wp)
1540
+ );
1541
+ word-break: var(
1542
+ --_sf-hr-wd-bk,
1543
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-bk)
1544
+ );
1326
1545
  &.flex__overflow {
1327
1546
  white-space: normal;
1328
1547
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1329
1548
  }
1330
1549
 
1331
- font-size: var(--_sf-hr-ft-se,
1332
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se));
1550
+ font-size: var(
1551
+ --_sf-hr-ft-se,
1552
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se)
1553
+ );
1333
1554
 
1334
- font-weight: var(--_sf-hr-ft-wt,
1335
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-wt));
1555
+ font-weight: var(
1556
+ --_sf-hr-ft-wt,
1557
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-wt)
1558
+ );
1336
1559
 
1337
- font-style: var(--_sf-hr-ft-se-ic,
1338
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se-ic));
1560
+ font-style: var(
1561
+ --_sf-hr-ft-se-ic,
1562
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se-ic)
1563
+ );
1339
1564
 
1340
- text-align: var(--_sf-hr-tt-an,
1341
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-an));
1565
+ text-align: var(
1566
+ --_sf-hr-tt-an,
1567
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-an)
1568
+ );
1342
1569
 
1343
- letter-spacing: var(--_sf-hr-lr-sg,
1344
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-lr-sg));
1570
+ letter-spacing: var(
1571
+ --_sf-hr-lr-sg,
1572
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-lr-sg)
1573
+ );
1345
1574
 
1346
- line-height: var(--_sf-hr-le-ht,
1347
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-le-ht));
1575
+ line-height: var(
1576
+ --_sf-hr-le-ht,
1577
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-le-ht)
1578
+ );
1348
1579
 
1349
1580
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1350
1581
  }
@@ -1353,14 +1584,20 @@
1353
1584
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1354
1585
 
1355
1586
  svg {
1356
- width: var(--_sf-hr-in-se,
1357
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se));
1358
- height: var(--_sf-hr-in-se,
1359
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se));
1587
+ width: var(
1588
+ --_sf-hr-in-se,
1589
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se)
1590
+ );
1591
+ height: var(
1592
+ --_sf-hr-in-se,
1593
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se)
1594
+ );
1360
1595
 
1361
1596
  path {
1362
- stroke: var(--_sf-hr-in-c1,
1363
- prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-c1));
1597
+ stroke: var(
1598
+ --_sf-hr-in-c1,
1599
+ prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-c1)
1600
+ );
1364
1601
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1365
1602
  stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-se-wh, 1.25);
1366
1603
  }
@@ -1447,7 +1684,7 @@
1447
1684
  }
1448
1685
  }
1449
1686
 
1450
- &>span {
1687
+ & > span {
1451
1688
  display: inline-flex;
1452
1689
  }
1453
1690
 
@@ -1478,34 +1715,60 @@
1478
1715
 
1479
1716
  // Forgot Password Button
1480
1717
  .forgotPasswordButton {
1481
- background-color: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-bd-cr,
1482
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-bd-cr)));
1718
+ background-color: var(
1719
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-bd-cr,
1720
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-bd-cr))
1721
+ );
1483
1722
  // border: none;
1484
1723
  cursor: pointer;
1485
- font-family: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-fy,
1486
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-fy)));
1487
- text-transform: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-tm,
1488
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-tm)));
1489
- word-wrap: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-wp,
1490
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-wp)));
1491
- word-break: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-bk,
1492
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-bk)));
1493
- color: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-cr,
1494
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-cr)));
1495
- font-weight: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-wt,
1496
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-wt)));
1497
- font-size: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se,
1498
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se)));
1499
- text-decoration: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-ue,
1500
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ue, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ue)));
1501
- letter-spacing: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-lr-sg,
1502
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-lr-sg)));
1503
- line-height: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-le-ht,
1504
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-dt-se-le-ht)));
1505
- font-style: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se-ic,
1506
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se-ic)));
1507
- text-align: var(--_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-an,
1508
- var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-an)));
1724
+ font-family: var(
1725
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-fy,
1726
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-fy))
1727
+ );
1728
+ text-transform: var(
1729
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-tm,
1730
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-tm))
1731
+ );
1732
+ word-wrap: var(
1733
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-wp,
1734
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-wp))
1735
+ );
1736
+ word-break: var(
1737
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-bk,
1738
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-bk))
1739
+ );
1740
+ color: var(
1741
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-cr,
1742
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-cr))
1743
+ );
1744
+ font-weight: var(
1745
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-wt,
1746
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-wt))
1747
+ );
1748
+ font-size: var(
1749
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se,
1750
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se))
1751
+ );
1752
+ text-decoration: var(
1753
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ue,
1754
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ue, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ue))
1755
+ );
1756
+ letter-spacing: var(
1757
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-lr-sg,
1758
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-lr-sg))
1759
+ );
1760
+ line-height: var(
1761
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-le-ht,
1762
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-dt-se-le-ht))
1763
+ );
1764
+ font-style: var(
1765
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se-ic,
1766
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se-ic))
1767
+ );
1768
+ text-align: var(
1769
+ --_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-an,
1770
+ var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-an))
1771
+ );
1509
1772
  // color: var(--_thm-cs-tt-ls-as);
1510
1773
 
1511
1774
  // font-weight: 600;
@@ -1517,32 +1780,58 @@
1517
1780
  // color: var(--_thm-cs-tt-ls-as);
1518
1781
  // }
1519
1782
  &:hover {
1520
- background: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-bd-cr,
1521
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-bd-cr)));
1522
- font-family: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-fy,
1523
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-fy)));
1524
- text-transform: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-tm,
1525
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-tm)));
1526
- word-wrap: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-wp,
1527
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-wp)));
1528
- word-break: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-bk,
1529
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-bk)));
1530
- color: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-cr,
1531
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-cr)));
1532
- font-weight: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-wt,
1533
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-wt)));
1534
- font-size: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se,
1535
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se)));
1536
- text-decoration: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-ue,
1537
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ue, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ue)));
1538
- letter-spacing: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-lr-sg,
1539
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-lr-sg)));
1540
- line-height: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-le-ht,
1541
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-hr-se-le-ht)));
1542
- font-style: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se-ic,
1543
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se-ic)));
1544
- text-align: var(--_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-an,
1545
- var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-an)));
1783
+ background: var(
1784
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-bd-cr,
1785
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-bd-cr))
1786
+ );
1787
+ font-family: var(
1788
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-fy,
1789
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-fy))
1790
+ );
1791
+ text-transform: var(
1792
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-tm,
1793
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-tm))
1794
+ );
1795
+ word-wrap: var(
1796
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-wp,
1797
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-wp))
1798
+ );
1799
+ word-break: var(
1800
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-bk,
1801
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-bk))
1802
+ );
1803
+ color: var(
1804
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-cr,
1805
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-cr))
1806
+ );
1807
+ font-weight: var(
1808
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-wt,
1809
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-wt))
1810
+ );
1811
+ font-size: var(
1812
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se,
1813
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se))
1814
+ );
1815
+ text-decoration: var(
1816
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ue,
1817
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ue, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ue))
1818
+ );
1819
+ letter-spacing: var(
1820
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-lr-sg,
1821
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-lr-sg))
1822
+ );
1823
+ line-height: var(
1824
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-le-ht,
1825
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-hr-se-le-ht))
1826
+ );
1827
+ font-style: var(
1828
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se-ic,
1829
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se-ic))
1830
+ );
1831
+ text-align: var(
1832
+ --_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-an,
1833
+ var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-an))
1834
+ );
1546
1835
  }
1547
1836
  }
1548
1837
 
@@ -1632,7 +1921,7 @@
1632
1921
  align-items: center;
1633
1922
  gap: 8px;
1634
1923
 
1635
- &>span {
1924
+ & > span {
1636
1925
  display: flex;
1637
1926
 
1638
1927
  svg {
@@ -1660,4 +1949,4 @@
1660
1949
  }
1661
1950
  }
1662
1951
  }
1663
- }
1952
+ }