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

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 (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
@@ -18,22 +18,31 @@
18
18
  font-weight: 600;
19
19
  color: rgba(75, 69, 70, 1);
20
20
  }
21
-
22
21
  .action__buttons__wrapper {
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)));
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
+ );
37
46
 
38
47
  // Widget Style's "Show Border" switch. The border above is painted from CSS
39
48
  // variables, so the switch arrives as a data attribute and the width is zeroed
@@ -43,8 +52,13 @@
43
52
  border-style: none;
44
53
  }
45
54
 
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))));
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
+ );
48
62
 
49
63
  //
50
64
 
@@ -64,123 +78,173 @@
64
78
  // }
65
79
  .cart-dropdown-container {
66
80
  &:hover {
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)));
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
+ );
69
85
  }
70
-
71
86
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
72
87
  }
73
-
74
88
  &[data-display-style="Stack Horizontally"] {
75
89
  flex-direction: row;
76
90
  row-gap: var(--_ctm-mob-lt-im-vl-sg, var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg)));
77
91
  flex-wrap: wrap;
78
92
  }
79
-
80
93
  // .btn__with__text {
81
94
  // white-space: nowrap;
82
95
  // }
83
96
 
84
97
  .btn__with__text {
85
98
  white-space: nowrap;
86
-
87
99
  &[data-btn-name="addToCart"] {
88
100
  justify-content: center;
89
101
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr))};
90
-
91
102
  &[data-show-shadow="false"] {
92
103
  --_show-shadow: none;
93
104
  }
94
-
95
105
  &[data-icon-position="left"] {
96
106
  --_sf-fd-bn: row;
97
107
  }
98
-
99
108
  &[data-icon-position="right"] {
100
109
  --_sf-fd-bn: row-reverse;
101
110
  }
102
-
103
111
  &[data-icon-position="center"] {
104
112
  --_sf-fd-bn: row;
105
113
  }
106
114
 
107
115
  &:hover {
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)));
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
+ );
122
144
 
123
145
  // for shadow
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)));
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
+ );
132
162
 
133
163
  // for font
134
164
 
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)));
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
+ );
166
226
 
167
227
  // for pading and width
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)));
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
+ );
172
236
 
173
237
  &[data-hover-show-shadow="false"] {
174
238
  --_hover-show-shadow: none;
175
239
  }
176
-
177
240
  &[data-hover-show-icon="false"] {
178
241
  --_hover-show-icon: none;
179
242
  }
180
243
  }
181
-
182
- background-color: var(--_sf-hr-bd-cr,
183
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
244
+ background-color: var(
245
+ --_sf-hr-bd-cr,
246
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr)
247
+ );
184
248
 
185
249
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
186
250
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
@@ -193,7 +257,10 @@
193
257
 
194
258
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
195
259
 
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));
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));
197
264
 
198
265
  &[data-show-border="true"] {
199
266
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
@@ -212,7 +279,6 @@
212
279
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-tm));
213
280
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-wp));
214
281
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-bk));
215
-
216
282
  &.flex__overflow {
217
283
  white-space: normal;
218
284
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -222,13 +288,17 @@
222
288
 
223
289
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
224
290
 
225
- font-style: var(--_sf-hr-ft-se-ic,
226
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic));
291
+ font-style: var(
292
+ --_sf-hr-ft-se-ic,
293
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
294
+ );
227
295
 
228
296
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
229
297
 
230
- letter-spacing: var(--_sf-hr-lr-sg,
231
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg));
298
+ letter-spacing: var(
299
+ --_sf-hr-lr-sg,
300
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg)
301
+ );
232
302
 
233
303
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
234
304
 
@@ -237,7 +307,6 @@
237
307
 
238
308
  .icon {
239
309
  display: var(--_hover-show-icon, var(--_show-icon, flex));
240
-
241
310
  svg {
242
311
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
243
312
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
@@ -248,7 +317,6 @@
248
317
  }
249
318
  }
250
319
  }
251
-
252
320
  [data-element-style="Text"] {
253
321
  display: inline-block;
254
322
  width: 100%;
@@ -275,99 +343,149 @@
275
343
 
276
344
  &[data-btn-name="buyNow"] {
277
345
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr))};
278
-
279
346
  &[data-show-shadow="false"] {
280
347
  --_show-shadow: none;
281
348
  }
282
-
283
349
  &[data-icon-position="left"] {
284
350
  --_sf-fd-bn: row;
285
351
  }
286
-
287
352
  &[data-icon-position="right"] {
288
353
  --_sf-fd-bn: row-reverse;
289
354
  }
290
-
291
355
  &[data-icon-position="center"] {
292
356
  --_sf-fd-bn: row;
293
357
  }
294
358
 
295
359
  &:hover {
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)));
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
+ );
311
389
 
312
390
  // for shadow
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)));
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
+ );
321
407
 
322
408
  // for font
323
409
 
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)));
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
+ );
355
471
 
356
472
  // for pading and width
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)));
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
+ );
361
481
 
362
482
  &[data-hover-show-shadow="false"] {
363
483
  --_hover-show-shadow: none;
364
484
  }
365
-
366
485
  &[data-hover-show-icon="false"] {
367
486
  --_hover-show-icon: none;
368
487
  }
369
488
  }
370
-
371
489
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
372
490
 
373
491
  display: flex;
@@ -385,7 +503,10 @@
385
503
 
386
504
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
387
505
 
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));
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));
389
510
 
390
511
  &[data-show-border="true"] {
391
512
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
@@ -404,7 +525,6 @@
404
525
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-tm));
405
526
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wd-wp));
406
527
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wd-bk));
407
-
408
528
  &.flex__overflow {
409
529
  white-space: normal;
410
530
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -414,8 +534,10 @@
414
534
 
415
535
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
416
536
 
417
- font-style: var(--_sf-hr-ft-se-ic,
418
- prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic));
537
+ font-style: var(
538
+ --_sf-hr-ft-se-ic,
539
+ prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic)
540
+ );
419
541
 
420
542
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
421
543
 
@@ -428,7 +550,6 @@
428
550
 
429
551
  .icon {
430
552
  display: var(--_hover-show-icon, var(--_show-icon, flex));
431
-
432
553
  svg {
433
554
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
434
555
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
@@ -439,7 +560,6 @@
439
560
  }
440
561
  }
441
562
  }
442
-
443
563
  [data-element-style="Text"] {
444
564
  display: inline-block;
445
565
  width: 100%;
@@ -466,99 +586,149 @@
466
586
 
467
587
  &[data-btn-name="wishlist"] {
468
588
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr))};
469
-
470
589
  &[data-show-shadow="false"] {
471
590
  --_show-shadow: none;
472
591
  }
473
-
474
592
  &[data-icon-position="left"] {
475
593
  --_sf-fd-bn: row;
476
594
  }
477
-
478
595
  &[data-icon-position="right"] {
479
596
  --_sf-fd-bn: row-reverse;
480
597
  }
481
-
482
598
  &[data-icon-position="center"] {
483
599
  --_sf-fd-bn: row;
484
600
  }
485
601
 
486
602
  &:hover {
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)));
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
+ );
502
632
 
503
633
  // for shadow
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)));
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
+ );
512
650
 
513
651
  // for font
514
652
 
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)));
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
+ );
546
714
 
547
715
  // for pading and width
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)));
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
+ );
552
724
 
553
725
  &[data-hover-show-shadow="false"] {
554
726
  --_hover-show-shadow: none;
555
727
  }
556
-
557
728
  &[data-hover-show-icon="false"] {
558
729
  --_hover-show-icon: none;
559
730
  }
560
731
  }
561
-
562
732
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
563
733
 
564
734
  display: flex;
@@ -573,7 +743,10 @@
573
743
  width: 100%;
574
744
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
575
745
 
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));
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));
577
750
 
578
751
  &[data-show-border="true"] {
579
752
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
@@ -592,7 +765,6 @@
592
765
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-tm));
593
766
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-wt-dt-se-wd-wp));
594
767
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-wt-dt-se-wd-bk));
595
-
596
768
  &.flex__overflow {
597
769
  white-space: normal;
598
770
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -615,7 +787,6 @@
615
787
 
616
788
  .icon {
617
789
  display: var(--_hover-show-icon, var(--_show-icon, flex));
618
-
619
790
  svg {
620
791
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
621
792
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
@@ -626,7 +797,6 @@
626
797
  }
627
798
  }
628
799
  }
629
-
630
800
  [data-element-style="Text"] {
631
801
  display: inline-block;
632
802
  width: 100%;
@@ -650,102 +820,151 @@
650
820
  display: none;
651
821
  }
652
822
  }
653
-
654
823
  &[data-btn-name="compare"] {
655
824
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr))};
656
-
657
825
  &[data-show-shadow="false"] {
658
826
  --_show-shadow: none;
659
827
  }
660
-
661
828
  &[data-icon-position="left"] {
662
829
  --_sf-fd-bn: row;
663
830
  }
664
-
665
831
  &[data-icon-position="right"] {
666
832
  --_sf-fd-bn: row-reverse;
667
833
  }
668
-
669
834
  &[data-icon-position="center"] {
670
835
  --_sf-fd-bn: row;
671
836
  }
672
837
 
673
838
  &:hover {
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)));
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
+ );
689
868
 
690
869
  // for shadow
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)));
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
+ );
699
886
 
700
887
  // for font
701
888
 
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)));
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
+ );
733
950
 
734
951
  // for pading and width
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)));
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
+ );
739
960
 
740
961
  &[data-hover-show-shadow="false"] {
741
962
  --_hover-show-shadow: none;
742
963
  }
743
-
744
964
  &[data-hover-show-icon="false"] {
745
965
  --_hover-show-icon: none;
746
966
  }
747
967
  }
748
-
749
968
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
750
969
 
751
970
  display: flex;
@@ -760,7 +979,10 @@
760
979
 
