@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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 (141) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleDetails.scss +6189 -6189
  16. package/dist/buy-for-tab-container.scss +141 -141
  17. package/dist/buy-for-tab.scss +649 -649
  18. package/dist/buy-for-tabs-container-item.scss +80 -80
  19. package/dist/buyForPopup.scss +339 -339
  20. package/dist/cart-details.scss +3986 -3986
  21. package/dist/cart-products-sidebar.scss +211 -211
  22. package/dist/cart-wrapper.scss +127 -127
  23. package/dist/cartDropdownOverlay.scss +653 -653
  24. package/dist/cartGrouping.scss +89 -89
  25. package/dist/category-groups-element.scss +739 -739
  26. package/dist/category-groups-quota-details.scss +626 -626
  27. package/dist/category.scss +137 -137
  28. package/dist/categoryDetails.scss +61 -61
  29. package/dist/categoryWidget.scss +34 -34
  30. package/dist/checkbox-radio.scss +124 -124
  31. package/dist/code-temp.scss +59 -59
  32. package/dist/colorpicker_v2.scss +62 -62
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +370 -370
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/contact-us.scss +105 -105
  37. package/dist/container.scss +168 -168
  38. package/dist/custom-fonts.scss +100 -100
  39. package/dist/customization-tree.scss +162 -162
  40. package/dist/default-dropdown.scss +259 -259
  41. package/dist/dropdownTemplate.scss +699 -699
  42. package/dist/editCartItem.scss +110 -110
  43. package/dist/embed-temp.scss +73 -73
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +1105 -1105
  46. package/dist/embroider-template-1.scss +501 -501
  47. package/dist/embroidery.scss +247 -247
  48. package/dist/employee-bulk-order.scss +4060 -4060
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +696 -696
  51. package/dist/fb-dropdown.scss +135 -135
  52. package/dist/filter-results.scss +361 -361
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +530 -530
  55. package/dist/global-styles.scss +198 -198
  56. package/dist/grid.scss +169 -169
  57. package/dist/icon-library.scss +78 -78
  58. package/dist/image-for-product.scss +21 -21
  59. package/dist/image-temp.scss +203 -203
  60. package/dist/item-stock.scss +93 -93
  61. package/dist/kitDetails.scss +5739 -5739
  62. package/dist/kits.scss +305 -305
  63. package/dist/language-selector.scss +948 -948
  64. package/dist/last-x-orders.scss +285 -285
  65. package/dist/layouter-item.scss +141 -141
  66. package/dist/layouter-pro-item.scss +139 -139
  67. package/dist/layouter-pro.scss +134 -134
  68. package/dist/layouter.scss +491 -491
  69. package/dist/light-box-v2.scss +155 -155
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/loader.scss +37 -37
  72. package/dist/login.scss +29 -11
  73. package/dist/marchandiserSets.scss +141 -141
  74. package/dist/mega-menu-container.scss +152 -152
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu-v2.scss +999 -999
  77. package/dist/menu.scss +174 -174
  78. package/dist/multi-select-dropdown.scss +316 -316
  79. package/dist/my-templates.scss +477 -477
  80. package/dist/my-wishlist.scss +27 -27
  81. package/dist/option-bar.scss +886 -886
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/order-status.scss +74 -0
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +1039 -1039
  86. package/dist/payment-methods.scss +307 -307
  87. package/dist/phone-input.scss +208 -208
  88. package/dist/pickup-locations.scss +1359 -1359
  89. package/dist/position-module.scss +95 -95
  90. package/dist/prefix-list.scss +86 -86
  91. package/dist/product-actions.scss +2872 -2872
  92. package/dist/product-basic-elements.scss +600 -600
  93. package/dist/product-customizations.scss +155 -155
  94. package/dist/product-inventory.scss +1621 -1621
  95. package/dist/product-labels.scss +265 -265
  96. package/dist/product-price.scss +3392 -3392
  97. package/dist/product-promotions.scss +3224 -3224
  98. package/dist/product-sizechart.scss +1921 -1921
  99. package/dist/product.scss +140 -140
  100. package/dist/profile.scss +824 -824
  101. package/dist/quantity-selector.scss +1074 -1074
  102. package/dist/quick-inventory-check.scss +285 -285
  103. package/dist/quick-links.scss +627 -627
  104. package/dist/quota-details.scss +526 -526
  105. package/dist/repeater-embla-controls.scss +211 -211
  106. package/dist/repeater-grid-toggle.scss +206 -206
  107. package/dist/repeater-item.scss +152 -152
  108. package/dist/repeater.scss +946 -946
  109. package/dist/request-for-quotes.scss +841 -841
  110. package/dist/responsive-behaviour.scss +29 -29
  111. package/dist/rfqs.scss +861 -861
  112. package/dist/scroll.scss +414 -414
  113. package/dist/search.scss +689 -689
  114. package/dist/section.scss +276 -276
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2518 -2518
  118. package/dist/simple-list.scss +338 -338
  119. package/dist/skeleton.scss +64 -64
  120. package/dist/sort.scss +176 -176
  121. package/dist/spotlight.scss +1706 -1706
  122. package/dist/stack.scss +171 -171
  123. package/dist/static-global.scss +292 -292
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +70 -70
  126. package/dist/store-locations.scss +1592 -1592
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +141 -141
  131. package/dist/table.scss +9 -0
  132. package/dist/tabs.scss +440 -440
  133. package/dist/text-temp.scss +109 -109
  134. package/dist/theme-classes.scss +421 -421
  135. package/dist/toaster.scss +392 -392
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  139. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  140. package/dist/wishlist-overlay.scss +48 -48
  141. package/package.json +1 -1
