@sc-360-v2/storefront-cms-library 0.5.58 → 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 (211) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +141 -210
  3. package/dist/add-products-tab-details.scss +1121 -1920
  4. package/dist/add-products-tab-uom-details.scss +105 -0
  5. package/dist/add-products-tab.scss +682 -994
  6. package/dist/allocation-header-quota-details.scss +198 -327
  7. package/dist/allocationDetails.scss +1645 -2022
  8. package/dist/allocations-quota-details.scss +168 -261
  9. package/dist/allocations.scss +504 -715
  10. package/dist/amount-estimator.scss +414 -648
  11. package/dist/animation-control.scss +23 -23
  12. package/dist/badge.scss +55 -18
  13. package/dist/brand-basic-elements.scss +93 -124
  14. package/dist/brand.scss +28 -55
  15. package/dist/breadcrumbs.scss +372 -718
  16. package/dist/builder.js +1 -1
  17. package/dist/bulk-variant-picker.scss +1161 -1816
  18. package/dist/bundle copy.scss +235 -0
  19. package/dist/bundle.scss +2142 -2584
  20. package/dist/bundleDetails.scss +3808 -4802
  21. package/dist/button copy.scss +28 -0
  22. package/dist/button.scss +89 -102
  23. package/dist/buy-for-tab-container.scss +77 -106
  24. package/dist/buy-for-tab.scss +54 -0
  25. package/dist/buy-for-tabs-container-item.scss +80 -80
  26. package/dist/buyForHeaders.scss +1823 -2457
  27. package/dist/cart-details.scss +514 -718
  28. package/dist/cart-products-sidebar.scss +211 -211
  29. package/dist/cart-summary.scss +611 -1015
  30. package/dist/cart-wrapper.scss +85 -127
  31. package/dist/cart.scss +119 -211
  32. package/dist/cartAttributes.scss +377 -539
  33. package/dist/cartDropdownOverlay.scss +21 -0
  34. package/dist/cartGrouping.scss +89 -89
  35. package/dist/category-groups-element.scss +130 -96
  36. package/dist/category-groups-product-grid.scss +40 -79
  37. package/dist/category-groups-product-image.scss +457 -1306
  38. package/dist/category-groups-product-options.scss +224 -606
  39. package/dist/category-groups-product-price.scss +1366 -4199
  40. package/dist/category-groups-quota-details.scss +217 -382
  41. package/dist/category.scss +26 -50
  42. package/dist/categoryDetails.scss +61 -61
  43. package/dist/categoryWidget.scss +34 -34
  44. package/dist/checkbox-radio.scss +124 -124
  45. package/dist/checkout.scss +1915 -3309
  46. package/dist/common-element.scss +35 -35
  47. package/dist/confirm-modal.scss +22 -2
  48. package/dist/confirmationModal.scss +139 -139
  49. package/dist/container.scss +32 -54
  50. package/dist/countdown.scss +264 -371
  51. package/dist/coupon.scss +379 -600
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/default-dropdown.scss +12 -1
  54. package/dist/embroider-preview-element.scss +94 -94
  55. package/dist/embroider-template-1-v2.scss +157 -172
  56. package/dist/embroider-template-1.scss +465 -482
  57. package/dist/embroidery.scss +37 -31
  58. package/dist/employee-bulk-order.scss +418 -142
  59. package/dist/emtpy-templates.scss +165 -165
  60. package/dist/faq.scss +239 -395
  61. package/dist/filter-results.scss +221 -323
  62. package/dist/filters.scss +843 -1406
  63. package/dist/flex-text-editor.scss +271 -271
  64. package/dist/functions.scss +36 -0
  65. package/dist/gallery-slider-temp.scss +428 -727
  66. package/dist/global-styles.scss +45 -6
  67. package/dist/grid.scss +25 -33
  68. package/dist/hotspot.scss +75 -115
  69. package/dist/icon-list.scss +33 -59
  70. package/dist/image-for-product.scss +21 -21
  71. package/dist/image-temp.scss +21 -20
  72. package/dist/item-stock.scss +15 -16
  73. package/dist/kitDetails.scss +2786 -4008
  74. package/dist/kits.scss +28 -19
  75. package/dist/language-selector.scss +241 -375
  76. package/dist/last-x-orders.scss +101 -163
  77. package/dist/layouter-item.scss +75 -103
  78. package/dist/layouter-pro-item.scss +89 -95
  79. package/dist/layouter-pro.scss +87 -92
  80. package/dist/layouter.scss +67 -117
  81. package/dist/light-box-v2.scss +89 -104
  82. package/dist/lightbox.scss +78 -78
  83. package/dist/line.scss +29 -70
  84. package/dist/loader.scss +37 -37
  85. package/dist/login.scss +316 -489
  86. package/dist/map.scss +233 -336
  87. package/dist/marchandiserSets.scss +95 -104
  88. package/dist/mega-menu-container.scss +96 -109
  89. package/dist/mega-menu.scss +627 -670
  90. package/dist/menu-item.scss +19 -19
  91. package/dist/menu-v2.scss +538 -528
  92. package/dist/menu.scss +12 -0
  93. package/dist/multi-select-dropdown.scss +27 -3
  94. package/dist/my-templates.scss +41 -9
  95. package/dist/myTemplates.scss +3 -0
  96. package/dist/option-bar.scss +229 -351
  97. package/dist/order-processing.scss +61 -61
  98. package/dist/order-status.scss +666 -1096
  99. package/dist/overflow-module.scss +62 -63
  100. package/dist/past-orders.scss +168 -149
  101. package/dist/payment-methods.scss +323 -289
  102. package/dist/pickup-locations.scss +568 -941
  103. package/dist/position-module.scss +98 -95
  104. package/dist/prefix-list.scss +97 -86
  105. package/dist/product-actions.scss +1262 -1620
  106. package/dist/product-basic-elements.scss +116 -169
  107. package/dist/product-customizations.scss +155 -149
  108. package/dist/product-highlights.scss +116 -145
  109. package/dist/product-image-allocation.scss +38 -0
  110. package/dist/product-image-bundles.scss +359 -638
  111. package/dist/product-image.scss +341 -676
  112. package/dist/product-inventory.scss +673 -1117
  113. package/dist/product-labels.scss +94 -101
  114. package/dist/product-options.scss +298 -438
  115. package/dist/product-price.scss +1325 -2182
  116. package/dist/product-promotions.scss +1388 -2374
  117. package/dist/product-sizechart.scss +523 -821
  118. package/dist/product.scss +28 -61
  119. package/dist/productDetails.scss +19 -38
  120. package/dist/profile.scss +242 -406
  121. package/dist/quantity-selector.scss +327 -502
  122. package/dist/quick-inventory-check.scss +101 -163
  123. package/dist/quick-links.scss +72 -133
  124. package/dist/quick-order-pad.scss +224 -206
  125. package/dist/quota-details.scss +163 -297
  126. package/dist/quotes.scss +727 -737
  127. package/dist/repeater copy.scss +24 -0
  128. package/dist/repeater-embla-controls.scss +34 -14
  129. package/dist/repeater-grid-toggle.scss +156 -166
  130. package/dist/repeater-item.scss +41 -64
  131. package/dist/repeater.scss +579 -669
  132. package/dist/request-for-quotes.scss +66 -16
  133. package/dist/responsive-behaviour.scss +31 -29
  134. package/dist/rfqs.scss +147 -181
  135. package/dist/scroll.scss +93 -167
  136. package/dist/search-results-heading.scss +36 -0
  137. package/dist/search.scss +186 -290
  138. package/dist/section.scss +27 -51
  139. package/dist/shareCartSideBar.scss +254 -254
  140. package/dist/shipping-estimator.scss +41 -41
  141. package/dist/shipping-payments.scss +246 -58
  142. package/dist/simple-list.scss +65 -123
  143. package/dist/social.scss +78 -131
  144. package/dist/sort.scss +89 -89
  145. package/dist/spotlight.scss +48 -0
  146. package/dist/stack.scss +23 -34
  147. package/dist/static-global.scss +44 -26
  148. package/dist/static-text.scss +52 -52
  149. package/dist/stockStatus.scss +14 -19
  150. package/dist/store-locations.scss +595 -933
  151. package/dist/sub-category.scss +74 -74
  152. package/dist/submit-quote.scss +275 -275
  153. package/dist/tab-container-item.scss +80 -80
  154. package/dist/tab-container.scss +81 -108
  155. package/dist/tab-v2.scss +277 -580
  156. package/dist/table-common.scss +218 -331
  157. package/dist/table.scss +273 -434
  158. package/dist/tabs.scss +440 -395
  159. package/dist/text-temp-v2.scss +12 -23
  160. package/dist/text-temp.scss +110 -109
  161. package/dist/theme-classes.scss +66 -13
  162. package/dist/toaster.scss +392 -350
  163. package/dist/toggle-button.scss +32 -32
  164. package/dist/transform-properties-module.scss +20 -20
  165. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  166. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  167. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  168. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  169. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  170. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  171. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  172. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  173. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  174. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  175. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  176. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  177. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  179. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  180. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  181. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  182. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  183. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  184. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  185. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  186. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  187. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  189. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  190. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  191. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  192. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  193. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  194. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  195. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  196. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  197. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  198. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  199. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  200. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  201. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  202. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  203. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  204. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  205. package/dist/uom-selector.scss +499 -841
  206. package/dist/user-elements.scss +653 -774
  207. package/dist/variant-picker.scss +1298 -2358
  208. package/dist/video.scss +147 -325
  209. package/dist/volume-pricing.scss +545 -849
  210. package/dist/wishlist-overlay.scss +48 -48
  211. package/package.json +131 -131
@@ -8,27 +8,22 @@ $minWidth: 70px;
8
8
  &[data-element-type="bulkVariantPicker"] {
9
9
  --_ctm-mob-var-lt-mn-cn-wh: 70px;
10
10
 
11
- width: var(
12
- --_sf-el-wh-st-mx,
13
- calc(
14
- 1% *
15
- var(
16
- --_ctm-mob-ele-nw-wh-vl,
17
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
18
- )
19
- )
20
- );
11
+ width: var(--_sf-el-wh-st-mx,
12
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
13
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
21
14
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
22
15
 
23
16
  min-width: #{$minWidth} !important;
24
17
 
25
- & > .wrapper {
18
+ &>.wrapper {
26
19
  width: 100%;
27
20
  // height: 100%;
28
21
  }
22
+
29
23
  &[data-show-shadow="false"] {
30
24
  --_show-shadow: none;
31
25
  }
26
+
32
27
  .text-element {
33
28
  color: #333;
34
29
 
@@ -38,41 +33,32 @@ $minWidth: 70px;
38
33
  line-height: 18px;
39
34
  margin-bottom: 6px;
40
35
  }
36
+
41
37
  .option__title {
42
38
  margin-bottom: 4px;
43
39
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
44
- font-family: var(
45
- --_ctm-mob-dn-on-te-ft-fy,
46
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
47
- );
48
- font-size: var(
49
- --_ctm-mob-dn-on-te-ft-se,
50
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
51
- );
52
- font-weight: var(
53
- --_ctm-mob-dn-on-te-ft-wt,
54
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
55
- );
56
- font-style: var(
57
- --_ctm-mob-dn-on-te-ft-se-ic,
58
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
59
- );
60
- text-align: var(
61
- --_ctm-mob-dn-on-te-tt-an,
62
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
63
- );
64
- letter-spacing: var(
65
- --_ctm-mob-dn-on-te-lr-sg,
66
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
67
- );
68
- line-height: var(
69
- --_ctm-mob-dn-on-te-le-ht,
70
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
71
- );
72
- text-decoration: var(
73
- --_ctm-mob-dn-on-te-ue,
74
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
75
- );
40
+ font-family: var(--_ctm-mob-dn-on-te-ft-fy,
41
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
42
+ text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
43
+ var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
44
+ word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
45
+ var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
46
+ word-break: var(--_ctm-mob-dn-on-te-wd-bk,
47
+ var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
48
+ font-size: var(--_ctm-mob-dn-on-te-ft-se,
49
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
50
+ font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
51
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
52
+ font-style: var(--_ctm-mob-dn-on-te-ft-se-ic,
53
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)));
54
+ text-align: var(--_ctm-mob-dn-on-te-tt-an,
55
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
56
+ letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
57
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
58
+ line-height: var(--_ctm-mob-dn-on-te-le-ht,
59
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
60
+ text-decoration: var(--_ctm-mob-dn-on-te-ue,
61
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
76
62
  }
77
63
 
78
64
  .is__combination_avail {
@@ -80,6 +66,7 @@ $minWidth: 70px;
80
66
  font-size: 14px;
81
67
  font-weight: 600;
82
68
  }
69
+
83
70
  .variant__container {
84
71
  display: flex;
85
72
  flex-direction: column;
@@ -87,50 +74,34 @@ $minWidth: 70px;
87
74
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
88
75
  white-space: nowrap;
89
76
 
90
- background-color: var(
91
- --_ctm-mob-dn-wt-se-bd-cr,
92
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
93
- );
94
-
95
- border-color: var(
96
- --_ctm-mob-dn-wt-se-br-cr,
97
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
98
- );
99
-
100
- border-style: var(
101
- --_ctm-mob-dn-wt-se-br-se,
102
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
103
- );
104
-
105
- border-width: var(
106
- --_ctm-mob-dn-wt-se-br-wh,
107
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
108
- );
109
-
110
- border-radius: var(
111
- --_ctm-mob-dn-wt-se-br-rs,
112
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
113
- );
114
-
115
- box-shadow: var(
116
- --_show-shadow,
117
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
118
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
119
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
120
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
121
- );
77
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
78
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
79
+
80
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
81
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
82
+
83
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
84
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
85
+
86
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
87
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
88
+
89
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
90
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
91
+
92
+ box-shadow: var(--_show-shadow,
93
+ 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))));
122
94
 
123
95
  .standard_wrapper {
96
+
124
97
  // Select Colors
125
98
  .select__colors {
126
99
  font-size: 16px;
127
100
  color: var(--_gray-500);
128
101
  display: flex;
129
102
  flex-direction: column;
130
- gap: var(
131
- --_ctm-mob-lt-on-te-ve-sg,
132
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
133
- );
103
+ gap: var(--_ctm-mob-lt-on-te-ve-sg,
104
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
134
105
  // padding: var(
135
106
  // --_ctm-mob-lt-sh-te-dy-se-im-pg,
136
107
  // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
@@ -139,95 +110,62 @@ $minWidth: 70px;
139
110
  .select__group {
140
111
  display: flex;
141
112
  flex-direction: row;
142
- gap: var(
143
- --_ctm-mob-lt-sh-te-dy-se-im-sg,
144
- var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg))
145
- );
113
+ gap: var(--_ctm-mob-lt-sh-te-dy-se-im-sg,
114
+ var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg)));
146
115
 
147
116
  &[data-swatch-dispaly="Vertically"] {
148
117
  flex-direction: column;
149
118
  }
119
+
150
120
  &[data-swatch-overflow="Scroll"] {
151
121
  flex-wrap: nowrap;
152
122
  overflow-x: auto;
153
123
  }
124
+
154
125
  &[data-swatch-overflow="Wrap"] {
155
126
  flex-wrap: wrap;
156
127
  }
157
128
 
158
129
  .show_more_button {
159
- background-color: var(
160
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
161
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
162
- );
163
- font-family: var(
164
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
165
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
166
- );
167
- border-color: var(
168
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
169
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
170
- );
171
- border-radius: var(
172
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
173
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
174
- );
175
- border-style: var(
176
- --_ctm-mob-dn-sw-me-is-bn-br-se,
177
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
178
- );
179
- border-width: var(
180
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
181
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
182
- );
183
- font-size: var(
184
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
185
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
186
- );
187
- font-style: var(
188
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
189
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
190
- );
191
- font-weight: var(
192
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
193
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
194
- );
195
- line-height: var(
196
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
197
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
198
- );
199
- letter-spacing: var(
200
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
201
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
202
- );
203
- box-shadow: var(
204
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
205
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
206
- )
207
- var(
208
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
209
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
210
- )
211
- var(
212
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
213
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
214
- )
215
- var(
216
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
217
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
218
- );
219
- text-align: var(
220
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
221
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
222
- );
223
- color: var(
224
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
225
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
226
- );
227
- text-decoration: var(
228
- --_ctm-mob-dn-sw-me-is-bn-ue,
229
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
230
- );
130
+ background-color: var(--_ctm-mob-dn-sw-me-is-bn-bd-cr,
131
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)));
132
+ font-family: var(--_ctm-mob-dn-sw-me-is-bn-ft-fy,
133
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)));
134
+ text-transform: var(--_ctm-mob-dn-sw-me-is-bn-tt-tm,
135
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)));
136
+ word-wrap: var(--_ctm-mob-dn-sw-me-is-bn-wd-wp,
137
+ var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)));
138
+ word-break: var(--_ctm-mob-dn-sw-me-is-bn-wd-bk,
139
+ var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)));
140
+ border-color: var(--_ctm-mob-dn-sw-me-is-bn-br-cr,
141
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)));
142
+ border-radius: var(--_ctm-mob-dn-sw-me-is-bn-br-rs,
143
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)));
144
+ border-style: var(--_ctm-mob-dn-sw-me-is-bn-br-se,
145
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)));
146
+ border-width: var(--_ctm-mob-dn-sw-me-is-bn-br-wh,
147
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)));
148
+ font-size: var(--_ctm-mob-dn-sw-me-is-bn-ft-se,
149
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)));
150
+ font-style: var(--_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
151
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic)));
152
+ font-weight: var(--_ctm-mob-dn-sw-me-is-bn-ft-wt,
153
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)));
154
+ line-height: var(--_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
+ letter-spacing: var(--_ctm-mob-dn-sw-me-is-bn-lr-sg,
157
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)));
158
+ box-shadow: var(--_ctm-mob-dn-sw-me-is-bn-sw-ae,
159
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))) var(--_ctm-mob-dn-sw-me-is-bn-sw-br,
160
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))) var(--_ctm-mob-dn-sw-me-is-bn-sw-sd,
161
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))) var(--_ctm-mob-dn-sw-me-is-bn-sw-cr,
162
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)));
163
+ text-align: var(--_ctm-mob-dn-sw-me-is-bn-tt-an,
164
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)));
165
+ color: var(--_ctm-mob-dn-sw-me-is-bn-tt-cr,
166
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)));
167
+ text-decoration: var(--_ctm-mob-dn-sw-me-is-bn-ue,
168
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)));
231
169
  }