761
980
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
762
981
 
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));
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));
764
986
 
765
987
  &[data-show-border="true"] {
766
988
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
@@ -779,7 +1001,6 @@
779
1001
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-tm));
780
1002
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ce-dt-se-wd-wp));
781
1003
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ce-dt-se-wd-bk));
782
-
783
1004
  &.flex__overflow {
784
1005
  white-space: normal;
785
1006
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -802,7 +1023,6 @@
802
1023
 
803
1024
  .icon {
804
1025
  display: var(--_hover-show-icon, var(--_show-icon, flex));
805
-
806
1026
  svg {
807
1027
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
808
1028
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
@@ -813,7 +1033,6 @@
813
1033
  }
814
1034
  }
815
1035
  }
816
-
817
1036
  [data-element-style="Text"] {
818
1037
  display: inline-block;
819
1038
  width: 100%;
@@ -837,104 +1056,155 @@
837
1056
  display: none;
838
1057
  }
839
1058
  }
840
-
841
1059
  &[data-btn-name="addToQuote"] {
842
1060
  --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr))};
843
-
844
1061
  &[data-show-shadow="false"] {
845
1062
  --_show-shadow: none;
846
1063
  }
847
-
848
1064
  &[data-icon-position="left"] {
849
1065
  --_sf-fd-bn: row;
850
1066
  }
851
-
852
1067
  &[data-icon-position="right"] {
853
1068
  --_sf-fd-bn: row-reverse;
854
1069
  }
855
-
856
1070
  &[data-icon-position="center"] {
857
1071
  --_sf-fd-bn: row;
858
1072
  }
859
1073
 
860
1074
  &:hover {
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)));
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
+ );
876
1104
 
877
1105
  // for shadow
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)));
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
+ );
886
1122
 
887
1123
  // for font
888
1124
 
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)));
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
+ );
920
1186
 
921
1187
  // for pading and width
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)));
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
+ );
926
1196
 
927
1197
  &[data-hover-show-shadow="false"] {
928
1198
  --_hover-show-shadow: none;
929
1199
  }
930
-
931
1200
  &[data-hover-show-icon="false"] {
932
1201
  --_hover-show-icon: none;
933
1202
  }
934
1203
  }
935
-
936
- background-color: var(--_sf-hr-bd-cr,
937
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
1204
+ background-color: var(
1205
+ --_sf-hr-bd-cr,
1206
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr)
1207
+ );
938
1208
 
939
1209
  display: flex;
940
1210
  flex-direction: var(--_sf-fd-bn);
@@ -948,7 +1218,10 @@
948
1218
 
949
1219
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
950
1220
 
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));
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));
952
1225
 
953
1226
  &[data-show-border="true"] {
954
1227
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
@@ -967,7 +1240,6 @@
967
1240
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-tm));
968
1241
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-wp));
969
1242
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-bk));
970
-
971
1243
  &.flex__overflow {
972
1244
  white-space: normal;
973
1245
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -977,13 +1249,17 @@
977
1249
 
978
1250
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
979
1251
 
980
- font-style: var(--_sf-hr-ft-se-ic,
981
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic));
1252
+ font-style: var(
1253
+ --_sf-hr-ft-se-ic,
1254
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1255
+ );
982
1256
 
983
1257
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
984
1258
 
985
- letter-spacing: var(--_sf-hr-lr-sg,
986
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg));
1259
+ letter-spacing: var(
1260
+ --_sf-hr-lr-sg,
1261
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg)
1262
+ );
987
1263
 
988
1264
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
989
1265
 
@@ -992,7 +1268,6 @@
992
1268
 
993
1269
  .icon {
994
1270
  display: var(--_hover-show-icon, var(--_show-icon, flex));
995
-
996
1271
  svg {
997
1272
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
998
1273
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
@@ -1003,7 +1278,6 @@
1003
1278
  }
1004
1279
  }
1005
1280
  }
1006
-
1007
1281
  [data-element-style="Text"] {
1008
1282
  display: inline-block;
1009
1283
  width: 100%;
@@ -1027,1431 +1301,1863 @@
1027
1301
  display: none;
1028
1302
  }
1029
1303
  }
1030
-
1031
1304
  &[data-btn-name="addToOrderTemplate"] {
1032
1305
  --_sf-spinner-clr: #{var(
1033
- --_sf-hr-cr,
1034
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr))
1035
- }
1036
-
1037
- ;
1038
-
1039
- &[data-show-shadow="false"] {
1040
- --_show-shadow: none;
1041
- }
1042
-
1043
- &[data-icon-position="left"] {
1044
- --_sf-fd-bn: row;
1045
- }
1046
-
1047
- &[data-icon-position="right"] {
1048
- --_sf-fd-bn: row-reverse;
1049
- }
1050
-
1051
- &[data-icon-position="center"] {
1052
- --_sf-fd-bn: row;
1053
- }
1054
-
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;
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;
1129
1320
  }
1130
- }
1131
1321
 
1132
- background-color: var(--_sf-hr-bd-cr,
1133
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr));
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
+ );
1134
1352
 
1135
- padding: 5px 10px;
1136
- display: flex;
1137
- flex-direction: var(--_sf-fd-bn);
1138
- align-items: center;
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
+ );
1139
1370
 
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));
1371
+ // for font
1142
1372
 
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));
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
+ );
1145
1437
 
1146
- border-radius: var(--_sf-hr-br-rs,
1147
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
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
+ );
1148
1458
 
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));
1459
+ padding: 5px 10px;
1460
+ display: flex;
1461
+ flex-direction: var(--_sf-fd-bn);
1462
+ align-items: center;
1150
1463
 
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));
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));
1154
1466
 
1155
- border-style: var(--_sf-hr-br-se,
1156
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se));
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));
1157
1469
 
1158
- border-width: var(--_sf-hr-br-wh,
1159
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh));
1160
- }
1470
+ border-radius: var(
1471
+ --_sf-hr-br-rs,
1472
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs)
1473
+ );
1161
1474
 
1162
- .txt {
1163
- display: flex;
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));
1164
1479
 
1165
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
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
+ );
1166
1485
 
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));
1486
+ border-style: var(
1487
+ --_sf-hr-br-se,
1488
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1489
+ );
1175
1490
 
1176
- &.flex__overflow {
1177
- white-space: normal;
1178
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1491
+ border-width: var(
1492
+ --_sf-hr-br-wh,
1493
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1494
+ );
1179
1495
  }
1180
1496
 
1181
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1497
+ .txt {
1498
+ display: flex;
1499
+
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
+ }
1182
1522
 
1183
- font-weight: var(--_sf-hr-ft-wt,
1184
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt));
1523
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1185
1524
 
1186
- font-style: var(--_sf-hr-ft-se-ic,
1187
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic));
1525
+ font-weight: var(
1526
+ --_sf-hr-ft-wt,
1527
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt)
1528
+ );
1188
1529
 
1189
- text-align: var(--_sf-hr-tt-an,
1190
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an));
1530
+ font-style: var(
1531
+ --_sf-hr-ft-se-ic,
1532
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1533
+ );
1191
1534
 
1192
- letter-spacing: var(--_sf-hr-lr-sg,
1193
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg));
1535
+ text-align: var(
1536
+ --_sf-hr-tt-an,
1537
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an)
1538
+ );
1194
1539
 
1195
- line-height: var(--_sf-hr-le-ht,
1196
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht));
1540
+ letter-spacing: var(
1541
+ --_sf-hr-lr-sg,
1542
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1543
+ );
1197
1544
 
1198
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1199
- }
1545
+ line-height: var(
1546
+ --_sf-hr-le-ht,
1547
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht)
1548
+ );
1200
1549
 
1201
- .icon {
1202
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1550
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1551
+ }
1203
1552
 
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));
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));
1207
1558
 
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);
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
+ }
1212
1566
  }
1213
1567
  }
1214
- }
1568
+ [data-element-style="Text"] {
1569
+ display: inline-block;
1570
+ width: 100%;
1571
+ }
1215
1572
 
1216
- [data-element-style="Text"] {
1217
- display: inline-block;
1218
- width: 100%;
1219
- }
1573
+ .icon--hover {
1574
+ // position: absolute;
1575
+ // inset: 0;
1576
+ // opacity: 0;
1577
+ display: none;
1578
+ transition: opacity 0.2s ease;
1579
+ }
1220
1580
 
1221
- .icon--hover {
1222
- // position: absolute;
1223
- // inset: 0;
1224
- // opacity: 0;
1225
- display: none;
1226
- transition: opacity 0.2s ease;
1227
- }
1581
+ &:hover .icon--hover {
1582
+ // opacity: 1;
1583
+ display: flex;
1584
+ }
1228
1585
 
1229
- &:hover .icon--hover {
1230
- // opacity: 1;
1231
- display: flex;
1586
+ &:hover .icon--default {
1587
+ // opacity: 0;
1588
+ display: none;
1589
+ }
1232
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
+ }
1233
1608
 
1234
- &:hover .icon--default {
1235
- // opacity: 0;
1236
- display: none;
1237
- }
1238
- }
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
+ );
1239
1639
 
1240
- &[data-btn-name="viewDetails"] {
1241
- --_sf-spinner-clr: #{var(
1242
- --_sf-hr-cr,
1243
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr))
1244
- }
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
+ );
1245
1657
 
1246
- ;
1658
+ // for font
1247
1659
 
1248
- &[data-show-shadow="false"] {
1249
- --_show-shadow: none;
1250
- }
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
+ );
1251
1724
 
1252
- &[data-icon-position="left"] {
1253
- --_sf-fd-bn: row;
1254
- }
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;
1739
+ }
1740
+ }
1741
+ background-color: var(
1742
+ --_sf-hr-bd-cr,
1743
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-bd-cr)
1744
+ );
1255
1745
 
