@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

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 (201) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +129 -245
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +198 -411
  6. package/dist/allocationDetails.scss +1645 -2126
  7. package/dist/allocations-quota-details.scss +168 -327
  8. package/dist/allocations.scss +476 -797
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/animation-control.scss +23 -23
  11. package/dist/badge.scss +43 -18
  12. package/dist/brand-basic-elements.scss +76 -124
  13. package/dist/brand.scss +28 -55
  14. package/dist/breadcrumbs.scss +356 -718
  15. package/dist/builder.js +1 -1
  16. package/dist/bulk-variant-picker.scss +1133 -2034
  17. package/dist/bundle copy.scss +235 -0
  18. package/dist/bundle.scss +843 -1479
  19. package/dist/bundleDetails.scss +3774 -5063
  20. package/dist/button copy.scss +28 -0
  21. package/dist/button.scss +78 -103
  22. package/dist/buy-for-tab-container.scss +77 -106
  23. package/dist/buy-for-tabs-container-item.scss +80 -80
  24. package/dist/buyForHeaders.scss +1725 -2988
  25. package/dist/cart-details.scss +491 -1012
  26. package/dist/cart-products-sidebar.scss +211 -211
  27. package/dist/cart-summary.scss +559 -1152
  28. package/dist/cart-wrapper.scss +85 -127
  29. package/dist/cart.scss +115 -223
  30. package/dist/cartAttributes.scss +367 -647
  31. package/dist/cartGrouping.scss +89 -89
  32. package/dist/category-groups-element.scss +127 -108
  33. package/dist/category-groups-product-grid.scss +40 -79
  34. package/dist/category-groups-product-image.scss +457 -1390
  35. package/dist/category-groups-product-options.scss +224 -693
  36. package/dist/category-groups-product-price.scss +1326 -4859
  37. package/dist/category-groups-quota-details.scss +217 -466
  38. package/dist/category.scss +26 -50
  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 +1858 -4170
  43. package/dist/common-element.scss +35 -35
  44. package/dist/confirm-modal.scss +22 -2
  45. package/dist/confirmationModal.scss +139 -139
  46. package/dist/container.scss +32 -54
  47. package/dist/countdown.scss +256 -443
  48. package/dist/coupon.scss +355 -714
  49. package/dist/custom-fonts.scss +100 -100
  50. package/dist/default-dropdown.scss +12 -1
  51. package/dist/embroider-preview-element.scss +94 -94
  52. package/dist/embroider-template-1-v2.scss +123 -172
  53. package/dist/embroider-template-1.scss +68 -104
  54. package/dist/embroidery.scss +30 -31
  55. package/dist/employee-bulk-order.scss +418 -142
  56. package/dist/emtpy-templates.scss +165 -165
  57. package/dist/faq.scss +235 -419
  58. package/dist/filter-results.scss +125 -265
  59. package/dist/filters.scss +831 -1682
  60. package/dist/flex-text-editor.scss +271 -271
  61. package/dist/functions.scss +36 -0
  62. package/dist/gallery-slider-temp.scss +435 -758
  63. package/dist/global-styles.scss +23 -7
  64. package/dist/grid.scss +25 -33
  65. package/dist/hotspot.scss +69 -119
  66. package/dist/icon-list.scss +30 -59
  67. package/dist/image-for-product.scss +21 -21
  68. package/dist/image-temp.scss +21 -20
  69. package/dist/item-stock.scss +9 -16
  70. package/dist/kitDetails.scss +2719 -4299
  71. package/dist/kits.scss +24 -19
  72. package/dist/language-selector.scss +233 -375
  73. package/dist/last-x-orders.scss +101 -187
  74. package/dist/layouter-item.scss +75 -103
  75. package/dist/layouter-pro-item.scss +89 -95
  76. package/dist/layouter-pro.scss +87 -92
  77. package/dist/layouter.scss +67 -117
  78. package/dist/light-box-v2.scss +89 -104
  79. package/dist/lightbox.scss +78 -78
  80. package/dist/line.scss +29 -70
  81. package/dist/loader.scss +37 -37
  82. package/dist/login.scss +291 -572
  83. package/dist/map.scss +220 -369
  84. package/dist/marchandiserSets.scss +95 -104
  85. package/dist/mega-menu-container.scss +96 -109
  86. package/dist/mega-menu.scss +624 -734
  87. package/dist/menu-item.scss +19 -19
  88. package/dist/menu-v2.scss +507 -619
  89. package/dist/multi-select-dropdown.scss +27 -3
  90. package/dist/my-templates.scss +38 -9
  91. package/dist/myTemplates.scss +3 -0
  92. package/dist/option-bar.scss +215 -375
  93. package/dist/order-processing.scss +61 -61
  94. package/dist/order-status.scss +643 -1117
  95. package/dist/overflow-module.scss +62 -63
  96. package/dist/past-orders.scss +118 -149
  97. package/dist/payment-methods.scss +46 -30
  98. package/dist/pickup-locations.scss +564 -1121
  99. package/dist/position-module.scss +98 -95
  100. package/dist/prefix-list.scss +97 -86
  101. package/dist/product-actions.scss +1230 -1783
  102. package/dist/product-basic-elements.scss +108 -169
  103. package/dist/product-highlights.scss +116 -157
  104. package/dist/product-image-bundles.scss +345 -671
  105. package/dist/product-image.scss +341 -724
  106. package/dist/product-inventory.scss +673 -1357
  107. package/dist/product-labels.scss +94 -113
  108. package/dist/product-options.scss +288 -486
  109. package/dist/product-price.scss +1284 -2556
  110. package/dist/product-promotions.scss +1388 -2830
  111. package/dist/product-sizechart.scss +516 -905
  112. package/dist/product.scss +28 -61
  113. package/dist/productDetails.scss +19 -38
  114. package/dist/profile.scss +231 -447
  115. package/dist/quantity-selector.scss +313 -550
  116. package/dist/quick-inventory-check.scss +101 -187
  117. package/dist/quick-links.scss +56 -133
  118. package/dist/quick-order-pad.scss +216 -269
  119. package/dist/quota-details.scss +163 -297
  120. package/dist/quotes.scss +82 -121
  121. package/dist/repeater copy.scss +24 -0
  122. package/dist/repeater-embla-controls.scss +34 -14
  123. package/dist/repeater-grid-toggle.scss +156 -166
  124. package/dist/repeater-item.scss +41 -64
  125. package/dist/repeater.scss +579 -688
  126. package/dist/request-for-quotes.scss +66 -16
  127. package/dist/responsive-behaviour.scss +31 -29
  128. package/dist/rfqs.scss +118 -181
  129. package/dist/scroll.scss +89 -167
  130. package/dist/search.scss +179 -326
  131. package/dist/section.scss +27 -51
  132. package/dist/shareCartSideBar.scss +254 -254
  133. package/dist/shipping-estimator.scss +41 -41
  134. package/dist/shipping-payments.scss +198 -58
  135. package/dist/simple-list.scss +65 -135
  136. package/dist/social.scss +78 -143
  137. package/dist/sort.scss +89 -89
  138. package/dist/stack.scss +23 -34
  139. package/dist/static-global.scss +44 -26
  140. package/dist/static-text.scss +52 -52
  141. package/dist/stockStatus.scss +11 -19
  142. package/dist/store-locations.scss +587 -1113
  143. package/dist/sub-category.scss +74 -74
  144. package/dist/submit-quote.scss +275 -275
  145. package/dist/tab-container-item.scss +80 -80
  146. package/dist/tab-container.scss +81 -108
  147. package/dist/tab-v2.scss +277 -604
  148. package/dist/table-common.scss +215 -406
  149. package/dist/table.scss +267 -509
  150. package/dist/text-temp-v2.scss +12 -23
  151. package/dist/text-temp.scss +110 -109
  152. package/dist/theme-classes.scss +17 -13
  153. package/dist/toggle-button.scss +32 -32
  154. package/dist/transform-properties-module.scss +20 -20
  155. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  156. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  157. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  158. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  159. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  160. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  161. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  162. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  163. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  164. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  165. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  166. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  167. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  168. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  169. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  170. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  171. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  172. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  173. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  174. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  175. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  176. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  177. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  179. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  180. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  181. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  182. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  183. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  184. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  185. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  186. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  187. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  189. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  190. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  191. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  192. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  193. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  194. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  195. package/dist/uom-selector.scss +489 -943
  196. package/dist/user-elements.scss +537 -826
  197. package/dist/variant-picker.scss +1282 -2559
  198. package/dist/video.scss +147 -325
  199. package/dist/volume-pricing.scss +539 -1035
  200. package/dist/wishlist-overlay.scss +48 -48
  201. package/package.json +131 -131
