@sc-360-v2/storefront-cms-library 0.4.56 → 0.4.57

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 (150) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/allocations.scss +1603 -1603
  5. package/dist/amount-estimator.scss +1083 -1083
  6. package/dist/animation-control.scss +23 -23
  7. package/dist/badge.scss +388 -388
  8. package/dist/brand-basic-elements.scss +292 -292
  9. package/dist/brand.scss +93 -93
  10. package/dist/breadcrumbs.scss +802 -802
  11. package/dist/builder.js +1 -1
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/contact-us.scss +105 -105
  38. package/dist/container.scss +114 -114
  39. package/dist/countdown.scss +751 -751
  40. package/dist/coupon.scss +1254 -1254
  41. package/dist/custom-fonts.scss +100 -100
  42. package/dist/customization-tree.scss +160 -160
  43. package/dist/default-dropdown.scss +240 -240
  44. package/dist/editCartItem.scss +111 -111
  45. package/dist/embed-temp.scss +72 -72
  46. package/dist/embroider-preview-element.scss +94 -94
  47. package/dist/embroider-template-1-v2.scss +937 -937
  48. package/dist/embroider-template-1.scss +482 -482
  49. package/dist/embroidery.scss +213 -213
  50. package/dist/employee-bulk-order.scss +4057 -4057
  51. package/dist/emtpy-templates.scss +165 -165
  52. package/dist/faq.scss +564 -564
  53. package/dist/fb-dropdown.scss +125 -125
  54. package/dist/filter-results.scss +323 -323
  55. package/dist/flex-text-editor.scss +271 -271
  56. package/dist/form-preview.scss +290 -290
  57. package/dist/form-zindex-module.scss +24 -24
  58. package/dist/gallery-slider-temp.scss +1234 -1234
  59. package/dist/global-styles.scss +86 -86
  60. package/dist/grid.scss +119 -119
  61. package/dist/hotspot.scss +397 -397
  62. package/dist/icon-library.scss +74 -74
  63. package/dist/image-for-product.scss +21 -21
  64. package/dist/image-temp.scss +168 -168
  65. package/dist/item-stock.scss +87 -87
  66. package/dist/layouter-item.scss +89 -89
  67. package/dist/layouter-pro-item.scss +80 -80
  68. package/dist/layouter-pro.scss +88 -88
  69. package/dist/light-box-v2.scss +105 -105
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/line.scss +166 -166
  72. package/dist/loader.scss +37 -37
  73. package/dist/map.scss +962 -962
  74. package/dist/marchandiserSets.scss +60 -60
  75. package/dist/mega-menu-container.scss +99 -99
  76. package/dist/mega-menu.scss +838 -838
  77. package/dist/menu-item.scss +19 -19
  78. package/dist/menu.scss +162 -162
  79. package/dist/modal.scss +2267 -2267
  80. package/dist/multi-select-dropdown.scss +282 -282
  81. package/dist/my-wishlist.scss +17 -17
  82. package/dist/option-bar.scss +845 -845
  83. package/dist/order-processing.scss +61 -61
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +975 -975
  86. package/dist/payment-methods.scss +289 -289
  87. package/dist/pickup-locations.scss +1167 -1167
  88. package/dist/position-module.scss +95 -95
  89. package/dist/prefix-list.scss +86 -86
  90. package/dist/product-actions copy.scss +2765 -2765
  91. package/dist/product-actions.scss +2286 -2286
  92. package/dist/product-basic-elements.scss +770 -770
  93. package/dist/product-customizations.scss +149 -149
  94. package/dist/product-highlights copy.scss +217 -217
  95. package/dist/product-highlights.scss +311 -311
  96. package/dist/product-image copy.scss +787 -787
  97. package/dist/product-inventory.scss +1378 -1378
  98. package/dist/product-options.scss +1144 -1144
  99. package/dist/product-price.scss +2598 -2598
  100. package/dist/product-promotions.scss +2759 -2759
  101. package/dist/product.scss +97 -97
  102. package/dist/productDetails.scss +70 -70
  103. package/dist/quick-links.scss +552 -552
  104. package/dist/quick-order-pad.scss +237 -237
  105. package/dist/quota-details.scss +263 -263
  106. package/dist/quotes.scss +737 -737
  107. package/dist/repeater copy.scss +635 -635
  108. package/dist/repeater-grid-toggle.scss +58 -58
  109. package/dist/repeater-item.scss +90 -90
  110. package/dist/request-for-quotes.scss +746 -746
  111. package/dist/responsive-behaviour.scss +29 -29
  112. package/dist/rfqs.scss +736 -736
  113. package/dist/scroll.scss +222 -222
  114. package/dist/search-results-heading.scss +279 -279
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2467 -2467
  118. package/dist/simple-list.scss +259 -259
  119. package/dist/skeleton.scss +74 -74
  120. package/dist/social.scss +276 -276
  121. package/dist/sort.scss +89 -89
  122. package/dist/spotlight.scss +1663 -1663
  123. package/dist/stack.scss +129 -129
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +64 -64
  126. package/dist/store-locations.scss +1398 -1398
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +89 -89
  131. package/dist/tab-v2.scss +583 -583
  132. package/dist/table-common.scss +506 -506
  133. package/dist/table.scss +685 -685
  134. package/dist/tabs.scss +395 -395
  135. package/dist/text-temp-v2.scss +139 -139
  136. package/dist/text-temp.scss +109 -109
  137. package/dist/toaster.scss +350 -350
  138. package/dist/toggle-button.scss +32 -32
  139. package/dist/transform-properties-module.scss +20 -20
  140. package/dist/types/builder/tools/element-edit/layouter.d.ts +2 -0
  141. package/dist/uom-selector.scss +1169 -1169
  142. package/dist/user-elements copy.scss +1437 -1437
  143. package/dist/variant-picker.scss +2384 -2384
  144. package/dist/video.scss +476 -476
  145. package/dist/volume-pricing copy 2.scss +1468 -1468
  146. package/dist/volume-pricing copy.scss +1077 -1077
  147. package/dist/volume-pricing.scss +1175 -1175
  148. package/dist/widget.scss +148 -148
  149. package/dist/wishlist-overlay.scss +48 -48
  150. package/package.json +1 -1
package/dist/past-orders.scss CHANGED
@@ -1,975 +1,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
- }
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
+ }
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
+ }