1256
- &[data-icon-position="right"] {
1257
- --_sf-fd-bn: row-reverse;
1258
- }
1746
+ padding: 5px 10px;
1747
+ display: flex;
1748
+ flex-direction: var(--_sf-fd-bn);
1749
+ align-items: center;
1259
1750
 
1260
- &[data-icon-position="center"] {
1261
- --_sf-fd-bn: row;
1262
- }
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));
1263
1753
 
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
- }
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));
1335
1756
 
1336
- &[data-hover-show-icon="false"] {
1337
- --_hover-show-icon: none;
1338
- }
1339
- }
1757
+ border-radius: var(
1758
+ --_sf-hr-br-rs,
1759
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-rs)
1760
+ );
1340
1761
 
1341
- background-color: var(--_sf-hr-bd-cr,
1342
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-bd-cr));
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));
1343
1766
 
1344
- padding: 5px 10px;
1345
- display: flex;
1346
- flex-direction: var(--_sf-fd-bn);
1347
- align-items: center;
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
+ );
1348
1772
 
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));
1773
+ border-style: var(
1774
+ --_sf-hr-br-se,
1775
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-se)
1776
+ );
1351
1777
 
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));
1778
+ border-width: var(
1779
+ --_sf-hr-br-wh,
1780
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-wh)
1781
+ );
1782
+ }
1354
1783
 
1355
- border-radius: var(--_sf-hr-br-rs,
1356
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-rs));
1784
+ .txt {
1785
+ display: flex;
1357
1786
 
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));
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
+ }
1359
1809
 
1360
- &[data-show-border="true"] {
1361
- border-color: var(--_sf-hr-br-cr,
1362
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-cr));
1810
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se));
1363
1811
 
1364
- border-style: var(--_sf-hr-br-se,
1365
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-se));
1812
+ font-weight: var(
1813
+ --_sf-hr-ft-wt,
1814
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-wt)
1815
+ );
1366
1816
 
1367
- border-width: var(--_sf-hr-br-wh,
1368
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-br-wh));
1369
- }
1817
+ font-style: var(
1818
+ --_sf-hr-ft-se-ic,
1819
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se-ic)
1820
+ );
1370
1821
 
1371
- .txt {
1372
- display: flex;
1822
+ text-align: var(
1823
+ --_sf-hr-tt-an,
1824
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-an)
1825
+ );
1373
1826
 
1374
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr));
1827
+ letter-spacing: var(
1828
+ --_sf-hr-lr-sg,
1829
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-lr-sg)
1830
+ );
1375
1831
 
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));
1832
+ line-height: var(
1833
+ --_sf-hr-le-ht,
1834
+ prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-le-ht)
1835
+ );
1384
1836
 
1385
- &.flex__overflow {
1386
- white-space: normal;
1387
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1388
- }
1837
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1838
+ }
1389
1839
 
1390
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se));
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));
1391
1845
 
1392
- font-weight: var(--_sf-hr-ft-wt,
1393
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-wt));
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
+ }
1394
1859
 
1395
- font-style: var(--_sf-hr-ft-se-ic,
1396
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-ft-se-ic));
1860
+ .icon--hover {
1861
+ // position: absolute;
1862
+ // inset: 0;
1863
+ // opacity: 0;
1864
+ display: none;
1865
+ transition: opacity 0.2s ease;
1866
+ }
1397
1867
 
1398
- text-align: var(--_sf-hr-tt-an,
1399
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-tt-an));
1868
+ &:hover .icon--hover {
1869
+ // opacity: 1;
1870
+ display: flex;
1871
+ }
1400
1872
 
1401
- letter-spacing: var(--_sf-hr-lr-sg,
1402
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-lr-sg));
1873
+ &:hover .icon--default {
1874
+ // opacity: 0;
1875
+ display: none;
1876
+ }
1877
+ }
1878
+ &[data-btn-name="share"] {
1879
+ --_sf-spinner-clr: #{var(
1880
+ --_sf-hr-cr,
1881
+ prepareMediaVariable(--_ctm-dn-se-dt-se-cr)
1882
+ )};
1883
+ &[data-show-shadow="false"] {
1884
+ --_show-shadow: none;
1885
+ }
1886
+ &[data-icon-position="left"] {
1887
+ --_sf-fd-bn: row;
1888
+ }
1889
+ &[data-icon-position="right"] {
1890
+ --_sf-fd-bn: row-reverse;
1891
+ }
1892
+ &[data-icon-position="center"] {
1893
+ --_sf-fd-bn: row;
1894
+ }
1403
1895
 
1404
- line-height: var(--_sf-hr-le-ht,
1405
- prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-le-ht));
1896
+ &:hover {
1897
+ --_sf-hr-bd-cr: var(
1898
+ --_ctm-mob-dn-se-hr-se-bd-cr,
1899
+ var(--_ctm-tab-dn-se-hr-se-bd-cr, var(--_ctm-dn-se-hr-se-bd-cr))
1900
+ );
1901
+ --_sf-hr-br-cr: var(
1902
+ --_ctm-mob-dn-se-hr-se-br-cr,
1903
+ var(--_ctm-tab-dn-se-hr-se-br-cr, var(--_ctm-dn-se-hr-se-br-cr))
1904
+ );
1905
+ --_sf-hr-br-se: var(
1906
+ --_ctm-mob-dn-se-hr-se-br-se,
1907
+ var(--_ctm-tab-dn-se-hr-se-br-se, var(--_ctm-dn-se-hr-se-br-se))
1908
+ );
1909
+ --_sf-hr-br-wh: var(
1910
+ --_ctm-mob-dn-se-hr-se-br-wh,
1911
+ var(--_ctm-tab-dn-se-hr-se-br-wh, var(--_ctm-dn-se-hr-se-br-wh))
1912
+ );
1913
+ --_sf-hr-br-rs: var(
1914
+ --_ctm-mob-dn-se-hr-se-br-rs,
1915
+ var(--_ctm-tab-dn-se-hr-se-br-rs, var(--_ctm-dn-se-hr-se-br-rs))
1916
+ );
1917
+
1918
+ --_sf-hr-at: var(
1919
+ --_ctm-mob-dn-se-hr-se-at,
1920
+ var(--_ctm-tab-dn-se-hr-se-at, var(--_ctm-dn-se-hr-se-at))
1921
+ );
1922
+ --_sf-hr-gp: var(
1923
+ --_ctm-mob-dn-se-hr-se-gp,
1924
+ var(--_ctm-tab-dn-se-hr-se-gp, var(--_ctm-dn-se-hr-se-gp))
1925
+ );
1406
1926
 
1407
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1408
- }
1927
+ // for shadow
1928
+ --_sf-hr-sw-ae: var(
1929
+ --_ctm-mob-dn-se-hr-se-sw-ae,
1930
+ var(--_ctm-tab-dn-se-hr-se-sw-ae, var(--_ctm-dn-se-hr-se-sw-ae))
1931
+ );
1932
+ --_sf-hr-sw-br: var(
1933
+ --_ctm-mob-dn-se-hr-se-sw-br,
1934
+ var(--_ctm-tab-dn-se-hr-se-sw-br, var(--_ctm-dn-se-hr-se-sw-br))
1935
+ );
1936
+ --_sf-hr-sw-hr: var(
1937
+ --_ctm-mob-dn-se-hr-se-sw-hr,
1938
+ var(--_ctm-tab-dn-se-hr-se-sw-hr, var(--_ctm-dn-se-hr-se-sw-hr))
1939
+ );
1940
+ --_sf-hr-sw-cr: var(
1941
+ --_ctm-mob-dn-se-hr-se-sw-cr,
1942
+ var(--_ctm-tab-dn-se-hr-se-sw-cr, var(--_ctm-dn-se-hr-se-sw-cr))
1943
+ );
1409
1944
 
