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

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 (140) 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 +2155 -1671
  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/bundleCategories.scss +301 -0
  19. package/dist/bundleDetails.scss +5072 -3774
  20. package/dist/button.scss +103 -78
  21. package/dist/buy-for-tab-container.scss +106 -77
  22. package/dist/buyForHeaders.scss +2976 -1722
  23. package/dist/cart-details.scss +1025 -485
  24. package/dist/cart-summary.scss +1234 -569
  25. package/dist/cart-wrapper.scss +79 -37
  26. package/dist/cart.scss +225 -117
  27. package/dist/cartAttributes.scss +647 -367
  28. package/dist/cartDropdownOverlay.scss +10 -1
  29. package/dist/category-groups-element.scss +108 -127
  30. package/dist/category-groups-product-grid.scss +147 -120
  31. package/dist/category-groups-product-image.scss +1457 -1162
  32. package/dist/category-groups-product-options.scss +685 -590
  33. package/dist/category-groups-product-price.scss +3244 -1966
  34. package/dist/category-groups-quota-details.scss +464 -210
  35. package/dist/category.scss +50 -26
  36. package/dist/checkout.scss +16 -24
  37. package/dist/confirm-modal.scss +2 -22
  38. package/dist/container.scss +54 -32
  39. package/dist/countdown.scss +443 -256
  40. package/dist/coupon.scss +16 -19
  41. package/dist/default-dropdown.scss +1 -12
  42. package/dist/embroider-template-1-v2.scss +172 -123
  43. package/dist/embroider-template-1.scss +104 -68
  44. package/dist/embroidery.scss +31 -30
  45. package/dist/employee-bulk-order.scss +142 -418
  46. package/dist/faq.scss +408 -228
  47. package/dist/filter-results.scss +265 -125
  48. package/dist/filters.scss +1682 -831
  49. package/dist/gallery-slider-temp.scss +805 -445
  50. package/dist/global-styles.scss +7 -23
  51. package/dist/grid.scss +33 -25
  52. package/dist/hotspot.scss +115 -68
  53. package/dist/image-temp.scss +38 -24
  54. package/dist/item-stock.scss +16 -9
  55. package/dist/kitDetails.scss +4301 -2721
  56. package/dist/kits.scss +19 -24
  57. package/dist/language-selector.scss +361 -211
  58. package/dist/last-x-orders.scss +174 -95
  59. package/dist/layouter-item.scss +106 -76
  60. package/dist/layouter-pro-item.scss +95 -89
  61. package/dist/layouter-pro.scss +92 -87
  62. package/dist/layouter.scss +264 -79
  63. package/dist/light-box-v2.scss +104 -89
  64. package/dist/login.scss +600 -311
  65. package/dist/map.scss +391 -228
  66. package/dist/marchandiserSets.scss +104 -95
  67. package/dist/mega-menu-container.scss +109 -96
  68. package/dist/mega-menu.scss +731 -624
  69. package/dist/menu-item.scss +2 -2
  70. package/dist/menu-v2.scss +619 -507
  71. package/dist/multi-select-dropdown.scss +3 -27
  72. package/dist/my-templates.scss +9 -38
  73. package/dist/option-bar.scss +375 -215
  74. package/dist/order-status.scss +1117 -643
  75. package/dist/overflow-module.scss +7 -6
  76. package/dist/past-orders.scss +149 -118
  77. package/dist/payment-methods.scss +30 -46
  78. package/dist/pickup-locations.scss +1118 -558
  79. package/dist/position-module.scss +17 -20
  80. package/dist/prefix-list.scss +10 -21
  81. package/dist/product-actions.scss +1778 -1228
  82. package/dist/product-basic-elements.scss +169 -108
  83. package/dist/product-highlights.scss +176 -107
  84. package/dist/product-image-bundles.scss +642 -337
  85. package/dist/product-inventory.scss +1357 -673
  86. package/dist/product-labels.scss +105 -84
  87. package/dist/product-options.scss +659 -316
  88. package/dist/product-price.scss +2562 -1284
  89. package/dist/product-promotions.scss +2830 -1388
  90. package/dist/product-sizechart.scss +905 -516
  91. package/dist/product.scss +61 -28
  92. package/dist/productDetails.scss +39 -19
  93. package/dist/profile.scss +451 -207
  94. package/dist/quantity-selector.scss +550 -313
  95. package/dist/quick-inventory-check.scss +174 -95
  96. package/dist/quick-links.scss +137 -56
  97. package/dist/quick-order-pad.scss +271 -218
  98. package/dist/quota-details.scss +282 -152
  99. package/dist/quotes.scss +121 -82
  100. package/dist/repeater-embla-controls.scss +26 -37
  101. package/dist/repeater-grid-toggle.scss +166 -156
  102. package/dist/repeater-item.scss +64 -41
  103. package/dist/repeater.scss +817 -554
  104. package/dist/request-for-quotes.scss +16 -66
  105. package/dist/responsive-behaviour.scss +1 -3
  106. package/dist/rfqs.scss +181 -118
  107. package/dist/scroll.scss +198 -90
  108. package/dist/search.scss +326 -179
  109. package/dist/section.scss +51 -27
  110. package/dist/shipping-payments.scss +58 -198
  111. package/dist/simple-list.scss +198 -61
  112. package/dist/social.scss +145 -80
  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 +511 -269
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/elements/bundle-categories/index.d.ts +30 -0
  123. package/dist/types/builder/enums/index.d.ts +1 -0
  124. package/dist/types/builder/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/bundleCategories.d.ts +115 -0
  126. package/dist/types/builder/tools/element-edit/button.d.ts +1 -0
  127. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  130. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  131. package/dist/types/builder/tools/element-edit/productPrice.d.ts +1 -0
  132. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  133. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  134. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  135. package/dist/uom-selector.scss +949 -489
  136. package/dist/user-elements.scss +892 -574
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. 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,1009 +1301,1285 @@
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
- }
1215
-
1216
- [data-element-style="Text"] {
1217
- display: inline-block;
1218
- width: 100%;
1219
- }
1568
+ [data-element-style="Text"] {
1569
+ display: inline-block;
1570
+ width: 100%;
1571
+ }
1220
1572
 
1221
- .icon--hover {
1222
- // position: absolute;
1223
- // inset: 0;
1224
- // opacity: 0;
1225
- display: none;
1226
- transition: opacity 0.2s ease;
1227
- }
1573
+ .icon--hover {
1574
+ // position: absolute;
1575
+ // inset: 0;
1576
+ // opacity: 0;
1577
+ display: none;
1578
+ transition: opacity 0.2s ease;
1579
+ }
1228
1580
 
1229
- &:hover .icon--hover {
1230
- // opacity: 1;
1231
- display: flex;
1232
- }
1581
+ &:hover .icon--hover {
1582
+ // opacity: 1;
1583
+ display: flex;
1584
+ }
1233
1585
 
1234
- &:hover .icon--default {
1235
- // opacity: 0;
1236
- display: none;
1586
+ &:hover .icon--default {
1587
+ // opacity: 0;
1588
+ display: none;
1589
+ }
1237
1590
  }