@@ -4,128 +4,75 @@
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="productOptions"] {
7
- width: var(
8
- --_sf-el-wh-st-mx,
9
- calc(
10
- 1% *
11
- var(
12
- --_ctm-mob-ele-nw-wh-vl,
13
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
- )
15
- )
16
- );
7
+ width: var(--_sf-el-wh-st-mx,
8
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
9
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
17
10
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
18
11
 
19
- --_aspect-ratio: calc(
20
- 1 *
21
- (
22
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
23
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
24
- )
25
- );
12
+ --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
26
13
 
27
- & > .wrapper {
14
+ &>.wrapper {
28
15
  // width: 100%;
29
16
  // height: 100%;
30
17
  }
18
+
31
19
  .product__option__element {
32
20
  display: flex;
33
21
  flex-direction: column;
34
22
  min-height: 30px;
35
- gap: var(
36
- --_ctm-mob-lt-on-te-ve-sg,
37
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
38
- );
39
-
40
- background-color: var(
41
- --_ctm-mob-dn-wt-se-bd-cr,
42
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
- );
23
+ gap: var(--_ctm-mob-lt-on-te-ve-sg,
24
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
25
+
26
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
27
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
44
28
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
29
 
46
30
  width: 100%;
47
31
  // height: 100%;
48
- border-color: var(
49
- --_ctm-mob-dn-wt-se-br-cr,
50
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
51
- );
52
- border-style: var(
53
- --_ctm-mob-dn-wt-se-br-se,
54
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
55
- );
56
- border-width: var(
57
- --_ctm-mob-dn-wt-se-br-wh,
58
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
59
- );
60
- border-radius: var(
61
- --_ctm-mob-dn-wt-se-br-rs,
62
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
63
- );
64
- box-shadow: var(
65
- --_show-shadow,
66
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
67
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
68
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
69
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
70
- );
32
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
33
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
34
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
35
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
36
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
37
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
38
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
39
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
40
+ box-shadow: var(--_show-shadow,
41
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
71
42
 
72
43
  .title {
73
44
  margin-bottom: 4px;
74
45
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
75
- font-family: var(
76
- --_ctm-mob-dn-on-te-ft-fy,
77
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
78
- );
79
- text-transform: var(
80
- --_ctm-mob-dn-on-te-tt-tm,
81
- var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
82
- );
83
- word-wrap: var(
84
- --_ctm-mob-dn-on-te-wd-wp,
85
- var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
86
- );
87
- word-break: var(
88
- --_ctm-mob-dn-on-te-wd-bk,
89
- var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
90
- );
91
- font-size: var(
92
- --_ctm-mob-dn-on-te-ft-se,
93
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
94
- );
95
- font-weight: var(
96
- --_ctm-mob-dn-on-te-ft-wt,
97
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
98
- );
99
- font-style: var(
100
- --_ctm-mob-dn-on-te-ft-se-ic,
101
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
102
- );
103
- text-align: var(
104
- --_ctm-mob-dn-on-te-tt-an,
105
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
106
- );
107
- letter-spacing: var(
108
- --_ctm-mob-dn-on-te-lr-sg,
109
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
110
- );
111
- line-height: var(
112
- --_ctm-mob-dn-on-te-le-ht,
113
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
114
- );
115
- text-decoration: var(
116
- --_ctm-mob-dn-on-te-ue,
117
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
118
- );
46
+ font-family: var(--_ctm-mob-dn-on-te-ft-fy,
47
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
48
+ text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
49
+ var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
50
+ word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
51
+ var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
52
+ word-break: var(--_ctm-mob-dn-on-te-wd-bk,
53
+ var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
54
+ font-size: var(--_ctm-mob-dn-on-te-ft-se,
55
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
56
+ font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
57
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
58
+ font-style: var(--_ctm-mob-dn-on-te-ft-se-ic,
59
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)));
60
+ text-align: var(--_ctm-mob-dn-on-te-tt-an,
61
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
62
+ letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
63
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
64
+ line-height: var(--_ctm-mob-dn-on-te-le-ht,
65
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
66
+ text-decoration: var(--_ctm-mob-dn-on-te-ue,
67
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
119
68
  }
120
69
 
121
70
  .product__option__element__swatch {
122
71
  display: flex;
123
72
  align-items: flex-start;
124
73
  gap: 10px;
125
- gap: var(
126
- --_ctm-mob-lt-on-te-ve-sg,
127
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
128
- );
74
+ gap: var(--_ctm-mob-lt-on-te-ve-sg,
75
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
129
76
 
130
77
  // margin-top: 20px;
131
78
 
@@ -145,6 +92,7 @@
145
92
  flex-wrap: wrap;
146
93
  }
147
94
  }
95
+
148
96
  &[data-overflow-items="Scroll"] {
149
97
  .swatch__list {
150
98
  overflow-x: auto;
@@ -155,182 +103,101 @@
155
103
  }
156
104
 
157
105
  .swatch__item:hover {
158
- --_sf-hr-bd-cr: var(
159
- --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
160
- var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
161
- );
162
- --_sf-hr-br-cr: var(
163
- --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
164
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
165
- );
166
- --_sf-hr-br-se: var(
167
- --_ctm-mob-dn-on-ve-se-hr-se-br-se,
168
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
169
- );
170
- --_sf-hr-br-wh: var(
171
- --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
172
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
173
- );
174
- --_sf-hr-br-rs: var(
175
- --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
176
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
177
- );
106
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
107
+ var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr)));
108
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-br-cr,
109
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr)));
110
+ --_sf-hr-br-se: var(--_ctm-mob-dn-on-ve-se-hr-se-br-se,
111
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se)));
112
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-on-ve-se-hr-se-br-wh,
113
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh)));
114
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-on-ve-se-hr-se-br-rs,
115
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs)));
178
116
 
