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

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 (124) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -18,31 +18,22 @@
18
18
  font-weight: 600;
19
19
  color: rgba(75, 69, 70, 1);
20
20
  }
21
+
21
22
  .action__buttons__wrapper {
22
- background-color: var(
23
- --_ctm-mob-dn-wt-se-bd-cr,
24
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
25
- );
26
-
27
- border-color: var(
28
- --_ctm-mob-dn-wt-se-br-cr,
29
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
30
- );
31
-
32
- border-style: var(
33
- --_ctm-mob-dn-wt-se-br-se,
34
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
35
- );
36
-
37
- border-width: var(
38
- --_ctm-mob-dn-wt-se-br-wh,
39
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
40
- );
41
-
42
- border-radius: var(
43
- --_ctm-mob-dn-wt-se-br-rs,
44
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
45
- );
23
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
24
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
25
+
26
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
27
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
28
+
29
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
30
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
31
+
32
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
33
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
34
+
35
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
36
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
46
37
 
47
38
  // Widget Style's "Show Border" switch. The border above is painted from CSS
48
39
  // variables, so the switch arrives as a data attribute and the width is zeroed
@@ -52,13 +43,8 @@
52
43
  border-style: none;
53
44
  }
54
45
 
55
- box-shadow: var(
56
- --_show-shadow,
57
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
58
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
59
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
60
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
61
- );
46
+ box-shadow: var(--_show-shadow,
47
+ 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))));
62
48
 
63
49
  //
64
50
 
@@ -78,173 +64,123 @@
78
64
  // }
79
65
  .cart-dropdown-container {
80
66
  &:hover {
81
- --_sf-hr-wh: var(
82
- --_ctm-mob-dn-wt-hr-wh,
83
- var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
84
- );
67
+ --_sf-hr-wh: var(--_ctm-mob-dn-wt-hr-wh,
68
+ var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh)));
85
69
  }
70
+
86
71
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
87
72
  }
73
+
88
74
  &[data-display-style="Stack Horizontally"] {
89
75
  flex-direction: row;
90
76
  row-gap: var(--_ctm-mob-lt-im-vl-sg, var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg)));
91
77
  flex-wrap: wrap;
92
78
  }
79
+
93
80
  // .btn__with__text {
94
81
  // white-space: nowrap;
95
82
  // }
96
83
 
97
84
  .btn__with__text {
98
85
  white-space: nowrap;
86
+
99
87
  &[data-btn-name="addToCart"] {
100
88
  justify-content: center;
101
89
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr))};
90
+
102
91
  &[data-show-shadow="false"] {
103
92
  --_show-shadow: none;
104
93
  }
94
+
105
95
  &[data-icon-position="left"] {
106
96
  --_sf-fd-bn: row;
107
97
  }
98
+
108
99
  &[data-icon-position="right"] {
109
100
  --_sf-fd-bn: row-reverse;
110
101
  }
102
+
111
103
  &[data-icon-position="center"] {
112
104
  --_sf-fd-bn: row;
113
105
  }
114
106
 
115
107
  &:hover {
116
- --_sf-hr-bd-cr: var(
117
- --_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
118
- var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
119
- );
120
- --_sf-hr-br-cr: var(
121
- --_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
122
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr))
123
- );
124
- --_sf-hr-br-se: var(
125
- --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
126
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
127
- );
128
- --_sf-hr-br-wh: var(
129
- --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
130
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
131
- );
132
- --_sf-hr-br-rs: var(
133
- --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
134
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
135
- );
136
- --_sf-hr-at: var(
137
- --_ctm-mob-dn-ad-to-ct-hr-se-at,
138
- var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
139
- );
140
- --_sf-hr-gp: var(
141
- --_ctm-mob-dn-ad-to-ct-hr-se-gp,
142
- var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
143
- );
108
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
109
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr)));
110
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
111
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr)));
112
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ad-to-ct-hr-se-br-se,
113
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se)));
114
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
115
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh)));
116
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
117
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs)));
118
+ --_sf-hr-at: var(--_ctm-mob-dn-ad-to-ct-hr-se-at,
119
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at)));
120
+ --_sf-hr-gp: var(--_ctm-mob-dn-ad-to-ct-hr-se-gp,
121
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp)));
144
122
 
145
123
  // for shadow
146
- --_sf-hr-sw-ae: var(
147
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
148
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae))
149
- );
150
- --_sf-hr-sw-br: var(
151
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
152
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br))
153
- );
154
- --_sf-hr-sw-hr: var(
155
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
156
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr))
157
- );
158
- --_sf-hr-sw-cr: var(
159
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
160
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr))
161
- );
124
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
125
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae)));
126
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
127
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br)));
128
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
129
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr)));
130
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
131
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr)));
162
132
 
163
133
  // for font
164
134
 
165
- --_sf-hr-cr: var(
166
- --_ctm-mob-dn-ad-to-ct-hr-se-cr,
167
- var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr))
168
- );
169
- --_sf-hr-ft-fy: var(
170
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
171
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy))
172
- );
173
- --_sf-hr-tt-tm: var(
174
- --_ctm-mob-dn-ad-to-ct-hr-se-tt-tm,
175
- var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-tm, var(--_ctm-dn-ad-to-ct-hr-se-tt-tm))
176
- );
177
- --_sf-hr-wd-wp: var(
178
- --_ctm-mob-dn-ad-to-ct-hr-se-wd-wp,
179
- var(--_ctm-tab-dn-ad-to-ct-hr-se-wd-wp, var(--_ctm-dn-ad-to-ct-hr-se-wd-wp))
180
- );
181
- --_sf-hr-wd-bk: var(
182
- --_ctm-mob-dn-ad-to-ct-hr-se-wd-bk,
183
- var(--_ctm-tab-dn-ad-to-ct-hr-se-wd-bk, var(--_ctm-dn-ad-to-ct-hr-se-wd-bk))
184
- );
185
- --_sf-hr-ft-se: var(
186
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
187
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se))
188
- );
189
- --_sf-hr-ft-wt: var(
190
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
191
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt))
192
- );
193
- --_sf-hr-ft-se-ic: var(
194
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
195
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic))
196
- );
197
- --_sf-hr-tt-an: var(
198
- --_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
199
- var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an))
200
- );
201
- --_sf-hr-lr-sg: var(
202
- --_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
203
- var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg))
204
- );
205
- --_sf-hr-le-ht: var(
206
- --_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
207
- var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht))
208
- );
209
-
210
- --_sf-hr-in-se: var(
211
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
212
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
213
- );
214
- --_sf-hr-in-se: var(
215
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
216
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
217
- );
218
- --_sf-hr-in-c1: var(
219
- --_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
220
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
221
- );
222
- --_sf-hr-ue: var(
223
- --_ctm-mob-dn-ad-to-ct-hr-se-ue,
224
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
225
- );
135
+ --_sf-hr-cr: var(--_ctm-mob-dn-ad-to-ct-hr-se-cr,
136
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr)));
137
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
138
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy)));
139
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ad-to-ct-hr-se-tt-tm,
140
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-tm, var(--_ctm-dn-ad-to-ct-hr-se-tt-tm)));
141
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ad-to-ct-hr-se-wd-wp,
142
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-wd-wp, var(--_ctm-dn-ad-to-ct-hr-se-wd-wp)));
143
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ad-to-ct-hr-se-wd-bk,
144
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-wd-bk, var(--_ctm-dn-ad-to-ct-hr-se-wd-bk)));
145
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
146
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se)));
147
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
148
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt)));
149
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
150
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic)));
151
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
152
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an)));
153
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
154
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg)));
155
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
156
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht)));
157
+
158
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-ct-hr-se-in-se,
159
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se)));
160
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-ct-hr-se-in-se,
161
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se)));
162
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
163
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1)));
164
+ --_sf-hr-ue: var(--_ctm-mob-dn-ad-to-ct-hr-se-ue,
165
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue)));
226
166
 
227
167
  // for pading and width
228
- --_sf-hr-pg: var(
229
- --_ctm-mob-dn-ad-to-ct-hr-pg,
230
- var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
231
- );
232
- --_sf-hr-wh: var(
233
- --_ctm-mob-dn-ad-to-ct-hr-wh,
234
- var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
235
- );
168
+ --_sf-hr-pg: var(--_ctm-mob-dn-ad-to-ct-hr-pg,
169
+ var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg)));
170
+ --_sf-hr-wh: var(--_ctm-mob-dn-ad-to-ct-hr-wh,
171
+ var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh)));
236
172
 
237
173
  &[data-hover-show-shadow="false"] {
238
174
  --_hover-show-shadow: none;
239
175
  }
176
+
240
177
  &[data-hover-show-icon="false"] {
241
178
  --_hover-show-icon: none;
242
179
  }
243
180
  }
244
- background-color: var(
245
- --_sf-hr-bd-cr,
246
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr)
247
- );
181
+
182
+ background-color: var(--_sf-hr-bd-cr,
183
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
248
184
 
249
185
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
250
186
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
@@ -257,10 +193,7 @@
257
193
 
258
194
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
259
195
 
260
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae))
261
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br))
262
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd))
263
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
196
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
264
197
 
265
198
  &[data-show-border="true"] {
266
199
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
@@ -279,6 +212,7 @@
279
212
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-tm));
280
213
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-wp));
281
214
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-bk));
215
+
282
216
  &.flex__overflow {
283
217
  white-space: normal;
284
218
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -288,17 +222,13 @@
288
222
 
289
223
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
290
224
 
291
- font-style: var(
292
- --_sf-hr-ft-se-ic,
293
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
294
- );
225
+ font-style: var(--_sf-hr-ft-se-ic,
226
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic));
295
227
 
296
228
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
297
229
 
298
- letter-spacing: var(
299
- --_sf-hr-lr-sg,
300
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg)
301
- );
230
+ letter-spacing: var(--_sf-hr-lr-sg,
231
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg));
302
232
 
303
233
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
304
234
 
@@ -307,6 +237,7 @@
307
237
 
308
238
  .icon {
309
239
  display: var(--_hover-show-icon, var(--_show-icon, flex));
240
+
310
241
  svg {
311
242
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
312
243
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
@@ -317,6 +248,7 @@
317
248
  }
318
249
  }
319
250
  }
251
+
320
252
  [data-element-style="Text"] {
321
253
  display: inline-block;
322
254
  width: 100%;
@@ -343,149 +275,99 @@
343
275
 
344
276
  &[data-btn-name="buyNow"] {
345
277
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr))};
278
+
346
279
  &[data-show-shadow="false"] {
347
280
  --_show-shadow: none;
348
281
  }
282
+
349
283
  &[data-icon-position="left"] {
350
284
  --_sf-fd-bn: row;
351
285
  }
286
+
352
287
  &[data-icon-position="right"] {
353
288
  --_sf-fd-bn: row-reverse;
354
289
  }
290
+
355
291
  &[data-icon-position="center"] {
356
292
  --_sf-fd-bn: row;
357
293
  }
358
294
 
359
295
  &:hover {
360
- --_sf-hr-bd-cr: var(
361
- --_ctm-mob-dn-by-nw-hr-se-bd-cr,
362
- var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
363
- );
364
- --_sf-hr-br-cr: var(
365
- --_ctm-mob-dn-by-nw-hr-se-br-cr,
366
- var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
367
- );
368
- --_sf-hr-br-se: var(
369
- --_ctm-mob-dn-by-nw-hr-se-br-se,
370
- var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
371
- );
372
- --_sf-hr-br-wh: var(
373
- --_ctm-mob-dn-by-nw-hr-se-br-wh,
374
- var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
375
- );
376
- --_sf-hr-br-rs: var(
377
- --_ctm-mob-dn-by-nw-hr-se-br-rs,
378
- var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
379
- );
380
-
381
- --_sf-hr-at: var(
382
- --_ctm-mob-dn-by-nw-hr-se-at,
383
- var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
384
- );
385
- --_sf-hr-gp: var(
386
- --_ctm-mob-dn-by-nw-hr-se-gp,
387
- var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
388
- );
296
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-by-nw-hr-se-bd-cr,
297
+ var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr)));
298
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-by-nw-hr-se-br-cr,
299
+ var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr)));
300
+ --_sf-hr-br-se: var(--_ctm-mob-dn-by-nw-hr-se-br-se,
301
+ var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se)));
302
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-by-nw-hr-se-br-wh,
303
+ var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh)));
304
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-by-nw-hr-se-br-rs,
305
+ var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs)));
306
+
307
+ --_sf-hr-at: var(--_ctm-mob-dn-by-nw-hr-se-at,
308
+ var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at)));
309
+ --_sf-hr-gp: var(--_ctm-mob-dn-by-nw-hr-se-gp,
310
+ var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp)));
389
311
 
390
312
  // for shadow
391
- --_sf-hr-sw-ae: var(
392
- --_ctm-mob-dn-by-nw-hr-se-sw-ae,
393
- var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae))
394
- );
395
- --_sf-hr-sw-br: var(
396
- --_ctm-mob-dn-by-nw-hr-se-sw-br,
397
- var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br))
398
- );
399
- --_sf-hr-sw-hr: var(
400
- --_ctm-mob-dn-by-nw-hr-se-sw-hr,
401
- var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr))
402
- );
403
- --_sf-hr-sw-cr: var(
404
- --_ctm-mob-dn-by-nw-hr-se-sw-cr,
405
- var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr))
406
- );
313
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-by-nw-hr-se-sw-ae,
314
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae)));
315
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-by-nw-hr-se-sw-br,
316
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br)));
317
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-by-nw-hr-se-sw-hr,
318
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr)));
319
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-by-nw-hr-se-sw-cr,
320
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr)));
407
321
 
408
322
  // for font
409
323
 
410
- --_sf-hr-cr: var(
411
- --_ctm-mob-dn-by-nw-hr-se-cr,
412
- var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr))
413
- );
414
- --_sf-hr-ft-fy: var(
415
- --_ctm-mob-dn-by-nw-hr-se-ft-fy,
416
- var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
417
- );
418
- --_sf-hr-tt-tm: var(
419
- --_ctm-mob-dn-by-nw-hr-se-tt-tm,
420
- var(--_ctm-tab-dn-by-nw-hr-se-tt-tm, var(--_ctm-dn-by-nw-hr-se-tt-tm))
421
- );
422
- --_sf-hr-wd-wp: var(
423
- --_ctm-mob-dn-by-nw-hr-se-wd-wp,
424
- var(--_ctm-tab-dn-by-nw-hr-se-wd-wp, var(--_ctm-dn-by-nw-hr-se-wd-wp))
425
- );
426
- --_sf-hr-wd-bk: var(
427
- --_ctm-mob-dn-by-nw-hr-se-wd-bk,
428
- var(--_ctm-tab-dn-by-nw-hr-se-wd-bk, var(--_ctm-dn-by-nw-hr-se-wd-bk))
429
- );
430
- --_sf-hr-ft-se: var(
431
- --_ctm-mob-dn-by-nw-hr-se-ft-se,
432
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))
433
- );
434
- --_sf-hr-ft-wt: var(
435
- --_ctm-mob-dn-by-nw-hr-se-ft-wt,
436
- var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt))
437
- );
438
- --_sf-hr-ft-se-ic: var(
439
- --_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
440
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic))
441
- );
442
- --_sf-hr-tt-an: var(
443
- --_ctm-mob-dn-by-nw-hr-se-tt-an,
444
- var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an))
445
- );
446
- --_sf-hr-lr-sg: var(
447
- --_ctm-mob-dn-by-nw-hr-se-lr-sg,
448
- var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg))
449
- );
450
- --_sf-hr-le-ht: var(
451
- --_ctm-mob-dn-by-nw-hr-se-le-ht,
452
- var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht))
453
- );
454
-
455
- --_sf-hr-in-se: var(
456
- --_ctm-mob-dn-by-nw-hr-se-in-se,
457
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
458
- );
459
- --_sf-hr-in-se: var(
460
- --_ctm-mob-dn-by-nw-hr-se-in-se,
461
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
462
- );
463
- --_sf-hr-in-c1: var(
464
- --_ctm-mob-dn-by-nw-hr-se-in-c1,
465
- var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
466
- );
467
- --_sf-hr-ue: var(
468
- --_ctm-mob-dn-by-nw-hr-se-ue,
469
- var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
470
- );
324
+ --_sf-hr-cr: var(--_ctm-mob-dn-by-nw-hr-se-cr,
325
+ var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr)));
326
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-by-nw-hr-se-ft-fy,
327
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy)));
328
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-by-nw-hr-se-tt-tm,
329
+ var(--_ctm-tab-dn-by-nw-hr-se-tt-tm, var(--_ctm-dn-by-nw-hr-se-tt-tm)));
330
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-by-nw-hr-se-wd-wp,
331
+ var(--_ctm-tab-dn-by-nw-hr-se-wd-wp, var(--_ctm-dn-by-nw-hr-se-wd-wp)));
332
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-by-nw-hr-se-wd-bk,
333
+ var(--_ctm-tab-dn-by-nw-hr-se-wd-bk, var(--_ctm-dn-by-nw-hr-se-wd-bk)));
334
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-by-nw-hr-se-ft-se,
335
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se)));
336
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-by-nw-hr-se-ft-wt,
337
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt)));
338
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
339
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic)));
340
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-by-nw-hr-se-tt-an,
341
+ var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an)));
342
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-by-nw-hr-se-lr-sg,
343
+ var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg)));
344
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-by-nw-hr-se-le-ht,
345
+ var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht)));
346
+
347
+ --_sf-hr-in-se: var(--_ctm-mob-dn-by-nw-hr-se-in-se,
348
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se)));
349
+ --_sf-hr-in-se: var(--_ctm-mob-dn-by-nw-hr-se-in-se,
350
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se)));
351
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-by-nw-hr-se-in-c1,
352
+ var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1)));
353
+ --_sf-hr-ue: var(--_ctm-mob-dn-by-nw-hr-se-ue,
354
+ var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue)));
471
355
 
472
356
  // for pading and width
473
- --_sf-hr-pg: var(
474
- --_ctm-mob-dn-by-nw-hr-pg,
475
- var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
476
- );
477
- --_sf-hr-wh: var(
478
- --_ctm-mob-dn-by-nw-hr-wh,
479
- var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh))
480
- );
357
+ --_sf-hr-pg: var(--_ctm-mob-dn-by-nw-hr-pg,
358
+ var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg)));
359
+ --_sf-hr-wh: var(--_ctm-mob-dn-by-nw-hr-wh,
360
+ var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh)));
481
361
 
482
362
  &[data-hover-show-shadow="false"] {
483
363
  --_hover-show-shadow: none;
484
364
  }
365
+
485
366
  &[data-hover-show-icon="false"] {
486
367
  --_hover-show-icon: none;
487
368
  }
488
369
  }
370
+
489
371
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
490
372
 