1238
- }
1591
+ &[data-btn-name="notifyMe"] {
1592
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
1593
+ &[data-show-shadow="false"] {
1594
+ --_show-shadow: none;
1595
+ }
1596
+ &[data-icon-position="left"] {
1597
+ --_sf-fd-bn: row;
1598
+ }
1599
+ &[data-icon-position="right"] {
1600
+ --_sf-fd-bn: row-reverse;
1601
+ }
1602
+ &[data-icon-position="center"] {
1603
+ --_sf-fd-bn: row;
1604
+ }
1239
1605
 
1240
- &[data-btn-name="notifyMe"] {
1241
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
1606
+ &:hover {
1607
+ --_sf-hr-bd-cr: var(
1608
+ --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1609
+ var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1610
+ );
1611
+ --_sf-hr-br-cr: var(
1612
+ --_ctm-mob-dn-ny-me-hr-se-br-cr,
1613
+ var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1614
+ );
1615
+ --_sf-hr-br-se: var(
1616
+ --_ctm-mob-dn-ny-me-hr-se-br-se,
1617
+ var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1618
+ );
1619
+ --_sf-hr-br-wh: var(
1620
+ --_ctm-mob-dn-ny-me-hr-se-br-wh,
1621
+ var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1622
+ );
1623
+ --_sf-hr-br-rs: var(
1624
+ --_ctm-mob-dn-ny-me-hr-se-br-rs,
1625
+ var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1626
+ );
1627
+ --_sf-hr-at: var(
1628
+ --_ctm-mob-dn-ny-me-hr-se-at,
1629
+ var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1630
+ );
1631
+ --_sf-hr-gp: var(
1632
+ --_ctm-mob-dn-ny-me-hr-se-gp,
1633
+ var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1634
+ );
1242
1635
 
1243
- &[data-show-shadow="false"] {
1244
- --_show-shadow: none;
1245
- }
1636
+ // for shadow
1637
+ --_sf-hr-sw-ae: var(
1638
+ --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1639
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1640
+ );
1641
+ --_sf-hr-sw-br: var(
1642
+ --_ctm-mob-dn-ny-me-hr-se-sw-br,
1643
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1644
+ );
1645
+ --_sf-hr-sw-hr: var(
1646
+ --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1647
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1648
+ );
1649
+ --_sf-hr-sw-cr: var(
1650
+ --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1651
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1652
+ );
1246
1653
 
1247
- &[data-icon-position="left"] {
1248
- --_sf-fd-bn: row;
1249
- }
1654
+ // for font
1250
1655
 
1251
- &[data-icon-position="right"] {
1252
- --_sf-fd-bn: row-reverse;
1253
- }
1656
+ --_sf-hr-cr: var(
1657
+ --_ctm-mob-dn-ny-me-hr-se-cr,
1658
+ var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1659
+ );
1660
+ --_sf-hr-ft-fy: var(
1661
+ --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1662
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1663
+ );
1664
+ --_sf-hr-tt-tm: var(
1665
+ --_ctm-mob-dn-ny-me-hr-se-tt-tm,
1666
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-tm, var(--_ctm-dn-ny-me-hr-se-tt-tm))
1667
+ );
1668
+ --_sf-hr-wd-wp: var(
1669
+ --_ctm-mob-dn-ny-me-hr-se-wd-wp,
1670
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-wp, var(--_ctm-dn-ny-me-hr-se-wd-wp))
1671
+ );
1672
+ --_sf-hr-wd-bk: var(
1673
+ --_ctm-mob-dn-ny-me-hr-se-wd-bk,
1674
+ var(--_ctm-tab-dn-ny-me-hr-se-wd-bk, var(--_ctm-dn-ny-me-hr-se-wd-bk))
1675
+ );
1676
+ --_sf-hr-ft-se: var(
1677
+ --_ctm-mob-dn-ny-me-hr-se-ft-se,
1678
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1679
+ );
1680
+ --_sf-hr-ft-wt: var(
1681
+ --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1682
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1683
+ );
1684
+ --_sf-hr-ft-se-ic: var(
1685
+ --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1686
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1687
+ );
1688
+ --_sf-hr-tt-an: var(
1689
+ --_ctm-mob-dn-ny-me-hr-se-tt-an,
1690
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1691
+ );
1692
+ --_sf-hr-lr-sg: var(
1693
+ --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1694
+ var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1695
+ );
1696
+ --_sf-hr-le-ht: var(
1697
+ --_ctm-mob-dn-ny-me-hr-se-le-ht,
1698
+ var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1699
+ );
1700
+
1701
+ --_sf-hr-in-se: var(
1702
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1703
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1704
+ );
1705
+ --_sf-hr-in-se: var(
1706
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1707
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1708
+ );
1709
+ --_sf-hr-in-c1: var(
1710
+ --_ctm-mob-dn-ny-me-hr-se-in-c1,
1711
+ var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1712
+ );
1713
+ --_sf-hr-ue: var(
1714
+ --_ctm-mob-dn-ny-me-hr-se-ue,
1715
+ var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
1716
+ );
1254
1717
 
1255
- &[data-icon-position="center"] {
1256
- --_sf-fd-bn: row;
1257
- }
1718
+ // for pading and width
1719
+ --_sf-hr-pg: var(
1720
+ --_ctm-mob-dn-ny-me-hr-pg,
1721
+ var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
1722
+ );
1723
+ --_sf-hr-wh: var(
1724
+ --_ctm-mob-dn-ny-me-hr-wh,
1725
+ var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
1726
+ );
1258
1727
 
1259
- &:hover {
1260
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-ny-me-hr-se-bd-cr,
1261
- var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr)));
1262
- --_sf-hr-br-cr: var(--_ctm-mob-dn-ny-me-hr-se-br-cr,
1263
- var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr)));
1264
- --_sf-hr-br-se: var(--_ctm-mob-dn-ny-me-hr-se-br-se,
1265
- var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se)));
1266
- --_sf-hr-br-wh: var(--_ctm-mob-dn-ny-me-hr-se-br-wh,
1267
- var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh)));
1268
- --_sf-hr-br-rs: var(--_ctm-mob-dn-ny-me-hr-se-br-rs,
1269
- var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs)));
1270
- --_sf-hr-at: var(--_ctm-mob-dn-ny-me-hr-se-at,
1271
- var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at)));
1272
- --_sf-hr-gp: var(--_ctm-mob-dn-ny-me-hr-se-gp,
1273
- var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp)));
1274
-
1275
- // for shadow
1276
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-ny-me-hr-se-sw-ae,
1277
- var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae)));
1278
- --_sf-hr-sw-br: var(--_ctm-mob-dn-ny-me-hr-se-sw-br,
1279
- var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br)));
1280
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-ny-me-hr-se-sw-hr,
1281
- var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr)));
1282
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-ny-me-hr-se-sw-cr,
1283
- var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr)));
1284
-
1285
- // for font
1286
-
1287
- --_sf-hr-cr: var(--_ctm-mob-dn-ny-me-hr-se-cr,
1288
- var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr)));
1289
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-ny-me-hr-se-ft-fy,
1290
- var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy)));
1291
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-ny-me-hr-se-tt-tm,
1292
- var(--_ctm-tab-dn-ny-me-hr-se-tt-tm, var(--_ctm-dn-ny-me-hr-se-tt-tm)));
1293
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-ny-me-hr-se-wd-wp,
1294
- var(--_ctm-tab-dn-ny-me-hr-se-wd-wp, var(--_ctm-dn-ny-me-hr-se-wd-wp)));
1295
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-ny-me-hr-se-wd-bk,
1296
- var(--_ctm-tab-dn-ny-me-hr-se-wd-bk, var(--_ctm-dn-ny-me-hr-se-wd-bk)));
1297
- --_sf-hr-ft-se: var(--_ctm-mob-dn-ny-me-hr-se-ft-se,
1298
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se)));
1299
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-ny-me-hr-se-ft-wt,
1300
- var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt)));
1301
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1302
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic)));
1303
- --_sf-hr-tt-an: var(--_ctm-mob-dn-ny-me-hr-se-tt-an,
1304
- var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an)));
1305
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-ny-me-hr-se-lr-sg,
1306
- var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg)));
1307
- --_sf-hr-le-ht: var(--_ctm-mob-dn-ny-me-hr-se-le-ht,
1308
- var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht)));
1309
-
1310
- --_sf-hr-in-se: var(--_ctm-mob-dn-ny-me-hr-se-in-se,
1311
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se)));
1312
- --_sf-hr-in-se: var(--_ctm-mob-dn-ny-me-hr-se-in-se,
1313
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se)));
1314
- --_sf-hr-in-c1: var(--_ctm-mob-dn-ny-me-hr-se-in-c1,
1315
- var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1)));
1316
- --_sf-hr-ue: var(--_ctm-mob-dn-ny-me-hr-se-ue,
1317
- var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue)));
1318
-
1319
- // for pading and width
1320
- --_sf-hr-pg: var(--_ctm-mob-dn-ny-me-hr-pg,
1321
- var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg)));
1322
- --_sf-hr-wh: var(--_ctm-mob-dn-ny-me-hr-wh,
1323
- var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh)));
1324
-
1325
- &[data-hover-show-shadow="false"] {
1326
- --_hover-show-shadow: none;
1327
- }
1328
-
1329
- &[data-hover-show-icon="false"] {
1330
- --_hover-show-icon: none;
1728
+ &[data-hover-show-shadow="false"] {
1729
+ --_hover-show-shadow: none;
1730
+ }
1731
+ &[data-hover-show-icon="false"] {
1732
+ --_hover-show-icon: none;
1733
+ }
1331
1734
  }
