@sc-360-v2/storefront-cms-library 0.5.27 → 0.5.28

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 (9) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart.scss +16 -2
  3. package/dist/checkout.scss +306 -1
  4. package/dist/faq.scss +574 -564
  5. package/dist/line.scss +9 -7
  6. package/dist/types/builder/tools/element-edit/designInstance.d.ts +13 -0
  7. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +31 -1
  8. package/dist/variant-picker.scss +1050 -126
  9. package/package.json +1 -1
package/dist/faq.scss CHANGED
@@ -1,564 +1,574 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- [data-div-type="element"] {
5
- &[data-element-type="faq"] {
6
- // width: var(--_lt-wh);
7
- // height: var(--_lt-ht);
8
- // margin: var(--_lt-mn);
9
- // padding: var(--_lt-pg);
10
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
- // width: 50%;
12
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
- width: var(
14
- --_sf-el-wh-st-mx,
15
- calc(
16
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
- // height: var(--_ctm-lt-ht);
23
- // height: ;
24
- // height: auto;
25
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
26
- // --_aspect-ratio: calc(
27
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
28
- // );
29
-
30
- // &[data-element-sub-child="true"] {
31
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
32
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
33
- // }
34
-
35
- & > .wrapper {
36
- // width: 100%;
37
- // height: 100%;
38
- }
39
- &[data-show-shadow="false"] {
40
- --_show-shadow: none;
41
- }
42
-
43
- .accordion-element {
44
- background-color: var(
45
- --_ctm-mob-dn-fq-wt-bd-cr,
46
- var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
47
- );
48
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
- display: flex;
50
- flex-direction: column;
51
- --_sf-gp: var(
52
- --_ctm-mob-lt-im-sg,
53
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
54
- );
55
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
- row-gap: var(--_sf-gp);
57
- width: 100%;
58
- // height: 100%;
59
- border-color: var(
60
- --_ctm-mob-dn-fq-wt-br-cr,
61
- var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
62
- );
63
- border-style: var(
64
- --_ctm-mob-dn-fq-wt-br-se,
65
- var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
66
- );
67
- border-width: var(
68
- --_ctm-mob-dn-fq-wt-br-wh,
69
- var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
70
- );
71
- border-radius: var(
72
- --_ctm-mob-dn-fq-wt-br-rs,
73
- var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
74
- );
75
- box-shadow: var(
76
- --_show-shadow,
77
- var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
78
- var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
79
- var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
80
- var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
81
- );
82
-
83
- &[data-divider-show="true"] {
84
- --_sf-dvdr: var(
85
- --_ctm-mob-dn-dr-dr-wh,
86
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
87
- )
88
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
89
- var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
90
- --_sf-dvdr-gap: var(--_sf-gp);
91
- }
92
- &[data-icon-position="Left"] {
93
- --_sf-fd: row-reverse;
94
- --_sf-jc: flex-end;
95
- }
96
- &[data-show-icon="false"] {
97
- --_sf-show-icon-ff: none;
98
- }
99
- &[data-divider-show="true"] {
100
- // .accordion-item:not(:last-child) {
101
- // border-bottom: var(
102
- // --_ctm-mob-dn-dr-dr-wh,
103
- // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
104
- // )
105
- // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
106
- // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
107
- // }
108
- }
109
- }
110
-
111
- .accordion-item {
112
- width: 100%;
113
- display: grid;
114
- overflow: clip;
115
- // height: 30px;
116
-
117
- // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
118
- // padding-inline: var(
119
- // --_ctm-mob-lt-im-hl-pg,
120
- // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
121
- // );
122
-
123
- padding: var(
124
- --_ctm-mob-dn-cd-an-im-pg-im,
125
- var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
126
- );
127
- grid-template-rows: var(
128
- --_self-active-gtr,
129
- minmax(
130
- var(
131
- --_ctm-mob-dn-cd-an-im-in-se,
132
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
133
- ),
134
- auto
135
- )
136
- 0px
137
- );
138
- // transition: grid-template-rows 0.45s ease-in-out;
139
-
140
- --_sf-pd-cd: var(--_sf-dvdr-gap);
141
- // updated css
142
- border-color: var(
143
- --_ctm-mob-dn-cd-an-im-br-cr,
144
- var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
145
- );
146
- border-style: var(
147
- --_ctm-mob-dn-cd-an-im-br-se,
148
- var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
149
- );
150
- border-width: var(
151
- --_ctm-mob-dn-cd-an-im-br-wh,
152
- var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
153
- );
154
- border-radius: var(
155
- --_ctm-mob-dn-cd-an-im-br-rs,
156
- var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
157
- );
158
- box-shadow: var(
159
- --_show-shadow,
160
- var(
161
- --_ctm-mob-dn-cd-an-im-sw-ae,
162
- var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
163
- )
164
- var(
165
- --_ctm-mob-dn-cd-an-im-sw-br,
166
- var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
167
- )
168
- var(
169
- --_ctm-mob-dn-cd-an-im-sw-sd,
170
- var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
171
- )
172
- var(
173
- --_ctm-mob-dn-cd-an-im-sw-sd,
174
- var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
175
- )
176
- );
177
-
178
- // &:not(:last-of-type) {
179
- // &::after {
180
- // content: "";
181
- // height: var(--_ctm-dn-dr-dr-wh, 1px);
182
- // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
183
-
184
- // // border-block-end: var(--_sf-dvdr);
185
- // }
186
- // }
187
-
188
- .accordion-title {
189
- display: flex;
190
- flex-direction: var(--_sf-fd, row);
191
- align-content: center;
192
- gap: var(--_sf-cd-gp);
193
- align-items: center;
194
- justify-content: var(--_sf-jc, space-between);
195
- cursor: pointer;
196
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
197
- background-color: var(
198
- --_ctm-mob-dn-cd-an-im-bd-cr,
199
- var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
200
- );
201
- padding: var(
202
- --_ctm-mob-dn-cd-an-im-pg-te,
203
- var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
204
- );
205
-
206
- // p {
207
- // color: var(
208
- // --_ctm-mob-dn-cd-an-im-cr,
209
- // var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
210
- // );
211
- // font-family: var(
212
- // --_ctm-mob-dn-cd-an-im-ft-fy,
213
- // var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
214
- // ),
215
-
216
- // font-size: var(
217
- // --_ctm-mob-dn-cd-an-im-ft-se,
218
- // var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
219
- // );
220
- // font-weight: var(
221
- // --_ctm-mob-dn-cd-an-im-ft-wt,
222
- // var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
223
- // );
224
- // font-style: var(
225
- // --_ctm-mob-dn-cd-an-im-ft-se-ic,
226
- // var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
227
- // );
228
- // text-align: var(
229
- // --_ctm-mob-dn-cd-an-im-tt-an,
230
- // var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
231
- // );
232
- // letter-spacing: var(
233
- // --_ctm-mob-dn-cd-an-im-lr-sg,
234
- // var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
235
- // );
236
- // line-height: var(
237
- // --_ctm-mob-dn-cd-an-im-le-ht,
238
- // var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
239
- // );
240
- // text-decoration: var(
241
- // --_ctm-mob-dn-cd-an-im-ue,
242
- // var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
243
- // );
244
- // }
245
- color: var(
246
- --_ctm-mob-dn-cd-an-im-cr,
247
- var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
248
- );
249
- font-family: var(
250
- --_ctm-mob-dn-cd-an-im-ft-fy,
251
- var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
252
- );
253
- font-size: var(
254
- --_ctm-mob-dn-cd-an-im-ft-se,
255
- var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
256
- );
257
- font-weight: var(
258
- --_ctm-mob-dn-cd-an-im-ft-wt,
259
- var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
260
- );
261
- font-style: var(
262
- --_ctm-mob-dn-cd-an-im-ft-se-ic,
263
- var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
264
- );
265
- text-align: var(
266
- --_ctm-mob-dn-cd-an-im-tt-an,
267
- var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
268
- );
269
- letter-spacing: var(
270
- --_ctm-mob-dn-cd-an-im-lr-sg,
271
- var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
272
- );
273
- line-height: var(
274
- --_ctm-mob-dn-cd-an-im-le-ht,
275
- var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
276
- );
277
- text-decoration: var(
278
- --_ctm-mob-dn-cd-an-im-ue,
279
- var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
280
- );
281
- .icon {
282
- display: var(--_sf-show-icon-ff, flex);
283
- svg {
284
- width: var(
285
- --_ctm-mab-dn-cd-an-im-in-se,
286
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
287
- );
288
- height: var(
289
- --_ctm-mob-dn-cd-an-im-in-se,
290
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
291
- );
292
- path {
293
- stroke: var(
294
- --_ctm-mob-dn-cd-an-im-in-c1,
295
- var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
296
- );
297
- }
298
- }
299
- }
300
- }
301
- .accordion-description {
302
- display: none;
303
- }
304
- // .accordion-description {
305
- // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
306
- // padding-block-end: var(--_sf-dc-pd-bt);
307
- // p {
308
- // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
309
- // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
310
-
311
- // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
312
- // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
313
- // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
314
- // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
315
- // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
316
- // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
317
- // }
318
- // }
319
-
320
- &[data-state="open"] {
321
- // overflow: inherit;
322
- // height: auto;
323
-
324
- padding: var(
325
- --_ctm-mob-dn-ed-an-im-pg-im,
326
- var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
327
- );
328
- gap: var(
329
- --_ctm-mob-lt-te-ad-dn-sg,
330
- var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
331
- );
332
-
333
- --_self-active-gtr: minmax(
334
- var(
335
- --_ctm-mob-dn-cd-an-im-in-se,
336
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
337
- ),
338
- auto
339
- )
340
- minmax(50px, auto);
341
-
342
- --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
343
- --_sf-dc-mb: var(--_sf-cd-gp);
344
- --_sf-tt-pd: 0px;
345
- --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
346
-
347
- border-color: var(
348
- --_ctm-mob-dn-ed-an-im-br-cr,
349
- var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
350
- );
351
- border-style: var(
352
- --_ctm-mob-dn-ed-an-im-br-se,
353
- var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
354
- );
355
- border-width: var(
356
- --_ctm-mob-dn-ed-an-im-br-wh,
357
- var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
358
- );
359
- border-radius: var(
360
- --_ctm-mob-dn-ed-an-im-br-rs,
361
- var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
362
- );
363
- box-shadow: var(
364
- --_show-shadow,
365
- var(
366
- --_ctm-mob-dn-ed-an-im-sw-ae,
367
- var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
368
- )
369
- var(
370
- --_ctm-mob-dn-ed-an-im-sw-br,
371
- var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
372
- )
373
- var(
374
- --_ctm-mob-dn-ed-an-im-sw-sd,
375
- var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
376
- )
377
- var(
378
- --_ctm-mob-dn-ed-an-im-sw-cr,
379
- var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
380
- )
381
- );
382
- .accordion-title {
383
- display: flex;
384
- flex-direction: var(--_sf-fd, row);
385
- align-content: center;
386
- gap: var(--_sf-cd-gp);
387
- align-items: center;
388
- justify-content: var(--_sf-jc, space-between);
389
- cursor: pointer;
390
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
391
- background-color: var(
392
- --_ctm-mob-dn-ed-an-im-bd-cr,
393
- var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
394
- );
395
- padding: var(
396
- --_ctm-mob-dn-ed-an-im-pg-te,
397
- var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
398
- );
399
-
400
- color: var(
401
- --_ctm-mob-dn-ed-an-im-cr,
402
- var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
403
- );
404
- font-family: var(
405
- --_ctm-mob-dn-ed-an-im-ft-fy,
406
- var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
407
- );
408
- font-size: var(
409
- --_ctm-mob-dn-ed-an-im-ft-se,
410
- var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
411
- );
412
- font-weight: var(
413
- --_ctm-mob-dn-ed-an-im-ft-wt,
414
- var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
415
- );
416
- font-style: var(
417
- --_ctm-mob-dn-ed-an-im-ft-se-ic,
418
- var(--_tst-tab-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic))
419
- );
420
- text-align: var(
421
- --_ctm-mob-dn-ed-an-im-tt-an,
422
- var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
423
- );
424
- letter-spacing: var(
425
- --_ctm-mob-dn-ed-an-im-lr-sg,
426
- var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
427
- );
428
- line-height: var(
429
- --_ctm-mob-dn-ed-an-im-le-ht,
430
- var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
431
- );
432
- // text-decoration: var(
433
- // --_ctm-dn-ed-an-im-lh,
434
- // var(--_ctm-dn-ed-an-im-ue),
435
- // var(--_tst-dn-cd-an-im-lh)
436
- // );
437
- text-decoration: var(
438
- --_ctm-mob-dn-ed-an-im-ue,
439
- var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
440
- );
441
- .icon {
442
- display: var(--_sf-show-icon-ff, flex);
443
- svg {
444
- width: var(
445
- --_ctm-mob-dn-ed-an-im-in-se,
446
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
447
- );
448
- height: var(
449
- --_ctm-mob-dn-ed-an-im-in-se,
450
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
451
- );
452
- path {
453
- stroke: var(
454
- --_ctm-mob-dn-ed-an-im-in-c1,
455
- var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
456
- );
457
- }
458
- }
459
- }
460
- }
461
- .accordion-description {
462
- display: block;
463
- // padding-block-end: var(--_sf-dc-pd-bt);
464
- background-color: var(
465
- --_ctm-mob-dn-ed-an-im-bd-cr-dc,
466
- var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
467
- );
468
- padding: var(
469
- --_ctm-mob-dn-ed-an-im-pg-dc,
470
- var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
471
- );
472
-
473
- color: var(
474
- --_ctm-mob-dn-ed-an-im-cr-dc,
475
- var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
476
- );
477
- font-family: var(
478
- --_ctm-mob-dn-ed-an-im-ft-fy-dc,
479
- var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
480
- );
481
- font-size: var(
482
- --_ctm-mob-dn-ed-an-im-ft-se-dc,
483
- var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
484
- );
485
- font-weight: var(
486
- --_ctm-mob-dn-ed-an-im-ft-wt-dc,
487
- var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
488
- );
489
- font-style: var(
490
- --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
491
- var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
492
- );
493
- text-align: var(
494
- --_ctm-mob-dn-ed-an-im-tt-an-dc,
495
- var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
496
- );
497
- letter-spacing: var(
498
- --_ctm-mob-dn-ed-an-im-lr-sg-dc,
499
- var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
500
- );
501
- line-height: var(
502
- --_ctm-mob-dn-ed-an-im-le-ht-dc,
503
- var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
504
- );
505
- text-decoration: var(
506
- --_ctm-mob-dn-ed-an-im-ue-dc,
507
- var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
508
- );
509
- }
510
- .accordion-title {
511
- position: relative;
512
- }
513
- &[data-show-divider="true"] {
514
- .accordion-title:not(:last-child)::before {
515
- content: "";
516
- position: absolute;
517
- left: 0;
518
- right: 0;
519
- bottom: calc(
520
- -1 *
521
- (
522
- var(
523
- --_ctm-mob-lt-te-ad-dn-sg,
524
- var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
525
- ) /
526
- 2
527
- )
528
- );
529
-
530
- height: var(
531
- --_ctm-mob-dn-ed-an-im-dr-wt,
532
- var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
533
- );
534
- background-color: var(
535
- --_ctm-mob-dn-ed-an-im-dr-cr,
536
- var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
537
- );
538
- }
539
- }
540
- }
541
- }
542
- .divider {
543
- // height: var(
544
- // --_ctm-mob-dn-wt-se-dr-wt,
545
- // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
546
- // );
547
- // background-color: var(
548
- // --_ctm-mob-dn-wt-se-dr-cr,
549
- // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
550
- // );
551
- border: none; /* Remove default border */
552
- height: var(
553
- --_ctm-mob-dn-dr-dr-wt,
554
- var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
555
- ); /* Set thickness */
556
- background-color: var(
557
- --_ctm-mob-dn-dr-dr-cr,
558
- var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
559
- ); /* Set color */
560
- // margin: 20px 0; /* Optional spacing */
561
- // border-radius: 2px;
562
- }
563
- }
564
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="faq"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ // width: 50%;
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ width: var(
14
+ --_sf-el-wh-st-mx,
15
+ calc(
16
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
+ // height: var(--_ctm-lt-ht);
23
+ // height: ;
24
+ // height: auto;
25
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
26
+ // --_aspect-ratio: calc(
27
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
28
+ // );
29
+
30
+ // &[data-element-sub-child="true"] {
31
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
32
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
33
+ // }
34
+
35
+ & > .wrapper {
36
+ // width: 100%;
37
+ // height: 100%;
38
+ }
39
+ &[data-show-shadow="false"] {
40
+ --_show-shadow: none;
41
+ }
42
+
43
+ .accordion-element {
44
+ background-color: var(
45
+ --_ctm-mob-dn-fq-wt-bd-cr,
46
+ var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
47
+ );
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
+ display: flex;
50
+ flex-direction: column;
51
+ --_sf-gp: var(
52
+ --_ctm-mob-lt-im-sg,
53
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
54
+ );
55
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
+ row-gap: var(--_sf-gp);
57
+ width: 100%;
58
+ // height: 100%;
59
+ border-color: var(
60
+ --_ctm-mob-dn-fq-wt-br-cr,
61
+ var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
62
+ );
63
+ border-style: var(
64
+ --_ctm-mob-dn-fq-wt-br-se,
65
+ var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
66
+ );
67
+ border-width: var(
68
+ --_ctm-mob-dn-fq-wt-br-wh,
69
+ var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
70
+ );
71
+ border-radius: var(
72
+ --_ctm-mob-dn-fq-wt-br-rs,
73
+ var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
74
+ );
75
+ box-shadow: var(
76
+ --_show-shadow,
77
+ var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
78
+ var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
79
+ var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
80
+ var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
81
+ );
82
+
83
+ &[data-divider-show="true"] {
84
+ --_sf-dvdr: var(
85
+ --_ctm-mob-dn-dr-dr-wh,
86
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
87
+ )
88
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
89
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
90
+ --_sf-dvdr-gap: var(--_sf-gp);
91
+ }
92
+ &[data-icon-position="Left"] {
93
+ --_sf-fd: row-reverse;
94
+ --_sf-jc: flex-end;
95
+ }
96
+ &[data-show-icon="false"] {
97
+ --_sf-show-icon-ff: none;
98
+ }
99
+ &[data-divider-show="true"] {
100
+ // .accordion-item:not(:last-child) {
101
+ // border-bottom: var(
102
+ // --_ctm-mob-dn-dr-dr-wh,
103
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
104
+ // )
105
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
106
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
107
+ // }
108
+ }
109
+ }
110
+
111
+ .accordion-item {
112
+ width: 100%;
113
+ display: grid;
114
+ overflow: clip;
115
+ // height: 30px;
116
+
117
+ // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
118
+ // padding-inline: var(
119
+ // --_ctm-mob-lt-im-hl-pg,
120
+ // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
121
+ // );
122
+
123
+ padding: var(
124
+ --_ctm-mob-dn-cd-an-im-pg-im,
125
+ var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
126
+ );
127
+ grid-template-rows: var(
128
+ --_self-active-gtr,
129
+ minmax(
130
+ var(
131
+ --_ctm-mob-dn-cd-an-im-in-se,
132
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
133
+ ),
134
+ auto
135
+ )
136
+ 0px
137
+ );
138
+ // transition: grid-template-rows 0.45s ease-in-out;
139
+
140
+ --_sf-pd-cd: var(--_sf-dvdr-gap);
141
+ // updated css
142
+ border-color: var(
143
+ --_ctm-mob-dn-cd-an-im-br-cr,
144
+ var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
145
+ );
146
+ border-style: var(
147
+ --_ctm-mob-dn-cd-an-im-br-se,
148
+ var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
149
+ );
150
+ border-width: var(
151
+ --_ctm-mob-dn-cd-an-im-br-wh,
152
+ var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
153
+ );
154
+ border-radius: var(
155
+ --_ctm-mob-dn-cd-an-im-br-rs,
156
+ var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
157
+ );
158
+ box-shadow: var(
159
+ --_show-shadow,
160
+ var(
161
+ --_ctm-mob-dn-cd-an-im-sw-ae,
162
+ var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
163
+ )
164
+ var(
165
+ --_ctm-mob-dn-cd-an-im-sw-br,
166
+ var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
167
+ )
168
+ var(
169
+ --_ctm-mob-dn-cd-an-im-sw-sd,
170
+ var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
171
+ )
172
+ var(
173
+ --_ctm-mob-dn-cd-an-im-sw-sd,
174
+ var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
175
+ )
176
+ );
177
+
178
+ // &:not(:last-of-type) {
179
+ // &::after {
180
+ // content: "";
181
+ // height: var(--_ctm-dn-dr-dr-wh, 1px);
182
+ // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
183
+
184
+ // // border-block-end: var(--_sf-dvdr);
185
+ // }
186
+ // }
187
+
188
+ .accordion-title {
189
+ display: flex;
190
+ flex-direction: var(--_sf-fd, row);
191
+ align-content: center;
192
+ gap: var(--_sf-cd-gp);
193
+ align-items: center;
194
+ justify-content: var(--_sf-jc, space-between);
195
+ cursor: pointer;
196
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
197
+ background-color: var(
198
+ --_ctm-mob-dn-cd-an-im-bd-cr,
199
+ var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
200
+ );
201
+ padding: var(
202
+ --_ctm-mob-dn-cd-an-im-pg-te,
203
+ var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
204
+ );
205
+
206
+ // p {
207
+ // color: var(
208
+ // --_ctm-mob-dn-cd-an-im-cr,
209
+ // var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
210
+ // );
211
+ // font-family: var(
212
+ // --_ctm-mob-dn-cd-an-im-ft-fy,
213
+ // var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
214
+ // ),
215
+
216
+ // font-size: var(
217
+ // --_ctm-mob-dn-cd-an-im-ft-se,
218
+ // var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
219
+ // );
220
+ // font-weight: var(
221
+ // --_ctm-mob-dn-cd-an-im-ft-wt,
222
+ // var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
223
+ // );
224
+ // font-style: var(
225
+ // --_ctm-mob-dn-cd-an-im-ft-se-ic,
226
+ // var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
227
+ // );
228
+ // text-align: var(
229
+ // --_ctm-mob-dn-cd-an-im-tt-an,
230
+ // var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
231
+ // );
232
+ // letter-spacing: var(
233
+ // --_ctm-mob-dn-cd-an-im-lr-sg,
234
+ // var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
235
+ // );
236
+ // line-height: var(
237
+ // --_ctm-mob-dn-cd-an-im-le-ht,
238
+ // var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
239
+ // );
240
+ // text-decoration: var(
241
+ // --_ctm-mob-dn-cd-an-im-ue,
242
+ // var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
243
+ // );
244
+ // }
245
+ p {
246
+ color: var(
247
+ --_ctm-mob-dn-cd-an-im-cr,
248
+ var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
249
+ );
250
+ font-family: var(
251
+ --_ctm-mob-dn-cd-an-im-ft-fy,
252
+ var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
253
+ );
254
+ font-size: var(
255
+ --_ctm-mob-dn-cd-an-im-ft-se,
256
+ var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
257
+ );
258
+ font-weight: var(
259
+ --_ctm-mob-dn-cd-an-im-ft-wt,
260
+ var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
261
+ );
262
+ font-style: var(
263
+ --_ctm-mob-dn-cd-an-im-ft-se-ic,
264
+ var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
265
+ );
266
+ text-align: var(
267
+ --_ctm-mob-dn-cd-an-im-tt-an,
268
+ var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
269
+ );
270
+ letter-spacing: var(
271
+ --_ctm-mob-dn-cd-an-im-lr-sg,
272
+ var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
273
+ );
274
+ line-height: var(
275
+ --_ctm-mob-dn-cd-an-im-le-ht,
276
+ var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
277
+ );
278
+ text-decoration: var(
279
+ --_ctm-mob-dn-cd-an-im-ue,
280
+ var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
281
+ );
282
+ }
283
+ .icon {
284
+ display: var(--_sf-show-icon-ff, flex);
285
+ svg {
286
+ width: var(
287
+ --_ctm-mab-dn-cd-an-im-in-se,
288
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
289
+ );
290
+ height: var(
291
+ --_ctm-mob-dn-cd-an-im-in-se,
292
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
293
+ );
294
+ path {
295
+ stroke: var(
296
+ --_ctm-mob-dn-cd-an-im-in-c1,
297
+ var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
298
+ );
299
+ }
300
+ }
301
+ }
302
+ }
303
+ .accordion-description {
304
+ display: none;
305
+ }
306
+ // .accordion-description {
307
+ // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
308
+ // padding-block-end: var(--_sf-dc-pd-bt);
309
+ // p {
310
+ // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
311
+ // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
312
+
313
+ // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
314
+ // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
315
+ // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
316
+ // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
317
+ // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
318
+ // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
319
+ // }
320
+ // }
321
+
322
+ &[data-state="open"] {
323
+ // overflow: inherit;
324
+ // height: auto;
325
+
326
+ padding: var(
327
+ --_ctm-mob-dn-ed-an-im-pg-im,
328
+ var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
329
+ );
330
+ gap: var(
331
+ --_ctm-mob-lt-te-ad-dn-sg,
332
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
333
+ );
334
+
335
+ --_self-active-gtr: minmax(
336
+ var(
337
+ --_ctm-mob-dn-cd-an-im-in-se,
338
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
339
+ ),
340
+ auto
341
+ )
342
+ minmax(50px, auto);
343
+
344
+ --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
345
+ --_sf-dc-mb: var(--_sf-cd-gp);
346
+ --_sf-tt-pd: 0px;
347
+ --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
348
+
349
+ border-color: var(
350
+ --_ctm-mob-dn-ed-an-im-br-cr,
351
+ var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
352
+ );
353
+ border-style: var(
354
+ --_ctm-mob-dn-ed-an-im-br-se,
355
+ var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
356
+ );
357
+ border-width: var(
358
+ --_ctm-mob-dn-ed-an-im-br-wh,
359
+ var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
360
+ );
361
+ border-radius: var(
362
+ --_ctm-mob-dn-ed-an-im-br-rs,
363
+ var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
364
+ );
365
+ box-shadow: var(
366
+ --_show-shadow,
367
+ var(
368
+ --_ctm-mob-dn-ed-an-im-sw-ae,
369
+ var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
370
+ )
371
+ var(
372
+ --_ctm-mob-dn-ed-an-im-sw-br,
373
+ var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
374
+ )
375
+ var(
376
+ --_ctm-mob-dn-ed-an-im-sw-sd,
377
+ var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
378
+ )
379
+ var(
380
+ --_ctm-mob-dn-ed-an-im-sw-cr,
381
+ var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
382
+ )
383
+ );
384
+ .accordion-title {
385
+ display: flex;
386
+ flex-direction: var(--_sf-fd, row);
387
+ align-content: center;
388
+ gap: var(--_sf-cd-gp);
389
+ align-items: center;
390
+ justify-content: var(--_sf-jc, space-between);
391
+ cursor: pointer;
392
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
393
+ background-color: var(
394
+ --_ctm-mob-dn-ed-an-im-bd-cr,
395
+ var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
396
+ );
397
+ padding: var(
398
+ --_ctm-mob-dn-ed-an-im-pg-te,
399
+ var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
400
+ );
401
+
402
+ p {
403
+ color: var(
404
+ --_ctm-mob-dn-ed-an-im-cr,
405
+ var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
406
+ );
407
+ font-family: var(
408
+ --_ctm-mob-dn-ed-an-im-ft-fy,
409
+ var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
410
+ );
411
+ font-size: var(
412
+ --_ctm-mob-dn-ed-an-im-ft-se,
413
+ var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
414
+ );
415
+ font-weight: var(
416
+ --_ctm-mob-dn-ed-an-im-ft-wt,
417
+ var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
418
+ );
419
+ font-style: var(
420
+ --_ctm-mob-dn-ed-an-im-ft-se-ic,
421
+ var(--_tst-tab-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic))
422
+ );
423
+ text-align: var(
424
+ --_ctm-mob-dn-ed-an-im-tt-an,
425
+ var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
426
+ );
427
+ letter-spacing: var(
428
+ --_ctm-mob-dn-ed-an-im-lr-sg,
429
+ var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
430
+ );
431
+ line-height: var(
432
+ --_ctm-mob-dn-ed-an-im-le-ht,
433
+ var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
434
+ );
435
+ // text-decoration: var(
436
+ // --_ctm-dn-ed-an-im-lh,
437
+ // var(--_ctm-dn-ed-an-im-ue),
438
+ // var(--_tst-dn-cd-an-im-lh)
439
+ // );
440
+ text-decoration: var(
441
+ --_ctm-mob-dn-ed-an-im-ue,
442
+ var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
443
+ );
444
+ }
445
+ .icon {
446
+ display: var(--_sf-show-icon-ff, flex);
447
+ svg {
448
+ width: var(
449
+ --_ctm-mob-dn-ed-an-im-in-se,
450
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
451
+ );
452
+ height: var(
453
+ --_ctm-mob-dn-ed-an-im-in-se,
454
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
455
+ );
456
+ path {
457
+ stroke: var(
458
+ --_ctm-mob-dn-ed-an-im-in-c1,
459
+ var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
460
+ );
461
+ }
462
+ }
463
+ }
464
+ }
465
+ .accordion-description {
466
+ display: block;
467
+ // padding-block-end: var(--_sf-dc-pd-bt);
468
+ background-color: var(
469
+ --_ctm-mob-dn-ed-an-im-bd-cr-dc,
470
+ var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
471
+ );
472
+ padding: var(
473
+ --_ctm-mob-dn-ed-an-im-pg-dc,
474
+ var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
475
+ );
476
+ div {
477
+ font-family: var(
478
+ --_ctm-mob-dn-ed-an-im-ft-fy-dc,
479
+ var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
480
+ );
481
+ }
482
+ color: var(
483
+ --_ctm-mob-dn-ed-an-im-cr-dc,
484
+ var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
485
+ );
486
+ font-family: var(
487
+ --_ctm-mob-dn-ed-an-im-ft-fy-dc,
488
+ var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
489
+ );
490
+ font-size: var(
491
+ --_ctm-mob-dn-ed-an-im-ft-se-dc,
492
+ var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
493
+ );
494
+ font-weight: var(
495
+ --_ctm-mob-dn-ed-an-im-ft-wt-dc,
496
+ var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
497
+ );
498
+ font-style: var(
499
+ --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
500
+ var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
501
+ );
502
+ text-align: var(
503
+ --_ctm-mob-dn-ed-an-im-tt-an-dc,
504
+ var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
505
+ );
506
+ letter-spacing: var(
507
+ --_ctm-mob-dn-ed-an-im-lr-sg-dc,
508
+ var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
509
+ );
510
+ line-height: var(
511
+ --_ctm-mob-dn-ed-an-im-le-ht-dc,
512
+ var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
513
+ );
514
+ text-decoration: var(
515
+ --_ctm-mob-dn-ed-an-im-ue-dc,
516
+ var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
517
+ );
518
+ }
519
+
520
+ .accordion-title {
521
+ position: relative;
522
+ }
523
+ &[data-show-divider="true"] {
524
+ .accordion-title:not(:last-child)::before {
525
+ content: "";
526
+ position: absolute;
527
+ left: 0;
528
+ right: 0;
529
+ bottom: calc(
530
+ -1 *
531
+ (
532
+ var(
533
+ --_ctm-mob-lt-te-ad-dn-sg,
534
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
535
+ ) /
536
+ 2
537
+ )
538
+ );
539
+
540
+ height: var(
541
+ --_ctm-mob-dn-ed-an-im-dr-wt,
542
+ var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
543
+ );
544
+ background-color: var(
545
+ --_ctm-mob-dn-ed-an-im-dr-cr,
546
+ var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
547
+ );
548
+ }
549
+ }
550
+ }
551
+ }
552
+ .divider {
553
+ // height: var(
554
+ // --_ctm-mob-dn-wt-se-dr-wt,
555
+ // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
556
+ // );
557
+ // background-color: var(
558
+ // --_ctm-mob-dn-wt-se-dr-cr,
559
+ // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
560
+ // );
561
+ border: none; /* Remove default border */
562
+ height: var(
563
+ --_ctm-mob-dn-dr-dr-wt,
564
+ var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
565
+ ); /* Set thickness */
566
+ background-color: var(
567
+ --_ctm-mob-dn-dr-dr-cr,
568
+ var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
569
+ ); /* Set color */
570
+ // margin: 20px 0; /* Optional spacing */
571
+ // border-radius: 2px;
572
+ }
573
+ }
574
+ }