@sc-360-v2/storefront-cms-library 0.3.71 → 0.3.73

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 (17) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-details.scss +0 -2
  3. package/dist/cart-products-sidebar.scss +6 -6
  4. package/dist/cartAttributes.scss +8 -5
  5. package/dist/category-groups-element.scss +8 -0
  6. package/dist/flex-text-editor.scss +267 -0
  7. package/dist/mega-menu.scss +7 -0
  8. package/dist/my-wishlist.scss +17 -0
  9. package/dist/option-bar.scss +763 -375
  10. package/dist/order-status.scss +34 -6
  11. package/dist/product-basic-elements.scss +6 -4
  12. package/dist/simple-list.scss +8 -8
  13. package/dist/skeleton.scss +1 -1
  14. package/dist/types/builder/enums/index.d.ts +6 -2
  15. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +2 -2
  16. package/dist/widget.scss +3 -0
  17. package/package.json +1 -1
package/dist/option-bar.scss CHANGED
@@ -1,51 +1,56 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="optionBar"] {
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
7
  width: var(
14
8
  --_sf-el-wh-st-mx,
15
9
  calc(
16
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
10
+ 1% *
11
+ var(
12
+ --_ctm-mob-ele-nw-wh-vl,
13
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
+ )
17
15
  )
18
16
  );
17
+
19
18
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
19
 
21
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
- // height: var(--_ctm-lt-ht);
23
- // height: ;
24
- // height: auto;
25
20
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
21
+
26
22
  // --_aspect-ratio: calc(
27
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
23
+ // 1 *
24
+ // (
25
+ // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
26
+ // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
27
+ // )
28
28
  // );
29
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
30
  & > .wrapper {
36
- // width: 100%;
37
- // height: 100%;
31
+ width: 100%;
32
+ height: 100%;
33
+ // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
34
+ // gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
35
+ // justify-content: var(--_justify-center);
36
+ // align-items: var(--_align-center);
38
37
  }
39
38
  &[data-show-shadow="false"] {
40
39
  --_show-shadow: none;
41
40
  }
41
+ .empty__view {
42
+ width: 100%;
43
+ display: flex;
44
+ justify-content: center;
45
+ }
42
46
 
43
- .accordion-element {
47
+ .allocation__profile__tabs {
48
+ width: 100%;
44
49
  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))
50
+ --_ctm-mob-dn-wt-se-bd-cr,
51
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
47
52
  );
48
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
53
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
54
  display: flex;
50
55
  flex-direction: column;
51
56
  --_sf-gp: var(
@@ -55,404 +60,787 @@
55
60
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
61
  row-gap: var(--_sf-gp);
57
62
  width: 100%;
58
- // height: 100%;
63
+ height: 100%;
59
64
  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))
65
+ --_ctm-mob-dn-wt-se-br-cr,
66
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
62
67
  );
63
68
  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))
69
+ --_ctm-mob-dn-wt-se-br-se,
70
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
66
71
  );
67
72
  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))
73
+ --_ctm-mob-dn-wt-se-br-wh,
74
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
70
75
  );
71
76
  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))
77
+ --_ctm-mob-dn-wt-se-br-rs,
78
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
74
79
  );
75
80
  box-shadow: var(
76
81
  --_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)))
82
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
83
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
84
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
85
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
81
86
  );
