@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.50

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 (183) 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/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +142 -3052
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1603
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3294
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -3207
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -935
  35. package/dist/cartDropdownOverlay.scss +513 -237
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +57 -43
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +2418 -2418
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -528
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +3 -2
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +209 -209
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +167 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1790 -441
  172. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  173. package/dist/uom-selector.scss +1169 -1169
  174. package/dist/user-elements copy.scss +1437 -1437
  175. package/dist/user-elements.scss +2471 -2471
  176. package/dist/variant-picker.scss +2384 -2384
  177. package/dist/video.scss +476 -476
  178. package/dist/volume-pricing copy 2.scss +1468 -1468
  179. package/dist/volume-pricing copy.scss +1077 -1077
  180. package/dist/volume-pricing.scss +1175 -1175
  181. package/dist/widget.scss +148 -148
  182. package/dist/wishlist-overlay.scss +48 -48
  183. package/package.json +1 -1
package/dist/variant-picker.scss CHANGED
@@ -1,2384 +1,2384 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $minWidth: 70px;
6
-
7
- [data-div-type="element"] {
8
- &[data-element-type="variantPicker"] {
9
- --_ctm-mob-var-lt-mn-cn-wh: 70px;
10
-
11
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
12
-
13
- min-width: #{$minWidth} !important;
14
-
15
- & > .wrapper {
16
- width: 100%;
17
- // height: 100%;
18
- }
19
- &[data-show-shadow="false"] {
20
- --_show-shadow: none;
21
- }
22
- .text-element {
23
- color: #333;
24
- font-family: Lato;
25
- font-size: 12px;
26
- font-style: normal;
27
- font-weight: 400;
28
- line-height: 18px;
29
- margin-bottom: 6px;
30
- }
31
- .option__title {
32
- margin-bottom: 4px;
33
- color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
34
- font-family: var(
35
- --_ctm-mob-dn-on-te-ft-fy,
36
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
37
- );
38
- font-size: var(
39
- --_ctm-mob-dn-on-te-ft-se,
40
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
41
- );
42
- font-weight: var(
43
- --_ctm-mob-dn-on-te-ft-wt,
44
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
45
- );
46
- font-style: var(
47
- --_ctm-mob-dn-on-te-ft-se-ic,
48
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
49
- );
50
- text-align: var(
51
- --_ctm-mob-dn-on-te-tt-an,
52
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
53
- );
54
- letter-spacing: var(
55
- --_ctm-mob-dn-on-te-lr-sg,
56
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
57
- );
58
- line-height: var(
59
- --_ctm-mob-dn-on-te-le-ht,
60
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
61
- );
62
- text-decoration: var(
63
- --_ctm-mob-dn-on-te-ue,
64
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
65
- );
66
- }
67
-
68
- .is__combination_avail {
69
- color: red;
70
- font-size: 14px;
71
- font-weight: 600;
72
- }
73
- .variant__container {
74
- display: flex;
75
- flex-direction: column;
76
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
77
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
- white-space: nowrap;
79
-
80
- .standard_wrapper {
81
- // Select Colors
82
- .select__colors {
83
- font-size: 16px;
84
- color: var(--_gray-500);
85
- display: flex;
86
- flex-direction: column;
87
- gap: var(
88
- --_ctm-mob-lt-on-te-ve-sg,
89
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
90
- );
91
- // padding: var(
92
- // --_ctm-mob-lt-sh-te-dy-se-im-pg,
93
- // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
94
- // );
95
-
96
- .select__group {
97
- display: flex;
98
- flex-direction: row;
99
- align-items: center;
100
- gap: var(
101
- --_ctm-mob-lt-sh-te-dy-se-im-sg,
102
- var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg))
103
- );
104
-
105
- &[data-swatch-dispaly="Vertically"] {
106
- flex-direction: column;
107
- }
108
- &[data-swatch-overflow="Scroll"] {
109
- flex-wrap: nowrap;
110
- overflow-x: auto;
111
- }
112
- &[data-swatch-overflow="Wrap"] {
113
- flex-wrap: wrap;
114
- }
115
-
116
- .show_more_button {
117
- background-color: var(
118
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
119
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
120
- );
121
- font-family: var(
122
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
123
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
124
- );
125
- border-color: var(
126
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
127
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
128
- );
129
- border-radius: var(
130
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
131
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
132
- );
133
- border-style: var(
134
- --_ctm-mob-dn-sw-me-is-bn-br-se,
135
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
136
- );
137
- border-width: var(
138
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
139
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
140
- );
141
- font-size: var(
142
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
143
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
144
- );
145
- font-style: var(
146
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
147
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
148
- );
149
- font-weight: var(
150
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
151
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
152
- );
153
- line-height: var(
154
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
155
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
156
- );
157
- letter-spacing: var(
158
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
159
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
160
- );
161
- box-shadow: var(
162
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
163
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
164
- )
165
- var(
166
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
167
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
168
- )
169
- var(
170
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
171
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
172
- )
173
- var(
174
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
175
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
176
- );
177
- text-align: var(
178
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
179
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
180
- );
181
- color: var(
182
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
183
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
184
- );
185
- text-decoration: var(
186
- --_ctm-mob-dn-sw-me-is-bn-ue,
187
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
188
- );
189
- }
190
-
191
- .select__group__item {
192
- transition: width 0.3s ease;
193
-
194
- --_ctm-lt-sh-im-se: 30px;
195
- height: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
196
- width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
197
- padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg);
198
-
199
- border-color: var(
200
- --_sf-hr-br-cr,
201
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
202
- );
203
-
204
- background-color: var(
205
- --_sf-hr-bd-cr,
206
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
207
- );
208
-
209
- border-style: var(
210
- --_sf-hr-br-se,
211
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
212
- );
213
-
214
- border-width: var(
215
- --_sf-hr-br-wh,
216
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
217
- );
218
- border-radius: var(
219
- --_sf-hr-br-rs,
220
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
221
- );
222
-
223
- box-shadow: var(
224
- --_sf-hr-sw-ae,
225
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
226
- )
227
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
228
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
229
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
230
-
231
- cursor: pointer;
232
- overflow: hidden;
233
- .product-select-image {
234
- object-fit: cover;
235
- width: 100%;
236
- height: 100%;
237
- }
238
- &[data-background-shape="circle"] {
239
- border-radius: 50%;
240
- }
241
- &[data-background-shape="square"] {
242
- border-radius: 5px;
243
- }
244
- &[data-background-shape="capsule"] {
245
- --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
246
- --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
247
-
248
- width: var(--toggle-width);
249
- height: var(--toggle-height);
250
-
251
- border-radius: var(--toggle-height); /* Full pill shape */
252
- box-sizing: border-box;
253
- }
254
- &[data-swatch-shape="circle"] {
255
- & div,
256
- .product-select-image {
257
- border-radius: 50%;
258
- }
259
- // border-radius: 50%;
260
- }
261
- &[data-swatch-shape="capsule"] {
262
- & div,
263
- .product-select-image {
264
- // border-radius: 50%;
265
- width: 100%;
266
- height: 100%;
267
- border-radius: inherit;
268
- }
269
- // border-radius: 50%;
270
- }
271
-
272
- &[data-selected="true"] {
273
- border-color: var(
274
- --_sf-sd-br-cr,
275
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
276
- );
277
-
278
- background-color: var(
279
- --_sf-sd-bd-cr,
280
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
281
- );
282
- border-style: var(
283
- --_sf-sd-br-se,
284
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
285
- );
286
- border-width: var(
287
- --_sf-sd-br-wh,
288
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
289
- );
290
- box-shadow: var(
291
- --_sf-sd-sw-ae,
292
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
293
- )
294
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
295
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
296
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
297
-
298
- &[data-background-shape-selected="circle"] {
299
- border-radius: 50%;
300
- }
301
- &[data-background-shape-selected="square"] {
302
- border-radius: 5px;
303
- }
304
- &[data-background-shape-selected="capsule"] {
305
- border-radius: 80%;
306
- // width: calc(
307
- // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
308
- // 8px
309
- // );
310
- }
311
- &[data-swatch-shape-selected="circle"] {
312
- & div,
313
- .product-select-image {
314
- border-radius: 50%;
315
- }
316
- }
317
- &[data-swatch-shape-selected="capsule"] {
318
- & div,
319
- .product-select-image {
320
- border-radius: 50%;
321
- }
322
- }
323
- &[data-swatch-shape-selected="square"] {
324
- & div,
325
- .product-select-image {
326
- border-radius: 5px;
327
- }
328
- }
329
- }
330
- &:hover {
331
- --_sf-hr-bd-cr: var(
332
- --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
333
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
334
- );
335
- --_sf-hr-br-cr: var(
336
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
337
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
338
- );
339
- --_sf-hr-br-se: var(
340
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
341
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
342
- );
343
- --_sf-hr-br-wh: var(
344
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
345
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
346
- );
347
- --_sf-hr-br-bs: var(
348
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
349
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
350
- );
351
-
352
- // new
353
- --_sf-hr-sw-ae: var(
354
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
355
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
356
- );
357
- --_sf-hr-sw-br: var(
358
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
359
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
360
- );
361
- --_sf-hr-sw-hr: var(
362
- --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
363
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
364
- );
365
- --_sf-hr-sw-cr: var(
366
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
367
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
368
- );
369
- }
370
-
371
- &:hover {
372
- &[data-background-shape-hover="circle"] {
373
- border-radius: 50%;
374
- }
375
- &[data-background-shape-hover="square"] {
376
- border-radius: 5px;
377
- }
378
- &[data-background-shape-hover="capsule"] {
379
- border-radius: 80%;
380
- // width: calc(
381
- // var(
382
- // --_ctm-mob-lt-sh-im-se,
383
- // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))
384
- // ) +
385
- // 8px
386
- // );
387
- }
388
- &[data-swatch-shape-hover="circle"] {
389
- & div,
390
- .product-select-image {
391
- border-radius: 50%;
392
- }
393
- // border-radius: 50%;
394
- }
395
- &[data-swatch-shape-hover="capsule"] {
396
- & div,
397
- .product-select-image {
398
- border-radius: 50%;
399
- }
400
- }
401
- &[data-swatch-shape-hover="square"] {
402
- & div,
403
- .product-select-image {
404
- border-radius: 5px;
405
- }
406
- }
407
- }
408
-
409
- &[data-selected="true"] {
410
- --_sf-sd-bd-cr: var(
411
- --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
412
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
413
- );
414
- --_sf-sd-br-cr: var(
415
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
416
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
417
- );
418
- --_sf-sd-br-se: var(
419
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
420
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
421
- );
422
- --_sf-sd-br-wh: var(
423
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
424
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
425
- );
426
- --_sf-sd-br-bs: var(
427
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
428
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
429
- );
430
-
431
- // new
432
- --_sf-sd-sw-ae: var(
433
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
434
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
435
- );
436
- --_sf-sd-sw-br: var(
437
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
438
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
439
- );
440
- --_sf-sd-sw-sd: var(
441
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
442
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
443
- );
444
- --_sf-sd-sw-cr: var(
445
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
446
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
447
- );
448
-
449
- border-color: var(
450
- --_sf-sd-br-cr,
451
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
452
- );
453
-
454
- background-color: var(
455
- --_sf-sd-bd-cr,
456
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
457
- );
458
-
459
- border-style: var(
460
- --_sf-sd-br-se,
461
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
462
- );
463
-
464
- border-width: var(
465
- --_sf-sd-br-wh,
466
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
467
- );
468
- border-radius: var(
469
- --_sf-sd-br-rs,
470
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
471
- );
472
-
473
- box-shadow: var(
474
- --_sf-sd-sw-ae,
475
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
476
- )
477
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
478
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
479
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
480
-
481
- &[data-background-shape-selected="circle"] {
482
- border-radius: 50%;
483
- }
484
- &[data-background-shape-selected="square"] {
485
- border-radius: 5px;
486
- }
487
- &[data-background-shape-selected="capsule"] {
488
- --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
489
- --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
490
-
491
- width: var(--toggle-width);
492
- height: var(--toggle-height);
493
-
494
- border-radius: var(--toggle-height); /* Full pill shape */
495
- box-sizing: border-box;
496
- }
497
- &[data-swatch-shape-selected="circle"] {
498
- & div,
499
- .product-select-image {
500
- border-radius: 50%;
501
- }
502
- }
503
- &[data-swatch-shape-selected="capsule"] {
504
- & div,
505
- .product-select-image {
506
- // border-radius: 50%;
507
- width: 100%;
508
- height: 100%;
509
- border-radius: inherit;
510
- }
511
- }
512
- &[data-swatch-shape-selected="square"] {
513
- & div,
514
- .product-select-image {
515
- border-radius: 5px;
516
- }
517
- }
518
- }
519
-
520
- // &.disabled {
521
- // cursor: not-allowed;
522
- // opacity: 0.4;
523
- // &[data-swatch-type="Swatch Image"] {
524
- // position: relative;
525
- // overflow: hidden;
526
- // &::after {
527
- // content: "";
528
- // width: 172%;
529
- // height: 1px;
530
- // position: absolute;
531
- // background: #f00;
532
- // left: -14px;
533
- // transform: rotate(48deg);
534
- // /* -webkit-transform: rotate(48deg); */
535
- // -moz-transform: rotate(48deg);
536
- // top: 14px;
537
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
538
- // }
539
- // &::before {
540
- // content: "";
541
- // width: 164%;
542
- // height: 1px;
543
- // position: absolute;
544
- // background: #f00;
545
- // left: -14px;
546
- // transform: rotate(-48deg);
547
- // -webkit-transform: rotate(-48deg);
548
- // -moz-transform: rotate(-48deg);
549
- // top: 14px;
550
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
551
- // }
552
- // }
553
- // }
554
-
555
- position: relative;
556
-
557
- &.disabled {
558
- color: #aaa;
559
- background-color: #f9f9f9;
560
- border-color: #ddd;
561
- cursor: not-allowed;
562
- opacity: 0.3;
563
- overflow: hidden;
564
- }
565
-
566
- .cross-line {
567
- position: absolute;
568
- inset: 0;
569
- background-color: #cccccc;
570
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
571
- pointer-events: none;
572
- }
573
- .product-select-image {
574
- width: 100%;
575
- height: 100%;
576
- }
577
- }
578
- }
579
- }
580
- // Select Fit and Size
581
- .select__fit {
582
- font-size: 16px;
583
- color: var(--_gray-500);
584
- display: flex;
585
- flex-direction: column;
586
- gap: var(
587
- --_ctm-mob-lt-on-te-ve-sg,
588
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
589
- );
590
-
591
- // padding: var(
592
- // --_ctm-mob-lt-se-st-dy-se-im-pg,
593
- // var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
594
- // );
595
-
596
- .select__group {
597
- display: flex;
598
- gap: 8px;
599
- flex-wrap: wrap;
600
- margin-bottom: 10px;
601
- flex-direction: row;
602
- gap: var(
603
- --_ctm-mob-lt-se-st-dy-se-im-sg,
604
- var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
605
- );
606
-
607
- &[data-single-dispaly="Vertically"] {
608
- flex-direction: column;
609
- }
610
- &[data-single-overflow="Scroll"] {
611
- overflow-x: auto;
612
- overflow-y: hidden;
613
- flex-wrap: nowrap;
614
- }
615
- &[data-swatch-overflow="Scroll"] {
616
- overflow-x: auto;
617
- flex-wrap: nowrap;
618
- overflow-y: hidden;
619
- }
620
- .show_more_button {
621
- background-color: var(
622
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
623
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
624
- );
625
- font-family: var(
626
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
627
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
628
- );
629
- border-color: var(
630
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
631
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
632
- );
633
- border-radius: var(
634
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
635
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
636
- );
637
- border-style: var(
638
- --_ctm-mob-dn-sw-me-is-bn-br-se,
639
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
640
- );
641
- border-width: var(
642
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
643
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
644
- );
645
- font-size: var(
646
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
647
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
648
- );
649
- font-style: var(
650
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
651
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
652
- );
653
- font-weight: var(
654
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
655
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
656
- );
657
- line-height: var(
658
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
659
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
660
- );
661
- letter-spacing: var(
662
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
663
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
664
- );
665
- box-shadow: var(
666
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
667
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
668
- )
669
- var(
670
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
671
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
672
- )
673
- var(
674
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
675
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
676
- )
677
- var(
678
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
679
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
680
- );
681
- text-align: var(
682
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
683
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
684
- );
685
- color: var(
686
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
687
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
688
- );
689
- text-decoration: var(
690
- --_ctm-mob-dn-sw-me-is-bn-ue,
691
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
692
- );
693
- }
694
- &[data-single-dispaly="Grid"] {
695
- display: grid;
696
- grid-template-columns: repeat(
697
- var(
698
- --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
699
- var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
700
- ),
701
- minmax(auto, 1fr)
702
- );
703
- }
704
-
705
- .select__group__item {
706
- transition: color 0.3s ease;
707
- // border-radius: 6px;
708
- // border: 1px solid var(--_gray-200);
709
- cursor: pointer;
710
- display: flex;
711
- align-items: center;
712
- justify-content: center;
713
-
714
- // height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
715
- // width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
716
- padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg);
717
- min-width: 20px;
718
- min-height: 20px;
719
- box-sizing: content-box;
720
- border-radius: var(
721
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
722
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
723
- );
724
-
725
- border-color: var(
726
- --_sf-hr-br-cr,
727
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
728
- );
729
-
730
- background-color: var(
731
- --_sf-hr-bd-cr,
732
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
733
- );
734
- border-style: var(
735
- --_sf-hr-br-se,
736
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
737
- );
738
- border-width: var(
739
- --_sf-hr-br-wh,
740
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
741
- );
742
-
743
- box-shadow: var(
744
- --_sf-hr-sw-ae,
745
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
746
- )
747
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
748
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
749
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
750
-
751
- // font is pending
752
-
753
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
754
- font-family: var(
755
- --_sf-hr-ft-fy,
756
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
757
- );
758
- font-size: var(
759
- --_sf-hr-ft-se,
760
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
761
- );
762
- font-weight: var(
763
- --_sf-hr-ft-wt,
764
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
765
- );
766
- font-style: var(
767
- --_sf-hr-ft-se-ic,
768
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
769
- );
770
- text-align: var(
771
- --_sf-hr-tt-an,
772
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
773
- );
774
- letter-spacing: var(
775
- --_sf-hr-lr-sg,
776
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
777
- );
778
- line-height: var(
779
- --_sf-hr-le-ht,
780
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht)
781
- );
782
- text-decoration: var(
783
- --_sf-hr-ue,
784
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
785
- );
786
-
787
- &[data-background-shape="circle"] {
788
- border-radius: 50%;
789
- }
790
- // &[data-background-shape="square"] {
791
- // border-radius: 5px;
792
- // }
793
- &[data-background-shape="capsule"] {
794
- border-radius: 40px; /* Full pill shape */
795
- box-sizing: border-box;
796
- }
797
-
798
- &:hover {
799
- --_sf-hr-bd-cr: var(
800
- --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
801
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
802
- );
803
- --_sf-hr-br-cr: var(
804
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
805
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
806
- );
807
- --_sf-hr-br-se: var(
808
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
809
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
810
- );
811
- --_sf-hr-br-wh: var(
812
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
813
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
814
- );
815
- --_sf-hr-br-bs: var(
816
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
817
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
818
- );
819
-
820
- // new
821
- --_sf-hr-sw-ae: var(
822
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
823
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
824
- );
825
- --_sf-hr-sw-br: var(
826
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
827
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
828
- );
829
- --_sf-hr-sw-hr: var(
830
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
831
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
832
- );
833
- --_sf-hr-sw-cr: var(
834
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
835
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
836
- );
837
-
838
- // for font
839
-
840
- --_sf-hr-cr: var(
841
- --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
842
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
843
- );
844
- --_sf-hr-ft-fy: var(
845
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
846
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
847
- );
848
- --_sf-hr-ft-se: var(
849
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
850
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
851
- );
852
- --_sf-hr-ft-wt: var(
853
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
854
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
855
- );
856
- --_sf-hr-ft-se-ic: var(
857
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
858
- var(
859
- --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
860
- var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
861
- )
862
- );
863
- --_sf-hr-tt-an: var(
864
- --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
865
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
866
- );
867
- --_sf-hr-lr-sg: var(
868
- --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
869
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
870
- );
871
- --_sf-hr-le-ht: var(
872
- --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
873
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
874
- );
875
-
876
- --_sf-hr-ue: var(
877
- --_ctm-mob-dn-on-ve-se-hr-se-ue,
878
- var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
879
- );
880
- }
881
-
882
- &.child {
883
- border: 0;
884
- border-radius: 0;
885
- border-bottom: 2px solid var(--_gray-200);
886
- }
887
- &[data-selected="true"] {
888
- --_sf-sd-bd-cr: var(
889
- --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
890
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
891
- );
892
- --_sf-sd-br-cr: var(
893
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
894
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
895
- );
896
- --_sf-sd-br-se: var(
897
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
898
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
899
- );
900
- --_sf-sd-br-wh: var(
901
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
902
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
903
- );
904
- --_sf-sd-br-bs: var(
905
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
906
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
907
- );
908
-
909
- // new
910
- --_sf-sd-sw-ae: var(
911
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
912
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
913
- );
914
- --_sf-sd-sw-br: var(
915
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
916
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
917
- );
918
- --_sf-sd-sw-hr: var(
919
- --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
920
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
921
- );
922
- --_sf-sd-sw-cr: var(
923
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
924
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
925
- );
926
-
927
- // for font
928
-
929
- --_sf-sd-cr: var(
930
- --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
931
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
932
- );
933
- --_sf-sd-ft-fy: var(
934
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
935
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
936
- );
937
- --_sf-sd-ft-se: var(
938
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
939
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
940
- );
941
- --_sf-sd-ft-wt: var(
942
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
943
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
944
- );
945
- --_sf-sd-ft-se-ic: var(
946
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
947
- var(
948
- --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
949
- var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
950
- )
951
- );
952
- --_sf-sd-tt-an: var(
953
- --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
954
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
955
- );
956
- --_sf-sd-lr-sg: var(
957
- --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
958
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
959
- );
960
- --_sf-sd-le-ht: var(
961
- --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
962
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
963
- );
964
-
965
- --_sf-sd-ue: var(
966
- --_ctm-mob-dn-on-ve-se-sd-se-ue,
967
- var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
968
- );
969
-
970
- border-color: var(
971
- --_sf-sd-br-cr,
972
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
973
- );
974
-
975
- background-color: var(
976
- --_sf-sd-bd-cr,
977
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
978
- );
979
- border-style: var(
980
- --_sf-sd-br-se,
981
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
982
- );
983
- border-width: var(
984
- --_sf-sd-br-wh,
985
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
986
- );
987
-
988
- box-shadow: var(
989
- --_sf-sd-sw-ae,
990
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
991
- )
992
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
993
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
994
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
995
- // font is pending
996
-
997
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
998
- font-family: var(
999
- --_sf-sd-ft-fy,
1000
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
1001
- );
1002
- font-size: var(
1003
- --_sf-sd-ft-se,
1004
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1005
- );
1006
- font-weight: var(
1007
- --_sf-sd-ft-wt,
1008
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1009
- );
1010
- font-style: var(
1011
- --_sf-sd-ft-se-ic,
1012
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1013
- );
1014
- text-align: var(
1015
- --_sf-sd-tt-an,
1016
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1017
- );
1018
- letter-spacing: var(
1019
- --_sf-sd-lr-sg,
1020
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1021
- );
1022
- line-height: var(
1023
- --_sf-sd-le-ht,
1024
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1025
- );
1026
- text-decoration: var(
1027
- --_sf-sd-ue,
1028
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1029
- );
1030
- }
1031
-
1032
- &.selected__child {
1033
- border: 0px;
1034
- border-bottom: 2px solid var(--_primary-400);
1035
- }
1036
- // &.disabled {
1037
- // cursor: not-allowed;
1038
- // opacity: 0.4;
1039
- // position: relative;
1040
- // overflow: hidden;
1041
- // &::after {
1042
- // content: "";
1043
- // width: 172%;
1044
- // height: 1px;
1045
- // position: absolute;
1046
- // background: #f00;
1047
- // left: -14px;
1048
- // transform: rotate(48deg);
1049
- // /* -webkit-transform: rotate(48deg); */
1050
- // -moz-transform: rotate(48deg);
1051
- // top: 14px;
1052
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1053
- // }
1054
- // &::before {
1055
- // content: "";
1056
- // width: 164%;
1057
- // height: 1px;
1058
- // position: absolute;
1059
- // background: #f00;
1060
- // left: -14px;
1061
- // transform: rotate(-48deg);
1062
- // -webkit-transform: rotate(-48deg);
1063
- // -moz-transform: rotate(-48deg);
1064
- // top: 14px;
1065
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1066
- // }
1067
- // }
1068
- position: relative;
1069
-
1070
- &.disabled {
1071
- color: #aaa;
1072
- background-color: #f9f9f9;
1073
- border-color: #ddd;
1074
- cursor: not-allowed;
1075
- overflow: hidden;
1076
- }
1077
-
1078
- .cross-line {
1079
- position: absolute;
1080
- inset: 0;
1081
- background-color: #cccccc;
1082
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1083
- pointer-events: none;
1084
- }
1085
- }
1086
- }
1087
- }
1088
- &[data-show-divider="true"] {
1089
- &:not(:last-child)::after {
1090
- content: "";
1091
- position: relative;
1092
- background-color: #000;
1093
- height: 1px;
1094
- width: 100%;
1095
- display: flex;
1096
- top: calc(
1097
- calc(
1098
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1099
- ) /
1100
- 2
1101
- );
1102
- }
1103
- }
1104
-
1105
- .title {
1106
- color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1107
- font-family: var(
1108
- --_ctm-mob-dn-on-te-ft-fy,
1109
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1110
- );
1111
- font-size: var(
1112
- --_ctm-mob-dn-on-te-ft-se,
1113
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1114
- );
1115
- font-weight: var(
1116
- --_ctm-mob-dn-on-te-ft-wt,
1117
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1118
- );
1119
- font-style: var(
1120
- --_ctm-mob-dn-on-te-ft-se-ic,
1121
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1122
- );
1123
- text-align: var(
1124
- --_ctm-mob-dn-on-te-tt-an,
1125
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1126
- );
1127
- letter-spacing: var(
1128
- --_ctm-mob-dn-on-te-lr-sg,
1129
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1130
- );
1131
- line-height: var(
1132
- --_ctm-mob-dn-on-te-le-ht,
1133
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1134
- );
1135
- text-decoration: var(
1136
- --_ctm-mob-dn-on-te-ue,
1137
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1138
- );
1139
- }
1140
- }
1141
- //Dropdown
1142
- .est__dropdown__main {
1143
- position: relative;
1144
- width: 100%;
1145
- display: flex;
1146
- flex-direction: column;
1147
- gap: var(
1148
- --_ctm-mob-lt-on-te-ve-sg,
1149
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
1150
- );
1151
-
1152
- padding: var(
1153
- --_ctm-mob-lt-dn-dy-se-dn-os-pg,
1154
- var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg))
1155
- );
1156
-
1157
- margin-top: 10px;
1158
-
1159
- label {
1160
- font-size: var(
1161
- --_ctm-mob-dn-on-te-ft-se,
1162
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1163
- );
1164
- font-family: var(
1165
- --_ctm-mob-dn-on-te-ft-fy,
1166
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1167
- );
1168
- color: var(
1169
- --_ctm-mob-dn-on-te-cr,
1170
- var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
1171
- );
1172
- font-weight: var(
1173
- --_ctm-mob-dn-on-te-ft-wt,
1174
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1175
- );
1176
- text-decoration: var(
1177
- --_ctm-mob-dn-on-te-ue,
1178
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1179
- );
1180
- letter-spacing: var(
1181
- --_ctm-mob-dn-on-te-lr-sg,
1182
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1183
- );
1184
- text-align: var(
1185
- --_ctm-mob-dn-on-te-tt-an,
1186
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1187
- );
1188
- line-height: var(
1189
- --_ctm-mob-dn-on-te-le-ht,
1190
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1191
- );
1192
- display: block;
1193
- }
1194
-
1195
- .est__dropdown {
1196
- cursor: pointer;
1197
- position: relative;
1198
- color: var(--_gray-700);
1199
-
1200
- border-radius: 6px;
1201
- background-color: #fff;
1202
- display: flex;
1203
- justify-content: space-between;
1204
- align-items: center;
1205
- width: 100%;
1206
- .value__selected {
1207
- width: 100%;
1208
- }
1209
-
1210
- &.open .list {
1211
- display: none;
1212
- margin-top: var(
1213
- --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
1214
- var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
1215
- );
1216
- gap: var(
1217
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1218
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1219
- );
1220
- background-color: var(
1221
- --_ctm-mob-dn-dn-se-bd-cr,
1222
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1223
- );
1224
- }
1225
-
1226
- .list {
1227
- display: flex !important;
1228
- flex-direction: column;
1229
- gap: var(
1230
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1231
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1232
- );
1233
- border: var(
1234
- --_ctm-mob-dn-dn-se-br-wh,
1235
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1236
- )
1237
- var(
1238
- --_ctm-mob-dn-dn-se-br-se,
1239
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1240
- )
1241
- var(
1242
- --_gray-200,
1243
- var(
1244
- --_ctm-mob-dn-dn-se-br-cr,
1245
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1246
- )
1247
- );
1248
- border-radius: var(
1249
- --_ctm-mob-dn-dn-se-br-rs,
1250
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1251
- );
1252
- box-shadow: var(
1253
- --_show-shadow-dn-se,
1254
- var(
1255
- --_ctm-mob-dn-dn-se-sw-ae,
1256
- var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
1257
- )
1258
- var(
1259
- --_ctm-mob-dn-dn-se-sw-br,
1260
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1261
- )
1262
- var(
1263
- --_ctm-mob-dn-dn-se-sw-sd,
1264
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1265
- )
1266
- var(
1267
- --_ctm-mob-dn-dn-se-sw-cr,
1268
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1269
- )
1270
- );
1271
- position: absolute;
1272
- top: 100%;
1273
- left: 0;
1274
- width: 100%;
1275
- background-color: var(
1276
- --_ctm-mob-dn-dn-se-bd-cr,
1277
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1278
- );
1279
- border-radius: 4px;
1280
- z-index: var(--_higher-zIndex);
1281
- max-height: 200px;
1282
- overflow-y: auto;
1283
-
1284
- &.top {
1285
- bottom: 100%;
1286
- top: auto;
1287
- }
1288
-
1289
- .list__option {
1290
- padding: var(
1291
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
1292
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
1293
- );
1294
- cursor: pointer;
1295
-
1296
- &:hover {
1297
- background-color: var(--_primary-25);
1298
- color: var(--_primary-400);
1299
- }
1300
-
1301
- &.disabled {
1302
- cursor: not-allowed;
1303
- opacity: 0.4;
1304
- }
1305
- }
1306
- }
1307
- }
1308
- }
1309
-
1310
- // variant dropdown selection
1311
- .var__drop__selection {
1312
- display: flex;
1313
- width: 100%;
1314
- gap: var(
1315
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1316
- var(
1317
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1318
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
1319
- )
1320
- );
1321
-
1322
- flex-direction: row;
1323
- &[data-dropdown-style="Vertical List"] {
1324
- flex-direction: column;
1325
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1326
- }
1327
- .dropdown_wrapper {
1328
- position: relative;
1329
- &[data-show-divider="true"] {
1330
- &:not(:last-child)::after {
1331
- content: "";
1332
- position: relative;
1333
- background-color: #000;
1334
- height: 1px;
1335
- width: 100%;
1336
- display: flex;
1337
- top: calc(
1338
- calc(
1339
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1340
- ) /
1341
- 2
1342
- );
1343
- }
1344
- }
1345
-
1346
- &[data-show-item-divider="true"] {
1347
- .est__dropdown__main {
1348
- .est__dropdown {
1349
- .list {
1350
- :not(:last-child).list__option {
1351
- &::after {
1352
- content: "";
1353
- position: relative;
1354
- background-color: #000;
1355
- height: 1px;
1356
- width: 100%;
1357
- display: flex;
1358
- top: calc(
1359
- var(
1360
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1361
- var(
1362
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1363
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1364
- )
1365
- ) /
1366
- 2
1367
- );
1368
- }
1369
- }
1370
- }
1371
- }
1372
- }
1373
- }
1374
- }
1375
- & > div {
1376
- width: 100%;
1377
- }
1378
- }
1379
- // Quantity Fields
1380
- .field__group {
1381
- // display: flex;
1382
- // flex-wrap: wrap;
1383
- // gap: 8px;
1384
- display: grid;
1385
- grid-template-columns: repeat(
1386
- auto-fit,
1387
- minmax(
1388
- var(
1389
- --_ctm-mob-var-lt-mn-cn-wh,
1390
- var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
1391
- ),
1392
- var(--_ctm-mob-var-lt-mn-cn-wh)
1393
- )
1394
- );
1395
- gap: var(
1396
- --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1397
- var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg))
1398
- );
1399
- .field__group__item {
1400
- font-size: 16px;
1401
- display: flex;
1402
- flex-direction: column;
1403
- align-items: center;
1404
- justify-content: center;
1405
- gap: 8px;
1406
- input[type="number"] {
1407
- // width: 70px !important;
1408
- width: 100%;
1409
- border: 1px solid var(--_gray-300);
1410
- padding-inline: 10px;
1411
- border-radius: 4px;
1412
- text-align: center;
1413
- height: 40px;
1414
- &:focus-within {
1415
- border: 1px solid var(--_primary-200);
1416
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1417
- }
1418
- &:disabled {
1419
- cursor: not-allowed;
1420
- opacity: 0.4;
1421
- }
1422
- }
1423
- }
1424
- }
1425
- // Enter quantity styles
1426
- .quantiy__details {
1427
- display: flex;
1428
- flex-direction: column;
1429
- gap: var(
1430
- --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1431
- var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1432
- );
1433
- padding: var(
1434
- --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1435
- var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1436
- );
1437
-
1438
- .title {
1439
- display: flex;
1440
- justify-content: space-between;
1441
- align-items: center;
1442
- font-weight: 600;
1443
- font-size: 18px;
1444
- & > button {
1445
- border-bottom: 1px solid var(--_gray-400);
1446
- color: var(--_gray-600);
1447
- font-size: 14px;
1448
- }
1449
- }
1450
- .fit__details {
1451
- display: flex;
1452
- flex-direction: column;
1453
- gap: 12px;
1454
- .fit__desc {
1455
- display: flex;
1456
- flex-direction: column;
1457
- gap: var(
1458
- --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1459
- var(
1460
- --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1461
- var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1462
- )
1463
- );
1464
-
1465
- font-size: 16px;
1466
- color: var(--_gray-900);
1467
- .each__price {
1468
- font-weight: 600;
1469
- }
1470
- }
1471
- }
1472
- }
1473
- .grouped_items {
1474
- display: flex;
1475
- flex-direction: column;
1476
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1477
-
1478
- .tab__accordion {
1479
- display: flex;
1480
- flex-direction: column;
1481
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1482
-
1483
- .tab__container {
1484
- display: flex;
1485
- flex-direction: column;
1486
-
1487
- .tab {
1488
- &:first-child {
1489
- margin-bottom: var(
1490
- --_ctm-mob-lt-on-te-ve-sg,
1491
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
1492
- );
1493
- }
1494
- }
1495
-
1496
- .tab__content {
1497
- display: flex;
1498
- flex-direction: column;
1499
- padding: var(
1500
- --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1501
- var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1502
- );
1503
-
1504
- .field__group {
1505
- gap: var(
1506
- --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1507
- var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1508
- );
1509
-
1510
- .field__group__item {
1511
- gap: var(
1512
- --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1513
- var(
1514
- --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1515
- var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1516
- )
1517
- );
1518
- }
1519
- }
1520
- }
1521
- }
1522
- }
1523
-
1524
- &[data-show-divider="true"] {
1525
- & > div {
1526
- &:not(:last-child)::after {
1527
- content: "";
1528
- position: relative;
1529
- background-color: #000;
1530
- height: 1px;
1531
- width: 100%;
1532
- display: flex;
1533
- top: calc(
1534
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1535
- );
1536
- }
1537
- }
1538
-
1539
- .tab__accordion {
1540
- &:not(:last-child)::after {
1541
- content: "";
1542
- position: relative;
1543
- background-color: #000;
1544
- height: 1px;
1545
- width: 100%;
1546
- display: flex;
1547
- top: calc(
1548
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1549
- );
1550
- }
1551
- }
1552
- }
1553
- }
1554
- // tabs
1555
- .tabs__container {
1556
- display: flex;
1557
- position: relative;
1558
- .tab {
1559
- flex: 1;
1560
- padding-block: 20px;
1561
- font-weight: 600;
1562
- text-align: center;
1563
- cursor: pointer;
1564
- position: relative;
1565
- &.tab__active {
1566
- font-weight: bold;
1567
- }
1568
- }
1569
- .tab__active-indicator {
1570
- position: absolute;
1571
- bottom: 0;
1572
- left: 0;
1573
- height: 2px;
1574
- background-color: #000;
1575
- transition:
1576
- left 0.3s ease,
1577
- width 0.3s ease;
1578
- }
1579
- }
1580
-
1581
- // accordion tabs
1582
- .tab__accordion_wrapper {
1583
- .tab__accordion {
1584
- display: flex;
1585
- flex-direction: column;
1586
- padding: var(
1587
- --_ctm-mob-lt-gd-os-dy-se-cr-pg,
1588
- var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
1589
- );
1590
-
1591
- .tab__container {
1592
- display: flex;
1593
- flex-direction: column;
1594
- gap: var(
1595
- --_ctm-mob-lt-gd-os-dy-se-an-sg,
1596
- var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1597
- );
1598
-
1599
- .tab_acc_wrapper {
1600
- display: flex;
1601
- flex-direction: column;
1602
- gap: var(
1603
- --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1604
- var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg))
1605
- );
1606
-
1607
- padding: var(
1608
- --_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1609
- var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))
1610
- )
1611
- var(
1612
- --_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1613
- var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg))
1614
- );
1615
-
1616
- .tab {
1617
- display: flex;
1618
- padding-inline: 2px;
1619
- position: relative;
1620
- cursor: pointer;
1621
- flex-direction: row;
1622
- &[data-expand-icon="Left"] {
1623
- flex-direction: row-reverse;
1624
- justify-content: flex-end;
1625
- }
1626
- &[data-item-dividers="true"] {
1627
- &::after {
1628
- content: "";
1629
- position: absolute;
1630
- bottom: 0;
1631
- height: 2px;
1632
- width: 100%;
1633
- border-bottom: 1px solid var(--_gray-200);
1634
- }
1635
- }
1636
- span {
1637
- padding-block: 12px;
1638
- display: inline-block;
1639
- }
1640
- .active {
1641
- border-bottom: 2px solid var(--_primary-400);
1642
- }
1643
- &.inactive {
1644
- height: 0px;
1645
- }
1646
- }
1647
- .tab__content {
1648
- &.d-none {
1649
- display: none;
1650
- }
1651
- &.d-block {
1652
- display: block;
1653
- }
1654
- }
1655
- }
1656
- }
1657
- }
1658
-
1659
- &[data-show-dividers="true"] {
1660
- .tab__accordion {
1661
- .tab__container {
1662
- .tab_acc_wrapper {
1663
- &:not(:last-child)::after {
1664
- content: "";
1665
- position: relative;
1666
- background-color: #000;
1667
- height: 1px;
1668
- width: 100%;
1669
- display: flex;
1670
- top: calc(
1671
- var(
1672
- --_ctm-mob-lt-gd-os-dy-se-an-sg,
1673
- var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1674
- ) /
1675
- 2
1676
- );
1677
- }
1678
- }
1679
- }
1680
- }
1681
- }
1682
-
1683
- &[data-icon-position="Left"] {
1684
- .tab__accordion {
1685
- .tab__container {
1686
- .tab_acc_wrapper {
1687
- .tab {
1688
- flex-direction: row-reverse;
1689
- align-self: flex-start;
1690
- }
1691
- }
1692
- }
1693
- }
1694
- }
1695
- }
1696
-
1697
- // table
1698
- .table_container,
1699
- .tab__content {
1700
- .table__class {
1701
- border: 1px solid var(--_gray-200);
1702
- border-radius: 8px;
1703
- .custom__table {
1704
- border: 1px solid var(--_gray-200);
1705
- width: 100%;
1706
- table-layout: fixed;
1707
- // height: 300px;
1708
-
1709
- border-collapse: collapse;
1710
- &[data-header-divider="true"] {
1711
- thead tr th {
1712
- border-bottom: 1px solid var(--_gray-200);
1713
- }
1714
- }
1715
- &[data-row-divider="true"] {
1716
- tbody tr td {
1717
- border-bottom: 1px solid var(--_gray-200);
1718
- }
1719
- }
1720
- &[data-column-divider="true"] {
1721
- tbody tr td,
1722
- thead tr th {
1723
- border-right: 1px solid var(--_gray-200);
1724
- }
1725
-
1726
- tbody tr td:last-child,
1727
- thead tr th:last-child {
1728
- border-right: none;
1729
- }
1730
- }
1731
- &[data-alternative-row-colors="true"] {
1732
- tbody tr:nth-child(odd) {
1733
- background-color: var(--_gray-300);
1734
- width: 100%;
1735
- }
1736
- }
1737
- thead {
1738
- height: var(
1739
- --_ctm-mob-lt-te-dy-se-hr-ht,
1740
- var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1741
- );
1742
- th {
1743
- height: var(
1744
- --_ctm-mob-lt-te-dy-se-hr-ht,
1745
- var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1746
- );
1747
- text-align: var(
1748
- --_ctm-mob-lt-te-dy-se-ct-at,
1749
- var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1750
- );
1751
- padding: var(
1752
- --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1753
- var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1754
- );
1755
- background-color: var(--_gray-50);
1756
- font-weight: 600;
1757
- color: var(--_gray-600);
1758
- word-break: break-word;
1759
- }
1760
- }
1761
-
1762
- tbody {
1763
- tr {
1764
- border-bottom: 1px solid var(--_gray-200);
1765
- height: var(
1766
- --_ctm-mob-lt-te-dy-se-rw-ht,
1767
- var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1768
- );
1769
- td {
1770
- text-align: var(
1771
- --_ctm-mob-lt-te-dy-se-ct-at,
1772
- var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1773
- );
1774
- padding: var(
1775
- --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1776
- var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1777
- );
1778
- .disocunted__price {
1779
- color: var(--_gray-900);
1780
- }
1781
- .actual__price {
1782
- color: var(--_gray-500);
1783
- }
1784
- .qty__input {
1785
- border: 1px solid var(--_gray-200);
1786
- padding-inline: 10px;
1787
- text-align: center;
1788
- border-radius: 6px;
1789
- height: 40px;
1790
- }
1791
- input[type="number"] {
1792
- &:focus-within {
1793
- border: 1px solid var(--_primary-200);
1794
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1795
- }
1796
- &:disabled {
1797
- cursor: not-allowed;
1798
- opacity: 0.4;
1799
- }
1800
- }
1801
- }
1802
- }
1803
- }
1804
- }
1805
- }
1806
- &[data-show-divider="true"] {
1807
- & > div {
1808
- &:not(:last-child)::after {
1809
- content: "";
1810
- position: relative;
1811
- background-color: #000;
1812
- height: 1px;
1813
- width: 100%;
1814
- display: flex;
1815
- top: calc(
1816
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1817
- );
1818
- }
1819
- }
1820
- }
1821
- }
1822
-
1823
- // horizontal tabs
1824
- .tabs__main {
1825
- &.tabs__vertical {
1826
- .tabs {
1827
- .tabs__container {
1828
- flex-direction: column;
1829
- min-width: 120px;
1830
- }
1831
- }
1832
- }
1833
- &.tabs__hr {
1834
- .tabs {
1835
- flex-direction: column;
1836
- gap: var(
1837
- --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
1838
- var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg))
1839
- );
1840
-
1841
- .tabs__container {
1842
- width: 100%;
1843
- }
1844
- }
1845
- }
1846
- .tabs {
1847
- display: flex;
1848
- gap: var(
1849
- --_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg,
1850
- var(--_ctm-tab-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg))
1851
- );
1852
-
1853
- .tabs__container {
1854
- display: flex;
1855
- gap: var(
1856
- --_ctm-mob-lt-gd-os-dy-se-tb-sg,
1857
- var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg))
1858
- );
1859
-
1860
- .tab {
1861
- display: flex;
1862
- justify-content: var(--_tab-aliginment);
1863
- padding: var(
1864
- --_ctm-mob-lt-gd-os-dy-se-tb-vl-pg,
1865
- var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg))
1866
- )
1867
- var(
1868
- --_ctm-mob-lt-gd-os-dy-se-tb-hl-pg,
1869
- var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg))
1870
- );
1871
- background-color: var(
1872
- --_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr,
1873
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr))
1874
- );
1875
- border-color: var(
1876
- --_show-border-im-se,
1877
- var(
1878
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr,
1879
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr))
1880
- )
1881
- );
1882
- border-style: var(
1883
- --_show-border-im-se,
1884
- var(
1885
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-se,
1886
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se))
1887
- )
1888
- );
1889
- border-width: var(
1890
- --_show-border-im-se,
1891
- var(
1892
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh,
1893
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh))
1894
- )
1895
- );
1896
- border-radius: var(
1897
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1898
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs))
1899
- );
1900
- box-shadow: var(
1901
- --_show-shadow-im-se,
1902
- var(
1903
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae,
1904
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae)
1905
- ),
1906
- var(
1907
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br,
1908
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br)
1909
- ),
1910
- var(
1911
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd,
1912
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd)
1913
- ),
1914
- var(
1915
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr,
1916
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr)
1917
- )
1918
- );
1919
- border-radius: var(
1920
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1921
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs)
1922
- );
1923
-
1924
- &:hover {
1925
- background-color: var(
1926
- --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
1927
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr))
1928
- );
1929
- border-color: var(
1930
- --_show-border-im-se,
1931
- var(
1932
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr,
1933
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr))
1934
- )
1935
- );
1936
- border-style: var(
1937
- --_show-border-im-se,
1938
- var(
1939
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-se,
1940
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se))
1941
- )
1942
- );
1943
- border-width: var(
1944
- --_show-border-im-se,
1945
- var(
1946
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh,
1947
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh))
1948
- )
1949
- );
1950
- border-radius: var(
1951
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs,
1952
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs))
1953
- );
1954
- box-shadow: var(
1955
- --_show-shadow-im-se,
1956
- var(
1957
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae,
1958
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae)
1959
- ),
1960
- var(
1961
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br,
1962
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br)
1963
- ),
1964
- var(
1965
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd,
1966
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd)
1967
- ),
1968
- var(
1969
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr,
1970
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr)
1971
- )
1972
- );
1973
- }
1974
-
1975
- &.active {
1976
- background-color: var(
1977
- --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
1978
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr))
1979
- );
1980
- border-color: var(
1981
- --_show-border-im-se,
1982
- var(
1983
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr,
1984
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr))
1985
- )
1986
- );
1987
- border-style: var(
1988
- --_show-border-im-se,
1989
- var(
1990
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-se,
1991
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se))
1992
- )
1993
- );
1994
- border-width: var(
1995
- --_show-border-im-se,
1996
- var(
1997
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh,
1998
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh))
1999
- )
2000
- );
2001
- border-radius: var(
2002
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs,
2003
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs))
2004
- );
2005
- box-shadow: var(
2006
- --_show-shadow-im-se,
2007
- var(
2008
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae,
2009
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae)
2010
- ),
2011
- var(
2012
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br,
2013
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br)
2014
- ),
2015
- var(
2016
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd,
2017
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd)
2018
- ),
2019
- var(
2020
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr,
2021
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr)
2022
- )
2023
- );
2024
- }
2025
- }
2026
- }
2027
- .tab__content {
2028
- padding: var(
2029
- --_ctm-mob-lt-gd-os-dy-se-cr-pg,
2030
- var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
2031
- );
2032
- }
2033
- }
2034
- }
2035
-
2036
- // embla
2037
-
2038
- .embla {
2039
- width: 100%;
2040
- height: 100%;
2041
- position: relative;
2042
- display: flex;
2043
- flex-direction: column;
2044
-
2045
- // overflow: hidden;
2046
-
2047
- .embla__viewport {
2048
- width: 100%;
2049
- height: 100%;
2050
- position: relative;
2051
- display: flex;
2052
- flex-direction: column;
2053
-
2054
- overflow: hidden;
2055
-
2056
- .embla__container {
2057
- width: 100%;
2058
- height: 100%;
2059
- display: flex;
2060
- grid-template-rows: 100%;
2061
- // grid-template-columns: 100%;
2062
- // grid-template-columns: repeat(
2063
- // var(--_ctm-lt-is-pr-se),
2064
- // calc(100% / var(--_ctm-lt-is-pr-se))
2065
- // );
2066
- // grid-auto-flow: column;
2067
- gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
2068
-
2069
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2070
- height: calc(
2071
- 100% - calc(
2072
- var(
2073
- --_ctm-mob-dn-pn-as-aw-se,
2074
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2075
- ) +
2076
- 8px
2077
- )
2078
- );
2079
- }
2080
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2081
- height: calc(
2082
- 100% - calc(
2083
- var(
2084
- --_ctm-mob-dn-pn-le-le-ht,
2085
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2086
- ) +
2087
- 20px
2088
- )
2089
- );
2090
- }
2091
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
2092
- height: calc(
2093
- 100% - calc(
2094
- var(
2095
- --_ctm-mob-dn-pn-ds-dt-se,
2096
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2097
- ) +
2098
- 20px
2099
- )
2100
- );
2101
- }
2102
-
2103
- .embla__slide {
2104
- // width: 100%;
2105
- height: 100%;
2106
- }
2107
- }
2108
- }
2109
-
2110
- .arrow-navigation {
2111
- display: flex;
2112
- position: absolute;
2113
- top: 50%;
2114
- left: 50%;
2115
- width: 100%;
2116
- justify-content: space-between;
2117
- transform: translate(-50%, -50%);
2118
- // padding-left: 20px;
2119
- &[data-control-type="Side"] {
2120
- .left-button,
2121
- .right-button {
2122
- background-color: transparent;
2123
- }
2124
- }
2125
- &[data-background-shape="Round"] {
2126
- .left-button,
2127
- .right-button {
2128
- background-color: #f2f5f5;
2129
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2130
- }
2131
- }
2132
- &[data-control-type="Bottom-Overflow"] {
2133
- transform: translateX(-50%);
2134
- width: 100%;
2135
- justify-content: center;
2136
- gap: 12px;
2137
- top: unset;
2138
- bottom: 6px;
2139
- }
2140
- &[data-control-type="Bottom"] {
2141
- transform: unset;
2142
- position: static;
2143
- width: 100%;
2144
- justify-content: center;
2145
- gap: 12px;
2146
- margin-top: 10px;
2147
- }
2148
- .left-button {
2149
- padding: 10px;
2150
- border-radius: 50%;
2151
- border: none;
2152
- width: var(
2153
- --_ctm-mob-dn-pn-as-aw-se,
2154
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2155
- );
2156
- height: var(
2157
- --_ctm-mob-dn-pn-as-aw-se,
2158
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2159
- );
2160
-
2161
- display: flex;
2162
- align-items: center;
2163
- justify-content: center;
2164
- cursor: pointer;
2165
- outline: none;
2166
- margin-left: 12px;
2167
- &:disabled {
2168
- & svg {
2169
- path {
2170
- stroke: rgb(192, 192, 192);
2171
- }
2172
- }
2173
- }
2174
- }
2175
- .right-button {
2176
- border-radius: 50%;
2177
- border: none;
2178
- width: var(
2179
- --_ctm-mob-dn-pn-as-aw-se,
2180
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2181
- );
2182
- height: var(
2183
- --_ctm-mob-dn-pn-as-aw-se,
2184
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2185
- );
2186
-
2187
- display: flex;
2188
- align-items: center;
2189
- justify-content: center;
2190
- cursor: pointer;
2191
- outline: none;
2192
- margin-right: 12px;
2193
- padding: 10px;
2194
-
2195
- &:disabled {
2196
- & svg {
2197
- path {
2198
- stroke: rgb(192, 192, 192);
2199
- }
2200
- }
2201
- }
2202
- }
2203
- .icon {
2204
- display: flex;
2205
- svg {
2206
- width: calc(
2207
- var(
2208
- --_ctm-mob-dn-pn-as-aw-se,
2209
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2210
- ) *
2211
- 0.5
2212
- );
2213
- height: calc(
2214
- var(
2215
- --_ctm-mob-dn-pn-as-aw-se,
2216
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2217
- ) *
2218
- 0.5
2219
- );
2220
- path {
2221
- stroke: var(
2222
- --_ctm-mob-dn-pn-as-aw-cr,
2223
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2224
- );
2225
- }
2226
- }
2227
- }
2228
- }
2229
-
2230
- &[data-thumbnail-placement="top"] {
2231
- flex-direction: column-reverse;
2232
- }
2233
- &[data-thumbnail-placement="bottom"] {
2234
- flex-direction: column;
2235
- }
2236
- &[data-thumbnail-placement="left"] {
2237
- flex-direction: row-reverse;
2238
-
2239
- .embla__thumbs {
2240
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2241
-
2242
- height: 100%;
2243
-
2244
- & .embla__thumbs__container {
2245
- flex-direction: column;
2246
- height: 100%;
2247
- }
2248
- }
2249
- }
2250
- &[data-thumbnail-placement="right"] {
2251
- flex-direction: row;
2252
- .embla__thumbs {
2253
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2254
-
2255
- height: 100%;
2256
-
2257
- & .embla__thumbs__container {
2258
- flex-direction: column;
2259
- height: 100%;
2260
- }
2261
- }
2262
- }
2263
- &[data-control-type="Side"] {
2264
- display: flex;
2265
- align-self: center;
2266
- flex-direction: row;
2267
- .left-button:disabled,
2268
- .right-button:disabled {
2269
- display: none;
2270
- }
2271
- }
2272
- .embla__dots {
2273
- display: flex;
2274
- flex-wrap: wrap;
2275
- justify-content: center;
2276
- align-items: center;
2277
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2278
- gap: 6px;
2279
- margin-top: 16px;
2280
-
2281
- &[data-control-type="Bottom-Overflow"] {
2282
- position: absolute;
2283
- bottom: 10px;
2284
- left: 50%;
2285
- transform: translateX(-50%);
2286
- width: 75%;
2287
- }
2288
- .embla__dot {
2289
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2290
- -webkit-appearance: none;
2291
- appearance: none;
2292
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
2293
- touch-action: manipulation;
2294
- display: inline-flex;
2295
- text-decoration: none;
2296
- cursor: pointer;
2297
- border: 0;
2298
- padding: 0;
2299
- margin: 0;
2300
- // width: 0.6rem;
2301
- // height: 0.6rem;
2302
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2303
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2304
- display: flex;
2305
- align-items: center;
2306
- justify-content: center;
2307
- border-radius: 50%;
2308
- }
2309
- .embla__dot:after {
2310
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2311
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2312
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2313
- border-radius: 50%;
2314
- display: flex;
2315
- align-items: center;
2316
- content: "";
2317
- }
2318
- .embla__dot--selected:after {
2319
- box-shadow: inset 0 0 0 1px var(--text-body);
2320
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2321
- }
2322
- &[data-slider-control="Pagination Line"] {
2323
- .embla__dot {
2324
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2325
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2326
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
2327
-
2328
- border-radius: 6px;
2329
- }
2330
- .embla__dot--selected:after {
2331
- box-shadow: inset 0 0 0 1px var(--text-body);
2332
- border-radius: 6px;
2333
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2334
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2335
- // background-color: #fff;
2336
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
2337
- }
2338
- }
2339
- }
2340
-
2341
- .embla__thumbs {
2342
- width: 100%;
2343
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2344
-
2345
- position: relative;
2346
- display: grid;
2347
- grid-template-columns: 1fr;
2348
- overflow: hidden;
2349
- // margin: 10px;
2350
- padding: 10px;
2351
-
2352
- .embla__thumbs__viewport {
2353
- width: 100%;
2354
- height: 100%;
2355
- position: relative;
2356
- display: flex;
2357
- flex-direction: column;
2358
-
2359
- overflow: hidden;
2360
- }
2361
- .embla__thumbs__container {
2362
- display: flex;
2363
- flex-direction: row;
2364
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
2365
- gap: var(--_ctm-lt-tl-sg);
2366
- width: 100%;
2367
- // justify-content: center;
2368
- // height: 200px;
2369
-
2370
- .embla__thumbs__slide {
2371
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2372
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2373
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2374
- & img {
2375
- width: 100%;
2376
- height: 100%;
2377
- }
2378
- }
2379
- }
2380
- }
2381
- }
2382
- }
2383
- }
2384
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $minWidth: 70px;
6
+
7
+ [data-div-type="element"] {
8
+ &[data-element-type="variantPicker"] {
9
+ --_ctm-mob-var-lt-mn-cn-wh: 70px;
10
+
11
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
12
+
13
+ min-width: #{$minWidth} !important;
14
+
15
+ & > .wrapper {
16
+ width: 100%;
17
+ // height: 100%;
18
+ }
19
+ &[data-show-shadow="false"] {
20
+ --_show-shadow: none;
21
+ }
22
+ .text-element {
23
+ color: #333;
24
+ font-family: Lato;
25
+ font-size: 12px;
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ line-height: 18px;
29
+ margin-bottom: 6px;
30
+ }
31
+ .option__title {
32
+ margin-bottom: 4px;
33
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
34
+ font-family: var(
35
+ --_ctm-mob-dn-on-te-ft-fy,
36
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
37
+ );
38
+ font-size: var(
39
+ --_ctm-mob-dn-on-te-ft-se,
40
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
41
+ );
42
+ font-weight: var(
43
+ --_ctm-mob-dn-on-te-ft-wt,
44
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
45
+ );
46
+ font-style: var(
47
+ --_ctm-mob-dn-on-te-ft-se-ic,
48
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
49
+ );
50
+ text-align: var(
51
+ --_ctm-mob-dn-on-te-tt-an,
52
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
53
+ );
54
+ letter-spacing: var(
55
+ --_ctm-mob-dn-on-te-lr-sg,
56
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
57
+ );
58
+ line-height: var(
59
+ --_ctm-mob-dn-on-te-le-ht,
60
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
61
+ );
62
+ text-decoration: var(
63
+ --_ctm-mob-dn-on-te-ue,
64
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
65
+ );
66
+ }
67
+
68
+ .is__combination_avail {
69
+ color: red;
70
+ font-size: 14px;
71
+ font-weight: 600;
72
+ }
73
+ .variant__container {
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
77
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
+ white-space: nowrap;
79
+
80
+ .standard_wrapper {
81
+ // Select Colors
82
+ .select__colors {
83
+ font-size: 16px;
84
+ color: var(--_gray-500);
85
+ display: flex;
86
+ flex-direction: column;
87
+ gap: var(
88
+ --_ctm-mob-lt-on-te-ve-sg,
89
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
90
+ );
91
+ // padding: var(
92
+ // --_ctm-mob-lt-sh-te-dy-se-im-pg,
93
+ // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
94
+ // );
95
+
96
+ .select__group {
97
+ display: flex;
98
+ flex-direction: row;
99
+ align-items: center;
100
+ gap: var(
101
+ --_ctm-mob-lt-sh-te-dy-se-im-sg,
102
+ var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg))
103
+ );
104
+
105
+ &[data-swatch-dispaly="Vertically"] {
106
+ flex-direction: column;
107
+ }
108
+ &[data-swatch-overflow="Scroll"] {
109
+ flex-wrap: nowrap;
110
+ overflow-x: auto;
111
+ }
112
+ &[data-swatch-overflow="Wrap"] {
113
+ flex-wrap: wrap;
114
+ }
115
+
116
+ .show_more_button {
117
+ background-color: var(
118
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
119
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
120
+ );
121
+ font-family: var(
122
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
123
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
124
+ );
125
+ border-color: var(
126
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
127
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
128
+ );
129
+ border-radius: var(
130
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
131
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
132
+ );
133
+ border-style: var(
134
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
135
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
136
+ );
137
+ border-width: var(
138
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
139
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
140
+ );
141
+ font-size: var(
142
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
143
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
144
+ );
145
+ font-style: var(
146
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
147
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
148
+ );
149
+ font-weight: var(
150
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
151
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
152
+ );
153
+ line-height: var(
154
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
155
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
156
+ );
157
+ letter-spacing: var(
158
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
159
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
160
+ );
161
+ box-shadow: var(
162
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
163
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
164
+ )
165
+ var(
166
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
167
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
168
+ )
169
+ var(
170
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
171
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
172
+ )
173
+ var(
174
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
175
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
176
+ );
177
+ text-align: var(
178
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
179
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
180
+ );
181
+ color: var(
182
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
183
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
184
+ );
185
+ text-decoration: var(
186
+ --_ctm-mob-dn-sw-me-is-bn-ue,
187
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
188
+ );
189
+ }
190
+
191
+ .select__group__item {
192
+ transition: width 0.3s ease;
193
+
194
+ --_ctm-lt-sh-im-se: 30px;
195
+ height: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
196
+ width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
197
+ padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg);
198
+
199
+ border-color: var(
200
+ --_sf-hr-br-cr,
201
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
202
+ );
203
+
204
+ background-color: var(
205
+ --_sf-hr-bd-cr,
206
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
207
+ );
208
+
209
+ border-style: var(
210
+ --_sf-hr-br-se,
211
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
212
+ );
213
+
214
+ border-width: var(
215
+ --_sf-hr-br-wh,
216
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
217
+ );
218
+ border-radius: var(
219
+ --_sf-hr-br-rs,
220
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
221
+ );
222
+
223
+ box-shadow: var(
224
+ --_sf-hr-sw-ae,
225
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
226
+ )
227
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
228
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
229
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
230
+
231
+ cursor: pointer;
232
+ overflow: hidden;
233
+ .product-select-image {
234
+ object-fit: cover;
235
+ width: 100%;
236
+ height: 100%;
237
+ }
238
+ &[data-background-shape="circle"] {
239
+ border-radius: 50%;
240
+ }
241
+ &[data-background-shape="square"] {
242
+ border-radius: 5px;
243
+ }
244
+ &[data-background-shape="capsule"] {
245
+ --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
246
+ --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
247
+
248
+ width: var(--toggle-width);
249
+ height: var(--toggle-height);
250
+
251
+ border-radius: var(--toggle-height); /* Full pill shape */
252
+ box-sizing: border-box;
253
+ }
254
+ &[data-swatch-shape="circle"] {
255
+ & div,
256
+ .product-select-image {
257
+ border-radius: 50%;
258
+ }
259
+ // border-radius: 50%;
260
+ }
261
+ &[data-swatch-shape="capsule"] {
262
+ & div,
263
+ .product-select-image {
264
+ // border-radius: 50%;
265
+ width: 100%;
266
+ height: 100%;
267
+ border-radius: inherit;
268
+ }
269
+ // border-radius: 50%;
270
+ }
271
+
272
+ &[data-selected="true"] {
273
+ border-color: var(
274
+ --_sf-sd-br-cr,
275
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
276
+ );
277
+
278
+ background-color: var(
279
+ --_sf-sd-bd-cr,
280
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
281
+ );
282
+ border-style: var(
283
+ --_sf-sd-br-se,
284
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
285
+ );
286
+ border-width: var(
287
+ --_sf-sd-br-wh,
288
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
289
+ );
290
+ box-shadow: var(
291
+ --_sf-sd-sw-ae,
292
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
293
+ )
294
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
295
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
296
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
297
+
298
+ &[data-background-shape-selected="circle"] {
299
+ border-radius: 50%;
300
+ }
301
+ &[data-background-shape-selected="square"] {
302
+ border-radius: 5px;
303
+ }
304
+ &[data-background-shape-selected="capsule"] {
305
+ border-radius: 80%;
306
+ // width: calc(
307
+ // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
308
+ // 8px
309
+ // );
310
+ }
311
+ &[data-swatch-shape-selected="circle"] {
312
+ & div,
313
+ .product-select-image {
314
+ border-radius: 50%;
315
+ }
316
+ }
317
+ &[data-swatch-shape-selected="capsule"] {
318
+ & div,
319
+ .product-select-image {
320
+ border-radius: 50%;
321
+ }
322
+ }
323
+ &[data-swatch-shape-selected="square"] {
324
+ & div,
325
+ .product-select-image {
326
+ border-radius: 5px;
327
+ }
328
+ }
329
+ }
330
+ &:hover {
331
+ --_sf-hr-bd-cr: var(
332
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
333
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
334
+ );
335
+ --_sf-hr-br-cr: var(
336
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
337
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
338
+ );
339
+ --_sf-hr-br-se: var(
340
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
341
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
342
+ );
343
+ --_sf-hr-br-wh: var(
344
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
345
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
346
+ );
347
+ --_sf-hr-br-bs: var(
348
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
349
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
350
+ );
351
+
352
+ // new
353
+ --_sf-hr-sw-ae: var(
354
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
355
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
356
+ );
357
+ --_sf-hr-sw-br: var(
358
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
359
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
360
+ );
361
+ --_sf-hr-sw-hr: var(
362
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
363
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
364
+ );
365
+ --_sf-hr-sw-cr: var(
366
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
367
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
368
+ );
369
+ }
370
+
371
+ &:hover {
372
+ &[data-background-shape-hover="circle"] {
373
+ border-radius: 50%;
374
+ }
375
+ &[data-background-shape-hover="square"] {
376
+ border-radius: 5px;
377
+ }
378
+ &[data-background-shape-hover="capsule"] {
379
+ border-radius: 80%;
380
+ // width: calc(
381
+ // var(
382
+ // --_ctm-mob-lt-sh-im-se,
383
+ // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))
384
+ // ) +
385
+ // 8px
386
+ // );
387
+ }
388
+ &[data-swatch-shape-hover="circle"] {
389
+ & div,
390
+ .product-select-image {
391
+ border-radius: 50%;
392
+ }
393
+ // border-radius: 50%;
394
+ }
395
+ &[data-swatch-shape-hover="capsule"] {
396
+ & div,
397
+ .product-select-image {
398
+ border-radius: 50%;
399
+ }
400
+ }
401
+ &[data-swatch-shape-hover="square"] {
402
+ & div,
403
+ .product-select-image {
404
+ border-radius: 5px;
405
+ }
406
+ }
407
+ }
408
+
409
+ &[data-selected="true"] {
410
+ --_sf-sd-bd-cr: var(
411
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
412
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
413
+ );
414
+ --_sf-sd-br-cr: var(
415
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
416
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
417
+ );
418
+ --_sf-sd-br-se: var(
419
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
420
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
421
+ );
422
+ --_sf-sd-br-wh: var(
423
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
424
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
425
+ );
426
+ --_sf-sd-br-bs: var(
427
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
428
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
429
+ );
430
+
431
+ // new
432
+ --_sf-sd-sw-ae: var(
433
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
434
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
435
+ );
436
+ --_sf-sd-sw-br: var(
437
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
438
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
439
+ );
440
+ --_sf-sd-sw-sd: var(
441
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
442
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
443
+ );
444
+ --_sf-sd-sw-cr: var(
445
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
446
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
447
+ );
448
+
449
+ border-color: var(
450
+ --_sf-sd-br-cr,
451
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
452
+ );
453
+
454
+ background-color: var(
455
+ --_sf-sd-bd-cr,
456
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
457
+ );
458
+
459
+ border-style: var(
460
+ --_sf-sd-br-se,
461
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
462
+ );
463
+
464
+ border-width: var(
465
+ --_sf-sd-br-wh,
466
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
467
+ );
468
+ border-radius: var(
469
+ --_sf-sd-br-rs,
470
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
471
+ );
472
+
473
+ box-shadow: var(
474
+ --_sf-sd-sw-ae,
475
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
476
+ )
477
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
478
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
479
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
480
+
481
+ &[data-background-shape-selected="circle"] {
482
+ border-radius: 50%;
483
+ }
484
+ &[data-background-shape-selected="square"] {
485
+ border-radius: 5px;
486
+ }
487
+ &[data-background-shape-selected="capsule"] {
488
+ --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
489
+ --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
490
+
491
+ width: var(--toggle-width);
492
+ height: var(--toggle-height);
493
+
494
+ border-radius: var(--toggle-height); /* Full pill shape */
495
+ box-sizing: border-box;
496
+ }
497
+ &[data-swatch-shape-selected="circle"] {
498
+ & div,
499
+ .product-select-image {
500
+ border-radius: 50%;
501
+ }
502
+ }
503
+ &[data-swatch-shape-selected="capsule"] {
504
+ & div,
505
+ .product-select-image {
506
+ // border-radius: 50%;
507
+ width: 100%;
508
+ height: 100%;
509
+ border-radius: inherit;
510
+ }
511
+ }
512
+ &[data-swatch-shape-selected="square"] {
513
+ & div,
514
+ .product-select-image {
515
+ border-radius: 5px;
516
+ }
517
+ }
518
+ }
519
+
520
+ // &.disabled {
521
+ // cursor: not-allowed;
522
+ // opacity: 0.4;
523
+ // &[data-swatch-type="Swatch Image"] {
524
+ // position: relative;
525
+ // overflow: hidden;
526
+ // &::after {
527
+ // content: "";
528
+ // width: 172%;
529
+ // height: 1px;
530
+ // position: absolute;
531
+ // background: #f00;
532
+ // left: -14px;
533
+ // transform: rotate(48deg);
534
+ // /* -webkit-transform: rotate(48deg); */
535
+ // -moz-transform: rotate(48deg);
536
+ // top: 14px;
537
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
538
+ // }
539
+ // &::before {
540
+ // content: "";
541
+ // width: 164%;
542
+ // height: 1px;
543
+ // position: absolute;
544
+ // background: #f00;
545
+ // left: -14px;
546
+ // transform: rotate(-48deg);
547
+ // -webkit-transform: rotate(-48deg);
548
+ // -moz-transform: rotate(-48deg);
549
+ // top: 14px;
550
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
551
+ // }
552
+ // }
553
+ // }
554
+
555
+ position: relative;
556
+
557
+ &.disabled {
558
+ color: #aaa;
559
+ background-color: #f9f9f9;
560
+ border-color: #ddd;
561
+ cursor: not-allowed;
562
+ opacity: 0.3;
563
+ overflow: hidden;
564
+ }
565
+
566
+ .cross-line {
567
+ position: absolute;
568
+ inset: 0;
569
+ background-color: #cccccc;
570
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
571
+ pointer-events: none;
572
+ }
573
+ .product-select-image {
574
+ width: 100%;
575
+ height: 100%;
576
+ }
577
+ }
578
+ }
579
+ }
580
+ // Select Fit and Size
581
+ .select__fit {
582
+ font-size: 16px;
583
+ color: var(--_gray-500);
584
+ display: flex;
585
+ flex-direction: column;
586
+ gap: var(
587
+ --_ctm-mob-lt-on-te-ve-sg,
588
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
589
+ );
590
+
591
+ // padding: var(
592
+ // --_ctm-mob-lt-se-st-dy-se-im-pg,
593
+ // var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
594
+ // );
595
+
596
+ .select__group {
597
+ display: flex;
598
+ gap: 8px;
599
+ flex-wrap: wrap;
600
+ margin-bottom: 10px;
601
+ flex-direction: row;
602
+ gap: var(
603
+ --_ctm-mob-lt-se-st-dy-se-im-sg,
604
+ var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
605
+ );
606
+
607
+ &[data-single-dispaly="Vertically"] {
608
+ flex-direction: column;
609
+ }
610
+ &[data-single-overflow="Scroll"] {
611
+ overflow-x: auto;
612
+ overflow-y: hidden;
613
+ flex-wrap: nowrap;
614
+ }
615
+ &[data-swatch-overflow="Scroll"] {
616
+ overflow-x: auto;
617
+ flex-wrap: nowrap;
618
+ overflow-y: hidden;
619
+ }
620
+ .show_more_button {
621
+ background-color: var(
622
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
623
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
624
+ );
625
+ font-family: var(
626
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
627
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
628
+ );
629
+ border-color: var(
630
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
631
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
632
+ );
633
+ border-radius: var(
634
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
635
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
636
+ );
637
+ border-style: var(
638
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
639
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
640
+ );
641
+ border-width: var(
642
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
643
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
644
+ );
645
+ font-size: var(
646
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
647
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
648
+ );
649
+ font-style: var(
650
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
651
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
652
+ );
653
+ font-weight: var(
654
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
655
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
656
+ );
657
+ line-height: var(
658
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
659
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
660
+ );
661
+ letter-spacing: var(
662
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
663
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
664
+ );
665
+ box-shadow: var(
666
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
667
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
668
+ )
669
+ var(
670
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
671
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
672
+ )
673
+ var(
674
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
675
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
676
+ )
677
+ var(
678
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
679
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
680
+ );
681
+ text-align: var(
682
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
683
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
684
+ );
685
+ color: var(
686
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
687
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
688
+ );
689
+ text-decoration: var(
690
+ --_ctm-mob-dn-sw-me-is-bn-ue,
691
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
692
+ );
693
+ }
694
+ &[data-single-dispaly="Grid"] {
695
+ display: grid;
696
+ grid-template-columns: repeat(
697
+ var(
698
+ --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
699
+ var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
700
+ ),
701
+ minmax(auto, 1fr)
702
+ );
703
+ }
704
+
705
+ .select__group__item {
706
+ transition: color 0.3s ease;
707
+ // border-radius: 6px;
708
+ // border: 1px solid var(--_gray-200);
709
+ cursor: pointer;
710
+ display: flex;
711
+ align-items: center;
712
+ justify-content: center;
713
+
714
+ // height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
715
+ // width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
716
+ padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg);
717
+ min-width: 20px;
718
+ min-height: 20px;
719
+ box-sizing: content-box;
720
+ border-radius: var(
721
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
722
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
723
+ );
724
+
725
+ border-color: var(
726
+ --_sf-hr-br-cr,
727
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
728
+ );
729
+
730
+ background-color: var(
731
+ --_sf-hr-bd-cr,
732
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
733
+ );
734
+ border-style: var(
735
+ --_sf-hr-br-se,
736
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
737
+ );
738
+ border-width: var(
739
+ --_sf-hr-br-wh,
740
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
741
+ );
742
+
743
+ box-shadow: var(
744
+ --_sf-hr-sw-ae,
745
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
746
+ )
747
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
748
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
749
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
750
+
751
+ // font is pending
752
+
753
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
754
+ font-family: var(
755
+ --_sf-hr-ft-fy,
756
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
757
+ );
758
+ font-size: var(
759
+ --_sf-hr-ft-se,
760
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
761
+ );
762
+ font-weight: var(
763
+ --_sf-hr-ft-wt,
764
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
765
+ );
766
+ font-style: var(
767
+ --_sf-hr-ft-se-ic,
768
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
769
+ );
770
+ text-align: var(
771
+ --_sf-hr-tt-an,
772
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
773
+ );
774
+ letter-spacing: var(
775
+ --_sf-hr-lr-sg,
776
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
777
+ );
778
+ line-height: var(
779
+ --_sf-hr-le-ht,
780
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht)
781
+ );
782
+ text-decoration: var(
783
+ --_sf-hr-ue,
784
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
785
+ );
786
+
787
+ &[data-background-shape="circle"] {
788
+ border-radius: 50%;
789
+ }
790
+ // &[data-background-shape="square"] {
791
+ // border-radius: 5px;
792
+ // }
793
+ &[data-background-shape="capsule"] {
794
+ border-radius: 40px; /* Full pill shape */
795
+ box-sizing: border-box;
796
+ }
797
+
798
+ &:hover {
799
+ --_sf-hr-bd-cr: var(
800
+ --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
801
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
802
+ );
803
+ --_sf-hr-br-cr: var(
804
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
805
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
806
+ );
807
+ --_sf-hr-br-se: var(
808
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
809
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
810
+ );
811
+ --_sf-hr-br-wh: var(
812
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
813
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
814
+ );
815
+ --_sf-hr-br-bs: var(
816
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
817
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
818
+ );
819
+
820
+ // new
821
+ --_sf-hr-sw-ae: var(
822
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
823
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
824
+ );
825
+ --_sf-hr-sw-br: var(
826
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
827
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
828
+ );
829
+ --_sf-hr-sw-hr: var(
830
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
831
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
832
+ );
833
+ --_sf-hr-sw-cr: var(
834
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
835
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
836
+ );
837
+
838
+ // for font
839
+
840
+ --_sf-hr-cr: var(
841
+ --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
842
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
843
+ );
844
+ --_sf-hr-ft-fy: var(
845
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
846
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
847
+ );
848
+ --_sf-hr-ft-se: var(
849
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
850
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
851
+ );
852
+ --_sf-hr-ft-wt: var(
853
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
854
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
855
+ );
856
+ --_sf-hr-ft-se-ic: var(
857
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
858
+ var(
859
+ --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
860
+ var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
861
+ )
862
+ );
863
+ --_sf-hr-tt-an: var(
864
+ --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
865
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
866
+ );
867
+ --_sf-hr-lr-sg: var(
868
+ --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
869
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
870
+ );
871
+ --_sf-hr-le-ht: var(
872
+ --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
873
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
874
+ );
875
+
876
+ --_sf-hr-ue: var(
877
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
878
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
879
+ );
880
+ }
881
+
882
+ &.child {
883
+ border: 0;
884
+ border-radius: 0;
885
+ border-bottom: 2px solid var(--_gray-200);
886
+ }
887
+ &[data-selected="true"] {
888
+ --_sf-sd-bd-cr: var(
889
+ --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
890
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
891
+ );
892
+ --_sf-sd-br-cr: var(
893
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
894
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
895
+ );
896
+ --_sf-sd-br-se: var(
897
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
898
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
899
+ );
900
+ --_sf-sd-br-wh: var(
901
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
902
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
903
+ );
904
+ --_sf-sd-br-bs: var(
905
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
906
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
907
+ );
908
+
909
+ // new
910
+ --_sf-sd-sw-ae: var(
911
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
912
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
913
+ );
914
+ --_sf-sd-sw-br: var(
915
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
916
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
917
+ );
918
+ --_sf-sd-sw-hr: var(
919
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
920
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
921
+ );
922
+ --_sf-sd-sw-cr: var(
923
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
924
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
925
+ );
926
+
927
+ // for font
928
+
929
+ --_sf-sd-cr: var(
930
+ --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
931
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
932
+ );
933
+ --_sf-sd-ft-fy: var(
934
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
935
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
936
+ );
937
+ --_sf-sd-ft-se: var(
938
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
939
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
940
+ );
941
+ --_sf-sd-ft-wt: var(
942
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
943
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
944
+ );
945
+ --_sf-sd-ft-se-ic: var(
946
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
947
+ var(
948
+ --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
949
+ var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
950
+ )
951
+ );
952
+ --_sf-sd-tt-an: var(
953
+ --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
954
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
955
+ );
956
+ --_sf-sd-lr-sg: var(
957
+ --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
958
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
959
+ );
960
+ --_sf-sd-le-ht: var(
961
+ --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
962
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
963
+ );
964
+
965
+ --_sf-sd-ue: var(
966
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
967
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
968
+ );
969
+
970
+ border-color: var(
971
+ --_sf-sd-br-cr,
972
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
973
+ );
974
+
975
+ background-color: var(
976
+ --_sf-sd-bd-cr,
977
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
978
+ );
979
+ border-style: var(
980
+ --_sf-sd-br-se,
981
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
982
+ );
983
+ border-width: var(
984
+ --_sf-sd-br-wh,
985
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
986
+ );
987
+
988
+ box-shadow: var(
989
+ --_sf-sd-sw-ae,
990
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
991
+ )
992
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
993
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
994
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
995
+ // font is pending
996
+
997
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
998
+ font-family: var(
999
+ --_sf-sd-ft-fy,
1000
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
1001
+ );
1002
+ font-size: var(
1003
+ --_sf-sd-ft-se,
1004
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1005
+ );
1006
+ font-weight: var(
1007
+ --_sf-sd-ft-wt,
1008
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1009
+ );
1010
+ font-style: var(
1011
+ --_sf-sd-ft-se-ic,
1012
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1013
+ );
1014
+ text-align: var(
1015
+ --_sf-sd-tt-an,
1016
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1017
+ );
1018
+ letter-spacing: var(
1019
+ --_sf-sd-lr-sg,
1020
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1021
+ );
1022
+ line-height: var(
1023
+ --_sf-sd-le-ht,
1024
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1025
+ );
1026
+ text-decoration: var(
1027
+ --_sf-sd-ue,
1028
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1029
+ );
1030
+ }
1031
+
1032
+ &.selected__child {
1033
+ border: 0px;
1034
+ border-bottom: 2px solid var(--_primary-400);
1035
+ }
1036
+ // &.disabled {
1037
+ // cursor: not-allowed;
1038
+ // opacity: 0.4;
1039
+ // position: relative;
1040
+ // overflow: hidden;
1041
+ // &::after {
1042
+ // content: "";
1043
+ // width: 172%;
1044
+ // height: 1px;
1045
+ // position: absolute;
1046
+ // background: #f00;
1047
+ // left: -14px;
1048
+ // transform: rotate(48deg);
1049
+ // /* -webkit-transform: rotate(48deg); */
1050
+ // -moz-transform: rotate(48deg);
1051
+ // top: 14px;
1052
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1053
+ // }
1054
+ // &::before {
1055
+ // content: "";
1056
+ // width: 164%;
1057
+ // height: 1px;
1058
+ // position: absolute;
1059
+ // background: #f00;
1060
+ // left: -14px;
1061
+ // transform: rotate(-48deg);
1062
+ // -webkit-transform: rotate(-48deg);
1063
+ // -moz-transform: rotate(-48deg);
1064
+ // top: 14px;
1065
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1066
+ // }
1067
+ // }
1068
+ position: relative;
1069
+
1070
+ &.disabled {
1071
+ color: #aaa;
1072
+ background-color: #f9f9f9;
1073
+ border-color: #ddd;
1074
+ cursor: not-allowed;
1075
+ overflow: hidden;
1076
+ }
1077
+
1078
+ .cross-line {
1079
+ position: absolute;
1080
+ inset: 0;
1081
+ background-color: #cccccc;
1082
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1083
+ pointer-events: none;
1084
+ }
1085
+ }
1086
+ }
1087
+ }
1088
+ &[data-show-divider="true"] {
1089
+ &:not(:last-child)::after {
1090
+ content: "";
1091
+ position: relative;
1092
+ background-color: #000;
1093
+ height: 1px;
1094
+ width: 100%;
1095
+ display: flex;
1096
+ top: calc(
1097
+ calc(
1098
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1099
+ ) /
1100
+ 2
1101
+ );
1102
+ }
1103
+ }
1104
+
1105
+ .title {
1106
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1107
+ font-family: var(
1108
+ --_ctm-mob-dn-on-te-ft-fy,
1109
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1110
+ );
1111
+ font-size: var(
1112
+ --_ctm-mob-dn-on-te-ft-se,
1113
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1114
+ );
1115
+ font-weight: var(
1116
+ --_ctm-mob-dn-on-te-ft-wt,
1117
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1118
+ );
1119
+ font-style: var(
1120
+ --_ctm-mob-dn-on-te-ft-se-ic,
1121
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1122
+ );
1123
+ text-align: var(
1124
+ --_ctm-mob-dn-on-te-tt-an,
1125
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1126
+ );
1127
+ letter-spacing: var(
1128
+ --_ctm-mob-dn-on-te-lr-sg,
1129
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1130
+ );
1131
+ line-height: var(
1132
+ --_ctm-mob-dn-on-te-le-ht,
1133
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1134
+ );
1135
+ text-decoration: var(
1136
+ --_ctm-mob-dn-on-te-ue,
1137
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1138
+ );
1139
+ }
1140
+ }
1141
+ //Dropdown
1142
+ .est__dropdown__main {
1143
+ position: relative;
1144
+ width: 100%;
1145
+ display: flex;
1146
+ flex-direction: column;
1147
+ gap: var(
1148
+ --_ctm-mob-lt-on-te-ve-sg,
1149
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
1150
+ );
1151
+
1152
+ padding: var(
1153
+ --_ctm-mob-lt-dn-dy-se-dn-os-pg,
1154
+ var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg))
1155
+ );
1156
+
1157
+ margin-top: 10px;
1158
+
1159
+ label {
1160
+ font-size: var(
1161
+ --_ctm-mob-dn-on-te-ft-se,
1162
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1163
+ );
1164
+ font-family: var(
1165
+ --_ctm-mob-dn-on-te-ft-fy,
1166
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1167
+ );
1168
+ color: var(
1169
+ --_ctm-mob-dn-on-te-cr,
1170
+ var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
1171
+ );
1172
+ font-weight: var(
1173
+ --_ctm-mob-dn-on-te-ft-wt,
1174
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1175
+ );
1176
+ text-decoration: var(
1177
+ --_ctm-mob-dn-on-te-ue,
1178
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1179
+ );
1180
+ letter-spacing: var(
1181
+ --_ctm-mob-dn-on-te-lr-sg,
1182
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1183
+ );
1184
+ text-align: var(
1185
+ --_ctm-mob-dn-on-te-tt-an,
1186
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1187
+ );
1188
+ line-height: var(
1189
+ --_ctm-mob-dn-on-te-le-ht,
1190
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1191
+ );
1192
+ display: block;
1193
+ }
1194
+
1195
+ .est__dropdown {
1196
+ cursor: pointer;
1197
+ position: relative;
1198
+ color: var(--_gray-700);
1199
+
1200
+ border-radius: 6px;
1201
+ background-color: #fff;
1202
+ display: flex;
1203
+ justify-content: space-between;
1204
+ align-items: center;
1205
+ width: 100%;
1206
+ .value__selected {
1207
+ width: 100%;
1208
+ }
1209
+
1210
+ &.open .list {
1211
+ display: none;
1212
+ margin-top: var(
1213
+ --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
1214
+ var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
1215
+ );
1216
+ gap: var(
1217
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1218
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1219
+ );
1220
+ background-color: var(
1221
+ --_ctm-mob-dn-dn-se-bd-cr,
1222
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1223
+ );
1224
+ }
1225
+
1226
+ .list {
1227
+ display: flex !important;
1228
+ flex-direction: column;
1229
+ gap: var(
1230
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1231
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1232
+ );
1233
+ border: var(
1234
+ --_ctm-mob-dn-dn-se-br-wh,
1235
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1236
+ )
1237
+ var(
1238
+ --_ctm-mob-dn-dn-se-br-se,
1239
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1240
+ )
1241
+ var(
1242
+ --_gray-200,
1243
+ var(
1244
+ --_ctm-mob-dn-dn-se-br-cr,
1245
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1246
+ )
1247
+ );
1248
+ border-radius: var(
1249
+ --_ctm-mob-dn-dn-se-br-rs,
1250
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1251
+ );
1252
+ box-shadow: var(
1253
+ --_show-shadow-dn-se,
1254
+ var(
1255
+ --_ctm-mob-dn-dn-se-sw-ae,
1256
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
1257
+ )
1258
+ var(
1259
+ --_ctm-mob-dn-dn-se-sw-br,
1260
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1261
+ )
1262
+ var(
1263
+ --_ctm-mob-dn-dn-se-sw-sd,
1264
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1265
+ )
1266
+ var(
1267
+ --_ctm-mob-dn-dn-se-sw-cr,
1268
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1269
+ )
1270
+ );
1271
+ position: absolute;
1272
+ top: 100%;
1273
+ left: 0;
1274
+ width: 100%;
1275
+ background-color: var(
1276
+ --_ctm-mob-dn-dn-se-bd-cr,
1277
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1278
+ );
1279
+ border-radius: 4px;
1280
+ z-index: var(--_higher-zIndex);
1281
+ max-height: 200px;
1282
+ overflow-y: auto;
1283
+
1284
+ &.top {
1285
+ bottom: 100%;
1286
+ top: auto;
1287
+ }
1288
+
1289
+ .list__option {
1290
+ padding: var(
1291
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
1292
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
1293
+ );
1294
+ cursor: pointer;
1295
+
1296
+ &:hover {
1297
+ background-color: var(--_primary-25);
1298
+ color: var(--_primary-400);
1299
+ }
1300
+
1301
+ &.disabled {
1302
+ cursor: not-allowed;
1303
+ opacity: 0.4;
1304
+ }
1305
+ }
1306
+ }
1307
+ }
1308
+ }
1309
+
1310
+ // variant dropdown selection
1311
+ .var__drop__selection {
1312
+ display: flex;
1313
+ width: 100%;
1314
+ gap: var(
1315
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1316
+ var(
1317
+ --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1318
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
1319
+ )
1320
+ );
1321
+
1322
+ flex-direction: row;
1323
+ &[data-dropdown-style="Vertical List"] {
1324
+ flex-direction: column;
1325
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1326
+ }
1327
+ .dropdown_wrapper {
1328
+ position: relative;
1329
+ &[data-show-divider="true"] {
1330
+ &:not(:last-child)::after {
1331
+ content: "";
1332
+ position: relative;
1333
+ background-color: #000;
1334
+ height: 1px;
1335
+ width: 100%;
1336
+ display: flex;
1337
+ top: calc(
1338
+ calc(
1339
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1340
+ ) /
1341
+ 2
1342
+ );
1343
+ }
1344
+ }
1345
+
1346
+ &[data-show-item-divider="true"] {
1347
+ .est__dropdown__main {
1348
+ .est__dropdown {
1349
+ .list {
1350
+ :not(:last-child).list__option {
1351
+ &::after {
1352
+ content: "";
1353
+ position: relative;
1354
+ background-color: #000;
1355
+ height: 1px;
1356
+ width: 100%;
1357
+ display: flex;
1358
+ top: calc(
1359
+ var(
1360
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1361
+ var(
1362
+ --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1363
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1364
+ )
1365
+ ) /
1366
+ 2
1367
+ );
1368
+ }
1369
+ }
1370
+ }
1371
+ }
1372
+ }
1373
+ }
1374
+ }
1375
+ & > div {
1376
+ width: 100%;
1377
+ }
1378
+ }
1379
+ // Quantity Fields
1380
+ .field__group {
1381
+ // display: flex;
1382
+ // flex-wrap: wrap;
1383
+ // gap: 8px;
1384
+ display: grid;
1385
+ grid-template-columns: repeat(
1386
+ auto-fit,
1387
+ minmax(
1388
+ var(
1389
+ --_ctm-mob-var-lt-mn-cn-wh,
1390
+ var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
1391
+ ),
1392
+ var(--_ctm-mob-var-lt-mn-cn-wh)
1393
+ )
1394
+ );
1395
+ gap: var(
1396
+ --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1397
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg))
1398
+ );
1399
+ .field__group__item {
1400
+ font-size: 16px;
1401
+ display: flex;
1402
+ flex-direction: column;
1403
+ align-items: center;
1404
+ justify-content: center;
1405
+ gap: 8px;
1406
+ input[type="number"] {
1407
+ // width: 70px !important;
1408
+ width: 100%;
1409
+ border: 1px solid var(--_gray-300);
1410
+ padding-inline: 10px;
1411
+ border-radius: 4px;
1412
+ text-align: center;
1413
+ height: 40px;
1414
+ &:focus-within {
1415
+ border: 1px solid var(--_primary-200);
1416
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1417
+ }
1418
+ &:disabled {
1419
+ cursor: not-allowed;
1420
+ opacity: 0.4;
1421
+ }
1422
+ }
1423
+ }
1424
+ }
1425
+ // Enter quantity styles
1426
+ .quantiy__details {
1427
+ display: flex;
1428
+ flex-direction: column;
1429
+ gap: var(
1430
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1431
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1432
+ );
1433
+ padding: var(
1434
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1435
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1436
+ );
1437
+
1438
+ .title {
1439
+ display: flex;
1440
+ justify-content: space-between;
1441
+ align-items: center;
1442
+ font-weight: 600;
1443
+ font-size: 18px;
1444
+ & > button {
1445
+ border-bottom: 1px solid var(--_gray-400);
1446
+ color: var(--_gray-600);
1447
+ font-size: 14px;
1448
+ }
1449
+ }
1450
+ .fit__details {
1451
+ display: flex;
1452
+ flex-direction: column;
1453
+ gap: 12px;
1454
+ .fit__desc {
1455
+ display: flex;
1456
+ flex-direction: column;
1457
+ gap: var(
1458
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1459
+ var(
1460
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1461
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1462
+ )
1463
+ );
1464
+
1465
+ font-size: 16px;
1466
+ color: var(--_gray-900);
1467
+ .each__price {
1468
+ font-weight: 600;
1469
+ }
1470
+ }
1471
+ }
1472
+ }
1473
+ .grouped_items {
1474
+ display: flex;
1475
+ flex-direction: column;
1476
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1477
+
1478
+ .tab__accordion {
1479
+ display: flex;
1480
+ flex-direction: column;
1481
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1482
+
1483
+ .tab__container {
1484
+ display: flex;
1485
+ flex-direction: column;
1486
+
1487
+ .tab {
1488
+ &:first-child {
1489
+ margin-bottom: var(
1490
+ --_ctm-mob-lt-on-te-ve-sg,
1491
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
1492
+ );
1493
+ }
1494
+ }
1495
+
1496
+ .tab__content {
1497
+ display: flex;
1498
+ flex-direction: column;
1499
+ padding: var(
1500
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1501
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1502
+ );
1503
+
1504
+ .field__group {
1505
+ gap: var(
1506
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1507
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1508
+ );
1509
+
1510
+ .field__group__item {
1511
+ gap: var(
1512
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1513
+ var(
1514
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1515
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1516
+ )
1517
+ );
1518
+ }
1519
+ }
1520
+ }
1521
+ }
1522
+ }
1523
+
1524
+ &[data-show-divider="true"] {
1525
+ & > div {
1526
+ &:not(:last-child)::after {
1527
+ content: "";
1528
+ position: relative;
1529
+ background-color: #000;
1530
+ height: 1px;
1531
+ width: 100%;
1532
+ display: flex;
1533
+ top: calc(
1534
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1535
+ );
1536
+ }
1537
+ }
1538
+
1539
+ .tab__accordion {
1540
+ &:not(:last-child)::after {
1541
+ content: "";
1542
+ position: relative;
1543
+ background-color: #000;
1544
+ height: 1px;
1545
+ width: 100%;
1546
+ display: flex;
1547
+ top: calc(
1548
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1549
+ );
1550
+ }
1551
+ }
1552
+ }
1553
+ }
1554
+ // tabs
1555
+ .tabs__container {
1556
+ display: flex;
1557
+ position: relative;
1558
+ .tab {
1559
+ flex: 1;
1560
+ padding-block: 20px;
1561
+ font-weight: 600;
1562
+ text-align: center;
1563
+ cursor: pointer;
1564
+ position: relative;
1565
+ &.tab__active {
1566
+ font-weight: bold;
1567
+ }
1568
+ }
1569
+ .tab__active-indicator {
1570
+ position: absolute;
1571
+ bottom: 0;
1572
+ left: 0;
1573
+ height: 2px;
1574
+ background-color: #000;
1575
+ transition:
1576
+ left 0.3s ease,
1577
+ width 0.3s ease;
1578
+ }
1579
+ }
1580
+
1581
+ // accordion tabs
1582
+ .tab__accordion_wrapper {
1583
+ .tab__accordion {
1584
+ display: flex;
1585
+ flex-direction: column;
1586
+ padding: var(
1587
+ --_ctm-mob-lt-gd-os-dy-se-cr-pg,
1588
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
1589
+ );
1590
+
1591
+ .tab__container {
1592
+ display: flex;
1593
+ flex-direction: column;
1594
+ gap: var(
1595
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1596
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1597
+ );
1598
+
1599
+ .tab_acc_wrapper {
1600
+ display: flex;
1601
+ flex-direction: column;
1602
+ gap: var(
1603
+ --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1604
+ var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg))
1605
+ );
1606
+
1607
+ padding: var(
1608
+ --_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1609
+ var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))
1610
+ )
1611
+ var(
1612
+ --_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1613
+ var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg))
1614
+ );
1615
+
1616
+ .tab {
1617
+ display: flex;
1618
+ padding-inline: 2px;
1619
+ position: relative;
1620
+ cursor: pointer;
1621
+ flex-direction: row;
1622
+ &[data-expand-icon="Left"] {
1623
+ flex-direction: row-reverse;
1624
+ justify-content: flex-end;
1625
+ }
1626
+ &[data-item-dividers="true"] {
1627
+ &::after {
1628
+ content: "";
1629
+ position: absolute;
1630
+ bottom: 0;
1631
+ height: 2px;
1632
+ width: 100%;
1633
+ border-bottom: 1px solid var(--_gray-200);
1634
+ }
1635
+ }
1636
+ span {
1637
+ padding-block: 12px;
1638
+ display: inline-block;
1639
+ }
1640
+ .active {
1641
+ border-bottom: 2px solid var(--_primary-400);
1642
+ }
1643
+ &.inactive {
1644
+ height: 0px;
1645
+ }
1646
+ }
1647
+ .tab__content {
1648
+ &.d-none {
1649
+ display: none;
1650
+ }
1651
+ &.d-block {
1652
+ display: block;
1653
+ }
1654
+ }
1655
+ }
1656
+ }
1657
+ }
1658
+
1659
+ &[data-show-dividers="true"] {
1660
+ .tab__accordion {
1661
+ .tab__container {
1662
+ .tab_acc_wrapper {
1663
+ &:not(:last-child)::after {
1664
+ content: "";
1665
+ position: relative;
1666
+ background-color: #000;
1667
+ height: 1px;
1668
+ width: 100%;
1669
+ display: flex;
1670
+ top: calc(
1671
+ var(
1672
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1673
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1674
+ ) /
1675
+ 2
1676
+ );
1677
+ }
1678
+ }
1679
+ }
1680
+ }
1681
+ }
1682
+
1683
+ &[data-icon-position="Left"] {
1684
+ .tab__accordion {
1685
+ .tab__container {
1686
+ .tab_acc_wrapper {
1687
+ .tab {
1688
+ flex-direction: row-reverse;
1689
+ align-self: flex-start;
1690
+ }
1691
+ }
1692
+ }
1693
+ }
1694
+ }
1695
+ }
1696
+
1697
+ // table
1698
+ .table_container,
1699
+ .tab__content {
1700
+ .table__class {
1701
+ border: 1px solid var(--_gray-200);
1702
+ border-radius: 8px;
1703
+ .custom__table {
1704
+ border: 1px solid var(--_gray-200);
1705
+ width: 100%;
1706
+ table-layout: fixed;
1707
+ // height: 300px;
1708
+
1709
+ border-collapse: collapse;
1710
+ &[data-header-divider="true"] {
1711
+ thead tr th {
1712
+ border-bottom: 1px solid var(--_gray-200);
1713
+ }
1714
+ }
1715
+ &[data-row-divider="true"] {
1716
+ tbody tr td {
1717
+ border-bottom: 1px solid var(--_gray-200);
1718
+ }
1719
+ }
1720
+ &[data-column-divider="true"] {
1721
+ tbody tr td,
1722
+ thead tr th {
1723
+ border-right: 1px solid var(--_gray-200);
1724
+ }
1725
+
1726
+ tbody tr td:last-child,
1727
+ thead tr th:last-child {
1728
+ border-right: none;
1729
+ }
1730
+ }
1731
+ &[data-alternative-row-colors="true"] {
1732
+ tbody tr:nth-child(odd) {
1733
+ background-color: var(--_gray-300);
1734
+ width: 100%;
1735
+ }
1736
+ }
1737
+ thead {
1738
+ height: var(
1739
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1740
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1741
+ );
1742
+ th {
1743
+ height: var(
1744
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1745
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1746
+ );
1747
+ text-align: var(
1748
+ --_ctm-mob-lt-te-dy-se-ct-at,
1749
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1750
+ );
1751
+ padding: var(
1752
+ --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1753
+ var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1754
+ );
1755
+ background-color: var(--_gray-50);
1756
+ font-weight: 600;
1757
+ color: var(--_gray-600);
1758
+ word-break: break-word;
1759
+ }
1760
+ }
1761
+
1762
+ tbody {
1763
+ tr {
1764
+ border-bottom: 1px solid var(--_gray-200);
1765
+ height: var(
1766
+ --_ctm-mob-lt-te-dy-se-rw-ht,
1767
+ var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1768
+ );
1769
+ td {
1770
+ text-align: var(
1771
+ --_ctm-mob-lt-te-dy-se-ct-at,
1772
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1773
+ );
1774
+ padding: var(
1775
+ --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1776
+ var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1777
+ );
1778
+ .disocunted__price {
1779
+ color: var(--_gray-900);
1780
+ }
1781
+ .actual__price {
1782
+ color: var(--_gray-500);
1783
+ }
1784
+ .qty__input {
1785
+ border: 1px solid var(--_gray-200);
1786
+ padding-inline: 10px;
1787
+ text-align: center;
1788
+ border-radius: 6px;
1789
+ height: 40px;
1790
+ }
1791
+ input[type="number"] {
1792
+ &:focus-within {
1793
+ border: 1px solid var(--_primary-200);
1794
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1795
+ }
1796
+ &:disabled {
1797
+ cursor: not-allowed;
1798
+ opacity: 0.4;
1799
+ }
1800
+ }
1801
+ }
1802
+ }
1803
+ }
1804
+ }
1805
+ }
1806
+ &[data-show-divider="true"] {
1807
+ & > div {
1808
+ &:not(:last-child)::after {
1809
+ content: "";
1810
+ position: relative;
1811
+ background-color: #000;
1812
+ height: 1px;
1813
+ width: 100%;
1814
+ display: flex;
1815
+ top: calc(
1816
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1817
+ );
1818
+ }
1819
+ }
1820
+ }
1821
+ }
1822
+
1823
+ // horizontal tabs
1824
+ .tabs__main {
1825
+ &.tabs__vertical {
1826
+ .tabs {
1827
+ .tabs__container {
1828
+ flex-direction: column;
1829
+ min-width: 120px;
1830
+ }
1831
+ }
1832
+ }
1833
+ &.tabs__hr {
1834
+ .tabs {
1835
+ flex-direction: column;
1836
+ gap: var(
1837
+ --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
1838
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg))
1839
+ );
1840
+
1841
+ .tabs__container {
1842
+ width: 100%;
1843
+ }
1844
+ }
1845
+ }
1846
+ .tabs {
1847
+ display: flex;
1848
+ gap: var(
1849
+ --_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg,
1850
+ var(--_ctm-tab-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg))
1851
+ );
1852
+
1853
+ .tabs__container {
1854
+ display: flex;
1855
+ gap: var(
1856
+ --_ctm-mob-lt-gd-os-dy-se-tb-sg,
1857
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg))
1858
+ );
1859
+
1860
+ .tab {
1861
+ display: flex;
1862
+ justify-content: var(--_tab-aliginment);
1863
+ padding: var(
1864
+ --_ctm-mob-lt-gd-os-dy-se-tb-vl-pg,
1865
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg))
1866
+ )
1867
+ var(
1868
+ --_ctm-mob-lt-gd-os-dy-se-tb-hl-pg,
1869
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg))
1870
+ );
1871
+ background-color: var(
1872
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr,
1873
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr))
1874
+ );
1875
+ border-color: var(
1876
+ --_show-border-im-se,
1877
+ var(
1878
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr,
1879
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr))
1880
+ )
1881
+ );
1882
+ border-style: var(
1883
+ --_show-border-im-se,
1884
+ var(
1885
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-se,
1886
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se))
1887
+ )
1888
+ );
1889
+ border-width: var(
1890
+ --_show-border-im-se,
1891
+ var(
1892
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh,
1893
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh))
1894
+ )
1895
+ );
1896
+ border-radius: var(
1897
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1898
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs))
1899
+ );
1900
+ box-shadow: var(
1901
+ --_show-shadow-im-se,
1902
+ var(
1903
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae,
1904
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae)
1905
+ ),
1906
+ var(
1907
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br,
1908
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br)
1909
+ ),
1910
+ var(
1911
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd,
1912
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd)
1913
+ ),
1914
+ var(
1915
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr,
1916
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr)
1917
+ )
1918
+ );
1919
+ border-radius: var(
1920
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1921
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs)
1922
+ );
1923
+
1924
+ &:hover {
1925
+ background-color: var(
1926
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
1927
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr))
1928
+ );
1929
+ border-color: var(
1930
+ --_show-border-im-se,
1931
+ var(
1932
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr,
1933
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr))
1934
+ )
1935
+ );
1936
+ border-style: var(
1937
+ --_show-border-im-se,
1938
+ var(
1939
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-se,
1940
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se))
1941
+ )
1942
+ );
1943
+ border-width: var(
1944
+ --_show-border-im-se,
1945
+ var(
1946
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh,
1947
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh))
1948
+ )
1949
+ );
1950
+ border-radius: var(
1951
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs,
1952
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs))
1953
+ );
1954
+ box-shadow: var(
1955
+ --_show-shadow-im-se,
1956
+ var(
1957
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae,
1958
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae)
1959
+ ),
1960
+ var(
1961
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br,
1962
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br)
1963
+ ),
1964
+ var(
1965
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd,
1966
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd)
1967
+ ),
1968
+ var(
1969
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr,
1970
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr)
1971
+ )
1972
+ );
1973
+ }
1974
+
1975
+ &.active {
1976
+ background-color: var(
1977
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
1978
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr))
1979
+ );
1980
+ border-color: var(
1981
+ --_show-border-im-se,
1982
+ var(
1983
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr,
1984
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr))
1985
+ )
1986
+ );
1987
+ border-style: var(
1988
+ --_show-border-im-se,
1989
+ var(
1990
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-se,
1991
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se))
1992
+ )
1993
+ );
1994
+ border-width: var(
1995
+ --_show-border-im-se,
1996
+ var(
1997
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh,
1998
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh))
1999
+ )
2000
+ );
2001
+ border-radius: var(
2002
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs,
2003
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs))
2004
+ );
2005
+ box-shadow: var(
2006
+ --_show-shadow-im-se,
2007
+ var(
2008
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae,
2009
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae)
2010
+ ),
2011
+ var(
2012
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br,
2013
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br)
2014
+ ),
2015
+ var(
2016
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd,
2017
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd)
2018
+ ),
2019
+ var(
2020
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr,
2021
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr)
2022
+ )
2023
+ );
2024
+ }
2025
+ }
2026
+ }
2027
+ .tab__content {
2028
+ padding: var(
2029
+ --_ctm-mob-lt-gd-os-dy-se-cr-pg,
2030
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
2031
+ );
2032
+ }
2033
+ }
2034
+ }
2035
+
2036
+ // embla
2037
+
2038
+ .embla {
2039
+ width: 100%;
2040
+ height: 100%;
2041
+ position: relative;
2042
+ display: flex;
2043
+ flex-direction: column;
2044
+
2045
+ // overflow: hidden;
2046
+
2047
+ .embla__viewport {
2048
+ width: 100%;
2049
+ height: 100%;
2050
+ position: relative;
2051
+ display: flex;
2052
+ flex-direction: column;
2053
+
2054
+ overflow: hidden;
2055
+
2056
+ .embla__container {
2057
+ width: 100%;
2058
+ height: 100%;
2059
+ display: flex;
2060
+ grid-template-rows: 100%;
2061
+ // grid-template-columns: 100%;
2062
+ // grid-template-columns: repeat(
2063
+ // var(--_ctm-lt-is-pr-se),
2064
+ // calc(100% / var(--_ctm-lt-is-pr-se))
2065
+ // );
2066
+ // grid-auto-flow: column;
2067
+ gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
2068
+
2069
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2070
+ height: calc(
2071
+ 100% - calc(
2072
+ var(
2073
+ --_ctm-mob-dn-pn-as-aw-se,
2074
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2075
+ ) +
2076
+ 8px
2077
+ )
2078
+ );
2079
+ }
2080
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2081
+ height: calc(
2082
+ 100% - calc(
2083
+ var(
2084
+ --_ctm-mob-dn-pn-le-le-ht,
2085
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2086
+ ) +
2087
+ 20px
2088
+ )
2089
+ );
2090
+ }
2091
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
2092
+ height: calc(
2093
+ 100% - calc(
2094
+ var(
2095
+ --_ctm-mob-dn-pn-ds-dt-se,
2096
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2097
+ ) +
2098
+ 20px
2099
+ )
2100
+ );
2101
+ }
2102
+
2103
+ .embla__slide {
2104
+ // width: 100%;
2105
+ height: 100%;
2106
+ }
2107
+ }
2108
+ }
2109
+
2110
+ .arrow-navigation {
2111
+ display: flex;
2112
+ position: absolute;
2113
+ top: 50%;
2114
+ left: 50%;
2115
+ width: 100%;
2116
+ justify-content: space-between;
2117
+ transform: translate(-50%, -50%);
2118
+ // padding-left: 20px;
2119
+ &[data-control-type="Side"] {
2120
+ .left-button,
2121
+ .right-button {
2122
+ background-color: transparent;
2123
+ }
2124
+ }
2125
+ &[data-background-shape="Round"] {
2126
+ .left-button,
2127
+ .right-button {
2128
+ background-color: #f2f5f5;
2129
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2130
+ }
2131
+ }
2132
+ &[data-control-type="Bottom-Overflow"] {
2133
+ transform: translateX(-50%);
2134
+ width: 100%;
2135
+ justify-content: center;
2136
+ gap: 12px;
2137
+ top: unset;
2138
+ bottom: 6px;
2139
+ }
2140
+ &[data-control-type="Bottom"] {
2141
+ transform: unset;
2142
+ position: static;
2143
+ width: 100%;
2144
+ justify-content: center;
2145
+ gap: 12px;
2146
+ margin-top: 10px;
2147
+ }
2148
+ .left-button {
2149
+ padding: 10px;
2150
+ border-radius: 50%;
2151
+ border: none;
2152
+ width: var(
2153
+ --_ctm-mob-dn-pn-as-aw-se,
2154
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2155
+ );
2156
+ height: var(
2157
+ --_ctm-mob-dn-pn-as-aw-se,
2158
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2159
+ );
2160
+
2161
+ display: flex;
2162
+ align-items: center;
2163
+ justify-content: center;
2164
+ cursor: pointer;
2165
+ outline: none;
2166
+ margin-left: 12px;
2167
+ &:disabled {
2168
+ & svg {
2169
+ path {
2170
+ stroke: rgb(192, 192, 192);
2171
+ }
2172
+ }
2173
+ }
2174
+ }
2175
+ .right-button {
2176
+ border-radius: 50%;
2177
+ border: none;
2178
+ width: var(
2179
+ --_ctm-mob-dn-pn-as-aw-se,
2180
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2181
+ );
2182
+ height: var(
2183
+ --_ctm-mob-dn-pn-as-aw-se,
2184
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2185
+ );
2186
+
2187
+ display: flex;
2188
+ align-items: center;
2189
+ justify-content: center;
2190
+ cursor: pointer;
2191
+ outline: none;
2192
+ margin-right: 12px;
2193
+ padding: 10px;
2194
+
2195
+ &:disabled {
2196
+ & svg {
2197
+ path {
2198
+ stroke: rgb(192, 192, 192);
2199
+ }
2200
+ }
2201
+ }
2202
+ }
2203
+ .icon {
2204
+ display: flex;
2205
+ svg {
2206
+ width: calc(
2207
+ var(
2208
+ --_ctm-mob-dn-pn-as-aw-se,
2209
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2210
+ ) *
2211
+ 0.5
2212
+ );
2213
+ height: calc(
2214
+ var(
2215
+ --_ctm-mob-dn-pn-as-aw-se,
2216
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2217
+ ) *
2218
+ 0.5
2219
+ );
2220
+ path {
2221
+ stroke: var(
2222
+ --_ctm-mob-dn-pn-as-aw-cr,
2223
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2224
+ );
2225
+ }
2226
+ }
2227
+ }
2228
+ }
2229
+
2230
+ &[data-thumbnail-placement="top"] {
2231
+ flex-direction: column-reverse;
2232
+ }
2233
+ &[data-thumbnail-placement="bottom"] {
2234
+ flex-direction: column;
2235
+ }
2236
+ &[data-thumbnail-placement="left"] {
2237
+ flex-direction: row-reverse;
2238
+
2239
+ .embla__thumbs {
2240
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2241
+
2242
+ height: 100%;
2243
+
2244
+ & .embla__thumbs__container {
2245
+ flex-direction: column;
2246
+ height: 100%;
2247
+ }
2248
+ }
2249
+ }
2250
+ &[data-thumbnail-placement="right"] {
2251
+ flex-direction: row;
2252
+ .embla__thumbs {
2253
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2254
+
2255
+ height: 100%;
2256
+
2257
+ & .embla__thumbs__container {
2258
+ flex-direction: column;
2259
+ height: 100%;
2260
+ }
2261
+ }
2262
+ }
2263
+ &[data-control-type="Side"] {
2264
+ display: flex;
2265
+ align-self: center;
2266
+ flex-direction: row;
2267
+ .left-button:disabled,
2268
+ .right-button:disabled {
2269
+ display: none;
2270
+ }
2271
+ }
2272
+ .embla__dots {
2273
+ display: flex;
2274
+ flex-wrap: wrap;
2275
+ justify-content: center;
2276
+ align-items: center;
2277
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2278
+ gap: 6px;
2279
+ margin-top: 16px;
2280
+
2281
+ &[data-control-type="Bottom-Overflow"] {
2282
+ position: absolute;
2283
+ bottom: 10px;
2284
+ left: 50%;
2285
+ transform: translateX(-50%);
2286
+ width: 75%;
2287
+ }
2288
+ .embla__dot {
2289
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2290
+ -webkit-appearance: none;
2291
+ appearance: none;
2292
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
2293
+ touch-action: manipulation;
2294
+ display: inline-flex;
2295
+ text-decoration: none;
2296
+ cursor: pointer;
2297
+ border: 0;
2298
+ padding: 0;
2299
+ margin: 0;
2300
+ // width: 0.6rem;
2301
+ // height: 0.6rem;
2302
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2303
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2304
+ display: flex;
2305
+ align-items: center;
2306
+ justify-content: center;
2307
+ border-radius: 50%;
2308
+ }
2309
+ .embla__dot:after {
2310
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2311
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2312
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2313
+ border-radius: 50%;
2314
+ display: flex;
2315
+ align-items: center;
2316
+ content: "";
2317
+ }
2318
+ .embla__dot--selected:after {
2319
+ box-shadow: inset 0 0 0 1px var(--text-body);
2320
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2321
+ }
2322
+ &[data-slider-control="Pagination Line"] {
2323
+ .embla__dot {
2324
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2325
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2326
+ background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
2327
+
2328
+ border-radius: 6px;
2329
+ }
2330
+ .embla__dot--selected:after {
2331
+ box-shadow: inset 0 0 0 1px var(--text-body);
2332
+ border-radius: 6px;
2333
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2334
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2335
+ // background-color: #fff;
2336
+ background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
2337
+ }
2338
+ }
2339
+ }
2340
+
2341
+ .embla__thumbs {
2342
+ width: 100%;
2343
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2344
+
2345
+ position: relative;
2346
+ display: grid;
2347
+ grid-template-columns: 1fr;
2348
+ overflow: hidden;
2349
+ // margin: 10px;
2350
+ padding: 10px;
2351
+
2352
+ .embla__thumbs__viewport {
2353
+ width: 100%;
2354
+ height: 100%;
2355
+ position: relative;
2356
+ display: flex;
2357
+ flex-direction: column;
2358
+
2359
+ overflow: hidden;
2360
+ }
2361
+ .embla__thumbs__container {
2362
+ display: flex;
2363
+ flex-direction: row;
2364
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
2365
+ gap: var(--_ctm-lt-tl-sg);
2366
+ width: 100%;
2367
+ // justify-content: center;
2368
+ // height: 200px;
2369
+
2370
+ .embla__thumbs__slide {
2371
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2372
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2373
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2374
+ & img {
2375
+ width: 100%;
2376
+ height: 100%;
2377
+ }
2378
+ }
2379
+ }
2380
+ }
2381
+ }
2382
+ }
2383
+ }
2384
+ }