491
373
  display: flex;
@@ -503,10 +385,7 @@
503
385
 
504
386
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
505
387
 
506
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae))
507
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br))
508
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd))
509
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
388
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
510
389
 
511
390
  &[data-show-border="true"] {
512
391
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
@@ -525,6 +404,7 @@
525
404
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-tm));
526
405
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wd-wp));
527
406
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wd-bk));
407
+
528
408
  &.flex__overflow {
529
409
  white-space: normal;
530
410
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -534,10 +414,8 @@
534
414
 
535
415
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
536
416
 
537
- font-style: var(
538
- --_sf-hr-ft-se-ic,
539
- prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic)
540
- );
417
+ font-style: var(--_sf-hr-ft-se-ic,
418
+ prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic));
541
419
 
542
420
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
543
421
 
@@ -550,6 +428,7 @@
550
428
 
551
429
  .icon {
552
430
  display: var(--_hover-show-icon, var(--_show-icon, flex));
431
+
553
432
  svg {
554
433
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
555
434
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
@@ -560,6 +439,7 @@
560
439
  }
561
440
  }
562
441
  }
442
+
563
443
  [data-element-style="Text"] {
564
444
  display: inline-block;
565
445
  width: 100%;
@@ -586,149 +466,99 @@
586
466
 
587
467
  &[data-btn-name="wishlist"] {
588
468
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr))};
469
+
589
470
  &[data-show-shadow="false"] {
590
471
  --_show-shadow: none;
591
472
  }
473
+
592
474
  &[data-icon-position="left"] {
593
475
  --_sf-fd-bn: row;
594
476
  }
477
+
595
478
  &[data-icon-position="right"] {
596
479
  --_sf-fd-bn: row-reverse;
597
480
  }
481
+
598
482
  &[data-icon-position="center"] {
599
483
  --_sf-fd-bn: row;
600
484
  }
601
485
 
602
486
  &:hover {
603
- --_sf-hr-bd-cr: var(
604
- --_ctm-mob-dn-wt-hr-se-bd-cr,
605
- var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
606
- );
607
- --_sf-hr-br-cr: var(
608
- --_ctm-mob-dn-wt-hr-se-br-cr,
609
- var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
610
- );
611
- --_sf-hr-br-se: var(
612
- --_ctm-mob-dn-wt-hr-se-br-se,
613
- var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
614
- );
615
- --_sf-hr-br-wh: var(
616
- --_ctm-mob-dn-wt-hr-se-br-wh,
617
- var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
618
- );
619
- --_sf-hr-br-rs: var(
620
- --_ctm-mob-dn-wt-hr-se-br-rs,
621
- var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
622
- );
623
-
624
- --_sf-hr-at: var(
625
- --_ctm-mob-dn-wt-hr-se-at,
626
- var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
627
- );
628
- --_sf-hr-gp: var(
629
- --_ctm-mob-dn-wt-hr-se-gp,
630
- var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
631
- );
487
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-wt-hr-se-bd-cr,
488
+ var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr)));
489
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-wt-hr-se-br-cr,
490
+ var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr)));
491
+ --_sf-hr-br-se: var(--_ctm-mob-dn-wt-hr-se-br-se,
492
+ var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se)));
493
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-wt-hr-se-br-wh,
494
+ var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh)));
495
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-wt-hr-se-br-rs,
496
+ var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs)));
497
+
498
+ --_sf-hr-at: var(--_ctm-mob-dn-wt-hr-se-at,
499
+ var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at)));
500
+ --_sf-hr-gp: var(--_ctm-mob-dn-wt-hr-se-gp,
501
+ var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp)));
632
502
 
633
503
  // for shadow
634
- --_sf-hr-sw-ae: var(
635
- --_ctm-mob-dn-wt-hr-se-sw-ae,
636
- var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae))
637
- );
638
- --_sf-hr-sw-br: var(
639
- --_ctm-mob-dn-wt-hr-se-sw-br,
640
- var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br))
641
- );
642
- --_sf-hr-sw-hr: var(
643
- --_ctm-mob-dn-wt-hr-se-sw-hr,
644
- var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr))
645
- );
646
- --_sf-hr-sw-cr: var(
647
- --_ctm-mob-dn-wt-hr-se-sw-cr,
648
- var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr))
649
- );
504
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-wt-hr-se-sw-ae,
505
+ var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae)));
506
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-wt-hr-se-sw-br,
507
+ var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br)));
508
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-wt-hr-se-sw-hr,
509
+ var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr)));
510
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-wt-hr-se-sw-cr,
511
+ var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr)));
650
512
 
651
513
  // for font
652
514
 
653
- --_sf-hr-cr: var(
654
- --_ctm-mob-dn-wt-hr-se-cr,
655
- var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr))
656
- );
657
- --_sf-hr-ft-fy: var(
658
- --_ctm-mob-dn-wt-hr-se-ft-fy,
659
- var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy))
660
- );
661
- --_sf-hr-tt-tm: var(
662
- --_ctm-mob-dn-wt-hr-se-tt-tm,
663
- var(--_ctm-tab-dn-wt-hr-se-tt-tm, var(--_ctm-dn-wt-hr-se-tt-tm))
664
- );
665
- --_sf-hr-wd-wp: var(
666
- --_ctm-mob-dn-wt-hr-se-wd-wp,
667
- var(--_ctm-tab-dn-wt-hr-se-wd-wp, var(--_ctm-dn-wt-hr-se-wd-wp))
668
- );
669
- --_sf-hr-wd-bk: var(
670
- --_ctm-mob-dn-wt-hr-se-wd-bk,
671
- var(--_ctm-tab-dn-wt-hr-se-wd-bk, var(--_ctm-dn-wt-hr-se-wd-bk))
672
- );
673
- --_sf-hr-ft-se: var(
674
- --_ctm-mob-dn-wt-hr-se-ft-se,
675
- var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se))
676
- );
677
- --_sf-hr-ft-wt: var(
678
- --_ctm-mob-dn-wt-hr-se-ft-wt,
679
- var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt))
680
- );
681
- --_sf-hr-ft-se-ic: var(
682
- --_ctm-mob-dn-wt-hr-se-ft-se-ic,
683
- var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic))
684
- );
685
- --_sf-hr-tt-an: var(
686
- --_ctm-mob-dn-wt-hr-se-tt-an,
687
- var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an))
688
- );
689
- --_sf-hr-lr-sg: var(
690
- --_ctm-mob-dn-wt-hr-se-lr-sg,
691
- var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg))
692
- );
693
- --_sf-hr-le-ht: var(
694
- --_ctm-mob-dn-wt-hr-se-le-ht,
695
- var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht))
696
- );
697
-
698
- --_sf-hr-in-se: var(
699
- --_ctm-mob-dn-wt-hr-se-in-se,
700
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
701
- );
702
- --_sf-hr-in-se: var(
703
- --_ctm-mob-dn-wt-hr-se-in-se,
704
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
705
- );
706
- --_sf-hr-in-c1: var(
707
- --_ctm-mob-dn-wt-hr-se-in-c1,
708
- var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
709
- );
710
- --_sf-hr-ue: var(
711
- --_ctm-mob-dn-wt-hr-se-ue,
712
- var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
713
- );
515
+ --_sf-hr-cr: var(--_ctm-mob-dn-wt-hr-se-cr,
516
+ var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr)));
517
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-wt-hr-se-ft-fy,
518
+ var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy)));
519
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-wt-hr-se-tt-tm,
520
+ var(--_ctm-tab-dn-wt-hr-se-tt-tm, var(--_ctm-dn-wt-hr-se-tt-tm)));
521
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-wt-hr-se-wd-wp,
522
+ var(--_ctm-tab-dn-wt-hr-se-wd-wp, var(--_ctm-dn-wt-hr-se-wd-wp)));
523
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-wt-hr-se-wd-bk,
524
+ var(--_ctm-tab-dn-wt-hr-se-wd-bk, var(--_ctm-dn-wt-hr-se-wd-bk)));
525
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-wt-hr-se-ft-se,
526
+ var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se)));
527
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-wt-hr-se-ft-wt,
528
+ var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt)));
529
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-wt-hr-se-ft-se-ic,
530
+ var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic)));
531
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-wt-hr-se-tt-an,
532
+ var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an)));
533
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-wt-hr-se-lr-sg,
534
+ var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg)));
535
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-wt-hr-se-le-ht,
536
+ var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht)));
537
+
538
+ --_sf-hr-in-se: var(--_ctm-mob-dn-wt-hr-se-in-se,
539
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se)));
540
+ --_sf-hr-in-se: var(--_ctm-mob-dn-wt-hr-se-in-se,
541
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se)));
542
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-wt-hr-se-in-c1,
543
+ var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1)));
544
+ --_sf-hr-ue: var(--_ctm-mob-dn-wt-hr-se-ue,
545
+ var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue)));
714
546
 
715
547
  // for pading and width
716
- --_sf-hr-pg: var(
717
- --_ctm-mob-dn-wt-hr-pg,
718
- var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
719
- );
720
- --_sf-hr-wh: var(
721
- --_ctm-mob-dn-wt-hr-wh,
722
- var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
723
- );
548
+ --_sf-hr-pg: var(--_ctm-mob-dn-wt-hr-pg,
549
+ var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg)));
550
+ --_sf-hr-wh: var(--_ctm-mob-dn-wt-hr-wh,
551
+ var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh)));
724
552
 
725
553
  &[data-hover-show-shadow="false"] {
726
554
  --_hover-show-shadow: none;
727
555
  }
556
+
728
557
  &[data-hover-show-icon="false"] {
729
558
  --_hover-show-icon: none;
730
559
  }
731
560
  }
561
+
732
562
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
733
563
 
734
564
  display: flex;
@@ -743,10 +573,7 @@
743
573
  width: 100%;
744
574
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
745
575
 
746
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae))
747
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br))
748
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd))
749
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
576
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
750
577
 
751
578
  &[data-show-border="true"] {
752
579
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
@@ -765,6 +592,7 @@
765
592
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-tm));
766
593
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-wt-dt-se-wd-wp));
767
594
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-wt-dt-se-wd-bk));
595
+
768
596
  &.flex__overflow {
769
597
  white-space: normal;
770
598
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -787,6 +615,7 @@
787
615
 
788
616
  .icon {
789
617
  display: var(--_hover-show-icon, var(--_show-icon, flex));
618
+
790
619
  svg {
791
620
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
792
621
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
@@ -797,6 +626,7 @@
797
626
  }
798
627
  }
799
628
  }
629
+
800
630
  [data-element-style="Text"] {
801
631
  display: inline-block;
802
632
  width: 100%;
@@ -820,151 +650,102 @@
820
650
  display: none;
821
651
  }
822
652
  }
653
+
823
654
  &[data-btn-name="compare"] {
824
655
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr))};
656
+
825
657
  &[data-show-shadow="false"] {
826
658
  --_show-shadow: none;
827
659
  }
660
+
828
661
  &[data-icon-position="left"] {
829
662
  --_sf-fd-bn: row;
830
663
  }
664
+
831
665
  &[data-icon-position="right"] {
832
666
  --_sf-fd-bn: row-reverse;
833
667
  }
668
+
834
669
  &[data-icon-position="center"] {
835
670
  --_sf-fd-bn: row;
836
671
  }
837
672
 
838
673
  &:hover {
839
- --_sf-hr-bd-cr: var(
840
- --_ctm-mob-dn-ce-hr-se-bd-cr,
841
- var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
842
- );
843
- --_sf-hr-br-cr: var(
844
- --_ctm-mob-dn-ce-hr-se-br-cr,
845
- var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
846
- );
847
- --_sf-hr-br-se: var(
848
- --_ctm-mob-dn-ce-hr-se-br-se,
849
- var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
850
- );
851
- --_sf-hr-br-wh: var(
852
- --_ctm-mob-dn-ce-hr-se-br-wh,
853
- var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
854
- );
855
- --_sf-hr-br-rs: var(
856
- --_ctm-mob-dn-ce-hr-se-br-rs,
857
- var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
858
- );
859
-
860
- --_sf-hr-at: var(
861
- --_ctm-mob-dn-ce-hr-se-at,
862
- var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
863
- );
864
- --_sf-hr-gp: var(
865
- --_ctm-mob-dn-ce-hr-se-gp,
866
- var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
867
- );
674
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ce-hr-se-bd-cr,
675
+ var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr)));
676
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ce-hr-se-br-cr,
677
+ var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr)));
678
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ce-hr-se-br-se,
679
+ var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se)));
680
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ce-hr-se-br-wh,
681
+ var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh)));
682
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ce-hr-se-br-rs,
683
+ var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs)));
684
+
685
+ --_sf-hr-at: var(--_ctm-mob-dn-ce-hr-se-at,
686
+ var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at)));
687
+ --_sf-hr-gp: var(--_ctm-mob-dn-ce-hr-se-gp,
688
+ var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp)));
868
689
 
869
690
  // for shadow
870
- --_sf-hr-sw-ae: var(
871
- --_ctm-mob-dn-ce-hr-se-sw-ae,
872
- var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae))
873
- );
874
- --_sf-hr-sw-br: var(
875
- --_ctm-mob-dn-ce-hr-se-sw-br,
876
- var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br))
877
- );
878
- --_sf-hr-sw-hr: var(
879
- --_ctm-mob-dn-ce-hr-se-sw-hr,
880
- var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr))
881
- );
882
- --_sf-hr-sw-cr: var(
883
- --_ctm-mob-dn-ce-hr-se-sw-cr,
884
- var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr))
885
- );
691
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ce-hr-se-sw-ae,
692
+ var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae)));
693
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ce-hr-se-sw-br,
694
+ var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br)));
695
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ce-hr-se-sw-hr,
696
+ var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr)));
697
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ce-hr-se-sw-cr,
698
+ var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr)));
886
699
 
887
700
  // for font
888
701
 
889
- --_sf-hr-cr: var(
890
- --_ctm-mob-dn-ce-hr-se-cr,
891
- var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr))
892
- );
893
- --_sf-hr-ft-fy: var(
894
- --_ctm-mob-dn-ce-hr-se-ft-fy,
895
- var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy))
896
- );
897
- --_sf-hr-tt-tm: var(
898
- --_ctm-mob-dn-ce-hr-se-tt-tm,
899
- var(--_ctm-tab-dn-ce-hr-se-tt-tm, var(--_ctm-dn-ce-hr-se-tt-tm))
900
- );
901
- --_sf-hr-wd-wp: var(
902
- --_ctm-mob-dn-ce-hr-se-wd-wp,
903
- var(--_ctm-tab-dn-ce-hr-se-wd-wp, var(--_ctm-dn-ce-hr-se-wd-wp))
904
- );
905
- --_sf-hr-wd-bk: var(
906
- --_ctm-mob-dn-ce-hr-se-wd-bk,
907
- var(--_ctm-tab-dn-ce-hr-se-wd-bk, var(--_ctm-dn-ce-hr-se-wd-bk))
908
- );
909
- --_sf-hr-ft-se: var(
910
- --_ctm-mob-dn-ce-hr-se-ft-se,
911
- var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se))
912
- );
913
- --_sf-hr-ft-wt: var(
914
- --_ctm-mob-dn-ce-hr-se-ft-wt,
915
- var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt))
916
- );
917
- --_sf-hr-ft-se-ic: var(
918
- --_ctm-mob-dn-ce-hr-se-ft-se-ic,
919
- var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic))
920
- );
921
- --_sf-hr-tt-an: var(
922
- --_ctm-mob-dn-ce-hr-se-tt-an,
923
- var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an))
924
- );
925
- --_sf-hr-lr-sg: var(
926
- --_ctm-mob-dn-ce-hr-se-lr-sg,
927
- var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg))
928
- );
929
- --_sf-hr-le-ht: var(
930
- --_ctm-mob-dn-ce-hr-se-le-ht,
931
- var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht))
932
- );
933
-
934
- --_sf-hr-in-se: var(
935
- --_ctm-mob-dn-ce-hr-se-in-se,
936
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
937
- );
938
- --_sf-hr-in-se: var(
939
- --_ctm-mob-dn-ce-hr-se-in-se,
940
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
941
- );
942
- --_sf-hr-in-c1: var(
943
- --_ctm-mob-dn-ce-hr-se-in-c1,
944
- var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
945
- );
946
- --_sf-hr-ue: var(
947
- --_ctm-mob-dn-ce-hr-se-ue,
948
- var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
949
- );
702
+ --_sf-hr-cr: var(--_ctm-mob-dn-ce-hr-se-cr,
703
+ var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr)));
704
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ce-hr-se-ft-fy,
705
+ var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy)));
706
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ce-hr-se-tt-tm,
707
+ var(--_ctm-tab-dn-ce-hr-se-tt-tm, var(--_ctm-dn-ce-hr-se-tt-tm)));
708
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ce-hr-se-wd-wp,
709
+ var(--_ctm-tab-dn-ce-hr-se-wd-wp, var(--_ctm-dn-ce-hr-se-wd-wp)));
710
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ce-hr-se-wd-bk,
711
+ var(--_ctm-tab-dn-ce-hr-se-wd-bk, var(--_ctm-dn-ce-hr-se-wd-bk)));
712
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ce-hr-se-ft-se,
713
+ var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se)));
714
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ce-hr-se-ft-wt,
715
+ var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt)));
716
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ce-hr-se-ft-se-ic,
717
+ var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic)));
718
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ce-hr-se-tt-an,
719
+ var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an)));
720
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ce-hr-se-lr-sg,
721
+ var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg)));
722
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ce-hr-se-le-ht,
723
+ var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht)));
724
+
725
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ce-hr-se-in-se,
726
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se)));
727
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ce-hr-se-in-se,
728
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se)));
729
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ce-hr-se-in-c1,
730
+ var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1)));
731
+ --_sf-hr-ue: var(--_ctm-mob-dn-ce-hr-se-ue,
732
+ var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue)));
950
733
 
951
734
  // for pading and width
952
- --_sf-hr-pg: var(
953
- --_ctm-mob-dn-ce-hr-pg,
954
- var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
955
- );
956
- --_sf-hr-wh: var(
957
- --_ctm-mob-dn-ce-hr-wh,
958
- var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh))
959
- );
735
+ --_sf-hr-pg: var(--_ctm-mob-dn-ce-hr-pg,
736
+ var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg)));
737
+ --_sf-hr-wh: var(--_ctm-mob-dn-ce-hr-wh,
738
+ var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh)));
960
739
 
961
740
  &[data-hover-show-shadow="false"] {
962
741
  --_hover-show-shadow: none;
963
742
  }
743
+
964
744
  &[data-hover-show-icon="false"] {
965
745
  --_hover-show-icon: none;
966
746
  }
967
747
  }
748
+
968
749
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
969
750
 
970
751
  display: flex;