87
+ .profile__button {
88
+ &[data-show-shadow="false"] {
89
+ --_show-shadow: none;
90
+ }
91
+ &[data-icon-position="left"] {
92
+ --_sf-fd-bn: row;
93
+ }
94
+ &[data-icon-position="right"] {
95
+ --_sf-fd-bn: row-reverse;
96
+ }
97
+ &[data-icon-position="center"] {
98
+ --_sf-fd-bn: row;
99
+ }
82
100
 
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
- }
101
+ &:hover {
102
+ --_sf-hr-bd-cr: var(
103
+ --_ctm-mob-dn-me-hr-se-bd-cr,
104
+ var(--_ctm-tab-dn-tb-hr-se-bd-cr, var(--_ctm-dn-tb-hr-se-bd-cr))
105
+ );
106
+ --_sf-hr-br-cr: var(
107
+ --_ctm-mob-dn-tb-hr-se-br-cr,
108
+ var(--_ctm-tab-dn-tb-hr-se-br-cr, var(--_ctm-dn-tb-hr-se-br-cr))
109
+ );
110
+ --_sf-hr-br-se: var(
111
+ --_ctm-mob-dn-tb-hr-se-br-se,
112
+ var(--_ctm-tab-dn-tb-hr-se-br-se, var(--_ctm-dn-tb-hr-se-br-se))
113
+ );
114
+ --_sf-hr-br-wh: var(
115
+ --_ctm-mob-dn-tb-hr-se-br-wh,
116
+ var(--_ctm-tab-dn-tb-hr-se-br-wh, var(--_ctm-dn-tb-hr-se-br-wh))
117
+ );
118
+ --_sf-hr-br-rs: var(
119
+ --_ctm-mob-dn-tb-hr-se-br-rs,
120
+ var(--_ctm-tab-dn-tb-hr-se-br-rs, var(--_ctm-dn-tb-hr-se-br-rs))
121
+ );
122
+ --_sf-hr-at: var(
123
+ --_ctm-mob-dn-tb-hr-se-at,
124
+ var(--_ctm-tab-dn-tb-hr-se-at, var(--_ctm-dn-tb-hr-se-at))
125
+ );
126
+ --_sf-hr-in-ad-tt-sg: var(
127
+ --_ctm-mob-dn-tb-hr-se-in-ad-tt-sg,
128
+ var(--_ctm-tab-dn-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-tb-hr-se-in-ad-tt-sg))
129
+ );
110
130
 
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
- grid-template-rows: var(
124
- --_self-active-gtr,
125
- minmax(
126
- var(
127
- --_ctm-mob-dn-cd-an-im-in-se,
128
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
129
- ),
130
- auto
131
- )
132
- 0px
133
- );
134
- // transition: grid-template-rows 0.45s ease-in-out;
131
+ // for shadow
132
+ --_sf-hr-sw-ae: var(
133
+ --_ctm-mob-dn-tb-hr-se-sw-ae,
134
+ var(--_ctm-tab-dn-tb-hr-se-sw-ae, var(--_ctm-dn-tb-hr-se-sw-ae))
135
+ );
136
+ --_sf-hr-sw-br: var(
137
+ --_ctm-mob-dn-tb-hr-se-sw-br,
138
+ var(--_ctm-tab-dn-tb-hr-se-sw-br, var(--_ctm-dn-tb-hr-se-sw-br))
139
+ );
140
+ --_sf-hr-sw-hr: var(
141
+ --_ctm-mob-dn-tb-hr-se-sw-hr,
142
+ var(--_ctm-tab-dn-tb-hr-se-sw-hr, var(--_ctm-dn-tb-hr-se-sw-hr))
143
+ );
144
+ --_sf-hr-sw-cr: var(
145
+ --_ctm-mob-dn-tb-hr-se-sw-cr,
146
+ var(--_ctm-tab-dn-tb-hr-se-sw-cr, var(--_ctm-dn-tb-hr-se-sw-cr))
147
+ );
135
148
 
136
- --_sf-pd-cd: var(--_sf-dvdr-gap);
137
- // updated css
138
- border-color: var(
139
- --_ctm-mob-dn-cd-an-im-br-cr,
140
- var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
141
- );
142
- border-style: var(
143
- --_ctm-mob-dn-cd-an-im-br-se,
144
- var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
145
- );
146
- border-width: var(
147
- --_ctm-mob-dn-cd-an-im-br-wh,
148
- var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
149
- );
150
- border-radius: var(
151
- --_ctm-mob-dn-cd-an-im-br-rs,
152
- var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
153
- );
154
- box-shadow: var(
155
- --_show-shadow,
156
- var(
157
- --_ctm-mob-dn-cd-an-im-sw-ae,
158
- var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
159
- )
160
- var(
161
- --_ctm-mob-dn-cd-an-im-sw-br,
162
- var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
163
- )
164
- var(
165
- --_ctm-mob-dn-cd-an-im-sw-sd,
166
- var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
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
- );
149
+ // for font
150
+
151
+ --_sf-hr-cr: var(
152
+ --_ctm-mob-dn-tb-hr-se-cr,
153
+ var(--_ctm-tab-dn-tb-hr-se-cr, var(--_ctm-dn-tb-hr-se-cr))
154
+ );
155
+ --_sf-hr-ft-fy: var(
156
+ --_ctm-mob-dn-tb-hr-se-ft-fy,
157
+ var(--_ctm-tab-dn-tb-hr-se-ft-fy, var(--_ctm-dn-tb-hr-se-ft-fy))
158
+ );
159
+ --_sf-hr-ft-se: var(
160
+ --_ctm-mob-dn-tb-hr-se-ft-se,
161
+ var(--_ctm-tab-dn-tb-hr-se-ft-se, var(--_ctm-dn-tb-hr-se-ft-se))
162
+ );
163
+ --_sf-hr-ft-wt: var(
164
+ --_ctm-mob-dn-tb-hr-se-ft-wt,
165
+ var(--_ctm-tab-dn-tb-hr-se-ft-wt, var(--_ctm-dn-tb-hr-se-ft-wt))
166
+ );
167
+ --_sf-hr-ft-se-ic: var(
168
+ --_ctm-mob-dn-tb-hr-se-ft-se-ic,
169
+ var(--_ctm-tab-dn-tb-hr-se-ft-se-ic, var(--_ctm-dn-tb-hr-se-ft-se-ic))
170
+ );
171
+ --_sf-hr-tt-an: var(
172
+ --_ctm-mob-dn-tb-hr-se-tt-an,
173
+ var(--_ctm-tab-dn-tb-hr-se-tt-an, var(--_ctm-dn-tb-hr-se-tt-an))
174
+ );
175
+ --_sf-hr-lr-sg: var(
176
+ --_ctm-mob-dn-tb-hr-se-lr-sg,
177
+ var(--_ctm-tab-dn-tb-hr-se-lr-sg, var(--_ctm-dn-tb-hr-se-lr-sg))
178
+ );
179
+ --_sf-hr-le-ht: var(
180
+ --_ctm-mob-dn-tb-hr-se-le-ht,
181
+ var(--_ctm-tab-dn-tb-hr-se-le-ht, var(--_ctm-dn-tb-hr-se-le-ht))
182
+ );
183
+
184
+ --_sf-hr-in-se: var(
185
+ --_ctm-mob-dn-tb-hr-se-in-se,
186
+ var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
187
+ );
188
+ --_sf-hr-in-se: var(
189
+ --_ctm-mob-dn-tb-hr-se-in-se,
190
+ var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
191
+ );
192
+ --_sf-hr-in-c1: var(
193
+ --_ctm-mob-dn-tb-hr-se-in-c1,
194
+ var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1))
195
+ );
196
+ --_sf-hr-ue: var(
197
+ --_ctm-mob-dn-tb-hr-ue,
198
+ var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
199
+ );
173
200
 