179
117
  // for shadow
180
- --_sf-hr-sw-ae: var(
181
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
182
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
183
- );
184
- --_sf-hr-sw-br: var(
185
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
186
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
187
- );
188
- --_sf-hr-sw-hr: var(
189
- --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
190
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr))
191
- );
192
- --_sf-hr-sw-cr: var(
193
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
194
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
195
- );
118
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
119
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae)));
120
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-br,
121
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br)));
122
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
123
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr)));
124
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
125
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr)));
196
126
 
197
127
  // for font
198
128
 
199
- --_sf-hr-cr: var(
200
- --_ctm-mob-dn-on-ve-se-hr-se-cr,
201
- var(--_ctm-tab-dn-on-ve-se-hr-se-cr, var(--_ctm-dn-on-ve-se-hr-se-cr))
202
- );
203
- --_sf-hr-ft-fy: var(
204
- --_ctm-mob-dn-on-ve-se-hr-se-ft-fy,
205
- var(--_ctm-tab-dn-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-on-ve-se-hr-se-ft-fy))
206
- );
207
- --_sf-hr-tt-tm: var(
208
- --_ctm-mob-dn-on-ve-se-hr-se-tt-tm,
209
- var(--_ctm-tab-dn-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-on-ve-se-hr-se-tt-tm))
210
- );
211
- --_sf-hr-wd-wp: var(
212
- --_ctm-mob-dn-on-ve-se-hr-se-wd-wp,
213
- var(--_ctm-tab-dn-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-on-ve-se-hr-se-wd-wp))
214
- );
215
- --_sf-hr-wd-bk: var(
216
- --_ctm-mob-dn-on-ve-se-hr-se-wd-bk,
217
- var(--_ctm-tab-dn-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-on-ve-se-hr-se-wd-bk))
218
- );
219
- --_sf-hr-ft-se: var(
220
- --_ctm-mob-dn-on-ve-se-hr-se-ft-se,
221
- var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se, var(--_ctm-dn-on-ve-se-hr-se-ft-se))
222
- );
223
- --_sf-hr-ft-wt: var(
224
- --_ctm-mob-dn-on-ve-se-hr-se-ft-wt,
225
- var(--_ctm-tab-dn-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-on-ve-se-hr-se-ft-wt))
226
- );
227
- --_sf-hr-ft-se-ic: var(
228
- --_ctm-mob-dn-on-ve-se-hr-se-ft-se-ic,
229
- var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-on-ve-se-hr-se-ft-se-ic))
230
- );
231
- --_sf-hr-tt-an: var(
232
- --_ctm-mob-dn-on-ve-se-hr-se-tt-an,
233
- var(--_ctm-tab-dn-on-ve-se-hr-se-tt-an, var(--_ctm-dn-on-ve-se-hr-se-tt-an))
234
- );
235
- --_sf-hr-lr-sg: var(
236
- --_ctm-mob-dn-on-ve-se-hr-se-lr-sg,
237
- var(--_ctm-tab-dn-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-on-ve-se-hr-se-lr-sg))
238
- );
239
- --_sf-hr-le-ht: var(
240
- --_ctm-mob-dn-on-ve-se-hr-se-le-ht,
241
- var(--_ctm-tab-dn-on-ve-se-hr-se-le-ht, var(--_ctm-dn-on-ve-se-hr-se-le-ht))
242
- );
243
-
244
- --_sf-hr-ue: var(
245
- --_ctm-mob-dn-on-ve-se-hr-se-ue,
246
- var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
247
- );
129
+ --_sf-hr-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-cr,
130
+ var(--_ctm-tab-dn-on-ve-se-hr-se-cr, var(--_ctm-dn-on-ve-se-hr-se-cr)));
131
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-on-ve-se-hr-se-ft-fy,
132
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-on-ve-se-hr-se-ft-fy)));
133
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-on-ve-se-hr-se-tt-tm,
134
+ var(--_ctm-tab-dn-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-on-ve-se-hr-se-tt-tm)));
135
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-on-ve-se-hr-se-wd-wp,
136
+ var(--_ctm-tab-dn-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-on-ve-se-hr-se-wd-wp)));
137
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-on-ve-se-hr-se-wd-bk,
138
+ var(--_ctm-tab-dn-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-on-ve-se-hr-se-wd-bk)));
139
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-on-ve-se-hr-se-ft-se,
140
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se, var(--_ctm-dn-on-ve-se-hr-se-ft-se)));
141
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-on-ve-se-hr-se-ft-wt,
142
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-on-ve-se-hr-se-ft-wt)));
143
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-on-ve-se-hr-se-ft-se-ic,
144
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-on-ve-se-hr-se-ft-se-ic)));
145
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-on-ve-se-hr-se-tt-an,
146
+ var(--_ctm-tab-dn-on-ve-se-hr-se-tt-an, var(--_ctm-dn-on-ve-se-hr-se-tt-an)));
147
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-on-ve-se-hr-se-lr-sg,
148
+ var(--_ctm-tab-dn-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-on-ve-se-hr-se-lr-sg)));
149
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-on-ve-se-hr-se-le-ht,
150
+ var(--_ctm-tab-dn-on-ve-se-hr-se-le-ht, var(--_ctm-dn-on-ve-se-hr-se-le-ht)));
151
+
152
+ --_sf-hr-ue: var(--_ctm-mob-dn-on-ve-se-hr-se-ue,
153
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue)));
248
154
  }
