@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

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 (106) hide show
  1. package/dist/add-products-tab-details.scss +3 -0
  2. package/dist/allocation-header-quota-details.scss +520 -0
  3. package/dist/allocationDetails.scss +617 -644
  4. package/dist/allocations-quota-details.scss +454 -0
  5. package/dist/allocations.scss +8 -0
  6. package/dist/amount-estimator.scss +1088 -1083
  7. package/dist/badge.scss +396 -388
  8. package/dist/breadcrumbs.scss +17 -0
  9. package/dist/builder.js +1 -1
  10. package/dist/bulk-variant-picker.scss +4 -0
  11. package/dist/bundle copy.scss +26 -0
  12. package/dist/bundle.scss +10 -0
  13. package/dist/bundleDetails.scss +14 -0
  14. package/dist/button copy.scss +2 -0
  15. package/dist/button.scss +2 -0
  16. package/dist/buyForHeaders.scss +19 -0
  17. package/dist/cart-details.scss +101 -18
  18. package/dist/cart-summary.scss +18 -0
  19. package/dist/cart.scss +2 -0
  20. package/dist/cartAttributes.scss +4 -0
  21. package/dist/category-groups-quota-details.scss +124 -38
  22. package/dist/checkout.scss +6 -0
  23. package/dist/countdown.scss +2 -0
  24. package/dist/coupon.scss +8 -0
  25. package/dist/embroidery.scss +2 -0
  26. package/dist/employee-bulk-order.scss +5 -0
  27. package/dist/faq.scss +9 -0
  28. package/dist/filters.scss +2 -0
  29. package/dist/form-zindex-module.scss +24 -24
  30. package/dist/gallery-slider-temp.scss +205 -14
  31. package/dist/hotspot.scss +5 -1
  32. package/dist/icon-list.scss +2 -0
  33. package/dist/kitDetails.scss +2 -0
  34. package/dist/kits.scss +2 -0
  35. package/dist/language-selector.scss +2 -0
  36. package/dist/last-x-orders.scss +5 -0
  37. package/dist/login.scss +63 -9
  38. package/dist/map.scss +6 -0
  39. package/dist/mega-menu.scss +41 -0
  40. package/dist/menu-v2.scss +83 -6
  41. package/dist/order-status.scss +228 -136
  42. package/dist/past-orders.scss +989 -975
  43. package/dist/pickup-locations.scss +1172 -1167
  44. package/dist/product-image-allocation.scss +59 -0
  45. package/dist/product-inventory.scss +1381 -1378
  46. package/dist/product-promotions.scss +2768 -2759
  47. package/dist/product-sizechart.scss +4 -0
  48. package/dist/profile.scss +8 -0
  49. package/dist/quantity-selector.scss +4 -0
  50. package/dist/quick-inventory-check.scss +5 -0
  51. package/dist/quick-order-pad.scss +5 -0
  52. package/dist/quota-details.scss +99 -15
  53. package/dist/repeater copy.scss +3 -0
  54. package/dist/repeater-grid-toggle.scss +2 -0
  55. package/dist/repeater.scss +2 -0
  56. package/dist/rfqs.scss +10 -0
  57. package/dist/scroll.scss +46 -0
  58. package/dist/search.scss +4 -0
  59. package/dist/shipping-payments.scss +4 -0
  60. package/dist/social.scss +5 -0
  61. package/dist/store-locations.scss +1402 -1398
  62. package/dist/tab-v2.scss +2 -0
  63. package/dist/table-common.scss +509 -506
  64. package/dist/table.scss +687 -685
  65. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +28 -0
  66. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +5 -0
  67. package/dist/types/builder/tools/element-edit/allocations.d.ts +1 -0
  68. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +5 -0
  69. package/dist/types/builder/tools/element-edit/bundle.d.ts +40 -0
  70. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +20 -0
  71. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +18 -0
  72. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +1 -0
  73. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +9 -0
  74. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +79 -1
  75. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +259 -0
  76. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +28 -0
  77. package/dist/types/builder/tools/element-edit/checkout.d.ts +1 -0
  78. package/dist/types/builder/tools/element-edit/common.d.ts +23 -0
  79. package/dist/types/builder/tools/element-edit/countdown.d.ts +1 -0
  80. package/dist/types/builder/tools/element-edit/coupon.d.ts +19 -0
  81. package/dist/types/builder/tools/element-edit/embroidery.d.ts +9 -0
  82. package/dist/types/builder/tools/element-edit/filterResults.d.ts +10 -0
  83. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +19 -0
  84. package/dist/types/builder/tools/element-edit/icon-list.d.ts +31 -0
  85. package/dist/types/builder/tools/element-edit/iconInstace.d.ts +1 -0
  86. package/dist/types/builder/tools/element-edit/iconLibrary.d.ts +2 -7
  87. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +19 -0
  88. package/dist/types/builder/tools/element-edit/kits.d.ts +9 -0
  89. package/dist/types/builder/tools/element-edit/language-menu.d.ts +0 -1
  90. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +320 -168
  91. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +10 -0
  92. package/dist/types/builder/tools/element-edit/quotaDetails.d.ts +1 -0
  93. package/dist/types/builder/tools/element-edit/rfqs.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/scroll.d.ts +1 -0
  95. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +2 -0
  96. package/dist/types/builder/tools/element-edit/social.d.ts +1 -0
  97. package/dist/types/builder/tools/element-edit/table.d.ts +1 -0
  98. package/dist/types/builder/tools/element-edit/tabs.d.ts +18 -0
  99. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +17 -0
  100. package/dist/types/builder/tools/element-edit/userElements.d.ts +197 -7
  101. package/dist/types/builder/tools/element-edit/video.d.ts +2 -0
  102. package/dist/user-elements.scss +263 -221
  103. package/dist/variant-picker.scss +2 -0
  104. package/dist/video.scss +2 -0
  105. package/dist/volume-pricing.scss +3 -0
  106. package/package.json +1 -1