1410
- .icon {
1411
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1945
+ // for font
1412
1946
 
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));
1947
+ --_sf-hr-cr: var(
1948
+ --_ctm-mob-dn-se-hr-se-cr,
1949
+ var(--_ctm-tab-dn-se-hr-se-cr, var(--_ctm-dn-se-hr-se-cr))
1950
+ );
1951
+ --_sf-hr-ft-fy: var(
1952
+ --_ctm-mob-dn-se-hr-se-ft-fy,
1953
+ var(--_ctm-tab-dn-se-hr-se-ft-fy, var(--_ctm-dn-se-hr-se-ft-fy))
1954
+ );
1955
+ --_sf-hr-tt-tm: var(
1956
+ --_ctm-mob-dn-se-hr-se-tt-tm,
1957
+ var(--_ctm-tab-dn-se-hr-se-tt-tm, var(--_ctm-dn-se-hr-se-tt-tm))
1958
+ );
1959
+ --_sf-hr-wd-wp: var(
1960
+ --_ctm-mob-dn-se-hr-se-wd-wp,
1961
+ var(--_ctm-tab-dn-se-hr-se-wd-wp, var(--_ctm-dn-se-hr-se-wd-wp))
1962
+ );
1963
+ --_sf-hr-wd-bk: var(
1964
+ --_ctm-mob-dn-se-hr-se-wd-bk,
1965
+ var(--_ctm-tab-dn-se-hr-se-wd-bk, var(--_ctm-dn-se-hr-se-wd-bk))
1966
+ );
1967
+ --_sf-hr-ft-se: var(
1968
+ --_ctm-mob-dn-se-hr-se-ft-se,
1969
+ var(--_ctm-tab-dn-se-hr-se-ft-se, var(--_ctm-dn-se-hr-se-ft-se))
1970
+ );
1971
+ --_sf-hr-ft-wt: var(
1972
+ --_ctm-mob-dn-se-hr-se-ft-wt,
1973
+ var(--_ctm-tab-dn-se-hr-se-ft-wt, var(--_ctm-dn-se-hr-se-ft-wt))
1974
+ );
1975
+ --_sf-hr-ft-se-ic: var(
1976
+ --_ctm-mob-dn-se-hr-se-ft-se-ic,
1977
+ var(
1978
+ --_ctm-tab-dn-se-hr-se-ft-se-ic,
1979
+ var(--_ctm-dn-se-hr-se-ft-se-ic)
1980
+ )
1981
+ );
1982
+ --_sf-hr-tt-an: var(
1983
+ --_ctm-mob-dn-se-hr-se-tt-an,
1984
+ var(--_ctm-tab-dn-se-hr-se-tt-an, var(--_ctm-dn-se-hr-se-tt-an))
1985
+ );
1986
+ --_sf-hr-lr-sg: var(
1987
+ --_ctm-mob-dn-se-hr-se-lr-sg,
1988
+ var(--_ctm-tab-dn-se-hr-se-lr-sg, var(--_ctm-dn-se-hr-se-lr-sg))
1989
+ );
1990
+ --_sf-hr-le-ht: var(
1991
+ --_ctm-mob-dn-se-hr-se-le-ht,
1992
+ var(--_ctm-tab-dn-se-hr-se-le-ht, var(--_ctm-dn-se-hr-se-le-ht))
1993
+ );
1994
+
1995
+ --_sf-hr-in-se: var(
1996
+ --_ctm-mob-dn-se-hr-se-in-se,
1997
+ var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se))
1998
+ );
1999
+ --_sf-hr-in-se: var(
2000
+ --_ctm-mob-dn-se-hr-se-in-se,
2001
+ var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se))
2002
+ );
2003
+ --_sf-hr-in-c1: var(
2004
+ --_ctm-mob-dn-se-hr-se-in-c1,
2005
+ var(--_ctm-tab-dn-se-hr-se-in-c1, var(--_ctm-dn-se-hr-se-in-c1))
2006
+ );
2007
+ --_sf-hr-ue: var(
2008
+ --_ctm-mob-dn-se-hr-se-ue,
2009
+ var(--_ctm-tab-dn-se-hr-se-ue, var(--_ctm-dn-se-hr-se-ue))
2010
+ );
1416
2011
 
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);
2012
+ // for pading and width
2013
+ --_sf-hr-pg: var(
2014
+ --_ctm-mob-dn-se-hr-pg,
2015
+ var(--_ctm-tab-dn-se-hr-pg, var(--_ctm-dn-se-hr-pg))
2016
+ );
2017
+ --_sf-hr-wh: var(
2018
+ --_ctm-mob-dn-se-hr-wh,
2019
+ var(--_ctm-tab-dn-se-hr-wh, var(--_ctm-dn-se-hr-wh))
2020
+ );
2021
+ &[data-hover-show-shadow="false"] {
2022
+ --_hover-show-shadow: none;
2023
+ }
2024
+ &[data-hover-show-icon="false"] {
2025
+ --_hover-show-icon: none;
2026
+ }
1421
2027
  }
1422
- }
1423
- }
2028
+ background-color: var(
2029
+ --_sf-hr-bd-cr,
2030
+ prepareMediaVariable(--_ctm-dn-se-dt-se-bd-cr)
2031
+ );
1424
2032
 
1425
- [data-element-style="Text"] {
1426
- display: inline-block;
1427
- width: 100%;
1428
- }
2033
+ padding: 5px 10px;
2034
+ display: flex;
2035
+ flex-direction: var(--_sf-fd-bn);
2036
+ align-items: center;
1429
2037
 
1430
- .icon--hover {
1431
- // position: absolute;
1432
- // inset: 0;
1433
- // opacity: 0;
1434
- display: none;
1435
- transition: opacity 0.2s ease;
1436
- }
2038
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-se-dt-se-at));
2039
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-se-dt-se-gp));
1437
2040
 
1438
- &:hover .icon--hover {
1439
- // opacity: 1;
1440
- display: flex;
1441
- }
2041
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-se-dt-se-pg));
2042
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-se-dt-se-wh));
1442
2043
 
1443
- &:hover .icon--default {
1444
- // opacity: 0;
1445
- display: none;
1446
- }
1447
- }
2044
+ border-radius: var(
2045
+ --_sf-hr-br-rs,
2046
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-rs)
2047
+ );
1448
2048
 
1449
- &[data-btn-name="share"] {
1450
- --_sf-spinner-clr: #{var(
1451
- --_sf-hr-cr,
1452
- prepareMediaVariable(--_ctm-dn-se-dt-se-cr))
1453
- }
2049
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-ae))
2050
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-br))
2051
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-sd))
2052
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-cr));
1454
2053
 
1455
- ;
2054
+ &[data-show-border="true"] {
2055
+ border-color: var(
2056
+ --_sf-hr-br-cr,
2057
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-cr)
2058
+ );
1456
2059
 
1457
- &[data-show-shadow="false"] {
1458
- --_show-shadow: none;
1459
- }
2060
+ border-style: var(
2061
+ --_sf-hr-br-se,
2062
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-se)
2063
+ );
1460
2064
 
1461
- &[data-icon-position="left"] {
1462
- --_sf-fd-bn: row;
1463
- }
2065
+ border-width: var(
2066
+ --_sf-hr-br-wh,
2067
+ prepareMediaVariable(--_ctm-dn-se-dt-se-br-wh)
2068
+ );
2069
+ }
1464
2070
 
1465
- &[data-icon-position="right"] {
1466
- --_sf-fd-bn: row-reverse;
1467
- }
1468
-
1469
- &[data-icon-position="center"] {
1470
- --_sf-fd-bn: row;
1471
- }
1472
-
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
- }
1544
-
1545
- &[data-hover-show-icon="false"] {
1546
- --_hover-show-icon: none;
1547
- }
1548
- }
1549
-
1550
- background-color: var(--_sf-hr-bd-cr,
1551
- prepareMediaVariable(--_ctm-dn-se-dt-se-bd-cr));
1552
-
1553
- padding: 5px 10px;
1554
- display: flex;
1555
- flex-direction: var(--_sf-fd-bn);
1556
- align-items: center;
1557
-
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));
1560
-
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));
1563
-
1564
- border-radius: var(--_sf-hr-br-rs,
1565
- prepareMediaVariable(--_ctm-dn-se-dt-se-br-rs));
1566
-
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));
1568
-
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;
2071
+ .txt {
2072
+ display: flex;
1582
2073
 
1583
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-cr));
2074
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-cr));
2075
+
2076
+ font-family: var(
2077
+ --_sf-hr-ft-fy,
2078
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-fy)
2079
+ );
2080
+ text-transform: var(
2081
+ --_sf-hr-tt-tm,
2082
+ prepareMediaVariable(--_ctm-dn-se-dt-se-tt-tm)
2083
+ );
2084
+ word-wrap: var(
2085
+ --_sf-hr-wd-wp,
2086
+ prepareMediaVariable(--_ctm-dn-se-dt-se-wd-wp)
2087
+ );
2088
+ word-break: var(
2089
+ --_sf-hr-wd-bk,
2090
+ prepareMediaVariable(--_ctm-dn-se-dt-se-wd-bk)
2091
+ );
2092
+ &.flex__overflow {
2093
+ white-space: normal;
2094
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2095
+ }
1584
2096
 
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));
2097
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se));
1593
2098
 
1594
- &.flex__overflow {
1595
- white-space: normal;
1596
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1597
- }
2099
+ font-weight: var(
2100
+ --_sf-hr-ft-wt,
2101
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-wt)
2102
+ );
1598
2103
 
1599
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se));
2104
+ font-style: var(
2105
+ --_sf-hr-ft-se-ic,
2106
+ prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se-ic)
2107
+ );
1600
2108
 
1601
- font-weight: var(--_sf-hr-ft-wt,
1602
- prepareMediaVariable(--_ctm-dn-se-dt-se-ft-wt));
2109
+ text-align: var(
2110
+ --_sf-hr-tt-an,
2111
+ prepareMediaVariable(--_ctm-dn-se-dt-se-tt-an)
2112
+ );
1603
2113
 
1604
- font-style: var(--_sf-hr-ft-se-ic,
1605
- prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se-ic));
2114
+ letter-spacing: var(
2115
+ --_sf-hr-lr-sg,
2116
+ prepareMediaVariable(--_ctm-dn-se-dt-se-lr-sg)
2117
+ );
1606
2118
 
1607
- text-align: var(--_sf-hr-tt-an,
1608
- prepareMediaVariable(--_ctm-dn-se-dt-se-tt-an));
2119
+ line-height: var(
2120
+ --_sf-hr-le-ht,
2121
+ prepareMediaVariable(--_ctm-dn-se-dt-se-le-ht)
2122
+ );
1609
2123
 
1610
- letter-spacing: var(--_sf-hr-lr-sg,
1611
- prepareMediaVariable(--_ctm-dn-se-dt-se-lr-sg));
2124
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2125
+ }
1612
2126
 
1613
- line-height: var(--_sf-hr-le-ht,
1614
- prepareMediaVariable(--_ctm-dn-se-dt-se-le-ht));
2127
+ .icon {
2128
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2129
+ svg {
2130
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
2131
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
1615
2132
 
1616
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1617
- }
2133
+ path {
2134
+ stroke: var(
2135
+ --_sf-hr-in-c1,
2136
+ prepareMediaVariable(--_ctm-dn-se-dt-se-in-c1)
2137
+ );
2138
+ stroke-width: prepareMediaVariable(--_ctm-dn-se-dt-se-se-wh, 1);
2139
+ }
2140
+ }
2141
+ }
2142
+ [data-element-style="Text"] {
2143
+ display: inline-block;
2144
+ width: 100%;
2145
+ }
1618
2146
 