232
170
 
233
171
  .select__group__item {
@@ -238,51 +176,40 @@ $minWidth: 70px;
238
176
  width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
239
177
  padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg);
240
178
 
241
- border-color: var(
242
- --_sf-hr-br-cr,
243
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
244
- );
245
-
246
- background-color: var(
247
- --_sf-hr-bd-cr,
248
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
249
- );
250
-
251
- border-style: var(
252
- --_sf-hr-br-se,
253
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
254
- );
255
-
256
- border-width: var(
257
- --_sf-hr-br-wh,
258
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
259
- );
260
- border-radius: var(
261
- --_sf-hr-br-rs,
262
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
263
- );
264
-
265
- box-shadow: var(
266
- --_sf-hr-sw-ae,
267
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
268
- )
269
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
270
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
271
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
179
+ border-color: var(--_sf-hr-br-cr,
180
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr));
181
+
182
+ background-color: var(--_sf-hr-bd-cr,
183
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr));
184
+
185
+ border-style: var(--_sf-hr-br-se,
186
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se));
187
+
188
+ border-width: var(--_sf-hr-br-wh,
189
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh));
190
+ border-radius: var(--_sf-hr-br-rs,
191
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs));
192
+
193
+ box-shadow: var(--_sf-hr-sw-ae,
194
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
272
195
 
273
196
  cursor: pointer;
274
197
  overflow: hidden;
198
+
275
199
  .product-select-image {
276
200
  object-fit: cover;
277
201
  width: 100%;
278
202
  height: 100%;
279
203
  }
204
+
280
205
  &[data-background-shape="circle"] {
281
206
  border-radius: 50%;
282
207
  }
208
+
283
209
  &[data-background-shape="square"] {
284
210
  border-radius: 5px;
285
211
  }
212
+
286
213
  &[data-background-shape="capsule"] {
287
214
  --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
288
215
  --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
@@ -290,17 +217,23 @@ $minWidth: 70px;
290
217
  width: var(--toggle-width);
291
218
  height: var(--toggle-height);
292
219
 
293
- border-radius: var(--toggle-height); /* Full pill shape */
220
+ border-radius: var(--toggle-height);
221
+ /* Full pill shape */
294
222
  box-sizing: border-box;
295
223
  }
224
+
296
225
  &[data-swatch-shape="circle"] {
226
+
297
227
  & div,
298
228
  .product-select-image {
299
229
  border-radius: 50%;
300
230
  }
231
+
301
232
  // border-radius: 50%;
302
233
  }
234
+
303
235
  &[data-swatch-shape="capsule"] {
236
+
304
237
  & div,
305
238
  .product-select-image {
306
239
  // border-radius: 50%;
@@ -308,41 +241,31 @@ $minWidth: 70px;
308
241
  height: 100%;
309
242
  border-radius: inherit;
310
243
  }
244
+
311
245
  // border-radius: 50%;
312
246
  }
313
247
 
314
248
  &[data-selected="true"] {
315
- border-color: var(
316
- --_sf-sd-br-cr,
317
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
318
- );
319
-
320
- background-color: var(
321
- --_sf-sd-bd-cr,
322
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
323
- );
324
- border-style: var(
325
- --_sf-sd-br-se,
326
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
327
- );
328
- border-width: var(
329
- --_sf-sd-br-wh,
330
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
331
- );
332
- box-shadow: var(
333
- --_sf-sd-sw-ae,
334
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
335
- )
336
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
337
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
338
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
249
+ border-color: var(--_sf-sd-br-cr,
250
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr));
251
+
252
+ background-color: var(--_sf-sd-bd-cr,
253
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr));
254
+ border-style: var(--_sf-sd-br-se,
255
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se));
256
+ border-width: var(--_sf-sd-br-wh,
257
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh));
258
+ box-shadow: var(--_sf-sd-sw-ae,
259
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
339
260
 
340
261
  &[data-background-shape-selected="circle"] {
341
262
  border-radius: 50%;
342
263
  }
264
+
343
265
  &[data-background-shape-selected="square"] {
344
266
  border-radius: 5px;
345
267
  }
268
+
346
269
  &[data-background-shape-selected="capsule"] {
347
270
  border-radius: 80%;
348
271
  // width: calc(
@@ -350,73 +273,64 @@ $minWidth: 70px;
350
273
  // 8px
351
274
  // );
352
275
  }
276
+
353
277
  &[data-swatch-shape-selected="circle"] {
278
+
354
279
  & div,
355
280
  .product-select-image {
356
281
  border-radius: 50%;
357
282
  }
358
283
  }
284
+
359
285
  &[data-swatch-shape-selected="capsule"] {
286
+
360
287
  & div,
361
288
  .product-select-image {
362
289
  border-radius: 50%;
363
290
  }
364
291
  }
292
+
365
293
  &[data-swatch-shape-selected="square"] {
294
+
366
295
  & div,
367
296
  .product-select-image {
368
297
  border-radius: 5px;
369
298
  }
370
299
  }
371
300
  }
301
+
372
302
  &:hover {
373
- --_sf-hr-bd-cr: var(
374
- --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
375
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
376
- );
377
- --_sf-hr-br-cr: var(
378
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
379
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
380
- );
381
- --_sf-hr-br-se: var(
382
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
383
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
384
- );
385
- --_sf-hr-br-wh: var(
386
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
387
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
388
- );
389
- --_sf-hr-br-bs: var(
390
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
391
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
392
- );
303
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
304
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr)));
305
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
306
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr)));
307
+ --_sf-hr-br-se: var(--_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
308
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se)));
309
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
310
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh)));
311
+ --_sf-hr-br-bs: var(--_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
312
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs)));
393
313
 
394
314
  // new
395
- --_sf-hr-sw-ae: var(
396
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
397
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
398
- );
399
- --_sf-hr-sw-br: var(
400
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
401
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
402
- );
403
- --_sf-hr-sw-hr: var(
404
- --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
405
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
406
- );
407
- --_sf-hr-sw-cr: var(
408
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
409
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
410
- );
315
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
316
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae)));
317
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-br,
318
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br)));
319
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
320
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr)));
321
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
322
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr)));
411
323
  }
412
324
 
413
325
  &:hover {
414
326
  &[data-background-shape-hover="circle"] {
415
327
  border-radius: 50%;
416
328
  }
329
+
417
330
  &[data-background-shape-hover="square"] {
418
331
  border-radius: 5px;
419
332
  }
333
+
420
334
  &[data-background-shape-hover="capsule"] {
421
335
  border-radius: 80%;
422
336
  // width: calc(
@@ -427,20 +341,27 @@ $minWidth: 70px;
427
341
  // 8px
428
342
  // );
429
343
  }
344
+
430
345
  &[data-swatch-shape-hover="circle"] {
346
+
431
347
  & div,
432
348
  .product-select-image {
433
349
  border-radius: 50%;
434
350
  }
351
+
435
352
  // border-radius: 50%;
436
353
  }
354
+
437
355
  &[data-swatch-shape-hover="capsule"] {
356
+
438
357
  & div,
439
358
  .product-select-image {
440
359
  border-radius: 50%;
441
360
  }
442
361
  }
362
+
443
363
  &[data-swatch-shape-hover="square"] {
364
+
444
365
  & div,
445
366
  .product-select-image {
446
367
  border-radius: 5px;
@@ -449,83 +370,52 @@ $minWidth: 70px;
449
370
  }
450
371
 
451
372
  &[data-selected="true"] {
452
- --_sf-sd-bd-cr: var(
453
- --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
454
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
455
- );
456
- --_sf-sd-br-cr: var(
457
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
458
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
459
- );
460
- --_sf-sd-br-se: var(
461
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
462
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
463
- );
464
- --_sf-sd-br-wh: var(
465
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
466
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
467
- );
468
- --_sf-sd-br-bs: var(
469
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
470
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
471
- );
373
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
374
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)));
375
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
376
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)));
377
+ --_sf-sd-br-se: var(--_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
378
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)));
379
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
380
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)));
381
+ --_sf-sd-br-bs: var(--_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
382
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)));
472
383
 
473
384
  // new
474
- --_sf-sd-sw-ae: var(
475
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
476
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
477
- );
478
- --_sf-sd-sw-br: var(
479
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
480
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
481
- );
482
- --_sf-sd-sw-sd: var(
483
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
484
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
485
- );
486
- --_sf-sd-sw-cr: var(
487
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
488
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
489
- );
490
-
491
- border-color: var(
492
- --_sf-sd-br-cr,
493
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
494
- );
495
-
496
- background-color: var(
497
- --_sf-sd-bd-cr,
498
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
499
- );
500
-
501
- border-style: var(
502
- --_sf-sd-br-se,
503
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
504
- );
505
-
506
- border-width: var(
507
- --_sf-sd-br-wh,
508
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
509
- );
510
- border-radius: var(
511
- --_sf-sd-br-rs,
512
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
513
- );
514
-
515
- box-shadow: var(
516
- --_sf-sd-sw-ae,
517
- prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
518
- )
519
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
520
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
521
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
385
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
386
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)));
387
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-br,
388
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)));
389
+ --_sf-sd-sw-sd: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
390
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)));
391
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
392
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)));
393
+
394
+ border-color: var(--_sf-sd-br-cr,
395
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr));
396
+
397
+ background-color: var(--_sf-sd-bd-cr,
398
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr));
399
+
400
+ border-style: var(--_sf-sd-br-se,
401
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se));
402
+
403
+ border-width: var(--_sf-sd-br-wh,
404
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh));
405
+ border-radius: var(--_sf-sd-br-rs,
406
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs));
407
+
408
+ box-shadow: var(--_sf-sd-sw-ae,
409
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
522
410
 
523
411
  &[data-background-shape-selected="circle"] {
524
412
  border-radius: 50%;
525
413
  }
414
+
526
415
  &[data-background-shape-selected="square"] {
527
416
  border-radius: 5px;
528
417
  }
418
+
529
419
  &[data-background-shape-selected="capsule"] {
530
420
  --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
531
421
  --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
@@ -533,17 +423,22 @@ $minWidth: 70px;
533
423
  width: var(--toggle-width);
534
424
  height: var(--toggle-height);
535
425
 
536
- border-radius: var(--toggle-height); /* Full pill shape */
426
+ border-radius: var(--toggle-height);
427
+ /* Full pill shape */
537
428
  box-sizing: border-box;
538
429
  // border-radius: 80%;
539
430
  }
431
+
540
432
  &[data-swatch-shape-selected="circle"] {
433
+
541
434
  & div,
542
435
  .product-select-image {
543
436
  border-radius: 50%;
544
437
  }
545
438
  }
439
+
546
440
  &[data-swatch-shape-selected="capsule"] {
441
+
547
442
  & div,
548
443
  .product-select-image {
549
444
  // border-radius: 50%;
@@ -552,7 +447,9 @@ $minWidth: 70px;
552
447
  border-radius: inherit;
553
448
  }
554
449
  }
450
+
555
451
  &[data-swatch-shape-selected="square"] {
452
+
556
453
  & div,
557
454
  .product-select-image {
558
455
  border-radius: 5px;
@@ -613,6 +510,7 @@ $minWidth: 70px;
613
510
  clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
614
511
  pointer-events: none;
615
512
  }
513
+
616
514
  .product-select-image {
617
515
  width: 100%;
618
516
  height: 100%;
@@ -621,16 +519,15 @@ $minWidth: 70px;
621
519
  }
622
520
  }
623
521
  }
522
+
624
523
  // Select Fit and Size
625
524
  .select__fit {
626
525
  font-size: 16px;
627
526
  color: var(--_gray-500);
628
527
  display: flex;
629
528
  flex-direction: column;
630
- gap: var(
631
- --_ctm-mob-lt-on-te-ve-sg,
632
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
633
- );
529
+ gap: var(--_ctm-mob-lt-on-te-ve-sg,
530
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
634
531
 
635
532
  // padding: var(
636
533
  // --_ctm-mob-lt-se-st-dy-se-im-pg,
@@ -643,107 +540,72 @@ $minWidth: 70px;
643
540
  flex-wrap: wrap;
644
541
  margin-bottom: 10px;
645
542
  flex-direction: row;
646
- gap: var(
647
- --_ctm-mob-lt-se-st-dy-se-im-sg,
648
- var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
649
- );
543
+ gap: var(--_ctm-mob-lt-se-st-dy-se-im-sg,
544
+ var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg)));
650
545
 
651
546
  &[data-single-dispaly="Vertically"] {
652
547
  flex-direction: column;
653
548
  }
549
+
654
550
  &[data-single-overflow="Scroll"] {
655
551
  overflow-x: auto;
656
552
  overflow-y: hidden;
657
553
  flex-wrap: nowrap;
658
554
  }
555
+
659
556
  &[data-swatch-overflow="Scroll"] {
660
557
  overflow-x: auto;
661
558
  flex-wrap: nowrap;
662
559
  overflow-y: hidden;
663
560
  }
