@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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