1619
- .icon {
1620
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2147
+ .icon--hover {
2148
+ // position: absolute;
2149
+ // inset: 0;
2150
+ // opacity: 0;
2151
+ display: none;
2152
+ transition: opacity 0.2s ease;
2153
+ }
1621
2154
 
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));
2155
+ &:hover .icon--hover {
2156
+ // opacity: 1;
2157
+ display: flex;
2158
+ }
1625
2159
 
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);
2160
+ &:hover .icon--default {
2161
+ // opacity: 0;
2162
+ display: none;
2163
+ }
1630
2164
  }
1631
- }
1632
- }
1633
-
1634
- [data-element-style="Text"] {
1635
- display: inline-block;
1636
- width: 100%;
1637
- }
1638
-
1639
- .icon--hover {
1640
- // position: absolute;
1641
- // inset: 0;
1642
- // opacity: 0;
1643
- display: none;
1644
- transition: opacity 0.2s ease;
1645
- }
1646
-
1647
- &:hover .icon--hover {
1648
- // opacity: 1;
1649
- display: flex;
1650
- }
1651
-
1652
- &:hover .icon--default {
1653
- // opacity: 0;
1654
- display: none;
1655
- }
1656
- }
1657
-
1658
- &[data-btn-name="notifyMe"] {
1659
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
2165
+ &[data-btn-name="notifyMe"] {
2166
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
2167
+ &[data-show-shadow="false"] {
2168
+ --_show-shadow: none;
2169
+ }
2170
+ &[data-icon-position="left"] {
2171
+ --_sf-fd-bn: row;
2172
+ }
2173
+ &[data-icon-position="right"] {
2174
+ --_sf-fd-bn: row-reverse;
2175
+ }
2176
+ &[data-icon-position="center"] {
2177
+ --_sf-fd-bn: row;
2178
+ }
1660
2179
 
1661
- &[data-show-shadow="false"] {
1662
- --_show-shadow: none;
1663
- }
2180
+ &:hover {
2181
+ --_sf-hr-bd-cr: var(
2182
+ --_ctm-mob-dn-ny-me-hr-se-bd-cr,
2183
+ var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
2184
+ );
2185
+ --_sf-hr-br-cr: var(
2186
+ --_ctm-mob-dn-ny-me-hr-se-br-cr,
2187
+ var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
2188
+ );
2189
+ --_sf-hr-br-se: var(
2190
+ --_ctm-mob-dn-ny-me-hr-se-br-se,
2191
+ var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
2192
+ );
2193
+ --_sf-hr-br-wh: var(
2194
+ --_ctm-mob-dn-ny-me-hr-se-br-wh,
2195
+ var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
2196
+ );
2197
+ --_sf-hr-br-rs: var(
2198
+ --_ctm-mob-dn-ny-me-hr-se-br-rs,
2199
+ var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
2200
+ );
2201
+ --_sf-hr-at: var(
2202
+ --_ctm-mob-dn-ny-me-hr-se-at,
2203
+ var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
2204
+ );
2205
+ --_sf-hr-gp: var(
2206
+ --_ctm-mob-dn-ny-me-hr-se-gp,
2207
+ var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
2208
+ );
1664
2209
 
1665
- &[data-icon-position="left"] {
1666
- --_sf-fd-bn: row;
1667
- }
2210
+ // for shadow
2211
+ --_sf-hr-sw-ae: var(
2212
+ --_ctm-mob-dn-ny-me-hr-se-sw-ae,
2213
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
2214
+ );
2215
+ --_sf-hr-sw-br: var(
2216
+ --_ctm-mob-dn-ny-me-hr-se-sw-br,
2217
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
2218
+ );
2219
+ --_sf-hr-sw-hr: var(
2220
+ --_ctm-mob-dn-ny-me-hr-se-sw-hr,
2221
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
2222
+ );
2223
+ --_sf-hr-sw-cr: var(
2224
+ --_ctm-mob-dn-ny-me-hr-se-sw-cr,
2225
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
2226
+ );
1668
2227
 
1669
- &[data-icon-position="right"] {
1670
- --_sf-fd-bn: row-reverse;
1671
- }
2228
+ // for font
1672
2229
 
1673
- &[data-icon-position="center"] {
1674
- --_sf-fd-bn: row;
1675
- }
2230
+ --_sf-hr-cr: var(
2231
+ --_ctm-mob-dn-ny-me-hr-se-cr,
2232
+ var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
2233
+ );
2234
+ --_sf-hr-ft-fy: var(
2235
+ --_ctm-mob-dn-ny-me-hr-se-ft-fy,
2236
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
2237
+ );
2238
+ --_sf-hr-tt-tm: var(
2239
+ --_ctm-mob-dn-ny-me-hr-se-tt-tm,
2240
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-tm, var(--_ctm-dn-ny-me-hr-se-tt-tm))
2241
+ );
2242
+ --_sf-hr-wd-wp: var(
2243
+ --_ctm-mob-dn-ny-me-hr-se-wd-wp,
2244
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-wp, var(--_ctm-dn-ny-me-hr-se-wd-wp))
2245
+ );
2246
+ --_sf-hr-wd-bk: var(
2247
+ --_ctm-mob-dn-ny-me-hr-se-wd-bk,
2248
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-bk, var(--_ctm-dn-ny-me-hr-se-wd-bk))
2249
+ );
2250
+ --_sf-hr-ft-se: var(
2251
+ --_ctm-mob-dn-ny-me-hr-se-ft-se,
2252
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
2253
+ );
2254
+ --_sf-hr-ft-wt: var(
2255
+ --_ctm-mob-dn-ny-me-hr-se-ft-wt,
2256
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
2257
+ );
2258
+ --_sf-hr-ft-se-ic: var(
2259
+ --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
2260
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
2261
+ );
2262
+ --_sf-hr-tt-an: var(
2263
+ --_ctm-mob-dn-ny-me-hr-se-tt-an,
2264
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
2265
+ );
2266
+ --_sf-hr-lr-sg: var(
2267
+ --_ctm-mob-dn-ny-me-hr-se-lr-sg,
2268
+ var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
2269
+ );
2270
+ --_sf-hr-le-ht: var(
2271
+ --_ctm-mob-dn-ny-me-hr-se-le-ht,
2272
+ var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
2273
+ );
2274
+
2275
+ --_sf-hr-in-se: var(
2276
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
2277
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
2278
+ );
2279
+ --_sf-hr-in-se: var(
2280
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
2281
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
2282
+ );
2283
+ --_sf-hr-in-c1: var(
2284
+ --_ctm-mob-dn-ny-me-hr-se-in-c1,
2285
+ var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
2286
+ );
2287
+ --_sf-hr-ue: var(
2288
+ --_ctm-mob-dn-ny-me-hr-se-ue,
2289
+ var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
2290
+ );
1676
2291
 
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
- }
2292
+ // for pading and width
2293
+ --_sf-hr-pg: var(
2294
+ --_ctm-mob-dn-ny-me-hr-pg,
2295
+ var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
2296
+ );
2297
+ --_sf-hr-wh: var(
2298
+ --_ctm-mob-dn-ny-me-hr-wh,
2299
+ var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
2300
+ );
1746
2301
 
1747
- &[data-hover-show-icon="false"] {
1748
- --_hover-show-icon: none;
1749
- }
1750
- }
2302
+ &[data-hover-show-shadow="false"] {
2303
+ --_hover-show-shadow: none;
2304
+ }
2305
+ &[data-hover-show-icon="false"] {
2306
+ --_hover-show-icon: none;
2307
+ }
2308
+ }
2309
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1751
2310
 
1752
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
2311
+ display: flex;
2312
+ flex-direction: var(--_sf-fd-bn);
2313
+ align-items: center;
1753
2314
 
1754
- display: flex;
1755
- flex-direction: var(--_sf-fd-bn);
1756
- align-items: center;
2315
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
2316
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1757
2317
 
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));
2318
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
2319
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1760
2320
 
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));
2321
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1763
2322
 
1764
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
2323
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
2324
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
2325
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
2326
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1765
2327
 
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));
2328
+ &[data-show-border="true"] {
2329
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1767
2330
 
1768
- &[data-show-border="true"] {
1769
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
2331
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1770
2332
 
1771
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
2333
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
2334
+ }
1772
2335
 
1773
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1774
- }
2336
+ .txt {
2337
+ display: flex;
1775
2338
 
1776
- .txt {
1777
- display: flex;
2339
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1778
2340
 
1779
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
2341
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
2342
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-tm));
2343
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-wp));
2344
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-bk));
2345
+ &.flex__overflow {
2346
+ white-space: normal;
2347
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2348
+ }
1780
2349
 
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));
2350
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1785
2351
 
1786
- &.flex__overflow {
1787
- white-space: normal;
1788
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1789
- }
2352
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1790
2353
 
1791
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
2354
+ font-style: var(
2355
+ --_sf-hr-ft-se-ic,
2356
+ prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic)
2357
+ );
1792
2358
 
1793
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
2359
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1794
2360
 
1795
- font-style: var(--_sf-hr-ft-se-ic,
1796
- prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
2361
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1797
2362
 
1798
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
2363
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1799
2364
 
1800
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
2365
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2366
+ }
1801
2367
 
1802
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
2368
+ .icon {
2369
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2370
+ svg {
2371
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
2372
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1803
2373
 
1804
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1805
- }
2374
+ path {
2375
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
2376
+ stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
2377
+ }
2378
+ }
2379
+ }
2380
+ [data-element-style="Text"] {
2381
+ display: inline-block;
2382
+ width: 100%;
2383
+ }
1806
2384
 
1807
- .icon {
1808
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2385
+ .icon--hover {
2386
+ // position: absolute;
2387
+ // inset: 0;
2388
+ // opacity: 0;
2389
+ display: none;
2390
+ transition: opacity 0.2s ease;
2391
+ }
1809
2392
 
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));
2393
+ &:hover .icon--hover {
2394
+ // opacity: 1;
2395
+ display: flex;
2396
+ }
1813
2397
 
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);
2398
+ &:hover .icon--default {
2399
+ // opacity: 0;
2400
+ display: none;
2401
+ }
1817
2402
  }