561
+
664
562
  .show_more_button {
665
- background-color: var(
666
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
667
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
668
- );
669
- font-family: var(
670
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
671
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
672
- );
673
- border-color: var(
674
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
675
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
676
- );
677
- border-radius: var(
678
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
679
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
680
- );
681
- border-style: var(
682
- --_ctm-mob-dn-sw-me-is-bn-br-se,
683
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
684
- );
685
- border-width: var(
686
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
687
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
688
- );
689
- font-size: var(
690
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
691
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
692
- );
693
- font-style: var(
694
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
695
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
696
- );
697
- font-weight: var(
698
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
699
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
700
- );
701
- line-height: var(
702
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
703
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
704
- );
705
- letter-spacing: var(
706
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
707
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
708
- );
709
- box-shadow: var(
710
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
711
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
712
- )
713
- var(
714
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
715
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
716
- )
717
- var(
718
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
719
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
720
- )
721
- var(
722
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
723
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
724
- );
725
- text-align: var(
726
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
727
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
728
- );
729
- color: var(
730
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
731
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
732
- );
733
- text-decoration: var(
734
- --_ctm-mob-dn-sw-me-is-bn-ue,
735
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
736
- );
563
+ background-color: var(--_ctm-mob-dn-sw-me-is-bn-bd-cr,
564
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)));
565
+ font-family: var(--_ctm-mob-dn-sw-me-is-bn-ft-fy,
566
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)));
567
+ text-transform: var(--_ctm-mob-dn-sw-me-is-bn-tt-tm,
568
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)));
569
+ word-wrap: var(--_ctm-mob-dn-sw-me-is-bn-wd-wp,
570
+ var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)));
571
+ word-break: var(--_ctm-mob-dn-sw-me-is-bn-wd-bk,
572
+ var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)));
573
+ border-color: var(--_ctm-mob-dn-sw-me-is-bn-br-cr,
574
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)));
575
+ border-radius: var(--_ctm-mob-dn-sw-me-is-bn-br-rs,
576
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)));
577
+ border-style: var(--_ctm-mob-dn-sw-me-is-bn-br-se,
578
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)));
579
+ border-width: var(--_ctm-mob-dn-sw-me-is-bn-br-wh,
580
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)));
581
+ font-size: var(--_ctm-mob-dn-sw-me-is-bn-ft-se,
582
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)));
583
+ font-style: var(--_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
584
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic)));
585
+ font-weight: var(--_ctm-mob-dn-sw-me-is-bn-ft-wt,
586
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)));
587
+ line-height: var(--_ctm-mob-dn-sw-me-is-bn-le-ht,
588
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht)));
589
+ letter-spacing: var(--_ctm-mob-dn-sw-me-is-bn-lr-sg,
590
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)));
591
+ box-shadow: var(--_ctm-mob-dn-sw-me-is-bn-sw-ae,
592
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))) var(--_ctm-mob-dn-sw-me-is-bn-sw-br,
593
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))) var(--_ctm-mob-dn-sw-me-is-bn-sw-sd,
594
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))) var(--_ctm-mob-dn-sw-me-is-bn-sw-cr,
595
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)));
596
+ text-align: var(--_ctm-mob-dn-sw-me-is-bn-tt-an,
597
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)));
598
+ color: var(--_ctm-mob-dn-sw-me-is-bn-tt-cr,
599
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)));
600
+ text-decoration: var(--_ctm-mob-dn-sw-me-is-bn-ue,
601
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)));
737
602
  }
603
+
738
604
  &[data-single-dispaly="Grid"] {
739
605
  display: grid;
740
- grid-template-columns: repeat(
741
- var(
742
- --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
743
- var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
744
- ),
745
- minmax(auto, 1fr)
746
- );
606
+ grid-template-columns: repeat(var(--_ctm-mob-lt-se-st-dy-se-is-pr-rw,
607
+ var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))),
608
+ minmax(auto, 1fr));
747
609
  }
748
610
 
749
611
  .select__group__item {
@@ -761,166 +623,118 @@ $minWidth: 70px;
761
623
  min-width: 20px;
762
624
  min-height: 20px;
763
625
  box-sizing: content-box;
764
- border-radius: var(
765
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
766
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
767
- );
768
-
769
- border-color: var(
770
- --_sf-hr-br-cr,
771
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
772
- );
773
-
774
- background-color: var(
775
- --_sf-hr-bd-cr,
776
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
777
- );
778
- border-style: var(
779
- --_sf-hr-br-se,
780
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
781
- );
782
- border-width: var(
783
- --_sf-hr-br-wh,
784
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
785
- );
786
-
787
- box-shadow: var(
788
- --_sf-hr-sw-ae,
789
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
790
- )
791
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
792
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
793
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
626
+ border-radius: var(--_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
627
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs)));
628
+
629
+ border-color: var(--_sf-hr-br-cr,
630
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr));
631
+
632
+ background-color: var(--_sf-hr-bd-cr,
633
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr));
634
+ border-style: var(--_sf-hr-br-se,
635
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se));
636
+ border-width: var(--_sf-hr-br-wh,
637
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh));
638
+
639
+ box-shadow: var(--_sf-hr-sw-ae,
640
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
794
641
 
795
642
  // font is pending
796
643
 
797
644
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
798
- font-family: var(
799
- --_sf-hr-ft-fy,
800
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
801
- );
802
- font-size: var(
803
- --_sf-hr-ft-se,
804
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
805
- );
806
- font-weight: var(
807
- --_sf-hr-ft-wt,
808
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
809
- );
810
- font-style: var(
811
- --_sf-hr-ft-se-ic,
812
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
813
- );
814
- text-align: var(
815
- --_sf-hr-tt-an,
816
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
817
- );
818
- letter-spacing: var(
819
- --_sf-hr-lr-sg,
820
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
821
- );
822
- line-height: var(
823
- --_sf-hr-le-ht,
824
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
825
- );
826
- text-decoration: var(
827
- --_sf-hr-ue,
828
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
829
- );
645
+ font-family: var(--_sf-hr-ft-fy,
646
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy));
647
+ text-transform: var(--_sf-hr-tt-tm,
648
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-tm));
649
+ word-wrap: var(--_sf-hr-wd-wp,
650
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-wp));
651
+ word-break: var(--_sf-hr-wd-bk,
652
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-bk));
653
+
654
+ &.flex__overflow {
655
+ white-space: normal;
656
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
657
+ }
658
+
659
+ font-size: var(--_sf-hr-ft-se,
660
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se));
661
+ font-weight: var(--_sf-hr-ft-wt,
662
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt));
663
+ font-style: var(--_sf-hr-ft-se-ic,
664
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic));
665
+ text-align: var(--_sf-hr-tt-an,
666
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an));
667
+ letter-spacing: var(--_sf-hr-lr-sg,
668
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg));
669
+ line-height: var(--_sf-hr-le-ht,
670
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc));
671
+ text-decoration: var(--_sf-hr-ue,
672
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue));
830
673
 
831
674
  &[data-background-shape="circle"] {
832
675
  border-radius: 50%;
833
676
  }
677
+
834
678
  &[data-background-shape="square"] {
835
679
  border-radius: 5px;
836
680
  }
681
+
837
682
  &[data-background-shape="capsule"] {
838
- border-radius: 40px; /* Full pill shape */
683
+ border-radius: 40px;
684
+ /* Full pill shape */
839
685
  box-sizing: border-box;
840
686
  }
841
687
 
842
688
  &:hover {
843
- --_sf-hr-bd-cr: var(
844
- --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
845
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
846
- );
847
- --_sf-hr-br-cr: var(
848
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
849
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
850
- );
851
- --_sf-hr-br-se: var(
852
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
853
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
854
- );
855
- --_sf-hr-br-wh: var(
856
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
857
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
858
- );
859
- --_sf-hr-br-bs: var(
860
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
861
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
862
- );
689
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
690
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr)));
691
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
692
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr)));
693
+ --_sf-hr-br-se: var(--_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
694
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se)));
695
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
696
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh)));
697
+ --_sf-hr-br-bs: var(--_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
698
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs)));
863
699
 
864
700
  // new
865
- --_sf-hr-sw-ae: var(
866
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
867
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
868
- );
869
- --_sf-hr-sw-br: var(
870
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
871
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
872
- );
873
- --_sf-hr-sw-hr: var(
874
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
875
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
876
- );
877
- --_sf-hr-sw-cr: var(
878
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
879
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
880
- );
701
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
702
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae)));
703
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
704
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br)));
705
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
706
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr)));
707
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
708
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr)));
881
709
 
882
710
  // for font
883
711
 
884
- --_sf-hr-cr: var(
885
- --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
886
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
887
- );
888
- --_sf-hr-ft-fy: var(
889
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
890
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
891
- );
892
- --_sf-hr-ft-se: var(
893
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
894
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
895
- );
896
- --_sf-hr-ft-wt: var(
897
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
898
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
899
- );
900
- --_sf-hr-ft-se-ic: var(
901
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
902
- var(
903
- --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
904
- var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
905
- )
906
- );
907
- --_sf-hr-tt-an: var(
908
- --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
909
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
910
- );
911
- --_sf-hr-lr-sg: var(
912
- --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
913
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
914
- );
915
- --_sf-hr-le-ht: var(
916
- --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
917
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
918
- );
919
-
920
- --_sf-hr-ue: var(
921
- --_ctm-mob-dn-on-ve-se-hr-se-ue,
922
- var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
923
- );
712
+ --_sf-hr-cr: var(--_ctm-mob-dn-se-on-ve-se-hr-se-cr,
713
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr)));
714
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
715
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy)));
716
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-se-on-ve-se-hr-se-tt-tm,
717
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-se-on-ve-se-hr-se-tt-tm)));
718
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-se-on-ve-se-hr-se-wd-wp,
719
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-se-on-ve-se-hr-se-wd-wp)));
720
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-se-on-ve-se-hr-se-wd-bk,
721
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-se-on-ve-se-hr-se-wd-bk)));
722
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
723
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se)));
724
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
725
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt)));
726
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
727
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
728
+ var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)));
729
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
730
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an)));
731
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
732
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg)));
733
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
734
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht)));
735
+
736
+ --_sf-hr-ue: var(--_ctm-mob-dn-on-ve-se-hr-se-ue,
737
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue)));
924
738
  }
925
739
 
926
740
  &.child {
@@ -928,155 +742,102 @@ $minWidth: 70px;
928
742
  border-radius: 0;
929
743
  border-bottom: 2px solid var(--_gray-200);
930
744
  }
745
+
931
746
  &[data-selected="true"] {
932
- --_sf-sd-bd-cr: var(
933
- --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
934
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
935
- );
936
- --_sf-sd-br-cr: var(
937
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
938
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
939
- );
940
- --_sf-sd-br-se: var(
941
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
942
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
943
- );
944
- --_sf-sd-br-wh: var(
945
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
946
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
947
- );
948
- --_sf-sd-br-bs: var(
949
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
950
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
951
- );
747
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
748
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr)));
749
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
750
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr)));
751
+ --_sf-sd-br-se: var(--_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
752
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se)));
753
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
754
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh)));
755
+ --_sf-sd-br-bs: var(--_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
756
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs)));
952
757
 
953
758
  // new
954
- --_sf-sd-sw-ae: var(
955
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
956
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
957
- );
958
- --_sf-sd-sw-br: var(
959
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
960
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
961
- );
962
- --_sf-sd-sw-hr: var(
963
- --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
964
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
965
- );
966
- --_sf-sd-sw-cr: var(
967
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
968
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
969
- );
759
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
760
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae)));
761
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-br,
762
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br)));
763
+ --_sf-sd-sw-hr: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
764
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr)));
765
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
766
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr)));
970
767
 
971
768
  // for font
972
769
 
973
- --_sf-sd-cr: var(
974
- --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
975
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
976
- );
977
- --_sf-sd-ft-fy: var(
978
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
979
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
980
- );
981
- --_sf-sd-ft-se: var(
982
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
983
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
984
- );
985
- --_sf-sd-ft-wt: var(
986
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
987
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
988
- );
989
- --_sf-sd-ft-se-ic: var(
990
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
991
- var(
992
- --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
993
- var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
994
- )
995
- );
996
- --_sf-sd-tt-an: var(
997
- --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
998
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
999
- );
1000
- --_sf-sd-lr-sg: var(
1001
- --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
1002
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
1003
- );
1004
- --_sf-sd-le-ht: var(
1005
- --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
1006
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
1007
- );
1008
-
1009
- --_sf-sd-ue: var(
1010
- --_ctm-mob-dn-on-ve-se-sd-se-ue,
1011
- var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
1012
- );
1013
-
1014
- border-color: var(
1015
- --_sf-sd-br-cr,
1016
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
1017
- );
1018
-
1019
- background-color: var(
1020
- --_sf-sd-bd-cr,
1021
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
1022
- );
1023
- border-style: var(
1024
- --_sf-sd-br-se,
1025
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
1026
- );
1027
- border-width: var(
1028
- --_sf-sd-br-wh,
1029
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
1030
- );
1031
-
1032
- box-shadow: var(
1033
- --_sf-sd-sw-ae,
1034
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
1035
- )
1036
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
1037
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
1038
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
770
+ --_sf-sd-cr: var(--_ctm-mob-dn-se-on-ve-se-sd-se-cr,
771
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr)));
772
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
773
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy)));
774
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-se-on-ve-se-sd-se-tt-tm,
775
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-se-on-ve-se-sd-se-tt-tm)));
776
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-se-on-ve-se-sd-se-wd-wp,
777
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-se-on-ve-se-sd-se-wd-wp)));
778
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-se-on-ve-se-sd-se-wd-bk,
779
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-se-on-ve-se-sd-se-wd-bk)));
780
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
781
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se)));
782
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
783
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt)));
784
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
785
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
786
+ var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)));
787
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
788
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an)));
789
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
790
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg)));
791
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
792
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht)));
793
+
794
+ --_sf-sd-ue: var(--_ctm-mob-dn-on-ve-se-sd-se-ue,
795
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue)));
796
+
797
+ border-color: var(--_sf-sd-br-cr,
798
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr));
799
+
800
+ background-color: var(--_sf-sd-bd-cr,
801
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr));
802
+ border-style: var(--_sf-sd-br-se,
803
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se));
804
+ border-width: var(--_sf-sd-br-wh,
805
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh));
806
+
807
+ box-shadow: var(--_sf-sd-sw-ae,
808
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
1039
809
  // font is pending
1040
810
 
1041
811
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
1042
- font-family: var(
1043
- --_sf-sd-ft-fy,
1044
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
1045
- );
1046
- font-size: var(
1047
- --_sf-sd-ft-se,
1048
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1049
- );
1050
- font-weight: var(
1051
- --_sf-sd-ft-wt,
1052
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1053
- );
1054
- font-style: var(
1055
- --_sf-sd-ft-se-ic,
1056
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1057
- );
1058
- text-align: var(
1059
- --_sf-sd-tt-an,
1060
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1061
- );
1062
- letter-spacing: var(
1063
- --_sf-sd-lr-sg,
1064
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1065
- );
1066
- line-height: var(
1067
- --_sf-sd-le-ht,
1068
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1069
- );
1070
- text-decoration: var(
1071
- --_sf-sd-ue,
1072
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1073
- );
812
+ font-family: var(--_sf-sd-ft-fy,
813
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy));
814
+ text-transform: var(--_sf-sd-tt-tm,
815
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-tm));
816
+ word-wrap: var(--_sf-sd-wd-wp,
817
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-wp));
818
+ word-break: var(--_sf-sd-wd-bk,
819
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-wd-bk));
820
+ font-size: var(--_sf-sd-ft-se,
821
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se));
822
+ font-weight: var(--_sf-sd-ft-wt,
823
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt));
824
+ font-style: var(--_sf-sd-ft-se-ic,
825
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic));
826
+ text-align: var(--_sf-sd-tt-an,
827
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an));
828
+ letter-spacing: var(--_sf-sd-lr-sg,
829
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg));
830
+ line-height: var(--_sf-sd-le-ht,
831
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc));
832
+ text-decoration: var(--_sf-sd-ue,
833
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue));
1074
834
  }
1075
835
 