155
+
249
156
  .swatch__item[data-selected="true"] {
250
- --_sf-sd-bd-cr: var(
251
- --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
252
- var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
253
- );
254
- --_sf-sd-br-cr: var(
255
- --_ctm-mob-dn-on-ve-se-sd-se-br-cr,
256
- var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
257
- );
258
- --_sf-sd-br-se: var(
259
- --_ctm-mob-dn-on-ve-se-sd-se-br-se,
260
- var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
261
- );
262
- --_sf-sd-br-wh: var(
263
- --_ctm-mob-dn-on-ve-se-sd-se-br-wh,
264
- var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
265
- );
157
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
158
+ var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr)));
159
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-br-cr,
160
+ var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr)));
161
+ --_sf-sd-br-se: var(--_ctm-mob-dn-on-ve-se-sd-se-br-se,
162
+ var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se)));
163
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-on-ve-se-sd-se-br-wh,
164
+ var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh)));
266
165
  // new
267
- --_sf-sd-sw-ae: var(
268
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
269
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
270
- );
271
- --_sf-sd-sw-br: var(
272
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
273
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
274
- );
275
- --_sf-sd-sw-sd: var(
276
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
277
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
278
- );
279
- --_sf-sd-sw-cr: var(
280
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
281
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
282
- );
166
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
167
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae)));
168
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-br,
169
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br)));
170
+ --_sf-sd-sw-sd: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
171
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd)));
172
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
173
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr)));
283
174
 
284
175
  // for font