1818
- }
1819
- }
2403
+ &[data-btn-name="download"] {
2404
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
2405
+ &[data-show-shadow="false"] {
2406
+ --_show-shadow: none;
2407
+ }
2408
+ &[data-icon-position="left"] {
2409
+ --_sf-fd-bn: row;
2410
+ }
2411
+ &[data-icon-position="right"] {
2412
+ --_sf-fd-bn: row-reverse;
2413
+ }
2414
+ &[data-icon-position="center"] {
2415
+ --_sf-fd-bn: row;
2416
+ }
1820
2417
 
1821
- [data-element-style="Text"] {
1822
- display: inline-block;
1823
- width: 100%;
1824
- }
2418
+ &:hover {
2419
+ --_sf-hr-bd-cr: var(
2420
+ --_ctm-mob-dn-dd-hr-se-bd-cr,
2421
+ var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
2422
+ );
2423
+ --_sf-hr-br-cr: var(
2424
+ --_ctm-mob-dn-dd-hr-se-br-cr,
2425
+ var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
2426
+ );
2427
+ --_sf-hr-br-se: var(
2428
+ --_ctm-mob-dn-dd-hr-se-br-se,
2429
+ var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
2430
+ );
2431
+ --_sf-hr-br-wh: var(
2432
+ --_ctm-mob-dn-dd-hr-se-br-wh,
2433
+ var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
2434
+ );
2435
+ --_sf-hr-br-rs: var(
2436
+ --_ctm-mob-dn-dd-hr-se-br-rs,
2437
+ var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
2438
+ );
2439
+ --_sf-hr-at: var(
2440
+ --_ctm-mob-dn-dd-hr-se-at,
2441
+ var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
2442
+ );
2443
+ --_sf-hr-gp: var(
2444
+ --_ctm-mob-dn-dd-hr-se-gp,
2445
+ var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
2446
+ );
1825
2447
 
1826
- .icon--hover {
1827
- // position: absolute;
1828
- // inset: 0;
1829
- // opacity: 0;
1830
- display: none;
1831
- transition: opacity 0.2s ease;
1832
- }
2448
+ // for shadow
2449
+ --_sf-hr-sw-ae: var(
2450
+ --_ctm-mob-dn-dd-hr-se-sw-ae,
2451
+ var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
2452
+ );
2453
+ --_sf-hr-sw-br: var(
2454
+ --_ctm-mob-dn-dd-hr-se-sw-br,
2455
+ var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
2456
+ );
2457
+ --_sf-hr-sw-hr: var(
2458
+ --_ctm-mob-dn-dd-hr-se-sw-hr,
2459
+ var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
2460
+ );
2461
+ --_sf-hr-sw-cr: var(
2462
+ --_ctm-mob-dn-dd-hr-se-sw-cr,
2463
+ var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
2464
+ );
1833
2465
 
1834
- &:hover .icon--hover {
1835
- // opacity: 1;
1836
- display: flex;
1837
- }
2466
+ // for font
1838
2467
 
1839
- &:hover .icon--default {
1840
- // opacity: 0;
1841
- display: none;
1842
- }
1843
- }
2468
+ --_sf-hr-cr: var(
2469
+ --_ctm-mob-dn-dd-hr-se-cr,
2470
+ var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
2471
+ );
2472
+ --_sf-hr-ft-fy: var(
2473
+ --_ctm-mob-dn-dd-hr-se-ft-fy,
2474
+ var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
2475
+ );
2476
+ --_sf-hr-tt-tm: var(
2477
+ --_ctm-mob-dn-dd-hr-se-tt-tm,
2478
+ var(--_ctm-tab-dn-dd-hr-se-tt-tm, var(--_ctm-dn-dd-hr-se-tt-tm))
2479
+ );
2480
+ --_sf-hr-wd-wp: var(
2481
+ --_ctm-mob-dn-dd-hr-se-wd-wp,
2482
+ var(--_ctm-tab-dn-dd-hr-se-wd-wp, var(--_ctm-dn-dd-hr-se-wd-wp))
2483
+ );
2484
+ --_sf-hr-wd-bk: var(
2485
+ --_ctm-mob-dn-dd-hr-se-wd-bk,
2486
+ var(--_ctm-tab-dn-dd-hr-se-wd-bk, var(--_ctm-dn-dd-hr-se-wd-bk))
2487
+ );
2488
+ --_sf-hr-ft-se: var(
2489
+ --_ctm-mob-dn-dd-hr-se-ft-se,
2490
+ var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
2491
+ );
2492
+ --_sf-hr-ft-wt: var(
2493
+ --_ctm-mob-dn-dd-hr-se-ft-wt,
2494
+ var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
2495
+ );
2496
+ --_sf-hr-ft-se-ic: var(
2497
+ --_ctm-mob-dn-dd-hr-se-ft-se-ic,
2498
+ var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
2499
+ );
2500
+ --_sf-hr-tt-an: var(
2501
+ --_ctm-mob-dn-dd-hr-se-tt-an,
2502
+ var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
2503
+ );
2504
+ --_sf-hr-lr-sg: var(
2505
+ --_ctm-mob-dn-dd-hr-se-lr-sg,
2506
+ var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
2507
+ );
2508
+ --_sf-hr-le-ht: var(
2509
+ --_ctm-mob-dn-dd-hr-se-le-ht,
2510
+ var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
2511
+ );
2512
+
2513
+ --_sf-hr-in-se: var(
2514
+ --_ctm-mob-dn-dd-hr-se-in-se,
2515
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
2516
+ );
2517
+ --_sf-hr-in-se: var(
2518
+ --_ctm-mob-dn-dd-hr-se-in-se,
2519
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
2520
+ );
2521
+ --_sf-hr-in-c1: var(
2522
+ --_ctm-mob-dn-dd-hr-se-in-c1,
2523
+ var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
2524
+ );
2525
+ --_sf-hr-ue: var(
2526
+ --_ctm-mob-dn-dd-hr-se-ue,
2527
+ var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
2528
+ );
1844
2529
 
1845
- &[data-btn-name="download"] {
1846
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
2530
+ // for pading and width
2531
+ --_sf-hr-pg: var(
2532
+ --_ctm-mob-dn-dd-hr-pg,
2533
+ var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
2534
+ );
2535
+ --_sf-hr-wh: var(
2536
+ --_ctm-mob-dn-dd-hr-wh,
2537
+ var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
2538
+ );
1847
2539
 
1848
- &[data-show-shadow="false"] {
1849
- --_show-shadow: none;
1850
- }
2540
+ &[data-hover-show-shadow="false"] {
2541
+ --_hover-show-shadow: none;
2542
+ }
2543
+ &[data-hover-show-icon="false"] {
2544
+ --_hover-show-icon: none;
2545
+ }
2546
+ }
2547
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1851
2548
 
1852
- &[data-icon-position="left"] {
1853
- --_sf-fd-bn: row;
1854
- }
2549
+ display: flex;
2550
+ flex-direction: var(--_sf-fd-bn);
2551
+ align-items: center;
1855
2552
 
1856
- &[data-icon-position="right"] {
1857
- --_sf-fd-bn: row-reverse;
1858
- }
2553
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
2554
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1859
2555
 
1860
- &[data-icon-position="center"] {
1861
- --_sf-fd-bn: row;
1862
- }
2556
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
2557
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1863
2558
 
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
- }
2559
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1933
2560
 
1934
- &[data-hover-show-icon="false"] {
1935
- --_hover-show-icon: none;
1936
- }
1937
- }
2561
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
2562
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
2563
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
2564
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1938
2565
 
1939
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
2566
+ &[data-show-border="true"] {
2567
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1940
2568
 
1941
- display: flex;
1942
- flex-direction: var(--_sf-fd-bn);
1943
- align-items: center;
2569
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1944
2570
 
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));
2571
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
2572
+ }
1947
2573
 
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));
2574
+ .txt {
2575
+ display: flex;
1950
2576
 
1951
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
2577
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1952
2578
 
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));
2579
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
2580
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-tm));
2581
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-wp));
2582
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-bk));
2583
+ &.flex__overflow {
2584
+ white-space: normal;
2585
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2586
+ }
1954
2587
 
1955
- &[data-show-border="true"] {
1956
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
2588
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1957
2589
 
1958
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
2590
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1959
2591
 
1960
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1961
- }
2592
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1962
2593
 
1963
- .txt {
1964
- display: flex;
2594
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1965
2595
 
1966
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
2596
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1967
2597
 
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));
2598
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1972
2599
 
1973
- &.flex__overflow {
1974
- white-space: normal;
1975
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1976
- }
2600
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2601
+ }
1977
2602
 
1978
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
2603
+ .icon {
2604
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2605
+ svg {
2606
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
2607
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1979
2608
 
1980
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
2609
+ path {
2610
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
2611
+ stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
2612
+ }
2613
+ }
2614
+ }
2615
+ [data-element-style="Text"] {
2616
+ display: inline-block;
2617
+ width: 100%;
2618
+ }
1981
2619
 
1982
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
2620
+ .icon--hover {
2621
+ // position: absolute;
2622
+ // inset: 0;
2623
+ // opacity: 0;
2624
+ display: none;
2625
+ transition: opacity 0.2s ease;
2626
+ }
1983
2627
 
1984
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
2628
+ &:hover .icon--hover {
2629
+ // opacity: 1;
2630
+ display: flex;
2631
+ }
1985
2632
 