1076
836
  &.selected__child {
1077
837
  border: 0px;
1078
838
  border-bottom: 2px solid var(--_primary-400);
1079
839
  }
840
+
1080
841
  // &.disabled {
1081
842
  // cursor: not-allowed;
1082
843
  // opacity: 0.4;
@@ -1129,6 +890,7 @@ $minWidth: 70px;
1129
890
  }
1130
891
  }
1131
892
  }
893
+
1132
894
  &[data-show-divider="true"] {
1133
895
  &:not(:last-child)::after {
1134
896
  content: "";
@@ -1137,52 +899,38 @@ $minWidth: 70px;
1137
899
  height: 1px;
1138
900
  width: 100%;
1139
901
  display: flex;
1140
- top: calc(
1141
- calc(
1142
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1143
- ) /
1144
- 2
1145
- );
902
+ top: calc(calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) / 2);
1146
903
  }
1147
904
  }
1148
905
 
1149
906
  .title {
1150
907
  margin-bottom: 4px;
1151
908
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1152
- font-family: var(
1153
- --_ctm-mob-dn-on-te-ft-fy,
1154
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1155
- );
1156
- font-size: var(
1157
- --_ctm-mob-dn-on-te-ft-se,
1158
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1159
- );
1160
- font-weight: var(
1161
- --_ctm-mob-dn-on-te-ft-wt,
1162
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1163
- );
1164
- font-style: var(
1165
- --_ctm-mob-dn-on-te-ft-se-ic,
1166
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1167
- );
1168
- text-align: var(
1169
- --_ctm-mob-dn-on-te-tt-an,
1170
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1171
- );
1172
- letter-spacing: var(
1173
- --_ctm-mob-dn-on-te-lr-sg,
1174
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1175
- );
1176
- line-height: var(
1177
- --_ctm-mob-dn-on-te-le-ht,
1178
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1179
- );
1180
- text-decoration: var(
1181
- --_ctm-mob-dn-on-te-ue,
1182
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1183
- );
909
+ font-family: var(--_ctm-mob-dn-on-te-ft-fy,
910
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
911
+ text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
912
+ var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
913
+ word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
914
+ var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
915
+ word-break: var(--_ctm-mob-dn-on-te-wd-bk,
916
+ var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
917
+ font-size: var(--_ctm-mob-dn-on-te-ft-se,
918
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
919
+ font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
920
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
921
+ font-style: var(--_ctm-mob-dn-on-te-ft-se-ic,
922
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)));
923
+ text-align: var(--_ctm-mob-dn-on-te-tt-an,
924
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
925
+ letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
926
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
927
+ line-height: var(--_ctm-mob-dn-on-te-le-ht,
928
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
929
+ text-decoration: var(--_ctm-mob-dn-on-te-ue,
930
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
1184
931
  }
1185
932
  }
933
+
1186
934
  //Dropdown
1187
935
  //Dropdown
1188
936
  .language__conatiner {
@@ -1190,164 +938,107 @@ $minWidth: 70px;
1190
938
 
1191
939
  // Option hover state custom properties (no inherit fallback — must be guaranteed-invalid when unset)
1192
940
  .option:hover {
1193
- --_sf-hr-bd-cr: var(
1194
- --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
1195
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
1196
- );
1197
- --_sf-hr-br-cr: var(
1198
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
1199
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
1200
- );
1201
- --_sf-hr-br-se: var(
1202
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
1203
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
1204
- );
1205
- --_sf-hr-br-wh: var(
1206
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
1207
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
1208
- );
1209
- --_sf-hr-br-rs: var(
1210
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
1211
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
1212
- );
1213
- --_sf-hr-sw-ae: var(
1214
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
1215
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
1216
- );
1217
- --_sf-hr-sw-br: var(
1218
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
1219
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
1220
- );
1221
- --_sf-hr-sw-sd: var(
1222
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-sd,
1223
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-sd, var(--_ctm-dn-dn-se-im-se-hr-se-sw-sd))
1224
- );
1225
- --_sf-hr-sw-cr: var(
1226
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
1227
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
1228
- );
1229
- --_sf-hr-cr: var(
1230
- --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
1231
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
1232
- );
1233
- --_sf-hr-ft-fy: var(
1234
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
1235
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
1236
- );
1237
- --_sf-hr-ft-se: var(
1238
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
1239
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
1240
- );
1241
- --_sf-hr-ft-wt: var(
1242
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
1243
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
1244
- );
1245
- --_sf-hr-ft-se-ic: var(
1246
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
1247
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
1248
- );
1249
- --_sf-hr-tt-an: var(
1250
- --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
1251
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
1252
- );
1253
- --_sf-hr-lr-sg: var(
1254
- --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
1255
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
1256
- );
1257
- --_sf-hr-le-ht: var(
1258
- --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
1259
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
1260
- );
1261
- --_sf-hr-ue: var(
1262
- --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
1263
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
1264
- );
1265
- --_sf-hr-pg: var(
1266
- --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
1267
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
1268
- );
941
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
942
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr)));
943
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
944
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr)));
945
+ --_sf-hr-br-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
946
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se)));
947
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
948
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh)));
949
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
950
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs)));
951
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
952
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae)));
953
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
954
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br)));
955
+ --_sf-hr-sw-sd: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-sd,
956
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-sd, var(--_ctm-dn-dn-se-im-se-hr-se-sw-sd)));
957
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
958
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr)));
959
+ --_sf-hr-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-cr,
960
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr)));
961
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
962
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy)));
963
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm,
964
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm)));
965
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp,
966
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp)));
967
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk,
968
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk)));
969
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
970
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se)));
971
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
972
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt)));
973
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
974
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic,
975
+ var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic)));
976
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
977
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an)));
978
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
979
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg)));
980
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
981
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht)));
982
+ --_sf-hr-ue: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ue,
983
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue)));
984
+ --_sf-hr-pg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-pg,
985
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg)));
1269
986
  }
1270
987
 
1271
988
  // Option selected state custom properties (no inherit fallback — must be guaranteed-invalid when unset)
1272
989
  .option[data-selected="true"] {
1273
- --_sf-sd-bd-cr: var(
1274
- --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
1275
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
1276
- );
1277
- --_sf-sd-br-cr: var(
1278
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
1279
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
1280
- );
1281
- --_sf-sd-br-se: var(
1282
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
1283
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
1284
- );
1285
- --_sf-sd-br-wh: var(
1286
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
1287
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
1288
- );
1289
- --_sf-sd-sw-ae: var(
1290
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
1291
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
1292
- );
1293
- --_sf-sd-sw-br: var(
1294
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
1295
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
1296
- );
1297
- --_sf-sd-sw-sd: var(
1298
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
1299
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
1300
- );
1301
- --_sf-sd-sw-cr: var(
1302
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
1303
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
1304
- );
1305
- --_sf-sd-cr: var(
1306
- --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
1307
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
1308
- );
1309
- --_sf-sd-ft-fy: var(
1310
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
1311
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
1312
- );
1313
- --_sf-sd-ft-se: var(
1314
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
1315
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
1316
- );
1317
- --_sf-sd-ft-wt: var(
1318
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
1319
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
1320
- );
1321
- --_sf-sd-ft-se-ic: var(
1322
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
1323
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
1324
- );
1325
- --_sf-sd-tt-an: var(
1326
- --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
1327
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
1328
- );
1329
- --_sf-sd-lr-sg: var(
1330
- --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
1331
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
1332
- );
1333
- --_sf-sd-le-ht: var(
1334
- --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
1335
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
1336
- );
1337
- --_sf-sd-ue: var(
1338
- --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
1339
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
1340
- );
1341
- --_sf-sd-pg: var(
1342
- --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
1343
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
1344
- );
990
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
991
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr)));
992
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
993
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr)));
994
+ --_sf-sd-br-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
995
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se)));
996
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
997
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh)));
998
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
999
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae)));
1000
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
1001
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br)));
1002
+ --_sf-sd-sw-sd: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
1003
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd)));
1004
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
1005
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr)));
1006
+ --_sf-sd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-cr,
1007
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr)));
1008
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
1009
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy)));
1010
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm,
1011
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm)));
1012
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp,
1013
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp)));
1014
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk,
1015
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk)));
1016
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
1017
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se)));
1018
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
1019
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt)));
1020
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
1021
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic,
1022
+ var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic)));
1023
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
1024
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an)));
1025
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
1026
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg)));
1027
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
1028
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht)));
1029
+ --_sf-sd-ue: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ue,
1030
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue)));
1031
+ --_sf-sd-pg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-pg,
1032
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg)));
1345
1033
  }
1346
1034
 
1347
1035
  // Placeholder text
1348
1036
  .value__selected__new {
1349
1037
  width: 100%;
1350
1038
  font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
1039
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm);
1040
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp);
1041
+ word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk);
1351
1042
  font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
1352
1043
  color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
1353
1044
  font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-wt);
@@ -1396,14 +1087,20 @@ $minWidth: 70px;
1396
1087
  border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-rs);
1397
1088
 
1398
1089
  // Widget style — shadow
1399
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-ae)
1400
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-br)
1401
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-sd)
1402
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-cr);
1090
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-cr);
1403
1091
 
1404
1092
  // Widget style — font
1405
1093
  color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
1406
1094
  font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
1095
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm);
1096
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp);
1097
+ word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk);
1098
+
1099
+ &.flex__overflow {
1100
+ white-space: normal;
1101
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1102
+ }
1103
+
1407
1104
  font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
1408
1105
  font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
1409
1106
  font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic);
@@ -1424,14 +1121,18 @@ $minWidth: 70px;
1424
1121
  .est__dropdown__icon {
1425
1122
  transition: transform 0.4s ease-in-out;
1426
1123
  display: flex;
1124
+
1427
1125
  &.rotate__180 {
1428
1126
  transform: rotate(180deg);
1429
1127
  }
1128
+
1430
1129
  &.rotate__0 {
1431
1130
  transform: rotate(0deg);
1432
1131
  }
1132
+
1433
1133
  width: 16px;
1434
1134
  height: 16px;
1135
+
1435
1136
  svg {
1436
1137
  width: 100%;
1437
1138
  height: 100%;
@@ -1456,10 +1157,7 @@ $minWidth: 70px;
1456
1157
  border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
1457
1158
  padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-pg);
1458
1159
  gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
1459
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
1460
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
1461
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
1462
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
1160
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
1463
1161
 
1464
1162
  &.top {
1465
1163
  bottom: 100%;
@@ -1492,91 +1190,53 @@ $minWidth: 70px;
1492
1190
  box-sizing: border-box;
1493
1191
 
1494
1192
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
1495
- border-color: var(
1496
- --_sf-hr-br-cr,
1497
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
1498
- );
1499
- background-color: var(
1500
- --_sf-hr-bd-cr,
1501
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
1502
- );
1503
- border-style: var(
1504
- --_sf-hr-br-se,
1505
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
1506
- );
1507
- border-radius: var(
1508
- --_sf-hr-br-rs,
1509
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
1510
- );
1511
- border-width: var(
1512
- --_sf-hr-br-wh,
1513
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
1514
- );
1515
-
1516
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
1517
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
1518
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
1519
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
1193
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
1194
+ background-color: var(--_sf-hr-bd-cr,
1195
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
1196
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
1197
+ border-radius: var(--_sf-hr-br-rs,
1198
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
1199
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
1200
+
1201
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
1520
1202
 
1521
1203
  &[data-selected="true"] {
1522
- border-color: var(
1523
- --_sf-sd-br-cr,
1524
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
1525
- );
1526
- background-color: var(
1527
- --_sf-sd-bd-cr,
1528
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
1529
- );
1530
- border-style: var(
1531
- --_sf-sd-br-se,
1532
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
1533
- );
1534
- border-width: var(
1535
- --_sf-sd-br-wh,
1536
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
1537
- );
1538
- border-radius: var(
1539
- --_sf-sd-br-rs,
1540
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
1541
- );
1542
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
1543
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
1544
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
1545
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
1204
+ border-color: var(--_sf-sd-br-cr,
1205
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
1206
+ background-color: var(--_sf-sd-bd-cr,
1207
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
1208
+ border-style: var(--_sf-sd-br-se,
1209
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
1210
+ border-width: var(--_sf-sd-br-wh,
1211
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
1212
+ border-radius: var(--_sf-sd-br-rs,
1213
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
1214
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
1215
+
1546
1216
  .language__name {
1547
1217
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
1548
- font-family: var(
1549
- --_sf-sd-ft-fy,
1550
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
1551
- );
1552
- font-size: var(
1553
- --_sf-sd-ft-se,
1554
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se)
1555
- );
1556
- font-weight: var(
1557
- --_sf-sd-ft-wt,
1558
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
1559
- );
1560
- font-style: var(
1561
- --_sf-sd-ft-se-ic,
1562
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
1563
- );
1564
- text-align: var(
1565
- --_sf-sd-tt-an,
1566
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
1567
- );
1568
- letter-spacing: var(
1569
- --_sf-sd-lr-sg,
1570
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
1571
- );
1572
- line-height: var(
1573
- --_sf-sd-le-ht,
1574
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht)
1575
- );
1576
- text-decoration: var(
1577
- --_sf-sd-ue,
1578
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue)
1579
- );
1218
+ font-family: var(--_sf-sd-ft-fy,
1219
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
1220
+ text-transform: var(--_sf-sd-tt-tm,
1221
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
1222
+ word-wrap: var(--_sf-sd-wd-wp,
1223
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
1224
+ word-break: var(--_sf-sd-wd-bk,
1225
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
1226
+ font-size: var(--_sf-sd-ft-se,
1227
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
1228
+ font-weight: var(--_sf-sd-ft-wt,
1229
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt));
1230
+ font-style: var(--_sf-sd-ft-se-ic,
1231
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
1232
+ text-align: var(--_sf-sd-tt-an,
1233
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
1234
+ letter-spacing: var(--_sf-sd-lr-sg,
1235
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
1236
+ line-height: var(--_sf-sd-le-ht,
1237
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
1238
+ text-decoration: var(--_sf-sd-ue,
1239
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
1580
1240
  @include restrictToLinesShow(1);
1581
1241
  }
1582
1242
  }
@@ -1587,8 +1247,10 @@ $minWidth: 70px;
1587
1247
  display: flex;
1588
1248
  align-items: center;
1589
1249
  position: relative;
1250
+
1590
1251
  .language__name {
1591
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
1252
+ color: var(--_sf-hr-cr,
1253
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
1592
1254
  @include restrictToLinesShow(1);
1593
1255
  }
1594
1256
  }
@@ -1596,18 +1258,18 @@ $minWidth: 70px;
1596
1258
  .language__name {
1597
1259
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
1598
1260
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
1261
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
1262
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
1263
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
1599
1264
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
1600
1265
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt));
1601
- font-style: var(
1602
- --_sf-hr-ft-se-ic,
1603
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
1604
- );
1266
+ font-style: var(--_sf-hr-ft-se-ic,
1267
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
1605
1268
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
1606
- letter-spacing: var(
1607
- --_sf-hr-lr-sg,
1608
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
1609
- );
1610
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
1269
+ letter-spacing: var(--_sf-hr-lr-sg,
1270
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
1271
+ line-height: var(--_sf-hr-le-ht,
1272
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
1611
1273
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
1612
1274
  white-space: nowrap;
1613
1275
  @include restrictToLinesShow(1);
@@ -1618,22 +1280,21 @@ $minWidth: 70px;
1618
1280
  .var__drop__selection {
1619
1281
  display: flex;
1620
1282
  width: 100%;
1621
- gap: var(
1622
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1623
- var(
1624
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1625
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
1626
- )
1627
- );
1283
+ gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1284
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1285
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))));
1628
1286
 
1629
1287
  flex-direction: row;
1630
1288
  flex-wrap: wrap;
1289
+
1631
1290
  &[data-dropdown-style="Vertical List"] {
1632
1291
  flex-direction: column;
1633
1292
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1634
1293
  }
1294
+
1635
1295
  .dropdown_wrapper {
1636
1296
  position: relative;
1297
+
1637
1298
  &[data-show-divider="true"] {
1638
1299
  &:not(:last-child)::after {
1639
1300
  content: "";
@@ -1642,12 +1303,7 @@ $minWidth: 70px;
1642
1303
  height: 1px;
1643
1304
  width: 100%;
1644
1305
  display: flex;
1645
- top: calc(
1646
- calc(
1647
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1648
- ) /
1649
- 2
1650
- );
1306
+ top: calc(calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) / 2);
1651
1307
  }
1652
1308
  }
1653
1309
 
@@ -1663,16 +1319,9 @@ $minWidth: 70px;
1663
1319
  height: 1px;
1664
1320
  width: 100%;
1665
1321
  display: flex;
1666
- top: calc(
1667
- var(
1668
- --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1669
- var(
1670
- --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1671
- var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1672
- )
1673
- ) /
1674
- 2
1675
- );
1322
+ top: calc(var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1323
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1324
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))) / 2);
1676
1325
  }
1677
1326
  }
1678
1327
  }
@@ -1680,27 +1329,22 @@ $minWidth: 70px;
1680
1329
  }
1681
1330
  }
1682
1331
  }
1332
+
1683
1333
  }
1334
+
1684
1335
  // Quantity Fields
1685
1336
  .field__group {
1686
1337
  // display: flex;
1687
1338
  // flex-wrap: wrap;
1688
1339
  // gap: 8px;
1689
1340
  display: grid;
1690
- grid-template-columns: repeat(
1691
- auto-fit,
1692
- minmax(
1693
- var(
1694
- --_ctm-mob-var-lt-mn-cn-wh,
1695
- var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
1696
- ),
1697
- var(--_ctm-mob-var-lt-mn-cn-wh)
1698
- )
1699
- );
1700
- gap: var(
1701
- --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1702
- var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg))
1703
- );
1341
+ grid-template-columns: repeat(auto-fit,
1342
+ minmax(var(--_ctm-mob-var-lt-mn-cn-wh,
1343
+ var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))),
1344
+ var(--_ctm-mob-var-lt-mn-cn-wh)));
1345
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1346
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg)));
1347
+
1704
1348
  .field__group__item {
1705
1349
  font-size: 16px;
1706
1350
  display: flex;
@@ -1708,6 +1352,7 @@ $minWidth: 70px;
1708
1352
  align-items: center;
1709
1353
  justify-content: center;
1710
1354
  gap: 8px;
1355
+
1711
1356
  input[type="number"] {
1712
1357
  // width: 70px !important;
1713
1358
  width: 100%;
@@ -1716,10 +1361,12 @@ $minWidth: 70px;
1716
1361
  border-radius: 4px;
1717
1362
  text-align: center;
1718
1363
  height: 40px;
1364
+
1719
1365
  &:focus-within {
1720
1366
  border: 1px solid var(--_primary-200);
1721
1367
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1722
1368
  }
1369
+
1723
1370
  &:disabled {
1724
1371
  cursor: not-allowed;
1725
1372
  opacity: 0.4;
@@ -1727,18 +1374,15 @@ $minWidth: 70px;
1727
1374
  }
1728
1375
  }
1729
1376
  }