285
- --_sf-hr-cr: var(
286
- --_ctm-mob-dn-on-ve-se-sd-se-cr,
287
- var(--_ctm-tab-dn-on-ve-se-sd-se-cr, var(--_ctm-dn-on-ve-se-sd-se-cr))
288
- );
289
- --_sf-hr-ft-fy: var(
290
- --_ctm-mob-dn-on-ve-se-sd-se-ft-fy,
291
- var(--_ctm-tab-dn-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-on-ve-se-sd-se-ft-fy))
292
- );
293
- --_sf-hr-tt-tm: var(
294
- --_ctm-mob-dn-on-ve-se-sd-se-tt-tm,
295
- var(--_ctm-tab-dn-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-on-ve-se-sd-se-tt-tm))
296
- );
297
- --_sf-hr-wd-wp: var(
298
- --_ctm-mob-dn-on-ve-se-sd-se-wd-wp,
299
- var(--_ctm-tab-dn-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-on-ve-se-sd-se-wd-wp))
300
- );
301
- --_sf-hr-wd-bk: var(
302
- --_ctm-mob-dn-on-ve-se-sd-se-wd-bk,
303
- var(--_ctm-tab-dn-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-on-ve-se-sd-se-wd-bk))
304
- );
305
- --_sf-hr-ft-se: var(
306
- --_ctm-mob-dn-on-ve-se-sd-se-ft-se,
307
- var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se, var(--_ctm-dn-on-ve-se-sd-se-ft-se))
308
- );
309
- --_sf-hr-ft-wt: var(
310
- --_ctm-mob-dn-on-ve-se-sd-se-ft-wt,
311
- var(--_ctm-tab-dn-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-on-ve-se-sd-se-ft-wt))
312
- );
313
- --_sf-hr-ft-se-ic: var(
314
- --_ctm-mob-dn-on-ve-se-sd-se-ft-se-ic,
315
- var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-on-ve-se-sd-se-ft-se-ic))
316
- );
317
- --_sf-hr-tt-an: var(
318
- --_ctm-mob-dn-on-ve-se-sd-se-tt-an,
319
- var(--_ctm-tab-dn-on-ve-se-sd-se-tt-an, var(--_ctm-dn-on-ve-se-sd-se-tt-an))
320
- );
321
- --_sf-hr-lr-sg: var(
322
- --_ctm-mob-dn-on-ve-se-sd-se-lr-sg,
323
- var(--_ctm-tab-dn-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-on-ve-se-sd-se-lr-sg))
324
- );
325
- --_sf-hr-le-ht: var(
326
- --_ctm-mob-dn-on-ve-se-sd-se-le-ht,
327
- var(--_ctm-tab-dn-on-ve-se-sd-se-le-ht, var(--_ctm-dn-on-ve-se-sd-se-le-ht))
328
- );
329
-
330
- --_sf-hr-ue: var(
331
- --_ctm-mob-dn-on-ve-se-sd-se-ue,
332
- var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
333
- );
176
+ --_sf-hr-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-cr,
177
+ var(--_ctm-tab-dn-on-ve-se-sd-se-cr, var(--_ctm-dn-on-ve-se-sd-se-cr)));
178
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-on-ve-se-sd-se-ft-fy,
179
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-on-ve-se-sd-se-ft-fy)));
180
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-on-ve-se-sd-se-tt-tm,
181
+ var(--_ctm-tab-dn-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-on-ve-se-sd-se-tt-tm)));
182
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-on-ve-se-sd-se-wd-wp,
183
+ var(--_ctm-tab-dn-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-on-ve-se-sd-se-wd-wp)));
184
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-on-ve-se-sd-se-wd-bk,
185
+ var(--_ctm-tab-dn-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-on-ve-se-sd-se-wd-bk)));
186
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-on-ve-se-sd-se-ft-se,
187
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se, var(--_ctm-dn-on-ve-se-sd-se-ft-se)));
188
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-on-ve-se-sd-se-ft-wt,
189
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-on-ve-se-sd-se-ft-wt)));
190
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-on-ve-se-sd-se-ft-se-ic,
191
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-on-ve-se-sd-se-ft-se-ic)));
192
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-on-ve-se-sd-se-tt-an,
193
+ var(--_ctm-tab-dn-on-ve-se-sd-se-tt-an, var(--_ctm-dn-on-ve-se-sd-se-tt-an)));
194
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-on-ve-se-sd-se-lr-sg,
195
+ var(--_ctm-tab-dn-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-on-ve-se-sd-se-lr-sg)));
196
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-on-ve-se-sd-se-le-ht,
197
+ var(--_ctm-tab-dn-on-ve-se-sd-se-le-ht, var(--_ctm-dn-on-ve-se-sd-se-le-ht)));
198
+
199
+ --_sf-hr-ue: var(--_ctm-mob-dn-on-ve-se-sd-se-ue,
200
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue)));
334
201
  }
335
202
 
336
203
  .swatch__item {
@@ -366,10 +233,8 @@
366
233
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
367
234
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
368
235
 
369
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
370
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
371
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
372
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
236
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
237
+
373
238
  & div,
374
239
  .product-select-image {
375
240
  height: 100%;
@@ -380,9 +245,11 @@
380
245
  &[data-background-shape="circle"] {
381
246
  border-radius: 50%;
382
247
  }
248
+
383
249
  &[data-background-shape="square"] {
384
250
  border-radius: 5px;
385
251
  }
252
+
386
253
  &[data-background-shape="capsule"] {
387
254
  &:not([data-display-style="Single Select"]) {
388
255
  --toggle-height: var(--_ctm-lt-sh-im-se);
@@ -392,17 +259,23 @@
392
259
  height: var(--toggle-height);
393
260
  }
394
261
 
395
- border-radius: var(--toggle-height); /* Full pill shape */
262
+ border-radius: var(--toggle-height);
263
+ /* Full pill shape */
396
264
  box-sizing: border-box;
397
265
  }
266
+
398
267
  &[data-swatch-shape="circle"] {
268
+
399
269
  & div,
400
270
  .product-select-image {
401
271
  border-radius: 50%;
402
272
  }
273
+
403
274
  // border-radius: 50%;
404
275
  }
276
+
405
277
  &[data-swatch-shape="capsule"] {
278
+
406
279
  & div,
407
280
  .product-select-image {
408
281
  // border-radius: 50%;
@@ -410,6 +283,7 @@
410
283
  height: 100%;
411
284
  border-radius: inherit;
412
285
  }
286
+
413
287
  // border-radius: 50%;
414
288
  }
415
289
 
@@ -417,9 +291,11 @@
417
291
  &[data-background-shape-hover="circle"] {
418
292
  border-radius: 50%;
419
293
  }
294
+
420
295
  &[data-background-shape-hover="square"] {
421
296
  border-radius: 5px;
422
297
  }
298
+
423
299
  &[data-background-shape-hover="capsule"] {
424
300
  --toggle-height: var(--_ctm-lt-sh-im-se);
425
301
  --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
@@ -427,18 +303,23 @@
427
303
  width: var(--toggle-width);
428
304
  height: var(--toggle-height);
429
305
 
430
- border-radius: var(--toggle-height); /* Full pill shape */
306
+ border-radius: var(--toggle-height);
307
+ /* Full pill shape */
431
308
  box-sizing: border-box;
432
309
  }
433
310
 
434
311
  &[data-swatch-shape-hover="circle"] {
312
+
435
313
  & div,
436
314
  .product-select-image {
437
315
  border-radius: 50%;
438
316
  }
317
+
439
318
  // border-radius: 50%;
440
319
  }
320
+
441
321
  &[data-swatch-shape-hover="capsule"] {
322
+
442
323
  & div,
443
324
  .product-select-image {
444
325
  // border-radius: 50%;
@@ -447,33 +328,33 @@
447
328
  border-radius: inherit;
448
329
  }
449
330
  }
331
+
450
332
  &[data-swatch-shape-hover="square"] {
333
+
451
334
  & div,
452
335
  .product-select-image {
453
336
  border-radius: 5px;
454
337
  }
455
338
  }
456
339
  }
340
+
457
341
  &[data-selected="true"] {
458
342
  border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
459
343
 
460
- background-color: var(
461
- --_sf-sd-bd-cr,
462
- prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
463
- );
344
+ background-color: var(--_sf-sd-bd-cr,
345
+ prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
464
346
  border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
465
347
  border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
466
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
467
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
468
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
469
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
348
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
470
349
 
471
350
  &[data-background-shape-selected="circle"] {
472
351
  border-radius: 50%;
473
352
  }
353
+
474
354
  &[data-background-shape-selected="square"] {
475
355
  border-radius: 5px;
476
356
  }
357
+
477
358
  &[data-background-shape-selected="capsule"] {
478
359
  --toggle-height: #{prepareMediaVariable(--_ctm-lt-sh-im-se)};
479
360
  --toggle-width: calc(#{prepareMediaVariable(--_ctm-lt-sh-im-se)} * 1.5);
@@ -481,16 +362,21 @@
481
362
  width: var(--toggle-width);
482
363
  // height: var(--toggle-height);
483
364
 
484
- border-radius: var(--toggle-height); /* Full pill shape */
365
+ border-radius: var(--toggle-height);
366
+ /* Full pill shape */
485
367
  box-sizing: border-box;
486
368
  }
369
+
487
370
  &[data-swatch-shape-selected="circle"] {
371
+
488
372
  & div,
489
373
  .product-select-image {
490
374
  border-radius: 50%;
491
375
  }
492
376
  }
377
+
493
378
  &[data-swatch-shape-selected="capsule"] {
379
+
494
380
  & div,
495
381
  .product-select-image {
496
382
  // border-radius: 50%;
@@ -499,7 +385,9 @@
499
385
  border-radius: inherit;
500
386
  }
501
387
  }
388
+
502
389
  &[data-swatch-shape-selected="square"] {
390
+
503
391
  & div,
504
392
  .product-select-image {
505
393
  border-radius: 5px;
@@ -515,15 +403,14 @@
515
403
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-wd-bk));
516
404
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
517
405
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
518
- font-style: var(
519
- --_sf-hr-ft-se-ic,
520
- prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic)
521
- );
406
+ font-style: var(--_sf-hr-ft-se-ic,
407
+ prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic));
522
408
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
523
409
  letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
524
410
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
525
411
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
526
412
  }
413
+
527
414
  &.disabled {
528
415
  color: #aaa;
529
416
  background-color: #f9f9f9;
@@ -599,74 +486,49 @@
599
486
  width: 100%;
600
487
  object-fit: cover;
601
488
  }
489
+
602
490
  //Dropdown
603
491
  .est__dropdown__main {
604
492
  position: relative;
605
493
  width: 100%;
606
494
  display: flex;
607
495
  flex-direction: column;
608
- gap: var(
609
- --_ctm-mob-lt-on-te-ve-sg,
610
- var(
611
- --_ctm-tab-lt-on-te-ve-sg,
612
- var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
613
- )
614
- );
615
- padding: var(
616
- --_ctm-mob-lt-dn-dy-se-dn-os-pg,
617
- var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg))
618
- );
496
+ gap: var(--_ctm-mob-lt-on-te-ve-sg,
497
+ var(--_ctm-tab-lt-on-te-ve-sg,
498
+ var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))));
499
+ padding: var(--_ctm-mob-lt-dn-dy-se-dn-os-pg,
500
+ var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg)));
619
501
  margin-top: 10px;