@@ -979,10 +760,7 @@
979
760
 
980
761
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
981
762
 
982
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae))
983
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br))
984
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd))
985
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
763
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
986
764
 
987
765
  &[data-show-border="true"] {
988
766
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
@@ -1001,6 +779,7 @@
1001
779
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-tm));
1002
780
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ce-dt-se-wd-wp));
1003
781
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ce-dt-se-wd-bk));
782
+
1004
783
  &.flex__overflow {
1005
784
  white-space: normal;
1006
785
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1023,6 +802,7 @@
1023
802
 
1024
803
  .icon {
1025
804
  display: var(--_hover-show-icon, var(--_show-icon, flex));
805
+
1026
806
  svg {
1027
807
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
1028
808
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
@@ -1033,6 +813,7 @@
1033
813
  }
1034
814
  }
1035
815
  }
816
+
1036
817
  [data-element-style="Text"] {
1037
818
  display: inline-block;
1038
819
  width: 100%;
@@ -1056,155 +837,104 @@
1056
837
  display: none;
1057
838
  }
1058
839
  }
840
+
1059
841
  &[data-btn-name="addToQuote"] {
1060
842
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr))};
843
+
1061
844
  &[data-show-shadow="false"] {
1062
845
  --_show-shadow: none;
1063
846
  }
847
+
1064
848
  &[data-icon-position="left"] {
1065
849
  --_sf-fd-bn: row;
1066
850
  }
851
+
1067
852
  &[data-icon-position="right"] {
1068
853
  --_sf-fd-bn: row-reverse;
1069
854
  }
855
+
1070
856
  &[data-icon-position="center"] {
1071
857
  --_sf-fd-bn: row;
1072
858
  }
1073
859
 
1074
860
  &:hover {
1075
- --_sf-hr-bd-cr: var(
1076
- --_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
1077
- var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
1078
- );
1079
- --_sf-hr-br-cr: var(
1080
- --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
1081
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
1082
- );
1083
- --_sf-hr-br-se: var(
1084
- --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
1085
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
1086
- );
1087
- --_sf-hr-br-wh: var(
1088
- --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
1089
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
1090
- );
1091
- --_sf-hr-br-rs: var(
1092
- --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
1093
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
1094
- );
1095
-
1096
- --_sf-hr-at: var(
1097
- --_ctm-mob-dn-ad-to-qe-hr-se-at,
1098
- var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
1099
- );
1100
- --_sf-hr-gp: var(
1101
- --_ctm-mob-dn-ad-to-qe-hr-se-gp,
1102
- var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
1103
- );
861
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
862
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr)));
863
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
864
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr)));
865
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ad-to-qe-hr-se-br-se,
866
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se)));
867
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
868
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh)));
869
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
870
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs)));
871
+
872
+ --_sf-hr-at: var(--_ctm-mob-dn-ad-to-qe-hr-se-at,
873
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at)));
874
+ --_sf-hr-gp: var(--_ctm-mob-dn-ad-to-qe-hr-se-gp,
875
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp)));
1104
876
 
1105
877
  // for shadow
1106
- --_sf-hr-sw-ae: var(
1107
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
1108
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae))
1109
- );
1110
- --_sf-hr-sw-br: var(
1111
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
1112
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br))
1113
- );
1114
- --_sf-hr-sw-hr: var(
1115
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
1116
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr))
1117
- );
1118
- --_sf-hr-sw-cr: var(
1119
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
1120
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr))
1121
- );
878
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
879
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae)));
880
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
881
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br)));
882
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
883
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr)));
884
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
885
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr)));
1122
886
 
1123
887
  // for font
1124
888
 
1125
- --_sf-hr-cr: var(
1126
- --_ctm-mob-dn-ad-to-qe-hr-se-cr,
1127
- var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr))
1128
- );
1129
- --_sf-hr-ft-fy: var(
1130
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
1131
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy))
1132
- );
1133
- --_sf-hr-tt-tm: var(
1134
- --_ctm-mob-dn-ad-to-qe-hr-se-tt-tm,
1135
- var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-tm, var(--_ctm-dn-ad-to-qe-hr-se-tt-tm))
1136
- );
1137
- --_sf-hr-wd-wp: var(
1138
- --_ctm-mob-dn-ad-to-qe-hr-se-wd-wp,
1139
- var(--_ctm-tab-dn-ad-to-qe-hr-se-wd-wp, var(--_ctm-dn-ad-to-qe-hr-se-wd-wp))
1140
- );
1141
- --_sf-hr-wd-bk: var(
1142
- --_ctm-mob-dn-ad-to-qe-hr-se-wd-bk,
1143
- var(--_ctm-tab-dn-ad-to-qe-hr-se-wd-bk, var(--_ctm-dn-ad-to-qe-hr-se-wd-bk))
1144
- );
1145
- --_sf-hr-ft-se: var(
1146
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
1147
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se))
1148
- );
1149
- --_sf-hr-ft-wt: var(
1150
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
1151
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt))
1152
- );
1153
- --_sf-hr-ft-se-ic: var(
1154
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
1155
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic))
1156
- );
1157
- --_sf-hr-tt-an: var(
1158
- --_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
1159
- var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an))
1160
- );
1161
- --_sf-hr-lr-sg: var(
1162
- --_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
1163
- var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg))
1164
- );
1165
- --_sf-hr-le-ht: var(
1166
- --_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
1167
- var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht))
1168
- );
1169
-
1170
- --_sf-hr-in-se: var(
1171
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1172
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1173
- );
1174
- --_sf-hr-in-se: var(
1175
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1176
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1177
- );
1178
- --_sf-hr-in-c1: var(
1179
- --_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
1180
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
1181
- );
1182
- --_sf-hr-ue: var(
1183
- --_ctm-mob-dn-ad-to-qe-hr-se-ue,
1184
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
1185
- );
889
+ --_sf-hr-cr: var(--_ctm-mob-dn-ad-to-qe-hr-se-cr,
890
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr)));
891
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
892
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy)));
893
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ad-to-qe-hr-se-tt-tm,
894
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-tm, var(--_ctm-dn-ad-to-qe-hr-se-tt-tm)));
895
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ad-to-qe-hr-se-wd-wp,
896
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-wd-wp, var(--_ctm-dn-ad-to-qe-hr-se-wd-wp)));
897
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ad-to-qe-hr-se-wd-bk,
898
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-wd-bk, var(--_ctm-dn-ad-to-qe-hr-se-wd-bk)));
899
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
900
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se)));
901
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
902
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt)));
903
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
904
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic)));
905
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
906
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an)));
907
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
908
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg)));
909
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
910
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht)));
911
+
912
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-qe-hr-se-in-se,
913
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se)));
914
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-qe-hr-se-in-se,
915
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se)));
916
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
917
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1)));
918
+ --_sf-hr-ue: var(--_ctm-mob-dn-ad-to-qe-hr-se-ue,
919
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue)));
1186
920
 
1187
921
  // for pading and width
1188
- --_sf-hr-pg: var(
1189
- --_ctm-mob-dn-ad-to-qe-hr-pg,
1190
- var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
1191
- );
1192
- --_sf-hr-wh: var(
1193
- --_ctm-mob-dn-ad-to-qe-hr-wh,
1194
- var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh))
1195
- );
922
+ --_sf-hr-pg: var(--_ctm-mob-dn-ad-to-qe-hr-pg,
923
+ var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg)));
924
+ --_sf-hr-wh: var(--_ctm-mob-dn-ad-to-qe-hr-wh,
925
+ var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh)));
1196
926
 
1197
927
  &[data-hover-show-shadow="false"] {
1198
928
  --_hover-show-shadow: none;
1199
929
  }
930
+
1200
931
  &[data-hover-show-icon="false"] {
1201
932
  --_hover-show-icon: none;
1202
933
  }
1203
934
  }
1204
- background-color: var(
1205
- --_sf-hr-bd-cr,
1206
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr)
1207
- );
935
+
936
+ background-color: var(--_sf-hr-bd-cr,
937
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
1208
938
 
1209
939
  display: flex;
1210
940
  flex-direction: var(--_sf-fd-bn);
@@ -1218,10 +948,7 @@
1218
948
 
1219
949
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
1220
950
 
1221
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae))
1222
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br))
1223
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd))
1224
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
951
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
1225
952
 
1226
953
  &[data-show-border="true"] {
1227
954
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
@@ -1240,6 +967,7 @@
1240
967
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-tm));
1241
968
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-wp));
1242
969
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-bk));
970
+
1243
971
  &.flex__overflow {
1244
972
  white-space: normal;
1245
973
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1249,17 +977,13 @@
1249
977
 
1250
978
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
1251
979
 
1252
- font-style: var(
1253
- --_sf-hr-ft-se-ic,
1254
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1255
- );
980
+ font-style: var(--_sf-hr-ft-se-ic,
981
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic));
1256
982
 
1257
983
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
1258
984
 
1259
- letter-spacing: var(
1260
- --_sf-hr-lr-sg,
1261
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg)
1262
- );
985
+ letter-spacing: var(--_sf-hr-lr-sg,
986
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg));
1263
987
 
1264
988
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
1265
989
 
@@ -1268,6 +992,7 @@
1268
992
 
1269
993
  .icon {
1270
994
  display: var(--_hover-show-icon, var(--_show-icon, flex));
995
+
1271
996
  svg {
1272
997
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1273
998
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
@@ -1278,6 +1003,7 @@
1278
1003
  }
1279
1004
  }
1280
1005
  }
1006
+
1281
1007
  [data-element-style="Text"] {
1282
1008
  display: inline-block;
1283
1009
  width: 100%;
@@ -1301,1572 +1027,1541 @@
1301
1027
  display: none;
1302
1028
  }
1303
1029
  }
1030
+
1304
1031
  &[data-btn-name="addToOrderTemplate"] {
1305
1032
  --_sf-spinner-clr: #{var(
1306
- --_sf-hr-cr,
1307
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr)
1308
- )};
1309
- &[data-show-shadow="false"] {
1310
- --_show-shadow: none;
1311
- }
1312
- &[data-icon-position="left"] {
1313
- --_sf-fd-bn: row;
1314
- }
1315
- &[data-icon-position="right"] {
1316
- --_sf-fd-bn: row-reverse;
1317
- }
1318
- &[data-icon-position="center"] {
1319
- --_sf-fd-bn: row;
1320
- }
1321
-
1322
- &:hover {
1323
- --_sf-hr-bd-cr: var(
1324
- --_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1325
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
1326
- );
1327
- --_sf-hr-br-cr: var(
1328
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1329
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
1330
- );
1331
- --_sf-hr-br-se: var(
1332
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1333
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1334
- );
1335
- --_sf-hr-br-wh: var(
1336
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1337
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1338
- );
1339
- --_sf-hr-br-rs: var(
1340
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1341
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
1342
- );
1343
-
1344
- --_sf-hr-at: var(
1345
- --_ctm-mob-dn-ad-to-or-te-hr-se-at,
1346
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
1347
- );
1348
- --_sf-hr-gp: var(
1349
- --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1350
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
1351
- );
1352
-
1353
- // for shadow
1354
- --_sf-hr-sw-ae: var(
1355
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1356
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae))
1357
- );
1358
- --_sf-hr-sw-br: var(
1359
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1360
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br))
1361
- );
1362
- --_sf-hr-sw-hr: var(
1363
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1364
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr))
1365
- );
1366
- --_sf-hr-sw-cr: var(
1367
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1368
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr))
1369
- );
1370
-
1371
- // for font
1033
+ --_sf-hr-cr,
1034
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr))
1035
+ }
1372
1036
 
1373
- --_sf-hr-cr: var(
1374
- --_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1375
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr))
1376
- );
1377
- --_sf-hr-ft-fy: var(
1378
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1379
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy))
1380
- );
1381
- --_sf-hr-tt-tm: var(
1382
- --_ctm-mob-dn-ad-to-or-te-hr-se-tt-tm,
1383
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-tm, var(--_ctm-dn-ad-to-or-te-hr-se-tt-tm))
1384
- );
1385
- --_sf-hr-wd-wp: var(
1386
- --_ctm-mob-dn-ad-to-or-te-hr-se-wd-wp,
1387
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-wd-wp, var(--_ctm-dn-ad-to-or-te-hr-se-wd-wp))
1388
- );
1389
- --_sf-hr-wd-bk: var(
1390
- --_ctm-mob-dn-ad-to-or-te-hr-se-wd-bk,
1391
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-wd-bk, var(--_ctm-dn-ad-to-or-te-hr-se-wd-bk))
1392
- );
1393
- --_sf-hr-ft-se: var(
1394
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1395
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se))
1396
- );
1397
- --_sf-hr-ft-wt: var(
1398
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1399
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt))
1400
- );
1401
- --_sf-hr-ft-se-ic: var(
1402
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1403
- var(
1404
- --_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic,
1405
- var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic)
1406
- )
1407
- );
1408
- --_sf-hr-tt-an: var(
1409
- --_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1410
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an))
1411
- );
1412
- --_sf-hr-lr-sg: var(
1413
- --_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1414
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg))
1415
- );
1416
- --_sf-hr-le-ht: var(
1417
- --_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1418
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht))
1419
- );
1420
-
1421
- --_sf-hr-in-se: var(
1422
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1423
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1424
- );
1425
- --_sf-hr-in-se: var(
1426
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1427
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1428
- );
1429
- --_sf-hr-in-c1: var(
1430
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1431
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
1432
- );
1433
- --_sf-hr-ue: var(
1434
- --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1435
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
1436
- );
1037
+ ;
1437
1038
 
1438
- // for pading and width
1439
- --_sf-hr-pg: var(
1440
- --_ctm-mob-dn-ad-to-or-te-hr-pg,
1441
- var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
1442
- );
1443
- --_sf-hr-wh: var(
1444
- --_ctm-mob-dn-ad-to-or-te-hr-wh,
1445
- var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh))
1446
- );
1447
- &[data-hover-show-shadow="false"] {
1448
- --_hover-show-shadow: none;
1449
- }
1450
- &[data-hover-show-icon="false"] {
1451
- --_hover-show-icon: none;
1452
- }
1453
- }
1454
- background-color: var(
1455
- --_sf-hr-bd-cr,
1456
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr)
1457
- );
1039
+ &[data-show-shadow="false"] {
1040
+ --_show-shadow: none;
1041
+ }
1458
1042
 
1459
- padding: 5px 10px;
1460
- display: flex;
1461
- flex-direction: var(--_sf-fd-bn);
1462
- align-items: center;
1043
+ &[data-icon-position="left"] {
1044
+ --_sf-fd-bn: row;
1045
+ }
1463
1046
 
1464
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1465
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1047
+ &[data-icon-position="right"] {
1048
+ --_sf-fd-bn: row-reverse;
1049
+ }
1466
1050
 
1467
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1468
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1051
+ &[data-icon-position="center"] {
1052
+ --_sf-fd-bn: row;
1053
+ }
1469
1054
 
1470
- border-radius: var(
1471
- --_sf-hr-br-rs,
1472
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs)
1473
- );
1055
+ &:hover {
1056
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1057
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr)));
1058
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1059
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr)));
1060
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1061
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se)));
1062
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1063
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh)));
1064
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1065
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs)));
1066
+
1067
+ --_sf-hr-at: var(--_ctm-mob-dn-ad-to-or-te-hr-se-at,
1068
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at)));
1069
+ --_sf-hr-gp: var(--_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1070
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp)));
1071
+
1072
+ // for shadow
1073
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1074
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae)));
1075
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1076
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br)));
1077
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1078
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr)));
1079
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1080
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr)));
1081
+
1082
+ // for font
1083
+
1084
+ --_sf-hr-cr: var(--_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1085
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr)));
1086
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1087
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy)));
1088
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ad-to-or-te-hr-se-tt-tm,
1089
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-tm, var(--_ctm-dn-ad-to-or-te-hr-se-tt-tm)));
1090
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ad-to-or-te-hr-se-wd-wp,
1091
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-wd-wp, var(--_ctm-dn-ad-to-or-te-hr-se-wd-wp)));
1092
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ad-to-or-te-hr-se-wd-bk,
1093
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-wd-bk, var(--_ctm-dn-ad-to-or-te-hr-se-wd-bk)));
1094
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1095
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se)));
1096
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1097
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt)));
1098
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1099
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic,
1100
+ var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic)));
1101
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1102
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an)));
1103
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1104
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg)));
1105
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1106
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht)));
1107
+
1108
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1109
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se)));
1110
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1111
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se)));
1112
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1113
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1)));
1114
+ --_sf-hr-ue: var(--_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1115
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue)));
1116
+
1117
+ // for pading and width
1118
+ --_sf-hr-pg: var(--_ctm-mob-dn-ad-to-or-te-hr-pg,
1119
+ var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg)));
1120
+ --_sf-hr-wh: var(--_ctm-mob-dn-ad-to-or-te-hr-wh,
1121
+ var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh)));
1122
+
1123
+ &[data-hover-show-shadow="false"] {
1124
+ --_hover-show-shadow: none;
1125
+ }
1126
+
1127
+ &[data-hover-show-icon="false"] {
1128
+ --_hover-show-icon: none;
1129
+ }
1130
+ }
1474
1131
 
1475
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae))
1476
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br))
1477
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd))
1478
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1132
+ background-color: var(--_sf-hr-bd-cr,
1133
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr));
1479
1134
 
1480
- &[data-show-border="true"] {
1481
- border-color: var(
1482
- --_sf-hr-br-cr,
1483
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr)
1484
- );
1135
+ padding: 5px 10px;
1136
+ display: flex;
1137
+ flex-direction: var(--_sf-fd-bn);
1138
+ align-items: center;
1485
1139
 
1486
- border-style: var(
1487
- --_sf-hr-br-se,
1488
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1489
- );
1140
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1141
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1490
1142
 
1491
- border-width: var(
1492
- --_sf-hr-br-wh,
1493
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1494
- );
1495
- }
1143
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1144
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1496
1145
 
1497
- .txt {
1498
- display: flex;
1146
+ border-radius: var(--_sf-hr-br-rs,
1147
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
1499
1148
 
1500
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1501
-
1502
- font-family: var(
1503
- --_sf-hr-ft-fy,
1504
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy)
1505
- );
1506
- text-transform: var(
1507
- --_sf-hr-tt-tm,
1508
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-tm)
1509
- );
1510
- word-wrap: var(
1511
- --_sf-hr-wd-wp,
1512
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-wp)
1513
- );
1514
- word-break: var(
1515
- --_sf-hr-wd-bk,
1516
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-bk)
1517
- );
1518
- &.flex__overflow {
1519
- white-space: normal;
1520
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1521
- }
1149
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1522
1150
 
1523
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1151
+ &[data-show-border="true"] {
1152
+ border-color: var(--_sf-hr-br-cr,
1153
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr));
1524
1154
 