174
- // &:not(:last-of-type) {
175
- // &::after {
176
- // content: "";
177
- // height: var(--_ctm-dn-dr-dr-wh, 1px);
178
- // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
201
+ // for pading and width
202
+ --_sf-hr-pg: var(
203
+ --_ctm-mob-dn-tb-hr-se-pg,
204
+ var(--_ctm-tab-dn-tb-hr-se-pg, var(--_ctm-dn-tb-hr-se-pg))
205
+ );
206
+ --_sf-hr-wh: var(
207
+ --_ctm-mob-dn-tb-hr-se-wh,
208
+ var(--_ctm-tab-dn-tb-hr-se-wh, var(--_ctm-dn-tb-hr-se-wh))
209
+ );
210
+
211
+ &[data-hover-show-shadow="false"] {
212
+ --_hover-show-shadow: none;
213
+ }
214
+ &[data-hover-show-icon="false"] {
215
+ --_hover-show-icon: none;
216
+ }
217
+ }
179
218
 
180
- // // border-block-end: var(--_sf-dvdr);
181
- // }
182
- // }
219
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-bd-cr));
183
220
 
184
- .accordion-title {
221
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tb-dt-se-pg));
185
222
  display: flex;
186
- flex-direction: var(--_sf-fd, row);
187
- align-content: center;
188
- gap: var(--_sf-cd-gp);
223
+ flex-direction: var(--_sf-fd-bn);
189
224
  align-items: center;
190
- justify-content: var(--_sf-jc, space-between);
191
- cursor: pointer;
192
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
193
- background-color: var(
194
- --_ctm-mob-dn-cd-an-im-bd-cr,
195
- var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
196
- );
197
225
 
