@sc-360-v2/storefront-cms-library 0.2.96 → 0.2.98

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.
@@ -0,0 +1,695 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ $wrapper: ".flex__menu__list__wrapper";
6
+ $menuItem: ".flex__menu__item";
7
+ $subMenuContainer: ".flex__submenu__container";
8
+ $nodatap: ".no__menu_item__p";
9
+ $subMenuItem: ".flex__sub__menu__item";
10
+ $subMenuItemText: ".flex__sub__menu__item__text";
11
+ $hrz: "[data-element-type='menu-v2'] > .hrz";
12
+ $vtl: "[data-element-type='menu-v2'] > .vtl";
13
+ $hamburger: ".flex__menu__hamburger";
14
+ $hamburgerActive: "[data-hamburger-active='true']";
15
+
16
+ @mixin hamburgerCSS() {
17
+ position: relative;
18
+ display: var(--_d-flex);
19
+ justify-content: prepareMediaVariable(--_ctm-dn-hr-os-vl-at);
20
+ & > div {
21
+ &#{$wrapper} {
22
+ position: absolute;
23
+ left: 0;
24
+ width: 100%;
25
+ top: 100%;
26
+ z-index: 2;
27
+ visibility: hidden;
28
+ opacity: 0;
29
+ max-height: 0px;
30
+ overflow: clip;
31
+ display: var(--_d-flex);
32
+ flex-direction: column;
33
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
34
+
35
+ &:is([data-hamburger-active="true"] > *) {
36
+ animation: animThree var(--_transition-duration) var(--_transition-timing-function) 1
37
+ forwards alternate;
38
+ }
39
+
40
+ & > #{$menuItem} {
41
+ align-items: flex-start;
42
+ flex-direction: column;
43
+ gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
44
+ & > #{$subMenuContainer} {
45
+ width: 100% !important;
46
+ position: static !important;
47
+ transform: none !important;
48
+ }
49
+ }
50
+
51
+ @keyframes animThree {
52
+ 100% {
53
+ max-height: 650px;
54
+ opacity: 1;
55
+ visibility: visible;
56
+ overflow-y: auto;
57
+ }
58
+ }
59
+ }
60
+ }
61
+
62
+ & > #{$hamburger} {
63
+ display: var(--_d-flex);
64
+ }
65
+ }
66
+
67
+ [data-div-type="element"] {
68
+ &[data-element-type="menu-v2"] {
69
+ width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
70
+ // var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
71
+ margin: prepareMediaVariable(--_ctm-lt-mn);
72
+
73
+ & > div {
74
+ &.wrapper {
75
+ width: 100%;
76
+ // padding: #{prepareMediaVariable(--_ctm-lt-pg)};
77
+ // background: prepareMediaVariable(--_ctm-dn-mu-cr-bd-cr);
78
+ // border-radius: prepareMediaVariable(--_ctm-dn-mu-cr-br-rs);
79
+
80
+ // &[data-show-border="true"] {
81
+ // border-color: prepareMediaVariable(--_ctm-dn-mu-cr-br-cr);
82
+ // border-width: prepareMediaVariable(--_ctm-dn-mu-cr-br-wh);
83
+ // border-style: prepareMediaVariable(--_ctm-dn-mu-cr-br-se);
84
+ // }
85
+ // &[data-show-boxshadow="true"] {
86
+ // box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae)
87
+ // prepareMediaVariable(--_ctm-dn-mu-cr-sw-br) prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd)
88
+ // prepareMediaVariable(--_ctm-dn-mu-cr-sw-cr);
89
+ // }
90
+
91
+ &.hrz {
92
+ & > div {
93
+ &#{$wrapper} {
94
+ display: var(--_d-flex);
95
+ flex-direction: row;
96
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
97
+ justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
98
+
99
+ & > p {
100
+ &#{$nodatap} {
101
+ font-size: 14px;
102
+ color: var(--_gray-500);
103
+ }
104
+ }
105
+ }
106
+ }
107
+ }
108
+
109
+ &.vtl {
110
+ & > div {
111
+ &#{$wrapper} {
112
+ display: var(--_d-flex);
113
+ flex-direction: column;
114
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
115
+ }
116
+ }
117
+ }
118
+
119
+ & > div {
120
+ &#{$wrapper} {
121
+ padding: #{prepareMediaVariable(--_ctm-lt-pg)};
122
+ background: prepareMediaVariable(--_ctm-dn-mu-cr-bd-cr);
123
+ border-radius: prepareMediaVariable(--_ctm-dn-mu-cr-br-rs);
124
+
125
+ &[data-show-border="true"] {
126
+ border-color: prepareMediaVariable(--_ctm-dn-mu-cr-br-cr);
127
+ border-width: prepareMediaVariable(--_ctm-dn-mu-cr-br-wh);
128
+ border-style: prepareMediaVariable(--_ctm-dn-mu-cr-br-se);
129
+ }
130
+ &[data-show-boxshadow="true"] {
131
+ box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae)
132
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-br)
133
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd)
134
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-cr);
135
+ }
136
+ & > div {
137
+ &#{$menuItem} {
138
+ position: relative;
139
+ padding: var(
140
+ --_sf-it-at-pd,
141
+ var(--_sf-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-pg)})
142
+ );
143
+ background: var(
144
+ --_sf-it-at-bd,
145
+ var(--_sf-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-bd-cr)})
146
+ );
147
+ border-radius: var(
148
+ --_sf-it-at-br,
149
+ var(--_sf-it-hr-br, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-rs)})
150
+ );
151
+ display: var(--_d-flex);
152
+ align-items: center;
153
+ &:is(#{$vtl} *) {
154
+ align-items: flex-start;
155
+ flex-direction: column;
156
+ gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
157
+ }
158
+ &:hover {
159
+ --_sf-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-pg)};
160
+ --_sf-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-bd-cr)};
161
+ --_sf-it-hr-br: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-rs)};
162
+ --_sf-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-cr)};
163
+ --_sf-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-wh)};
164
+ --_sf-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-se)};
165
+
166
+ --_sf-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-sw-ae)};
167
+ --_sf-it-hr-blr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-sw-br)};
168
+ --_sf-it-hr-spr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-sw-sd)};
169
+ --_sf-it-hr-bscl: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-sw-cr)};
170
+
171
+ --_sf-it-hr-ff: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-ft-fy)};
172
+ --_sf-it-hr-fs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-ft-se)};
173
+ --_sf-it-hr-fclr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-cr)};
174
+ --_sf-it-hr-fw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-ft-wt)};
175
+
176
+ --_sf-it-hr-fsi: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-ft-se-ic)};
177
+ --_sf-it-hr-td: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-ue)};
178
+ --_sf-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-tt-an)};
179
+ --_sf-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-lr-sg)};
180
+ --_sf-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-le-ht)};
181
+ }
182
+ &.active {
183
+ --_sf-it-at-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-pg)};
184
+ --_sf-it-at-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-bd-cr)};
185
+ --_sf-it-at-br: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-rs)};
186
+ --_sf-it-at-brc: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-cr)};
187
+ --_sf-it-at-bw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-wh)};
188
+ --_sf-it-at-bs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-se)};
189
+
190
+ --_sf-it-at-bsa: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-sw-ae)};
191
+ --_sf-it-at-blr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-sw-br)};
192
+ --_sf-it-at-spr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-sw-sd)};
193
+ --_sf-it-at-bscl: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-sw-cr)};
194
+
195
+ --_sf-it-at-ff: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-ft-fy)};
196
+ --_sf-it-at-fs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-ft-se)};
197
+ --_sf-it-at-fclr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-cr)};
198
+ --_sf-it-at-fw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-ft-wt)};
199
+ --_sf-it-at-fsi: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-ft-se-ic)};
200
+ --_sf-it-at-td: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-ue)};
201
+ --_sf-it-at-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-tt-an)};
202
+ --_sf-it-at-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-lr-sg)};
203
+ --_sf-it-at-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-le-ht)};
204
+ }
205
+
206
+ &[data-show-border="true"] {
207
+ border-color: var(
208
+ --_sf-it-at-brc,
209
+ var(--_sf-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-cr)})
210
+ );
211
+ border-width: var(
212
+ --_sf-it-at-bw,
213
+ var(--_sf-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-wh)})
214
+ );
215
+ border-style: var(
216
+ --_sf-it-at-bs,
217
+ var(--_sf-it-hr-bs, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-se))
218
+ );
219
+ }
220
+ &[data-show-boxshadow="true"] {
221
+ box-shadow: var(
222
+ --_sf-it-at-bsa,
223
+ var(--_sf-it-hr-bsa, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-ae)})
224
+ )
225
+ var(
226
+ --_sf-it-at-blr,
227
+ var(--_sf-it-hr-blr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-br)})
228
+ )
229
+ var(
230
+ --_sf-it-at-spr,
231
+ var(--_sf-it-hr-spr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-sd)})
232
+ )
233
+ var(
234
+ --_sf-it-at-bscl,
235
+ var(--_sf-it-hr-bscl, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-cr))
236
+ );
237
+ }
238
+
239
+ & > a {
240
+ display: var(--_d-flex);
241
+ justify-content: space-between;
242
+ align-items: center;
243
+ gap: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp);
244
+ & > span {
245
+ display: var(--_d-flex);
246
+ font-family: var(
247
+ --_sf-it-at-ff,
248
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)})
249
+ ),
250
+ sans-serif;
251
+ font-size: var(
252
+ --_sf-it-at-fs,
253
+ var(--_sf-it-hr-fs, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se)})
254
+ );
255
+ color: var(
256
+ --_sf-it-at-fclr,
257
+ var(--_sf-it-hr-fclr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-cr)})
258
+ );
259
+ font-weight: var(
260
+ --_sf-it-at-fw,
261
+ var(--_sf-it-hr-fw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-wt)})
262
+ );
263
+ font-style: var(
264
+ --_sf-it-at-fsi,
265
+ var(
266
+ --_sf-it-hr-fsi,
267
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se-ic)}
268
+ )
269
+ );
270
+ text-decoration: var(
271
+ --_sf-it-at-td,
272
+ var(--_sf-it-hr-td, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ue)})
273
+ );
274
+ text-align: var(
275
+ --_sf-it-at-tae,
276
+ var(--_sf-it-hr-tae, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-an)})
277
+ );
278
+ letter-spacing: var(
279
+ --_sf-it-at-ls,
280
+ var(--_sf-it-hr-ls, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-lr-sg)})
281
+ );
282
+ line-height: var(
283
+ --_sf-it-at-lh,
284
+ var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)})
285
+ );
286
+
287
+ &.flex__menu__item__icon {
288
+ &[data-rotate="true"] {
289
+ --_sf-svg-tr: 180deg;
290
+ }
291
+ svg {
292
+ width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se);
293
+ height: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se);
294
+ transform: rotate(#{var(--_sf-svg-tr, 0deg)});
295
+ transition: transform var(--_transition-duration)
296
+ var(--_transition-timing-function);
297
+
298
+ path {
299
+ stroke: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1);
300
+ }
301
+ }
302
+ }
303
+ }
304
+ }
305
+
306
+ // Sub Item Container
307
+
308
+ & > ul {
309
+ &#{$subMenuContainer} {
310
+ background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
311
+ border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
312
+ padding: prepareMediaVariable(--_ctm-dn-sb-mu-cr-pg);
313
+
314
+ &:is(#{$hrz} *) {
315
+ position: absolute;
316
+ left: calc(50% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x)});
317
+ width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
318
+ top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
319
+ transform: translateX(-50%);
320
+ }
321
+ &:is(#{$vtl} *) {
322
+ width: 100%;
323
+ }
324
+
325
+ max-height: 0px;
326
+ overflow: clip;
327
+ animation: animTwo var(--_transition-duration)
328
+ var(--_transition-timing-function) 1 forwards alternate;
329
+
330
+ @keyframes animTwo {
331
+ 100% {
332
+ max-height: 500px;
333
+ overflow-y: auto;
334
+ }
335
+ }
336
+
337
+ &[data-show-border="true"] {
338
+ border-width: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-wh);
339
+ border-color: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-cr);
340
+ border-style: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-se);
341
+ }
342
+ &[data-show-boxshadow="true"] {
343
+ box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
344
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
345
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
346
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
347
+ }
348
+
349
+ & > li {
350
+ &#{$subMenuItem} {
351
+ display: var(--_d-flex);
352
+ flex-direction: column;
353
+
354
+ padding: var(
355
+ --_sf-sb-it-at-pd,
356
+ var(
357
+ --_sf-sb-it-hr-pd,
358
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg)}
359
+ )
360
+ );
361
+ background: var(
362
+ --_sf-sb-it-at-bd,
363
+ var(
364
+ --_sf-sb-it-hr-bd,
365
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)}
366
+ )
367
+ );
368
+ border-radius: var(
369
+ --_sf-sb-it-at-br,
370
+ var(
371
+ --_sf-sb-it-hr-br,
372
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)}
373
+ )
374
+ );
375
+
376
+ &[data-show-border="true"] {
377
+ border-color: var(
378
+ --_sf-sb-it-at-brc,
379
+ var(
380
+ --_sf-sb-it-hr-brc,
381
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)}
382
+ )
383
+ );
384
+ border-width: var(
385
+ --_sf-sb-it-at-bw,
386
+ var(
387
+ --_sf-sb-it-hr-bw,
388
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)}
389
+ )
390
+ );
391
+ border-style: var(
392
+ --_sf-sb-it-at-bs,
393
+ var(
394
+ --_sf-sb-it-hr-bs,
395
+ prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se)
396
+ )
397
+ );
398
+ }
399
+ &[data-show-boxshadow="true"] {
400
+ box-shadow: var(
401
+ --_sf-sb-it-at-bsa,
402
+ var(
403
+ --_sf-sb-it-hr-bsa,
404
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
405
+ )
406
+ )
407
+ var(
408
+ --_sf-sb-it-at-blr,
409
+ var(
410
+ --_sf-sb-it-hr-blr,
411
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
412
+ )
413
+ )
414
+ var(
415
+ --_sf-sb-it-at-spr,
416
+ var(
417
+ --_sf-sb-it-hr-spr,
418
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
419
+ )
420
+ )
421
+ var(
422
+ --_sf-sb-it-at-bscl,
423
+ var(
424
+ --_sf-sb-it-hr-bscl,
425
+ prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr)
426
+ )
427
+ );
428
+ }
429
+
430
+ &:hover {
431
+ --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg)};
432
+ --_sf-sb-it-hr-bd: #{prepareMediaVariable(
433
+ --_ctm-dn-sb-mu-im-se-hr-se-bd-cr
434
+ )};
435
+ --_sf-sb-it-hr-br: #{prepareMediaVariable(
436
+ --_ctm-dn-sb-mu-im-se-hr-se-br-rs
437
+ )};
438
+ --_sf-sb-it-hr-brc: #{prepareMediaVariable(
439
+ --_ctm-dn-sb-mu-im-se-hr-se-br-cr
440
+ )};
441
+ --_sf-sb-it-hr-bw: #{prepareMediaVariable(
442
+ --_ctm-dn-sb-mu-im-se-hr-se-br-wh
443
+ )};
444
+ --_sf-sb-it-hr-bs: #{prepareMediaVariable(
445
+ --_ctm-dn-sb-mu-im-se-hr-se-br-se
446
+ )};
447
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
448
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-ae
449
+ )};
450
+ --_sf-sb-it-hr-blr: #{prepareMediaVariable(
451
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-br
452
+ )};
453
+ --_sf-sb-it-hr-spr: #{prepareMediaVariable(
454
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-sd
455
+ )};
456
+ --_sf-sb-it-hr-bscl: #{prepareMediaVariable(
457
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-cr
458
+ )};
459
+
460
+ --_sf-sb-it-hr-ff: #{prepareMediaVariable(
461
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-fy
462
+ )};
463
+ --_sf-sb-it-hr-fs: #{prepareMediaVariable(
464
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-se
465
+ )};
466
+ --_sf-sb-it-hr-fclr: #{prepareMediaVariable(
467
+ --_ctm-dn-sb-mu-im-se-hr-se-cr
468
+ )};
469
+ --_sf-sb-it-hr-fw: #{prepareMediaVariable(
470
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-wt
471
+ )};
472
+
473
+ --_sf-sb-it-hr-fsi: #{prepareMediaVariable(
474
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic
475
+ )};
476
+ --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
477
+ --_sf-sb-it-hr-tae: #{prepareMediaVariable(
478
+ --_ctm-dn-sb-mu-im-se-hr-se-tt-an
479
+ )};
480
+ --_sf-sb-it-hr-ls: #{prepareMediaVariable(
481
+ --_ctm-dn-sb-mu-im-se-hr-se-lr-sg
482
+ )};
483
+ --_sf-sb-it-hr-lh: #{prepareMediaVariable(
484
+ --_ctm-dn-sb-mu-im-se-hr-se-le-ht
485
+ )};
486
+ }
487
+ &.active {
488
+ --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
489
+ --_sf-sb-it-at-bd: #{prepareMediaVariable(
490
+ --_ctm-dn-sb-mu-im-se-sd-se-bd-cr
491
+ )};
492
+ --_sf-sb-it-at-br: #{prepareMediaVariable(
493
+ --_ctm-dn-sb-mu-im-se-sd-se-br-rs
494
+ )};
495
+ --_sf-sb-it-at-brc: #{prepareMediaVariable(
496
+ --_ctm-dn-sb-mu-im-se-sd-se-br-cr
497
+ )};
498
+ --_sf-sb-it-at-bw: #{prepareMediaVariable(
499
+ --_ctm-dn-sb-mu-im-se-sd-se-br-wh
500
+ )};
501
+ --_sf-sb-it-at-bs: #{prepareMediaVariable(
502
+ --_ctm-dn-sb-mu-im-se-sd-se-br-se
503
+ )};
504
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
505
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-ae
506
+ )};
507
+ --_sf-sb-it-at-blr: #{prepareMediaVariable(
508
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-br
509
+ )};
510
+ --_sf-sb-it-at-spr: #{prepareMediaVariable(
511
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-sd
512
+ )};
513
+ --_sf-sb-it-at-bscl: #{prepareMediaVariable(
514
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-cr
515
+ )};
516
+
517
+ --_sf-sb-it-at-ff: #{prepareMediaVariable(
518
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-fy
519
+ )};
520
+ --_sf-sb-it-at-fs: #{prepareMediaVariable(
521
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-se
522
+ )};
523
+ --_sf-sb-it-at-fclr: #{prepareMediaVariable(
524
+ --_ctm-dn-sb-mu-im-se-sd-se-cr
525
+ )};
526
+ --_sf-sb-it-at-fw: #{prepareMediaVariable(
527
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-wt
528
+ )};
529
+ --_sf-sb-it-at-fsi: #{prepareMediaVariable(
530
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic
531
+ )};
532
+ --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
533
+ --_sf-sb-it-at-tae: #{prepareMediaVariable(
534
+ --_ctm-dn-sb-mu-im-se-sd-se-tt-an
535
+ )};
536
+ --_sf-sb-it-at-ls: #{prepareMediaVariable(
537
+ --_ctm-dn-sb-mu-im-se-sd-se-lr-sg
538
+ )};
539
+ --_sf-sb-it-at-lh: #{prepareMediaVariable(
540
+ --_ctm-dn-sb-mu-im-se-sd-se-le-ht
541
+ )};
542
+ }
543
+
544
+ & > a {
545
+ display: var(--_d-flex);
546
+ justify-content: space-between;
547
+ align-items: center;
548
+
549
+ & > span {
550
+ display: var(--_d-flex);
551
+
552
+ &#{$subMenuItemText} {
553
+ font-family: var(
554
+ --_sf-it-at-ff,
555
+ var(
556
+ --_sf-it-hr-ff,
557
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}
558
+ )
559
+ ),
560
+ sans-serif;
561
+ font-size: var(
562
+ --_sf-sb-it-at-fs,
563
+ var(
564
+ --_sf-sb-it-hr-fs,
565
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
566
+ )
567
+ );
568
+ color: var(
569
+ --_sf-sb-it-at-fclr,
570
+ var(
571
+ --_sf-sb-it-hr-fclr,
572
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
573
+ )
574
+ );
575
+ font-weight: var(
576
+ --_sf-sb-it-at-fw,
577
+ var(
578
+ --_sf-sb-it-hr-fw,
579
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-fw-se-ft-wt)}
580
+ )
581
+ );
582
+ font-style: var(
583
+ --_sf-sb-it-at-fsi,
584
+ var(
585
+ --_sf-sb-it-hr-fsi,
586
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
587
+ )
588
+ );
589
+ text-decoration: var(
590
+ --_sf-sb-it-at-td,
591
+ var(
592
+ --_sf-sb-it-hr-td,
593
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)}
594
+ )
595
+ );
596
+ text-align: var(
597
+ --_sf-sb-it-at-tae,
598
+ var(
599
+ --_sf-sb-it-hr-tae,
600
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
601
+ )
602
+ );
603
+ letter-spacing: var(
604
+ --_sf-sb-it-at-ls,
605
+ var(
606
+ --_sf-sb-it-hr-ls,
607
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
608
+ )
609
+ );
610
+ line-height: var(
611
+ --_sf-sb-it-at-lh,
612
+ var(
613
+ --_sf-sb-it-hr-lh,
614
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
615
+ )
616
+ );
617
+ }
618
+ }
619
+ }
620
+ }
621
+ }
622
+ }
623
+ }
624
+ }
625
+ }
626
+ }
627
+ }
628
+ & > #{$hamburger} {
629
+ display: var(--_d-none);
630
+ padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-pg)});
631
+ border-radius: var(--_sf-hm-hr-br, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-rs)});
632
+ background: var(--_sf-hm-hr-bd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-bd-cr)});
633
+
634
+ &[data-show-border="true"] {
635
+ border-style: var(--_sf-hm-hr-bs, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-se)});
636
+ border-width: var(--_sf-hm-hr-bw, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)});
637
+ border-color: var(--_sf-hm-hr-bc, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-cr)});
638
+ }
639
+
640
+ &[data-show-boxshadow="true"] {
641
+ box-shadow: var(--_sf-hm-hr-bsa, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-ae)})
642
+ var(--_sf-hm-hr-blr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-br)})
643
+ var(--_sf-hm-hr-spr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-sd)})
644
+ var(--_sf-hm-hr-bscl, prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-cr));
645
+ }
646
+
647
+ &:hover {
648
+ --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
649
+ --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
650
+
651
+ --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-pg)};
652
+ --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-rs)};
653
+ --_sf-hm-hr-bd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-bd-cr)};
654
+
655
+ --_sf-hm-hr-bs: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-se)};
656
+ --_sf-hm-hr-bw: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)};
657
+ --_sf-hm-hr-bc: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-cr)};
658
+
659
+ --_sf-hm-hr-bsa: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-ae)};
660
+ --_sf-hm-hr-blr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-br)};
661
+ --_sf-hm-hr-spr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-sd)};
662
+ --_sf-hm-hr-bscl: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-cr)};
663
+ }
664
+
665
+ & > svg {
666
+ width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
667
+ height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
668
+
669
+ path {
670
+ stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
671
+ }
672
+ }
673
+ }
674
+
675
+ @media only screen and (min-width: 10px) {
676
+ &.dk {
677
+ @include hamburgerCSS();
678
+ }
679
+ }
680
+
681
+ @media only screen and (min-width: 10px) and (max-width: 1023px) {
682
+ &.tb {
683
+ @include hamburgerCSS();
684
+ }
685
+ }
686
+
687
+ @media only screen and (min-width: 10px) and (max-width: 767px) {
688
+ &.mb {
689
+ @include hamburgerCSS();
690
+ }
691
+ }
692
+ }
693
+ }
694
+ }
695
+ }