1525
- font-weight: var(
1526
- --_sf-hr-ft-wt,
1527
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt)
1528
- );
1155
+ border-style: var(--_sf-hr-br-se,
1156
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se));
1529
1157
 
1530
- font-style: var(
1531
- --_sf-hr-ft-se-ic,
1532
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1533
- );
1158
+ border-width: var(--_sf-hr-br-wh,
1159
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh));
1160
+ }
1534
1161
 
1535
- text-align: var(
1536
- --_sf-hr-tt-an,
1537
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an)
1538
- );
1162
+ .txt {
1163
+ display: flex;
1539
1164
 
1540
- letter-spacing: var(
1541
- --_sf-hr-lr-sg,
1542
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1543
- );
1165
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1544
1166
 
1545
- line-height: var(
1546
- --_sf-hr-le-ht,
1547
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht)
1548
- );
1167
+ font-family: var(--_sf-hr-ft-fy,
1168
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy));
1169
+ text-transform: var(--_sf-hr-tt-tm,
1170
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-tm));
1171
+ word-wrap: var(--_sf-hr-wd-wp,
1172
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-wp));
1173
+ word-break: var(--_sf-hr-wd-bk,
1174
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-bk));
1549
1175
 
1550
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1176
+ &.flex__overflow {
1177
+ white-space: normal;
1178
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1551
1179
  }
1552
1180
 
1553
- .icon {
1554
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1555
- svg {
1556
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1557
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1181
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1558
1182
 
1559
- path {
1560
- stroke: var(
1561
- --_sf-hr-in-c1,
1562
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1)
1563
- );
1564
- stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-se-wh, 1);
1565
- }
1566
- }
1567
- }
1568
- [data-element-style="Text"] {
1569
- display: inline-block;
1570
- width: 100%;
1571
- }
1183
+ font-weight: var(--_sf-hr-ft-wt,
1184
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt));
1572
1185
 
1573
- .icon--hover {
1574
- // position: absolute;
1575
- // inset: 0;
1576
- // opacity: 0;
1577
- display: none;
1578
- transition: opacity 0.2s ease;
1579
- }
1186
+ font-style: var(--_sf-hr-ft-se-ic,
1187
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic));
1580
1188
 
1581
- &:hover .icon--hover {
1582
- // opacity: 1;
1583
- display: flex;
1584
- }
1189
+ text-align: var(--_sf-hr-tt-an,
1190
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an));
1585
1191
 
1586
- &:hover .icon--default {
1587
- // opacity: 0;
1588
- display: none;
1589
- }
1590
- }
1591
- &[data-btn-name="viewDetails"] {
1592
- --_sf-spinner-clr: #{var(
1593
- --_sf-hr-cr,
1594
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr)
1595
- )};
1596
- &[data-show-shadow="false"] {
1597
- --_show-shadow: none;
1598
- }
1599
- &[data-icon-position="left"] {
1600
- --_sf-fd-bn: row;
1601
- }
1602
- &[data-icon-position="right"] {
1603
- --_sf-fd-bn: row-reverse;
1604
- }
1605
- &[data-icon-position="center"] {
1606
- --_sf-fd-bn: row;
1607
- }
1192
+ letter-spacing: var(--_sf-hr-lr-sg,
1193
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg));
1608
1194
 
1609
- &:hover {
1610
- --_sf-hr-bd-cr: var(
1611
- --_ctm-mob-dn-vw-ds-hr-se-bd-cr,
1612
- var(--_ctm-tab-dn-vw-ds-hr-se-bd-cr, var(--_ctm-dn-vw-ds-hr-se-bd-cr))
1613
- );
1614
- --_sf-hr-br-cr: var(
1615
- --_ctm-mob-dn-vw-ds-hr-se-br-cr,
1616
- var(--_ctm-tab-dn-vw-ds-hr-se-br-cr, var(--_ctm-dn-vw-ds-hr-se-br-cr))
1617
- );
1618
- --_sf-hr-br-se: var(
1619
- --_ctm-mob-dn-vw-ds-hr-se-br-se,
1620
- var(--_ctm-tab-dn-vw-ds-hr-se-br-se, var(--_ctm-dn-vw-ds-hr-se-br-se))
1621
- );
1622
- --_sf-hr-br-wh: var(
1623
- --_ctm-mob-dn-vw-ds-hr-se-br-wh,
1624
- var(--_ctm-tab-dn-vw-ds-hr-se-br-wh, var(--_ctm-dn-vw-ds-hr-se-br-wh))
1625
- );
1626
- --_sf-hr-br-rs: var(
1627
- --_ctm-mob-dn-vw-ds-hr-se-br-rs,
1628
- var(--_ctm-tab-dn-vw-ds-hr-se-br-rs, var(--_ctm-dn-vw-ds-hr-se-br-rs))
1629
- );
1630
-
1631
- --_sf-hr-at: var(
1632
- --_ctm-mob-dn-vw-ds-hr-se-at,
1633
- var(--_ctm-tab-dn-vw-ds-hr-se-at, var(--_ctm-dn-vw-ds-hr-se-at))
1634
- );
1635
- --_sf-hr-gp: var(
1636
- --_ctm-mob-dn-vw-ds-hr-se-gp,
1637
- var(--_ctm-tab-dn-vw-ds-hr-se-gp, var(--_ctm-dn-vw-ds-hr-se-gp))
1638
- );
1195
+ line-height: var(--_sf-hr-le-ht,
1196
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht));
1639
1197
 
1640
- // for shadow
1641
- --_sf-hr-sw-ae: var(
1642
- --_ctm-mob-dn-vw-ds-hr-se-sw-ae,
1643
- var(--_ctm-tab-dn-vw-ds-hr-se-sw-ae, var(--_ctm-dn-vw-ds-hr-se-sw-ae))
1644
- );
1645
- --_sf-hr-sw-br: var(
1646
- --_ctm-mob-dn-vw-ds-hr-se-sw-br,
1647
- var(--_ctm-tab-dn-vw-ds-hr-se-sw-br, var(--_ctm-dn-vw-ds-hr-se-sw-br))
1648
- );
1649
- --_sf-hr-sw-hr: var(
1650
- --_ctm-mob-dn-vw-ds-hr-se-sw-hr,
1651
- var(--_ctm-tab-dn-vw-ds-hr-se-sw-hr, var(--_ctm-dn-vw-ds-hr-se-sw-hr))
1652
- );
1653
- --_sf-hr-sw-cr: var(
1654
- --_ctm-mob-dn-vw-ds-hr-se-sw-cr,
1655
- var(--_ctm-tab-dn-vw-ds-hr-se-sw-cr, var(--_ctm-dn-vw-ds-hr-se-sw-cr))
1656
- );
1198
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1199
+ }
1657
1200
 
1658
- // for font
1201
+ .icon {
1202
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1659
1203
 
1660
- --_sf-hr-cr: var(
1661
- --_ctm-mob-dn-vw-ds-hr-se-cr,
1662
- var(--_ctm-tab-dn-vw-ds-hr-se-cr, var(--_ctm-dn-vw-ds-hr-se-cr))
1663
- );
1664
- --_sf-hr-ft-fy: var(
1665
- --_ctm-mob-dn-vw-ds-hr-se-ft-fy,
1666
- var(--_ctm-tab-dn-vw-ds-hr-se-ft-fy, var(--_ctm-dn-vw-ds-hr-se-ft-fy))
1667
- );
1668
- --_sf-hr-tt-tm: var(
1669
- --_ctm-mob-dn-vw-ds-hr-se-tt-tm,
1670
- var(--_ctm-tab-dn-vw-ds-hr-se-tt-tm, var(--_ctm-dn-vw-ds-hr-se-tt-tm))
1671
- );
1672
- --_sf-hr-wd-wp: var(
1673
- --_ctm-mob-dn-vw-ds-hr-se-wd-wp,
1674
- var(--_ctm-tab-dn-vw-ds-hr-se-wd-wp, var(--_ctm-dn-vw-ds-hr-se-wd-wp))
1675
- );
1676
- --_sf-hr-wd-bk: var(
1677
- --_ctm-mob-dn-vw-ds-hr-se-wd-bk,
1678
- var(--_ctm-tab-dn-vw-ds-hr-se-wd-bk, var(--_ctm-dn-vw-ds-hr-se-wd-bk))
1679
- );
1680
- --_sf-hr-ft-se: var(
1681
- --_ctm-mob-dn-vw-ds-hr-se-ft-se,
1682
- var(--_ctm-tab-dn-vw-ds-hr-se-ft-se, var(--_ctm-dn-vw-ds-hr-se-ft-se))
1683
- );
1684
- --_sf-hr-ft-wt: var(
1685
- --_ctm-mob-dn-vw-ds-hr-se-ft-wt,
1686
- var(--_ctm-tab-dn-vw-ds-hr-se-ft-wt, var(--_ctm-dn-vw-ds-hr-se-ft-wt))
1687
- );
1688
- --_sf-hr-ft-se-ic: var(
1689
- --_ctm-mob-dn-vw-ds-hr-se-ft-se-ic,
1690
- var(
1691
- --_ctm-tab-dn-vw-ds-hr-se-ft-se-ic,
1692
- var(--_ctm-dn-vw-ds-hr-se-ft-se-ic)
1693
- )
1694
- );
1695
- --_sf-hr-tt-an: var(
1696
- --_ctm-mob-dn-vw-ds-hr-se-tt-an,
1697
- var(--_ctm-tab-dn-vw-ds-hr-se-tt-an, var(--_ctm-dn-vw-ds-hr-se-tt-an))
1698
- );
1699
- --_sf-hr-lr-sg: var(
1700
- --_ctm-mob-dn-vw-ds-hr-se-lr-sg,
1701
- var(--_ctm-tab-dn-vw-ds-hr-se-lr-sg, var(--_ctm-dn-vw-ds-hr-se-lr-sg))
1702
- );
1703
- --_sf-hr-le-ht: var(
1704
- --_ctm-mob-dn-vw-ds-hr-se-le-ht,
1705
- var(--_ctm-tab-dn-vw-ds-hr-se-le-ht, var(--_ctm-dn-vw-ds-hr-se-le-ht))
1706
- );
1707
-
1708
- --_sf-hr-in-se: var(
1709
- --_ctm-mob-dn-vw-ds-hr-se-in-se,
1710
- var(--_ctm-tab-dn-vw-ds-hr-se-in-se, var(--_ctm-dn-vw-ds-hr-se-in-se))
1711
- );
1712
- --_sf-hr-in-se: var(
1713
- --_ctm-mob-dn-vw-ds-hr-se-in-se,
1714
- var(--_ctm-tab-dn-vw-ds-hr-se-in-se, var(--_ctm-dn-vw-ds-hr-se-in-se))
1715
- );
1716
- --_sf-hr-in-c1: var(
1717
- --_ctm-mob-dn-vw-ds-hr-se-in-c1,
1718
- var(--_ctm-tab-dn-vw-ds-hr-se-in-c1, var(--_ctm-dn-vw-ds-hr-se-in-c1))
1719
- );
1720
- --_sf-hr-ue: var(
1721
- --_ctm-mob-dn-vw-ds-hr-se-ue,
1722
- var(--_ctm-tab-dn-vw-ds-hr-se-ue, var(--_ctm-dn-vw-ds-hr-se-ue))
1723
- );
1204
+ svg {
1205
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1206
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1724
1207
 
1725
- // for pading and width
1726
- --_sf-hr-pg: var(
1727
- --_ctm-mob-dn-vw-ds-hr-pg,
1728
- var(--_ctm-tab-dn-vw-ds-hr-pg, var(--_ctm-dn-vw-ds-hr-pg))
1729
- );
1730
- --_sf-hr-wh: var(
1731
- --_ctm-mob-dn-vw-ds-hr-wh,
1732
- var(--_ctm-tab-dn-vw-ds-hr-wh, var(--_ctm-dn-vw-ds-hr-wh))
1733
- );
1734
- &[data-hover-show-shadow="false"] {
1735
- --_hover-show-shadow: none;
1736
- }
1737
- &[data-hover-show-icon="false"] {
1738
- --_hover-show-icon: none;
1208
+ path {
1209
+ stroke: var(--_sf-hr-in-c1,
1210
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1));
1211
+ stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-se-wh, 1);
1739
1212
  }
1740
1213
  }
1741
- background-color: var(
1742
- --_sf-hr-bd-cr,
1743
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-bd-cr)
1744
- );
1214
+ }
1215
+
1216
+ [data-element-style="Text"] {
1217
+ display: inline-block;
1218
+ width: 100%;
1219
+ }
1220
+
1221
+ .icon--hover {
1222
+ // position: absolute;
1223
+ // inset: 0;
1224
+ // opacity: 0;
1225
+ display: none;
1226
+ transition: opacity 0.2s ease;
1227
+ }
1745
1228
 
1746
- padding: 5px 10px;
1229
+ &:hover .icon--hover {
1230
+ // opacity: 1;
1747
1231
  display: flex;
1748
- flex-direction: var(--_sf-fd-bn);
1749
- align-items: center;
1232
+ }
1750
1233
 
1751
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-at));
1752
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-gp));
1234
+ &:hover .icon--default {
1235
+ // opacity: 0;
1236
+ display: none;
1237
+ }
1238
+ }
1753
1239
 
1754
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-pg));
1755
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wh));
1240
+ &[data-btn-name="viewDetails"] {
1241
+ --_sf-spinner-clr: #{var(
1242
+ --_sf-hr-cr,
1243
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr))
1244
+ }
1756
1245
 
1757
- border-radius: var(
1758
- --_sf-hr-br-rs,
1759
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-rs)
1760
- );
1246
+ ;
1761
1247
 
1762
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-ae))
1763
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-br))
1764
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-sd))
1765
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-cr));
1248
+ &[data-show-shadow="false"] {
1249
+ --_show-shadow: none;
1250
+ }
1766
1251
 
1767
- &[data-show-border="true"] {
1768
- border-color: var(
1769
- --_sf-hr-br-cr,
1770
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-cr)
1771
- );
1252
+ &[data-icon-position="left"] {
1253
+ --_sf-fd-bn: row;
1254
+ }
1772
1255
 
1773
- border-style: var(
1774
- --_sf-hr-br-se,
1775
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-se)
1776
- );
1256
+ &[data-icon-position="right"] {
1257
+ --_sf-fd-bn: row-reverse;
1258
+ }
1777
1259
 
1778
- border-width: var(
1779
- --_sf-hr-br-wh,
1780
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-wh)
1781
- );
1782
- }
1260
+ &[data-icon-position="center"] {
1261
+ --_sf-fd-bn: row;
1262
+ }
1783
1263
 
1784
- .txt {
1785
- display: flex;
1264
+ &:hover {
1265
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-vw-ds-hr-se-bd-cr,
1266
+ var(--_ctm-tab-dn-vw-ds-hr-se-bd-cr, var(--_ctm-dn-vw-ds-hr-se-bd-cr)));
1267
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-vw-ds-hr-se-br-cr,
1268
+ var(--_ctm-tab-dn-vw-ds-hr-se-br-cr, var(--_ctm-dn-vw-ds-hr-se-br-cr)));
1269
+ --_sf-hr-br-se: var(--_ctm-mob-dn-vw-ds-hr-se-br-se,
1270
+ var(--_ctm-tab-dn-vw-ds-hr-se-br-se, var(--_ctm-dn-vw-ds-hr-se-br-se)));
1271
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-vw-ds-hr-se-br-wh,
1272
+ var(--_ctm-tab-dn-vw-ds-hr-se-br-wh, var(--_ctm-dn-vw-ds-hr-se-br-wh)));
1273
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-vw-ds-hr-se-br-rs,
1274
+ var(--_ctm-tab-dn-vw-ds-hr-se-br-rs, var(--_ctm-dn-vw-ds-hr-se-br-rs)));
1275
+
1276
+ --_sf-hr-at: var(--_ctm-mob-dn-vw-ds-hr-se-at,
1277
+ var(--_ctm-tab-dn-vw-ds-hr-se-at, var(--_ctm-dn-vw-ds-hr-se-at)));
1278
+ --_sf-hr-gp: var(--_ctm-mob-dn-vw-ds-hr-se-gp,
1279
+ var(--_ctm-tab-dn-vw-ds-hr-se-gp, var(--_ctm-dn-vw-ds-hr-se-gp)));
1280
+
1281
+ // for shadow
1282
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-vw-ds-hr-se-sw-ae,
1283
+ var(--_ctm-tab-dn-vw-ds-hr-se-sw-ae, var(--_ctm-dn-vw-ds-hr-se-sw-ae)));
1284
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-vw-ds-hr-se-sw-br,
1285
+ var(--_ctm-tab-dn-vw-ds-hr-se-sw-br, var(--_ctm-dn-vw-ds-hr-se-sw-br)));
1286
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-vw-ds-hr-se-sw-hr,
1287
+ var(--_ctm-tab-dn-vw-ds-hr-se-sw-hr, var(--_ctm-dn-vw-ds-hr-se-sw-hr)));
1288
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-vw-ds-hr-se-sw-cr,
1289
+ var(--_ctm-tab-dn-vw-ds-hr-se-sw-cr, var(--_ctm-dn-vw-ds-hr-se-sw-cr)));
1290
+
1291
+ // for font
1292
+
1293
+ --_sf-hr-cr: var(--_ctm-mob-dn-vw-ds-hr-se-cr,
1294
+ var(--_ctm-tab-dn-vw-ds-hr-se-cr, var(--_ctm-dn-vw-ds-hr-se-cr)));
1295
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-vw-ds-hr-se-ft-fy,
1296
+ var(--_ctm-tab-dn-vw-ds-hr-se-ft-fy, var(--_ctm-dn-vw-ds-hr-se-ft-fy)));
1297
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-vw-ds-hr-se-tt-tm,
1298
+ var(--_ctm-tab-dn-vw-ds-hr-se-tt-tm, var(--_ctm-dn-vw-ds-hr-se-tt-tm)));
1299
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-vw-ds-hr-se-wd-wp,
1300
+ var(--_ctm-tab-dn-vw-ds-hr-se-wd-wp, var(--_ctm-dn-vw-ds-hr-se-wd-wp)));
1301
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-vw-ds-hr-se-wd-bk,
1302
+ var(--_ctm-tab-dn-vw-ds-hr-se-wd-bk, var(--_ctm-dn-vw-ds-hr-se-wd-bk)));
1303
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-vw-ds-hr-se-ft-se,
1304
+ var(--_ctm-tab-dn-vw-ds-hr-se-ft-se, var(--_ctm-dn-vw-ds-hr-se-ft-se)));
1305
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-vw-ds-hr-se-ft-wt,
1306
+ var(--_ctm-tab-dn-vw-ds-hr-se-ft-wt, var(--_ctm-dn-vw-ds-hr-se-ft-wt)));
1307
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-vw-ds-hr-se-ft-se-ic,
1308
+ var(--_ctm-tab-dn-vw-ds-hr-se-ft-se-ic,
1309
+ var(--_ctm-dn-vw-ds-hr-se-ft-se-ic)));
1310
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-vw-ds-hr-se-tt-an,
1311
+ var(--_ctm-tab-dn-vw-ds-hr-se-tt-an, var(--_ctm-dn-vw-ds-hr-se-tt-an)));
1312
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-vw-ds-hr-se-lr-sg,
1313
+ var(--_ctm-tab-dn-vw-ds-hr-se-lr-sg, var(--_ctm-dn-vw-ds-hr-se-lr-sg)));
1314
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-vw-ds-hr-se-le-ht,
1315
+ var(--_ctm-tab-dn-vw-ds-hr-se-le-ht, var(--_ctm-dn-vw-ds-hr-se-le-ht)));
1316
+
1317
+ --_sf-hr-in-se: var(--_ctm-mob-dn-vw-ds-hr-se-in-se,
1318
+ var(--_ctm-tab-dn-vw-ds-hr-se-in-se, var(--_ctm-dn-vw-ds-hr-se-in-se)));
1319
+ --_sf-hr-in-se: var(--_ctm-mob-dn-vw-ds-hr-se-in-se,
1320
+ var(--_ctm-tab-dn-vw-ds-hr-se-in-se, var(--_ctm-dn-vw-ds-hr-se-in-se)));
1321
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-vw-ds-hr-se-in-c1,
1322
+ var(--_ctm-tab-dn-vw-ds-hr-se-in-c1, var(--_ctm-dn-vw-ds-hr-se-in-c1)));
1323
+ --_sf-hr-ue: var(--_ctm-mob-dn-vw-ds-hr-se-ue,
1324
+ var(--_ctm-tab-dn-vw-ds-hr-se-ue, var(--_ctm-dn-vw-ds-hr-se-ue)));
1325
+
1326
+ // for pading and width
1327
+ --_sf-hr-pg: var(--_ctm-mob-dn-vw-ds-hr-pg,
1328
+ var(--_ctm-tab-dn-vw-ds-hr-pg, var(--_ctm-dn-vw-ds-hr-pg)));
1329
+ --_sf-hr-wh: var(--_ctm-mob-dn-vw-ds-hr-wh,
1330
+ var(--_ctm-tab-dn-vw-ds-hr-wh, var(--_ctm-dn-vw-ds-hr-wh)));
1331
+
1332
+ &[data-hover-show-shadow="false"] {
1333
+ --_hover-show-shadow: none;
1334
+ }
1786
1335
 