620
502
 
621
503
  label {
622
- font-size: var(
623
- --_ctm-mob-dn-on-te-ft-se,
624
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
625
- );
626
- font-family: var(
627
- --_ctm-mob-dn-on-te-ft-fy,
628
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
629
- );
630
- text-transform: var(
631
- --_ctm-mob-dn-on-te-tt-tm,
632
- var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
633
- );
634
- word-wrap: var(
635
- --_ctm-mob-dn-on-te-wd-wp,
636
- var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
637
- );
638
- word-break: var(
639
- --_ctm-mob-dn-on-te-wd-bk,
640
- var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
641
- );
504
+ font-size: var(--_ctm-mob-dn-on-te-ft-se,
505
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
506
+ font-family: var(--_ctm-mob-dn-on-te-ft-fy,
507
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
508
+ text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
509
+ var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
510
+ word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
511
+ var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
512
+ word-break: var(--_ctm-mob-dn-on-te-wd-bk,
513
+ var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
514
+
642
515
  &.flex__overflow {
643
516
  white-space: normal;
644
517
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
645
518
  }
646
- color: var(
647
- --_ctm-mob-dn-on-te-cr,
648
- var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
649
- );
650
- font-weight: var(
651
- --_ctm-mob-dn-on-te-ft-wt,
652
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
653
- );
654
- text-decoration: var(
655
- --_ctm-mob-dn-on-te-ue,
656
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
657
- );
658
- letter-spacing: var(
659
- --_ctm-mob-dn-on-te-lr-sg,
660
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
661
- );
662
- text-align: var(
663
- --_ctm-mob-dn-on-te-tt-an,
664
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
665
- );
666
- line-height: var(
667
- --_ctm-mob-dn-on-te-le-ht,
668
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
669
- );
519
+
520
+ color: var(--_ctm-mob-dn-on-te-cr,
521
+ var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr))));
522
+ font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
523
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
524
+ text-decoration: var(--_ctm-mob-dn-on-te-ue,
525
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
526
+ letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
527
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
528
+ text-align: var(--_ctm-mob-dn-on-te-tt-an,
529
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
530
+ line-height: var(--_ctm-mob-dn-on-te-le-ht,
531
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
670
532
  display: block;
671
533
  }
672
534
 
@@ -681,79 +543,45 @@
681
543
  justify-content: space-between;
682
544
  align-items: center;
683
545
  width: 100%;
546
+
684
547
  .value__selected {
685
548
  width: 100%;
686
549
  }
687
550
 
688
551
  &.open .list {
689
552
  display: none;
690
- margin-top: var(
691
- --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
692
- var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
693
- );
694
- gap: var(
695
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
696
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
697
- );
698
- background-color: var(
699
- --_ctm-mob-dn-dn-se-bd-cr,
700
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
701
- );
553
+ margin-top: var(--_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
554
+ var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg)));
555
+ gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
556
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)));
557
+ background-color: var(--_ctm-mob-dn-dn-se-bd-cr,
558
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr)));
702
559
  }