1377
+
1730
1378
  // Enter quantity styles
1731
1379
  .quantiy__details {
1732
1380
  display: flex;
1733
1381
  flex-direction: column;
1734
- gap: var(
1735
- --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1736
- var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1737
- );
1738
- padding: var(
1739
- --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1740
- var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1741
- );
1382
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-gp-sg,
1383
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg)));
1384
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-gp-pg,
1385
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg)));
1742
1386
 
1743
1387
  .title {
1744
1388
  display: flex;
@@ -1746,35 +1390,36 @@ $minWidth: 70px;
1746
1390
  align-items: center;
1747
1391
  font-weight: 600;
1748
1392
  font-size: 18px;
1749
- & > button {
1393
+
1394
+ &>button {
1750
1395
  border-bottom: 1px solid var(--_gray-400);
1751
1396
  color: var(--_gray-600);
1752
1397
  font-size: 14px;
1753
1398
  }
1754
1399
  }
1400
+
1755
1401
  .fit__details {
1756
1402
  display: flex;
1757
1403
  flex-direction: column;
1758
1404
  gap: 12px;
1405
+
1759
1406
  .fit__desc {
1760
1407
  display: flex;
1761
1408
  flex-direction: column;
1762
- gap: var(
1763
- --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1764
- var(
1765
- --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1766
- var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1767
- )
1768
- );
1409
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1410
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1411
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)));
1769
1412
 
1770
1413
  font-size: 16px;
1771
1414
  color: var(--_gray-900);
1415
+
1772
1416
  .each__price {
1773
1417
  font-weight: 600;
1774
1418
  }
1775
1419
  }
1776
1420
  }
1777
1421
  }
1422
+
1778
1423
  .grouped_items {
1779
1424
  display: flex;
1780
1425
  flex-direction: column;
@@ -1791,35 +1436,25 @@ $minWidth: 70px;
1791
1436
 
1792
1437
  .tab {
1793
1438
  &:first-child {
1794
- margin-bottom: var(
1795
- --_ctm-mob-lt-on-te-ve-sg,
1796
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
1797
- );
1439
+ margin-bottom: var(--_ctm-mob-lt-on-te-ve-sg,
1440
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
1798
1441
  }
1799
1442
  }
1800
1443
 
1801
1444
  .tab__content {
1802
1445
  display: flex;
1803
1446
  flex-direction: column;
1804
- padding: var(
1805
- --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1806
- var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1807
- );
1447
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-gp-pg,
1448
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg)));
1808
1449
 
1809
1450
  .field__group {
1810
- gap: var(
1811
- --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1812
- var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1813
- );
1451
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-gp-sg,
1452
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg)));
1814
1453
 
1815
1454
  .field__group__item {
1816
- gap: var(
1817
- --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1818
- var(
1819
- --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1820
- var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1821
- )
1822
- );
1455
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1456
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1457
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)));
1823
1458
  }
1824
1459
  }
1825
1460
  }
@@ -1827,7 +1462,7 @@ $minWidth: 70px;
1827
1462
  }
1828
1463
 
1829
1464
  &[data-show-divider="true"] {
1830
- & > div {
1465
+ &>div {
1831
1466
  &:not(:last-child)::after {
1832
1467
  content: "";
1833
1468
  position: relative;
@@ -1835,9 +1470,7 @@ $minWidth: 70px;
1835
1470
  height: 1px;
1836
1471
  width: 100%;
1837
1472
  display: flex;
1838
- top: calc(
1839
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1840
- );
1473
+ top: calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2);
1841
1474
  }
1842
1475
  }
1843
1476
 
@@ -1849,17 +1482,17 @@ $minWidth: 70px;
1849
1482
  height: 1px;
1850
1483
  width: 100%;
1851
1484
  display: flex;
1852
- top: calc(
1853
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1854
- );
1485
+ top: calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2);
1855
1486
  }
1856
1487
  }
1857
1488
  }
1858
1489
  }
1490
+
1859
1491
  // tabs
1860
1492
  .tabs__container {
1861
1493
  display: flex;
1862
1494
  position: relative;
1495
+
1863
1496
  .tab {
1864
1497
  flex: 1;
1865
1498
  padding-block: 20px;
@@ -1867,10 +1500,12 @@ $minWidth: 70px;
1867
1500
  text-align: center;
1868
1501
  cursor: pointer;
1869
1502
  position: relative;
1503
+
1870
1504
  &.tab__active {
1871
1505
  font-weight: bold;
1872
1506
  }
1873
1507
  }
1508
+
1874
1509
  .tab__active-indicator {
1875
1510
  position: absolute;
1876
1511
  bottom: 0;
@@ -1888,35 +1523,24 @@ $minWidth: 70px;
1888
1523
  .tab__accordion {
1889
1524
  display: flex;
1890
1525
  flex-direction: column;
1891
- padding: var(
1892
- --_ctm-mob-lt-gd-os-dy-se-cr-pg,
1893
- var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
1894
- );
1526
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-cr-pg,
1527
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg)));
1895
1528
 
1896
1529
  .tab__container {
1897
1530
  display: flex;
1898
1531
  flex-direction: column;
1899
- gap: var(
1900
- --_ctm-mob-lt-gd-os-dy-se-an-sg,
1901
- var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1902
- );
1532
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-an-sg,
1533
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg)));
1903
1534
 
1904
1535
  .tab_acc_wrapper {
1905
1536
  display: flex;
1906
1537
  flex-direction: column;
1907
- gap: var(
1908
- --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1909
- var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg))
1910
- );
1911
-
1912
- padding: var(
1913
- --_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1914
- var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))
1915
- )
1916
- var(
1917
- --_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1918
- var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg))
1919
- );
1538
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1539
+ var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg)));
1540
+
1541
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1542
+ var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))) var(--_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1543
+ var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg)));
1920
1544
 
1921
1545
  .tab {
1922
1546
  display: flex;
@@ -1924,10 +1548,12 @@ $minWidth: 70px;
1924
1548
  position: relative;
1925
1549
  cursor: pointer;
1926
1550
  flex-direction: row;
1551
+
1927
1552
  &[data-expand-icon="Left"] {
1928
1553
  flex-direction: row-reverse;
1929
1554
  justify-content: flex-end;
1930
1555
  }
1556
+
1931
1557
  &[data-item-dividers="true"] {
1932
1558
  &::after {
1933
1559
  content: "";
@@ -1938,21 +1564,26 @@ $minWidth: 70px;
1938
1564
  border-bottom: 1px solid var(--_gray-200);
1939
1565
  }
1940
1566
  }
1567
+
1941
1568
  span {
1942
1569
  padding-block: 12px;
1943
1570
  display: inline-block;
1944
1571
  }
1572
+
1945
1573
  .active {
1946
1574
  border-bottom: 2px solid var(--_primary-400);
1947
1575
  }
1576
+
1948
1577
  &.inactive {
1949
1578
  height: 0px;
1950
1579
  }
1951
1580
  }
1581
+
1952
1582
  .tab__content {
1953
1583
  &.d-none {
1954
1584
  display: none;
1955
1585
  }
1586
+
1956
1587
  &.d-block {
1957
1588
  display: block;
1958
1589
  }
@@ -1972,13 +1603,8 @@ $minWidth: 70px;
1972
1603
  height: 1px;
1973
1604
  width: 100%;
1974
1605
  display: flex;
1975
- top: calc(
1976
- var(
1977
- --_ctm-mob-lt-gd-os-dy-se-an-sg,
1978
- var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1979
- ) /
1980
- 2
1981
- );
1606
+ top: calc(var(--_ctm-mob-lt-gd-os-dy-se-an-sg,
1607
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))) / 2);
1982
1608
  }
1983
1609
  }
1984
1610
  }
@@ -2136,205 +1762,115 @@ $minWidth: 70px;
2136
1762
  }
2137
1763
  }
2138
1764
  }
1765
+
2139
1766
  &.tabs__hr {
2140
1767
  .tabs {
2141
1768
  flex-direction: column;
2142
- gap: var(
2143
- --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
2144
- var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg))
2145
- );
1769
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
1770
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg)));
2146
1771
 
2147
1772
  .tabs__container {
2148
1773
  width: 100%;
2149
1774
  }
2150
1775
  }
2151
1776
  }
1777
+
2152
1778
  .tabs {
2153
1779
  display: flex;
2154
- gap: var(
2155
- --_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg,
2156
- 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))
2157
- );
1780
+ gap: var(--_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg,
1781
+ 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)));
2158
1782
 
2159
1783
  .tabs__container {
2160
1784
  display: flex;
2161
- gap: var(
2162
- --_ctm-mob-lt-gd-os-dy-se-tb-sg,
2163
- var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg))
2164
- );
1785
+ gap: var(--_ctm-mob-lt-gd-os-dy-se-tb-sg,
1786
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg)));
2165
1787
 
2166
1788
  .tab {
2167
1789
  display: flex;
2168
1790
  justify-content: var(--_tab-aliginment);
2169
- padding: var(
2170
- --_ctm-mob-lt-gd-os-dy-se-tb-vl-pg,
2171
- var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg))
2172
- )
2173
- var(
2174
- --_ctm-mob-lt-gd-os-dy-se-tb-hl-pg,
2175
- var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg))
2176
- );
2177
- background-color: var(
2178
- --_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr,
2179
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr))
2180
- );
2181
- border-color: var(
2182
- --_show-border-im-se,
2183
- var(
2184
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr,
2185
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr))
2186
- )
2187
- );
2188
- border-style: var(
2189
- --_show-border-im-se,
2190
- var(
2191
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-se,
2192
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se))
2193
- )
2194
- );
2195
- border-width: var(
2196
- --_show-border-im-se,
2197
- var(
2198
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh,
2199
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh))
2200
- )
2201
- );
2202
- border-radius: var(
2203
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
2204
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs))
2205
- );
2206
- box-shadow: var(
2207
- --_show-shadow-im-se,
2208
- var(
2209
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae,
2210
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae)
2211
- ),
2212
- var(
2213
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br,
2214
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br)
2215
- ),
2216
- var(
2217
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd,
2218
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd)
2219
- ),
2220
- var(
2221
- --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr,
2222
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr)
2223
- )
2224
- );
2225
- border-radius: var(
2226
- --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
2227
- var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs)
2228
- );
1791
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-tb-vl-pg,
1792
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg))) var(--_ctm-mob-lt-gd-os-dy-se-tb-hl-pg,
1793
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg)));
1794
+ background-color: var(--_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr,
1795
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr)));
1796
+ border-color: var(--_show-border-im-se,
1797
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr,
1798
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr))));
1799
+ border-style: var(--_show-border-im-se,
1800
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-br-se,
1801
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se))));
1802
+ border-width: var(--_show-border-im-se,
1803
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh,
1804
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh))));
1805
+ border-radius: var(--_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1806
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs)));
1807
+ box-shadow: var(--_show-shadow-im-se,
1808
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae,
1809
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae)),
1810
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br,
1811
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br)),
1812
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd,
1813
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd)),
1814
+ var(--_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr,
1815
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr)));
1816
+ border-radius: var(--_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1817
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs));
2229
1818
 
2230
1819
  &:hover {
2231
- background-color: var(
2232
- --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
2233
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr))
2234
- );
2235
- border-color: var(
2236
- --_show-border-im-se,
2237
- var(
2238
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr,
2239
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr))
2240
- )
2241
- );
2242
- border-style: var(
2243
- --_show-border-im-se,
2244
- var(
2245
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-se,
2246
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se))
2247
- )
2248
- );
2249
- border-width: var(
2250
- --_show-border-im-se,
2251
- var(
2252
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh,
2253
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh))
2254
- )
2255
- );
2256
- border-radius: var(
2257
- --_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs,
2258
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs))
2259
- );
2260
- box-shadow: var(
2261
- --_show-shadow-im-se,
2262
- var(
2263
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae,
2264
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae)
2265
- ),
2266
- var(
2267
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br,
2268
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br)
2269
- ),
2270
- var(
2271
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd,
2272
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd)
2273
- ),
2274
- var(
2275
- --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr,
2276
- var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr)
2277
- )
2278
- );
1820
+ background-color: var(--_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
1821
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr)));
1822
+ border-color: var(--_show-border-im-se,
1823
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr,
1824
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr))));
1825
+ border-style: var(--_show-border-im-se,
1826
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-br-se,
1827
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se))));
1828
+ border-width: var(--_show-border-im-se,
1829
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh,
1830
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh))));
1831
+ border-radius: var(--_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs,
1832
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs)));
1833
+ box-shadow: var(--_show-shadow-im-se,
1834
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae,
1835
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae)),
1836
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br,
1837
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br)),
1838
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd,
1839
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd)),
1840
+ var(--_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr,
1841
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr)));
2279
1842
  }