1332
- }
1333
-
1334
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1735
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1335
1736
 
1336
- display: flex;
1337
- flex-direction: var(--_sf-fd-bn);
1338
- align-items: center;
1737
+ display: flex;
1738
+ flex-direction: var(--_sf-fd-bn);
1739
+ align-items: center;
1339
1740
 
1340
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1341
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1741
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1742
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1342
1743
 
1343
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1344
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1744
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1745
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1345
1746
 
1346
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1747
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1347
1748
 
1348
- 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));
1749
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
1750
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
1751
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
1752
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1349
1753
 
1350
- &[data-show-border="true"] {
1351
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1754
+ &[data-show-border="true"] {
1755
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1352
1756
 
1353
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1757
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1354
1758
 
1355
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1356
- }
1357
-
1358
- .txt {
1359
- display: flex;
1759
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1760
+ }
1360
1761
 
1361
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1762
+ .txt {
1763
+ display: flex;
1362
1764
 
1363
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1364
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-tm));
1365
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-wp));
1366
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-bk));
1765
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1367
1766
 
1368
- &.flex__overflow {
1369
- white-space: normal;
1370
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1371
- }
1372
-
1373
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1767
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1768
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-tm));
1769
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-wp));
1770
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wd-bk));
1771
+ &.flex__overflow {
1772
+ white-space: normal;
1773
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1774
+ }
1374
1775
 
1375
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1776
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1376
1777
 
1377
- font-style: var(--_sf-hr-ft-se-ic,
1378
- prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
1778
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1379
1779
 
1380
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1780
+ font-style: var(
1781
+ --_sf-hr-ft-se-ic,
1782
+ prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic)
1783
+ );
1381
1784
 
1382
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1785
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1383
1786
 
1384
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1787
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1385
1788
 
1386
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1387
- }
1789
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1388
1790
 
1389
- .icon {
1390
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1791
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1792
+ }
1391
1793
 