703
560
 
704
561
  .list {
705
562
  display: flex !important;
706
563
  flex-direction: column;
707
- gap: var(
708
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
709
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
710
- );
711
- border: var(
712
- --_ctm-mob-dn-dn-se-br-wh,
713
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
714
- )
715
- var(
716
- --_ctm-mob-dn-dn-se-br-se,
717
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
718
- )
719
- var(
720
- --_gray-200,
721
- var(
722
- --_ctm-mob-dn-dn-se-br-cr,
723
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
724
- )
725
- );
726
- border-radius: var(
727
- --_ctm-mob-dn-dn-se-br-rs,
728
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
729
- );
730
- box-shadow: var(
731
- --_show-shadow-dn-se,
732
- var(
733
- --_ctm-mob-dn-dn-se-sw-ae,
734
- var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))
735
- )
736
- var(
737
- --_ctm-mob-dn-dn-se-sw-br,
738
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))
739
- )
740
- var(
741
- --_ctm-mob-dn-dn-se-sw-sd,
742
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))
743
- )
744
- var(
745
- --_ctm-mob-dn-dn-se-sw-cr,
746
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))
747
- )
748
- );
564
+ gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
565
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)));
566
+ border: var(--_ctm-mob-dn-dn-se-br-wh,
567
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))) var(--_ctm-mob-dn-dn-se-br-se,
568
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))) var(--_gray-200,
569
+ var(--_ctm-mob-dn-dn-se-br-cr,
570
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))));
571
+ border-radius: var(--_ctm-mob-dn-dn-se-br-rs,
572
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs)));
573
+ box-shadow: var(--_show-shadow-dn-se,
574
+ var(--_ctm-mob-dn-dn-se-sw-ae,
575
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))) var(--_ctm-mob-dn-dn-se-sw-br,
576
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))) var(--_ctm-mob-dn-dn-se-sw-sd,
577
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))) var(--_ctm-mob-dn-dn-se-sw-cr,
578
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))));
749
579
  position: absolute;
750
580
  top: 100%;
751
581
  left: 0;
752
582
  width: 100%;
753
- background-color: var(
754
- --_ctm-mob-dn-dn-se-bd-cr,
755
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
756
- );
583
+ background-color: var(--_ctm-mob-dn-dn-se-bd-cr,
584
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr)));
757
585
  border-radius: 4px;
758
586
  z-index: var(--_higher-zIndex);
759
587
  max-height: 200px;
@@ -765,10 +593,8 @@
765
593
  }
766
594
 
767
595
  .list__option {
768
- padding: var(
769
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
770
- var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
771
- );
596
+ padding: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
597
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg)));
772
598
  cursor: pointer;
773
599
 
774
600
  &:hover {
@@ -789,21 +615,20 @@
789
615
  .var__drop__selection {
790
616
  display: flex;
791
617
  width: 100%;
792
- gap: var(
793
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
794
- var(
795
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
796
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
797
- )
798
- );
618
+ gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
619
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
620
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))));
799
621
 
800
622
  flex-direction: row;
623
+
801
624
  &[data-dropdown-style="Vertical List"] {
802
625
  flex-direction: column;
803
626
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
804
627
  }
628
+
805
629
  .dropdown_wrapper {
806
630
  position: relative;
631
+
807
632
  &[data-show-divider="true"] {
808
633
  &:not(:last-child)::after {
809
634
  content: "";
@@ -812,12 +637,7 @@
812
637
  height: 1px;
813
638
  width: 100%;
814
639
  display: flex;
815
- top: calc(
816
- calc(
817
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
818
- ) /
819
- 2
820
- );
640
+ top: calc(calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px) / 2);
821
641
  }
822
642
  }
823
643
 
@@ -833,16 +653,9 @@
833
653
  height: 1px;
834
654
  width: 100%;
835
655
  display: flex;
836
- top: calc(
837
- var(
838
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
839
- var(
840
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
841
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
842
- )
843
- ) /
844
- 2
845
- );
656
+ top: calc(var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
657
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
658
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))) / 2);
846
659
  }
847
660
  }
848
661
  }
@@ -850,10 +663,12 @@
850
663
  }
851
664
  }
852
665
  }
853
- & > div {
666
+
667
+ &>div {
854
668
  width: 100%;
855
669
  }
856
670
  }
671
+
857
672
  .embla {
858
673
  width: 100%;
859
674
  height: 100%;
@@ -886,37 +701,18 @@
886
701
  gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
887
702
 
888
703
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
889
- height: calc(
890
- 100% - calc(
891
- var(
892
- --_ctm-mob-dn-pn-as-aw-se,
893
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
894
- ) +
895
- 8px
896
- )
897
- );
704
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
705
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 8px));
898
706
  }
707
+
899
708
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
900
- height: calc(
901
- 100% - calc(
902
- var(
903
- --_ctm-mob-dn-pn-le-le-ht,
904
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
905
- ) +
906
- 20px
907
- )
908
- );
709
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
710
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
909
711
  }
712
+
910
713
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
911
- height: calc(
912
- 100% - calc(
913
- var(
914
- --_ctm-mob-dn-pn-ds-dt-se,
915
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
916
- ) +
917
- 20px
918
- )
919
- );
714
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
715
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
920
716
  }
921
717
 