@@ -1,975 +1,989 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="pastOrders"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
24
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
25
- &[data-divider-type="true"] .order_row {
26
- border: 0px !important;
27
- border-top: 2px solid var(--_primary-100) !important;
28
- // .pastOrders_wrapper {
29
- // border: 0px !important;
30
- // }
31
- }
32
- }
33
- }
34
- .embla__container {
35
- grid-template-columns: max-content !important;
36
- grid-auto-columns: max-content !important;
37
-
38
- .embla__slide {
39
- width: max-content !important;
40
- }
41
- }
42
-
43
- .pastOrders_wrapper {
44
- display: flex;
45
- flex-direction: column;
46
- align-items: flex-start;
47
- align-self: stretch;
48
- // border-radius: 4px;
49
- // border: 1px solid var(--_primary-100);
50
- // background: #fff;
51
- //width: 349px;
52
- font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
53
- font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
54
- color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
55
- font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
56
- font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
57
- text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
58
- text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
59
- letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
60
- line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
61
- background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
62
- border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
63
- border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
64
- border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
65
- border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
66
- box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
67
- prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
68
- prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
69
-
70
- .heading {
71
- display: flex;
72
- padding: 16px;
73
- align-items: center;
74
- gap: 8px;
75
- align-self: stretch;
76
- border-bottom: 1px solid var(--_gray-200);
77
-
78
- .title {
79
- // color: var(--_gray-900);
80
- // font-size: 20px;
81
- // font-weight: 600;
82
- // line-height: 30px;
83
- font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
84
- font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
85
- color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
86
- font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
87
- font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
88
- text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
89
- text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
90
- letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
91
- line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
92
- }
93
- }
94
-
95
- .order_row {
96
- display: flex;
97
- flex-direction: column;
98
- justify-content: center;
99
- align-items: center;
100
- align-self: stretch;
101
- border-radius: 0px 0px 6px 6px;
102
- background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
103
- border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
104
- border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
105
- border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
106
- border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
107
- box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
108
- prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
109
- prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
110
-
111
- .order_content {
112
- display: flex;
113
- padding: 12px 16px;
114
- flex-direction: column;
115
- justify-content: center;
116
- align-items: flex-start;
117
- gap: 12px;
118
- flex-shrink: 0;
119
- align-self: stretch;
120
-
121
- font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
122
- font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
123
- color: prepareMediaVariable(--_ctm-dn-im-se-cr);
124
- font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
125
- font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
126
- text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
127
- text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
128
- letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
129
- line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
130
-
131
- .heading_wrapper {
132
- display: flex;
133
- align-items: center;
134
- gap: 16px;
135
- flex: 1 0 0;
136
- width: 100%;
137
-
138
- .order_id {
139
- // color: var(--_gray-900);
140
- // font-size: 14px;
141
- // font-weight: 600;
142
- // line-height: 20px;
143
- flex: 1 0 0;
144
- font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
145
- font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
146
- color: prepareMediaVariable(--_ctm-dn-or-id-cr);
147
- font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
148
- font-style: prepareMediaVariable(--_ctm-dn-or-id-ft-se-ic);
149
- text-decoration: prepareMediaVariable(--_ctm-dn-or-id-ue);
150
- text-align: prepareMediaVariable(--_ctm-dn-or-id-tt-an);
151
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-id-lr-sg);
152
- line-height: prepareMediaVariable(--_ctm-dn-or-id-le-ht);
153
- background-color: prepareMediaVariable(--_ctm-dn-or-id-bd-cr);
154
- border-width: prepareMediaVariable(--_ctm-dn-or-id-br-wh);
155
- border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
156
- border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
157
- border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
158
- box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
159
- prepareMediaVariable(--_ctm-dn-or-id-sw-br)
160
- prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
161
- prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
162
- }
163
-
164
- .status_badge {
165
- display: flex;
166
- padding: 2px 8px 2px 6px;
167
- align-items: center;
168
- gap: 4px;
169
- //border-radius: 16px;
170
- //background: #fff4ed;
171
- mix-blend-mode: multiply;
172
- // background-color: prepareMediaVariable(--_ctm-dn-or-ss-bd-cr);
173
- // border-width: prepareMediaVariable(--_ctm-dn-or-ss-br-wh);
174
- // border-color: prepareMediaVariable(--_ctm-dn-or-ss-br-cr);
175
- // border-style: prepareMediaVariable(--_ctm-dn-or-ss-br-se);
176
- // border-radius: prepareMediaVariable(--_ctm-dn-or-ss-br-rs);
177
- // box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-sw-cr);
178
- &[data-orderStatus="Submitted"] {
179
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-bd-cr);
180
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-wh);
181
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-cr);
182
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-se);
183
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-rs);
184
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-ae)
185
- prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-br)
186
- prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-sd)
187
- prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-cr);
188
- .icon {
189
- display: var(--_hover-show-icon, var(--_show-icon, flex));
190
- svg {
191
- width: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
192
- height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
193
-
194
- path {
195
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-c1);
196
- }
197
- }
198
- }
199
- }
200
- &[data-orderStatus="In Review"] {
201
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-bd-cr);
202
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-wh);
203
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-cr);
204
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-se);
205
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-rs);
206
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-ae)
207
- prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-br)
208
- prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-sd)
209
- prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-cr);
210
- .icon {
211
- display: var(--_hover-show-icon, var(--_show-icon, flex));
212
- svg {
213
- width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
214
- height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
215
-
216
- path {
217
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-c1);
218
- }
219
- }
220
- }
221
- }
222
- &[data-orderStatus="Accepted"] {
223
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-bd-cr);
224
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-wh);
225
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-cr);
226
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-se);
227
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-rs);
228
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-ae)
229
- prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-br)
230
- prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-sd)
231
- prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-cr);
232
- .icon {
233
- display: var(--_hover-show-icon, var(--_show-icon, flex));
234
- svg {
235
- width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
236
- height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
237
-
238
- path {
239
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-c1);
240
- }
241
- }
242
- }
243
- }
244
- &[data-orderStatus="Processing"] {
245
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-bd-cr);
246
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-wh);
247
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-cr);
248
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-se);
249
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-rs);
250
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-ae)
251
- prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-br)
252
- prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-sd)
253
- prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-cr);
254
- .icon {
255
- display: var(--_hover-show-icon, var(--_show-icon, flex));
256
- svg {
257
- width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
258
- height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
259
-
260
- path {
261
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-c1);
262
- }
263
- }
264
- }
265
- }
266
- &[data-orderStatus="Partially Fulfilled"] {
267
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-bd-cr);
268
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-wh);
269
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-cr);
270
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-se);
271
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-rs);
272
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-ae)
273
- prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-br)
274
- prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-sd)
275
- prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-cr);
276
- .icon {
277
- display: var(--_hover-show-icon, var(--_show-icon, flex));
278
- svg {
279
- width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
280
- height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
281
-
282
- path {
283
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-c1);
284
- }
285
- }
286
- }
287
- }
288
- &[data-orderStatus="Fulfilled"] {
289
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-bd-cr);
290
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-wh);
291
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-cr);
292
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-se);
293
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-rs);
294
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-ae)
295
- prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-br)
296
- prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-sd)
297
- prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-cr);
298
- .icon {
299
- display: var(--_hover-show-icon, var(--_show-icon, flex));
300
- svg {
301
- width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
302
- height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
303
-
304
- path {
305
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-c1);
306
- }
307
- }
308
- }
309
- }
310
- &[data-orderStatus="Canceled"] {
311
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-bd-cr);
312
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-wh);
313
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-cr);
314
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-se);
315
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-rs);
316
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-ae)
317
- prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-br)
318
- prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-sd)
319
- prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-cr);
320
- .icon {
321
- display: var(--_hover-show-icon, var(--_show-icon, flex));
322
- svg {
323
- width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
324
- height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
325
-
326
- path {
327
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-c1);
328
- }
329
- }
330
- }
331
- }
332
- &[data-orderStatus="Rejected"] {
333
- background-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-bd-cr);
334
- border-width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-wh);
335
- border-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-cr);
336
- border-style: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-se);
337
- border-radius: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-rs);
338
- box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-ae)
339
- prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-br)
340
- prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-sd)
341
- prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-cr);
342
- .icon {
343
- display: var(--_hover-show-icon, var(--_show-icon, flex));
344
- svg {
345
- width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
346
- height: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
347
-
348
- path {
349
- stroke: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-c1);
350
- }
351
- }
352
- }
353
- }
354
-
355
- .order_status {
356
- // color: #b93815;
357
- // text-align: center;
358
- // font-size: 12px;
359
- // line-height: 18px;
360
- &[data-orderStatus="Submitted"] {
361
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-fy);
362
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-se);
363
- color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-cr);
364
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-wt);
365
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-se-ic);
366
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ue);
367
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-tt-an);
368
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-lr-sg);
369
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-le-ht);
370
- }
371
- &[data-orderStatus="In Review"] {
372
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-fy);
373
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-se);
374
- color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-cr);
375
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-wt);
376
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-se-ic);
377
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ue);
378
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-tt-an);
379
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-lr-sg);
380
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-le-ht);
381
- }
382
- &[data-orderStatus="Accepted"] {
383
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-fy);
384
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-se);
385
- color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-cr);
386
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-wt);
387
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-se-ic);
388
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ue);
389
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-tt-an);
390
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-lr-sg);
391
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-le-ht);
392
- }
393
- &[data-orderStatus="Processing"] {
394
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-fy);
395
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-se);
396
- color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-cr);
397
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-wt);
398
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-se-ic);
399
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ue);
400
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-tt-an);
401
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-lr-sg);
402
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-le-ht);
403
- }
404
- &[data-orderStatus="Partially Fulfilled"] {
405
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-fy);
406
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-se);
407
- color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-cr);
408
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-wt);
409
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-se-ic);
410
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ue);
411
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-tt-an);
412
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-lr-sg);
413
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-le-ht);
414
- }
415
- &[data-orderStatus="Fulfilled"] {
416
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-fy);
417
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-se);
418
- color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-cr);
419
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-wt);
420
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-se-ic);
421
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ue);
422
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-tt-an);
423
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-lr-sg);
424
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-le-ht);
425
- }
426
- &[data-orderStatus="Canceled"] {
427
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-fy);
428
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-se);
429
- color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-cr);
430
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-wt);
431
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-se-ic);
432
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ue);
433
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-tt-an);
434
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-lr-sg);
435
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-le-ht);
436
- }
437
- &[data-orderStatus="Rejected"] {
438
- font-family: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-fy);
439
- font-size: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-se);
440
- color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-cr);
441
- font-weight: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-wt);
442
- font-style: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-se-ic);
443
- text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ue);
444
- text-align: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-tt-an);
445
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-lr-sg);
446
- line-height: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-le-ht);
447
- }
448
- }
449
- }
450
-
451
- .order_date {
452
- // color: var(--_gray-700);
453
- // font-size: 12px;
454
- // font-weight: 400;
455
- // line-height: 18px;
456
- flex: 1 0 0;
457
-
458
- font-family: prepareMediaVariable(--_ctm-dn-od-on-ft-fy);
459
- font-size: prepareMediaVariable(--_ctm-dn-od-on-ft-se);
460
- color: prepareMediaVariable(--_ctm-dn-od-on-cr);
461
- font-weight: prepareMediaVariable(--_ctm-dn-od-on-ft-wt);
462
- font-style: prepareMediaVariable(--_ctm-dn-od-on-ft-se-ic);
463
- text-decoration: prepareMediaVariable(--_ctm-dn-od-on-ue);
464
- text-align: prepareMediaVariable(--_ctm-dn-od-on-tt-an);
465
- letter-spacing: prepareMediaVariable(--_ctm-dn-od-on-lr-sg);
466
- line-height: prepareMediaVariable(--_ctm-dn-od-on-le-ht);
467
- background-color: prepareMediaVariable(--_ctm-dn-od-on-bd-cr);
468
- border-width: prepareMediaVariable(--_ctm-dn-od-on-br-wh);
469
- border-color: prepareMediaVariable(--_ctm-dn-od-on-br-cr);
470
- border-style: prepareMediaVariable(--_ctm-dn-od-on-br-se);
471
- border-radius: prepareMediaVariable(--_ctm-dn-od-on-br-rs);
472
- box-shadow: prepareMediaVariable(--_ctm-dn-od-on-sw-ae)
473
- prepareMediaVariable(--_ctm-dn-od-on-sw-br)
474
- prepareMediaVariable(--_ctm-dn-od-on-sw-sd)
475
- prepareMediaVariable(--_ctm-dn-od-on-sw-cr);
476
- }
477
-
478
- .order_amount {
479
- // color: var(--_gray-900);
480
- // text-align: right;
481
- // font-size: 14px;
482
- // font-weight: 600;
483
- // line-height: 20px;
484
-
485
- font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
486
- font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
487
- color: prepareMediaVariable(--_ctm-dn-or-id-cr);
488
- font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
489
- font-style: prepareMediaVariable(--_ctm-dn-or-id-ft-se-ic);
490
- text-decoration: prepareMediaVariable(--_ctm-dn-or-id-ue);
491
- text-align: prepareMediaVariable(--_ctm-dn-or-id-tt-an);
492
- letter-spacing: prepareMediaVariable(--_ctm-dn-or-id-lr-sg);
493
- line-height: prepareMediaVariable(--_ctm-dn-or-id-le-ht);
494
- background-color: prepareMediaVariable(--_ctm-dn-or-id-bd-cr);
495
- border-width: prepareMediaVariable(--_ctm-dn-or-id-br-wh);
496
- border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
497
- border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
498
- border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
499
- box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
500
- prepareMediaVariable(--_ctm-dn-or-id-sw-br)
501
- prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
502
- prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
503
- }
504
- }
505
- }
506
- }
507
- }
508
-
509
- .embla {
510
- width: 100%;
511
- height: auto;
512
- position: relative;
513
- display: flex;
514
- flex-direction: column;
515
- // overflow: hidden;
516
-
517
- .embla__viewport {
518
- width: 100%;
519
- height: 100%;
520
- position: relative;
521
- display: flex;
522
- flex-direction: column;
523
-
524
- overflow: hidden;
525
-
526
- .embla__container {
527
- width: 100%;
528
- height: 100%;
529
- display: grid;
530
- grid-template-rows: 100%;
531
-
532
- grid-template-columns: repeat(
533
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
534
- calc(
535
- 100% /
536
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
537
- )
538
- );
539
-
540
- grid-auto-flow: column;
541
- gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
542
-
543
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
544
- height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
545
- }
546
-
547
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
548
- height: calc(
549
- 100% - calc(
550
- var(
551
- --_ctm-mob-dn-pn-le-le-ht,
552
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
553
- ) +
554
- 20px
555
- )
556
- );
557
- }
558
-
559
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
560
- height: calc(
561
- 100% - calc(
562
- var(
563
- --_ctm-mob-dn-pn-ds-dt-se,
564
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
565
- ) +
566
- 20px
567
- )
568
- );
569
- }
570
-
571
- .embla__slide {
572
- width: 100%;
573
- height: 100%;
574
- }
575
- }
576
- }
577
- &:not([data-display-style="Column"]) {
578
- .embla__container {
579
- grid-auto-columns: calc(
580
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
581
- );
582
- }
583
- }
584
-
585
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
586
- // overflow: unset;
587
-
588
- .embla__viewport {
589
- overflow: unset;
590
- height: 80%;
591
- flex-grow: 1;
592
- &:not([data-is-builder-type="true"]) {
593
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
594
- }
595
-
596
- .embla__container {
597
- overflow: unset;
598
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
599
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
600
-
601
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
602
- grid-template-rows: unset;
603
-
604
- grid-auto-flow: row;
605
-
606
- &[data-overflow-hidden="true"] {
607
- overflow: hidden;
608
- }
609
- }
610
- }
611
- }
612
-
613
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
614
- .embla__viewport {
615
- .embla__container {
616
- grid-template-rows: repeat(
617
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
618
- calc(
619
- 100% /
620
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
621
- )
622
- );
623
- }
624
- }
625
- }
626
-
627
- &[data-display-style="Rows"] {
628
- // overflow: unset;
629
-
630
- .embla__viewport {
631
- overflow: unset;
632
- height: 80%;
633
- flex-grow: 1;
634
-
635
- &:not([data-is-builder-type="true"]) {
636
- height: var(--_ctm-height);
637
- }
638
-
639
- .embla__container {
640
- overflow: hidden;
641
- height: var(--_ctm-height);
642
- // min-height: var(--_ctm-height);
643
-
644
- grid-template-columns: repeat(
645
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
646
- 1fr
647
- );
648
- grid-template-rows: unset;
649
- grid-auto-flow: row;
650
- }
651
- }
652
- }
653
-
654
- &[data-display-style="Column"] {
655
- // overflow: unset;
656
-
657
- .embla__viewport {
658
- .embla__container {
659
- display: flex;
660
- .embla__slide {
661
- width: unset;
662
- height: 100%;
663
- aspect-ratio: 1 / 2;
664
- }
665
- }
666
- }
667
- }
668
-
669
- .arrow-navigation {
670
- display: flex;
671
- position: absolute;
672
- top: 50%;
673
- left: 50%;
674
- width: 100%;
675
- justify-content: space-between;
676
- transform: translate(-50%, -50%);
677
- // padding-left: 20px;
678
- &[data-control-type="Side"] {
679
- .left-button,
680
- .right-button {
681
- background-color: transparent;
682
- }
683
- }
684
- &[data-background-shape="Round"] {
685
- .left-button,
686
- .right-button {
687
- background-color: #f2f5f5;
688
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
689
- }
690
- }
691
- &[data-control-type="Bottom-Overflow"] {
692
- transform: translateX(-50%);
693
- width: 100%;
694
- justify-content: center;
695
- gap: 12px;
696
- top: unset;
697
- bottom: 6px;
698
- }
699
- &[data-control-type="Bottom"] {
700
- transform: unset;
701
- position: static;
702
- width: 100%;
703
- justify-content: center;
704
- gap: 12px;
705
- margin-top: 10px;
706
- }
707
- &[data-control-type="Top"] {
708
- top: 12px;
709
- position: absolute;
710
- /* right: 0px; */
711
- justify-content: end;
712
- width: 140px;
713
- transform: unset;
714
- gap: 12px;
715
- padding: 10px;
716
- }
717
- .left-button {
718
- padding: 10px;
719
- border-radius: 50%;
720
- border: none;
721
- width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
722
- height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
723
- display: flex;
724
- align-items: center;
725
- justify-content: center;
726
- cursor: pointer;
727
- outline: none;
728
- margin-left: 12px;
729
- &:disabled {
730
- & svg {
731
- path {
732
- stroke: rgb(192, 192, 192);
733
- }
734
- }
735
- }
736
- }
737
- .right-button {
738
- border-radius: 50%;
739
- border: none;
740
- width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
741
- height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
742
-
743
- display: flex;
744
- align-items: center;
745
- justify-content: center;
746
- cursor: pointer;
747
- outline: none;
748
- margin-right: 12px;
749
- padding: 10px;
750
-
751
- &:disabled {
752
- & svg {
753
- path {
754
- stroke: rgb(192, 192, 192);
755
- }
756
- }
757
- }
758
- }
759
- .icon {
760
- display: flex;
761
-
762
- svg {
763
- width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
764
- height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
765
-
766
- path {
767
- stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
768
- }
769
- }
770
- }
771
- }
772
-
773
- &[data-control-type="Side"] {
774
- .embla__viewport {
775
- width: calc(100% - 120px);
776
- margin-inline: auto;
777
- }
778
- .left-button {
779
- position: absolute;
780
- left: 0;
781
- top: 50%;
782
- transform: translateY(-50%);
783
- }
784
- .right-button {
785
- position: absolute;
786
-
787
- right: 0;
788
- top: 50%;
789
- transform: translateY(-50%);
790
- }
791
- }
792
-
793
- &[data-thumbnail-placement="top"] {
794
- flex-direction: column-reverse;
795
- }
796
- &[data-thumbnail-placement="bottom"] {
797
- flex-direction: column;
798
- }
799
- &[data-thumbnail-placement="left"] {
800
- flex-direction: row-reverse;
801
-
802
- .embla__thumbs {
803
- width: var(--_ctm-lt-tl-se);
804
- height: 100%;
805
-
806
- & .embla__thumbs__container {
807
- flex-direction: column;
808
- height: 100%;
809
- }
810
- }
811
- }
812
- &[data-thumbnail-placement="right"] {
813
- flex-direction: row;
814
- .embla__thumbs {
815
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
816
-
817
- height: 100%;
818
-
819
- & .embla__thumbs__container {
820
- flex-direction: column;
821
- height: 100%;
822
- }
823
- }
824
- }
825
- .embla__dots {
826
- display: flex;
827
- flex-wrap: wrap;
828
- justify-content: center;
829
- align-items: center;
830
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
831
- gap: 6px;
832
-
833
- &[data-control-type="Bottom-Overflow"] {
834
- position: absolute;
835
- bottom: 10px;
836
- left: 50%;
837
- transform: translateX(-50%);
838
- width: 75%;
839
- }
840
- .embla__dot {
841
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
842
- -webkit-appearance: none;
843
- appearance: none;
844
- background-color: var(
845
- --_ctm-mob-dn-pn-ds-or-dt-cr,
846
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
847
- );
848
-
849
- touch-action: manipulation;
850
- display: inline-flex;
851
- text-decoration: none;
852
- cursor: pointer;
853
- border: 0;
854
- padding: 0;
855
- margin: 0;
856
- // width: 0.6rem;
857
- // height: 0.6rem;
858
- width: var(
859
- --_ctm-mob-dn-pn-ds-dt-se,
860
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
861
- );
862
- height: var(
863
- --_ctm-mob-dn-pn-ds-dt-se,
864
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
865
- );
866
-
867
- display: flex;
868
- align-items: center;
869
- justify-content: center;
870
- border-radius: 50%;
871
- }
872
- .embla__dot:after {
873
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
874
- width: var(
875
- --_ctm-mob-dn-pn-ds-dt-se,
876
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
877
- );
878
- height: var(
879
- --_ctm-mob-dn-pn-ds-dt-se,
880
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
881
- );
882
-
883
- border-radius: 50%;
884
- display: flex;
885
- align-items: center;
886
- content: "";
887
- }
888
- .embla__dot--selected:after {
889
- box-shadow: inset 0 0 0 1px var(--text-body);
890
- background-color: var(
891
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
892
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
893
- );
894
- }
895
- &[data-slider-control="Pagination Line"] {
896
- .embla__dot {
897
- width: var(
898
- --_ctm-mob-dn-pn-le-le-wh,
899
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
900
- );
901
- height: var(
902
- --_ctm-mob-dn-pn-le-le-ht,
903
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
904
- );
905
- background-color: var(
906
- --_ctm-mob-dn-pn-le-or-le-cr,
907
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
908
- );
909
- border-radius: 6px;
910
- }
911
-
912
- .embla__dot--selected:after {
913
- box-shadow: inset 0 0 0 1px var(--text-body);
914
- border-radius: 6px;
915
- width: var(
916
- --_ctm-mob-dn-pn-le-le-wh,
917
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
918
- );
919
- height: var(
920
- --_ctm-mob-dn-pn-le-le-ht,
921
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
922
- );
923
- background-color: var(
924
- --_ctm-mob-dn-pn-le-ct-le-cr,
925
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
926
- );
927
- }
928
- }
929
- }
930
-
931
- .embla__thumbs {
932
- width: 100%;
933
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
934
-
935
- position: relative;
936
- display: grid;
937
- grid-template-columns: 1fr;
938
- overflow: hidden;
939
- // margin: 10px;
940
- padding: 10px;
941
-
942
- .embla__thumbs__viewport {
943
- width: 100%;
944
- height: 100%;
945
- position: relative;
946
- display: flex;
947
- flex-direction: column;
948
-
949
- overflow: hidden;
950
- }
951
- .embla__thumbs__container {
952
- display: flex;
953
- flex-direction: row;
954
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
955
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
956
-
957
- width: 100%;
958
- // justify-content: center;
959
- // height: 200px;
960
-
961
- .embla__thumbs__slide {
962
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
963
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
964
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
965
-
966
- & img {
967
- width: 100%;
968
- height: 100%;
969
- }
970
- }
971
- }
972
- }
973
- }
974
- }
975
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="pastOrders"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
25
+ &[data-divider-type="true"] .order_row {
26
+ border: 0px !important;
27
+ border-top: 2px solid var(--_primary-100) !important;
28
+ // .pastOrders_wrapper {
29
+ // border: 0px !important;
30
+ // }
31
+ }
32
+ }
33
+ }
34
+ .embla__container {
35
+ grid-template-columns: max-content !important;
36
+ grid-auto-columns: max-content !important;
37
+
38
+ .embla__slide {
39
+ width: max-content !important;
40
+ }
41
+ }
42
+
43
+ .pastOrders_wrapper {
44
+ display: flex;
45
+ flex-direction: column;
46
+ align-items: flex-start;
47
+ align-self: stretch;
48
+ // border-radius: 4px;
49
+ // border: 1px solid var(--_primary-100);
50
+ // background: #fff;
51
+ //width: 349px;
52
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
53
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
54
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
55
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
56
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
57
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
58
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
59
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
60
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
61
+ background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
62
+ border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
63
+ border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
64
+ border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
65
+ border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
66
+ box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
67
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
68
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
69
+
70
+ .heading {
71
+ display: flex;
72
+ padding: 16px;
73
+ align-items: center;
74
+ gap: 8px;
75
+ align-self: stretch;
76
+ border-bottom: 1px solid var(--_gray-200);
77
+
78
+ .title {
79
+ // color: var(--_gray-900);
80
+ // font-size: 20px;
81
+ // font-weight: 600;
82
+ // line-height: 30px;
83
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
84
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
85
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
86
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
87
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
88
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
89
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
90
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
91
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
92
+ }
93
+ }
94
+
95
+ .order_row {
96
+ display: flex;
97
+ flex-direction: column;
98
+ justify-content: center;
99
+ align-items: center;
100
+ align-self: stretch;
101
+ border-radius: 0px 0px 6px 6px;
102
+ background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
103
+ border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
104
+ border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
105
+ border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
106
+ border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
107
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
108
+ prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
109
+ prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
110
+
111
+ .order_content {
112
+ display: flex;
113
+ padding: 12px 16px;
114
+ flex-direction: column;
115
+ justify-content: center;
116
+ align-items: flex-start;
117
+ gap: 12px;
118
+ flex-shrink: 0;
119
+ align-self: stretch;
120
+
121
+ font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
122
+ font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
123
+ color: prepareMediaVariable(--_ctm-dn-im-se-cr);
124
+ font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
125
+ font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
126
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
127
+ text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
128
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
129
+ line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
130
+
131
+ .heading_wrapper {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 16px;
135
+ flex: 1 0 0;
136
+ width: 100%;
137
+
138
+ .order_id {
139
+ // color: var(--_gray-900);
140
+ // font-size: 14px;
141
+ // font-weight: 600;
142
+ // line-height: 20px;
143
+ flex: 1 0 0;
144
+ font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
145
+ font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
146
+ color: prepareMediaVariable(--_ctm-dn-or-id-cr);
147
+ font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
148
+ font-style: prepareMediaVariable(--_ctm-dn-or-id-ft-se-ic);
149
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-id-ue);
150
+ text-align: prepareMediaVariable(--_ctm-dn-or-id-tt-an);
151
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-id-lr-sg);
152
+ line-height: prepareMediaVariable(--_ctm-dn-or-id-le-ht);
153
+ background-color: prepareMediaVariable(--_ctm-dn-or-id-bd-cr);
154
+ border-width: prepareMediaVariable(--_ctm-dn-or-id-br-wh);
155
+ border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
156
+ border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
157
+ border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
158
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
159
+ prepareMediaVariable(--_ctm-dn-or-id-sw-br)
160
+ prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
161
+ prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
162
+ }
163
+
164
+ .status_badge {
165
+ display: flex;
166
+ padding: 2px 8px 2px 6px;
167
+ align-items: center;
168
+ gap: 4px;
169
+ //border-radius: 16px;
170
+ //background: #fff4ed;
171
+ mix-blend-mode: multiply;
172
+ // background-color: prepareMediaVariable(--_ctm-dn-or-ss-bd-cr);
173
+ // border-width: prepareMediaVariable(--_ctm-dn-or-ss-br-wh);
174
+ // border-color: prepareMediaVariable(--_ctm-dn-or-ss-br-cr);
175
+ // border-style: prepareMediaVariable(--_ctm-dn-or-ss-br-se);
176
+ // border-radius: prepareMediaVariable(--_ctm-dn-or-ss-br-rs);
177
+ // box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-sw-cr);
178
+ &[data-orderStatus="Submitted"] {
179
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-bd-cr);
180
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-wh);
181
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-cr);
182
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-se);
183
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-rs);
184
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-ae)
185
+ prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-br)
186
+ prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-sd)
187
+ prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-cr);
188
+ .icon {
189
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
190
+ svg {
191
+ width: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
192
+ height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
193
+
194
+ path {
195
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-c1);
196
+ }
197
+ }
198
+ }
199
+ }
200
+ &[data-orderStatus="In Review"] {
201
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-bd-cr);
202
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-wh);
203
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-cr);
204
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-se);
205
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-rs);
206
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-ae)
207
+ prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-br)
208
+ prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-sd)
209
+ prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-cr);
210
+ .icon {
211
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
212
+ svg {
213
+ width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
214
+ height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
215
+
216
+ path {
217
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-c1);
218
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
219
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-se-wh, 1.25);
220
+ }
221
+ }
222
+ }
223
+ }
224
+ &[data-orderStatus="Accepted"] {
225
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-bd-cr);
226
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-wh);
227
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-cr);
228
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-se);
229
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-rs);
230
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-ae)
231
+ prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-br)
232
+ prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-sd)
233
+ prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-cr);
234
+ .icon {
235
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
236
+ svg {
237
+ width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
238
+ height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
239
+
240
+ path {
241
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-c1);
242
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
243
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-se-wh, 1.25);
244
+ }
245
+ }
246
+ }
247
+ }
248
+ &[data-orderStatus="Processing"] {
249
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-bd-cr);
250
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-wh);
251
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-cr);
252
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-se);
253
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-rs);
254
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-ae)
255
+ prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-br)
256
+ prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-sd)
257
+ prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-cr);
258
+ .icon {
259
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
260
+ svg {
261
+ width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
262
+ height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
263
+
264
+ path {
265
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-c1);
266
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
267
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-se-wh, 1.25);
268
+ }
269
+ }
270
+ }
271
+ }
272
+ &[data-orderStatus="Partially Fulfilled"] {
273
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-bd-cr);
274
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-wh);
275
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-cr);
276
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-se);
277
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-rs);
278
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-ae)
279
+ prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-br)
280
+ prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-sd)
281
+ prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-cr);
282
+ .icon {
283
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
284
+ svg {
285
+ width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
286
+ height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
287
+
288
+ path {
289
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-c1);
290
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
291
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-se-wh, 1.25);
292
+ }
293
+ }
294
+ }
295
+ }
296
+ &[data-orderStatus="Fulfilled"] {
297
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-bd-cr);
298
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-wh);
299
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-cr);
300
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-se);
301
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-rs);
302
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-ae)
303
+ prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-br)
304
+ prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-sd)
305
+ prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-cr);
306
+ .icon {
307
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
308
+ svg {
309
+ width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
310
+ height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
311
+
312
+ path {
313
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-c1);
314
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
315
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-se-wh, 1.25);
316
+ }
317
+ }
318
+ }
319
+ }
320
+ &[data-orderStatus="Canceled"] {
321
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-bd-cr);
322
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-wh);
323
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-cr);
324
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-se);
325
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-rs);
326
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-ae)
327
+ prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-br)
328
+ prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-sd)
329
+ prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-cr);
330
+ .icon {
331
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
332
+ svg {
333
+ width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
334
+ height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
335
+
336
+ path {
337
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-c1);
338
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
339
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-se-wh, 1.25);
340
+ }
341
+ }
342
+ }
343
+ }
344
+ &[data-orderStatus="Rejected"] {
345
+ background-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-bd-cr);
346
+ border-width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-wh);
347
+ border-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-cr);
348
+ border-style: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-se);
349
+ border-radius: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-rs);
350
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-ae)
351
+ prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-br)
352
+ prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-sd)
353
+ prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-cr);
354
+ .icon {
355
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
356
+ svg {
357
+ width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
358
+ height: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
359
+
360
+ path {
361
+ stroke: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-c1);
362
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
363
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-se-wh, 1.25);
364
+ }
365
+ }
366
+ }
367
+ }
368
+
369
+ .order_status {
370
+ // color: #b93815;
371
+ // text-align: center;
372
+ // font-size: 12px;
373
+ // line-height: 18px;
374
+ &[data-orderStatus="Submitted"] {
375
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-fy);
376
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-se);
377
+ color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-cr);
378
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-wt);
379
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-se-ic);
380
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ue);
381
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-tt-an);
382
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-lr-sg);
383
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-le-ht);
384
+ }
385
+ &[data-orderStatus="In Review"] {
386
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-fy);
387
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-se);
388
+ color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-cr);
389
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-wt);
390
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-se-ic);
391
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ue);
392
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-tt-an);
393
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-lr-sg);
394
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-le-ht);
395
+ }
396
+ &[data-orderStatus="Accepted"] {
397
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-fy);
398
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-se);
399
+ color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-cr);
400
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-wt);
401
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-se-ic);
402
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ue);
403
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-tt-an);
404
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-lr-sg);
405
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-le-ht);
406
+ }
407
+ &[data-orderStatus="Processing"] {
408
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-fy);
409
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-se);
410
+ color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-cr);
411
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-wt);
412
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-se-ic);
413
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ue);
414
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-tt-an);
415
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-lr-sg);
416
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-le-ht);
417
+ }
418
+ &[data-orderStatus="Partially Fulfilled"] {
419
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-fy);
420
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-se);
421
+ color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-cr);
422
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-wt);
423
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-se-ic);
424
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ue);
425
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-tt-an);
426
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-lr-sg);
427
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-le-ht);
428
+ }
429
+ &[data-orderStatus="Fulfilled"] {
430
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-fy);
431
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-se);
432
+ color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-cr);
433
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-wt);
434
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-se-ic);
435
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ue);
436
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-tt-an);
437
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-lr-sg);
438
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-le-ht);
439
+ }
440
+ &[data-orderStatus="Canceled"] {
441
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-fy);
442
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-se);
443
+ color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-cr);
444
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-wt);
445
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-se-ic);
446
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ue);
447
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-tt-an);
448
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-lr-sg);
449
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-le-ht);
450
+ }
451
+ &[data-orderStatus="Rejected"] {
452
+ font-family: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-fy);
453
+ font-size: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-se);
454
+ color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-cr);
455
+ font-weight: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-wt);
456
+ font-style: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-se-ic);
457
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ue);
458
+ text-align: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-tt-an);
459
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-lr-sg);
460
+ line-height: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-le-ht);
461
+ }
462
+ }
463
+ }
464
+
465
+ .order_date {
466
+ // color: var(--_gray-700);
467
+ // font-size: 12px;
468
+ // font-weight: 400;
469
+ // line-height: 18px;
470
+ flex: 1 0 0;
471
+
472
+ font-family: prepareMediaVariable(--_ctm-dn-od-on-ft-fy);
473
+ font-size: prepareMediaVariable(--_ctm-dn-od-on-ft-se);
474
+ color: prepareMediaVariable(--_ctm-dn-od-on-cr);
475
+ font-weight: prepareMediaVariable(--_ctm-dn-od-on-ft-wt);
476
+ font-style: prepareMediaVariable(--_ctm-dn-od-on-ft-se-ic);
477
+ text-decoration: prepareMediaVariable(--_ctm-dn-od-on-ue);
478
+ text-align: prepareMediaVariable(--_ctm-dn-od-on-tt-an);
479
+ letter-spacing: prepareMediaVariable(--_ctm-dn-od-on-lr-sg);
480
+ line-height: prepareMediaVariable(--_ctm-dn-od-on-le-ht);
481
+ background-color: prepareMediaVariable(--_ctm-dn-od-on-bd-cr);
482
+ border-width: prepareMediaVariable(--_ctm-dn-od-on-br-wh);
483
+ border-color: prepareMediaVariable(--_ctm-dn-od-on-br-cr);
484
+ border-style: prepareMediaVariable(--_ctm-dn-od-on-br-se);
485
+ border-radius: prepareMediaVariable(--_ctm-dn-od-on-br-rs);
486
+ box-shadow: prepareMediaVariable(--_ctm-dn-od-on-sw-ae)
487
+ prepareMediaVariable(--_ctm-dn-od-on-sw-br)
488
+ prepareMediaVariable(--_ctm-dn-od-on-sw-sd)
489
+ prepareMediaVariable(--_ctm-dn-od-on-sw-cr);
490
+ }
491
+
492
+ .order_amount {
493
+ // color: var(--_gray-900);
494
+ // text-align: right;
495
+ // font-size: 14px;
496
+ // font-weight: 600;
497
+ // line-height: 20px;
498
+
499
+ font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
500
+ font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
501
+ color: prepareMediaVariable(--_ctm-dn-or-id-cr);
502
+ font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
503
+ font-style: prepareMediaVariable(--_ctm-dn-or-id-ft-se-ic);
504
+ text-decoration: prepareMediaVariable(--_ctm-dn-or-id-ue);
505
+ text-align: prepareMediaVariable(--_ctm-dn-or-id-tt-an);
506
+ letter-spacing: prepareMediaVariable(--_ctm-dn-or-id-lr-sg);
507
+ line-height: prepareMediaVariable(--_ctm-dn-or-id-le-ht);
508
+ background-color: prepareMediaVariable(--_ctm-dn-or-id-bd-cr);
509
+ border-width: prepareMediaVariable(--_ctm-dn-or-id-br-wh);
510
+ border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
511
+ border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
512
+ border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
513
+ box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
514
+ prepareMediaVariable(--_ctm-dn-or-id-sw-br)
515
+ prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
516
+ prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
517
+ }
518
+ }
519
+ }
520
+ }
521
+ }
522
+
523
+ .embla {
524
+ width: 100%;
525
+ height: auto;
526
+ position: relative;
527
+ display: flex;
528
+ flex-direction: column;
529
+ // overflow: hidden;
530
+
531
+ .embla__viewport {
532
+ width: 100%;
533
+ height: 100%;
534
+ position: relative;
535
+ display: flex;
536
+ flex-direction: column;
537
+
538
+ overflow: hidden;
539
+
540
+ .embla__container {
541
+ width: 100%;
542
+ height: 100%;
543
+ display: grid;
544
+ grid-template-rows: 100%;
545
+
546
+ grid-template-columns: repeat(
547
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
548
+ calc(
549
+ 100% /
550
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
551
+ )
552
+ );
553
+
554
+ grid-auto-flow: column;
555
+ gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
556
+
557
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
558
+ height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
559
+ }
560
+
561
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
562
+ height: calc(
563
+ 100% - calc(
564
+ var(
565
+ --_ctm-mob-dn-pn-le-le-ht,
566
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
567
+ ) +
568
+ 20px
569
+ )
570
+ );
571
+ }
572
+
573
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
574
+ height: calc(
575
+ 100% - calc(
576
+ var(
577
+ --_ctm-mob-dn-pn-ds-dt-se,
578
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
579
+ ) +
580
+ 20px
581
+ )
582
+ );
583
+ }
584
+
585
+ .embla__slide {
586
+ width: 100%;
587
+ height: 100%;
588
+ }
589
+ }
590
+ }
591
+ &:not([data-display-style="Column"]) {
592
+ .embla__container {
593
+ grid-auto-columns: calc(
594
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
595
+ );
596
+ }
597
+ }
598
+
599
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
600
+ // overflow: unset;
601
+
602
+ .embla__viewport {
603
+ overflow: unset;
604
+ height: 80%;
605
+ flex-grow: 1;
606
+ &:not([data-is-builder-type="true"]) {
607
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
608
+ }
609
+
610
+ .embla__container {
611
+ overflow: unset;
612
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
613
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
614
+
615
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
616
+ grid-template-rows: unset;
617
+
618
+ grid-auto-flow: row;
619
+
620
+ &[data-overflow-hidden="true"] {
621
+ overflow: hidden;
622
+ }
623
+ }
624
+ }
625
+ }
626
+
627
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
628
+ .embla__viewport {
629
+ .embla__container {
630
+ grid-template-rows: repeat(
631
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
632
+ calc(
633
+ 100% /
634
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
635
+ )
636
+ );
637
+ }
638
+ }
639
+ }
640
+
641
+ &[data-display-style="Rows"] {
642
+ // overflow: unset;
643
+
644
+ .embla__viewport {
645
+ overflow: unset;
646
+ height: 80%;
647
+ flex-grow: 1;
648
+
649
+ &:not([data-is-builder-type="true"]) {
650
+ height: var(--_ctm-height);
651
+ }
652
+
653
+ .embla__container {
654
+ overflow: hidden;
655
+ height: var(--_ctm-height);
656
+ // min-height: var(--_ctm-height);
657
+
658
+ grid-template-columns: repeat(
659
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
660
+ 1fr
661
+ );
662
+ grid-template-rows: unset;
663
+ grid-auto-flow: row;
664
+ }
665
+ }
666
+ }
667
+
668
+ &[data-display-style="Column"] {
669
+ // overflow: unset;
670
+
671
+ .embla__viewport {
672
+ .embla__container {
673
+ display: flex;
674
+ .embla__slide {
675
+ width: unset;
676
+ height: 100%;
677
+ aspect-ratio: 1 / 2;
678
+ }
679
+ }
680
+ }
681
+ }
682
+
683
+ .arrow-navigation {
684
+ display: flex;
685
+ position: absolute;
686
+ top: 50%;
687
+ left: 50%;
688
+ width: 100%;
689
+ justify-content: space-between;
690
+ transform: translate(-50%, -50%);
691
+ // padding-left: 20px;
692
+ &[data-control-type="Side"] {
693
+ .left-button,
694
+ .right-button {
695
+ background-color: transparent;
696
+ }
697
+ }
698
+ &[data-background-shape="Round"] {
699
+ .left-button,
700
+ .right-button {
701
+ background-color: #f2f5f5;
702
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
703
+ }
704
+ }
705
+ &[data-control-type="Bottom-Overflow"] {
706
+ transform: translateX(-50%);
707
+ width: 100%;
708
+ justify-content: center;
709
+ gap: 12px;
710
+ top: unset;
711
+ bottom: 6px;
712
+ }
713
+ &[data-control-type="Bottom"] {
714
+ transform: unset;
715
+ position: static;
716
+ width: 100%;
717
+ justify-content: center;
718
+ gap: 12px;
719
+ margin-top: 10px;
720
+ }
721
+ &[data-control-type="Top"] {
722
+ top: 12px;
723
+ position: absolute;
724
+ /* right: 0px; */
725
+ justify-content: end;
726
+ width: 140px;
727
+ transform: unset;
728
+ gap: 12px;
729
+ padding: 10px;
730
+ }
731
+ .left-button {
732
+ padding: 10px;
733
+ border-radius: 50%;
734
+ border: none;
735
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
736
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
737
+ display: flex;
738
+ align-items: center;
739
+ justify-content: center;
740
+ cursor: pointer;
741
+ outline: none;
742
+ margin-left: 12px;
743
+ &:disabled {
744
+ & svg {
745
+ path {
746
+ stroke: rgb(192, 192, 192);
747
+ }
748
+ }
749
+ }
750
+ }
751
+ .right-button {
752
+ border-radius: 50%;
753
+ border: none;
754
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
755
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
756
+
757
+ display: flex;
758
+ align-items: center;
759
+ justify-content: center;
760
+ cursor: pointer;
761
+ outline: none;
762
+ margin-right: 12px;
763
+ padding: 10px;
764
+
765
+ &:disabled {
766
+ & svg {
767
+ path {
768
+ stroke: rgb(192, 192, 192);
769
+ }
770
+ }
771
+ }
772
+ }
773
+ .icon {
774
+ display: flex;
775
+
776
+ svg {
777
+ width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
778
+ height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
779
+
780
+ path {
781
+ stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
782
+ }
783
+ }
784
+ }
785
+ }
786
+
787
+ &[data-control-type="Side"] {
788
+ .embla__viewport {
789
+ width: calc(100% - 120px);
790
+ margin-inline: auto;
791
+ }
792
+ .left-button {
793
+ position: absolute;
794
+ left: 0;
795
+ top: 50%;
796
+ transform: translateY(-50%);
797
+ }
798
+ .right-button {
799
+ position: absolute;
800
+
801
+ right: 0;
802
+ top: 50%;
803
+ transform: translateY(-50%);
804
+ }
805
+ }
806
+
807
+ &[data-thumbnail-placement="top"] {
808
+ flex-direction: column-reverse;
809
+ }
810
+ &[data-thumbnail-placement="bottom"] {
811
+ flex-direction: column;
812
+ }
813
+ &[data-thumbnail-placement="left"] {
814
+ flex-direction: row-reverse;
815
+
816
+ .embla__thumbs {
817
+ width: var(--_ctm-lt-tl-se);
818
+ height: 100%;
819
+
820
+ & .embla__thumbs__container {
821
+ flex-direction: column;
822
+ height: 100%;
823
+ }
824
+ }
825
+ }
826
+ &[data-thumbnail-placement="right"] {
827
+ flex-direction: row;
828
+ .embla__thumbs {
829
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
830
+
831
+ height: 100%;
832
+
833
+ & .embla__thumbs__container {
834
+ flex-direction: column;
835
+ height: 100%;
836
+ }
837
+ }
838
+ }
839
+ .embla__dots {
840
+ display: flex;
841
+ flex-wrap: wrap;
842
+ justify-content: center;
843
+ align-items: center;
844
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
845
+ gap: 6px;
846
+
847
+ &[data-control-type="Bottom-Overflow"] {
848
+ position: absolute;
849
+ bottom: 10px;
850
+ left: 50%;
851
+ transform: translateX(-50%);
852
+ width: 75%;
853
+ }
854
+ .embla__dot {
855
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
856
+ -webkit-appearance: none;
857
+ appearance: none;
858
+ background-color: var(
859
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
860
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
861
+ );
862
+
863
+ touch-action: manipulation;
864
+ display: inline-flex;
865
+ text-decoration: none;
866
+ cursor: pointer;
867
+ border: 0;
868
+ padding: 0;
869
+ margin: 0;
870
+ // width: 0.6rem;
871
+ // height: 0.6rem;
872
+ width: var(
873
+ --_ctm-mob-dn-pn-ds-dt-se,
874
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
875
+ );
876
+ height: var(
877
+ --_ctm-mob-dn-pn-ds-dt-se,
878
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
879
+ );
880
+
881
+ display: flex;
882
+ align-items: center;
883
+ justify-content: center;
884
+ border-radius: 50%;
885
+ }
886
+ .embla__dot:after {
887
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
888
+ width: var(
889
+ --_ctm-mob-dn-pn-ds-dt-se,
890
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
891
+ );
892
+ height: var(
893
+ --_ctm-mob-dn-pn-ds-dt-se,
894
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
895
+ );
896
+
897
+ border-radius: 50%;
898
+ display: flex;
899
+ align-items: center;
900
+ content: "";
901
+ }
902
+ .embla__dot--selected:after {
903
+ box-shadow: inset 0 0 0 1px var(--text-body);
904
+ background-color: var(
905
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
906
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
907
+ );
908
+ }
909
+ &[data-slider-control="Pagination Line"] {
910
+ .embla__dot {
911
+ width: var(
912
+ --_ctm-mob-dn-pn-le-le-wh,
913
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
914
+ );
915
+ height: var(
916
+ --_ctm-mob-dn-pn-le-le-ht,
917
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
918
+ );
919
+ background-color: var(
920
+ --_ctm-mob-dn-pn-le-or-le-cr,
921
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
922
+ );
923
+ border-radius: 6px;
924
+ }
925
+
926
+ .embla__dot--selected:after {
927
+ box-shadow: inset 0 0 0 1px var(--text-body);
928
+ border-radius: 6px;
929
+ width: var(
930
+ --_ctm-mob-dn-pn-le-le-wh,
931
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
932
+ );
933
+ height: var(
934
+ --_ctm-mob-dn-pn-le-le-ht,
935
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
936
+ );
937
+ background-color: var(
938
+ --_ctm-mob-dn-pn-le-ct-le-cr,
939
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
940
+ );
941
+ }
942
+ }
943
+ }
944
+
945
+ .embla__thumbs {
946
+ width: 100%;
947
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
948
+
949
+ position: relative;
950
+ display: grid;
951
+ grid-template-columns: 1fr;
952
+ overflow: hidden;
953
+ // margin: 10px;
954
+ padding: 10px;
955
+
956
+ .embla__thumbs__viewport {
957
+ width: 100%;
958
+ height: 100%;
959
+ position: relative;
960
+ display: flex;
961
+ flex-direction: column;
962
+
963
+ overflow: hidden;
964
+ }
965
+ .embla__thumbs__container {
966
+ display: flex;
967
+ flex-direction: row;
968
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
969
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
970
+
971
+ width: 100%;
972
+ // justify-content: center;
973
+ // height: 200px;
974
+
975
+ .embla__thumbs__slide {
976
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
977
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
978
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
979
+
980
+ & img {
981
+ width: 100%;
982
+ height: 100%;
983
+ }
984
+ }
985
+ }
986
+ }
987
+ }
988
+ }
989
+ }