2280
1843
 
2281
1844
  &.active {
2282
- background-color: var(
2283
- --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
2284
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr))
2285
- );
2286
- border-color: var(
2287
- --_show-border-im-se,
2288
- var(
2289
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr,
2290
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr))
2291
- )
2292
- );
2293
- border-style: var(
2294
- --_show-border-im-se,
2295
- var(
2296
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-se,
2297
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se))
2298
- )
2299
- );
2300
- border-width: var(
2301
- --_show-border-im-se,
2302
- var(
2303
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh,
2304
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh))
2305
- )
2306
- );
2307
- border-radius: var(
2308
- --_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs,
2309
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs))
2310
- );
2311
- box-shadow: var(
2312
- --_show-shadow-im-se,
2313
- var(
2314
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae,
2315
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae)
2316
- ),
2317
- var(
2318
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br,
2319
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br)
2320
- ),
2321
- var(
2322
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd,
2323
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd)
2324
- ),
2325
- var(
2326
- --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr,
2327
- var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr)
2328
- )
2329
- );
1845
+ background-color: var(--_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
1846
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr)));
1847
+ border-color: var(--_show-border-im-se,
1848
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr,
1849
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr))));
1850
+ border-style: var(--_show-border-im-se,
1851
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-br-se,
1852
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se))));
1853
+ border-width: var(--_show-border-im-se,
1854
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh,
1855
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh))));
1856
+ border-radius: var(--_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs,
1857
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs)));
1858
+ box-shadow: var(--_show-shadow-im-se,
1859
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae,
1860
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae)),
1861
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br,
1862
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br)),
1863
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd,
1864
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd)),
1865
+ var(--_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr,
1866
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr)));
2330
1867
  }
2331
1868
  }
2332
1869
  }
1870
+
2333
1871
  .tab__content {
2334
- padding: var(
2335
- --_ctm-mob-lt-gd-os-dy-se-cr-pg,
2336
- var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
2337
- );
1872
+ padding: var(--_ctm-mob-lt-gd-os-dy-se-cr-pg,
1873
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg)));
2338
1874
  }
2339
1875
  }
2340
1876
  }
@@ -2373,37 +1909,18 @@ $minWidth: 70px;
2373
1909
  gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
2374
1910
 
2375
1911
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2376
- height: calc(
2377
- 100% - calc(
2378
- var(
2379
- --_ctm-mob-dn-pn-as-aw-se,
2380
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2381
- ) +
2382
- 8px
2383
- )
2384
- );
1912
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
1913
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 8px));
2385
1914
  }
1915
+
2386
1916
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2387
- height: calc(
2388
- 100% - calc(
2389
- var(
2390
- --_ctm-mob-dn-pn-le-le-ht,
2391
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2392
- ) +
2393
- 20px
2394
- )
2395
- );
1917
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
1918
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
2396
1919
  }
1920
+
2397
1921
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
2398
- height: calc(
2399
- 100% - calc(
2400
- var(
2401
- --_ctm-mob-dn-pn-ds-dt-se,
2402
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2403
- ) +
2404
- 20px
2405
- )
2406
- );
1922
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
1923
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
2407
1924
  }
2408
1925
 
2409
1926
  .embla__slide {
@@ -2421,20 +1938,25 @@ $minWidth: 70px;
2421
1938
  width: 100%;
2422
1939
  justify-content: space-between;
2423
1940
  transform: translate(-50%, -50%);
1941
+
2424
1942
  // padding-left: 20px;
2425
1943
  &[data-control-type="Side"] {
1944
+
2426
1945
  .left-button,
2427
1946
  .right-button {
2428
1947
  background-color: transparent;
2429
1948
  }
2430
1949
  }
1950
+
2431
1951
  &[data-background-shape="Round"] {
1952
+
2432
1953
  .left-button,
2433
1954
  .right-button {
2434
1955
  background-color: #f2f5f5;
2435
1956
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2436
1957
  }
2437
1958
  }
1959
+
2438
1960
  &[data-control-type="Bottom-Overflow"] {
2439
1961
  transform: translateX(-50%);
2440
1962
  width: 100%;
@@ -2443,6 +1965,7 @@ $minWidth: 70px;
2443
1965
  top: unset;
2444
1966
  bottom: 6px;
2445
1967
  }
1968
+
2446
1969
  &[data-control-type="Bottom"] {
2447
1970
  transform: unset;
2448
1971
  position: static;
@@ -2451,18 +1974,15 @@ $minWidth: 70px;
2451
1974
  gap: 12px;
2452
1975
  margin-top: 10px;
2453
1976
  }
1977
+
2454
1978
  .left-button {
2455
1979
  padding: 10px;
2456
1980
  border-radius: 50%;
2457
1981
  border: none;
2458
- width: var(
2459
- --_ctm-mob-dn-pn-as-aw-se,
2460
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2461
- );
2462
- height: var(
2463
- --_ctm-mob-dn-pn-as-aw-se,
2464
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2465
- );
1982
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
1983
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
1984
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
1985
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
2466
1986
 
2467
1987
  display: flex;
2468
1988
  align-items: center;
@@ -2470,6 +1990,7 @@ $minWidth: 70px;
2470
1990
  cursor: pointer;
2471
1991
  outline: none;
2472
1992
  margin-left: 12px;
1993
+
2473
1994
  &:disabled {
2474
1995
  & svg {
2475
1996
  path {
@@ -2478,17 +1999,14 @@ $minWidth: 70px;
2478
1999
  }
2479
2000
  }
2480
2001
  }
2002
+
2481
2003
  .right-button {
2482
2004
  border-radius: 50%;
2483
2005
  border: none;
2484
- width: var(
2485
- --_ctm-mob-dn-pn-as-aw-se,
2486
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2487
- );
2488
- height: var(
2489
- --_ctm-mob-dn-pn-as-aw-se,
2490
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2491
- );
2006
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
2007
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
2008
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
2009
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
2492
2010
 
2493
2011
  display: flex;
2494
2012
  align-items: center;
@@ -2506,28 +2024,19 @@ $minWidth: 70px;
2506
2024
  }
2507
2025
  }
2508
2026
  }
2027
+
2509
2028
  .icon {
2510
2029
  display: flex;
2030
+
2511
2031
  svg {
2512
- width: calc(
2513
- var(
2514
- --_ctm-mob-dn-pn-as-aw-se,
2515
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2516
- ) *
2517
- 0.5
2518
- );
2519
- height: calc(
2520
- var(
2521
- --_ctm-mob-dn-pn-as-aw-se,
2522
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2523
- ) *
2524
- 0.5
2525
- );
2032
+ width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
2033
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
2034
+ height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
2035
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
2036
+
2526
2037
  path {
2527
- stroke: var(
2528
- --_ctm-mob-dn-pn-as-aw-cr,
2529
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2530
- );
2038
+ stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
2039
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
2531
2040
  }
2532
2041
  }
2533
2042
  }
@@ -2536,9 +2045,11 @@ $minWidth: 70px;
2536
2045
  &[data-thumbnail-placement="top"] {
2537
2046
  flex-direction: column-reverse;
2538
2047
  }
2048
+
2539
2049
  &[data-thumbnail-placement="bottom"] {
2540
2050
  flex-direction: column;
2541
2051
  }
2052
+
2542
2053
  &[data-thumbnail-placement="left"] {
2543
2054
  flex-direction: row-reverse;
2544
2055
 
@@ -2553,8 +2064,10 @@ $minWidth: 70px;
2553
2064
  }
2554
2065
  }
2555
2066
  }
2067
+
2556
2068
  &[data-thumbnail-placement="right"] {
2557
2069
  flex-direction: row;
2070
+
2558
2071
  .embla__thumbs {
2559
2072
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2560
2073
 
@@ -2566,15 +2079,18 @@ $minWidth: 70px;
2566
2079
  }
2567
2080
  }
2568
2081
  }
2082
+
2569
2083
  &[data-control-type="Side"] {
2570
2084
  display: flex;
2571
2085
  align-self: center;
2572
2086
  flex-direction: row;
2087
+
2573
2088
  .left-button:disabled,
2574
2089
  .right-button:disabled {
2575
2090
  display: none;
2576
2091
  }
2577
2092
  }
2093
+
2578
2094
  .embla__dots {
2579
2095
  display: flex;
2580
2096
  flex-wrap: wrap;
@@ -2591,6 +2107,7 @@ $minWidth: 70px;
2591
2107
  transform: translateX(-50%);
2592
2108
  width: 75%;
2593
2109
  }
2110
+
2594
2111
  .embla__dot {
2595
2112
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2596
2113
  -webkit-appearance: none;
@@ -2612,6 +2129,7 @@ $minWidth: 70px;
2612
2129
  justify-content: center;
2613
2130
  border-radius: 50%;
2614
2131
  }
2132
+
2615
2133
  .embla__dot:after {
2616
2134
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2617
2135
  width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
@@ -2621,10 +2139,12 @@ $minWidth: 70px;
2621
2139
  align-items: center;
2622
2140
  content: "";
2623
2141
  }
2142
+
2624
2143
  .embla__dot--selected:after {
2625
2144
  box-shadow: inset 0 0 0 1px var(--text-body);
2626
2145
  background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2627
2146
  }
2147
+
2628
2148
  &[data-slider-control="Pagination Line"] {
2629
2149
  .embla__dot {
2630
2150
  width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
@@ -2633,6 +2153,7 @@ $minWidth: 70px;
2633
2153
 
2634
2154
  border-radius: 6px;
2635
2155
  }
2156
+
2636
2157
  .embla__dot--selected:after {
2637
2158
  box-shadow: inset 0 0 0 1px var(--text-body);
2638
2159
  border-radius: 6px;
@@ -2664,6 +2185,7 @@ $minWidth: 70px;
2664
2185
 
2665
2186
  overflow: hidden;
2666
2187
  }
2188
+
2667
2189
  .embla__thumbs__container {
2668
2190
  display: flex;
2669
2191
  flex-direction: row;
@@ -2677,6 +2199,7 @@ $minWidth: 70px;
2677
2199
  min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2678
2200
  max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2679
2201
  height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2202
+
2680
2203
  & img {
2681
2204
  width: 100%;
2682
2205
  height: 100%;
@@ -2698,15 +2221,15 @@ $minWidth: 70px;
2698
2221
  .pagination:hover {
2699
2222
  --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
2700
2223
  }
2224
+
2701
2225
  .load__more__button__container {
2702
2226
  display: flex;
2703
2227
  width: 100%;
2704
2228
  margin-top: 10px;
2229
+
2705
2230
  &:hover {
2706
- --_sf-hr-bn-at: var(
2707
- --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
2708
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
2709
- );
2231
+ --_sf-hr-bn-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
2232
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at)));
2710
2233
  }
2711
2234
 
2712
2235
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
@@ -2716,6 +2239,9 @@ $minWidth: 70px;
2716
2239
  cursor: pointer;
2717
2240
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
2718
2241
  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
2242
+ --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
2243
+ --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
2244
+ --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
2719
2245
  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
2720
2246
  --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
2721
2247
  --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
@@ -2724,80 +2250,67 @@ $minWidth: 70px;
2724
2250
  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
2725
2251
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
2726
2252
  }
2253
+
2727
2254
  &[data-widget-shadow="false"] {
2728
2255
  .table__wrapper {
2729
2256
  --_show-shadow: none;
2730
2257
  }
2731
2258
  }
2259
+
2732
2260
  &[data-widget-border="true"] {
2733
2261
  .table__wrapper {
2734
- border-color: var(
2735
- --_ctm-mob-dn-te-wt-br-cr,
2736
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
2737
- );
2738
- border-style: var(
2739
- --_ctm-mob-dn-te-wt-br-se,
2740
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
2741
- );
2742
- border-width: var(
2743
- --_ctm-mob-dn-te-wt-br-wh,
2744
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
2745
- );
2262
+ border-color: var(--_ctm-mob-dn-te-wt-br-cr,
2263
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr)));
2264
+ border-style: var(--_ctm-mob-dn-te-wt-br-se,
2265
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se)));
2266
+ border-width: var(--_ctm-mob-dn-te-wt-br-wh,
2267
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh)));
2746
2268
  }
2747
2269
  }
2270
+
2748
2271
  &[data-table-shadow="false"] {
2749
2272
  .table__container {
2750
2273
  --_show-table-shadow: none;
2751
2274
  }
2752
2275
  }
2276
+
2753
2277
  &[data-alternative-row-colors="true"] {
2754
2278
  tbody .tbody__row__divider:nth-child(odd) {
2755
2279
  background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
2756
2280
  }
2757
2281
  }
2282
+
2758
2283
  &[data-table-border="true"] {
2759
2284
  .table__container {
2760
- border-color: var(
2761
- --_ctm-mob-dn-te-br-cr,
2762
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
2763
- );
2764
- border-style: var(
2765
- --_ctm-mob-dn-te-br-se,
2766
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
2767
- );
2768
- border-width: var(
2769
- --_ctm-mob-dn-te-br-wh,
2770
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
2771
- );
2285
+ border-color: var(--_ctm-mob-dn-te-br-cr,
2286
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)));
2287
+ border-style: var(--_ctm-mob-dn-te-br-se,
2288
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)));
2289
+ border-width: var(--_ctm-mob-dn-te-br-wh,
2290
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)));
2772
2291
  }
2773
2292
  }
2774
2293
 
2775
2294
  &[data-header-divider="true"] {
2776
2295
  thead tr th {
2777
- border-bottom: 1px solid
2778
- var(
2779
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
2780
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
2781
- );
2296
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
2297
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr)));
2782
2298
  }
2783
2299
  }
2300
+
2784
2301
  &[data-row-divider="true"] {
2785
2302
  tbody tr {
2786
- border-bottom: 1px solid
2787
- var(
2788
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
2789
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
2790
- );
2303
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
2304
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr)));
2791
2305
  }
2792
2306
  }
2307
+
2793
2308
  &[data-column-divider="true"] {
2309
+
2794
2310
  tbody tr td,
2795
2311
  thead tr th {
2796
- border-right: 1px solid
2797
- var(
2798
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
2799
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
2800
- );
2312
+ border-right: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
2313
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr)));
2801
2314
  }
2802
2315
 
2803
2316
  tbody tr td:last-child,
@@ -2805,19 +2318,16 @@ $minWidth: 70px;
2805
2318
  border-right: none;
2806
2319
  }
2807
2320
  }
2321
+
2808
2322
  &[data-show-more-rows="onScroll"] {
2809
2323
  .table__container {
2810
2324
  overflow-y: scroll;
2811
- height: var(
2812
- --_ctm-mob-lt-mx-dy-se-te-ht,
2813
- var(--_ctm-tab-lt-mx-dy-se-te-ht, var(--_ctm-lt-mx-dy-se-te-ht))
2814
- ) !important;
2325
+ height: var(--_ctm-mob-lt-mx-dy-se-te-ht,
2326
+ var(--_ctm-tab-lt-mx-dy-se-te-ht, var(--_ctm-lt-mx-dy-se-te-ht))) !important;
2815
2327
 
2816
2328
  &::-webkit-scrollbar {
2817
- width: var(
2818
- --_ctm-mob-dn-sl-br-sl-br-wh,
2819
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
2820
- );
2329
+ width: var(--_ctm-mob-dn-sl-br-sl-br-wh,
2330
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh)));
2821
2331
  }
2822
2332
 
2823
2333
  &::-webkit-scrollbar-track {
@@ -2825,10 +2335,8 @@ $minWidth: 70px;
2825
2335
  }
2826
2336
 
2827
2337
  &::-webkit-scrollbar-thumb {
2828
- background-color: var(
2829
- --_ctm-mob-dn-sl-br-sl-br-cr,
2830
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
2831
- );
2338
+ background-color: var(--_ctm-mob-dn-sl-br-sl-br-cr,
2339
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr)));
2832
2340
  }
2833
2341
 