198
- p {
199
- // padding-inline: var(--_sf-cd-gp);
200
- color: var(
201
- --_ctm-mob-dn-cd-an-im-cr,
202
- var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
203
- );
204
- font-family: var(
205
- --_ctm-mob-dn-cd-an-im-ft-fy,
206
- var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
207
- ),
208
- sans-serif;
209
- font-size: var(
210
- --_ctm-mob-dn-cd-an-im-ft-se,
211
- var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
212
- );
213
- font-weight: var(
214
- --_ctm-mob-dn-cd-an-im-ft-wt,
215
- var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
216
- );
217
- font-style: var(
218
- --_ctm-mob-dn-cd-an-im-ft-se-ic,
219
- var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
220
- );
221
- text-align: var(
222
- --_ctm-mob-dn-cd-an-im-tt-an,
223
- var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
224
- );
225
- letter-spacing: var(
226
- --_ctm-mob-dn-cd-an-im-lr-sg,
227
- var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
228
- );
229
- line-height: var(
230
- --_ctm-mob-dn-cd-an-im-le-ht,
231
- var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
232
- );
233
- text-decoration: var(
234
- --_ctm-mob-dn-cd-an-im-ue,
235
- var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
226
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-tb-dt-se-at));
227
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-in-ad-tt-sg));
228
+
229
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
230
+
231
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
232
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
233
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
234
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
235
+
236
+ &[data-show-border="true"] {
237
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
238
+
239
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-se));
240
+
241
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-wh));
242
+ }
243
+
244
+ // text styles
245
+
246
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));
247
+
248
+ font-family:
249
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy)), sans-serif;
250
+
251
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));
252
+
253
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-wt));
254
+
255
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se-ic));
256
+
257
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-an));
258
+
259
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-lr-sg));
260
+
261
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tb-dt-se-le-ht));
262
+
263
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
264
+
265
+ [data-element-style="Text"] {
266
+ display: inline-block;
267
+ width: 100%;
268
+ }
269
+
270
+ &[data-is-selected="true"] {
271
+ --_sf-sd-bd-cr: var(
272
+ --_ctm-mob-dn-me-sd-se-bd-cr,
273
+ var(--_ctm-tab-dn-tb-sd-se-bd-cr, var(--_ctm-dn-tb-sd-se-bd-cr))
274
+ );
275
+ --_sf-sd-br-cr: var(
276
+ --_ctm-mob-dn-tb-sd-se-br-cr,
277
+ var(--_ctm-tab-dn-tb-sd-se-br-cr, var(--_ctm-dn-tb-sd-se-br-cr))
278
+ );
279
+ --_sf-sd-br-se: var(
280
+ --_ctm-mob-dn-tb-sd-se-br-se,
281
+ var(--_ctm-tab-dn-tb-sd-se-br-se, var(--_ctm-dn-tb-sd-se-br-se))
282
+ );
283
+ --_sf-sd-br-wh: var(
284
+ --_ctm-mob-dn-tb-sd-se-br-wh,
285
+ var(--_ctm-tab-dn-tb-sd-se-br-wh, var(--_ctm-dn-tb-sd-se-br-wh))
286
+ );
287
+ --_sf-sd-br-rs: var(
288
+ --_ctm-mob-dn-tb-sd-se-br-rs,
289
+ var(--_ctm-tab-dn-tb-sd-se-br-rs, var(--_ctm-dn-tb-sd-se-br-rs))
290
+ );
291
+ --_sf-sd-at: var(
292
+ --_ctm-mob-dn-tb-sd-se-at,
293
+ var(--_ctm-tab-dn-tb-sd-se-at, var(--_ctm-dn-tb-sd-se-at))
294
+ );
295
+ --_sf-sd-in-ad-tt-sg: var(
296
+ --_ctm-mob-dn-tb-sd-se-in-ad-tt-sg,
297
+ var(--_ctm-tab-dn-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-tb-sd-se-in-ad-tt-sg))
298
+ );
299
+
300
+ // for shadow
301
+ --_sf-sd-sw-ae: var(
302
+ --_ctm-mob-dn-tb-sd-se-sw-ae,
303
+ var(--_ctm-tab-dn-tb-sd-se-sw-ae, var(--_ctm-dn-tb-sd-se-sw-ae))
304
+ );
305
+ --_sf-sd-sw-br: var(
306
+ --_ctm-mob-dn-tb-sd-se-sw-br,
307
+ var(--_ctm-tab-dn-tb-sd-se-sw-br, var(--_ctm-dn-tb-sd-se-sw-br))
308
+ );
309
+ --_sf-sd-sw-hr: var(
310
+ --_ctm-mob-dn-tb-sd-se-sw-hr,
311
+ var(--_ctm-tab-dn-tb-sd-se-sw-hr, var(--_ctm-dn-tb-sd-se-sw-hr))
312
+ );
313
+ --_sf-sd-sw-cr: var(
314
+ --_ctm-mob-dn-tb-sd-se-sw-cr,
315
+ var(--_ctm-tab-dn-tb-sd-se-sw-cr, var(--_ctm-dn-tb-sd-se-sw-cr))
316
+ );
317
+
318
+ // for font
319
+
320
+ --_sf-sd-cr: var(
321
+ --_ctm-mob-dn-tb-sd-se-cr,
322
+ var(--_ctm-tab-dn-tb-sd-se-cr, var(--_ctm-dn-tb-sd-se-cr))
323
+ );
324
+ --_sf-sd-ft-fy: var(
325
+ --_ctm-mob-dn-tb-sd-se-ft-fy,
326
+ var(--_ctm-tab-dn-tb-sd-se-ft-fy, var(--_ctm-dn-tb-sd-se-ft-fy))
327
+ );
328
+ --_sf-sd-ft-se: var(
329
+ --_ctm-mob-dn-tb-sd-se-ft-se,
330
+ var(--_ctm-tab-dn-tb-sd-se-ft-se, var(--_ctm-dn-tb-sd-se-ft-se))
236
331
  );