1787
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr));
1788
-
1789
- font-family: var(
1790
- --_sf-hr-ft-fy,
1791
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-fy)
1792
- );
1793
- text-transform: var(
1794
- --_sf-hr-tt-tm,
1795
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-tm)
1796
- );
1797
- word-wrap: var(
1798
- --_sf-hr-wd-wp,
1799
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wd-wp)
1800
- );
1801
- word-break: var(
1802
- --_sf-hr-wd-bk,
1803
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wd-bk)
1804
- );
1805
- &.flex__overflow {
1806
- white-space: normal;
1807
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1808
- }
1336
+ &[data-hover-show-icon="false"] {
1337
+ --_hover-show-icon: none;
1338
+ }
1339
+ }
1809
1340
 
1810
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se));
1341
+ background-color: var(--_sf-hr-bd-cr,
1342
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-bd-cr));
1811
1343
 
1812
- font-weight: var(
1813
- --_sf-hr-ft-wt,
1814
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-wt)
1815
- );
1344
+ padding: 5px 10px;
1345
+ display: flex;
1346
+ flex-direction: var(--_sf-fd-bn);
1347
+ align-items: center;
1816
1348
 
1817
- font-style: var(
1818
- --_sf-hr-ft-se-ic,
1819
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se-ic)
1820
- );
1349
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-at));
1350
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-gp));
1821
1351
 
1822
- text-align: var(
1823
- --_sf-hr-tt-an,
1824
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-an)
1825
- );
1352
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-pg));
1353
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wh));
1826
1354
 
1827
- letter-spacing: var(
1828
- --_sf-hr-lr-sg,
1829
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-lr-sg)
1830
- );
1355
+ border-radius: var(--_sf-hr-br-rs,
1356
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-rs));
1831
1357
 
1832
- line-height: var(
1833
- --_sf-hr-le-ht,
1834
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-le-ht)
1835
- );
1358
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-sw-cr));
1836
1359
 
1837
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1838
- }
1360
+ &[data-show-border="true"] {
1361
+ border-color: var(--_sf-hr-br-cr,
1362
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-cr));
1839
1363
 
1840
- .icon {
1841
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1842
- svg {
1843
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-se));
1844
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-se));
1364
+ border-style: var(--_sf-hr-br-se,
1365
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-se));
1845
1366
 
1846
- path {
1847
- stroke: var(
1848
- --_sf-hr-in-c1,
1849
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-c1)
1850
- );
1851
- stroke-width: prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-se-wh, 1);
1852
- }
1853
- }
1854
- }
1855
- [data-element-style="Text"] {
1856
- display: inline-block;
1857
- width: 100%;
1858
- }
1367
+ border-width: var(--_sf-hr-br-wh,
1368
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-wh));
1369
+ }
1859
1370
 
1860
- .icon--hover {
1861
- // position: absolute;
1862
- // inset: 0;
1863
- // opacity: 0;
1864
- display: none;
1865
- transition: opacity 0.2s ease;
1866
- }
1371
+ .txt {
1372
+ display: flex;
1867
1373
 
1868
- &:hover .icon--hover {
1869
- // opacity: 1;
1870
- display: flex;
1871
- }
1374
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr));
1872
1375
 
1873
- &:hover .icon--default {
1874
- // opacity: 0;
1875
- display: none;
1876
- }
1376
+ font-family: var(--_sf-hr-ft-fy,
1377
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-fy));
1378
+ text-transform: var(--_sf-hr-tt-tm,
1379
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-tm));
1380
+ word-wrap: var(--_sf-hr-wd-wp,
1381
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wd-wp));
1382
+ word-break: var(--_sf-hr-wd-bk,
1383
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wd-bk));
1384
+
1385
+ &.flex__overflow {
1386
+ white-space: normal;
1387
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1877
1388
  }
1878
- &[data-btn-name="notifyMe"] {
1879
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
1880
- &[data-show-shadow="false"] {
1881
- --_show-shadow: none;
1882
- }
1883
- &[data-icon-position="left"] {
1884
- --_sf-fd-bn: row;
1885
- }
1886
- &[data-icon-position="right"] {
1887
- --_sf-fd-bn: row-reverse;
1888
- }
1889
- &[data-icon-position="center"] {
1890
- --_sf-fd-bn: row;
1891
- }
1892
1389
 
1893
- &:hover {
1894
- --_sf-hr-bd-cr: var(
1895
- --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1896
- var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1897
- );
1898
- --_sf-hr-br-cr: var(
1899
- --_ctm-mob-dn-ny-me-hr-se-br-cr,
1900
- var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1901
- );
1902
- --_sf-hr-br-se: var(
1903
- --_ctm-mob-dn-ny-me-hr-se-br-se,
1904
- var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1905
- );
1906
- --_sf-hr-br-wh: var(
1907
- --_ctm-mob-dn-ny-me-hr-se-br-wh,
1908
- var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1909
- );
1910
- --_sf-hr-br-rs: var(
1911
- --_ctm-mob-dn-ny-me-hr-se-br-rs,
1912
- var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1913
- );
1914
- --_sf-hr-at: var(
1915
- --_ctm-mob-dn-ny-me-hr-se-at,
1916
- var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1917
- );
1918
- --_sf-hr-gp: var(
1919
- --_ctm-mob-dn-ny-me-hr-se-gp,
1920
- var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1921
- );
1390
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se));
1922
1391
 
1923
- // for shadow
1924
- --_sf-hr-sw-ae: var(
1925
- --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1926
- var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1927
- );
1928
- --_sf-hr-sw-br: var(
1929
- --_ctm-mob-dn-ny-me-hr-se-sw-br,
1930
- var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1931
- );
1932
- --_sf-hr-sw-hr: var(
1933
- --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1934
- var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1935
- );
1936
- --_sf-hr-sw-cr: var(
1937
- --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1938
- var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1939
- );
1392
+ font-weight: var(--_sf-hr-ft-wt,
1393
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-wt));
1940
1394
 
1941
- // for font
1395
+ font-style: var(--_sf-hr-ft-se-ic,
1396
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se-ic));
1942
1397
 
1943
- --_sf-hr-cr: var(
1944
- --_ctm-mob-dn-ny-me-hr-se-cr,
1945
- var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1946
- );
1947
- --_sf-hr-ft-fy: var(
1948
- --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1949
- var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1950
- );
1951
- --_sf-hr-tt-tm: var(
1952
- --_ctm-mob-dn-ny-me-hr-se-tt-tm,
1953
- var(--_ctm-tab-dn-ny-me-hr-se-tt-tm, var(--_ctm-dn-ny-me-hr-se-tt-tm))
1954
- );
1955
- --_sf-hr-wd-wp: var(
1956
- --_ctm-mob-dn-ny-me-hr-se-wd-wp,
1957
- var(--_ctm-tab-dn-ny-me-hr-se-wd-wp, var(--_ctm-dn-ny-me-hr-se-wd-wp))
1958
- );
1959
- --_sf-hr-wd-bk: var(
1960
- --_ctm-mob-dn-ny-me-hr-se-wd-bk,
1961
- var(--_ctm-tab-dn-ny-me-hr-se-wd-bk, var(--_ctm-dn-ny-me-hr-se-wd-bk))
1962
- );
1963
- --_sf-hr-ft-se: var(
1964
- --_ctm-mob-dn-ny-me-hr-se-ft-se,
1965
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1966
- );
1967
- --_sf-hr-ft-wt: var(
1968
- --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1969
- var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1970
- );
1971
- --_sf-hr-ft-se-ic: var(
1972
- --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1973
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1974
- );
1975
- --_sf-hr-tt-an: var(
1976
- --_ctm-mob-dn-ny-me-hr-se-tt-an,
1977
- var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1978
- );
1979
- --_sf-hr-lr-sg: var(
1980
- --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1981
- var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1982
- );
1983
- --_sf-hr-le-ht: var(
1984
- --_ctm-mob-dn-ny-me-hr-se-le-ht,
1985
- var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1986
- );
1987
-
1988
- --_sf-hr-in-se: var(
1989
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1990
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1991
- );
1992
- --_sf-hr-in-se: var(
1993
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1994
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1995
- );
1996
- --_sf-hr-in-c1: var(
1997
- --_ctm-mob-dn-ny-me-hr-se-in-c1,
1998
- var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1999
- );
2000
- --_sf-hr-ue: var(
2001
- --_ctm-mob-dn-ny-me-hr-se-ue,
2002
- var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
2003
- );
1398
+ text-align: var(--_sf-hr-tt-an,
1399
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-an));
2004
1400
 
2005
- // for pading and width
2006
- --_sf-hr-pg: var(
2007
- --_ctm-mob-dn-ny-me-hr-pg,
2008
- var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
2009
- );
2010
- --_sf-hr-wh: var(
2011
- --_ctm-mob-dn-ny-me-hr-wh,
2012
- var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
2013
- );
1401
+ letter-spacing: var(--_sf-hr-lr-sg,
1402
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-lr-sg));
2014
1403
 
2015
- &[data-hover-show-shadow="false"] {
2016
- --_hover-show-shadow: none;
2017
- }
2018
- &[data-hover-show-icon="false"] {
2019
- --_hover-show-icon: none;
2020
- }
2021
- }
2022
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1404
+ line-height: var(--_sf-hr-le-ht,
1405
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-le-ht));
2023
1406
 
2024
- display: flex;
2025
- flex-direction: var(--_sf-fd-bn);
2026
- align-items: center;
1407
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1408
+ }
2027
1409
 
2028
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
2029
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1410
+ .icon {
1411
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2030
1412
 
2031
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
2032
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1413
+ svg {
1414
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-se));
1415
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-se));
2033
1416
 
2034
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1417
+ path {
1418
+ stroke: var(--_sf-hr-in-c1,
1419
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-c1));
1420
+ stroke-width: prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-se-wh, 1);
1421
+ }
1422
+ }
1423
+ }
2035
1424
 
2036
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
2037
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
2038
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
2039
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1425
+ [data-element-style="Text"] {
1426
+ display: inline-block;
1427
+ width: 100%;
1428
+ }
2040
1429
 
2041
- &[data-show-border="true"] {
2042
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1430
+ .icon--hover {
1431
+ // position: absolute;
1432
+ // inset: 0;
1433
+ // opacity: 0;
1434
+ display: none;
1435
+ transition: opacity 0.2s ease;
1436
+ }
2043
1437
 
2044
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1438
+ &:hover .icon--hover {
1439
+ // opacity: 1;
1440
+ display: flex;
1441
+ }
2045
1442
 
2046
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
2047
- }
1443
+ &:hover .icon--default {
1444
+ // opacity: 0;
1445
+ display: none;
1446
+ }
1447
+ }
2048
1448
 
2049
- .txt {
2050
- display: flex;
1449
+ &[data-btn-name="share"] {
1450
+ --_sf-spinner-clr: #{var(
1451
+ --_sf-hr-cr,
1452
+ prepareMediaVariable(--_ctm-dn-se-dt-se-cr))
1453
+ }
2051
1454
 
2052
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1455
+ ;
2053
1456
 
2054
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
2055
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-tm));
2056
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-wp));
2057
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-bk));
2058
- &.flex__overflow {
2059
- white-space: normal;
2060
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2061
- }
1457
+ &[data-show-shadow="false"] {
1458
+ --_show-shadow: none;
1459
+ }
2062
1460
 
2063
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1461
+ &[data-icon-position="left"] {
1462
+ --_sf-fd-bn: row;
1463
+ }
2064
1464
 
2065
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1465
+ &[data-icon-position="right"] {
1466
+ --_sf-fd-bn: row-reverse;
1467
+ }
2066
1468
 
2067
- font-style: var(
2068
- --_sf-hr-ft-se-ic,
2069
- prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic)
2070
- );
1469
+ &[data-icon-position="center"] {
1470
+ --_sf-fd-bn: row;
1471
+ }
2071
1472
 
2072
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1473
+ &:hover {
1474
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-se-hr-se-bd-cr,
1475
+ var(--_ctm-tab-dn-se-hr-se-bd-cr, var(--_ctm-dn-se-hr-se-bd-cr)));
1476
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-se-hr-se-br-cr,
1477
+ var(--_ctm-tab-dn-se-hr-se-br-cr, var(--_ctm-dn-se-hr-se-br-cr)));
1478
+ --_sf-hr-br-se: var(--_ctm-mob-dn-se-hr-se-br-se,
1479
+ var(--_ctm-tab-dn-se-hr-se-br-se, var(--_ctm-dn-se-hr-se-br-se)));
1480
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-se-hr-se-br-wh,
1481
+ var(--_ctm-tab-dn-se-hr-se-br-wh, var(--_ctm-dn-se-hr-se-br-wh)));
1482
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-se-hr-se-br-rs,
1483
+ var(--_ctm-tab-dn-se-hr-se-br-rs, var(--_ctm-dn-se-hr-se-br-rs)));
1484
+
1485
+ --_sf-hr-at: var(--_ctm-mob-dn-se-hr-se-at,
1486
+ var(--_ctm-tab-dn-se-hr-se-at, var(--_ctm-dn-se-hr-se-at)));
1487
+ --_sf-hr-gp: var(--_ctm-mob-dn-se-hr-se-gp,
1488
+ var(--_ctm-tab-dn-se-hr-se-gp, var(--_ctm-dn-se-hr-se-gp)));
1489
+
1490
+ // for shadow
1491
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-se-hr-se-sw-ae,
1492
+ var(--_ctm-tab-dn-se-hr-se-sw-ae, var(--_ctm-dn-se-hr-se-sw-ae)));
1493
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-se-hr-se-sw-br,
1494
+ var(--_ctm-tab-dn-se-hr-se-sw-br, var(--_ctm-dn-se-hr-se-sw-br)));
1495
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-se-hr-se-sw-hr,
1496
+ var(--_ctm-tab-dn-se-hr-se-sw-hr, var(--_ctm-dn-se-hr-se-sw-hr)));
1497
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-se-hr-se-sw-cr,
1498
+ var(--_ctm-tab-dn-se-hr-se-sw-cr, var(--_ctm-dn-se-hr-se-sw-cr)));
1499
+
1500
+ // for font
1501
+
1502
+ --_sf-hr-cr: var(--_ctm-mob-dn-se-hr-se-cr,
1503
+ var(--_ctm-tab-dn-se-hr-se-cr, var(--_ctm-dn-se-hr-se-cr)));
1504
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-se-hr-se-ft-fy,
1505
+ var(--_ctm-tab-dn-se-hr-se-ft-fy, var(--_ctm-dn-se-hr-se-ft-fy)));
1506
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-se-hr-se-tt-tm,
1507
+ var(--_ctm-tab-dn-se-hr-se-tt-tm, var(--_ctm-dn-se-hr-se-tt-tm)));
1508
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-se-hr-se-wd-wp,
1509
+ var(--_ctm-tab-dn-se-hr-se-wd-wp, var(--_ctm-dn-se-hr-se-wd-wp)));
1510
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-se-hr-se-wd-bk,
1511
+ var(--_ctm-tab-dn-se-hr-se-wd-bk, var(--_ctm-dn-se-hr-se-wd-bk)));
1512
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-se-hr-se-ft-se,
1513
+ var(--_ctm-tab-dn-se-hr-se-ft-se, var(--_ctm-dn-se-hr-se-ft-se)));
1514
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-se-hr-se-ft-wt,
1515
+ var(--_ctm-tab-dn-se-hr-se-ft-wt, var(--_ctm-dn-se-hr-se-ft-wt)));
1516
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-se-hr-se-ft-se-ic,
1517
+ var(--_ctm-tab-dn-se-hr-se-ft-se-ic,
1518
+ var(--_ctm-dn-se-hr-se-ft-se-ic)));
1519
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-se-hr-se-tt-an,
1520
+ var(--_ctm-tab-dn-se-hr-se-tt-an, var(--_ctm-dn-se-hr-se-tt-an)));
1521
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-se-hr-se-lr-sg,
1522
+ var(--_ctm-tab-dn-se-hr-se-lr-sg, var(--_ctm-dn-se-hr-se-lr-sg)));
1523
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-se-hr-se-le-ht,
1524
+ var(--_ctm-tab-dn-se-hr-se-le-ht, var(--_ctm-dn-se-hr-se-le-ht)));
1525
+
1526
+ --_sf-hr-in-se: var(--_ctm-mob-dn-se-hr-se-in-se,
1527
+ var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se)));
1528
+ --_sf-hr-in-se: var(--_ctm-mob-dn-se-hr-se-in-se,
1529
+ var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se)));
1530
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-se-hr-se-in-c1,
1531
+ var(--_ctm-tab-dn-se-hr-se-in-c1, var(--_ctm-dn-se-hr-se-in-c1)));
1532
+ --_sf-hr-ue: var(--_ctm-mob-dn-se-hr-se-ue,
1533
+ var(--_ctm-tab-dn-se-hr-se-ue, var(--_ctm-dn-se-hr-se-ue)));
1534
+
1535
+ // for pading and width
1536
+ --_sf-hr-pg: var(--_ctm-mob-dn-se-hr-pg,
1537
+ var(--_ctm-tab-dn-se-hr-pg, var(--_ctm-dn-se-hr-pg)));
1538
+ --_sf-hr-wh: var(--_ctm-mob-dn-se-hr-wh,
1539
+ var(--_ctm-tab-dn-se-hr-wh, var(--_ctm-dn-se-hr-wh)));
1540
+
1541
+ &[data-hover-show-shadow="false"] {
1542
+ --_hover-show-shadow: none;
1543
+ }
2073
1544
 