2834
2342
  // // Scrollbar thumb when hovered
@@ -2852,61 +2360,33 @@ $minWidth: 70px;
2852
2360
  flex: 1 1 auto;
2853
2361
  min-width: 0;
2854
2362
  overflow-x: auto;
2855
- padding: var(
2856
- --_ctm-mob-lt-mx-dy-se-pg,
2857
- var(--_ctm-tab-lt-mx-dy-se-pg, var(--_ctm-lt-mx-dy-se-pg, var(--_tst-lt-mx-dy-se-pg)))
2858
- );
2859
-
2860
- background-color: var(
2861
- --_ctm-mob-dn-te-wt-bd-cr,
2862
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
2863
- );
2864
-
2865
- border-radius: var(
2866
- --_ctm-mob-dn-te-wt-br-rs,
2867
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
2868
- );
2869
-
2870
- box-shadow: var(
2871
- --_show-shadow,
2872
- var(
2873
- --_ctm-mob-dn-te-wt-sw-ae,
2874
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
2875
- )
2876
- var(
2877
- --_ctm-mob-dn-te-wt-sw-br,
2878
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
2879
- )
2880
- var(
2881
- --_ctm-mob-dn-te-wt-sw-sd,
2882
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
2883
- )
2884
- var(
2885
- --_ctm-mob-dn-te-wt-sw-cr,
2886
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
2887
- )
2888
- );
2363
+ padding: var(--_ctm-mob-lt-mx-dy-se-pg,
2364
+ var(--_ctm-tab-lt-mx-dy-se-pg, var(--_ctm-lt-mx-dy-se-pg, var(--_tst-lt-mx-dy-se-pg))));
2365
+
2366
+ background-color: var(--_ctm-mob-dn-te-wt-bd-cr,
2367
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr))));
2368
+
2369
+ border-radius: var(--_ctm-mob-dn-te-wt-br-rs,
2370
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs))));
2371
+
2372
+ box-shadow: var(--_show-shadow,
2373
+ var(--_ctm-mob-dn-te-wt-sw-ae,
2374
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))) var(--_ctm-mob-dn-te-wt-sw-br,
2375
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))) var(--_ctm-mob-dn-te-wt-sw-sd,
2376
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))) var(--_ctm-mob-dn-te-wt-sw-cr,
2377
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))));
2889
2378
 
2890
2379
  width: 100%;
2891
2380
 
2892
2381
  .table__container {
2893
- background-color: var(
2894
- --_ctm-mob-dn-te-bd-cr,
2895
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
2896
- );
2382
+ background-color: var(--_ctm-mob-dn-te-bd-cr,
2383
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr)));
2897
2384
 
2898
- border-radius: var(
2899
- --_ctm-mob-dn-te-br-rs,
2900
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
2901
- );
2385
+ border-radius: var(--_ctm-mob-dn-te-br-rs,
2386
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)));
2902
2387
 
2903
- box-shadow: var(
2904
- --_show-table-shadow,
2905
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
2906
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
2907
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
2908
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
2909
- );
2388
+ box-shadow: var(--_show-table-shadow,
2389
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae))) var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br))) var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd))) var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr))));
2910
2390
  }
2911
2391
 
2912
2392
  h3 {
@@ -2914,173 +2394,126 @@ $minWidth: 70px;
2914
2394
  width: 100%;
2915
2395
  margin-bottom: 10px;
2916
2396
  }
2397
+
2917
2398
  table {
2918
2399
  border-collapse: collapse;
2919
2400
  // border: none;
2920
2401
  width: 100%;
2921
2402
  // height: 100%;
2922
- text-align: var(
2923
- --_ctm-mob-lt-mx-dy-se-ct-at,
2924
- var(--_ctm-tab-lt-mx-dy-se-ct-at, var(--_ctm-lt-mx-dy-se-ct-at))
2925
- );
2403
+ text-align: var(--_ctm-mob-lt-mx-dy-se-ct-at,
2404
+ var(--_ctm-tab-lt-mx-dy-se-ct-at, var(--_ctm-lt-mx-dy-se-ct-at)));
2926
2405
  width: max-content;
2927
2406
  min-width: 100%;
2928
2407
  table-layout: auto;
2408
+
2929
2409
  th,
2930
2410
  td {
2931
2411
  border: none;
2932
2412
  }
2413
+
2933
2414
  thead {
2934
- background-color: var(
2935
- --_ctm-mob-dn-te-hr-bd-cr,
2936
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
2937
- );
2415
+ background-color: var(--_ctm-mob-dn-te-hr-bd-cr,
2416
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr)));
2938
2417
 
2939
2418
  .thead__row__divider {
2940
- height: var(
2941
- --_ctm-mob-lt-mx-dy-se-hr-ht,
2942
- var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht))
2943
- );
2419
+ height: var(--_ctm-mob-lt-mx-dy-se-hr-ht,
2420
+ var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht)));
2944
2421
 
2945
2422
  .th__col__divider {
2946
- padding: var(
2947
- --_ctm-mob-lt-mx-dy-se-hr-cl-pg,
2948
- var(--_ctm-tab-lt-mx-dy-se-hr-cl-pg, var(--_ctm-lt-mx-dy-se-hr-cl-pg))
2949
- );
2950
-
2951
- color: var(
2952
- --_ctm-mob-dn-hr-tt-cr,
2953
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
2954
- );
2955
-
2956
- font-family: var(
2957
- --_ctm-mob-dn-hr-tt-ft-fy,
2958
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
2959
- );
2960
-
2961
- font-size: var(
2962
- --_ctm-mob-dn-hr-tt-ft-se,
2963
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
2964
- );
2965
-
2966
- font-weight: var(
2967
- --_ctm-mob-dn-hr-tt-ft-wt,
2968
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
2969
- );
2970
-
2971
- text-decoration: var(
2972
- --_ctm-mob-dn-hr-tt-ue,
2973
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
2974
- );
2975
-
2976
- font-style: var(
2977
- --_ctm-mob-dn-hr-tt-ft-se-ic,
2978
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
2979
- );
2980
-
2981
- text-align: var(
2982
- --_ctm-mob-dn-hr-tt-tt-an,
2983
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
2984
- );
2985
-
2986
- letter-spacing: var(
2987
- --_ctm-mob-dn-hr-tt-lr-sg,
2988
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
2989
- );
2990
-
2991
- line-height: var(
2992
- --_ctm-mob-dn-hr-tt-le-ht,
2993
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
2994
- );
2423
+ padding: var(--_ctm-mob-lt-mx-dy-se-hr-cl-pg,
2424
+ var(--_ctm-tab-lt-mx-dy-se-hr-cl-pg, var(--_ctm-lt-mx-dy-se-hr-cl-pg)));
2425
+
2426
+ color: var(--_ctm-mob-dn-hr-tt-cr,
2427
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)));
2428
+
2429
+ font-family: var(--_ctm-mob-dn-hr-tt-ft-fy,
2430
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)));
2431
+ text-transform: var(--_ctm-mob-dn-hr-tt-tt-tm,
2432
+ var(--_ctm-tab-dn-hr-tt-tt-tm, var(--_ctm-dn-hr-tt-tt-tm)));
2433
+ word-wrap: var(--_ctm-mob-dn-hr-tt-wd-wp,
2434
+ var(--_ctm-tab-dn-hr-tt-wd-wp, var(--_ctm-dn-hr-tt-wd-wp)));
2435
+ word-break: var(--_ctm-mob-dn-hr-tt-wd-bk,
2436
+ var(--_ctm-tab-dn-hr-tt-wd-bk, var(--_ctm-dn-hr-tt-wd-bk)));
2437
+
2438
+ font-size: var(--_ctm-mob-dn-hr-tt-ft-se,
2439
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se)));
2440
+
2441
+ font-weight: var(--_ctm-mob-dn-hr-tt-ft-wt,
2442
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt)));
2443
+
2444
+ text-decoration: var(--_ctm-mob-dn-hr-tt-ue,
2445
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue)));
2446
+
2447
+ font-style: var(--_ctm-mob-dn-hr-tt-ft-se-ic,
2448
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic)));
2449
+
2450
+ text-align: var(--_ctm-mob-dn-hr-tt-tt-an,
2451
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an)));
2452
+
2453
+ letter-spacing: var(--_ctm-mob-dn-hr-tt-lr-sg,
2454
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg)));
2455
+
2456
+ line-height: var(--_ctm-mob-dn-hr-tt-le-ht,
2457
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht)));
2995
2458
  }
2996
2459
  }
2997
2460
  }
2461
+
2998
2462
  tbody {
2999
2463
  .tbody__row__divider {
3000
- background-color: var(
3001
- --_ctm-mob-dn-te-rw-bd-cr,
3002
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
3003
- );
2464
+ background-color: var(--_ctm-mob-dn-te-rw-bd-cr,
2465
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr)));
3004
2466
 
3005
- height: var(
3006
- --_ctm-mob-lt-mx-dy-se-rw-ht,
3007
- var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht))
3008
- );
2467
+ height: var(--_ctm-mob-lt-mx-dy-se-rw-ht,
2468
+ var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht)));
3009
2469
 
3010
2470
  .td__col__divider {
3011
- padding: var(
3012
- --_ctm-mob-lt-mx-dy-se-rw-cl-pg,
3013
- var(--_ctm-tab-lt-mx-dy-se-rw-cl-pg, var(--_ctm-lt-mx-dy-se-rw-cl-pg))
3014
- );
3015
-
3016
- color: var(
3017
- --_sf-hr-fc,
3018
- var(
3019
- --_ctm-mob-dn-rw-tt-cr,
3020
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
3021
- )
3022
- );
3023
-
3024
- font-family: var(
3025
- --_sf-hr-ff,
3026
- var(
3027
- --_ctm-mob-dn-rw-tt-ft-fy,
3028
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
3029
- )
3030
- );
3031
-
3032
- font-size: var(
3033
- --_sf-hr-fs,
3034
- var(
3035
- --_ctm-mob-dn-rw-tt-ft-se,
3036
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
3037
- )
3038
- );
3039
-
3040
- text-decoration: var(
3041
- --_ctm-mob-dn-rw-tt-ue,
3042
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
3043
- );
3044
-
3045
- font-weight: var(
3046
- --_sf-hr-fw,
3047
- var(
3048
- --_ctm-mob-dn-rw-tt-ft-wt,
3049
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
3050
- )
3051
- );
3052
-
3053
- font-style: var(
3054
- --_sf-hr-ft,
3055
- var(
3056
- --_ctm-mob-dn-rw-tt-ft-se-ic,
3057
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
3058
- )
3059
- );
3060
-
3061
- text-align: var(
3062
- --_sf-hr-ta,
3063
- var(
3064
- --_ctm-mob-dn-rw-tt-tt-an,
3065
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
3066
- )
3067
- );
3068
-
3069
- letter-spacing: var(
3070
- --_sf-hr-ls,
3071
- var(
3072
- --_ctm-mob-dn-rw-tt-lr-sg,
3073
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
3074
- )
3075
- );
3076
-
3077
- line-height: var(
3078
- --_sf-hr-lh,
3079
- var(
3080
- --_ctm-mob-dn-rw-tt-le-ht,
3081
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
3082
- )
3083
- );
2471
+ padding: var(--_ctm-mob-lt-mx-dy-se-rw-cl-pg,
2472
+ var(--_ctm-tab-lt-mx-dy-se-rw-cl-pg, var(--_ctm-lt-mx-dy-se-rw-cl-pg)));
2473
+
2474
+ color: var(--_sf-hr-fc,
2475
+ var(--_ctm-mob-dn-rw-tt-cr,
2476
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))));
2477
+
2478
+ font-family: var(--_sf-hr-ff,
2479
+ var(--_ctm-mob-dn-rw-tt-ft-fy,
2480
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))));
2481
+ text-transform: var(--_sf-hr-tt-tm,
2482
+ var(--_ctm-mob-dn-rw-tt-tt-tm,
2483
+ var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))));
2484
+ word-wrap: var(--_sf-hr-wd-wp,
2485
+ var(--_ctm-mob-dn-rw-tt-wd-wp,
2486
+ var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))));
2487
+ word-break: var(--_sf-hr-wd-bk,
2488
+ var(--_ctm-mob-dn-rw-tt-wd-bk,
2489
+ var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))));
2490
+
2491
+ font-size: var(--_sf-hr-fs,
2492
+ var(--_ctm-mob-dn-rw-tt-ft-se,
2493
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))));
2494
+
2495
+ text-decoration: var(--_ctm-mob-dn-rw-tt-ue,
2496
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue)));
2497
+
2498
+ font-weight: var(--_sf-hr-fw,
2499
+ var(--_ctm-mob-dn-rw-tt-ft-wt,
2500
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))));
2501
+
2502
+ font-style: var(--_sf-hr-ft,
2503
+ var(--_ctm-mob-dn-rw-tt-ft-se-ic,
2504
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))));
2505
+
2506
+ text-align: var(--_sf-hr-ta,
2507
+ var(--_ctm-mob-dn-rw-tt-tt-an,
2508
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))));
2509
+
2510
+ letter-spacing: var(--_sf-hr-ls,
2511
+ var(--_ctm-mob-dn-rw-tt-lr-sg,
2512
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))));
2513
+
2514
+ line-height: var(--_sf-hr-lh,
2515
+ var(--_ctm-mob-dn-rw-tt-le-ht,
2516
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))));
3084
2517
  }
3085
2518
  }
3086
2519
  }
@@ -3089,18 +2522,13 @@ $minWidth: 70px;
3089
2522
  .pagination {
3090
2523
  display: var(--_d-flex);
3091
2524
  align-items: var(--_align-center);
3092
- justify-content: var(
3093
- --_ctm-mob-lt-mx-dy-se-pn-at,
3094
- var(--_ctm-tab-lt-mx-dy-se-pn-at, var(--_ctm-lt-mx-dy-se-pn-at))
3095
- );
2525
+ justify-content: var(--_ctm-mob-lt-mx-dy-se-pn-at,
2526
+ var(--_ctm-tab-lt-mx-dy-se-pn-at, var(--_ctm-lt-mx-dy-se-pn-at)));
3096
2527
  margin-top: 10px;
3097
- background-color: var(
3098
- --_sf-bd-cr,
3099
- var(
3100
- --_ctm-mob-dn-pn-dt-se-bd-cr,
3101
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
3102
- )
3103
- );
2528
+ background-color: var(--_sf-bd-cr,
2529
+ var(--_ctm-mob-dn-pn-dt-se-bd-cr,
2530
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))));
2531
+
3104
2532
  &.pagination__center {
3105
2533
  justify-content: var(justify-center);
3106
2534
  }
@@ -3109,6 +2537,7 @@ $minWidth: 70px;
3109
2537
  svg {
3110
2538
  width: var(--_width-18);
3111
2539
  height: var(--_height-18);
2540
+
3112
2541
  path {
3113
2542
  stroke: var(--_gray-500);
3114
2543
  // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
@@ -3117,10 +2546,12 @@ $minWidth: 70px;
3117
2546
  }
3118
2547
  }
3119
2548
  }