332
+ --_sf-sd-ft-wt: var(
333
+ --_ctm-mob-dn-tb-sd-se-ft-wt,
334
+ var(--_ctm-tab-dn-tb-sd-se-ft-wt, var(--_ctm-dn-tb-sd-se-ft-wt))
335
+ );
336
+ --_sf-sd-ft-se-ic: var(
337
+ --_ctm-mob-dn-tb-sd-se-ft-se-ic,
338
+ var(--_ctm-tab-dn-tb-sd-se-ft-se-ic, var(--_ctm-dn-tb-sd-se-ft-se-ic))
339
+ );
340
+ --_sf-sd-tt-an: var(
341
+ --_ctm-mob-dn-tb-sd-se-tt-an,
342
+ var(--_ctm-tab-dn-tb-sd-se-tt-an, var(--_ctm-dn-tb-sd-se-tt-an))
343
+ );
344
+ --_sf-sd-lr-sg: var(
345
+ --_ctm-mob-dn-tb-sd-se-lr-sg,
346
+ var(--_ctm-tab-dn-tb-sd-se-lr-sg, var(--_ctm-dn-tb-sd-se-lr-sg))
347
+ );
348
+ --_sf-sd-le-ht: var(
349
+ --_ctm-mob-dn-tb-sd-se-le-ht,
350
+ var(--_ctm-tab-dn-tb-sd-se-le-ht, var(--_ctm-dn-tb-sd-se-le-ht))
351
+ );
352
+
353
+ --_sf-sd-in-se: var(
354
+ --_ctm-mob-dn-tb-sd-se-in-se,
355
+ var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
356
+ );
357
+ --_sf-sd-in-se: var(
358
+ --_ctm-mob-dn-tb-sd-se-in-se,
359
+ var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
360
+ );
361
+ --_sf-sd-in-c1: var(
362
+ --_ctm-mob-dn-tb-sd-se-in-c1,
363
+ var(--_ctm-tab-dn-tb-sd-se-in-c1, var(--_ctm-dn-tb-sd-se-in-c1))
364
+ );
365
+ --_sf-sd-ue: var(
366
+ --_ctm-mob-dn-tb-hr-ue,
367
+ var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
368
+ );
369
+
370
+ // for pading and width
371
+ --_sf-sd-pg: var(
372
+ --_ctm-mob-dn-tb-sd-se-pg,
373
+ var(--_ctm-tab-dn-tb-sd-se-pg, var(--_ctm-dn-tb-sd-se-pg))
374
+ );
375
+ --_sf-sd-wh: var(
376
+ --_ctm-mob-dn-tb-sd-se-wh,
377
+ var(--_ctm-tab-dn-tb-sd-se-wh, var(--_ctm-dn-tb-sd-se-wh))
378
+ );
379
+
380
+ &[data-hover-show-shadow="false"] {
381
+ --_hover-show-shadow: none;
382
+ }
383
+ &[data-hover-show-icon="false"] {
384
+ --_hover-show-icon: none;
385
+ }
386
+
387
+ background-color: var(--_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-bd-cr));
388
+
389
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-tb-dt-se-pg));
390
+ display: flex;
391
+ flex-direction: var(--_sf-fd-bn);
392
+ align-items: center;
393
+
394
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-tb-dt-se-at));
395
+ gap: var(--_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-in-ad-tt-sg));
396
+
397
+ border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
398
+
399
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
400
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
401
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
402
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
403
+
404
+ &[data-show-border="true"] {
405
+ border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
406
+
407
+ border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-se));
408
+
409
+ border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-wh));
410
+ }
411
+
412
+ // text styles
413
+
414
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));
415
+
416
+ font-family:
417
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy)), sans-serif;
418
+
419
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));
420
+
421
+ font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-wt));
422
+
423
+ font-style: var(--_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se-ic));
424
+
425
+ text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-an));
426
+
427
+ letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-lr-sg));
428
+
429
+ line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-tb-dt-se-le-ht));
430
+
431
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
432
+
433
+ [data-element-style="Text"] {
434
+ display: inline-block;
435
+ width: 100%;
436
+ }
237
437
  }
238
- .icon {
239
- display: var(--_sf-show-icon-ff, flex);
240
- svg {
241
- width: var(
242
- --_ctm-mab-dn-cd-an-im-in-se,
243
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
244
- );
245
- height: var(
246
- --_ctm-mob-dn-cd-an-im-in-se,
247
- var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
438
+ }
439
+ .embla {
440
+ height: auto;
441
+ .embla__viewport {
442
+ .embla__container {
443
+ display: flex;
444
+ gap: prepareMediaVariable(--_ctm-dn-wt-se-im-gp);
445
+ .embla__slide {
446
+ width: unset;
447
+ }
448
+ }
449
+ }
450
+ }
451
+ }
452
+ .embla {
453
+ width: 100%;
454
+ height: 100%;
455
+ position: relative;
456
+ display: flex;
457
+ flex-direction: column;
458
+ padding: 10px;
459
+ // overflow: hidden;
460
+
461
+ .embla__viewport {
462
+ width: 100%;
463
+ height: 100%;
464
+ position: relative;
465
+ display: flex;
466
+ flex-direction: column;
467
+
468
+ overflow: hidden;
469
+
470
+ .embla__container {
471
+ width: 100%;
472
+ height: 100%;
473
+ display: grid;
474
+ grid-template-rows: 100%;
475
+
476
+ grid-template-columns: repeat(
477
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
478
+ calc(
479
+ 100% /
480
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
481
+ )
482
+ );
483
+
484
+ grid-auto-flow: column;
485
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
486
+
487
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
488
+ height: calc(100% - calc(50px + 10px));
489
+ }
490
+
491
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
492
+ height: calc(100% - calc(50px + 20px));
493
+ }
494
+
495
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
496
+ height: calc(
497
+ 100% - calc(
498
+ var(
499
+ --_ctm-mob-dn-pn-ds-dt-se,
500
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
501
+ ) +
502
+ 20px
503
+ )
248
504
  );
249
- path {
250
- stroke: var(
251
- --_ctm-mob-dn-cd-an-im-in-c1,
252
- var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
253
- );
505
+ }
506
+
507
+ .embla__slide {
508
+ width: 100%;
509
+ height: 100%;
510
+ & > img {
511
+ width: 100%;
512
+ height: 100%;
254
513
  }
255
514
  }
256
515
  }
257
516
  }