1392
- svg {
1393
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1394
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1794
+ .icon {
1795
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1796
+ svg {
1797
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1798
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1395
1799
 
1396
- path {
1397
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1398
- stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
1800
+ path {
1801
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1802
+ stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
1803
+ }
1399
1804
  }
1400
1805
  }
1401
- }
1402
-
1403
- [data-element-style="Text"] {
1404
- display: inline-block;
1405
- width: 100%;
1406
- }
1806
+ [data-element-style="Text"] {
1807
+ display: inline-block;
1808
+ width: 100%;
1809
+ }
1407
1810
 
1408
- .icon--hover {
1409
- // position: absolute;
1410
- // inset: 0;
1411
- // opacity: 0;
1412
- display: none;
1413
- transition: opacity 0.2s ease;
1414
- }
1811
+ .icon--hover {
1812
+ // position: absolute;
1813
+ // inset: 0;
1814
+ // opacity: 0;
1815
+ display: none;
1816
+ transition: opacity 0.2s ease;
1817
+ }
1415
1818
 
1416
- &:hover .icon--hover {
1417
- // opacity: 1;
1418
- display: flex;
1419
- }
1819
+ &:hover .icon--hover {
1820
+ // opacity: 1;
1821
+ display: flex;
1822
+ }
1420
1823
 
1421
- &:hover .icon--default {
1422
- // opacity: 0;
1423
- display: none;
1824
+ &:hover .icon--default {
1825
+ // opacity: 0;
1826
+ display: none;
1827
+ }
1424
1828
  }
1425
- }
1829
+ &[data-btn-name="download"] {
1830
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
1831
+ &[data-show-shadow="false"] {
1832
+ --_show-shadow: none;
1833
+ }
1834
+ &[data-icon-position="left"] {
1835
+ --_sf-fd-bn: row;
1836
+ }
1837
+ &[data-icon-position="right"] {
1838
+ --_sf-fd-bn: row-reverse;
1839
+ }
1840
+ &[data-icon-position="center"] {
1841
+ --_sf-fd-bn: row;
1842
+ }
1426
1843
 
1427
- &[data-btn-name="download"] {
1428
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
1844
+ &:hover {
1845
+ --_sf-hr-bd-cr: var(
1846
+ --_ctm-mob-dn-dd-hr-se-bd-cr,
1847
+ var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
1848
+ );
1849
+ --_sf-hr-br-cr: var(
1850
+ --_ctm-mob-dn-dd-hr-se-br-cr,
1851
+ var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
1852
+ );
1853
+ --_sf-hr-br-se: var(
1854
+ --_ctm-mob-dn-dd-hr-se-br-se,
1855
+ var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1856
+ );
1857
+ --_sf-hr-br-wh: var(
1858
+ --_ctm-mob-dn-dd-hr-se-br-wh,
1859
+ var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1860
+ );
1861
+ --_sf-hr-br-rs: var(
1862
+ --_ctm-mob-dn-dd-hr-se-br-rs,
1863
+ var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
1864
+ );
1865
+ --_sf-hr-at: var(
1866
+ --_ctm-mob-dn-dd-hr-se-at,
1867
+ var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
1868
+ );
1869
+ --_sf-hr-gp: var(
1870
+ --_ctm-mob-dn-dd-hr-se-gp,
1871
+ var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
1872
+ );
1429
1873
 
1430
- &[data-show-shadow="false"] {
1431
- --_show-shadow: none;
1432
- }
1874
+ // for shadow
1875
+ --_sf-hr-sw-ae: var(
1876
+ --_ctm-mob-dn-dd-hr-se-sw-ae,
1877
+ var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
1878
+ );
1879
+ --_sf-hr-sw-br: var(
1880
+ --_ctm-mob-dn-dd-hr-se-sw-br,
1881
+ var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
1882
+ );
1883
+ --_sf-hr-sw-hr: var(
1884
+ --_ctm-mob-dn-dd-hr-se-sw-hr,
1885
+ var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
1886
+ );
1887
+ --_sf-hr-sw-cr: var(
1888
+ --_ctm-mob-dn-dd-hr-se-sw-cr,
1889
+ var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
1890
+ );
1433
1891
 
1434
- &[data-icon-position="left"] {
1435
- --_sf-fd-bn: row;
1436
- }
1892
+ // for font
1437
1893
 
1438
- &[data-icon-position="right"] {
1439
- --_sf-fd-bn: row-reverse;
1440
- }
1894
+ --_sf-hr-cr: var(
1895
+ --_ctm-mob-dn-dd-hr-se-cr,
1896
+ var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
1897
+ );
1898
+ --_sf-hr-ft-fy: var(
1899
+ --_ctm-mob-dn-dd-hr-se-ft-fy,
1900
+ var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
1901
+ );
1902
+ --_sf-hr-tt-tm: var(
1903
+ --_ctm-mob-dn-dd-hr-se-tt-tm,
1904
+ var(--_ctm-tab-dn-dd-hr-se-tt-tm, var(--_ctm-dn-dd-hr-se-tt-tm))
1905
+ );
1906
+ --_sf-hr-wd-wp: var(
1907
+ --_ctm-mob-dn-dd-hr-se-wd-wp,
1908
+ var(--_ctm-tab-dn-dd-hr-se-wd-wp, var(--_ctm-dn-dd-hr-se-wd-wp))
1909
+ );
1910
+ --_sf-hr-wd-bk: var(
1911
+ --_ctm-mob-dn-dd-hr-se-wd-bk,
1912
+ var(--_ctm-tab-dn-dd-hr-se-wd-bk, var(--_ctm-dn-dd-hr-se-wd-bk))
1913
+ );
1914
+ --_sf-hr-ft-se: var(
1915
+ --_ctm-mob-dn-dd-hr-se-ft-se,
1916
+ var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
1917
+ );
1918
+ --_sf-hr-ft-wt: var(
1919
+ --_ctm-mob-dn-dd-hr-se-ft-wt,
1920
+ var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
1921
+ );
1922
+ --_sf-hr-ft-se-ic: var(
1923
+ --_ctm-mob-dn-dd-hr-se-ft-se-ic,
1924
+ var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
1925
+ );
1926
+ --_sf-hr-tt-an: var(
1927
+ --_ctm-mob-dn-dd-hr-se-tt-an,
1928
+ var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
1929
+ );
1930
+ --_sf-hr-lr-sg: var(
1931
+ --_ctm-mob-dn-dd-hr-se-lr-sg,
1932
+ var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
1933
+ );
1934
+ --_sf-hr-le-ht: var(
1935
+ --_ctm-mob-dn-dd-hr-se-le-ht,
1936
+ var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
1937
+ );
1938
+
1939
+ --_sf-hr-in-se: var(
1940
+ --_ctm-mob-dn-dd-hr-se-in-se,
1941
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1942
+ );
1943
+ --_sf-hr-in-se: var(
1944
+ --_ctm-mob-dn-dd-hr-se-in-se,
1945
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1946
+ );
1947
+ --_sf-hr-in-c1: var(
1948
+ --_ctm-mob-dn-dd-hr-se-in-c1,
1949
+ var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
1950
+ );
1951
+ --_sf-hr-ue: var(
1952
+ --_ctm-mob-dn-dd-hr-se-ue,
1953
+ var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
1954
+ );
1441
1955
 
1442
- &[data-icon-position="center"] {
1443
- --_sf-fd-bn: row;
1444
- }
1956
+ // for pading and width
1957
+ --_sf-hr-pg: var(
1958
+ --_ctm-mob-dn-dd-hr-pg,
1959
+ var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
1960
+ );
1961
+ --_sf-hr-wh: var(
1962
+ --_ctm-mob-dn-dd-hr-wh,
1963
+ var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
1964
+ );
1445
1965
 
1446
- &:hover {
1447
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-dd-hr-se-bd-cr,
1448
- var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr)));
1449
- --_sf-hr-br-cr: var(--_ctm-mob-dn-dd-hr-se-br-cr,
1450
- var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr)));
1451
- --_sf-hr-br-se: var(--_ctm-mob-dn-dd-hr-se-br-se,
1452
- var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se)));
1453
- --_sf-hr-br-wh: var(--_ctm-mob-dn-dd-hr-se-br-wh,
1454
- var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh)));
1455
- --_sf-hr-br-rs: var(--_ctm-mob-dn-dd-hr-se-br-rs,
1456
- var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs)));
1457
- --_sf-hr-at: var(--_ctm-mob-dn-dd-hr-se-at,
1458
- var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at)));
1459
- --_sf-hr-gp: var(--_ctm-mob-dn-dd-hr-se-gp,
1460
- var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp)));
1461
-
1462
- // for shadow
1463
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-dd-hr-se-sw-ae,
1464
- var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae)));
1465
- --_sf-hr-sw-br: var(--_ctm-mob-dn-dd-hr-se-sw-br,
1466
- var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br)));
1467
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-dd-hr-se-sw-hr,
1468
- var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr)));
1469
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-dd-hr-se-sw-cr,
1470
- var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr)));
1471
-
1472
- // for font
1473
-
1474
- --_sf-hr-cr: var(--_ctm-mob-dn-dd-hr-se-cr,
1475
- var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr)));
1476
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-dd-hr-se-ft-fy,
1477
- var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy)));
1478
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-dd-hr-se-tt-tm,
1479
- var(--_ctm-tab-dn-dd-hr-se-tt-tm, var(--_ctm-dn-dd-hr-se-tt-tm)));
1480
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-dd-hr-se-wd-wp,
1481
- var(--_ctm-tab-dn-dd-hr-se-wd-wp, var(--_ctm-dn-dd-hr-se-wd-wp)));
1482
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-dd-hr-se-wd-bk,
1483
- var(--_ctm-tab-dn-dd-hr-se-wd-bk, var(--_ctm-dn-dd-hr-se-wd-bk)));
1484
- --_sf-hr-ft-se: var(--_ctm-mob-dn-dd-hr-se-ft-se,
1485
- var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se)));
1486
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-dd-hr-se-ft-wt,
1487
- var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt)));
1488
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-dd-hr-se-ft-se-ic,
1489
- var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic)));
1490
- --_sf-hr-tt-an: var(--_ctm-mob-dn-dd-hr-se-tt-an,
1491
- var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an)));
1492
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-dd-hr-se-lr-sg,
1493
- var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg)));
1494
- --_sf-hr-le-ht: var(--_ctm-mob-dn-dd-hr-se-le-ht,
1495
- var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht)));
1496
-
1497
- --_sf-hr-in-se: var(--_ctm-mob-dn-dd-hr-se-in-se,
1498
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se)));
1499
- --_sf-hr-in-se: var(--_ctm-mob-dn-dd-hr-se-in-se,
1500
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se)));
1501
- --_sf-hr-in-c1: var(--_ctm-mob-dn-dd-hr-se-in-c1,
1502
- var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1)));
1503
- --_sf-hr-ue: var(--_ctm-mob-dn-dd-hr-se-ue,
1504
- var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue)));
1505
-
1506
- // for pading and width
1507
- --_sf-hr-pg: var(--_ctm-mob-dn-dd-hr-pg,
1508
- var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg)));
1509
- --_sf-hr-wh: var(--_ctm-mob-dn-dd-hr-wh,
1510
- var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh)));
1511
-
1512
- &[data-hover-show-shadow="false"] {
1513
- --_hover-show-shadow: none;
1514
- }
1515
-
1516
- &[data-hover-show-icon="false"] {
1517
- --_hover-show-icon: none;
1966
+ &[data-hover-show-shadow="false"] {
1967
+ --_hover-show-shadow: none;
1968
+ }
1969
+ &[data-hover-show-icon="false"] {
1970
+ --_hover-show-icon: none;
1971
+ }
1518
1972
  }
1519
- }
1520
-
1521
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1522
-
1523
- display: flex;
1524
- flex-direction: var(--_sf-fd-bn);
1525
- align-items: center;
1973
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1526
1974
 
1527
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1528
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1975
+ display: flex;
1976
+ flex-direction: var(--_sf-fd-bn);
1977
+ align-items: center;
1529
1978
 
1530
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1531
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1979
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1980
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1532
1981
 
1533
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1982
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1983
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1534
1984
 
1535
- 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));
1985
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1536
1986
 
1537
- &[data-show-border="true"] {
1538
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1987
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
1988
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
1989
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
1990
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1539
1991
 
1540
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1992
+ &[data-show-border="true"] {
1993
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1541
1994
 
1542
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1543
- }
1995
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1544
1996
 
1545
- .txt {
1546
- display: flex;
1997
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1998
+ }
1547
1999
 
1548
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
2000
+ .txt {
2001
+ display: flex;
1549
2002
 
1550
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1551
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-tm));
1552
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-wp));
1553
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-bk));
2003
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1554
2004
 
1555
- &.flex__overflow {
1556
- white-space: normal;
1557
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1558
- }
1559
-
1560
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
2005
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
2006
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-tm));
2007
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-wp));
2008
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dd-dt-se-wd-bk));
2009
+ &.flex__overflow {
2010
+ white-space: normal;
2011
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2012
+ }
1561
2013
 
1562
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
2014
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1563
2015
 
1564
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
2016
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1565
2017
 
1566
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
2018
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1567
2019
 