2549
+
3120
2550
  span {
3121
2551
  float: left;
3122
2552
  padding: var(--_pd-8) var(--_pd-16);
3123
2553
  text-decoration: none;
2554
+
3124
2555
  span {
3125
2556
  // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
3126
2557
  // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -3132,10 +2563,14 @@ $minWidth: 70px;
3132
2563
  // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
3133
2564
  // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
3134
2565
  }
2566
+
3135
2567
  &.active:hover {
3136
2568
  &hover {
3137
2569
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
3138
2570
  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
2571
+ --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
2572
+ --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
2573
+ --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
3139
2574
  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
3140
2575
  --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
3141
2576
  --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
@@ -3144,228 +2579,159 @@ $minWidth: 70px;
3144
2579
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
3145
2580
  }
3146
2581
  }
2582
+
3147
2583
  &.active {
3148
- color: var(
3149
- --_sf-hr-fc,
3150
- var(
3151
- --_ctm-mob-dn-pn-dt-se-cr,
3152
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
3153
- )
3154
- );
3155
-
3156
- font-family: var(
3157
- --_sf-hr-ff,
3158
- var(
3159
- --_ctm-mob-dn-pn-dt-se-ft-fy,
3160
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
3161
- )
3162
- );
3163
-
3164
- font-size: var(
3165
- --_sf-hr-fs,
3166
- var(
3167
- --_ctm-mob-dn-pn-dt-se-ft-se,
3168
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
3169
- )
3170
- );
3171
-
3172
- text-decoration: var(
3173
- --_sf-hr-td,
3174
- var(
3175
- --_ctm-mob-dn-pn-dt-se-ue,
3176
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
3177
- )
3178
- );
3179
-
3180
- font-weight: var(
3181
- --_sf-hr-fw,
3182
- var(
3183
- --_ctm-mob-dn-pn-dt-se-ft-wt,
3184
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
3185
- )
3186
- );
3187
-
3188
- font-style: var(
3189
- --_sf-hr-ft,
3190
- var(
3191
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
3192
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
3193
- )
3194
- );
3195
-
3196
- text-align: var(
3197
- --_sf-hr-ta,
3198
- var(
3199
- --_ctm-mob-dn-pn-dt-se-tt-an,
3200
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
3201
- )
3202
- );
3203
-
3204
- letter-spacing: var(
3205
- --_sf-hr-ls,
3206
- var(
3207
- --_ctm-mob-dn-pn-dt-se-lr-sg,
3208
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
3209
- )
3210
- );
3211
-
3212
- line-height: var(
3213
- --_sf-hr-lh,
3214
- var(
3215
- --_ctm-mob-dn-pn-dt-se-le-ht,
3216
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
3217
- )
3218
- );
2584
+ color: var(--_sf-hr-fc,
2585
+ var(--_ctm-mob-dn-pn-dt-se-cr,
2586
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))));
2587
+
2588
+ font-family: var(--_sf-hr-ff,
2589
+ var(--_ctm-mob-dn-pn-dt-se-ft-fy,
2590
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))));
2591
+ text-transform: var(--_sf-hr-tt-tm,
2592
+ var(--_ctm-mob-dn-pn-dt-se-tt-tm,
2593
+ var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))));
2594
+ word-wrap: var(--_sf-hr-wd-wp,
2595
+ var(--_ctm-mob-dn-pn-dt-se-wd-wp,
2596
+ var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))));
2597
+ word-break: var(--_sf-hr-wd-bk,
2598
+ var(--_ctm-mob-dn-pn-dt-se-wd-bk,
2599
+ var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))));
2600
+
2601
+ font-size: var(--_sf-hr-fs,
2602
+ var(--_ctm-mob-dn-pn-dt-se-ft-se,
2603
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))));
2604
+
2605
+ text-decoration: var(--_sf-hr-td,
2606
+ var(--_ctm-mob-dn-pn-dt-se-ue,
2607
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))));
2608
+
2609
+ font-weight: var(--_sf-hr-fw,
2610
+ var(--_ctm-mob-dn-pn-dt-se-ft-wt,
2611
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))));
2612
+
2613
+ font-style: var(--_sf-hr-ft,
2614
+ var(--_ctm-mob-dn-pn-dt-se-ft-se-ic,
2615
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))));
2616
+
2617
+ text-align: var(--_sf-hr-ta,
2618
+ var(--_ctm-mob-dn-pn-dt-se-tt-an,
2619
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))));
2620
+
2621
+ letter-spacing: var(--_sf-hr-ls,
2622
+ var(--_ctm-mob-dn-pn-dt-se-lr-sg,
2623
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))));
2624
+
2625
+ line-height: var(--_sf-hr-lh,
2626
+ var(--_ctm-mob-dn-pn-dt-se-le-ht,
2627
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))));
3219
2628
  }
3220
2629
  }
2630
+
3221
2631
  .pagination__arrows {
3222
- color: var(
3223
- --_sf-hr-fc,
3224
- var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
3225
- );
3226
-
3227
- font-size: var(
3228
- --_sf-hr-fs,
3229
- var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
3230
- );
2632
+ color: var(--_sf-hr-fc,
2633
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1))));
2634
+
2635
+ font-size: var(--_sf-hr-fs,
2636
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se))));
3231
2637
  }
3232
2638
  }
3233
2639
  }
2640
+
3234
2641
  .btn__with__text[data-btn-name="loadMore"] {
3235
2642
  &[data-show-shadow="false"] {
3236
2643
  --_show-shadow: none;
3237
2644
  }
2645
+
3238
2646
  &[data-icon-position="left"] {
3239
2647
  --_sf-fd-bn: row;
3240
2648
  }
2649
+
3241
2650
  &[data-icon-position="right"] {
3242
2651
  --_sf-fd-bn: row-reverse;
3243
2652
  }
2653
+
3244
2654
  &[data-icon-position="center"] {
3245
2655
  --_sf-fd-bn: row;
3246
2656
  }
3247
2657
 
3248
2658
  &:hover {
3249
- --_sf-hr-bd-cr: var(
3250
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
3251
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
3252
- );
3253
- --_sf-hr-br-cr: var(
3254
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
3255
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
3256
- );
3257
- --_sf-hr-br-se: var(
3258
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
3259
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
3260
- );
3261
- --_sf-hr-br-wh: var(
3262
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
3263
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
3264
- );
3265
- --_sf-hr-br-rs: var(
3266
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
3267
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
3268
- );
3269
- --_sf-hr-at: var(
3270
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
3271
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
3272
- );
3273
- --_sf-hr-gp: var(
3274
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
3275
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
3276
- );
2659
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
2660
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr)));
2661
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
2662
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr)));
2663
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-se,
2664
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se)));
2665
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
2666
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh)));
2667
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
2668
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs)));
2669
+ --_sf-hr-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-at,
2670
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at)));
2671
+ --_sf-hr-gp: var(--_ctm-mob-dn-ld-me-bn-hr-se-gp,
2672
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp)));
3277
2673
 
3278
2674
  // for shadow
3279
- --_sf-hr-sw-ae: var(
3280
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
3281
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
3282
- );
3283
- --_sf-hr-sw-br: var(
3284
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
3285
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
3286
- );
3287
- --_sf-hr-sw-hr: var(
3288
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
3289
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
3290
- );
3291
- --_sf-hr-sw-cr: var(
3292
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
3293
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
3294
- );
2675
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
2676
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae)));
2677
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
2678
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br)));
2679
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
2680
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr)));
2681
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
2682
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr)));
3295
2683
 
3296
2684
  // for font
3297
2685
 
3298
- --_sf-hr-cr: var(
3299
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
3300
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
3301
- );
3302
- --_sf-hr-ft-fy: var(
3303
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
3304
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
3305
- );
3306
- --_sf-hr-ft-se: var(
3307
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
3308
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
3309
- );
3310
- --_sf-hr-ft-wt: var(
3311
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
3312
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
3313
- );
3314
- --_sf-hr-ft-se-ic: var(
3315
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
3316
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
3317
- );
3318
- --_sf-hr-tt-an: var(
3319
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
3320
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
3321
- );
3322
- --_sf-hr-lr-sg: var(
3323
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
3324
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
3325
- );
3326
- --_sf-hr-le-ht: var(
3327
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
3328
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
3329
- );
3330
-
3331
- --_sf-hr-in-se: var(
3332
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
3333
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
3334
- );
3335
- --_sf-hr-in-se: var(
3336
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
3337
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
3338
- );
3339
- --_sf-hr-in-c1: var(
3340
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
3341
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
3342
- );
3343
- --_sf-hr-ue: var(
3344
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
3345
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
3346
- );
2686
+ --_sf-hr-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-cr,
2687
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr)));
2688
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
2689
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy)));
2690
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-tm,
2691
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm)));
2692
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-wp,
2693
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp)));
2694
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-bk,
2695
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk)));
2696
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
2697
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se)));
2698
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
2699
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt)));
2700
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
2701
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic)));
2702
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
2703
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an)));
2704
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
2705
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg)));
2706
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
2707
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht)));
2708
+
2709
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
2710
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
2711
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
2712
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
2713
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
2714
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1)));
2715
+ --_sf-hr-ue: var(--_ctm-mob-dn-ld-me-bn-hr-se-ue,
2716
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue)));
3347
2717
 
3348
2718
  // for pading and width
3349
- --_sf-hr-pg: var(
3350
- --_ctm-mob-dn-ld-me-bn-hr-pg,
3351
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
3352
- );
3353
- --_sf-hr-wh: var(
3354
- --_ctm-mob-dn-ld-me-bn-hr-wh,
3355
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
3356
- );
2719
+ --_sf-hr-pg: var(--_ctm-mob-dn-ld-me-bn-hr-pg,
2720
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg)));
2721
+ --_sf-hr-wh: var(--_ctm-mob-dn-ld-me-bn-hr-wh,
2722
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh)));
3357
2723
 
3358
2724
  &[data-hover-show-shadow="false"] {
3359
2725
  --_hover-show-shadow: none;
3360
2726
  }
2727
+
3361
2728
  &[data-hover-show-icon="false"] {
3362
2729
  --_hover-show-icon: none;
3363
2730
  }
3364
2731
  }
3365
- background-color: var(
3366
- --_sf-hr-bd-cr,
3367
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr)
3368
- );
2732
+
2733
+ background-color: var(--_sf-hr-bd-cr,
2734
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
3369
2735
 
3370
2736
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
3371
2737
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
@@ -3378,10 +2744,7 @@ $minWidth: 70px;
3378
2744
 
3379
2745
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
3380
2746
 
3381
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
3382
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
3383
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
3384
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
2747
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
3385
2748
 
3386
2749
  &[data-show-border="true"] {
3387
2750
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
@@ -3397,22 +2760,26 @@ $minWidth: 70px;
3397
2760
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
3398
2761
 
3399
2762
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
2763
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm));
2764
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp));
2765
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-bk));
2766
+
2767
+ &.flex__overflow {
2768
+ white-space: normal;
2769
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2770
+ }
3400
2771
 
3401
2772
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
3402
2773
 
3403
2774
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
3404
2775
 
3405
- font-style: var(
3406
- --_sf-hr-ft-se-ic,
3407
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
3408
- );
2776
+ font-style: var(--_sf-hr-ft-se-ic,
2777
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic));
3409
2778
 
3410
2779
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
3411
2780
 
3412
- letter-spacing: var(
3413
- --_sf-hr-lr-sg,
3414
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg)
3415
- );
2781
+ letter-spacing: var(--_sf-hr-lr-sg,
2782
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
3416
2783
 
3417
2784
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
3418
2785
 
@@ -3421,6 +2788,7 @@ $minWidth: 70px;
3421
2788
 
3422
2789
  .icon {
3423
2790
  display: var(--_hover-show-icon, var(--_show-icon, flex));
2791
+
3424
2792
  svg {
3425
2793
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
3426
2794
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
@@ -3432,6 +2800,7 @@ $minWidth: 70px;
3432
2800
  }
3433
2801
  }
3434
2802
  }
2803
+
3435
2804
  [data-element-style="Text"] {
3436
2805
  display: inline-block;
3437
2806
  width: 100%;
@@ -3462,34 +2831,19 @@ $minWidth: 70px;
3462
2831
  width: var(--_ctm-mob-dn-it-wh, var(--_ctm-tab-dn-it-wh, var(--_ctm-dn-it-wh)));
3463
2832
  // height: 40px;
3464
2833
 
3465
- background-color: var(
3466
- --_ctm-mob-dn-it-wh,
3467
- var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
3468
- );
3469
- box-shadow: var(
3470
- --_ctm-mob-dn-it-sw-ae,
3471
- var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
3472
- )
3473
- var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
3474
- var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
3475
- var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
3476
- border-radius: var(
3477
- --_ctm-mob-dn-it-br-rs,
3478
- var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
3479
- );
3480
-
3481
- border-color: var(
3482
- --_ctm-mob-dn-it-br-cr,
3483
- var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
3484
- );
3485
- border-style: var(
3486
- --_ctm-mob-dn-it-br-se,
3487
- var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
3488
- );
3489
- border-width: var(
3490
- --_ctm-mob-dn-it-br-wh,
3491
- var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
3492
- );
2834
+ background-color: var(--_ctm-mob-dn-it-wh,
2835
+ var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr)));
2836
+ box-shadow: var(--_ctm-mob-dn-it-sw-ae,
2837
+ var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))) var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br))) var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd))) var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
2838
+ border-radius: var(--_ctm-mob-dn-it-br-rs,
2839
+ var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs)));
2840
+
2841
+ border-color: var(--_ctm-mob-dn-it-br-cr,
2842
+ var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr)));
2843
+ border-style: var(--_ctm-mob-dn-it-br-se,
2844
+ var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se)));
2845
+ border-width: var(--_ctm-mob-dn-it-br-wh,
2846
+ var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh)));
3493
2847
 
3494
2848
  padding: prepareMediaVariable(--_ctm-dn-it-pg);
3495
2849
  // flex-grow: 1;
@@ -3497,40 +2851,31 @@ $minWidth: 70px;
3497
2851
 
3498
2852
  &::placeholder {
3499
2853
  color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
3500
- font-family: var(
3501
- --_ctm-mob-dn-pr-tt-ft-fy,
3502
- var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
3503
- );
3504
- font-size: var(
3505
- --_ctm-mob-dn-pr-tt-ft-se,
3506
- var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
3507
- );
3508
- font-weight: var(
3509
- --_ctm-mob-dn-pr-tt-ft-wt,
3510
- var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
3511
- );
3512
- font-style: var(
3513
- --_ctm-mob-dn-pr-tt-ft-se-ic,
3514
- var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
3515
- );
3516
- text-align: var(
3517
- --_ctm-mob-dn-pr-tt-tt-an,
3518
- var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
3519
- );
3520
- letter-spacing: var(
3521
- --_ctm-mob-dn-pr-tt-lr-sg,
3522
- var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
3523
- );
3524
- line-height: var(
3525
- --_ctm-mob-dn-pr-tt-le-ht,
3526
- var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
3527
- );
3528
- text-decoration: var(
3529
- --_ctm-mob-dn-pr-tt-ue,
3530
- var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
3531
- );
2854
+ font-family: var(--_ctm-mob-dn-pr-tt-ft-fy,
2855
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy)));
2856
+ text-transform: var(--_ctm-mob-dn-pr-tt-tt-tm,
2857
+ var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm)));
2858
+ word-wrap: var(--_ctm-mob-dn-pr-tt-wd-wp,
2859
+ var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp)));
2860
+ word-break: var(--_ctm-mob-dn-pr-tt-wd-bk,
2861
+ var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk)));
2862
+ font-size: var(--_ctm-mob-dn-pr-tt-ft-se,
2863
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se)));
2864
+ font-weight: var(--_ctm-mob-dn-pr-tt-ft-wt,
2865
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt)));
2866
+ font-style: var(--_ctm-mob-dn-pr-tt-ft-se-ic,
2867
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic)));
2868
+ text-align: var(--_ctm-mob-dn-pr-tt-tt-an,
2869
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an)));
2870
+ letter-spacing: var(--_ctm-mob-dn-pr-tt-lr-sg,
2871
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg)));
2872
+ line-height: var(--_ctm-mob-dn-pr-tt-le-ht,
2873
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht)));
2874
+ text-decoration: var(--_ctm-mob-dn-pr-tt-ue,
2875
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue)));
3532
2876
  }
3533
2877
  }
2878
+
3534
2879
  .cross-line {
3535
2880
  position: absolute;
3536
2881
  inset: 0;
@@ -3555,4 +2900,4 @@ $minWidth: 70px;
3555
2900
  }
3556
2901
  }
3557
2902
  }
3558
- }
2903
+ }