1986
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
2633
+ &:hover .icon--default {
2634
+ // opacity: 0;
2635
+ display: none;
2636
+ }
2637
+ }
2638
+ &[data-btn-name="more"] {
2639
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2640
+ &[data-show-shadow="false"] {
2641
+ --_show-shadow: none;
2642
+ }
2643
+ &[data-icon-position="left"] {
2644
+ --_sf-fd-bn: row;
2645
+ }
2646
+ &[data-icon-position="right"] {
2647
+ --_sf-fd-bn: row-reverse;
2648
+ }
2649
+ &[data-icon-position="center"] {
2650
+ --_sf-fd-bn: row;
2651
+ }
1987
2652
 
1988
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
2653
+ &:hover {
2654
+ --_sf-hr-bd-cr: var(
2655
+ --_ctm-mob-dn-me-hr-se-bd-cr,
2656
+ var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
2657
+ );
2658
+ --_sf-hr-br-cr: var(
2659
+ --_ctm-mob-dn-me-hr-se-br-cr,
2660
+ var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
2661
+ );
2662
+ --_sf-hr-br-se: var(
2663
+ --_ctm-mob-dn-me-hr-se-br-se,
2664
+ var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
2665
+ );
2666
+ --_sf-hr-br-wh: var(
2667
+ --_ctm-mob-dn-me-hr-se-br-wh,
2668
+ var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
2669
+ );
2670
+ --_sf-hr-br-rs: var(
2671
+ --_ctm-mob-dn-me-hr-se-br-rs,
2672
+ var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
2673
+ );
2674
+ --_sf-hr-at: var(
2675
+ --_ctm-mob-dn-me-hr-se-at,
2676
+ var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
2677
+ );
2678
+ --_sf-hr-gp: var(
2679
+ --_ctm-mob-dn-me-hr-se-gp,
2680
+ var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
2681
+ );
1989
2682
 
1990
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1991
- }
2683
+ // for shadow
2684
+ --_sf-hr-sw-ae: var(
2685
+ --_ctm-mob-dn-me-hr-se-sw-ae,
2686
+ var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
2687
+ );
2688
+ --_sf-hr-sw-br: var(
2689
+ --_ctm-mob-dn-me-hr-se-sw-br,
2690
+ var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
2691
+ );
2692
+ --_sf-hr-sw-hr: var(
2693
+ --_ctm-mob-dn-me-hr-se-sw-hr,
2694
+ var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
2695
+ );
2696
+ --_sf-hr-sw-cr: var(
2697
+ --_ctm-mob-dn-me-hr-se-sw-cr,
2698
+ var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
2699
+ );
1992
2700
 
1993
- .icon {
1994
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2701
+ // for font
1995
2702
 
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));
2703
+ --_sf-hr-cr: var(
2704
+ --_ctm-mob-dn-me-hr-se-cr,
2705
+ var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
2706
+ );
2707
+ --_sf-hr-ft-fy: var(
2708
+ --_ctm-mob-dn-me-hr-se-ft-fy,
2709
+ var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
2710
+ );
2711
+ --_sf-hr-tt-tm: var(
2712
+ --_ctm-mob-dn-me-hr-se-tt-tm,
2713
+ var(--_ctm-tab-dn-me-hr-se-tt-tm, var(--_ctm-dn-me-hr-se-tt-tm))
2714
+ );
2715
+ --_sf-hr-wd-wp: var(
2716
+ --_ctm-mob-dn-me-hr-se-wd-wp,
2717
+ var(--_ctm-tab-dn-me-hr-se-wd-wp, var(--_ctm-dn-me-hr-se-wd-wp))
2718
+ );
2719
+ --_sf-hr-wd-bk: var(
2720
+ --_ctm-mob-dn-me-hr-se-wd-bk,
2721
+ var(--_ctm-tab-dn-me-hr-se-wd-bk, var(--_ctm-dn-me-hr-se-wd-bk))
2722
+ );
2723
+ --_sf-hr-ft-se: var(
2724
+ --_ctm-mob-dn-me-hr-se-ft-se,
2725
+ var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
2726
+ );
2727
+ --_sf-hr-ft-wt: var(
2728
+ --_ctm-mob-dn-me-hr-se-ft-wt,
2729
+ var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
2730
+ );
2731
+ --_sf-hr-ft-se-ic: var(
2732
+ --_ctm-mob-dn-me-hr-se-ft-se-ic,
2733
+ var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
2734
+ );
2735
+ --_sf-hr-tt-an: var(
2736
+ --_ctm-mob-dn-me-hr-se-tt-an,
2737
+ var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
2738
+ );
2739
+ --_sf-hr-lr-sg: var(
2740
+ --_ctm-mob-dn-me-hr-se-lr-sg,
2741
+ var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
2742
+ );
2743
+ --_sf-hr-le-ht: var(
2744
+ --_ctm-mob-dn-me-hr-se-le-ht,
2745
+ var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
2746
+ );
2747
+
2748
+ --_sf-hr-in-se: var(
2749
+ --_ctm-mob-dn-me-hr-se-in-se,
2750
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2751
+ );
2752
+ --_sf-hr-in-se: var(
2753
+ --_ctm-mob-dn-me-hr-se-in-se,
2754
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2755
+ );
2756
+ --_sf-hr-in-c1: var(
2757
+ --_ctm-mob-dn-me-hr-se-in-c1,
2758
+ var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
2759
+ );
2760
+ --_sf-hr-ue: var(
2761
+ --_ctm-mob-dn-me-hr-se-ue,
2762
+ var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
2763
+ );
1999
2764
 
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);
2003
- }
2004
- }
2005
- }
2765
+ // for pading and width
2766
+ --_sf-hr-pg: var(
2767
+ --_ctm-mob-dn-me-hr-pg,
2768
+ var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
2769
+ );
2770
+ --_sf-hr-wh: var(
2771
+ --_ctm-mob-dn-me-hr-wh,
2772
+ var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
2773
+ );
2006
2774
 
2007
- [data-element-style="Text"] {
2008
- display: inline-block;
2009
- width: 100%;
2010
- }
2775
+ &[data-hover-show-shadow="false"] {
2776
+ --_hover-show-shadow: none;
2777
+ }
2778
+ &[data-hover-show-icon="false"] {
2779
+ --_hover-show-icon: none;
2780
+ }
2781
+ }
2782
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
2011
2783
 
2012
- .icon--hover {
2013
- // position: absolute;
2014
- // inset: 0;
2015
- // opacity: 0;
2016
- display: none;
2017
- transition: opacity 0.2s ease;
2018
- }
2784
+ display: flex;
2785
+ flex-direction: var(--_sf-fd-bn);
2786
+ align-items: center;
2019
2787
 
2020
- &:hover .icon--hover {
2021
- // opacity: 1;
2022
- display: flex;
2023
- }
2788
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
2789
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
2024
2790
 
2025
- &:hover .icon--default {
2026
- // opacity: 0;
2027
- display: none;
2028
- }
2029
- }
2791
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
2792
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
2793
+ height: 100%;
2794
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
2030
2795
 
2031
- &[data-btn-name="more"] {
2032
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2796
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
2797
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
2798
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
2799
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
2033
2800
 
2034
- &[data-show-shadow="false"] {
2035
- --_show-shadow: none;
2036
- }
2801
+ &[data-show-border="true"] {
2802
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
2037
2803
 
2038
- &[data-icon-position="left"] {
2039
- --_sf-fd-bn: row;
2040
- }
2804
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
2041
2805
 
2042
- &[data-icon-position="right"] {
2043
- --_sf-fd-bn: row-reverse;
2044
- }
2806
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2807
+ }
2045
2808
 
2046
- &[data-icon-position="center"] {
2047
- --_sf-fd-bn: row;
2048
- }
2809
+ .txt {
2810
+ display: flex;
2049
2811
 
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;
2118
- }
2812
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
2119
2813
 
2120
- &[data-hover-show-icon="false"] {
2121
- --_hover-show-icon: none;
2122
- }
2123
- }
2814
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
2815
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-tm));
2816
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-wp));
2817
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-bk));
2818
+ &.flex__overflow {
2819
+ white-space: normal;
2820
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2821
+ }
2124
2822
 
2125
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
2823
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2126
2824
 
2127
- display: flex;
2128
- flex-direction: var(--_sf-fd-bn);
2129
- align-items: center;
2825
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2130
2826
 
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));
2827
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2133
2828
 
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));
2829
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2138
2830
 
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));
2831
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2140
2832
 
2141
- &[data-show-border="true"] {
2142
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
2833
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2143
2834
 
2144
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
2835
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2836
+ }
2145
2837
 
2146
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2147
- }
2838
+ .icon {
2839
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2840
+ svg {
2841
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2842
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2148
2843
 
2149
- .txt {
2150
- display: flex;
2844
+ path {
2845
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2846
+ stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
2847
+ }
2848
+ }
2849
+ }
2850
+ [data-element-style="Text"] {
2851
+ display: inline-block;
2852
+ width: 100%;
2853
+ }
2151
2854
 
2152
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
2855
+ .icon--hover {
2856
+ // position: absolute;
2857
+ // inset: 0;
2858
+ // opacity: 0;
2859
+ display: none;
2860
+ transition: opacity 0.2s ease;
2861
+ }
2153
2862
 
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));
2863
+ &:hover .icon--hover {
2864
+ // opacity: 1;
2865
+ display: flex;
2866
+ }
2158
2867
 
2159
- &.flex__overflow {
2160
- white-space: normal;
2161
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2868
+ &:hover .icon--default {
2869
+ // opacity: 0;
2870
+ display: none;
2871
+ }
2872
+ }
2162
2873
  }