1568
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
2020
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1569
2021
 
1570
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
2022
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1571
2023
 
1572
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1573
- }
2024
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1574
2025
 
1575
- .icon {
1576
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2026
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2027
+ }
1577
2028
 
1578
- svg {
1579
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1580
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
2029
+ .icon {
2030
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2031
+ svg {
2032
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
2033
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1581
2034
 
1582
- path {
1583
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
1584
- stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
2035
+ path {
2036
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
2037
+ stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
2038
+ }
1585
2039
  }
1586
2040
  }
1587
- }
1588
-
1589
- [data-element-style="Text"] {
1590
- display: inline-block;
1591
- width: 100%;
1592
- }
2041
+ [data-element-style="Text"] {
2042
+ display: inline-block;
2043
+ width: 100%;
2044
+ }
1593
2045
 
1594
- .icon--hover {
1595
- // position: absolute;
1596
- // inset: 0;
1597
- // opacity: 0;
1598
- display: none;
1599
- transition: opacity 0.2s ease;
1600
- }
2046
+ .icon--hover {
2047
+ // position: absolute;
2048
+ // inset: 0;
2049
+ // opacity: 0;
2050
+ display: none;
2051
+ transition: opacity 0.2s ease;
2052
+ }
1601
2053
 
1602
- &:hover .icon--hover {
1603
- // opacity: 1;
1604
- display: flex;
1605
- }
2054
+ &:hover .icon--hover {
2055
+ // opacity: 1;
2056
+ display: flex;
2057
+ }
1606
2058
 
1607
- &:hover .icon--default {
1608
- // opacity: 0;
1609
- display: none;
2059
+ &:hover .icon--default {
2060
+ // opacity: 0;
2061
+ display: none;
2062
+ }
1610
2063
  }
1611
- }
2064
+ &[data-btn-name="more"] {
2065
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2066
+ &[data-show-shadow="false"] {
2067
+ --_show-shadow: none;
2068
+ }
2069
+ &[data-icon-position="left"] {
2070
+ --_sf-fd-bn: row;
2071
+ }
2072
+ &[data-icon-position="right"] {
2073
+ --_sf-fd-bn: row-reverse;
2074
+ }
2075
+ &[data-icon-position="center"] {
2076
+ --_sf-fd-bn: row;
2077
+ }
1612
2078
 
1613
- &[data-btn-name="more"] {
1614
- --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
2079
+ &:hover {
2080
+ --_sf-hr-bd-cr: var(
2081
+ --_ctm-mob-dn-me-hr-se-bd-cr,
2082
+ var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
2083
+ );
2084
+ --_sf-hr-br-cr: var(
2085
+ --_ctm-mob-dn-me-hr-se-br-cr,
2086
+ var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
2087
+ );
2088
+ --_sf-hr-br-se: var(
2089
+ --_ctm-mob-dn-me-hr-se-br-se,
2090
+ var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
2091
+ );
2092
+ --_sf-hr-br-wh: var(
2093
+ --_ctm-mob-dn-me-hr-se-br-wh,
2094
+ var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
2095
+ );
2096
+ --_sf-hr-br-rs: var(
2097
+ --_ctm-mob-dn-me-hr-se-br-rs,
2098
+ var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
2099
+ );
2100
+ --_sf-hr-at: var(
2101
+ --_ctm-mob-dn-me-hr-se-at,
2102
+ var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
2103
+ );
2104
+ --_sf-hr-gp: var(
2105
+ --_ctm-mob-dn-me-hr-se-gp,
2106
+ var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
2107
+ );
1615
2108
 
1616
- &[data-show-shadow="false"] {
1617
- --_show-shadow: none;
1618
- }
2109
+ // for shadow
2110
+ --_sf-hr-sw-ae: var(
2111
+ --_ctm-mob-dn-me-hr-se-sw-ae,
2112
+ var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
2113
+ );
2114
+ --_sf-hr-sw-br: var(
2115
+ --_ctm-mob-dn-me-hr-se-sw-br,
2116
+ var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
2117
+ );
2118
+ --_sf-hr-sw-hr: var(
2119
+ --_ctm-mob-dn-me-hr-se-sw-hr,
2120
+ var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
2121
+ );
2122
+ --_sf-hr-sw-cr: var(
2123
+ --_ctm-mob-dn-me-hr-se-sw-cr,
2124
+ var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
2125
+ );
1619
2126
 
1620
- &[data-icon-position="left"] {
1621
- --_sf-fd-bn: row;
1622
- }
2127
+ // for font
1623
2128
 
1624
- &[data-icon-position="right"] {
1625
- --_sf-fd-bn: row-reverse;
1626
- }
2129
+ --_sf-hr-cr: var(
2130
+ --_ctm-mob-dn-me-hr-se-cr,
2131
+ var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
2132
+ );
2133
+ --_sf-hr-ft-fy: var(
2134
+ --_ctm-mob-dn-me-hr-se-ft-fy,
2135
+ var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
2136
+ );
2137
+ --_sf-hr-tt-tm: var(
2138
+ --_ctm-mob-dn-me-hr-se-tt-tm,
2139
+ var(--_ctm-tab-dn-me-hr-se-tt-tm, var(--_ctm-dn-me-hr-se-tt-tm))
2140
+ );
2141
+ --_sf-hr-wd-wp: var(
2142
+ --_ctm-mob-dn-me-hr-se-wd-wp,
2143
+ var(--_ctm-tab-dn-me-hr-se-wd-wp, var(--_ctm-dn-me-hr-se-wd-wp))
2144
+ );
2145
+ --_sf-hr-wd-bk: var(
2146
+ --_ctm-mob-dn-me-hr-se-wd-bk,
2147
+ var(--_ctm-tab-dn-me-hr-se-wd-bk, var(--_ctm-dn-me-hr-se-wd-bk))
2148
+ );
2149
+ --_sf-hr-ft-se: var(
2150
+ --_ctm-mob-dn-me-hr-se-ft-se,
2151
+ var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
2152
+ );
2153
+ --_sf-hr-ft-wt: var(
2154
+ --_ctm-mob-dn-me-hr-se-ft-wt,
2155
+ var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
2156
+ );
2157
+ --_sf-hr-ft-se-ic: var(
2158
+ --_ctm-mob-dn-me-hr-se-ft-se-ic,
2159
+ var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
2160
+ );
2161
+ --_sf-hr-tt-an: var(
2162
+ --_ctm-mob-dn-me-hr-se-tt-an,
2163
+ var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
2164
+ );
2165
+ --_sf-hr-lr-sg: var(
2166
+ --_ctm-mob-dn-me-hr-se-lr-sg,
2167
+ var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
2168
+ );
2169
+ --_sf-hr-le-ht: var(
2170
+ --_ctm-mob-dn-me-hr-se-le-ht,
2171
+ var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
2172
+ );
2173
+
2174
+ --_sf-hr-in-se: var(
2175
+ --_ctm-mob-dn-me-hr-se-in-se,
2176
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2177
+ );
2178
+ --_sf-hr-in-se: var(
2179
+ --_ctm-mob-dn-me-hr-se-in-se,
2180
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
2181
+ );
2182
+ --_sf-hr-in-c1: var(
2183
+ --_ctm-mob-dn-me-hr-se-in-c1,
2184
+ var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
2185
+ );
2186
+ --_sf-hr-ue: var(
2187
+ --_ctm-mob-dn-me-hr-se-ue,
2188
+ var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
2189
+ );
1627
2190
 
1628
- &[data-icon-position="center"] {
1629
- --_sf-fd-bn: row;
1630
- }
2191
+ // for pading and width
2192
+ --_sf-hr-pg: var(
2193
+ --_ctm-mob-dn-me-hr-pg,
2194
+ var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
2195
+ );
2196
+ --_sf-hr-wh: var(
2197
+ --_ctm-mob-dn-me-hr-wh,
2198
+ var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
2199
+ );
1631
2200
 
1632
- &:hover {
1633
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-me-hr-se-bd-cr,
1634
- var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr)));
1635
- --_sf-hr-br-cr: var(--_ctm-mob-dn-me-hr-se-br-cr,
1636
- var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr)));
1637
- --_sf-hr-br-se: var(--_ctm-mob-dn-me-hr-se-br-se,
1638
- var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se)));
1639
- --_sf-hr-br-wh: var(--_ctm-mob-dn-me-hr-se-br-wh,
1640
- var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh)));
1641
- --_sf-hr-br-rs: var(--_ctm-mob-dn-me-hr-se-br-rs,
1642
- var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs)));
1643
- --_sf-hr-at: var(--_ctm-mob-dn-me-hr-se-at,
1644
- var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at)));
1645
- --_sf-hr-gp: var(--_ctm-mob-dn-me-hr-se-gp,
1646
- var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp)));
1647
-
1648
- // for shadow
1649
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-me-hr-se-sw-ae,
1650
- var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae)));
1651
- --_sf-hr-sw-br: var(--_ctm-mob-dn-me-hr-se-sw-br,
1652
- var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br)));
1653
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-me-hr-se-sw-hr,
1654
- var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr)));
1655
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-me-hr-se-sw-cr,
1656
- var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr)));
1657
-
1658
- // for font
1659
-
1660
- --_sf-hr-cr: var(--_ctm-mob-dn-me-hr-se-cr,
1661
- var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr)));
1662
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-me-hr-se-ft-fy,
1663
- var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy)));
1664
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-me-hr-se-tt-tm,
1665
- var(--_ctm-tab-dn-me-hr-se-tt-tm, var(--_ctm-dn-me-hr-se-tt-tm)));
1666
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-me-hr-se-wd-wp,
1667
- var(--_ctm-tab-dn-me-hr-se-wd-wp, var(--_ctm-dn-me-hr-se-wd-wp)));
1668
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-me-hr-se-wd-bk,
1669
- var(--_ctm-tab-dn-me-hr-se-wd-bk, var(--_ctm-dn-me-hr-se-wd-bk)));
1670
- --_sf-hr-ft-se: var(--_ctm-mob-dn-me-hr-se-ft-se,
1671
- var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se)));
1672
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-me-hr-se-ft-wt,
1673
- var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt)));
1674
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-me-hr-se-ft-se-ic,
1675
- var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic)));
1676
- --_sf-hr-tt-an: var(--_ctm-mob-dn-me-hr-se-tt-an,
1677
- var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an)));
1678
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-me-hr-se-lr-sg,
1679
- var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg)));
1680
- --_sf-hr-le-ht: var(--_ctm-mob-dn-me-hr-se-le-ht,
1681
- var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht)));
1682
-
1683
- --_sf-hr-in-se: var(--_ctm-mob-dn-me-hr-se-in-se,
1684
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se)));
1685
- --_sf-hr-in-se: var(--_ctm-mob-dn-me-hr-se-in-se,
1686
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se)));
1687
- --_sf-hr-in-c1: var(--_ctm-mob-dn-me-hr-se-in-c1,
1688
- var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1)));
1689
- --_sf-hr-ue: var(--_ctm-mob-dn-me-hr-se-ue,
1690
- var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue)));
1691
-
1692
- // for pading and width
1693
- --_sf-hr-pg: var(--_ctm-mob-dn-me-hr-pg,
1694
- var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg)));
1695
- --_sf-hr-wh: var(--_ctm-mob-dn-me-hr-wh,
1696
- var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh)));
1697
-
1698
- &[data-hover-show-shadow="false"] {
1699
- --_hover-show-shadow: none;
1700
- }
1701
-
1702
- &[data-hover-show-icon="false"] {
1703
- --_hover-show-icon: none;
2201
+ &[data-hover-show-shadow="false"] {
2202
+ --_hover-show-shadow: none;
2203
+ }
2204
+ &[data-hover-show-icon="false"] {
2205
+ --_hover-show-icon: none;
2206
+ }
1704
2207
  }