package/dist/faq.scss CHANGED
@@ -1,696 +1,696 @@
1
- @use "./functions.scss" as *;
2
- @use "sass:map";
3
- @use "sass:list";
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="faq"] {
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: 50%;
13
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
- width: var(
15
- --_sf-el-wh-st-mx,
16
- calc(
17
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
- )
19
- );
20
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
-
22
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
23
- // height: var(--_ctm-lt-ht);
24
- // height: ;
25
- // height: auto;
26
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
27
- // --_aspect-ratio: calc(
28
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
29
- // );
30
-
31
- // &[data-element-sub-child="true"] {
32
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
33
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
- // }
35
-
36
- & > .wrapper {
37
- // width: 100%;
38
- // height: 100%;
39
- }
40
- &[data-show-shadow="false"] {
41
- --_show-shadow: none;
42
- }
43
-
44
- .accordion-element {
45
- background-color: var(
46
- --_ctm-mob-dn-fq-wt-bd-cr,
47
- var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
48
- );
49
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
50
- display: flex;
51
- flex-direction: column;
52
- --_sf-gp: var(
53
- --_ctm-mob-lt-im-sg,
54
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
55
- );
56
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
57
- row-gap: var(--_sf-gp);
58
- width: 100%;
59
- // height: 100%;
60
- border-color: var(
61
- --_ctm-mob-dn-fq-wt-br-cr,
62
- var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
63
- );
64
- border-style: var(
65
- --_ctm-mob-dn-fq-wt-br-se,
66
- var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
67
- );
68
- border-width: var(
69
- --_ctm-mob-dn-fq-wt-br-wh,
70
- var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
71
- );
72
- border-radius: var(
73
- --_ctm-mob-dn-fq-wt-br-rs,
74
- var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
75
- );
76
- box-shadow: var(
77
- --_show-shadow,
78
- var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
79
- var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
80
- var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
81
- var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
82
- );
83
-
84
- &[data-divider-show="true"] {
85
- --_sf-dvdr: var(
86
- --_ctm-mob-dn-dr-dr-wh,
87
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
88
- )
89
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
90
- var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
91
- --_sf-dvdr-gap: var(--_sf-gp);
92
- }
93
- &[data-icon-position="Left"] {
94
- --_sf-fd: row-reverse;
95
- --_sf-jc: flex-end;
96
- }
97
- &[data-show-icon="false"] {
98
- --_sf-show-icon-ff: none;
99
- }
100
- &[data-divider-show="true"] {
101
- // .accordion-item:not(:last-child) {
102
- // border-bottom: var(
103
- // --_ctm-mob-dn-dr-dr-wh,
104
- // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
105
- // )
106
- // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
107
- // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
108
- // }
109
- }
110
- }
111
-
112
- .accordion-item {
113
- width: 100%;
114
- display: grid;
115
- overflow: clip;
116
- // height: 30px;
117
-
118
- // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
119
- // padding-inline: var(
120
- // --_ctm-mob-lt-im-hl-pg,
121
- // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
122
- // );
123
-
124
- padding: var(
125
- --_ctm-mob-dn-cd-an-im-pg-im,
126
- var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
127
- );
128
- grid-template-rows: var(
129
- --_self-active-gtr,
130
- minmax(
131
- var(
132
- --_ctm-mob-dn-cd-an-im-in-se,
133
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
134
- ),
135
- auto
136
- )
137
- 0px
138
- );
139
- // transition: grid-template-rows 0.45s ease-in-out;
140
-
141
- --_sf-pd-cd: var(--_sf-dvdr-gap);
142
- // updated css
143
- border-color: var(
144
- --_ctm-mob-dn-cd-an-im-br-cr,
145
- var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
146
- );
147
- border-style: var(
148
- --_ctm-mob-dn-cd-an-im-br-se,
149
- var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
150
- );
151
- border-width: var(
152
- --_ctm-mob-dn-cd-an-im-br-wh,
153
- var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
154
- );
155
- border-radius: var(
156
- --_ctm-mob-dn-cd-an-im-br-rs,
157
- var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
158
- );
159
- box-shadow: var(
160
- --_show-shadow,
161
- var(
162
- --_ctm-mob-dn-cd-an-im-sw-ae,
163
- var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
164
- )
165
- var(
166
- --_ctm-mob-dn-cd-an-im-sw-br,
167
- var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
168
- )
169
- var(
170
- --_ctm-mob-dn-cd-an-im-sw-sd,
171
- var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
172
- )
173
- // The colour slot repeated `sw-sd` (spread) instead of `sw-cr`. Angle
174
- // resolves to two lengths, so the value came out as five lengths and no
175
- // colour — invalid, and the whole declaration was dropped. That is why no
176
- // shadow appeared here however the panel was set.
177
- var(
178
- --_ctm-mob-dn-cd-an-im-sw-cr,
179
- var(--_ctm-tab-dn-cd-an-im-sw-cr, var(--_ctm-dn-cd-an-im-sw-cr))
180
- )
181
- );
182
-
183
- // &:not(:last-of-type) {
184
- // &::after {
185
- // content: "";
186
- // height: var(--_ctm-dn-dr-dr-wh, 1px);
187
- // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
188
-
189
- // // border-block-end: var(--_sf-dvdr);
190
- // }
191
- // }
192
-
193
- .accordion-title {
194
- display: flex;
195
- flex-direction: var(--_sf-fd, row);
196
- align-content: center;
197
- gap: var(--_sf-cd-gp);
198
- align-items: center;
199
- justify-content: var(--_sf-jc, space-between);
200
- cursor: pointer;
201
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
202
- background-color: var(
203
- --_ctm-mob-dn-cd-an-im-bd-cr,
204
- var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
205
- );
206
- padding: var(
207
- --_ctm-mob-dn-cd-an-im-pg-te,
208
- var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
209
- );
210
-
211
- // p {
212
- // color: var(
213
- // --_ctm-mob-dn-cd-an-im-cr,
214
- // var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
215
- // );
216
- // font-family: var(
217
- // --_ctm-mob-dn-cd-an-im-ft-fy,
218
- // var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
219
- // ),
220
-
221
- // font-size: var(
222
- // --_ctm-mob-dn-cd-an-im-ft-se,
223
- // var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
224
- // );
225
- // font-weight: var(
226
- // --_ctm-mob-dn-cd-an-im-ft-wt,
227
- // var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
228
- // );
229
- // font-style: var(
230
- // --_ctm-mob-dn-cd-an-im-ft-se-ic,
231
- // var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
232
- // );
233
- // text-align: var(
234
- // --_ctm-mob-dn-cd-an-im-tt-an,
235
- // var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
236
- // );
237
- // letter-spacing: var(
238
- // --_ctm-mob-dn-cd-an-im-lr-sg,
239
- // var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
240
- // );
241
- // line-height: var(
242
- // --_ctm-mob-dn-cd-an-im-le-ht,
243
- // var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
244
- // );
245
- // text-decoration: var(
246
- // --_ctm-mob-dn-cd-an-im-ue,
247
- // var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
248
- // );
249
- // }
250
- p {
251
- color: var(
252
- --_ctm-mob-dn-cd-an-im-cr,
253
- var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
254
- );
255
- font-family: var(
256
- --_ctm-mob-dn-cd-an-im-ft-fy,
257
- var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
258
- );
259
- font-size: var(
260
- --_ctm-mob-dn-cd-an-im-ft-se,
261
- var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
262
- );
263
- font-weight: var(
264
- --_ctm-mob-dn-cd-an-im-ft-wt,
265
- var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
266
- );
267
- font-style: var(
268
- --_ctm-mob-dn-cd-an-im-ft-se-ic,
269
- var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
270
- );
271
- text-align: var(
272
- --_ctm-mob-dn-cd-an-im-tt-an,
273
- var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
274
- );
275
- letter-spacing: var(
276
- --_ctm-mob-dn-cd-an-im-lr-sg,
277
- var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
278
- );
279
- line-height: var(
280
- --_ctm-mob-dn-cd-an-im-le-ht,
281
- var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
282
- );
283
- text-decoration: var(
284
- --_ctm-mob-dn-cd-an-im-ue,
285
- var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
286
- );
287
- // Collapsed item > title > Text Transform, and the word wrap/break pair the
288
- // typography panel renders alongside it.
289
- text-transform: var(
290
- --_ctm-mob-dn-cd-an-im-tt-tm,
291
- var(--_ctm-tab-dn-cd-an-im-tt-tm, var(--_ctm-dn-cd-an-im-tt-tm, none))
292
- );
293
- word-wrap: var(
294
- --_ctm-mob-dn-cd-an-im-wd-wp,
295
- var(--_ctm-tab-dn-cd-an-im-wd-wp, var(--_ctm-dn-cd-an-im-wd-wp, normal))
296
- );
297
- word-break: var(
298
- --_ctm-mob-dn-cd-an-im-wd-bk,
299
- var(--_ctm-tab-dn-cd-an-im-wd-bk, var(--_ctm-dn-cd-an-im-wd-bk, normal))
300
- );
301
- }
302
- .icon {
303
- display: var(--_sf-show-icon-ff, flex);
304
- svg {
305
- width: var(
306
- --_ctm-mab-dn-cd-an-im-in-se,
307
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
308
- );
309
- height: var(
310
- --_ctm-mob-dn-cd-an-im-in-se,
311
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
312
- );
313
- path {
314
- stroke: var(
315
- --_ctm-mob-dn-cd-an-im-in-c1,
316
- var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
317
- );
318
- // Overrides the stroke-width presentation attribute baked into the icon markup.
319
- stroke-width: prepareMediaVariable(--_ctm-dn-cd-an-im-se-wh, 1.25);
320
- }
321
- }
322
- }
323
- .accordion-items {
324
- display: flex;
325
- align-items: center;
326
- // Info Icon > Icon Gap. Was a hardcoded 8px, so there was no way to space
327
- // the info icon away from the title.
328
- gap: var(
329
- --_ctm-mob-dn-io-in-in-gp,
330
- var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
331
- );
332
- .icon {
333
- display: var(--_hover-show-icon, var(--_show-icon, flex));
334
- svg {
335
- width: var(
336
- --_ctm-mob-dn-io-in-in-se,
337
- var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
338
- );
339
- height: var(
340
- --_ctm-mob-dn-io-in-in-se,
341
- var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
342
- );
343
- path {
344
- stroke: var(
345
- --_ctm-mob-dn-io-in-in-c1,
346
- var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
347
- );
348
- // Overrides the stroke-width presentation attribute baked into the icon markup.
349
- stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
350
- }
351
- }
352
- }
353
- }
354
- }
355
- .accordion-description {
356
- display: none;
357
- }
358
- // .accordion-description {
359
- // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
360
- // padding-block-end: var(--_sf-dc-pd-bt);
361
- // p {
362
- // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
363
- // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
364
-
365
- // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
366
- // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
367
- // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
368
- // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
369
- // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
370
- // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
371
- // }
372
- // }
373
-
374
- &[data-state="open"] {
375
- // overflow: inherit;
376
- // height: auto;
377
-
378
- padding: var(
379
- --_ctm-mob-dn-ed-an-im-pg-im,
380
- var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
381
- );
382
- gap: var(
383
- --_ctm-mob-lt-te-ad-dn-sg,
384
- var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
385
- );
386
-
387
- --_self-active-gtr: minmax(
388
- var(
389
- --_ctm-mob-dn-cd-an-im-in-se,
390
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
391
- ),
392
- auto
393
- )
394
- minmax(50px, auto);
395
-
396
- --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
397
- --_sf-dc-mb: var(--_sf-cd-gp);
398
- --_sf-tt-pd: 0px;
399
- --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
400
-
401
- border-color: var(
402
- --_ctm-mob-dn-ed-an-im-br-cr,
403
- var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
404
- );
405
- border-style: var(
406
- --_ctm-mob-dn-ed-an-im-br-se,
407
- var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
408
- );
409
- border-width: var(
410
- --_ctm-mob-dn-ed-an-im-br-wh,
411
- var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
412
- );
413
- border-radius: var(
414
- --_ctm-mob-dn-ed-an-im-br-rs,
415
- var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
416
- );
417
- box-shadow: var(
418
- --_show-shadow,
419
- var(
420
- --_ctm-mob-dn-ed-an-im-sw-ae,
421
- var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
422
- )
423
- var(
424
- --_ctm-mob-dn-ed-an-im-sw-br,
425
- var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
426
- )
427
- var(
428
- --_ctm-mob-dn-ed-an-im-sw-sd,
429
- var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
430
- )
431
- var(
432
- --_ctm-mob-dn-ed-an-im-sw-cr,
433
- var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
434
- )
435
- );
436
- .accordion-title {
437
- display: flex;
438
- flex-direction: var(--_sf-fd, row);
439
- align-content: center;
440
- gap: var(--_sf-cd-gp);
441
- align-items: center;
442
- justify-content: var(--_sf-jc, space-between);
443
- cursor: pointer;
444
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
445
- background-color: var(
446
- --_ctm-mob-dn-ed-an-im-bd-cr,
447
- var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
448
- );
449
- padding: var(
450
- --_ctm-mob-dn-ed-an-im-pg-te,
451
- var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
452
- );
453
-
454
- p {
455
- color: var(
456
- --_ctm-mob-dn-ed-an-im-cr,
457
- var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
458
- );
459
- font-family: var(
460
- --_ctm-mob-dn-ed-an-im-ft-fy,
461
- var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
462
- );
463
- font-size: var(
464
- --_ctm-mob-dn-ed-an-im-ft-se,
465
- var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
466
- );
467
- font-weight: var(
468
- --_ctm-mob-dn-ed-an-im-ft-wt,
469
- var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
470
- );
471
- font-style: var(
472
- --_ctm-mob-dn-ed-an-im-ft-se-ic,
473
- var(--_ctm-tab-dn-ed-an-im-ft-se-ic, var(--_ctm-dn-ed-an-im-ft-se-ic))
474
- );
475
- text-align: var(
476
- --_ctm-mob-dn-ed-an-im-tt-an,
477
- var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
478
- );
479
- letter-spacing: var(
480
- --_ctm-mob-dn-ed-an-im-lr-sg,
481
- var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
482
- );
483
- line-height: var(
484
- --_ctm-mob-dn-ed-an-im-le-ht,
485
- var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
486
- );
487
- // text-decoration: var(
488
- // --_ctm-dn-ed-an-im-lh,
489
- // var(--_ctm-dn-ed-an-im-ue),
490
- // var(--_tst-dn-cd-an-im-lh)
491
- // );
492
- text-decoration: var(
493
- --_ctm-mob-dn-ed-an-im-ue,
494
- var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
495
- );
496
- // Expanded item > title > Text Transform and the word wrap/break pair.
497
- text-transform: var(
498
- --_ctm-mob-dn-ed-an-im-tt-tm,
499
- var(--_ctm-tab-dn-ed-an-im-tt-tm, var(--_ctm-dn-ed-an-im-tt-tm, none))
500
- );
501
- word-wrap: var(
502
- --_ctm-mob-dn-ed-an-im-wd-wp,
503
- var(--_ctm-tab-dn-ed-an-im-wd-wp, var(--_ctm-dn-ed-an-im-wd-wp, normal))
504
- );
505
- word-break: var(
506
- --_ctm-mob-dn-ed-an-im-wd-bk,
507
- var(--_ctm-tab-dn-ed-an-im-wd-bk, var(--_ctm-dn-ed-an-im-wd-bk, normal))
508
- );
509
- }
510
- .icon {
511
- display: var(--_sf-show-icon-ff, flex);
512
- svg {
513
- width: var(
514
- --_ctm-mob-dn-ed-an-im-in-se,
515
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
516
- );
517
- height: var(
518
- --_ctm-mob-dn-ed-an-im-in-se,
519
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
520
- );
521
- path {
522
- stroke: var(
523
- --_ctm-mob-dn-ed-an-im-in-c1,
524
- var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
525
- );
526
- // Overrides the stroke-width presentation attribute baked into the icon markup.
527
- stroke-width: prepareMediaVariable(--_ctm-dn-ed-an-im-se-wh, 1.25);
528
- }
529
- }
530
- }
531
- .accordion-items {
532
- display: flex;
533
- align-items: center;
534
- // The expanded item has its own copy of this rule, so the Info Icon gap has
535
- // to be read here too — changing it only moved the collapsed items.
536
- gap: var(
537
- --_ctm-mob-dn-io-in-in-gp,
538
- var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
539
- );
540
- .icon {
541
- display: var(--_hover-show-icon, var(--_show-icon, flex));
542
- svg {
543
- width: var(
544
- --_ctm-mob-dn-io-in-in-se,
545
- var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
546
- );
547
- height: var(
548
- --_ctm-mob-dn-io-in-in-se,
549
- var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
550
- );
551
- path {
552
- stroke: var(
553
- --_ctm-mob-dn-io-in-in-c1,
554
- var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
555
- );
556
- // Overrides the stroke-width presentation attribute baked into the icon markup.
557
- stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
558
- }
559
- }
560
- }
561
- }
562
- }
563
- .accordion-description {
564
- display: block;
565
- // padding-block-end: var(--_sf-dc-pd-bt);
566
- background-color: var(
567
- --_ctm-mob-dn-ed-an-im-bd-cr-dc,
568
- var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
569
- );
570
- padding: var(
571
- --_ctm-mob-dn-ed-an-im-pg-dc,
572
- var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
573
- );
574
- div {
575
- font-family: var(
576
- --_ctm-mob-dn-ed-an-im-ft-fy-dc,
577
- var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
578
- );
579
- text-transform: var(
580
- --_ctm-mob-dn-ed-an-im-tt-tm-dc,
581
- var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
582
- );
583
- word-wrap: var(
584
- --_ctm-mob-dn-ed-an-im-wd-wp-dc,
585
- var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
586
- );
587
- word-break: var(
588
- --_ctm-mob-dn-ed-an-im-wd-bk-dc,
589
- var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
590
- );
591
- }
592
- color: var(
593
- --_ctm-mob-dn-ed-an-im-cr-dc,
594
- var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
595
- );
596
- font-family: var(
597
- --_ctm-mob-dn-ed-an-im-ft-fy-dc,
598
- var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
599
- );
600
- text-transform: var(
601
- --_ctm-mob-dn-ed-an-im-tt-tm-dc,
602
- var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
603
- );
604
- word-wrap: var(
605
- --_ctm-mob-dn-ed-an-im-wd-wp-dc,
606
- var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
607
- );
608
- word-break: var(
609
- --_ctm-mob-dn-ed-an-im-wd-bk-dc,
610
- var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
611
- );
612
- &.flex__overflow {
613
- white-space: normal;
614
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
615
- }
616
- font-size: var(
617
- --_ctm-mob-dn-ed-an-im-ft-se-dc,
618
- var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
619
- );
620
- font-weight: var(
621
- --_ctm-mob-dn-ed-an-im-ft-wt-dc,
622
- var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
623
- );
624
- font-style: var(
625
- --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
626
- var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
627
- );
628
- text-align: var(
629
- --_ctm-mob-dn-ed-an-im-tt-an-dc,
630
- var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
631
- );
632
- letter-spacing: var(
633
- --_ctm-mob-dn-ed-an-im-lr-sg-dc,
634
- var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
635
- );
636
- line-height: var(
637
- --_ctm-mob-dn-ed-an-im-le-ht-dc,
638
- var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
639
- );
640
- text-decoration: var(
641
- --_ctm-mob-dn-ed-an-im-ue-dc,
642
- var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
643
- );
644
- }
645
-
646
- .accordion-title {
647
- position: relative;
648
- }
649
- &[data-show-divider="true"] {
650
- // The divider is a pseudo-element and takes no space of its own, so a thick one
651
- // grew back over the title above it — see dividerGapReserve in functions.scss.
652
- .accordion-title:not(:last-child) {
653
- @include dividerGapReserve(--_ctm-dn-ed-an-im-dr-wt);
654
- }
655
- .accordion-title:not(:last-child)::before {
656
- content: "";
657
- position: absolute;
658
- left: 0;
659
- right: 0;
660
- bottom: dividerGapOffset(--_ctm-lt-te-ad-dn-sg, --_ctm-dn-ed-an-im-dr-wt);
661
-
662
- height: var(
663
- --_ctm-mob-dn-ed-an-im-dr-wt,
664
- var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
665
- );
666
- background-color: var(
667
- --_ctm-mob-dn-ed-an-im-dr-cr,
668
- var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
669
- );
670
- }
671
- }
672
- }
673
- }
674
- .divider {
675
- // height: var(
676
- // --_ctm-mob-dn-wt-se-dr-wt,
677
- // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
678
- // );
679
- // background-color: var(
680
- // --_ctm-mob-dn-wt-se-dr-cr,
681
- // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
682
- // );
683
- border: none; /* Remove default border */
684
- height: var(
685
- --_ctm-mob-dn-dr-dr-wt,
686
- var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
687
- ); /* Set thickness */
688
- background-color: var(
689
- --_ctm-mob-dn-dr-dr-cr,
690
- var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
691
- ); /* Set color */
692
- // margin: 20px 0; /* Optional spacing */
693
- // border-radius: 2px;
694
- }
695
- }
696
- }
1
+ @use "./functions.scss" as *;
2
+ @use "sass:map";
3
+ @use "sass:list";
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="faq"] {
7
+ // width: var(--_lt-wh);
8
+ // height: var(--_lt-ht);
9
+ // margin: var(--_lt-mn);
10
+ // padding: var(--_lt-pg);
11
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
+ // width: 50%;
13
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
+ width: var(
15
+ --_sf-el-wh-st-mx,
16
+ calc(
17
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
+ )
19
+ );
20
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
+
22
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
23
+ // height: var(--_ctm-lt-ht);
24
+ // height: ;
25
+ // height: auto;
26
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
27
+ // --_aspect-ratio: calc(
28
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
29
+ // );
30
+
31
+ // &[data-element-sub-child="true"] {
32
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
33
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
+ // }
35
+
36
+ & > .wrapper {
37
+ // width: 100%;
38
+ // height: 100%;
39
+ }
40
+ &[data-show-shadow="false"] {
41
+ --_show-shadow: none;
42
+ }
43
+
44
+ .accordion-element {
45
+ background-color: var(
46
+ --_ctm-mob-dn-fq-wt-bd-cr,
47
+ var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
48
+ );
49
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
50
+ display: flex;
51
+ flex-direction: column;
52
+ --_sf-gp: var(
53
+ --_ctm-mob-lt-im-sg,
54
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
55
+ );
56
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
57
+ row-gap: var(--_sf-gp);
58
+ width: 100%;
59
+ // height: 100%;
60
+ border-color: var(
61
+ --_ctm-mob-dn-fq-wt-br-cr,
62
+ var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
63
+ );
64
+ border-style: var(
65
+ --_ctm-mob-dn-fq-wt-br-se,
66
+ var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
67
+ );
68
+ border-width: var(
69
+ --_ctm-mob-dn-fq-wt-br-wh,
70
+ var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
71
+ );
72
+ border-radius: var(
73
+ --_ctm-mob-dn-fq-wt-br-rs,
74
+ var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
75
+ );
76
+ box-shadow: var(
77
+ --_show-shadow,
78
+ var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
79
+ var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
80
+ var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
81
+ var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
82
+ );
83
+
84
+ &[data-divider-show="true"] {
85
+ --_sf-dvdr: var(
86
+ --_ctm-mob-dn-dr-dr-wh,
87
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
88
+ )
89
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
90
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
91
+ --_sf-dvdr-gap: var(--_sf-gp);
92
+ }
93
+ &[data-icon-position="Left"] {
94
+ --_sf-fd: row-reverse;
95
+ --_sf-jc: flex-end;
96
+ }
97
+ &[data-show-icon="false"] {
98
+ --_sf-show-icon-ff: none;
99
+ }
100
+ &[data-divider-show="true"] {
101
+ // .accordion-item:not(:last-child) {
102
+ // border-bottom: var(
103
+ // --_ctm-mob-dn-dr-dr-wh,
104
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
105
+ // )
106
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
107
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
108
+ // }
109
+ }
110
+ }
111
+
112
+ .accordion-item {
113
+ width: 100%;
114
+ display: grid;
115
+ overflow: clip;
116
+ // height: 30px;
117
+
118
+ // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
119
+ // padding-inline: var(
120
+ // --_ctm-mob-lt-im-hl-pg,
121
+ // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
122
+ // );
123
+
124
+ padding: var(
125
+ --_ctm-mob-dn-cd-an-im-pg-im,
126
+ var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
127
+ );
128
+ grid-template-rows: var(
129
+ --_self-active-gtr,
130
+ minmax(
131
+ var(
132
+ --_ctm-mob-dn-cd-an-im-in-se,
133
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
134
+ ),
135
+ auto
136
+ )
137
+ 0px
138
+ );
139
+ // transition: grid-template-rows 0.45s ease-in-out;
140
+
141
+ --_sf-pd-cd: var(--_sf-dvdr-gap);
142
+ // updated css
143
+ border-color: var(
144
+ --_ctm-mob-dn-cd-an-im-br-cr,
145
+ var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
146
+ );
147
+ border-style: var(
148
+ --_ctm-mob-dn-cd-an-im-br-se,
149
+ var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
150
+ );
151
+ border-width: var(
152
+ --_ctm-mob-dn-cd-an-im-br-wh,
153
+ var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
154
+ );
155
+ border-radius: var(
156
+ --_ctm-mob-dn-cd-an-im-br-rs,
157
+ var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
158
+ );
159
+ box-shadow: var(
160
+ --_show-shadow,
161
+ var(
162
+ --_ctm-mob-dn-cd-an-im-sw-ae,
163
+ var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
164
+ )
165
+ var(
166
+ --_ctm-mob-dn-cd-an-im-sw-br,
167
+ var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
168
+ )
169
+ var(
170
+ --_ctm-mob-dn-cd-an-im-sw-sd,
171
+ var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
172
+ )
173
+ // The colour slot repeated `sw-sd` (spread) instead of `sw-cr`. Angle
174
+ // resolves to two lengths, so the value came out as five lengths and no
175
+ // colour — invalid, and the whole declaration was dropped. That is why no
176
+ // shadow appeared here however the panel was set.
177
+ var(
178
+ --_ctm-mob-dn-cd-an-im-sw-cr,
179
+ var(--_ctm-tab-dn-cd-an-im-sw-cr, var(--_ctm-dn-cd-an-im-sw-cr))
180
+ )
181
+ );
182
+
183
+ // &:not(:last-of-type) {
184
+ // &::after {
185
+ // content: "";
186
+ // height: var(--_ctm-dn-dr-dr-wh, 1px);
187
+ // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
188
+
189
+ // // border-block-end: var(--_sf-dvdr);
190
+ // }
191
+ // }
192
+
193
+ .accordion-title {
194
+ display: flex;
195
+ flex-direction: var(--_sf-fd, row);
196
+ align-content: center;
197
+ gap: var(--_sf-cd-gp);
198
+ align-items: center;
199
+ justify-content: var(--_sf-jc, space-between);
200
+ cursor: pointer;
201
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
202
+ background-color: var(
203
+ --_ctm-mob-dn-cd-an-im-bd-cr,
204
+ var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
205
+ );
206
+ padding: var(
207
+ --_ctm-mob-dn-cd-an-im-pg-te,
208
+ var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
209
+ );
210
+
211
+ // p {
212
+ // color: var(
213
+ // --_ctm-mob-dn-cd-an-im-cr,
214
+ // var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
215
+ // );
216
+ // font-family: var(
217
+ // --_ctm-mob-dn-cd-an-im-ft-fy,
218
+ // var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
219
+ // ),
220
+
221
+ // font-size: var(
222
+ // --_ctm-mob-dn-cd-an-im-ft-se,
223
+ // var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
224
+ // );
225
+ // font-weight: var(
226
+ // --_ctm-mob-dn-cd-an-im-ft-wt,
227
+ // var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
228
+ // );
229
+ // font-style: var(
230
+ // --_ctm-mob-dn-cd-an-im-ft-se-ic,
231
+ // var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
232
+ // );
233
+ // text-align: var(
234
+ // --_ctm-mob-dn-cd-an-im-tt-an,
235
+ // var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
236
+ // );
237
+ // letter-spacing: var(
238
+ // --_ctm-mob-dn-cd-an-im-lr-sg,
239
+ // var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
240
+ // );
241
+ // line-height: var(
242
+ // --_ctm-mob-dn-cd-an-im-le-ht,
243
+ // var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
244
+ // );
245
+ // text-decoration: var(
246
+ // --_ctm-mob-dn-cd-an-im-ue,
247
+ // var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
248
+ // );
249
+ // }
250
+ p {
251
+ color: var(
252
+ --_ctm-mob-dn-cd-an-im-cr,
253
+ var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
254
+ );
255
+ font-family: var(
256
+ --_ctm-mob-dn-cd-an-im-ft-fy,
257
+ var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
258
+ );
259
+ font-size: var(
260
+ --_ctm-mob-dn-cd-an-im-ft-se,
261
+ var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
262
+ );
263
+ font-weight: var(
264
+ --_ctm-mob-dn-cd-an-im-ft-wt,
265
+ var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
266
+ );
267
+ font-style: var(
268
+ --_ctm-mob-dn-cd-an-im-ft-se-ic,
269
+ var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
270
+ );
271
+ text-align: var(
272
+ --_ctm-mob-dn-cd-an-im-tt-an,
273
+ var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
274
+ );
275
+ letter-spacing: var(
276
+ --_ctm-mob-dn-cd-an-im-lr-sg,
277
+ var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
278
+ );
279
+ line-height: var(
280
+ --_ctm-mob-dn-cd-an-im-le-ht,
281
+ var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
282
+ );
283
+ text-decoration: var(
284
+ --_ctm-mob-dn-cd-an-im-ue,
285
+ var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
286
+ );
287
+ // Collapsed item > title > Text Transform, and the word wrap/break pair the
288
+ // typography panel renders alongside it.
289
+ text-transform: var(
290
+ --_ctm-mob-dn-cd-an-im-tt-tm,
291
+ var(--_ctm-tab-dn-cd-an-im-tt-tm, var(--_ctm-dn-cd-an-im-tt-tm, none))
292
+ );
293
+ word-wrap: var(
294
+ --_ctm-mob-dn-cd-an-im-wd-wp,
295
+ var(--_ctm-tab-dn-cd-an-im-wd-wp, var(--_ctm-dn-cd-an-im-wd-wp, normal))
296
+ );
297
+ word-break: var(
298
+ --_ctm-mob-dn-cd-an-im-wd-bk,
299
+ var(--_ctm-tab-dn-cd-an-im-wd-bk, var(--_ctm-dn-cd-an-im-wd-bk, normal))
300
+ );
301
+ }
302
+ .icon {
303
+ display: var(--_sf-show-icon-ff, flex);
304
+ svg {
305
+ width: var(
306
+ --_ctm-mab-dn-cd-an-im-in-se,
307
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
308
+ );
309
+ height: var(
310
+ --_ctm-mob-dn-cd-an-im-in-se,
311
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
312
+ );
313
+ path {
314
+ stroke: var(
315
+ --_ctm-mob-dn-cd-an-im-in-c1,
316
+ var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
317
+ );
318
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
319
+ stroke-width: prepareMediaVariable(--_ctm-dn-cd-an-im-se-wh, 1.25);
320
+ }
321
+ }
322
+ }
323
+ .accordion-items {
324
+ display: flex;
325
+ align-items: center;
326
+ // Info Icon > Icon Gap. Was a hardcoded 8px, so there was no way to space
327
+ // the info icon away from the title.
328
+ gap: var(
329
+ --_ctm-mob-dn-io-in-in-gp,
330
+ var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
331
+ );
332
+ .icon {
333
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
334
+ svg {
335
+ width: var(
336
+ --_ctm-mob-dn-io-in-in-se,
337
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
338
+ );
339
+ height: var(
340
+ --_ctm-mob-dn-io-in-in-se,
341
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
342
+ );
343
+ path {
344
+ stroke: var(
345
+ --_ctm-mob-dn-io-in-in-c1,
346
+ var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
347
+ );
348
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
349
+ stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
350
+ }
351
+ }
352
+ }
353
+ }
354
+ }
355
+ .accordion-description {
356
+ display: none;
357
+ }
358
+ // .accordion-description {
359
+ // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
360
+ // padding-block-end: var(--_sf-dc-pd-bt);
361
+ // p {
362
+ // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
363
+ // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
364
+
365
+ // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
366
+ // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
367
+ // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
368
+ // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
369
+ // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
370
+ // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
371
+ // }
372
+ // }
373
+
374
+ &[data-state="open"] {
375
+ // overflow: inherit;
376
+ // height: auto;
377
+
378
+ padding: var(
379
+ --_ctm-mob-dn-ed-an-im-pg-im,
380
+ var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
381
+ );
382
+ gap: var(
383
+ --_ctm-mob-lt-te-ad-dn-sg,
384
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
385
+ );
386
+
387
+ --_self-active-gtr: minmax(
388
+ var(
389
+ --_ctm-mob-dn-cd-an-im-in-se,
390
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
391
+ ),
392
+ auto
393
+ )
394
+ minmax(50px, auto);
395
+
396
+ --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
397
+ --_sf-dc-mb: var(--_sf-cd-gp);
398
+ --_sf-tt-pd: 0px;
399
+ --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
400
+
401
+ border-color: var(
402
+ --_ctm-mob-dn-ed-an-im-br-cr,
403
+ var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
404
+ );
405
+ border-style: var(
406
+ --_ctm-mob-dn-ed-an-im-br-se,
407
+ var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
408
+ );
409
+ border-width: var(
410
+ --_ctm-mob-dn-ed-an-im-br-wh,
411
+ var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
412
+ );
413
+ border-radius: var(
414
+ --_ctm-mob-dn-ed-an-im-br-rs,
415
+ var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
416
+ );
417
+ box-shadow: var(
418
+ --_show-shadow,
419
+ var(
420
+ --_ctm-mob-dn-ed-an-im-sw-ae,
421
+ var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
422
+ )
423
+ var(
424
+ --_ctm-mob-dn-ed-an-im-sw-br,
425
+ var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
426
+ )
427
+ var(
428
+ --_ctm-mob-dn-ed-an-im-sw-sd,
429
+ var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
430
+ )
431
+ var(
432
+ --_ctm-mob-dn-ed-an-im-sw-cr,
433
+ var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
434
+ )
435
+ );
436
+ .accordion-title {
437
+ display: flex;
438
+ flex-direction: var(--_sf-fd, row);
439
+ align-content: center;
440
+ gap: var(--_sf-cd-gp);
441
+ align-items: center;
442
+ justify-content: var(--_sf-jc, space-between);
443
+ cursor: pointer;
444
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
445
+ background-color: var(
446
+ --_ctm-mob-dn-ed-an-im-bd-cr,
447
+ var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
448
+ );
449
+ padding: var(
450
+ --_ctm-mob-dn-ed-an-im-pg-te,
451
+ var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
452
+ );
453
+
454
+ p {
455
+ color: var(
456
+ --_ctm-mob-dn-ed-an-im-cr,
457
+ var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
458
+ );
459
+ font-family: var(
460
+ --_ctm-mob-dn-ed-an-im-ft-fy,
461
+ var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
462
+ );
463
+ font-size: var(
464
+ --_ctm-mob-dn-ed-an-im-ft-se,
465
+ var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
466
+ );
467
+ font-weight: var(
468
+ --_ctm-mob-dn-ed-an-im-ft-wt,
469
+ var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
470
+ );
471
+ font-style: var(
472
+ --_ctm-mob-dn-ed-an-im-ft-se-ic,
473
+ var(--_ctm-tab-dn-ed-an-im-ft-se-ic, var(--_ctm-dn-ed-an-im-ft-se-ic))
474
+ );
475
+ text-align: var(
476
+ --_ctm-mob-dn-ed-an-im-tt-an,
477
+ var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
478
+ );
479
+ letter-spacing: var(
480
+ --_ctm-mob-dn-ed-an-im-lr-sg,
481
+ var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
482
+ );
483
+ line-height: var(
484
+ --_ctm-mob-dn-ed-an-im-le-ht,
485
+ var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
486
+ );
487
+ // text-decoration: var(
488
+ // --_ctm-dn-ed-an-im-lh,
489
+ // var(--_ctm-dn-ed-an-im-ue),
490
+ // var(--_tst-dn-cd-an-im-lh)
491
+ // );
492
+ text-decoration: var(
493
+ --_ctm-mob-dn-ed-an-im-ue,
494
+ var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
495
+ );
496
+ // Expanded item > title > Text Transform and the word wrap/break pair.
497
+ text-transform: var(
498
+ --_ctm-mob-dn-ed-an-im-tt-tm,
499
+ var(--_ctm-tab-dn-ed-an-im-tt-tm, var(--_ctm-dn-ed-an-im-tt-tm, none))
500
+ );
501
+ word-wrap: var(
502
+ --_ctm-mob-dn-ed-an-im-wd-wp,
503
+ var(--_ctm-tab-dn-ed-an-im-wd-wp, var(--_ctm-dn-ed-an-im-wd-wp, normal))
504
+ );
505
+ word-break: var(
506
+ --_ctm-mob-dn-ed-an-im-wd-bk,
507
+ var(--_ctm-tab-dn-ed-an-im-wd-bk, var(--_ctm-dn-ed-an-im-wd-bk, normal))
508
+ );
509
+ }
510
+ .icon {
511
+ display: var(--_sf-show-icon-ff, flex);
512
+ svg {
513
+ width: var(
514
+ --_ctm-mob-dn-ed-an-im-in-se,
515
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
516
+ );
517
+ height: var(
518
+ --_ctm-mob-dn-ed-an-im-in-se,
519
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
520
+ );
521
+ path {
522
+ stroke: var(
523
+ --_ctm-mob-dn-ed-an-im-in-c1,
524
+ var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
525
+ );
526
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
527
+ stroke-width: prepareMediaVariable(--_ctm-dn-ed-an-im-se-wh, 1.25);
528
+ }
529
+ }
530
+ }
531
+ .accordion-items {
532
+ display: flex;
533
+ align-items: center;
534
+ // The expanded item has its own copy of this rule, so the Info Icon gap has
535
+ // to be read here too — changing it only moved the collapsed items.
536
+ gap: var(
537
+ --_ctm-mob-dn-io-in-in-gp,
538
+ var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
539
+ );
540
+ .icon {
541
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
542
+ svg {
543
+ width: var(
544
+ --_ctm-mob-dn-io-in-in-se,
545
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
546
+ );
547
+ height: var(
548
+ --_ctm-mob-dn-io-in-in-se,
549
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
550
+ );
551
+ path {
552
+ stroke: var(
553
+ --_ctm-mob-dn-io-in-in-c1,
554
+ var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
555
+ );
556
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
557
+ stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
558
+ }
559
+ }
560
+ }
561
+ }
562
+ }
563
+ .accordion-description {
564
+ display: block;
565
+ // padding-block-end: var(--_sf-dc-pd-bt);
566
+ background-color: var(
567
+ --_ctm-mob-dn-ed-an-im-bd-cr-dc,
568
+ var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
569
+ );
570
+ padding: var(
571
+ --_ctm-mob-dn-ed-an-im-pg-dc,
572
+ var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
573
+ );
574
+ div {
575
+ font-family: var(
576
+ --_ctm-mob-dn-ed-an-im-ft-fy-dc,
577
+ var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
578
+ );
579
+ text-transform: var(
580
+ --_ctm-mob-dn-ed-an-im-tt-tm-dc,
581
+ var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
582
+ );
583
+ word-wrap: var(
584
+ --_ctm-mob-dn-ed-an-im-wd-wp-dc,
585
+ var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
586
+ );
587
+ word-break: var(
588
+ --_ctm-mob-dn-ed-an-im-wd-bk-dc,
589
+ var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
590
+ );
591
+ }
592
+ color: var(
593
+ --_ctm-mob-dn-ed-an-im-cr-dc,
594
+ var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
595
+ );
596
+ font-family: var(
597
+ --_ctm-mob-dn-ed-an-im-ft-fy-dc,
598
+ var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
599
+ );
600
+ text-transform: var(
601
+ --_ctm-mob-dn-ed-an-im-tt-tm-dc,
602
+ var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
603
+ );
604
+ word-wrap: var(
605
+ --_ctm-mob-dn-ed-an-im-wd-wp-dc,
606
+ var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
607
+ );
608
+ word-break: var(
609
+ --_ctm-mob-dn-ed-an-im-wd-bk-dc,
610
+ var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
611
+ );
612
+ &.flex__overflow {
613
+ white-space: normal;
614
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
615
+ }
616
+ font-size: var(
617
+ --_ctm-mob-dn-ed-an-im-ft-se-dc,
618
+ var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
619
+ );
620
+ font-weight: var(
621
+ --_ctm-mob-dn-ed-an-im-ft-wt-dc,
622
+ var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
623
+ );
624
+ font-style: var(
625
+ --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
626
+ var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
627
+ );
628
+ text-align: var(
629
+ --_ctm-mob-dn-ed-an-im-tt-an-dc,
630
+ var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
631
+ );
632
+ letter-spacing: var(
633
+ --_ctm-mob-dn-ed-an-im-lr-sg-dc,
634
+ var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
635
+ );
636
+ line-height: var(
637
+ --_ctm-mob-dn-ed-an-im-le-ht-dc,
638
+ var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
639
+ );
640
+ text-decoration: var(
641
+ --_ctm-mob-dn-ed-an-im-ue-dc,
642
+ var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
643
+ );
644
+ }
645
+
646
+ .accordion-title {
647
+ position: relative;
648
+ }
649
+ &[data-show-divider="true"] {
650
+ // The divider is a pseudo-element and takes no space of its own, so a thick one
651
+ // grew back over the title above it — see dividerGapReserve in functions.scss.
652
+ .accordion-title:not(:last-child) {
653
+ @include dividerGapReserve(--_ctm-dn-ed-an-im-dr-wt);
654
+ }
655
+ .accordion-title:not(:last-child)::before {
656
+ content: "";
657
+ position: absolute;
658
+ left: 0;
659
+ right: 0;
660
+ bottom: dividerGapOffset(--_ctm-lt-te-ad-dn-sg, --_ctm-dn-ed-an-im-dr-wt);
661
+
662
+ height: var(
663
+ --_ctm-mob-dn-ed-an-im-dr-wt,
664
+ var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
665
+ );
666
+ background-color: var(
667
+ --_ctm-mob-dn-ed-an-im-dr-cr,
668
+ var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
669
+ );
670
+ }
671
+ }
672
+ }
673
+ }
674
+ .divider {
675
+ // height: var(
676
+ // --_ctm-mob-dn-wt-se-dr-wt,
677
+ // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
678
+ // );
679
+ // background-color: var(
680
+ // --_ctm-mob-dn-wt-se-dr-cr,
681
+ // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
682
+ // );
683
+ border: none; /* Remove default border */
684
+ height: var(
685
+ --_ctm-mob-dn-dr-dr-wt,
686
+ var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
687
+ ); /* Set thickness */
688
+ background-color: var(
689
+ --_ctm-mob-dn-dr-dr-cr,
690
+ var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
691
+ ); /* Set color */
692
+ // margin: 20px 0; /* Optional spacing */
693
+ // border-radius: 2px;
694
+ }
695
+ }
696
+ }