2163
2874
 
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));
2875
+ // .dropdown-menu {
2876
+ // display: block;
2877
+ // position: absolute;
2878
+ // top: 110%;
2879
+
2880
+ // &[data-position="left"] {
2881
+ // left: 0;
2882
+ // }
2883
+ // &[data-position="right"] {
2884
+ // right: 0;
2885
+ // }
2886
+ // &[data-position="center"] {
2887
+ // left: 50%;
2888
+ // transform: translateX(-50%);
2889
+ // }
2890
+ // // top: 78%;
2891
+ // // left: 100%;
2892
+ // // margin-left: 8px;
2893
+
2894
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2895
+ // min-width: 200px;
2896
+ // z-index: 100;
2897
+ // display: flex;
2898
+ // flex-direction: column;
2899
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2900
+
2901
+ // background-color: var(
2902
+ // --_ctm-mob-dn-dn-se-bd-cr,
2903
+ // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2904
+ // );
2905
+
2906
+ // border-color: var(
2907
+ // --_ctm-mob-dn-dn-se-br-cr,
2908
+ // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2909
+ // );
2910
+
2911
+ // border-style: var(
2912
+ // --_ctm-mob-dn-dn-se-br-se,
2913
+ // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2914
+ // );
2915
+
2916
+ // border-width: var(
2917
+ // --_ctm-mob-dn-dn-se-br-wh,
2918
+ // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2919
+ // );
2920
+
2921
+ // border-radius: var(
2922
+ // --_ctm-mob-dn-dn-se-br-rs,
2923
+ // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2924
+ // );
2925
+
2926
+ // box-shadow: var(
2927
+ // --_show-shadow,
2928
+ // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2929
+ // var(
2930
+ // --_ctm-mob-dn-dn-se-sw-br,
2931
+ // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2932
+ // )
2933
+ // var(
2934
+ // --_ctm-mob-dn-dn-se-sw-sd,
2935
+ // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2936
+ // )
2937
+ // var(
2938
+ // --_ctm-mob-dn-dn-se-sw-cr,
2939
+ // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2940
+ // )
2941
+ // );
2942
+ // }
2943
+ .popover-container {
2944
+ position: relative;
2945
+ display: inline-block;
2946
+ .popover-trigger {
2947
+ cursor: pointer;
2948
+ font-weight: 500;
2949
+ color: #2b6cb0;
2950
+ }
2169
2951
 
2170
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2952
+ .popover-box {
2953
+ // position: absolute;
2954
+ // top: calc(100% + 10px);
2955
+ // right: 0;
2956
+ // background: white;
2957
+ // padding: 12px 16px;
2958
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2959
+ // border-radius: 8px;
2960
+ // min-width: 150px;
2961
+ // z-index: 10;
2962
+ position: absolute;
2963
+ // border: 1px solid #ccc;
2964
+ // min-width: 150px;
2965
+ max-width: 200px;
2966
+ z-index: 1000;
2967
+ // left: 40px;
2968
+ // top: 0;
2969
+ // right: -125%;
2970
+ padding: 8px;
2971
+ border-radius: 4px;
2972
+ }
2171
2973
 
2172
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2974
+ .popover-box {
2975
+ display: flex;
2976
+ flex-direction: column;
2977
+
2978
+ // width: 100%;
2979
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2980
+ background-color: var(
2981
+ --_ctm-mob-dn-pr-se-bd-cr,
2982
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2983
+ );
2984
+
2985
+ border-color: var(
2986
+ --_ctm-mob-dn-pr-se-br-cr,
2987
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2988
+ );
2989
+
2990
+ border-style: var(
2991
+ --_ctm-mob-dn-pr-se-br-se,
2992
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2993
+ );
2994
+
2995
+ border-width: var(
2996
+ --_ctm-mob-dn-pr-se-br-wh,
2997
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2998
+ );
2999
+
3000
+ border-radius: var(
3001
+ --_ctm-mob-dn-pr-se-br-rs,
3002
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
3003
+ );
3004
+
3005
+ box-shadow: var(
3006
+ --_show-shadow,
3007
+ var(
3008
+ --_ctm-mob-dn-pr-se-sw-ae,
3009
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
3010
+ )
3011
+ var(
3012
+ --_ctm-mob-dn-pr-se-sw-br,
3013
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
3014
+ )
3015
+ var(
3016
+ --_ctm-mob-dn-pr-se-sw-sd,
3017
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
3018
+ )
3019
+ var(
3020
+ --_ctm-mob-dn-pr-se-sw-cr,
3021
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
3022
+ )
3023
+ );
3024
+
3025
+ padding: var(
3026
+ --_ctm-mob-dn-pr-se-pg,
3027
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
3028
+ );
3029
+ }
2173
3030
 
2174
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
3031
+ .popover-box strong {
3032
+ display: block;
3033
+ margin-bottom: 6px;
3034
+ font-weight: bold;
3035
+ }
2175
3036
 
2176
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2177
- }
3037
+ .popover-arrow {
3038
+ position: absolute;
3039
+ top: 8px;
3040
+ left: -5px;
3041
+ width: 12px;
3042
+ min-height: 12px;
3043
+
3044
+ // background-color: var(
3045
+ // --_ctm-mob-dn-pr-se-bd-cr,
3046
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
3047
+ // );
3048
+ transform: rotate(-45deg);
3049
+ box-shadow: -1px -1px 0px
3050
+ var(
3051
+ --_ctm-mob-dn-pr-se-br-cr,
3052
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
3053
+ );
3054
+ }
2178
3055
 
2179
- .icon {
2180
- display: var(--_hover-show-icon, var(--_show-icon, flex));
3056
+ .popover_item {
3057
+ // padding-inline: var(--_sf-cd-gp);
3058
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
3059
+ font-family: var(
3060
+ --_ctm-mob-dn-pr-se-ft-fy,
3061
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
3062
+ );
3063
+ text-transform: var(
3064
+ --_ctm-mob-dn-pr-se-tt-tm,
3065
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
3066
+ );
3067
+ word-wrap: var(
3068
+ --_ctm-mob-dn-pr-se-wd-wp,
3069
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
3070
+ );
3071
+ word-break: var(
3072
+ --_ctm-mob-dn-pr-se-wd-bk,
3073
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
3074
+ );
3075
+ font-size: var(
3076
+ --_ctm-mob-dn-pr-se-ft-se,
3077
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
3078
+ );
3079
+ font-weight: var(
3080
+ --_ctm-mob-dn-pr-se-ft-wt,
3081
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
3082
+ );
3083
+ font-style: var(
3084
+ --_ctm-mob-dn-pr-se-ft-se-ic,
3085
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
3086
+ );
3087
+ text-align: var(
3088
+ --_ctm-mob-dn-pr-se-tt-an,
3089
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
3090
+ );
3091
+ letter-spacing: var(
3092
+ --_ctm-mob-dn-pr-se-lr-sg,
3093
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
3094
+ );
3095
+ line-height: var(
3096
+ --_ctm-mob-dn-pr-se-le-ht,
3097
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
3098
+ );
3099
+ text-decoration: var(
3100
+ --_ctm-mob-dn-pr-se-ue,
3101
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
3102
+ );
3103
+ // margin-left: 10px;
3104
+ }
3105
+ }
2181
3106
 
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));
3107
+ // Horizontal side of the popover, from design > Popover Style > Popover Position.
3108
+ // Only the side changes — the vertical placement below is left to the display
3109
+ // style, so a vertically stacked list still opens beside its trigger and a
3110
+ // horizontal one still opens underneath it. "Right" is the original behaviour and
3111
+ // stays the default, so elements saved before this control are unaffected.
3112
+ &[data-display-style="Stack Vertically"] {
3113
+ .popover-box {
3114
+ left: 100%;
3115
+ transform: translate(0%);
3116
+ margin-left: 6px;
3117
+ top: 0;
3118
+ }
2185
3119
 
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);
3120
+ // Beside the trigger, on its left instead of its right.
3121
+ .popover-container[data-popover-position="Left"] .popover-box {
3122
+ left: auto;
3123
+ right: 100%;
3124
+ margin-left: 0;
3125
+ margin-right: 6px;
2189
3126
  }
2190
3127
  }
2191
- }
2192
-
2193
- [data-element-style="Text"] {
2194
- display: inline-block;
2195
- width: 100%;
2196
- }
3128
+ &[data-display-style="Stack Horizontally"] {
3129
+ .popover-box {
3130
+ right: 0;
3131
+ margin-top: 6px;
3132
+ }
2197
3133
 
2198
- .icon--hover {
2199
- // position: absolute;
2200
- // inset: 0;
2201
- // opacity: 0;
2202
- display: none;
2203
- transition: opacity 0.2s ease;
2204
- }
3134
+ // Under the trigger, aligned to its left edge instead of its right.
3135
+ .popover-container[data-popover-position="Left"] .popover-box {
3136
+ right: auto;
3137
+ left: 0;
3138
+ }
3139
+ }
2205
3140
 
2206
- &:hover .icon--hover {
2207
- // opacity: 1;
2208
- display: flex;
2209
- }
3141
+ // "Show Border" switch for the popover. The border is painted from CSS variables
3142
+ // above, so the switch arrives as a data attribute and the width is zeroed here.
3143
+ // Placed after the .popover-box rules and one attribute deeper, so it wins.
3144
+ .popover-container[data-popover-border="false"] .popover-box {
3145
+ border-width: 0;
3146
+ border-style: none;
3147
+ }
2210
3148
 
2211
- &:hover .icon--default {
2212
- // opacity: 0;
2213
- display: none;
3149
+ // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
3150
+ // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
3151
+ .popover-container[data-popover-position="Left"] .popover-arrow {
3152
+ left: auto;
3153
+ right: -5px;
3154
+ box-shadow: 1px 1px 0px
3155
+ var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
3156
+ }
2214
3157
  }
2215
3158
  }
2216
3159
  }
2217
3160
 
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
3161
  // Share popup opened by the Share action. ModalV2 portals it to <body>, outside the
2456
3162
  // element, so these rules cannot be scoped to [data-element-type="productActions"].
2457
3163
  .modalV2-main.product-share-modal {
@@ -2564,4 +3270,4 @@
2564
3270
  left: 0;
2565
3271
  opacity: 0;
2566
3272
  pointer-events: none;
2567
- }
3273
+ }