1705
- }
2208
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
1706
2209
 
1707
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
2210
+ display: flex;
2211
+ flex-direction: var(--_sf-fd-bn);
2212
+ align-items: center;
1708
2213
 
1709
- display: flex;
1710
- flex-direction: var(--_sf-fd-bn);
1711
- align-items: center;
2214
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
2215
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
1712
2216
 
1713
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
1714
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
2217
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
2218
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
2219
+ height: 100%;
2220
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
1715
2221
 
1716
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
1717
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
1718
- height: 100%;
1719
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
2222
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
2223
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
2224
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
2225
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
1720
2226
 
1721
- 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));
2227
+ &[data-show-border="true"] {
2228
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
1722
2229
 
1723
- &[data-show-border="true"] {
1724
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
2230
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
1725
2231
 
1726
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
2232
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2233
+ }
1727
2234
 
1728
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
1729
- }
2235
+ .txt {
2236
+ display: flex;
1730
2237
 
1731
- .txt {
1732
- display: flex;
2238
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
1733
2239
 
1734
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
2240
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
2241
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-tm));
2242
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-wp));
2243
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-bk));
2244
+ &.flex__overflow {
2245
+ white-space: normal;
2246
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2247
+ }
1735
2248
 
1736
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
1737
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-tm));
1738
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-wp));
1739
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-me-dt-se-wd-bk));
2249
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
1740
2250
 
1741
- &.flex__overflow {
1742
- white-space: normal;
1743
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1744
- }
2251
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
1745
2252
 
1746
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2253
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
1747
2254
 
1748
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2255
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
1749
2256
 
1750
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2257
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
1751
2258
 
1752
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2259
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
1753
2260
 
1754
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2261
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2262
+ }
1755
2263
 
1756
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2264
+ .icon {
2265
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2266
+ svg {
2267
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2268
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
1757
2269
 
1758
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1759
- }
2270
+ path {
2271
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2272
+ stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
2273
+ }
2274
+ }
2275
+ }
2276
+ [data-element-style="Text"] {
2277
+ display: inline-block;
2278
+ width: 100%;
2279
+ }
1760
2280
 
1761
- .icon {
1762
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2281
+ .icon--hover {
2282
+ // position: absolute;
2283
+ // inset: 0;
2284
+ // opacity: 0;
2285
+ display: none;
2286
+ transition: opacity 0.2s ease;
2287
+ }
1763
2288
 
1764
- svg {
1765
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
1766
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2289
+ &:hover .icon--hover {
2290
+ // opacity: 1;
2291
+ display: flex;
2292
+ }
1767
2293
 
1768
- path {
1769
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
1770
- stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
1771
- }
2294
+ &:hover .icon--default {
2295
+ // opacity: 0;
2296
+ display: none;
1772
2297
  }
1773
2298
  }
2299
+ }
1774
2300
 