2074
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1545
+ &[data-hover-show-icon="false"] {
1546
+ --_hover-show-icon: none;
1547
+ }
1548
+ }
2075
1549
 
2076
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1550
+ background-color: var(--_sf-hr-bd-cr,
1551
+ prepareMediaVariable(--_ctm-dn-se-dt-se-bd-cr));
2077
1552
 
2078
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2079
- }
1553
+ padding: 5px 10px;
1554
+ display: flex;
1555
+ flex-direction: var(--_sf-fd-bn);
1556
+ align-items: center;
2080
1557
 
2081
- .icon {
2082
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2083
- svg {
2084
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
2085
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1558
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-se-dt-se-at));
1559
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-se-dt-se-gp));
2086
1560
 
2087
- path {
2088
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
2089
- stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
2090
- }
2091
- }
2092
- }
2093
- [data-element-style="Text"] {
2094
- display: inline-block;
2095
- width: 100%;
2096
- }
1561
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-se-dt-se-pg));
1562
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-se-dt-se-wh));
2097
1563
 
2098
- .icon--hover {
2099
- // position: absolute;
2100
- // inset: 0;
2101
- // opacity: 0;
2102
- display: none;
2103
- transition: opacity 0.2s ease;
2104
- }
1564
+ border-radius: var(--_sf-hr-br-rs,
1565
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-rs));
2105
1566
 
2106
- &:hover .icon--hover {
2107
- // opacity: 1;
2108
- display: flex;
2109
- }
1567
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-cr));
2110
1568
 
2111
- &:hover .icon--default {
2112
- // opacity: 0;
2113
- display: none;
2114
- }
1569
+ &[data-show-border="true"] {
1570
+ border-color: var(--_sf-hr-br-cr,
1571
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-cr));
1572
+
1573
+ border-style: var(--_sf-hr-br-se,
1574
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-se));
1575
+
1576
+ border-width: var(--_sf-hr-br-wh,
1577
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-wh));
1578
+ }
1579
+
1580
+ .txt {
1581
+ display: flex;
1582
+
1583
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-cr));
1584
+
1585
+ font-family: var(--_sf-hr-ft-fy,
1586
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-fy));
1587
+ text-transform: var(--_sf-hr-tt-tm,
1588
+ prepareMediaVariable(--_ctm-dn-se-dt-se-tt-tm));
1589
+ word-wrap: var(--_sf-hr-wd-wp,
1590
+ prepareMediaVariable(--_ctm-dn-se-dt-se-wd-wp));
1591
+ word-break: var(--_sf-hr-wd-bk,
1592
+ prepareMediaVariable(--_ctm-dn-se-dt-se-wd-bk));
1593
+
1594
+ &.flex__overflow {
1595
+ white-space: normal;
1596
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1597
+ }
1598
+
1599
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se));
1600
+
1601
+ font-weight: var(--_sf-hr-ft-wt,
1602
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-wt));
1603
+
1604
+ font-style: var(--_sf-hr-ft-se-ic,
1605
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se-ic));
1606
+
1607
+ text-align: var(--_sf-hr-tt-an,
1608
+ prepareMediaVariable(--_ctm-dn-se-dt-se-tt-an));
1609
+
1610
+ letter-spacing: var(--_sf-hr-lr-sg,
1611
+ prepareMediaVariable(--_ctm-dn-se-dt-se-lr-sg));
1612
+
1613
+ line-height: var(--_sf-hr-le-ht,
1614
+ prepareMediaVariable(--_ctm-dn-se-dt-se-le-ht));
1615
+
1616
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1617
+ }
1618
+
1619
+ .icon {
1620
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1621
+
1622
+ svg {
1623
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
1624
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
1625
+
1626
+ path {
1627
+ stroke: var(--_sf-hr-in-c1,
1628
+ prepareMediaVariable(--_ctm-dn-se-dt-se-in-c1));
1629
+ stroke-width: prepareMediaVariable(--_ctm-dn-se-dt-se-se-wh, 1);
2115
1630
  }
2116
- &[data-btn-name="download"] {
2117
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
2118
- &[data-show-shadow="false"] {
2119
- --_show-shadow: none;
2120
- }
2121
- &[data-icon-position="left"] {
2122
- --_sf-fd-bn: row;
2123
- }
2124
- &[data-icon-position="right"] {
2125
- --_sf-fd-bn: row-reverse;
2126
- }
2127
- &[data-icon-position="center"] {
2128
- --_sf-fd-bn: row;
2129
- }
1631
+ }
1632
+ }
2130
1633
 
2131
- &:hover {
2132
- --_sf-hr-bd-cr: var(
2133
- --_ctm-mob-dn-dd-hr-se-bd-cr,
2134
- var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
2135
- );
2136
- --_sf-hr-br-cr: var(
2137
- --_ctm-mob-dn-dd-hr-se-br-cr,
2138
- var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
2139
- );
2140
- --_sf-hr-br-se: var(
2141
- --_ctm-mob-dn-dd-hr-se-br-se,
2142
- var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
2143
- );
2144
- --_sf-hr-br-wh: var(
2145
- --_ctm-mob-dn-dd-hr-se-br-wh,
2146
- var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
2147
- );
2148
- --_sf-hr-br-rs: var(
2149
- --_ctm-mob-dn-dd-hr-se-br-rs,
2150
- var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
2151
- );
2152
- --_sf-hr-at: var(
2153
- --_ctm-mob-dn-dd-hr-se-at,
2154
- var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
2155
- );
2156
- --_sf-hr-gp: var(
2157
- --_ctm-mob-dn-dd-hr-se-gp,
2158
- var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
2159
- );
1634
+ [data-element-style="Text"] {
1635
+ display: inline-block;
1636
+ width: 100%;
1637
+ }
2160
1638
 
2161
- // for shadow
2162
- --_sf-hr-sw-ae: var(
2163
- --_ctm-mob-dn-dd-hr-se-sw-ae,
2164
- var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
2165
- );
2166
- --_sf-hr-sw-br: var(
2167
- --_ctm-mob-dn-dd-hr-se-sw-br,
2168
- var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
2169
- );
2170
- --_sf-hr-sw-hr: var(
2171
- --_ctm-mob-dn-dd-hr-se-sw-hr,
2172
- var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
2173
- );
2174
- --_sf-hr-sw-cr: var(
2175
- --_ctm-mob-dn-dd-hr-se-sw-cr,
2176
- var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
2177
- );
1639
+ .icon--hover {
1640
+ // position: absolute;
1641
+ // inset: 0;
1642
+ // opacity: 0;
1643
+ display: none;
1644
+ transition: opacity 0.2s ease;
1645
+ }
2178
1646
 
2179
- // for font
1647
+ &:hover .icon--hover {
1648
+ // opacity: 1;
1649
+ display: flex;
1650
+ }
2180
1651
 
2181
- --_sf-hr-cr: var(
2182
- --_ctm-mob-dn-dd-hr-se-cr,
2183
- var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
2184
- );
2185
- --_sf-hr-ft-fy: var(
2186
- --_ctm-mob-dn-dd-hr-se-ft-fy,
2187
- var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
2188
- );
2189
- --_sf-hr-tt-tm: var(
2190
- --_ctm-mob-dn-dd-hr-se-tt-tm,
2191
- var(--_ctm-tab-dn-dd-hr-se-tt-tm, var(--_ctm-dn-dd-hr-se-tt-tm))
2192
- );
2193
- --_sf-hr-wd-wp: var(
2194
- --_ctm-mob-dn-dd-hr-se-wd-wp,
2195
- var(--_ctm-tab-dn-dd-hr-se-wd-wp, var(--_ctm-dn-dd-hr-se-wd-wp))
2196
- );
2197
- --_sf-hr-wd-bk: var(
2198
- --_ctm-mob-dn-dd-hr-se-wd-bk,
2199
- var(--_ctm-tab-dn-dd-hr-se-wd-bk, var(--_ctm-dn-dd-hr-se-wd-bk))
2200
- );
2201
- --_sf-hr-ft-se: var(
2202
- --_ctm-mob-dn-dd-hr-se-ft-se,
2203
- var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
2204
- );
2205
- --_sf-hr-ft-wt: var(
2206
- --_ctm-mob-dn-dd-hr-se-ft-wt,
2207
- var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
2208
- );
2209
- --_sf-hr-ft-se-ic: var(
2210
- --_ctm-mob-dn-dd-hr-se-ft-se-ic,
2211
- var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
2212
- );
2213
- --_sf-hr-tt-an: var(
2214
- --_ctm-mob-dn-dd-hr-se-tt-an,
2215
- var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
2216
- );
2217
- --_sf-hr-lr-sg: var(
2218
- --_ctm-mob-dn-dd-hr-se-lr-sg,
2219
- var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
2220
- );
2221
- --_sf-hr-le-ht: var(
2222
- --_ctm-mob-dn-dd-hr-se-le-ht,
2223
- var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
2224
- );
2225
-
2226
- --_sf-hr-in-se: var(
2227
- --_ctm-mob-dn-dd-hr-se-in-se,
2228
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
2229
- );
2230
- --_sf-hr-in-se: var(
2231
- --_ctm-mob-dn-dd-hr-se-in-se,
2232
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
2233
- );
2234
- --_sf-hr-in-c1: var(
2235
- --_ctm-mob-dn-dd-hr-se-in-c1,
2236
- var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
2237
- );
2238
- --_sf-hr-ue: var(
2239
- --_ctm-mob-dn-dd-hr-se-ue,
2240
- var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
2241
- );
1652
+ &:hover .icon--default {
1653
+ // opacity: 0;
1654
+ display: none;
1655
+ }
1656
+ }
2242
1657
 
2243
- // for pading and width
2244
- --_sf-hr-pg: var(
2245
- --_ctm-mob-dn-dd-hr-pg,
2246
- var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
2247
- );
2248
- --_sf-hr-wh: var(
2249
- --_ctm-mob-dn-dd-hr-wh,
2250
- var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
2251
- );
1658
+ &[data-btn-name="notifyMe"] {
1659
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
2252
1660
 
2253
- &[data-hover-show-shadow="false"] {
2254
- --_hover-show-shadow: none;
2255
- }
2256
- &[data-hover-show-icon="false"] {
2257
- --_hover-show-icon: none;
2258
- }
2259
- }
2260
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1661
+ &[data-show-shadow="false"] {
1662
+ --_show-shadow: none;
1663
+ }
2261
1664
 
2262
- display: flex;
2263
- flex-direction: var(--_sf-fd-bn);
2264
- align-items: center;
1665
+ &[data-icon-position="left"] {
1666
+ --_sf-fd-bn: row;
1667
+ }
2265
1668
 
2266
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
2267
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1669
+ &[data-icon-position="right"] {
1670
+ --_sf-fd-bn: row-reverse;
1671
+ }
2268
1672
 
2269
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
2270
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1673
+ &[data-icon-position="center"] {
1674
+ --_sf-fd-bn: row;
1675
+ }
2271
1676
 
2272
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1677
+ &:hover {
1678
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ny-me-hr-se-bd-cr,
1679
+ var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr)));
1680
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ny-me-hr-se-br-cr,
1681
+ var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr)));
1682
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ny-me-hr-se-br-se,
1683
+ var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se)));
1684
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ny-me-hr-se-br-wh,
1685
+ var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh)));
1686
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ny-me-hr-se-br-rs,
1687
+ var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs)));
1688
+ --_sf-hr-at: var(--_ctm-mob-dn-ny-me-hr-se-at,
1689
+ var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at)));
1690
+ --_sf-hr-gp: var(--_ctm-mob-dn-ny-me-hr-se-gp,
1691
+ var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp)));
1692
+
1693
+ // for shadow
1694
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ny-me-hr-se-sw-ae,
1695
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae)));
1696
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ny-me-hr-se-sw-br,
1697
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br)));
1698
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ny-me-hr-se-sw-hr,
1699
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr)));
1700
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ny-me-hr-se-sw-cr,
1701
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr)));
1702
+
1703
+ // for font
1704
+
1705
+ --_sf-hr-cr: var(--_ctm-mob-dn-ny-me-hr-se-cr,
1706
+ var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr)));
1707
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ny-me-hr-se-ft-fy,
1708
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy)));
1709
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ny-me-hr-se-tt-tm,
1710
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-tm, var(--_ctm-dn-ny-me-hr-se-tt-tm)));
1711
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ny-me-hr-se-wd-wp,
1712
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-wp, var(--_ctm-dn-ny-me-hr-se-wd-wp)));
1713
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ny-me-hr-se-wd-bk,
1714
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-bk, var(--_ctm-dn-ny-me-hr-se-wd-bk)));
1715
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ny-me-hr-se-ft-se,
1716
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se)));
1717
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ny-me-hr-se-ft-wt,
1718
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt)));
1719
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1720
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic)));
1721
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ny-me-hr-se-tt-an,
1722
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an)));
1723
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ny-me-hr-se-lr-sg,
1724
+ var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg)));
1725
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ny-me-hr-se-le-ht,
1726
+ var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht)));
1727
+
1728
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ny-me-hr-se-in-se,
1729
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se)));
1730
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ny-me-hr-se-in-se,
1731
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se)));
1732
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ny-me-hr-se-in-c1,
1733
+ var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1)));
1734
+ --_sf-hr-ue: var(--_ctm-mob-dn-ny-me-hr-se-ue,
1735
+ var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue)));
1736
+
1737
+ // for pading and width
1738
+ --_sf-hr-pg: var(--_ctm-mob-dn-ny-me-hr-pg,
1739
+ var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg)));
1740
+ --_sf-hr-wh: var(--_ctm-mob-dn-ny-me-hr-wh,
1741
+ var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh)));
1742
+
1743
+ &[data-hover-show-shadow="false"] {
1744
+ --_hover-show-shadow: none;
1745
+ }
2273
1746
 
2274
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
2275
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
2276
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
2277
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1747
+ &[data-hover-show-icon="false"] {
1748
+ --_hover-show-icon: none;
1749
+ }
1750
+ }
2278
1751
 
2279
- &[data-show-border="true"] {
2280
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1752
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
2281
1753
 
2282
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1754
+ display: flex;
1755
+ flex-direction: var(--_sf-fd-bn);
1756
+ align-items: center;
2283
1757
 
2284
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
2285
- }
1758
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1759
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
2286
1760
 
2287
- .txt {
2288
- display: flex;
1761
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1762
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
2289
1763
 
2290
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1764
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
2291
1765
 
2292
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
2293
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-tm));
2294
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-wp));
2295
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-bk));
2296
- &.flex__overflow {
2297
- white-space: normal;
2298
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2299
- }
1766
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
2300
1767
 
2301
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1768
+ &[data-show-border="true"] {
1769
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
2302
1770
 
2303
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1771
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
2304
1772
 
2305
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1773
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1774
+ }
2306
1775
 
2307
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1776
+ .txt {
1777
+ display: flex;
2308
1778
 
2309
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1779
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
2310
1780
 
2311
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1781
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1782
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-tm));
1783
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-wp));
1784
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-bk));
2312
1785
 
2313
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2314
- }
1786
+ &.flex__overflow {
1787
+ white-space: normal;
1788
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1789
+ }
2315
1790
 
2316
- .icon {
2317
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2318
- svg {
2319
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
2320
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1791
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
2321
1792
 
2322
- path {
2323
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
2324
- stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
2325
- }
2326
- }
2327
- }
2328
- [data-element-style="Text"] {
2329
- display: inline-block;
2330
- width: 100%;
2331
- }
1793
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
2332
1794
 