922
718
  .embla__slide {
@@ -934,20 +730,25 @@
934
730
  width: 100%;
935
731
  justify-content: space-between;
936
732
  transform: translate(-50%, -50%);
733
+
937
734
  // padding-left: 20px;
938
735
  &[data-control-type="Side"] {
736
+
939
737
  .left-button,
940
738
  .right-button {
941
739
  background-color: transparent;
942
740
  }
943
741
  }
742
+
944
743
  &[data-background-shape="Round"] {
744
+
945
745
  .left-button,
946
746
  .right-button {
947
747
  background-color: #f2f5f5;
948
748
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
949
749
  }
950
750
  }
751
+
951
752
  &[data-control-type="Bottom-Overflow"] {
952
753
  transform: translateX(-50%);
953
754
  width: 100%;
@@ -956,6 +757,7 @@
956
757
  top: unset;
957
758
  bottom: 6px;
958
759
  }
760
+
959
761
  &[data-control-type="Bottom"] {
960
762
  transform: unset;
961
763
  position: static;
@@ -964,18 +766,15 @@
964
766
  gap: 12px;
965
767
  margin-top: 10px;
966
768
  }
769
+
967
770
  .left-button {
968
771
  padding: 10px;
969
772
  border-radius: 50%;
970
773
  border: none;
971
- width: var(
972
- --_ctm-mob-dn-pn-as-aw-se,
973
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
974
- );
975
- height: var(
976
- --_ctm-mob-dn-pn-as-aw-se,
977
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
978
- );
774
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
775
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
776
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
777
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
979
778
 
980
779
  display: flex;
981
780
  align-items: center;
@@ -983,6 +782,7 @@
983
782
  cursor: pointer;
984
783
  outline: none;
985
784
  margin-left: 12px;
785
+
986
786
  &:disabled {
987
787
  & svg {
988
788
  path {
@@ -991,17 +791,14 @@
991
791
  }
992
792
  }
993
793
  }
794
+
994
795
  .right-button {
995
796
  border-radius: 50%;
996
797
  border: none;
997
- width: var(
998
- --_ctm-mob-dn-pn-as-aw-se,
999
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1000
- );
1001
- height: var(
1002
- --_ctm-mob-dn-pn-as-aw-se,
1003
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1004
- );
798
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
799
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
800
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
801
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
1005
802
 
1006
803
  display: flex;
1007
804
  align-items: center;
@@ -1019,28 +816,19 @@
1019
816
  }
1020
817
  }
1021
818
  }
819
+
1022
820
  .icon {
1023
821
  display: flex;
822
+
1024
823
  svg {
1025
- width: calc(
1026
- var(
1027
- --_ctm-mob-dn-pn-as-aw-se,
1028
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1029
- ) *
1030
- 0.5
1031
- );
1032
- height: calc(
1033
- var(
1034
- --_ctm-mob-dn-pn-as-aw-se,
1035
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1036
- ) *
1037
- 0.5
1038
- );
824
+ width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
825
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
826
+ height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
827
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
828
+
1039
829
  path {
1040
- stroke: var(
1041
- --_ctm-mob-dn-pn-as-aw-cr,
1042
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
1043
- );
830
+ stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
831
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
1044
832
  }
1045
833
  }
1046
834
  }
@@ -1049,9 +837,11 @@
1049
837
  &[data-thumbnail-placement="top"] {
1050
838
  flex-direction: column-reverse;
1051
839
  }
840
+
1052
841
  &[data-thumbnail-placement="bottom"] {
1053
842
  flex-direction: column;
1054
843
  }
844
+
1055
845
  &[data-thumbnail-placement="left"] {
1056
846
  flex-direction: row-reverse;
1057
847
 
@@ -1066,8 +856,10 @@
1066
856
  }
1067
857
  }
1068
858
  }
859
+
1069
860
  &[data-thumbnail-placement="right"] {
1070
861
  flex-direction: row;
862
+
1071
863
  .embla__thumbs {
1072
864
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1073
865
 
@@ -1079,15 +871,18 @@
1079
871
  }
1080
872
  }
1081
873
  }
874
+
1082
875
  &[data-control-type="Side"] {
1083
876
  display: flex;
1084
877
  align-self: center;
1085
878
  flex-direction: row;
879
+
1086
880
  .left-button:disabled,
1087
881
  .right-button:disabled {
1088
882
  display: none;
1089
883
  }
1090
884
  }
885
+
1091
886
  .embla__dots {
1092
887
  display: flex;
1093
888
  flex-wrap: wrap;
@@ -1104,6 +899,7 @@
1104
899
  transform: translateX(-50%);
1105
900
  width: 75%;
1106
901
  }
902
+
1107
903
  .embla__dot {
1108
904
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1109
905
  -webkit-appearance: none;
@@ -1125,6 +921,7 @@
1125
921
  justify-content: center;
1126
922
  border-radius: 50%;
1127
923
  }
924
+
1128
925
  .embla__dot:after {
1129
926
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1130
927
  width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
@@ -1134,10 +931,12 @@
1134
931
  align-items: center;
1135
932
  content: "";
1136
933
  }
934
+
1137
935
  .embla__dot--selected:after {
1138
936
  box-shadow: inset 0 0 0 1px var(--text-body);
1139
937
  background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1140
938
  }
939
+
1141
940
  &[data-slider-control="Pagination Line"] {
1142
941
  .embla__dot {
1143
942
  width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
@@ -1146,6 +945,7 @@
1146
945
 
1147
946
  border-radius: 6px;
1148
947
  }
948
+
1149
949
  .embla__dot--selected:after {
1150
950
  box-shadow: inset 0 0 0 1px var(--text-body);
1151
951
  border-radius: 6px;
@@ -1177,6 +977,7 @@
1177
977
 
1178
978
  overflow: hidden;
1179
979
  }
980
+
1180
981
  .embla__thumbs__container {
1181
982
  display: flex;
1182
983
  flex-direction: row;
@@ -1190,6 +991,7 @@
1190
991
  min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1191
992
  max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1192
993
  height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
994
+
1193
995
  & img {
1194
996
  width: 100%;
1195
997
  height: 100%;
@@ -1200,4 +1002,4 @@
1200
1002
  }
1201
1003
  }
1202
1004
  }
1203
- }
1005
+ }