1775
- [data-element-style="Text"] {
1776
- display: inline-block;
1777
- width: 100%;
2301
+ // .dropdown-menu {
2302
+ // display: block;
2303
+ // position: absolute;
2304
+ // top: 110%;
2305
+
2306
+ // &[data-position="left"] {
2307
+ // left: 0;
2308
+ // }
2309
+ // &[data-position="right"] {
2310
+ // right: 0;
2311
+ // }
2312
+ // &[data-position="center"] {
2313
+ // left: 50%;
2314
+ // transform: translateX(-50%);
2315
+ // }
2316
+ // // top: 78%;
2317
+ // // left: 100%;
2318
+ // // margin-left: 8px;
2319
+
2320
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2321
+ // min-width: 200px;
2322
+ // z-index: 100;
2323
+ // display: flex;
2324
+ // flex-direction: column;
2325
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2326
+
2327
+ // background-color: var(
2328
+ // --_ctm-mob-dn-dn-se-bd-cr,
2329
+ // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2330
+ // );
2331
+
2332
+ // border-color: var(
2333
+ // --_ctm-mob-dn-dn-se-br-cr,
2334
+ // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2335
+ // );
2336
+
2337
+ // border-style: var(
2338
+ // --_ctm-mob-dn-dn-se-br-se,
2339
+ // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2340
+ // );
2341
+
2342
+ // border-width: var(
2343
+ // --_ctm-mob-dn-dn-se-br-wh,
2344
+ // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2345
+ // );
2346
+
2347
+ // border-radius: var(
2348
+ // --_ctm-mob-dn-dn-se-br-rs,
2349
+ // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2350
+ // );
2351
+
2352
+ // box-shadow: var(
2353
+ // --_show-shadow,
2354
+ // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2355
+ // var(
2356
+ // --_ctm-mob-dn-dn-se-sw-br,
2357
+ // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2358
+ // )
2359
+ // var(
2360
+ // --_ctm-mob-dn-dn-se-sw-sd,
2361
+ // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2362
+ // )
2363
+ // var(
2364
+ // --_ctm-mob-dn-dn-se-sw-cr,
2365
+ // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2366
+ // )
2367
+ // );
2368
+ // }
2369
+ .popover-container {
2370
+ position: relative;
2371
+ display: inline-block;
2372
+ .popover-trigger {
2373
+ cursor: pointer;
2374
+ font-weight: 500;
2375
+ color: #2b6cb0;
1778
2376
  }
1779
2377
 
1780
- .icon--hover {
2378
+ .popover-box {
1781
2379
  // position: absolute;
1782
- // inset: 0;
1783
- // opacity: 0;
1784
- display: none;
1785
- transition: opacity 0.2s ease;
2380
+ // top: calc(100% + 10px);
2381
+ // right: 0;
2382
+ // background: white;
2383
+ // padding: 12px 16px;
2384
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2385
+ // border-radius: 8px;
2386
+ // min-width: 150px;
2387
+ // z-index: 10;
2388
+ position: absolute;
2389
+ // border: 1px solid #ccc;
2390
+ // min-width: 150px;
2391
+ max-width: 200px;
2392
+ z-index: 1000;
2393
+ // left: 40px;
2394
+ // top: 0;
2395
+ // right: -125%;
2396
+ padding: 8px;
2397
+ border-radius: 4px;
1786
2398
  }
1787
2399
 
1788
- &:hover .icon--hover {
1789
- // opacity: 1;
2400
+ .popover-box {
1790
2401
  display: flex;
2402
+ flex-direction: column;
2403
+
2404
+ // width: 100%;
2405
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2406
+ background-color: var(
2407
+ --_ctm-mob-dn-pr-se-bd-cr,
2408
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2409
+ );
2410
+
2411
+ border-color: var(
2412
+ --_ctm-mob-dn-pr-se-br-cr,
2413
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2414
+ );
2415
+
2416
+ border-style: var(
2417
+ --_ctm-mob-dn-pr-se-br-se,
2418
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2419
+ );
2420
+
2421
+ border-width: var(
2422
+ --_ctm-mob-dn-pr-se-br-wh,
2423
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2424
+ );
2425
+
2426
+ border-radius: var(
2427
+ --_ctm-mob-dn-pr-se-br-rs,
2428
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2429
+ );
2430
+
2431
+ box-shadow: var(
2432
+ --_show-shadow,
2433
+ var(
2434
+ --_ctm-mob-dn-pr-se-sw-ae,
2435
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2436
+ )
2437
+ var(
2438
+ --_ctm-mob-dn-pr-se-sw-br,
2439
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2440
+ )
2441
+ var(
2442
+ --_ctm-mob-dn-pr-se-sw-sd,
2443
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2444
+ )
2445
+ var(
2446
+ --_ctm-mob-dn-pr-se-sw-cr,
2447
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2448
+ )
2449
+ );
2450
+
2451
+ padding: var(
2452
+ --_ctm-mob-dn-pr-se-pg,
2453
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2454
+ );
1791
2455
  }
1792
2456
 
1793
- &:hover .icon--default {
1794
- // opacity: 0;
1795
- display: none;
2457
+ .popover-box strong {
2458
+ display: block;
2459
+ margin-bottom: 6px;
2460
+ font-weight: bold;
1796
2461
  }
1797
- }
1798
- }
1799
-
1800
- // .dropdown-menu {
1801
- // display: block;
1802
- // position: absolute;
1803
- // top: 110%;
1804
-
1805
- // &[data-position="left"] {
1806
- // left: 0;
1807
- // }
1808
- // &[data-position="right"] {
1809
- // right: 0;
1810
- // }
1811
- // &[data-position="center"] {
1812
- // left: 50%;
1813
- // transform: translateX(-50%);
1814
- // }
1815
- // // top: 78%;
1816
- // // left: 100%;
1817
- // // margin-left: 8px;
1818
-
1819
- // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1820
- // min-width: 200px;
1821
- // z-index: 100;
1822
- // display: flex;
1823
- // flex-direction: column;
1824
- // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
1825
-
1826
- // background-color: var(
1827
- // --_ctm-mob-dn-dn-se-bd-cr,
1828
- // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1829
- // );
1830
-
1831
- // border-color: var(
1832
- // --_ctm-mob-dn-dn-se-br-cr,
1833
- // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1834
- // );
1835
-
1836
- // border-style: var(
1837
- // --_ctm-mob-dn-dn-se-br-se,
1838
- // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1839
- // );
1840
-
1841
- // border-width: var(
1842
- // --_ctm-mob-dn-dn-se-br-wh,
1843
- // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1844
- // );
1845
-
1846
- // border-radius: var(
1847
- // --_ctm-mob-dn-dn-se-br-rs,
1848
- // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1849
- // );
1850
-
1851
- // box-shadow: var(
1852
- // --_show-shadow,
1853
- // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
1854
- // var(
1855
- // --_ctm-mob-dn-dn-se-sw-br,
1856
- // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1857
- // )
1858
- // var(
1859
- // --_ctm-mob-dn-dn-se-sw-sd,
1860
- // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1861
- // )
1862
- // var(
1863
- // --_ctm-mob-dn-dn-se-sw-cr,
1864
- // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1865
- // )
1866
- // );
1867
- // }
1868
- .popover-container {
1869
- position: relative;
1870
- display: inline-block;
1871
-
1872
- .popover-trigger {
1873
- cursor: pointer;
1874
- font-weight: 500;
1875
- color: #2b6cb0;
1876
- }
1877
-
1878
- .popover-box {
1879
- // position: absolute;
1880
- // top: calc(100% + 10px);
1881
- // right: 0;
1882
- // background: white;
1883
- // padding: 12px 16px;
1884
- // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1885
- // border-radius: 8px;
1886
- // min-width: 150px;
1887
- // z-index: 10;
1888
- position: absolute;
1889
- // border: 1px solid #ccc;
1890
- // min-width: 150px;
1891
- max-width: 200px;
1892
- z-index: 1000;
1893
- // left: 40px;
1894
- // top: 0;
1895
- // right: -125%;
1896
- padding: 8px;
1897
- border-radius: 4px;
1898
- }
1899
-
1900
- .popover-box {
1901
- display: flex;
1902
- flex-direction: column;
1903
2462
 
1904
- // width: 100%;
1905
- gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
1906
- background-color: var(--_ctm-mob-dn-pr-se-bd-cr,
1907
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)));
1908
-
1909
- border-color: var(--_ctm-mob-dn-pr-se-br-cr,
1910
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
1911
-
1912
- border-style: var(--_ctm-mob-dn-pr-se-br-se,
1913
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)));
1914
-
1915
- border-width: var(--_ctm-mob-dn-pr-se-br-wh,
1916
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)));
1917
-
1918
- border-radius: var(--_ctm-mob-dn-pr-se-br-rs,
1919
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)));
1920
-
1921
- box-shadow: var(--_show-shadow,
1922
- var(--_ctm-mob-dn-pr-se-sw-ae,
1923
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))) var(--_ctm-mob-dn-pr-se-sw-br,
1924
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))) var(--_ctm-mob-dn-pr-se-sw-sd,
1925
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))) var(--_ctm-mob-dn-pr-se-sw-cr,
1926
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))));
2463
+ .popover-arrow {
2464
+ position: absolute;
2465
+ top: 8px;
2466
+ left: -5px;
2467
+ width: 12px;
2468
+ min-height: 12px;
2469
+
2470
+ // background-color: var(
2471
+ // --_ctm-mob-dn-pr-se-bd-cr,
2472
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2473
+ // );
2474
+ transform: rotate(-45deg);
2475
+ box-shadow: -1px -1px 0px
2476
+ var(
2477
+ --_ctm-mob-dn-pr-se-br-cr,
2478
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2479
+ );
2480
+ }
1927
2481
 