2333
- .icon--hover {
2334
- // position: absolute;
2335
- // inset: 0;
2336
- // opacity: 0;
2337
- display: none;
2338
- transition: opacity 0.2s ease;
2339
- }
1795
+ font-style: var(--_sf-hr-ft-se-ic,
1796
+ prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
2340
1797
 
2341
- &:hover .icon--hover {
2342
- // opacity: 1;
2343
- display: flex;
2344
- }
1798
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
2345
1799
 
2346
- &:hover .icon--default {
2347
- // opacity: 0;
2348
- display: none;
2349
- }
2350
- }
2351
- &[data-btn-name="more"] {
2352
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2353
- &[data-show-shadow="false"] {
2354
- --_show-shadow: none;
2355
- }
2356
- &[data-icon-position="left"] {
2357
- --_sf-fd-bn: row;
2358
- }
2359
- &[data-icon-position="right"] {
2360
- --_sf-fd-bn: row-reverse;
2361
- }
2362
- &[data-icon-position="center"] {
2363
- --_sf-fd-bn: row;
2364
- }
1800
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
2365
1801
 
2366
- &:hover {
2367
- --_sf-hr-bd-cr: var(
2368
- --_ctm-mob-dn-me-hr-se-bd-cr,
2369
- var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
2370
- );
2371
- --_sf-hr-br-cr: var(
2372
- --_ctm-mob-dn-me-hr-se-br-cr,
2373
- var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
2374
- );
2375
- --_sf-hr-br-se: var(
2376
- --_ctm-mob-dn-me-hr-se-br-se,
2377
- var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
2378
- );
2379
- --_sf-hr-br-wh: var(
2380
- --_ctm-mob-dn-me-hr-se-br-wh,
2381
- var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
2382
- );
2383
- --_sf-hr-br-rs: var(
2384
- --_ctm-mob-dn-me-hr-se-br-rs,
2385
- var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
2386
- );
2387
- --_sf-hr-at: var(
2388
- --_ctm-mob-dn-me-hr-se-at,
2389
- var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
2390
- );
2391
- --_sf-hr-gp: var(
2392
- --_ctm-mob-dn-me-hr-se-gp,
2393
- var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
2394
- );
1802
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
2395
1803
 
2396
- // for shadow
2397
- --_sf-hr-sw-ae: var(
2398
- --_ctm-mob-dn-me-hr-se-sw-ae,
2399
- var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
2400
- );
2401
- --_sf-hr-sw-br: var(
2402
- --_ctm-mob-dn-me-hr-se-sw-br,
2403
- var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
2404
- );
2405
- --_sf-hr-sw-hr: var(
2406
- --_ctm-mob-dn-me-hr-se-sw-hr,
2407
- var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
2408
- );
2409
- --_sf-hr-sw-cr: var(
2410
- --_ctm-mob-dn-me-hr-se-sw-cr,
2411
- var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
2412
- );
1804
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1805
+ }
2413
1806
 
2414
- // for font
1807
+ .icon {
1808
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2415
1809
 
2416
- --_sf-hr-cr: var(
2417
- --_ctm-mob-dn-me-hr-se-cr,
2418
- var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
2419
- );
2420
- --_sf-hr-ft-fy: var(
2421
- --_ctm-mob-dn-me-hr-se-ft-fy,
2422
- var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
2423
- );
2424
- --_sf-hr-tt-tm: var(
2425
- --_ctm-mob-dn-me-hr-se-tt-tm,
2426
- var(--_ctm-tab-dn-me-hr-se-tt-tm, var(--_ctm-dn-me-hr-se-tt-tm))
2427
- );
2428
- --_sf-hr-wd-wp: var(
2429
- --_ctm-mob-dn-me-hr-se-wd-wp,
2430
- var(--_ctm-tab-dn-me-hr-se-wd-wp, var(--_ctm-dn-me-hr-se-wd-wp))
2431
- );
2432
- --_sf-hr-wd-bk: var(
2433
- --_ctm-mob-dn-me-hr-se-wd-bk,
2434
- var(--_ctm-tab-dn-me-hr-se-wd-bk, var(--_ctm-dn-me-hr-se-wd-bk))
2435
- );
2436
- --_sf-hr-ft-se: var(
2437
- --_ctm-mob-dn-me-hr-se-ft-se,
2438
- var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
2439
- );
2440
- --_sf-hr-ft-wt: var(
2441
- --_ctm-mob-dn-me-hr-se-ft-wt,
2442
- var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
2443
- );
2444
- --_sf-hr-ft-se-ic: var(
2445
- --_ctm-mob-dn-me-hr-se-ft-se-ic,
2446
- var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
2447
- );
2448
- --_sf-hr-tt-an: var(
2449
- --_ctm-mob-dn-me-hr-se-tt-an,
2450
- var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
2451
- );
2452
- --_sf-hr-lr-sg: var(
2453
- --_ctm-mob-dn-me-hr-se-lr-sg,
2454
- var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
2455
- );
2456
- --_sf-hr-le-ht: var(
2457
- --_ctm-mob-dn-me-hr-se-le-ht,
2458
- var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
2459
- );
2460
-
2461
- --_sf-hr-in-se: var(
2462
- --_ctm-mob-dn-me-hr-se-in-se,
2463
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2464
- );
2465
- --_sf-hr-in-se: var(
2466
- --_ctm-mob-dn-me-hr-se-in-se,
2467
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2468
- );
2469
- --_sf-hr-in-c1: var(
2470
- --_ctm-mob-dn-me-hr-se-in-c1,
2471
- var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
2472
- );
2473
- --_sf-hr-ue: var(
2474
- --_ctm-mob-dn-me-hr-se-ue,
2475
- var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
2476
- );
1810
+ svg {
1811
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1812
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
2477
1813
 
2478
- // for pading and width
2479
- --_sf-hr-pg: var(
2480
- --_ctm-mob-dn-me-hr-pg,
2481
- var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
2482
- );
2483
- --_sf-hr-wh: var(
2484
- --_ctm-mob-dn-me-hr-wh,
2485
- var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
2486
- );
1814
+ path {
1815
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1816
+ stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
1817
+ }
1818
+ }
1819
+ }
2487
1820
 
2488
- &[data-hover-show-shadow="false"] {
2489
- --_hover-show-shadow: none;
2490
- }
2491
- &[data-hover-show-icon="false"] {
2492
- --_hover-show-icon: none;
2493
- }
2494
- }
2495
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
1821
+ [data-element-style="Text"] {
1822
+ display: inline-block;
1823
+ width: 100%;
1824
+ }
2496
1825
 
2497
- display: flex;
2498
- flex-direction: var(--_sf-fd-bn);
2499
- align-items: center;
1826
+ .icon--hover {
1827
+ // position: absolute;
1828
+ // inset: 0;
1829
+ // opacity: 0;
1830
+ display: none;
1831
+ transition: opacity 0.2s ease;
1832
+ }
2500
1833
 
2501
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
2502
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
1834
+ &:hover .icon--hover {
1835
+ // opacity: 1;
1836
+ display: flex;
1837
+ }
2503
1838
 
2504
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
2505
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
2506
- height: 100%;
2507
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
1839
+ &:hover .icon--default {
1840
+ // opacity: 0;
1841
+ display: none;
1842
+ }
1843
+ }
2508
1844
 
2509
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
2510
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
2511
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
2512
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
1845
+ &[data-btn-name="download"] {
1846
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
2513
1847
 
2514
- &[data-show-border="true"] {
2515
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
1848
+ &[data-show-shadow="false"] {
1849
+ --_show-shadow: none;
1850
+ }
2516
1851
 
2517
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
1852
+ &[data-icon-position="left"] {
1853
+ --_sf-fd-bn: row;
1854
+ }
2518
1855
 
2519
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2520
- }
1856
+ &[data-icon-position="right"] {
1857
+ --_sf-fd-bn: row-reverse;
1858
+ }
2521
1859
 
2522
- .txt {
2523
- display: flex;
1860
+ &[data-icon-position="center"] {
1861
+ --_sf-fd-bn: row;
1862
+ }
2524
1863
 
2525
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
1864
+ &:hover {
1865
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-dd-hr-se-bd-cr,
1866
+ var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr)));
1867
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-dd-hr-se-br-cr,
1868
+ var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr)));
1869
+ --_sf-hr-br-se: var(--_ctm-mob-dn-dd-hr-se-br-se,
1870
+ var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se)));
1871
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-dd-hr-se-br-wh,
1872
+ var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh)));
1873
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-dd-hr-se-br-rs,
1874
+ var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs)));
1875
+ --_sf-hr-at: var(--_ctm-mob-dn-dd-hr-se-at,
1876
+ var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at)));
1877
+ --_sf-hr-gp: var(--_ctm-mob-dn-dd-hr-se-gp,
1878
+ var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp)));
1879
+
1880
+ // for shadow
1881
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-dd-hr-se-sw-ae,
1882
+ var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae)));
1883
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-dd-hr-se-sw-br,
1884
+ var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br)));
1885
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-dd-hr-se-sw-hr,
1886
+ var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr)));
1887
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-dd-hr-se-sw-cr,
1888
+ var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr)));
1889
+
1890
+ // for font
1891
+
1892
+ --_sf-hr-cr: var(--_ctm-mob-dn-dd-hr-se-cr,
1893
+ var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr)));
1894
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-dd-hr-se-ft-fy,
1895
+ var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy)));
1896
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-dd-hr-se-tt-tm,
1897
+ var(--_ctm-tab-dn-dd-hr-se-tt-tm, var(--_ctm-dn-dd-hr-se-tt-tm)));
1898
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-dd-hr-se-wd-wp,
1899
+ var(--_ctm-tab-dn-dd-hr-se-wd-wp, var(--_ctm-dn-dd-hr-se-wd-wp)));
1900
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-dd-hr-se-wd-bk,
1901
+ var(--_ctm-tab-dn-dd-hr-se-wd-bk, var(--_ctm-dn-dd-hr-se-wd-bk)));
1902
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-dd-hr-se-ft-se,
1903
+ var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se)));
1904
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-dd-hr-se-ft-wt,
1905
+ var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt)));
1906
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-dd-hr-se-ft-se-ic,
1907
+ var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic)));
1908
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-dd-hr-se-tt-an,
1909
+ var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an)));
1910
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-dd-hr-se-lr-sg,
1911
+ var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg)));
1912
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-dd-hr-se-le-ht,
1913
+ var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht)));
1914
+
1915
+ --_sf-hr-in-se: var(--_ctm-mob-dn-dd-hr-se-in-se,
1916
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se)));
1917
+ --_sf-hr-in-se: var(--_ctm-mob-dn-dd-hr-se-in-se,
1918
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se)));
1919
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-dd-hr-se-in-c1,
1920
+ var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1)));
1921
+ --_sf-hr-ue: var(--_ctm-mob-dn-dd-hr-se-ue,
1922
+ var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue)));
1923
+
1924
+ // for pading and width
1925
+ --_sf-hr-pg: var(--_ctm-mob-dn-dd-hr-pg,
1926
+ var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg)));
1927
+ --_sf-hr-wh: var(--_ctm-mob-dn-dd-hr-wh,
1928
+ var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh)));
1929
+
1930
+ &[data-hover-show-shadow="false"] {
1931
+ --_hover-show-shadow: none;
1932
+ }
2526
1933
 
2527
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
2528
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-tm));
2529
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-wp));
2530
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-bk));
2531
- &.flex__overflow {
2532
- white-space: normal;
2533
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2534
- }
1934
+ &[data-hover-show-icon="false"] {
1935
+ --_hover-show-icon: none;
1936
+ }
1937
+ }
2535
1938
 
2536
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
1939
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
2537
1940
 
2538
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
1941
+ display: flex;
1942
+ flex-direction: var(--_sf-fd-bn);
1943
+ align-items: center;
2539
1944
 
2540
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
1945
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1946
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
2541
1947
 
2542
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
1948
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1949
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
2543
1950
 
2544
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
1951
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
2545
1952
 
2546
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
1953
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
2547
1954
 
2548
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2549
- }
1955
+ &[data-show-border="true"] {
1956
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
2550
1957
 
2551
- .icon {
2552
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2553
- svg {
2554
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2555
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
1958
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
2556
1959
 
2557
- path {
2558
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2559
- stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
2560
- }
2561
- }
2562
- }
2563
- [data-element-style="Text"] {
2564
- display: inline-block;
2565
- width: 100%;
2566
- }
1960
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1961
+ }
2567
1962
 
2568
- .icon--hover {
2569
- // position: absolute;
2570
- // inset: 0;
2571
- // opacity: 0;
2572
- display: none;
2573
- transition: opacity 0.2s ease;
2574
- }
1963
+ .txt {
1964
+ display: flex;
2575
1965
 
2576
- &:hover .icon--hover {
2577
- // opacity: 1;
2578
- display: flex;
2579
- }
1966
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
2580
1967
 
2581
- &:hover .icon--default {
2582
- // opacity: 0;
2583
- display: none;
2584
- }
2585
- }
1968
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1969
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-tm));
1970
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-wp));
1971
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-bk));
1972
+
1973
+ &.flex__overflow {
1974
+ white-space: normal;
1975
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2586
1976
  }
2587
1977
 
2588
- // .dropdown-menu {
2589
- // display: block;
2590
- // position: absolute;
2591
- // top: 110%;
2592
-
2593
- // &[data-position="left"] {
2594
- // left: 0;
2595
- // }
2596
- // &[data-position="right"] {
2597
- // right: 0;
2598
- // }
2599
- // &[data-position="center"] {
2600
- // left: 50%;
2601
- // transform: translateX(-50%);
2602
- // }
2603
- // // top: 78%;
2604
- // // left: 100%;
2605
- // // margin-left: 8px;
2606
-
2607
- // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2608
- // min-width: 200px;
2609
- // z-index: 100;
2610
- // display: flex;
2611
- // flex-direction: column;
2612
- // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2613
-
2614
- // background-color: var(
2615
- // --_ctm-mob-dn-dn-se-bd-cr,
2616
- // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2617
- // );
2618
-
2619
- // border-color: var(
2620
- // --_ctm-mob-dn-dn-se-br-cr,
2621
- // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2622
- // );
2623
-
2624
- // border-style: var(
2625
- // --_ctm-mob-dn-dn-se-br-se,
2626
- // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2627
- // );
2628
-
2629
- // border-width: var(
2630
- // --_ctm-mob-dn-dn-se-br-wh,
2631
- // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2632
- // );
2633
-
2634
- // border-radius: var(
2635
- // --_ctm-mob-dn-dn-se-br-rs,
2636
- // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2637
- // );
2638
-
2639
- // box-shadow: var(
2640
- // --_show-shadow,
2641
- // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2642
- // var(
2643
- // --_ctm-mob-dn-dn-se-sw-br,
2644
- // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2645
- // )
2646
- // var(
2647
- // --_ctm-mob-dn-dn-se-sw-sd,
2648
- // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2649
- // )
2650
- // var(
2651
- // --_ctm-mob-dn-dn-se-sw-cr,
2652
- // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2653
- // )
2654
- // );
2655
- // }
2656
- .popover-container {
2657
- position: relative;
2658
- display: inline-block;
2659
- .popover-trigger {
2660
- cursor: pointer;
2661
- font-weight: 500;
2662
- color: #2b6cb0;
2663
- }
1978
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
2664
1979
 
2665
- .popover-box {
2666
- // position: absolute;
2667
- // top: calc(100% + 10px);
2668
- // right: 0;
2669
- // background: white;
2670
- // padding: 12px 16px;
2671
- // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2672
- // border-radius: 8px;
2673
- // min-width: 150px;
2674
- // z-index: 10;
2675
- position: absolute;
2676
- // border: 1px solid #ccc;
2677
- // min-width: 150px;
2678
- max-width: 200px;
2679
- z-index: 1000;
2680
- // left: 40px;
2681
- // top: 0;
2682
- // right: -125%;
2683
- padding: 8px;
2684
- border-radius: 4px;
2685
- }
1980
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
2686
1981
 
2687
- .popover-box {
2688
- display: flex;
2689
- flex-direction: column;
2690
-
2691
- // width: 100%;
2692
- gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2693
- background-color: var(
2694
- --_ctm-mob-dn-pr-se-bd-cr,
2695
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2696
- );
2697
-
2698
- border-color: var(
2699
- --_ctm-mob-dn-pr-se-br-cr,
2700
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2701
- );
2702
-
2703
- border-style: var(
2704
- --_ctm-mob-dn-pr-se-br-se,
2705
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2706
- );
2707
-
2708
- border-width: var(
2709
- --_ctm-mob-dn-pr-se-br-wh,
2710
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2711
- );
2712
-
2713
- border-radius: var(
2714
- --_ctm-mob-dn-pr-se-br-rs,
2715
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2716
- );
2717
-
2718
- box-shadow: var(
2719
- --_show-shadow,
2720
- var(
2721
- --_ctm-mob-dn-pr-se-sw-ae,
2722
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2723
- )
2724
- var(
2725
- --_ctm-mob-dn-pr-se-sw-br,
2726
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2727
- )
2728
- var(
2729
- --_ctm-mob-dn-pr-se-sw-sd,
2730
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2731
- )
2732
- var(
2733
- --_ctm-mob-dn-pr-se-sw-cr,
2734
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2735
- )
2736
- );
2737
-
2738
- padding: var(
2739
- --_ctm-mob-dn-pr-se-pg,
2740
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2741
- );
2742
- }
1982
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
2743
1983
 
2744
- .popover-box strong {
2745
- display: block;
2746
- margin-bottom: 6px;
2747
- font-weight: bold;
2748
- }
1984
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
2749
1985
 
2750
- .popover-arrow {
2751
- position: absolute;
2752
- top: 8px;
2753
- left: -5px;
2754
- width: 12px;
2755
- min-height: 12px;
2756
-
2757
- // background-color: var(
2758
- // --_ctm-mob-dn-pr-se-bd-cr,
2759
- // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2760
- // );
2761
- transform: rotate(-45deg);
2762
- box-shadow: -1px -1px 0px
2763
- var(
2764
- --_ctm-mob-dn-pr-se-br-cr,
2765
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2766
- );
2767
- }
1986
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1987
+
1988
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1989
+
1990
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1991
+ }
1992
+
1993
+ .icon {
1994
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1995
+
1996
+ svg {
1997
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1998
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
2768
1999
 
2769
- .popover_item {
2770
- // padding-inline: var(--_sf-cd-gp);
2771
- color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2772
- font-family: var(
2773
- --_ctm-mob-dn-pr-se-ft-fy,
2774
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2775
- );
2776
- text-transform: var(
2777
- --_ctm-mob-dn-pr-se-tt-tm,
2778
- var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
2779
- );
2780
- word-wrap: var(
2781
- --_ctm-mob-dn-pr-se-wd-wp,
2782
- var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
2783
- );
2784
- word-break: var(
2785
- --_ctm-mob-dn-pr-se-wd-bk,
2786
- var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
2787
- );
2788
- font-size: var(
2789
- --_ctm-mob-dn-pr-se-ft-se,
2790
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2791
- );
2792
- font-weight: var(
2793
- --_ctm-mob-dn-pr-se-ft-wt,
2794
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2795
- );
2796
- font-style: var(
2797
- --_ctm-mob-dn-pr-se-ft-se-ic,
2798
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2799
- );
2800
- text-align: var(
2801
- --_ctm-mob-dn-pr-se-tt-an,
2802
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2803
- );
2804
- letter-spacing: var(
2805
- --_ctm-mob-dn-pr-se-lr-sg,
2806
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2807
- );
2808
- line-height: var(
2809
- --_ctm-mob-dn-pr-se-le-ht,
2810
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2811
- );
2812
- text-decoration: var(
2813
- --_ctm-mob-dn-pr-se-ue,
2814
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2815
- );
2816
- // margin-left: 10px;
2000
+ path {
2001
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
2002
+ stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
2817
2003
  }
2818
2004
  }
2005
+ }
2819
2006
 
2820
- // Horizontal side of the popover, from design > Popover Style > Popover Position.
2821
- // Only the side changes — the vertical placement below is left to the display
2822
- // style, so a vertically stacked list still opens beside its trigger and a
2823
- // horizontal one still opens underneath it. "Right" is the original behaviour and
2824
- // stays the default, so elements saved before this control are unaffected.
2825
- &[data-display-style="Stack Vertically"] {
2826
- .popover-box {
2827
- left: 100%;
2828
- transform: translate(0%);
2829
- margin-left: 6px;
2830
- top: 0;
2831
- }
2007
+ [data-element-style="Text"] {
2008
+ display: inline-block;
2009
+ width: 100%;
2010
+ }
2832
2011
 
2833
- // Beside the trigger, on its left instead of its right.
2834
- .popover-container[data-popover-position="Left"] .popover-box {
2835
- left: auto;
2836
- right: 100%;
2837
- margin-left: 0;
2838
- margin-right: 6px;
2839
- }
2012
+ .icon--hover {
2013
+ // position: absolute;
2014
+ // inset: 0;
2015
+ // opacity: 0;
2016
+ display: none;
2017
+ transition: opacity 0.2s ease;
2018
+ }
2019
+
2020
+ &:hover .icon--hover {
2021
+ // opacity: 1;
2022
+ display: flex;
2023
+ }
2024
+
2025
+ &:hover .icon--default {
2026
+ // opacity: 0;
2027
+ display: none;
2028
+ }
2029
+ }
2030
+
2031
+ &[data-btn-name="more"] {
2032
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2033
+
2034
+ &[data-show-shadow="false"] {
2035
+ --_show-shadow: none;
2036
+ }
2037
+
2038
+ &[data-icon-position="left"] {
2039
+ --_sf-fd-bn: row;
2040
+ }
2041
+
2042
+ &[data-icon-position="right"] {
2043
+ --_sf-fd-bn: row-reverse;
2044
+ }
2045
+
2046
+ &[data-icon-position="center"] {
2047
+ --_sf-fd-bn: row;
2048
+ }
2049
+
2050
+ &:hover {
2051
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-me-hr-se-bd-cr,
2052
+ var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr)));
2053
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-me-hr-se-br-cr,
2054
+ var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr)));
2055
+ --_sf-hr-br-se: var(--_ctm-mob-dn-me-hr-se-br-se,
2056
+ var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se)));
2057
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-me-hr-se-br-wh,
2058
+ var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh)));
2059
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-me-hr-se-br-rs,
2060
+ var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs)));
2061
+ --_sf-hr-at: var(--_ctm-mob-dn-me-hr-se-at,
2062
+ var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at)));
2063
+ --_sf-hr-gp: var(--_ctm-mob-dn-me-hr-se-gp,
2064
+ var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp)));
2065
+
2066
+ // for shadow
2067
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-me-hr-se-sw-ae,
2068
+ var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae)));
2069
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-me-hr-se-sw-br,
2070
+ var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br)));
2071
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-me-hr-se-sw-hr,
2072
+ var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr)));
2073
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-me-hr-se-sw-cr,
2074
+ var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr)));
2075
+
2076
+ // for font
2077
+
2078
+ --_sf-hr-cr: var(--_ctm-mob-dn-me-hr-se-cr,
2079
+ var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr)));
2080
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-me-hr-se-ft-fy,
2081
+ var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy)));
2082
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-me-hr-se-tt-tm,
2083
+ var(--_ctm-tab-dn-me-hr-se-tt-tm, var(--_ctm-dn-me-hr-se-tt-tm)));
2084
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-me-hr-se-wd-wp,
2085
+ var(--_ctm-tab-dn-me-hr-se-wd-wp, var(--_ctm-dn-me-hr-se-wd-wp)));
2086
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-me-hr-se-wd-bk,
2087
+ var(--_ctm-tab-dn-me-hr-se-wd-bk, var(--_ctm-dn-me-hr-se-wd-bk)));
2088
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-me-hr-se-ft-se,
2089
+ var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se)));
2090
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-me-hr-se-ft-wt,
2091
+ var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt)));
2092
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-me-hr-se-ft-se-ic,
2093
+ var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic)));
2094
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-me-hr-se-tt-an,
2095
+ var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an)));
2096
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-me-hr-se-lr-sg,
2097
+ var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg)));
2098
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-me-hr-se-le-ht,
2099
+ var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht)));
2100
+
2101
+ --_sf-hr-in-se: var(--_ctm-mob-dn-me-hr-se-in-se,
2102
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se)));
2103
+ --_sf-hr-in-se: var(--_ctm-mob-dn-me-hr-se-in-se,
2104
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se)));
2105
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-me-hr-se-in-c1,
2106
+ var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1)));
2107
+ --_sf-hr-ue: var(--_ctm-mob-dn-me-hr-se-ue,
2108
+ var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue)));
2109
+
2110
+ // for pading and width
2111
+ --_sf-hr-pg: var(--_ctm-mob-dn-me-hr-pg,
2112
+ var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg)));
2113
+ --_sf-hr-wh: var(--_ctm-mob-dn-me-hr-wh,
2114
+ var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh)));
2115
+
2116
+ &[data-hover-show-shadow="false"] {
2117
+ --_hover-show-shadow: none;
2840
2118
  }