258
- .accordion-description {
259
- display: none;
517
+ &:not([data-display-style="Column"]) {
518
+ .embla__container {
519
+ grid-auto-columns: calc(
520
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
521
+ );
522
+ }
260
523
  }
261
- // .accordion-description {
262
- // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
263
- // padding-block-end: var(--_sf-dc-pd-bt);
264
- // p {
265
- // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
266
- // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
267
- // sans-serif;
268
- // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
269
- // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
270
- // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
271
- // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
272
- // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
273
- // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
274
- // }
275
- // }
276
-
277
- &[data-state="open"] {
278
- // overflow: inherit;
279
- // height: auto;
280
- gap: var(
281
- --_ctm-mob-lt-te-ad-dn-sg,
282
- var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
283
- );
284
-
285
- --_self-active-gtr: minmax(
286
- var(
287
- --_ctm-mob-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
- auto
291
- )
292
- minmax(50px, auto);
293
524
 
294
- --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
295
- --_sf-dc-mb: var(--_sf-cd-gp);
296
- --_sf-tt-pd: 0px;
297
- --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
525
+ .arrow-navigation {
526
+ display: flex;
527
+ position: absolute;
528
+ top: 50%;
529
+ left: 50%;
530
+ width: 100%;
531
+ justify-content: space-between;
532
+ transform: translate(-50%, -50%);
533
+ // padding-left: 20px;
298
534
 
299
- border-color: var(
300
- --_ctm-mob-dn-ed-an-im-br-cr,
301
- var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
302
- );
303
- border-style: var(
304
- --_ctm-mob-dn-ed-an-im-br-se,
305
- var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
535
+ &[data-control-type="Bottom-Overflow"] {
536
+ transform: translateX(-50%);
537
+ width: 100%;
538
+ justify-content: center;
539
+ gap: 12px;
540
+ top: unset;
541
+ bottom: 6px;
542
+ }
543
+ &[data-control-type="Bottom"] {
544
+ transform: unset;
545
+ position: static;
546
+ width: 100%;
547
+ justify-content: center;
548
+ gap: 12px;
549
+ margin-top: 10px;
550
+ }
551
+ }
552
+ &[data-control-type="Side"] {
553
+ .left-button,
554
+ .right-button {
555
+ background-color: transparent;
556
+ }
557
+ }
558
+ &[data-background-shape="Round"] {
559
+ .left-button,
560
+ .right-button {
561
+ background-color: #f2f5f5;
562
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
563
+ }
564
+ }
565
+ .left-button {
566
+ padding: 10px;
567
+ border-radius: 50%;
568
+ border: none;
569
+ width: var(
570
+ --_ctm-mob-dn-pn-as-aw-se,
571
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
306
572
  );
307
- border-width: var(
308
- --_ctm-mob-dn-ed-an-im-br-wh,
309
- var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
573
+ height: var(
574
+ --_ctm-mob-dn-pn-as-aw-se,
575
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
310
576
  );
311
- border-radius: var(
312
- --_ctm-mob-dn-ed-an-im-br-rs,
313
- var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
577
+
578
+ display: flex;
579
+ align-items: center;
580
+ justify-content: center;
581
+ cursor: pointer;
582
+ outline: none;
583
+ margin-left: 12px;
584
+ &:disabled {
585
+ & svg {
586
+ path {
587
+ stroke: #c3b7b7;
588
+ }
589
+ }
590
+ }
591
+ }
592
+ .right-button {
593
+ border-radius: 50%;
594
+ border: none;
595
+ width: var(
596
+ --_ctm-mob-dn-pn-as-aw-se,
597
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
314
598
  );
315
- box-shadow: var(
316
- --_show-shadow,
317
- var(
318
- --_ctm-mob-dn-ed-an-im-sw-ae,
319
- var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
320
- )
321
- var(
322
- --_ctm-mob-dn-ed-an-im-sw-br,
323
- var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
324
- )
325
- var(
326
- --_ctm-mob-dn-ed-an-im-sw-sd,
327
- var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
328
- )
329
- var(
330
- --_ctm-mob-dn-ed-an-im-sw-cr,
331
- var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
332
- )
599
+ height: var(
600
+ --_ctm-mob-dn-pn-as-aw-se,
601
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
333
602
  );
334
- .accordion-title {
335
- display: flex;
336
- flex-direction: var(--_sf-fd, row);
337
- align-content: center;
338
- gap: var(--_sf-cd-gp);
339
- align-items: center;
340
- justify-content: var(--_sf-jc, space-between);
341
- cursor: pointer;
342
- // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
343
- background-color: var(
344
- --_ctm-mob-dn-ed-an-im-bd-cr,
345
- var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
346
- );
347
-
348
- color: var(
349
- --_ctm-mob-dn-ed-an-im-cr,
350
- var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
351
- );
352
- font-family: var(
353
- --_ctm-mob-dn-ed-an-im-ft-fy,
354
- var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
355
- ),
356
- sans-serif;
357
- font-size: var(
358
- --_ctm-mob-dn-ed-an-im-ft-se,
359
- var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
360
- );
361
- font-weight: var(
362
- --_ctm-mob-dn-ed-an-im-ft-wt,
363
- var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
364
- );
365
- font-style: var(
366
- --_ctm-mob-dn-ed-an-im-ft-se-ic,
367
- var(--_tst-tab-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic))
368
- );
369
- text-align: var(
370
- --_ctm-mob-dn-ed-an-im-tt-an,
371
- var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
372
- );
373
- letter-spacing: var(
374
- --_ctm-mob-dn-ed-an-im-lr-sg,
375
- var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
376
- );
377
- line-height: var(
378
- --_ctm-mob-dn-ed-an-im-le-ht,
379
- var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
380
- );
381
- // text-decoration: var(
382
- // --_ctm-dn-ed-an-im-lh,
383
- // var(--_ctm-dn-ed-an-im-ue),
384
- // var(--_tst-dn-cd-an-im-lh)
385
- // );
386
- text-decoration: var(
387
- --_ctm-mob-dn-ed-an-im-ue,
388
- var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
389
- );
390
- .icon {
391
- display: var(--_sf-show-icon-ff, flex);
392
- svg {
393
- width: var(
394
- --_ctm-mob-dn-ed-an-im-in-se,
395
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
396
- );
397
- height: var(
398
- --_ctm-mob-dn-ed-an-im-in-se,
399
- var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
400
- );
401
- path {
402
- stroke: var(
403
- --_ctm-mob-dn-ed-an-im-in-c1,
404
- var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
405
- );
406
- }
603
+
604
+ display: flex;
605
+ align-items: center;
606
+ justify-content: center;
607
+ cursor: pointer;
608
+ outline: none;
609
+ margin-right: 12px;
610
+ padding: 10px;
611
+
612
+ &:disabled {
613
+ & svg {
614
+ path {
615
+ stroke: #c3b7b7;
407
616
  }
408
617
  }
409
618
  }
410
- .accordion-description {
411
- display: block;
412
- // padding-block-end: var(--_sf-dc-pd-bt);
413
- background-color: var(
414
- --_ctm-mob-dn-ed-an-im-bd-cr-dc,
415
- var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
416
- );
619
+ }
620
+ .icon {
621
+ display: flex;
417
622
 
418
- color: var(
419
- --_ctm-mob-dn-ed-an-im-cr-dc,
420
- var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
623
+ svg {
624
+ width: calc(
625
+ var(
626
+ --_ctm-mob-dn-pn-as-aw-se,
627
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
628
+ ) *
629
+ 0.5
421
630
  );
422
- font-family: var(
423
- --_ctm-mob-dn-ed-an-im-ft-fy-dc,
424
- var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
425
- ),
426
- sans-serif;
427
- font-size: var(
428
- --_ctm-mob-dn-ed-an-im-ft-se-dc,
429
- var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
631
+ height: calc(
632
+ var(
633
+ --_ctm-mob-dn-pn-as-aw-se,
634
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
635
+ ) *
636
+ 0.5
430
637
  );
431
- font-weight: var(
432
- --_ctm-mob-dn-ed-an-im-ft-wt-dc,
433
- var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
638
+
639
+ path {
640
+ stroke: #514949;
641
+ }
642
+ }
643
+ }
644
+
645
+ &[data-control-type="Side"] {
646
+ .embla__viewport {
647
+ width: calc(100% - 85px);
648
+ margin-inline: auto;
649
+ }
650
+ .left-button {
651
+ position: absolute;
652
+ left: 0;
653
+ top: 50%;
654
+ transform: translateY(-50%);
655
+ }
656
+ .right-button {
657
+ position: absolute;
658
+
659
+ right: 0;
660
+ top: 50%;
661
+ transform: translateY(-50%);
662
+ }
663
+ }
664
+
665
+ &[data-thumbnail-placement="top"] {
666
+ flex-direction: column-reverse;
667
+ }
668
+ &[data-thumbnail-placement="bottom"] {
669
+ flex-direction: column;
670
+ }
671
+ &[data-thumbnail-placement="left"] {
672
+ flex-direction: row-reverse;
673
+
674
+ .embla__thumbs {
675
+ width: var(--_ctm-lt-tl-se);
676
+ height: 100%;
677
+
678
+ & .embla__thumbs__container {
679
+ flex-direction: column;
680
+ height: 100%;
681
+ }
682
+ }
683
+ }
684
+ &[data-thumbnail-placement="right"] {
685
+ flex-direction: row;
686
+ .embla__thumbs {
687
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
688
+
689
+ height: 100%;
690
+
691
+ & .embla__thumbs__container {
692
+ flex-direction: column;
693
+ height: 100%;
694
+ }
695
+ }
696
+ }
697
+ .embla__dots {
698
+ display: flex;
699
+ flex-wrap: wrap;
700
+ justify-content: center;
701
+ align-items: center;
702
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
703
+ gap: 6px;
704
+
705
+ &[data-control-type="Bottom-Overflow"] {
706
+ position: absolute;
707
+ bottom: 10px;
708
+ left: 50%;
709
+ transform: translateX(-50%);
710
+ width: 75%;
711
+ }
712
+ .embla__dot {
713
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
714
+ -webkit-appearance: none;
715
+ appearance: none;
716
+ background-color: var(
717
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
718
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
434
719
  );
435
- font-style: var(
436
- --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
437
- var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
720
+
721
+ touch-action: manipulation;
722
+ display: inline-flex;
723
+ text-decoration: none;
724
+ cursor: pointer;
725
+ border: 0;
726
+ padding: 0;
727
+ margin: 0;
728
+ // width: 0.6rem;
729
+ // height: 0.6rem;
730
+ width: var(
731
+ --_ctm-mob-dn-pn-ds-dt-se,
732
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
438
733
  );
439
- text-align: var(
440
- --_ctm-mob-dn-ed-an-im-tt-an-dc,
441
- var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
734
+ height: var(
735
+ --_ctm-mob-dn-pn-ds-dt-se,
736
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
442
737
  );
443
- letter-spacing: var(
444
- --_ctm-mob-dn-ed-an-im-lr-sg-dc,
445
- var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
738
+
739
+ display: flex;
740
+ align-items: center;
741
+ justify-content: center;
742
+ border-radius: 50%;
743
+ }
744
+ .embla__dot:after {
745
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
746
+ width: var(
747
+ --_ctm-mob-dn-pn-ds-dt-se,
748
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
446
749
  );
447
- line-height: var(
448
- --_ctm-mob-dn-ed-an-im-le-ht-dc,
449
- var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
750
+ height: var(
751
+ --_ctm-mob-dn-pn-ds-dt-se,
752
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
450
753
  );
451
- text-decoration: var(
452
- --_ctm-mob-dn-ed-an-im-ue-dc,
453
- var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
754
+
755
+ border-radius: 50%;
756
+ display: flex;
757
+ align-items: center;
758
+ content: "";
759
+ }
760
+ .embla__dot--selected:after {
761
+ box-shadow: inset 0 0 0 1px var(--text-body);
762
+ background-color: var(
763
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
764
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
454
765
  );
455
766
  }
767
+ &[data-slider-control="Pagination Line"] {
768
+ .embla__dot {
769
+ width: var(
770
+ --_ctm-mob-dn-pn-le-le-wh,
771
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
772
+ );
773
+ height: var(
774
+ --_ctm-mob-dn-pn-le-le-ht,
775
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
776
+ );
777
+ background-color: var(
778
+ --_ctm-mob-dn-pn-le-or-le-cr,
779
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
780
+ );
781
+ border-radius: 6px;
782
+ }
783
+
784
+ .embla__dot--selected:after {
785
+ box-shadow: inset 0 0 0 1px var(--text-body);
786
+ border-radius: 6px;
787
+ width: var(
788
+ --_ctm-mob-dn-pn-le-le-wh,
789
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
790
+ );
791
+ height: var(
792
+ --_ctm-mob-dn-pn-le-le-ht,
793
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
794
+ );
795
+ background-color: var(
796
+ --_ctm-mob-dn-pn-le-ct-le-cr,
797
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
798
+ );
799
+ }
800
+ }
801
+ }
802
+
803
+ .embla__thumbs {
804
+ width: 100%;
805
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
806
+
807
+ position: relative;
808
+ display: grid;
809
+ grid-template-columns: 1fr;
810
+ overflow: hidden;
811
+ // margin: 10px;
812
+ padding: 10px;
813
+
814
+ .embla__thumbs__viewport {
815
+ width: 100%;
816
+ height: 100%;
817
+ position: relative;
818
+ display: flex;
819
+ flex-direction: column;
820
+
821
+ overflow: hidden;
822
+ }
823
+ .embla__thumbs__container {
824
+ display: flex;
825
+ flex-direction: row;
826
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
827
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
828
+
829
+ width: 100%;
830
+ // justify-content: center;
831
+ // height: 200px;
832
+
833
+ .embla__thumbs__slide {
834
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
835
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
836
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
837
+
838
+ & img {
839
+ width: 100%;
840
+ height: 100%;
841
+ }
842
+ }
843
+ }
456
844
  }
457
845
  }
458
846
  }