1928
- padding: var(--_ctm-mob-dn-pr-se-pg,
1929
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
2482
+ .popover_item {
2483
+ // padding-inline: var(--_sf-cd-gp);
2484
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2485
+ font-family: var(
2486
+ --_ctm-mob-dn-pr-se-ft-fy,
2487
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2488
+ );
2489
+ text-transform: var(
2490
+ --_ctm-mob-dn-pr-se-tt-tm,
2491
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
2492
+ );
2493
+ word-wrap: var(
2494
+ --_ctm-mob-dn-pr-se-wd-wp,
2495
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
2496
+ );
2497
+ word-break: var(
2498
+ --_ctm-mob-dn-pr-se-wd-bk,
2499
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
2500
+ );
2501
+ font-size: var(
2502
+ --_ctm-mob-dn-pr-se-ft-se,
2503
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2504
+ );
2505
+ font-weight: var(
2506
+ --_ctm-mob-dn-pr-se-ft-wt,
2507
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2508
+ );
2509
+ font-style: var(
2510
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2511
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2512
+ );
2513
+ text-align: var(
2514
+ --_ctm-mob-dn-pr-se-tt-an,
2515
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2516
+ );
2517
+ letter-spacing: var(
2518
+ --_ctm-mob-dn-pr-se-lr-sg,
2519
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2520
+ );
2521
+ line-height: var(
2522
+ --_ctm-mob-dn-pr-se-le-ht,
2523
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2524
+ );
2525
+ text-decoration: var(
2526
+ --_ctm-mob-dn-pr-se-ue,
2527
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2528
+ );
2529
+ // margin-left: 10px;
2530
+ }
1930
2531
  }
1931
2532
 
1932
- .popover-box strong {
1933
- display: block;
1934
- margin-bottom: 6px;
1935
- font-weight: bold;
1936
- }
2533
+ // Horizontal side of the popover, from design > Popover Style > Popover Position.
2534
+ // Only the side changes — the vertical placement below is left to the display
2535
+ // style, so a vertically stacked list still opens beside its trigger and a
2536
+ // horizontal one still opens underneath it. "Right" is the original behaviour and
2537
+ // stays the default, so elements saved before this control are unaffected.
2538
+ &[data-display-style="Stack Vertically"] {
2539
+ .popover-box {
2540
+ left: 100%;
2541
+ transform: translate(0%);
2542
+ margin-left: 6px;
2543
+ top: 0;
2544
+ }
1937
2545
 
1938
- .popover-arrow {
1939
- position: absolute;
1940
- top: 8px;
1941
- left: -5px;
1942
- width: 12px;
1943
- min-height: 12px;
1944
-
1945
- // background-color: var(
1946
- // --_ctm-mob-dn-pr-se-bd-cr,
1947
- // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1948
- // );
1949
- transform: rotate(-45deg);
1950
- box-shadow: -1px -1px 0px var(--_ctm-mob-dn-pr-se-br-cr,
1951
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2546
+ // Beside the trigger, on its left instead of its right.
2547
+ .popover-container[data-popover-position="Left"] .popover-box {
2548
+ left: auto;
2549
+ right: 100%;
2550
+ margin-left: 0;
2551
+ margin-right: 6px;
2552
+ }
1952
2553
  }
2554
+ &[data-display-style="Stack Horizontally"] {
2555
+ .popover-box {
2556
+ right: 0;
2557
+ margin-top: 6px;
2558
+ }
1953
2559
 
1954
- .popover_item {
1955
- // padding-inline: var(--_sf-cd-gp);
1956
- color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
1957
- font-family: var(--_ctm-mob-dn-pr-se-ft-fy,
1958
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)));
1959
- text-transform: var(--_ctm-mob-dn-pr-se-tt-tm,
1960
- var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)));
1961
- word-wrap: var(--_ctm-mob-dn-pr-se-wd-wp,
1962
- var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)));
1963
- word-break: var(--_ctm-mob-dn-pr-se-wd-bk,
1964
- var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)));
1965
- font-size: var(--_ctm-mob-dn-pr-se-ft-se,
1966
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)));
1967
- font-weight: var(--_ctm-mob-dn-pr-se-ft-wt,
1968
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)));
1969
- font-style: var(--_ctm-mob-dn-pr-se-ft-se-ic,
1970
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)));
1971
- text-align: var(--_ctm-mob-dn-pr-se-tt-an,
1972
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)));
1973
- letter-spacing: var(--_ctm-mob-dn-pr-se-lr-sg,
1974
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)));
1975
- line-height: var(--_ctm-mob-dn-pr-se-le-ht,
1976
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)));
1977
- text-decoration: var(--_ctm-mob-dn-pr-se-ue,
1978
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)));
1979
- // margin-left: 10px;
2560
+ // Under the trigger, aligned to its left edge instead of its right.
2561
+ .popover-container[data-popover-position="Left"] .popover-box {
2562
+ right: auto;
2563
+ left: 0;
2564
+ }
1980
2565
  }
1981
- }
1982
2566
 
1983
- // Horizontal side of the popover, from design > Popover Style > Popover Position.
1984
- // Only the side changes the vertical placement below is left to the display
1985
- // style, so a vertically stacked list still opens beside its trigger and a
1986
- // horizontal one still opens underneath it. "Right" is the original behaviour and
1987
- // stays the default, so elements saved before this control are unaffected.
1988
- &[data-display-style="Stack Vertically"] {
1989
- .popover-box {
1990
- left: 100%;
1991
- transform: translate(0%);
1992
- margin-left: 6px;
1993
- top: 0;
2567
+ // "Show Border" switch for the popover. The border is painted from CSS variables
2568
+ // above, so the switch arrives as a data attribute and the width is zeroed here.
2569
+ // Placed after the .popover-box rules and one attribute deeper, so it wins.
2570
+ .popover-container[data-popover-border="false"] .popover-box {
2571
+ border-width: 0;
2572
+ border-style: none;
1994
2573
  }
1995
2574
 
1996
- // Beside the trigger, on its left instead of its right.
1997
- .popover-container[data-popover-position="Left"] .popover-box {
2575
+ // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
2576
+ // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
2577
+ .popover-container[data-popover-position="Left"] .popover-arrow {
1998
2578
  left: auto;
1999
- right: 100%;
2000
- margin-left: 0;
2001
- margin-right: 6px;
2002
- }
2003
- }
2004
-
2005
- &[data-display-style="Stack Horizontally"] {
2006
- .popover-box {
2007
- right: 0;
2008
- margin-top: 6px;
2579
+ right: -5px;
2580
+ box-shadow: 1px 1px 0px
2581
+ var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2009
2582
  }
2010
-
2011
- // Under the trigger, aligned to its left edge instead of its right.
2012
- .popover-container[data-popover-position="Left"] .popover-box {
2013
- right: auto;
2014
- left: 0;
2015
- }
2016
- }
2017
-
2018
- // "Show Border" switch for the popover. The border is painted from CSS variables
2019
- // above, so the switch arrives as a data attribute and the width is zeroed here.
2020
- // Placed after the .popover-box rules and one attribute deeper, so it wins.
2021
- .popover-container[data-popover-border="false"] .popover-box {
2022
- border-width: 0;
2023
- border-style: none;
2024
- }
2025
-
2026
- // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
2027
- // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
2028
- .popover-container[data-popover-position="Left"] .popover-arrow {
2029
- left: auto;
2030
- right: -5px;
2031
- 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)));
2032
2583
  }
2033
2584
  }
2034
2585
  }
2035
- }