2841
- &[data-display-style="Stack Horizontally"] {
2842
- .popover-box {
2843
- right: 0;
2844
- margin-top: 6px;
2845
- }
2846
2119
 
2847
- // Under the trigger, aligned to its left edge instead of its right.
2848
- .popover-container[data-popover-position="Left"] .popover-box {
2849
- right: auto;
2850
- left: 0;
2851
- }
2120
+ &[data-hover-show-icon="false"] {
2121
+ --_hover-show-icon: none;
2852
2122
  }
2123
+ }
2853
2124
 
2854
- // "Show Border" switch for the popover. The border is painted from CSS variables
2855
- // above, so the switch arrives as a data attribute and the width is zeroed here.
2856
- // Placed after the .popover-box rules and one attribute deeper, so it wins.
2857
- .popover-container[data-popover-border="false"] .popover-box {
2858
- border-width: 0;
2859
- border-style: none;
2125
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
2126
+
2127
+ display: flex;
2128
+ flex-direction: var(--_sf-fd-bn);
2129
+ align-items: center;
2130
+
2131
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
2132
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
2133
+
2134
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
2135
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
2136
+ height: 100%;
2137
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
2138
+
2139
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
2140
+
2141
+ &[data-show-border="true"] {
2142
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
2143
+
2144
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
2145
+
2146
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2147
+ }
2148
+
2149
+ .txt {
2150
+ display: flex;
2151
+
2152
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
2153
+
2154
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
2155
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-tm));
2156
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-wp));
2157
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-bk));
2158
+
2159
+ &.flex__overflow {
2160
+ white-space: normal;
2161
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2860
2162
  }
2861
2163
 
2862
- // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
2863
- // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
2864
- .popover-container[data-popover-position="Left"] .popover-arrow {
2865
- left: auto;
2866
- right: -5px;
2867
- box-shadow: 1px 1px 0px
2868
- var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2164
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2165
+
2166
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2167
+
2168
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2169
+
2170
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2171
+
2172
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2173
+
2174
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2175
+
2176
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2177
+ }
2178
+
2179
+ .icon {
2180
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2181
+
2182
+ svg {
2183
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2184
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2185
+
2186
+ path {
2187
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2188
+ stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
2189
+ }
2869
2190
  }
2870
2191
  }
2192
+
2193
+ [data-element-style="Text"] {
2194
+ display: inline-block;
2195
+ width: 100%;
2196
+ }
2197
+
2198
+ .icon--hover {
2199
+ // position: absolute;
2200
+ // inset: 0;
2201
+ // opacity: 0;
2202
+ display: none;
2203
+ transition: opacity 0.2s ease;
2204
+ }
2205
+
2206
+ &:hover .icon--hover {
2207
+ // opacity: 1;
2208
+ display: flex;
2209
+ }
2210
+
2211
+ &:hover .icon--default {
2212
+ // opacity: 0;
2213
+ display: none;
2214
+ }
2871
2215
  }
2872
2216
  }
2217
+
2218
+ // .dropdown-menu {
2219
+ // display: block;
2220
+ // position: absolute;
2221
+ // top: 110%;
2222
+
2223
+ // &[data-position="left"] {
2224
+ // left: 0;
2225
+ // }
2226
+ // &[data-position="right"] {
2227
+ // right: 0;
2228
+ // }
2229
+ // &[data-position="center"] {
2230
+ // left: 50%;
2231
+ // transform: translateX(-50%);
2232
+ // }
2233
+ // // top: 78%;
2234
+ // // left: 100%;
2235
+ // // margin-left: 8px;
2236
+
2237
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2238
+ // min-width: 200px;
2239
+ // z-index: 100;
2240
+ // display: flex;
2241
+ // flex-direction: column;
2242
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2243
+
2244
+ // background-color: var(
2245
+ // --_ctm-mob-dn-dn-se-bd-cr,
2246
+ // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2247
+ // );
2248
+
2249
+ // border-color: var(
2250
+ // --_ctm-mob-dn-dn-se-br-cr,
2251
+ // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2252
+ // );
2253
+
2254
+ // border-style: var(
2255
+ // --_ctm-mob-dn-dn-se-br-se,
2256
+ // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2257
+ // );
2258
+
2259
+ // border-width: var(
2260
+ // --_ctm-mob-dn-dn-se-br-wh,
2261
+ // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2262
+ // );
2263
+
2264
+ // border-radius: var(
2265
+ // --_ctm-mob-dn-dn-se-br-rs,
2266
+ // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2267
+ // );
2268
+
2269
+ // box-shadow: var(
2270
+ // --_show-shadow,
2271
+ // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2272
+ // var(
2273
+ // --_ctm-mob-dn-dn-se-sw-br,
2274
+ // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2275
+ // )
2276
+ // var(
2277
+ // --_ctm-mob-dn-dn-se-sw-sd,
2278
+ // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2279
+ // )
2280
+ // var(
2281
+ // --_ctm-mob-dn-dn-se-sw-cr,
2282
+ // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2283
+ // )
2284
+ // );
2285
+ // }
2286
+ .popover-container {
2287
+ position: relative;
2288
+ display: inline-block;
2289
+
2290
+ .popover-trigger {
2291
+ cursor: pointer;
2292
+ font-weight: 500;
2293
+ color: #2b6cb0;
2294
+ }
2295
+
2296
+ .popover-box {
2297
+ // position: absolute;
2298
+ // top: calc(100% + 10px);
2299
+ // right: 0;
2300
+ // background: white;
2301
+ // padding: 12px 16px;
2302
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2303
+ // border-radius: 8px;
2304
+ // min-width: 150px;
2305
+ // z-index: 10;
2306
+ position: absolute;
2307
+ // border: 1px solid #ccc;
2308
+ // min-width: 150px;
2309
+ max-width: 200px;
2310
+ z-index: 1000;
2311
+ // left: 40px;
2312
+ // top: 0;
2313
+ // right: -125%;
2314
+ padding: 8px;
2315
+ border-radius: 4px;
2316
+ }
2317
+
2318
+ .popover-box {
2319
+ display: flex;
2320
+ flex-direction: column;
2321
+
2322
+ // width: 100%;
2323
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2324
+ background-color: var(--_ctm-mob-dn-pr-se-bd-cr,
2325
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)));
2326
+
2327
+ border-color: var(--_ctm-mob-dn-pr-se-br-cr,
2328
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2329
+
2330
+ border-style: var(--_ctm-mob-dn-pr-se-br-se,
2331
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)));
2332
+
2333
+ border-width: var(--_ctm-mob-dn-pr-se-br-wh,
2334
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)));
2335
+
2336
+ border-radius: var(--_ctm-mob-dn-pr-se-br-rs,
2337
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)));
2338
+
2339
+ box-shadow: var(--_show-shadow,
2340
+ var(--_ctm-mob-dn-pr-se-sw-ae,
2341
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))) var(--_ctm-mob-dn-pr-se-sw-br,
2342
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))) var(--_ctm-mob-dn-pr-se-sw-sd,
2343
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))) var(--_ctm-mob-dn-pr-se-sw-cr,
2344
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))));
2345
+
2346
+ padding: var(--_ctm-mob-dn-pr-se-pg,
2347
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
2348
+ }
2349
+
2350
+ .popover-box strong {
2351
+ display: block;
2352
+ margin-bottom: 6px;
2353
+ font-weight: bold;
2354
+ }
2355
+
2356
+ .popover-arrow {
2357
+ position: absolute;
2358
+ top: 8px;
2359
+ left: -5px;
2360
+ width: 12px;
2361
+ min-height: 12px;
2362
+
2363
+ // background-color: var(
2364
+ // --_ctm-mob-dn-pr-se-bd-cr,
2365
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2366
+ // );
2367
+ transform: rotate(-45deg);
2368
+ box-shadow: -1px -1px 0px var(--_ctm-mob-dn-pr-se-br-cr,
2369
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2370
+ }
2371
+
2372
+ .popover_item {
2373
+ // padding-inline: var(--_sf-cd-gp);
2374
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2375
+ font-family: var(--_ctm-mob-dn-pr-se-ft-fy,
2376
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)));
2377
+ text-transform: var(--_ctm-mob-dn-pr-se-tt-tm,
2378
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)));
2379
+ word-wrap: var(--_ctm-mob-dn-pr-se-wd-wp,
2380
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)));
2381
+ word-break: var(--_ctm-mob-dn-pr-se-wd-bk,
2382
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)));
2383
+ font-size: var(--_ctm-mob-dn-pr-se-ft-se,
2384
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)));
2385
+ font-weight: var(--_ctm-mob-dn-pr-se-ft-wt,
2386
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)));
2387
+ font-style: var(--_ctm-mob-dn-pr-se-ft-se-ic,
2388
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)));
2389
+ text-align: var(--_ctm-mob-dn-pr-se-tt-an,
2390
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)));
2391
+ letter-spacing: var(--_ctm-mob-dn-pr-se-lr-sg,
2392
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)));
2393
+ line-height: var(--_ctm-mob-dn-pr-se-le-ht,
2394
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)));
2395
+ text-decoration: var(--_ctm-mob-dn-pr-se-ue,
2396
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)));
2397
+ // margin-left: 10px;
2398
+ }
2399
+ }
2400
+
2401
+ // Horizontal side of the popover, from design > Popover Style > Popover Position.
2402
+ // Only the side changes — the vertical placement below is left to the display
2403
+ // style, so a vertically stacked list still opens beside its trigger and a
2404
+ // horizontal one still opens underneath it. "Right" is the original behaviour and
2405
+ // stays the default, so elements saved before this control are unaffected.
2406
+ &[data-display-style="Stack Vertically"] {
2407
+ .popover-box {
2408
+ left: 100%;
2409
+ transform: translate(0%);
2410
+ margin-left: 6px;
2411
+ top: 0;
2412
+ }
2413
+
2414
+ // Beside the trigger, on its left instead of its right.
2415
+ .popover-container[data-popover-position="Left"] .popover-box {
2416
+ left: auto;
2417
+ right: 100%;
2418
+ margin-left: 0;
2419
+ margin-right: 6px;
2420
+ }
2421
+ }
2422
+
2423
+ &[data-display-style="Stack Horizontally"] {
2424
+ .popover-box {
2425
+ right: 0;
2426
+ margin-top: 6px;
2427
+ }
2428
+
2429
+ // Under the trigger, aligned to its left edge instead of its right.
2430
+ .popover-container[data-popover-position="Left"] .popover-box {
2431
+ right: auto;
2432
+ left: 0;
2433
+ }
2434
+ }
2435
+
2436
+ // "Show Border" switch for the popover. The border is painted from CSS variables
2437
+ // above, so the switch arrives as a data attribute and the width is zeroed here.
2438
+ // Placed after the .popover-box rules and one attribute deeper, so it wins.
2439
+ .popover-container[data-popover-border="false"] .popover-box {
2440
+ border-width: 0;
2441
+ border-style: none;
2442
+ }
2443
+
2444
+ // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
2445
+ // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
2446
+ .popover-container[data-popover-position="Left"] .popover-arrow {
2447
+ left: auto;
2448
+ right: -5px;
2449
+ box-shadow: 1px 1px 0px var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2450
+ }
2451
+ }
2452
+ }
2453
+ }
2454
+
2455
+ // Share popup opened by the Share action. ModalV2 portals it to <body>, outside the
2456
+ // element, so these rules cannot be scoped to [data-element-type="productActions"].
2457
+ .modalV2-main.product-share-modal {
2458
+ .modalV2-wrapper {
2459
+ width: calc(100% - 32px);
2460
+ max-width: 440px;
2461
+ }
2462
+
2463
+ .product-share {
2464
+ display: flex;
2465
+ flex-direction: column;
2466
+ gap: 16px;
2467
+ padding: 16px;
2468
+ }
2469
+
2470
+ .product-share__link {
2471
+ display: flex;
2472
+ align-items: stretch;
2473
+ overflow: hidden;
2474
+ border: 1px solid #d0d5dd;
2475
+ border-radius: 999px;
2476
+ background: #f9fafb;
2477
+
2478
+ &:focus-within {
2479
+ border-color: #667085;
2480
+ }
2481
+ }
2482
+
2483
+ .product-share__url {
2484
+ flex: 1 1 auto;
2485
+ min-width: 0;
2486
+ padding: 10px 16px;
2487
+ border: 0;
2488
+ outline: none;
2489
+ background: transparent;
2490
+ color: #101828;
2491
+ font-size: 14px;
2492
+ text-overflow: ellipsis;
2493
+ }
2494
+
2495
+ .product-share__copy {
2496
+ display: flex;
2497
+ flex: 0 0 48px;
2498
+ align-items: center;
2499
+ justify-content: center;
2500
+ border: 0;
2501
+ border-left: 1px solid #d0d5dd;
2502
+ background: transparent;
2503
+ cursor: pointer;
2504
+
2505
+ &:hover {
2506
+ background: #f2f4f7;
2507
+ }
2508
+ }
2509
+
2510
+ .product-share__channels {
2511
+ display: grid;
2512
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2513
+ gap: 12px;
2514
+ }
2515
+
2516
+ .product-share__channel {
2517
+ display: flex;
2518
+ align-items: center;
2519
+ gap: 10px;
2520
+ padding: 10px 16px;
2521
+ border: 0;
2522
+ border-radius: 999px;
2523
+ background: #f2f4f7;
2524
+ color: #101828;
2525
+ font-size: 14px;
2526
+ font-weight: 500;
2527
+ text-align: left;
2528
+ cursor: pointer;
2529
+
2530
+ &:hover {
2531
+ background: #e4e7ec;
2532
+ }
2533
+ }
2534
+
2535
+ .product-share__copy,
2536
+ .product-share__channel {
2537
+ &:focus-visible {
2538
+ outline: 2px solid #101828;
2539
+ outline-offset: 2px;
2540
+ }
2541
+ }
2542
+
2543
+ .product-share__icon {
2544
+ display: flex;
2545
+ flex: 0 0 auto;
2546
+
2547
+ svg {
2548
+ width: 20px;
2549
+ height: 20px;
2550
+ }
2551
+ }
2552
+
2553
+ @media (max-width: 400px) {
2554
+ .product-share__channels {
2555
+ grid-template-columns: minmax(0, 1fr);
2556
+ }
2557
+ }
2558
+ }
2559
+
2560
+ // Off-screen field the copy fallback selects from on http origins.
2561
+ .product-share__clipboard {
2562
+ position: fixed;
2563
+ top: 0;
2564
+ left: 0;
2565
+ opacity: 0;
2566
+ pointer-events: none;
2567
+ }