@sc-360-v2/storefront-cms-library 0.4.95 → 0.4.96

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 (3) hide show
  1. package/dist/login.scss +1 -0
  2. package/dist/product-actions.scss +1704 -1651
  3. package/package.json +1 -1
package/dist/product-actions.scss CHANGED
@@ -86,1964 +86,2017 @@
86
86
  // white-space: nowrap;
87
87
  // }
88
88
 
89
- .btn__with__text[data-btn-name="addToCart"] {
90
- justify-content: center;
91
- &[data-show-shadow="false"] {
92
- --_show-shadow: none;
93
- }
94
- &[data-icon-position="left"] {
95
- --_sf-fd-bn: row;
96
- }
97
- &[data-icon-position="right"] {
98
- --_sf-fd-bn: row-reverse;
99
- }
100
- &[data-icon-position="center"] {
101
- --_sf-fd-bn: row;
102
- }
89
+ .btn__with__text {
90
+ &[data-btn-name="addToCart"] {
91
+ justify-content: center;
92
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr))};
93
+ &[data-show-shadow="false"] {
94
+ --_show-shadow: none;
95
+ }
96
+ &[data-icon-position="left"] {
97
+ --_sf-fd-bn: row;
98
+ }
99
+ &[data-icon-position="right"] {
100
+ --_sf-fd-bn: row-reverse;
101
+ }
102
+ &[data-icon-position="center"] {
103
+ --_sf-fd-bn: row;
104
+ }
103
105
 
104
- &:hover {
105
- --_sf-hr-bd-cr: var(
106
- --_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
107
- var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
108
- );
109
- --_sf-hr-br-cr: var(
110
- --_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
- );
113
- --_sf-hr-br-se: var(
114
- --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
115
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
116
- );
117
- --_sf-hr-br-wh: var(
118
- --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
119
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
120
- );
121
- --_sf-hr-br-rs: var(
122
- --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
123
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
124
- );
125
- --_sf-hr-at: var(
126
- --_ctm-mob-dn-ad-to-ct-hr-se-at,
127
- var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
128
- );
129
- --_sf-hr-gp: var(
130
- --_ctm-mob-dn-ad-to-ct-hr-se-gp,
131
- var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
132
- );
106
+ &:hover {
107
+ --_sf-hr-bd-cr: var(
108
+ --_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
+ );
111
+ --_sf-hr-br-cr: var(
112
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
113
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr))
114
+ );
115
+ --_sf-hr-br-se: var(
116
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
117
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
118
+ );
119
+ --_sf-hr-br-wh: var(
120
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
121
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
122
+ );
123
+ --_sf-hr-br-rs: var(
124
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
125
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
126
+ );
127
+ --_sf-hr-at: var(
128
+ --_ctm-mob-dn-ad-to-ct-hr-se-at,
129
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
130
+ );
131
+ --_sf-hr-gp: var(
132
+ --_ctm-mob-dn-ad-to-ct-hr-se-gp,
133
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
134
+ );
133
135
 
134
- // for shadow
135
- --_sf-hr-sw-ae: var(
136
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
137
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae))
138
- );
139
- --_sf-hr-sw-br: var(
140
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
141
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br))
142
- );
143
- --_sf-hr-sw-hr: var(
144
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
145
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr))
146
- );
147
- --_sf-hr-sw-cr: var(
148
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
149
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr))
150
- );
136
+ // for shadow
137
+ --_sf-hr-sw-ae: var(
138
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
139
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae))
140
+ );
141
+ --_sf-hr-sw-br: var(
142
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
143
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br))
144
+ );
145
+ --_sf-hr-sw-hr: var(
146
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
147
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr))
148
+ );
149
+ --_sf-hr-sw-cr: var(
150
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
151
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr))
152
+ );
151
153
 
152
- // for font
154
+ // for font
153
155
 
154
- --_sf-hr-cr: var(
155
- --_ctm-mob-dn-ad-to-ct-hr-se-cr,
156
- var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr))
157
- );
158
- --_sf-hr-ft-fy: var(
159
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
160
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy))
161
- );
162
- --_sf-hr-ft-se: var(
163
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
164
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se))
165
- );
166
- --_sf-hr-ft-wt: var(
167
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
168
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt))
169
- );
170
- --_sf-hr-ft-se-ic: var(
171
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
172
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic))
173
- );
174
- --_sf-hr-tt-an: var(
175
- --_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
176
- var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an))
177
- );
178
- --_sf-hr-lr-sg: var(
179
- --_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
180
- var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg))
181
- );
182
- --_sf-hr-le-ht: var(
183
- --_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
184
- var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht))
185
- );
156
+ --_sf-hr-cr: var(
157
+ --_ctm-mob-dn-ad-to-ct-hr-se-cr,
158
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr))
159
+ );
160
+ --_sf-hr-ft-fy: var(
161
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
162
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy))
163
+ );
164
+ --_sf-hr-ft-se: var(
165
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
166
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se))
167
+ );
168
+ --_sf-hr-ft-wt: var(
169
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
170
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt))
171
+ );
172
+ --_sf-hr-ft-se-ic: var(
173
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
174
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic))
175
+ );
176
+ --_sf-hr-tt-an: var(
177
+ --_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
178
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an))
179
+ );
180
+ --_sf-hr-lr-sg: var(
181
+ --_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
182
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg))
183
+ );
184
+ --_sf-hr-le-ht: var(
185
+ --_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
186
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht))
187
+ );
186
188
 
187
- --_sf-hr-in-se: var(
188
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
189
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
190
- );
191
- --_sf-hr-in-se: var(
192
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
193
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
194
- );
195
- --_sf-hr-in-c1: var(
196
- --_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
197
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
198
- );
199
- --_sf-hr-ue: var(
200
- --_ctm-mob-dn-ad-to-ct-hr-se-ue,
201
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
202
- );
189
+ --_sf-hr-in-se: var(
190
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
191
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
192
+ );
193
+ --_sf-hr-in-se: var(
194
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
195
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
196
+ );
197
+ --_sf-hr-in-c1: var(
198
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
199
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
200
+ );
201
+ --_sf-hr-ue: var(
202
+ --_ctm-mob-dn-ad-to-ct-hr-se-ue,
203
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
204
+ );
203
205
 
204
- // for pading and width
205
- --_sf-hr-pg: var(
206
- --_ctm-mob-dn-ad-to-ct-hr-pg,
207
- var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
208
- );
209
- --_sf-hr-wh: var(
210
- --_ctm-mob-dn-ad-to-ct-hr-wh,
211
- var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
212
- );
206
+ // for pading and width
207
+ --_sf-hr-pg: var(
208
+ --_ctm-mob-dn-ad-to-ct-hr-pg,
209
+ var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
210
+ );
211
+ --_sf-hr-wh: var(
212
+ --_ctm-mob-dn-ad-to-ct-hr-wh,
213
+ var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
214
+ );
213
215
 
214
- &[data-hover-show-shadow="false"] {
215
- --_hover-show-shadow: none;
216
- }
217
- &[data-hover-show-icon="false"] {
218
- --_hover-show-icon: none;
216
+ &[data-hover-show-shadow="false"] {
217
+ --_hover-show-shadow: none;
218
+ }
219
+ &[data-hover-show-icon="false"] {
220
+ --_hover-show-icon: none;
221
+ }
219
222
  }
220
- }
221
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
223
+ background-color: var(
224
+ --_sf-hr-bd-cr,
225
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr)
226
+ );
222
227
 
223
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
224
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
225
- display: flex;
226
- flex-direction: var(--_sf-fd-bn);
227
- align-items: center;
228
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
229
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
230
+ display: flex;
231
+ flex-direction: var(--_sf-fd-bn);
232
+ align-items: center;
228
233
 
229
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-at));
230
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-gp));
234
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-at));
235
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-gp));
231
236
 
232
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
237
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
233
238
 
234
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae))
235
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br))
236
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd))
237
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
239
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae))
240
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br))
241
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd))
242
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
238
243
 
239
- &[data-show-border="true"] {
240
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
244
+ &[data-show-border="true"] {
245
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
241
246
 
242
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-se));
247
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-se));
243
248
 
244
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-wh));
245
- }
249
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-wh));
250
+ }
246
251
 
247
- .txt {
248
- display: flex;
252
+ .txt {
253
+ display: flex;
249
254
 
250
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr));
255
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr));
251
256
 
252
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-fy));
257
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-fy));
253
258
 
254
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se));
259
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se));
255
260
 
256
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
261
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
257
262
 
258
- font-style: var(
259
- --_sf-hr-ft-se-ic,
260
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
261
- );
263
+ font-style: var(
264
+ --_sf-hr-ft-se-ic,
265
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
266
+ );
262
267
 
263
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
268
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
264
269
 
265
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg));
270
+ letter-spacing: var(
271
+ --_sf-hr-lr-sg,
272
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg)
273
+ );
266
274
 
267
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
275
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
268
276
 
269
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
270
- }
277
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
278
+ }
271
279
 
272
- .icon {
273
- display: var(--_hover-show-icon, var(--_show-icon, flex));
274
- svg {
275
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
276
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
280
+ .icon {
281
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
282
+ svg {
283
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
284
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
277
285
 
278
- path {
279
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
286
+ path {
287
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
288
+ }
280
289
  }
281
290
  }
282
- }
283
- [data-element-style="Text"] {
284
- display: inline-block;
285
- width: 100%;
286
- }
291
+ [data-element-style="Text"] {
292
+ display: inline-block;
293
+ width: 100%;
294
+ }
287
295
 
288
- .icon--hover {
289
- // position: absolute;
290
- // inset: 0;
291
- // opacity: 0;
292
- display: none;
293
- transition: opacity 0.2s ease;
294
- }
296
+ .icon--hover {
297
+ // position: absolute;
298
+ // inset: 0;
299
+ // opacity: 0;
300
+ display: none;
301
+ transition: opacity 0.2s ease;
302
+ }
295
303
 
296
- &:hover .icon--hover {
297
- // opacity: 1;
298
- display: flex;
299
- }
304
+ &:hover .icon--hover {
305
+ // opacity: 1;
306
+ display: flex;
307
+ }
300
308
 
301
- &:hover .icon--default {
302
- // opacity: 0;
303
- display: none;
309
+ &:hover .icon--default {
310
+ // opacity: 0;
311
+ display: none;
312
+ }
304
313
  }
305
- }
306
314
 
307
- .btn__with__text[data-btn-name="buyNow"] {
308
- &[data-show-shadow="false"] {
309
- --_show-shadow: none;
310
- }
311
- &[data-icon-position="left"] {
312
- --_sf-fd-bn: row;
313
- }
314
- &[data-icon-position="right"] {
315
- --_sf-fd-bn: row-reverse;
316
- }
317
- &[data-icon-position="center"] {
318
- --_sf-fd-bn: row;
319
- }
315
+ &[data-btn-name="buyNow"] {
316
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr))};
317
+ &[data-show-shadow="false"] {
318
+ --_show-shadow: none;
319
+ }
320
+ &[data-icon-position="left"] {
321
+ --_sf-fd-bn: row;
322
+ }
323
+ &[data-icon-position="right"] {
324
+ --_sf-fd-bn: row-reverse;
325
+ }
326
+ &[data-icon-position="center"] {
327
+ --_sf-fd-bn: row;
328
+ }
320
329
 
321
- &:hover {
322
- --_sf-hr-bd-cr: var(
323
- --_ctm-mob-dn-by-nw-hr-se-bd-cr,
324
- var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
325
- );
326
- --_sf-hr-br-cr: var(
327
- --_ctm-mob-dn-by-nw-hr-se-br-cr,
328
- var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
329
- );
330
- --_sf-hr-br-se: var(
331
- --_ctm-mob-dn-by-nw-hr-se-br-se,
332
- var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
333
- );
334
- --_sf-hr-br-wh: var(
335
- --_ctm-mob-dn-by-nw-hr-se-br-wh,
336
- var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
337
- );
338
- --_sf-hr-br-rs: var(
339
- --_ctm-mob-dn-by-nw-hr-se-br-rs,
340
- var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
341
- );
330
+ &:hover {
331
+ --_sf-hr-bd-cr: var(
332
+ --_ctm-mob-dn-by-nw-hr-se-bd-cr,
333
+ var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
334
+ );
335
+ --_sf-hr-br-cr: var(
336
+ --_ctm-mob-dn-by-nw-hr-se-br-cr,
337
+ var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
338
+ );
339
+ --_sf-hr-br-se: var(
340
+ --_ctm-mob-dn-by-nw-hr-se-br-se,
341
+ var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
342
+ );
343
+ --_sf-hr-br-wh: var(
344
+ --_ctm-mob-dn-by-nw-hr-se-br-wh,
345
+ var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
346
+ );
347
+ --_sf-hr-br-rs: var(
348
+ --_ctm-mob-dn-by-nw-hr-se-br-rs,
349
+ var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
350
+ );
342
351
 
343
- --_sf-hr-at: var(
344
- --_ctm-mob-dn-by-nw-hr-se-at,
345
- var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
346
- );
347
- --_sf-hr-gp: var(
348
- --_ctm-mob-dn-by-nw-hr-se-gp,
349
- var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
350
- );
352
+ --_sf-hr-at: var(
353
+ --_ctm-mob-dn-by-nw-hr-se-at,
354
+ var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
355
+ );
356
+ --_sf-hr-gp: var(
357
+ --_ctm-mob-dn-by-nw-hr-se-gp,
358
+ var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
359
+ );
351
360
 
352
- // for shadow
353
- --_sf-hr-sw-ae: var(
354
- --_ctm-mob-dn-by-nw-hr-se-sw-ae,
355
- var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae))
356
- );
357
- --_sf-hr-sw-br: var(
358
- --_ctm-mob-dn-by-nw-hr-se-sw-br,
359
- var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br))
360
- );
361
- --_sf-hr-sw-hr: var(
362
- --_ctm-mob-dn-by-nw-hr-se-sw-hr,
363
- var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr))
364
- );
365
- --_sf-hr-sw-cr: var(
366
- --_ctm-mob-dn-by-nw-hr-se-sw-cr,
367
- var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr))
368
- );
361
+ // for shadow
362
+ --_sf-hr-sw-ae: var(
363
+ --_ctm-mob-dn-by-nw-hr-se-sw-ae,
364
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae))
365
+ );
366
+ --_sf-hr-sw-br: var(
367
+ --_ctm-mob-dn-by-nw-hr-se-sw-br,
368
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br))
369
+ );
370
+ --_sf-hr-sw-hr: var(
371
+ --_ctm-mob-dn-by-nw-hr-se-sw-hr,
372
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr))
373
+ );
374
+ --_sf-hr-sw-cr: var(
375
+ --_ctm-mob-dn-by-nw-hr-se-sw-cr,
376
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr))
377
+ );
369
378
 
370
- // for font
379
+ // for font
371
380
 
372
- --_sf-hr-cr: var(
373
- --_ctm-mob-dn-by-nw-hr-se-cr,
374
- var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr))
375
- );
376
- --_sf-hr-ft-fy: var(
377
- --_ctm-mob-dn-by-nw-hr-se-ft-fy,
378
- var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
379
- );
380
- --_sf-hr-ft-se: var(
381
- --_ctm-mob-dn-by-nw-hr-se-ft-se,
382
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))
383
- );
384
- --_sf-hr-ft-wt: var(
385
- --_ctm-mob-dn-by-nw-hr-se-ft-wt,
386
- var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt))
387
- );
388
- --_sf-hr-ft-se-ic: var(
389
- --_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
390
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic))
391
- );
392
- --_sf-hr-tt-an: var(
393
- --_ctm-mob-dn-by-nw-hr-se-tt-an,
394
- var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an))
395
- );
396
- --_sf-hr-lr-sg: var(
397
- --_ctm-mob-dn-by-nw-hr-se-lr-sg,
398
- var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg))
399
- );
400
- --_sf-hr-le-ht: var(
401
- --_ctm-mob-dn-by-nw-hr-se-le-ht,
402
- var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht))
403
- );
381
+ --_sf-hr-cr: var(
382
+ --_ctm-mob-dn-by-nw-hr-se-cr,
383
+ var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr))
384
+ );
385
+ --_sf-hr-ft-fy: var(
386
+ --_ctm-mob-dn-by-nw-hr-se-ft-fy,
387
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
388
+ );
389
+ --_sf-hr-ft-se: var(
390
+ --_ctm-mob-dn-by-nw-hr-se-ft-se,
391
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))
392
+ );
393
+ --_sf-hr-ft-wt: var(
394
+ --_ctm-mob-dn-by-nw-hr-se-ft-wt,
395
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt))
396
+ );
397
+ --_sf-hr-ft-se-ic: var(
398
+ --_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
399
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic))
400
+ );
401
+ --_sf-hr-tt-an: var(
402
+ --_ctm-mob-dn-by-nw-hr-se-tt-an,
403
+ var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an))
404
+ );
405
+ --_sf-hr-lr-sg: var(
406
+ --_ctm-mob-dn-by-nw-hr-se-lr-sg,
407
+ var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg))
408
+ );
409
+ --_sf-hr-le-ht: var(
410
+ --_ctm-mob-dn-by-nw-hr-se-le-ht,
411
+ var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht))
412
+ );
404
413
 
405
- --_sf-hr-in-se: var(
406
- --_ctm-mob-dn-by-nw-hr-se-in-se,
407
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
408
- );
409
- --_sf-hr-in-se: var(
410
- --_ctm-mob-dn-by-nw-hr-se-in-se,
411
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
412
- );
413
- --_sf-hr-in-c1: var(
414
- --_ctm-mob-dn-by-nw-hr-se-in-c1,
415
- var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
416
- );
417
- --_sf-hr-ue: var(
418
- --_ctm-mob-dn-by-nw-hr-se-ue,
419
- var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
420
- );
414
+ --_sf-hr-in-se: var(
415
+ --_ctm-mob-dn-by-nw-hr-se-in-se,
416
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
417
+ );
418
+ --_sf-hr-in-se: var(
419
+ --_ctm-mob-dn-by-nw-hr-se-in-se,
420
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
421
+ );
422
+ --_sf-hr-in-c1: var(
423
+ --_ctm-mob-dn-by-nw-hr-se-in-c1,
424
+ var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
425
+ );
426
+ --_sf-hr-ue: var(
427
+ --_ctm-mob-dn-by-nw-hr-se-ue,
428
+ var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
429
+ );
421
430
 
422
- // for pading and width
423
- --_sf-hr-pg: var(
424
- --_ctm-mob-dn-by-nw-hr-pg,
425
- var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
426
- );
427
- --_sf-hr-wh: var(
428
- --_ctm-mob-dn-by-nw-hr-wh,
429
- var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh))
430
- );
431
+ // for pading and width
432
+ --_sf-hr-pg: var(
433
+ --_ctm-mob-dn-by-nw-hr-pg,
434
+ var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
435
+ );
436
+ --_sf-hr-wh: var(
437
+ --_ctm-mob-dn-by-nw-hr-wh,
438
+ var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh))
439
+ );
431
440
 
432
- &[data-hover-show-shadow="false"] {
433
- --_hover-show-shadow: none;
434
- }
435
- &[data-hover-show-icon="false"] {
436
- --_hover-show-icon: none;
441
+ &[data-hover-show-shadow="false"] {
442
+ --_hover-show-shadow: none;
443
+ }
444
+ &[data-hover-show-icon="false"] {
445
+ --_hover-show-icon: none;
446
+ }
437
447
  }
438
- }
439
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
448
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
440
449
 
441
- display: flex;
442
- flex-direction: var(--_sf-fd-bn);
443
- align-items: center;
450
+ display: flex;
451
+ flex-direction: var(--_sf-fd-bn);
452
+ align-items: center;
444
453
 
445
- justify-content: prepareMediaVariable(--_ctm-lt-tt-an);
446
- gap: prepareMediaVariable(--_ctm-lt-gp);
454
+ justify-content: prepareMediaVariable(--_ctm-lt-tt-an);
455
+ gap: prepareMediaVariable(--_ctm-lt-gp);
447
456
 
448
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-at));
449
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-gp));
457
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-at));
458
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-gp));
450
459
 
451
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-pg));
452
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wh));
460
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-pg));
461
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wh));
453
462
 
454
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
463
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
455
464
 
456
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae))
457
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br))
458
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd))
459
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
465
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae))
466
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br))
467
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd))
468
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
460
469
 
461
- &[data-show-border="true"] {
462
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
470
+ &[data-show-border="true"] {
471
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
463
472
 
464
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-se));
473
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-se));
465
474
 
466
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-wh));
467
- }
475
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-wh));
476
+ }
468
477
 
469
- .txt {
470
- display: flex;
478
+ .txt {
479
+ display: flex;
471
480
 
472
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr));
481
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr));
473
482
 
474
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-fy));
483
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-fy));
475
484
 
476
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se));
485
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se));
477
486
 
478
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
487
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
479
488
 
480
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic));
489
+ font-style: var(
490
+ --_sf-hr-ft-se-ic,
491
+ prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic)
492
+ );
481
493
 
482
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
494
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
483
495
 
484
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-lr-sg));
496
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-lr-sg));
485
497
 
486
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-le-ht));
498
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-le-ht));
487
499
 
488
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
489
- }
500
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
501
+ }
490
502
 
491
- .icon {
492
- display: var(--_hover-show-icon, var(--_show-icon, flex));
493
- svg {
494
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
495
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
503
+ .icon {
504
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
505
+ svg {
506
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
507
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
496
508
 
497
- path {
498
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
509
+ path {
510
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
511
+ }
499
512
  }
500
513
  }
501
- }
502
- [data-element-style="Text"] {
503
- display: inline-block;
504
- width: 100%;
505
- }
514
+ [data-element-style="Text"] {
515
+ display: inline-block;
516
+ width: 100%;
517
+ }
506
518
 
507
- .icon--hover {
508
- // position: absolute;
509
- // inset: 0;
510
- // opacity: 0;
511
- display: none;
512
- transition: opacity 0.2s ease;
513
- }
519
+ .icon--hover {
520
+ // position: absolute;
521
+ // inset: 0;
522
+ // opacity: 0;
523
+ display: none;
524
+ transition: opacity 0.2s ease;
525
+ }
514
526
 
515
- &:hover .icon--hover {
516
- // opacity: 1;
517
- display: flex;
518
- }
527
+ &:hover .icon--hover {
528
+ // opacity: 1;
529
+ display: flex;
530
+ }
519
531
 
520
- &:hover .icon--default {
521
- // opacity: 0;
522
- display: none;
532
+ &:hover .icon--default {
533
+ // opacity: 0;
534
+ display: none;
535
+ }
523
536
  }
524
- }
525
537
 
526
- .btn__with__text[data-btn-name="wishlist"] {
527
- &[data-show-shadow="false"] {
528
- --_show-shadow: none;
529
- }
530
- &[data-icon-position="left"] {
531
- --_sf-fd-bn: row;
532
- }
533
- &[data-icon-position="right"] {
534
- --_sf-fd-bn: row-reverse;
535
- }
536
- &[data-icon-position="center"] {
537
- --_sf-fd-bn: row;
538
- }
538
+ &[data-btn-name="wishlist"] {
539
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr))};
540
+ &[data-show-shadow="false"] {
541
+ --_show-shadow: none;
542
+ }
543
+ &[data-icon-position="left"] {
544
+ --_sf-fd-bn: row;
545
+ }
546
+ &[data-icon-position="right"] {
547
+ --_sf-fd-bn: row-reverse;
548
+ }
549
+ &[data-icon-position="center"] {
550
+ --_sf-fd-bn: row;
551
+ }
539
552
 
540
- &:hover {
541
- --_sf-hr-bd-cr: var(
542
- --_ctm-mob-dn-wt-hr-se-bd-cr,
543
- var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
544
- );
545
- --_sf-hr-br-cr: var(
546
- --_ctm-mob-dn-wt-hr-se-br-cr,
547
- var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
548
- );
549
- --_sf-hr-br-se: var(
550
- --_ctm-mob-dn-wt-hr-se-br-se,
551
- var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
552
- );
553
- --_sf-hr-br-wh: var(
554
- --_ctm-mob-dn-wt-hr-se-br-wh,
555
- var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
556
- );
557
- --_sf-hr-br-rs: var(
558
- --_ctm-mob-dn-wt-hr-se-br-rs,
559
- var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
560
- );
553
+ &:hover {
554
+ --_sf-hr-bd-cr: var(
555
+ --_ctm-mob-dn-wt-hr-se-bd-cr,
556
+ var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
557
+ );
558
+ --_sf-hr-br-cr: var(
559
+ --_ctm-mob-dn-wt-hr-se-br-cr,
560
+ var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
561
+ );
562
+ --_sf-hr-br-se: var(
563
+ --_ctm-mob-dn-wt-hr-se-br-se,
564
+ var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
565
+ );
566
+ --_sf-hr-br-wh: var(
567
+ --_ctm-mob-dn-wt-hr-se-br-wh,
568
+ var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
569
+ );
570
+ --_sf-hr-br-rs: var(
571
+ --_ctm-mob-dn-wt-hr-se-br-rs,
572
+ var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
573
+ );
561
574
 
562
- --_sf-hr-at: var(
563
- --_ctm-mob-dn-wt-hr-se-at,
564
- var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
565
- );
566
- --_sf-hr-gp: var(
567
- --_ctm-mob-dn-wt-hr-se-gp,
568
- var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
569
- );
575
+ --_sf-hr-at: var(
576
+ --_ctm-mob-dn-wt-hr-se-at,
577
+ var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
578
+ );
579
+ --_sf-hr-gp: var(
580
+ --_ctm-mob-dn-wt-hr-se-gp,
581
+ var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
582
+ );
570
583
 
571
- // for shadow
572
- --_sf-hr-sw-ae: var(
573
- --_ctm-mob-dn-wt-hr-se-sw-ae,
574
- var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae))
575
- );
576
- --_sf-hr-sw-br: var(
577
- --_ctm-mob-dn-wt-hr-se-sw-br,
578
- var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br))
579
- );
580
- --_sf-hr-sw-hr: var(
581
- --_ctm-mob-dn-wt-hr-se-sw-hr,
582
- var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr))
583
- );
584
- --_sf-hr-sw-cr: var(
585
- --_ctm-mob-dn-wt-hr-se-sw-cr,
586
- var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr))
587
- );
584
+ // for shadow
585
+ --_sf-hr-sw-ae: var(
586
+ --_ctm-mob-dn-wt-hr-se-sw-ae,
587
+ var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae))
588
+ );
589
+ --_sf-hr-sw-br: var(
590
+ --_ctm-mob-dn-wt-hr-se-sw-br,
591
+ var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br))
592
+ );
593
+ --_sf-hr-sw-hr: var(
594
+ --_ctm-mob-dn-wt-hr-se-sw-hr,
595
+ var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr))
596
+ );
597
+ --_sf-hr-sw-cr: var(
598
+ --_ctm-mob-dn-wt-hr-se-sw-cr,
599
+ var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr))
600
+ );
588
601
 
589
- // for font
602
+ // for font
590
603
 
591
- --_sf-hr-cr: var(
592
- --_ctm-mob-dn-wt-hr-se-cr,
593
- var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr))
594
- );
595
- --_sf-hr-ft-fy: var(
596
- --_ctm-mob-dn-wt-hr-se-ft-fy,
597
- var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy))
598
- );
599
- --_sf-hr-ft-se: var(
600
- --_ctm-mob-dn-wt-hr-se-ft-se,
601
- var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se))
602
- );
603
- --_sf-hr-ft-wt: var(
604
- --_ctm-mob-dn-wt-hr-se-ft-wt,
605
- var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt))
606
- );
607
- --_sf-hr-ft-se-ic: var(
608
- --_ctm-mob-dn-wt-hr-se-ft-se-ic,
609
- var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic))
610
- );
611
- --_sf-hr-tt-an: var(
612
- --_ctm-mob-dn-wt-hr-se-tt-an,
613
- var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an))
614
- );
615
- --_sf-hr-lr-sg: var(
616
- --_ctm-mob-dn-wt-hr-se-lr-sg,
617
- var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg))
618
- );
619
- --_sf-hr-le-ht: var(
620
- --_ctm-mob-dn-wt-hr-se-le-ht,
621
- var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht))
622
- );
604
+ --_sf-hr-cr: var(
605
+ --_ctm-mob-dn-wt-hr-se-cr,
606
+ var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr))
607
+ );
608
+ --_sf-hr-ft-fy: var(
609
+ --_ctm-mob-dn-wt-hr-se-ft-fy,
610
+ var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy))
611
+ );
612
+ --_sf-hr-ft-se: var(
613
+ --_ctm-mob-dn-wt-hr-se-ft-se,
614
+ var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se))
615
+ );
616
+ --_sf-hr-ft-wt: var(
617
+ --_ctm-mob-dn-wt-hr-se-ft-wt,
618
+ var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt))
619
+ );
620
+ --_sf-hr-ft-se-ic: var(
621
+ --_ctm-mob-dn-wt-hr-se-ft-se-ic,
622
+ var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic))
623
+ );
624
+ --_sf-hr-tt-an: var(
625
+ --_ctm-mob-dn-wt-hr-se-tt-an,
626
+ var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an))
627
+ );
628
+ --_sf-hr-lr-sg: var(
629
+ --_ctm-mob-dn-wt-hr-se-lr-sg,
630
+ var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg))
631
+ );
632
+ --_sf-hr-le-ht: var(
633
+ --_ctm-mob-dn-wt-hr-se-le-ht,
634
+ var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht))
635
+ );
623
636
 
624
- --_sf-hr-in-se: var(
625
- --_ctm-mob-dn-wt-hr-se-in-se,
626
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
627
- );
628
- --_sf-hr-in-se: var(
629
- --_ctm-mob-dn-wt-hr-se-in-se,
630
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
631
- );
632
- --_sf-hr-in-c1: var(
633
- --_ctm-mob-dn-wt-hr-se-in-c1,
634
- var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
635
- );
636
- --_sf-hr-ue: var(
637
- --_ctm-mob-dn-wt-hr-se-ue,
638
- var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
639
- );
637
+ --_sf-hr-in-se: var(
638
+ --_ctm-mob-dn-wt-hr-se-in-se,
639
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
640
+ );
641
+ --_sf-hr-in-se: var(
642
+ --_ctm-mob-dn-wt-hr-se-in-se,
643
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
644
+ );
645
+ --_sf-hr-in-c1: var(
646
+ --_ctm-mob-dn-wt-hr-se-in-c1,
647
+ var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
648
+ );
649
+ --_sf-hr-ue: var(
650
+ --_ctm-mob-dn-wt-hr-se-ue,
651
+ var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
652
+ );
640
653
 
641
- // for pading and width
642
- --_sf-hr-pg: var(
643
- --_ctm-mob-dn-wt-hr-pg,
644
- var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
645
- );
646
- --_sf-hr-wh: var(
647
- --_ctm-mob-dn-wt-hr-wh,
648
- var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
649
- );
654
+ // for pading and width
655
+ --_sf-hr-pg: var(
656
+ --_ctm-mob-dn-wt-hr-pg,
657
+ var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
658
+ );
659
+ --_sf-hr-wh: var(
660
+ --_ctm-mob-dn-wt-hr-wh,
661
+ var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
662
+ );
650
663
 
651
- &[data-hover-show-shadow="false"] {
652
- --_hover-show-shadow: none;
653
- }
654
- &[data-hover-show-icon="false"] {
655
- --_hover-show-icon: none;
664
+ &[data-hover-show-shadow="false"] {
665
+ --_hover-show-shadow: none;
666
+ }
667
+ &[data-hover-show-icon="false"] {
668
+ --_hover-show-icon: none;
669
+ }
656
670
  }
657
- }
658
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
671
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
659
672
 
660
- display: flex;
661
- flex-direction: var(--_sf-fd-bn);
662
- align-items: center;
673
+ display: flex;
674
+ flex-direction: var(--_sf-fd-bn);
675
+ align-items: center;
663
676
 
664
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-wt-dt-se-at));
665
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-wt-dt-se-gp));
677
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-wt-dt-se-at));
678
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-wt-dt-se-gp));
666
679
 
667
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-wt-dt-se-pg));
668
- // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
669
- width: 100%;
670
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
680
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-wt-dt-se-pg));
681
+ // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
682
+ width: 100%;
683
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
671
684
 
672
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae))
673
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br))
674
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd))
675
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
685
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae))
686
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br))
687
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd))
688
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
676
689
 
677
- &[data-show-border="true"] {
678
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
690
+ &[data-show-border="true"] {
691
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
679
692
 
680
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-se));
693
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-se));
681
694
 
682
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-wh));
683
- }
695
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-wh));
696
+ }
684
697
 
685
- .txt {
686
- display: flex;
698
+ .txt {
699
+ display: flex;
687
700
 
688
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr));
701
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr));
689
702
 
690
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-fy));
703
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-fy));
691
704
 
692
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se));
705
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se));
693
706
 
694
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-wt));
707
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-wt));
695
708
 
696
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se-ic));
709
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se-ic));
697
710
 
698
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-an));
711
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-an));
699
712
 
700
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-wt-dt-se-lr-sg));
713
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-wt-dt-se-lr-sg));
701
714
 
702
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-wt-dt-se-le-ht));
715
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-wt-dt-se-le-ht));
703
716
 
704
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
705
- }
717
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
718
+ }
706
719
 
707
- .icon {
708
- display: var(--_hover-show-icon, var(--_show-icon, flex));
709
- svg {
710
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
711
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
720
+ .icon {
721
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
722
+ svg {
723
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
724
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
712
725
 
713
- path {
714
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
726
+ path {
727
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
728
+ }
715
729
  }
716
730
  }
717
- }
718
- [data-element-style="Text"] {
719
- display: inline-block;
720
- width: 100%;
721
- }
731
+ [data-element-style="Text"] {
732
+ display: inline-block;
733
+ width: 100%;
734
+ }
722
735
 
723
- .icon--hover {
724
- // position: absolute;
725
- // inset: 0;
726
- // opacity: 0;
727
- display: none;
728
- transition: opacity 0.2s ease;
729
- }
736
+ .icon--hover {
737
+ // position: absolute;
738
+ // inset: 0;
739
+ // opacity: 0;
740
+ display: none;
741
+ transition: opacity 0.2s ease;
742
+ }
730
743
 
731
- &:hover .icon--hover {
732
- // opacity: 1;
733
- display: flex;
734
- }
744
+ &:hover .icon--hover {
745
+ // opacity: 1;
746
+ display: flex;
747
+ }
735
748
 
736
- &:hover .icon--default {
737
- // opacity: 0;
738
- display: none;
739
- }
740
- }
741
- .btn__with__text[data-btn-name="compare"] {
742
- &[data-show-shadow="false"] {
743
- --_show-shadow: none;
744
- }
745
- &[data-icon-position="left"] {
746
- --_sf-fd-bn: row;
747
- }
748
- &[data-icon-position="right"] {
749
- --_sf-fd-bn: row-reverse;
750
- }
751
- &[data-icon-position="center"] {
752
- --_sf-fd-bn: row;
749
+ &:hover .icon--default {
750
+ // opacity: 0;
751
+ display: none;
752
+ }
753
753
  }
754
+ &[data-btn-name="compare"] {
755
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr))};
756
+ &[data-show-shadow="false"] {
757
+ --_show-shadow: none;
758
+ }
759
+ &[data-icon-position="left"] {
760
+ --_sf-fd-bn: row;
761
+ }
762
+ &[data-icon-position="right"] {
763
+ --_sf-fd-bn: row-reverse;
764
+ }
765
+ &[data-icon-position="center"] {
766
+ --_sf-fd-bn: row;
767
+ }
754
768
 
755
- &:hover {
756
- --_sf-hr-bd-cr: var(
757
- --_ctm-mob-dn-ce-hr-se-bd-cr,
758
- var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
759
- );
760
- --_sf-hr-br-cr: var(
761
- --_ctm-mob-dn-ce-hr-se-br-cr,
762
- var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
763
- );
764
- --_sf-hr-br-se: var(
765
- --_ctm-mob-dn-ce-hr-se-br-se,
766
- var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
767
- );
768
- --_sf-hr-br-wh: var(
769
- --_ctm-mob-dn-ce-hr-se-br-wh,
770
- var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
771
- );
772
- --_sf-hr-br-rs: var(
773
- --_ctm-mob-dn-ce-hr-se-br-rs,
774
- var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
775
- );
769
+ &:hover {
770
+ --_sf-hr-bd-cr: var(
771
+ --_ctm-mob-dn-ce-hr-se-bd-cr,
772
+ var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
773
+ );
774
+ --_sf-hr-br-cr: var(
775
+ --_ctm-mob-dn-ce-hr-se-br-cr,
776
+ var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
777
+ );
778
+ --_sf-hr-br-se: var(
779
+ --_ctm-mob-dn-ce-hr-se-br-se,
780
+ var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
781
+ );
782
+ --_sf-hr-br-wh: var(
783
+ --_ctm-mob-dn-ce-hr-se-br-wh,
784
+ var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
785
+ );
786
+ --_sf-hr-br-rs: var(
787
+ --_ctm-mob-dn-ce-hr-se-br-rs,
788
+ var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
789
+ );
776
790
 
777
- --_sf-hr-at: var(
778
- --_ctm-mob-dn-ce-hr-se-at,
779
- var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
780
- );
781
- --_sf-hr-gp: var(
782
- --_ctm-mob-dn-ce-hr-se-gp,
783
- var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
784
- );
791
+ --_sf-hr-at: var(
792
+ --_ctm-mob-dn-ce-hr-se-at,
793
+ var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
794
+ );
795
+ --_sf-hr-gp: var(
796
+ --_ctm-mob-dn-ce-hr-se-gp,
797
+ var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
798
+ );
785
799
 
786
- // for shadow
787
- --_sf-hr-sw-ae: var(
788
- --_ctm-mob-dn-ce-hr-se-sw-ae,
789
- var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae))
790
- );
791
- --_sf-hr-sw-br: var(
792
- --_ctm-mob-dn-ce-hr-se-sw-br,
793
- var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br))
794
- );
795
- --_sf-hr-sw-hr: var(
796
- --_ctm-mob-dn-ce-hr-se-sw-hr,
797
- var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr))
798
- );
799
- --_sf-hr-sw-cr: var(
800
- --_ctm-mob-dn-ce-hr-se-sw-cr,
801
- var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr))
802
- );
800
+ // for shadow
801
+ --_sf-hr-sw-ae: var(
802
+ --_ctm-mob-dn-ce-hr-se-sw-ae,
803
+ var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae))
804
+ );
805
+ --_sf-hr-sw-br: var(
806
+ --_ctm-mob-dn-ce-hr-se-sw-br,
807
+ var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br))
808
+ );
809
+ --_sf-hr-sw-hr: var(
810
+ --_ctm-mob-dn-ce-hr-se-sw-hr,
811
+ var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr))
812
+ );
813
+ --_sf-hr-sw-cr: var(
814
+ --_ctm-mob-dn-ce-hr-se-sw-cr,
815
+ var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr))
816
+ );
803
817
 
804
- // for font
818
+ // for font
805
819
 
806
- --_sf-hr-cr: var(
807
- --_ctm-mob-dn-ce-hr-se-cr,
808
- var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr))
809
- );
810
- --_sf-hr-ft-fy: var(
811
- --_ctm-mob-dn-ce-hr-se-ft-fy,
812
- var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy))
813
- );
814
- --_sf-hr-ft-se: var(
815
- --_ctm-mob-dn-ce-hr-se-ft-se,
816
- var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se))
817
- );
818
- --_sf-hr-ft-wt: var(
819
- --_ctm-mob-dn-ce-hr-se-ft-wt,
820
- var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt))
821
- );
822
- --_sf-hr-ft-se-ic: var(
823
- --_ctm-mob-dn-ce-hr-se-ft-se-ic,
824
- var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic))
825
- );
826
- --_sf-hr-tt-an: var(
827
- --_ctm-mob-dn-ce-hr-se-tt-an,
828
- var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an))
829
- );
830
- --_sf-hr-lr-sg: var(
831
- --_ctm-mob-dn-ce-hr-se-lr-sg,
832
- var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg))
833
- );
834
- --_sf-hr-le-ht: var(
835
- --_ctm-mob-dn-ce-hr-se-le-ht,
836
- var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht))
837
- );
820
+ --_sf-hr-cr: var(
821
+ --_ctm-mob-dn-ce-hr-se-cr,
822
+ var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr))
823
+ );
824
+ --_sf-hr-ft-fy: var(
825
+ --_ctm-mob-dn-ce-hr-se-ft-fy,
826
+ var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy))
827
+ );
828
+ --_sf-hr-ft-se: var(
829
+ --_ctm-mob-dn-ce-hr-se-ft-se,
830
+ var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se))
831
+ );
832
+ --_sf-hr-ft-wt: var(
833
+ --_ctm-mob-dn-ce-hr-se-ft-wt,
834
+ var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt))
835
+ );
836
+ --_sf-hr-ft-se-ic: var(
837
+ --_ctm-mob-dn-ce-hr-se-ft-se-ic,
838
+ var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic))
839
+ );
840
+ --_sf-hr-tt-an: var(
841
+ --_ctm-mob-dn-ce-hr-se-tt-an,
842
+ var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an))
843
+ );
844
+ --_sf-hr-lr-sg: var(
845
+ --_ctm-mob-dn-ce-hr-se-lr-sg,
846
+ var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg))
847
+ );
848
+ --_sf-hr-le-ht: var(
849
+ --_ctm-mob-dn-ce-hr-se-le-ht,
850
+ var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht))
851
+ );
838
852
 
839
- --_sf-hr-in-se: var(
840
- --_ctm-mob-dn-ce-hr-se-in-se,
841
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
842
- );
843
- --_sf-hr-in-se: var(
844
- --_ctm-mob-dn-ce-hr-se-in-se,
845
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
846
- );
847
- --_sf-hr-in-c1: var(
848
- --_ctm-mob-dn-ce-hr-se-in-c1,
849
- var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
850
- );
851
- --_sf-hr-ue: var(
852
- --_ctm-mob-dn-ce-hr-se-ue,
853
- var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
854
- );
853
+ --_sf-hr-in-se: var(
854
+ --_ctm-mob-dn-ce-hr-se-in-se,
855
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
856
+ );
857
+ --_sf-hr-in-se: var(
858
+ --_ctm-mob-dn-ce-hr-se-in-se,
859
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
860
+ );
861
+ --_sf-hr-in-c1: var(
862
+ --_ctm-mob-dn-ce-hr-se-in-c1,
863
+ var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
864
+ );
865
+ --_sf-hr-ue: var(
866
+ --_ctm-mob-dn-ce-hr-se-ue,
867
+ var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
868
+ );
855
869
 
856
- // for pading and width
857
- --_sf-hr-pg: var(
858
- --_ctm-mob-dn-ce-hr-pg,
859
- var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
860
- );
861
- --_sf-hr-wh: var(
862
- --_ctm-mob-dn-ce-hr-wh,
863
- var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh))
864
- );
870
+ // for pading and width
871
+ --_sf-hr-pg: var(
872
+ --_ctm-mob-dn-ce-hr-pg,
873
+ var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
874
+ );
875
+ --_sf-hr-wh: var(
876
+ --_ctm-mob-dn-ce-hr-wh,
877
+ var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh))
878
+ );
865
879
 
866
- &[data-hover-show-shadow="false"] {
867
- --_hover-show-shadow: none;
868
- }
869
- &[data-hover-show-icon="false"] {
870
- --_hover-show-icon: none;
880
+ &[data-hover-show-shadow="false"] {
881
+ --_hover-show-shadow: none;
882
+ }
883
+ &[data-hover-show-icon="false"] {
884
+ --_hover-show-icon: none;
885
+ }
871
886
  }
872
- }
873
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
887
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
874
888
 
875
- display: flex;
876
- flex-direction: var(--_sf-fd-bn);
877
- align-items: center;
889
+ display: flex;
890
+ flex-direction: var(--_sf-fd-bn);
891
+ align-items: center;
878
892
 
879
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ce-dt-se-at));
880
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ce-dt-se-gp));
893
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ce-dt-se-at));
894
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ce-dt-se-gp));
881
895
 
882
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ce-dt-se-pg));
883
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-wh));
896
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ce-dt-se-pg));
897
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-wh));
884
898
 
885
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
899
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
886
900
 
887
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae))
888
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br))
889
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd))
890
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
901
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae))
902
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br))
903
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd))
904
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
891
905
 
892
- &[data-show-border="true"] {
893
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
906
+ &[data-show-border="true"] {
907
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
894
908
 
895
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-se));
909
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-se));
896
910
 
897
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-wh));
898
- }
911
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-wh));
912
+ }
899
913
 
900
- .txt {
901
- display: flex;
914
+ .txt {
915
+ display: flex;
902
916
 
903
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr));
917
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr));
904
918
 
905
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-fy));
919
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-fy));
906
920
 
907
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se));
921
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se));
908
922
 
909
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-wt));
923
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-wt));
910
924
 
911
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se-ic));
925
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se-ic));
912
926
 
913
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-an));
927
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-an));
914
928
 
915
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ce-dt-se-lr-sg));
929
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ce-dt-se-lr-sg));
916
930
 
917
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ce-dt-se-le-ht));
931
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ce-dt-se-le-ht));
918
932
 
919
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
920
- }
933
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
934
+ }
921
935
 
922
- .icon {
923
- display: var(--_hover-show-icon, var(--_show-icon, flex));
924
- svg {
925
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
926
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
936
+ .icon {
937
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
938
+ svg {
939
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
940
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
927
941
 
928
- path {
929
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
942
+ path {
943
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
944
+ }
930
945
  }
931
946
  }
932
- }
933
- [data-element-style="Text"] {
934
- display: inline-block;
935
- width: 100%;
936
- }
947
+ [data-element-style="Text"] {
948
+ display: inline-block;
949
+ width: 100%;
950
+ }
937
951
 
938
- .icon--hover {
939
- // position: absolute;
940
- // inset: 0;
941
- // opacity: 0;
942
- display: none;
943
- transition: opacity 0.2s ease;
944
- }
952
+ .icon--hover {
953
+ // position: absolute;
954
+ // inset: 0;
955
+ // opacity: 0;
956
+ display: none;
957
+ transition: opacity 0.2s ease;
958
+ }
945
959
 
946
- &:hover .icon--hover {
947
- // opacity: 1;
948
- display: flex;
949
- }
960
+ &:hover .icon--hover {
961
+ // opacity: 1;
962
+ display: flex;
963
+ }
950
964
 
951
- &:hover .icon--default {
952
- // opacity: 0;
953
- display: none;
954
- }
955
- }
956
- .btn__with__text[data-btn-name="addToQuote"] {
957
- &[data-show-shadow="false"] {
958
- --_show-shadow: none;
959
- }
960
- &[data-icon-position="left"] {
961
- --_sf-fd-bn: row;
962
- }
963
- &[data-icon-position="right"] {
964
- --_sf-fd-bn: row-reverse;
965
- }
966
- &[data-icon-position="center"] {
967
- --_sf-fd-bn: row;
965
+ &:hover .icon--default {
966
+ // opacity: 0;
967
+ display: none;
968
+ }
968
969
  }
970
+ &[data-btn-name="addToQuote"] {
971
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr))};
972
+ &[data-show-shadow="false"] {
973
+ --_show-shadow: none;
974
+ }
975
+ &[data-icon-position="left"] {
976
+ --_sf-fd-bn: row;
977
+ }
978
+ &[data-icon-position="right"] {
979
+ --_sf-fd-bn: row-reverse;
980
+ }
981
+ &[data-icon-position="center"] {
982
+ --_sf-fd-bn: row;
983
+ }
969
984
 
970
- &:hover {
971
- --_sf-hr-bd-cr: var(
972
- --_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
973
- var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
974
- );
975
- --_sf-hr-br-cr: var(
976
- --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
977
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
978
- );
979
- --_sf-hr-br-se: var(
980
- --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
981
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
982
- );
983
- --_sf-hr-br-wh: var(
984
- --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
985
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
986
- );
987
- --_sf-hr-br-rs: var(
988
- --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
989
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
990
- );
985
+ &:hover {
986
+ --_sf-hr-bd-cr: var(
987
+ --_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
988
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
989
+ );
990
+ --_sf-hr-br-cr: var(
991
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
992
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
993
+ );
994
+ --_sf-hr-br-se: var(
995
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
996
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
997
+ );
998
+ --_sf-hr-br-wh: var(
999
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
1000
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
1001
+ );
1002
+ --_sf-hr-br-rs: var(
1003
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
1004
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
1005
+ );
991
1006
 
992
- --_sf-hr-at: var(
993
- --_ctm-mob-dn-ad-to-qe-hr-se-at,
994
- var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
995
- );
996
- --_sf-hr-gp: var(
997
- --_ctm-mob-dn-ad-to-qe-hr-se-gp,
998
- var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
999
- );
1007
+ --_sf-hr-at: var(
1008
+ --_ctm-mob-dn-ad-to-qe-hr-se-at,
1009
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
1010
+ );
1011
+ --_sf-hr-gp: var(
1012
+ --_ctm-mob-dn-ad-to-qe-hr-se-gp,
1013
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
1014
+ );
1000
1015
 
1001
- // for shadow
1002
- --_sf-hr-sw-ae: var(
1003
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
1004
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae))
1005
- );
1006
- --_sf-hr-sw-br: var(
1007
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
1008
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br))
1009
- );
1010
- --_sf-hr-sw-hr: var(
1011
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
1012
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr))
1013
- );
1014
- --_sf-hr-sw-cr: var(
1015
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
1016
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr))
1017
- );
1016
+ // for shadow
1017
+ --_sf-hr-sw-ae: var(
1018
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
1019
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae))
1020
+ );
1021
+ --_sf-hr-sw-br: var(
1022
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
1023
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br))
1024
+ );
1025
+ --_sf-hr-sw-hr: var(
1026
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
1027
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr))
1028
+ );
1029
+ --_sf-hr-sw-cr: var(
1030
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
1031
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr))
1032
+ );
1018
1033
 
1019
- // for font
1034
+ // for font
1020
1035
 
1021
- --_sf-hr-cr: var(
1022
- --_ctm-mob-dn-ad-to-qe-hr-se-cr,
1023
- var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr))
1024
- );
1025
- --_sf-hr-ft-fy: var(
1026
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
1027
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy))
1028
- );
1029
- --_sf-hr-ft-se: var(
1030
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
1031
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se))
1032
- );
1033
- --_sf-hr-ft-wt: var(
1034
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
1035
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt))
1036
- );
1037
- --_sf-hr-ft-se-ic: var(
1038
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
1039
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic))
1040
- );
1041
- --_sf-hr-tt-an: var(
1042
- --_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
1043
- var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an))
1044
- );
1045
- --_sf-hr-lr-sg: var(
1046
- --_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
1047
- var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg))
1048
- );
1049
- --_sf-hr-le-ht: var(
1050
- --_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
1051
- var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht))
1052
- );
1036
+ --_sf-hr-cr: var(
1037
+ --_ctm-mob-dn-ad-to-qe-hr-se-cr,
1038
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr))
1039
+ );
1040
+ --_sf-hr-ft-fy: var(
1041
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
1042
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy))
1043
+ );
1044
+ --_sf-hr-ft-se: var(
1045
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
1046
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se))
1047
+ );
1048
+ --_sf-hr-ft-wt: var(
1049
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
1050
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt))
1051
+ );
1052
+ --_sf-hr-ft-se-ic: var(
1053
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
1054
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic))
1055
+ );
1056
+ --_sf-hr-tt-an: var(
1057
+ --_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
1058
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an))
1059
+ );
1060
+ --_sf-hr-lr-sg: var(
1061
+ --_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
1062
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg))
1063
+ );
1064
+ --_sf-hr-le-ht: var(
1065
+ --_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
1066
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht))
1067
+ );
1053
1068
 
1054
- --_sf-hr-in-se: var(
1055
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1056
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1057
- );
1058
- --_sf-hr-in-se: var(
1059
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1060
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1061
- );
1062
- --_sf-hr-in-c1: var(
1063
- --_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
1064
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
1065
- );
1066
- --_sf-hr-ue: var(
1067
- --_ctm-mob-dn-ad-to-qe-hr-se-ue,
1068
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
1069
- );
1069
+ --_sf-hr-in-se: var(
1070
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1071
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1072
+ );
1073
+ --_sf-hr-in-se: var(
1074
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1075
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1076
+ );
1077
+ --_sf-hr-in-c1: var(
1078
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
1079
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
1080
+ );
1081
+ --_sf-hr-ue: var(
1082
+ --_ctm-mob-dn-ad-to-qe-hr-se-ue,
1083
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
1084
+ );
1070
1085
 
1071
- // for pading and width
1072
- --_sf-hr-pg: var(
1073
- --_ctm-mob-dn-ad-to-qe-hr-pg,
1074
- var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
1075
- );
1076
- --_sf-hr-wh: var(
1077
- --_ctm-mob-dn-ad-to-qe-hr-wh,
1078
- var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh))
1079
- );
1086
+ // for pading and width
1087
+ --_sf-hr-pg: var(
1088
+ --_ctm-mob-dn-ad-to-qe-hr-pg,
1089
+ var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
1090
+ );
1091
+ --_sf-hr-wh: var(
1092
+ --_ctm-mob-dn-ad-to-qe-hr-wh,
1093
+ var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh))
1094
+ );
1080
1095
 
1081
- &[data-hover-show-shadow="false"] {
1082
- --_hover-show-shadow: none;
1083
- }
1084
- &[data-hover-show-icon="false"] {
1085
- --_hover-show-icon: none;
1096
+ &[data-hover-show-shadow="false"] {
1097
+ --_hover-show-shadow: none;
1098
+ }
1099
+ &[data-hover-show-icon="false"] {
1100
+ --_hover-show-icon: none;
1101
+ }
1086
1102
  }
1087
- }
1088
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
1103
+ background-color: var(
1104
+ --_sf-hr-bd-cr,
1105
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr)
1106
+ );
1089
1107
 
1090
- display: flex;
1091
- flex-direction: var(--_sf-fd-bn);
1092
- align-items: center;
1108
+ display: flex;
1109
+ flex-direction: var(--_sf-fd-bn);
1110
+ align-items: center;
1093
1111
 
1094
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-at));
1095
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-gp));
1112
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-at));
1113
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-gp));
1096
1114
 
1097
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-pg));
1098
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wh));
1115
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-pg));
1116
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wh));
1099
1117
 
1100
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
1118
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
1101
1119
 
1102
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae))
1103
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br))
1104
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd))
1105
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
1120
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae))
1121
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br))
1122
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd))
1123
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
1106
1124
 
1107
- &[data-show-border="true"] {
1108
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
1125
+ &[data-show-border="true"] {
1126
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
1109
1127
 
1110
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-se));
1128
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-se));
1111
1129
 
1112
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-wh));
1113
- }
1130
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-wh));
1131
+ }
1114
1132
 
1115
- .txt {
1116
- display: flex;
1133
+ .txt {
1134
+ display: flex;
1117
1135
 
1118
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr));
1136
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr));
1119
1137
 
1120
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-fy));
1138
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-fy));
1121
1139
 
1122
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se));
1140
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se));
1123
1141
 
1124
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
1142
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
1125
1143
 
1126
- font-style: var(
1127
- --_sf-hr-ft-se-ic,
1128
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1129
- );
1144
+ font-style: var(
1145
+ --_sf-hr-ft-se-ic,
1146
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1147
+ );
1130
1148
 
1131
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
1149
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
1132
1150
 
1133
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg));
1151
+ letter-spacing: var(
1152
+ --_sf-hr-lr-sg,
1153
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg)
1154
+ );
1134
1155
 
1135
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
1156
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
1136
1157
 
1137
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1138
- }
1158
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1159
+ }
1139
1160
 
1140
- .icon {
1141
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1142
- svg {
1143
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1144
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1161
+ .icon {
1162
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1163
+ svg {
1164
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1165
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1145
1166
 
1146
- path {
1147
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
1167
+ path {
1168
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
1169
+ }
1148
1170
  }
1149
1171
  }
1150
- }
1151
- [data-element-style="Text"] {
1152
- display: inline-block;
1153
- width: 100%;
1154
- }
1172
+ [data-element-style="Text"] {
1173
+ display: inline-block;
1174
+ width: 100%;
1175
+ }
1155
1176
 
1156
- .icon--hover {
1157
- // position: absolute;
1158
- // inset: 0;
1159
- // opacity: 0;
1160
- display: none;
1161
- transition: opacity 0.2s ease;
1162
- }
1177
+ .icon--hover {
1178
+ // position: absolute;
1179
+ // inset: 0;
1180
+ // opacity: 0;
1181
+ display: none;
1182
+ transition: opacity 0.2s ease;
1183
+ }
1163
1184
 
1164
- &:hover .icon--hover {
1165
- // opacity: 1;
1166
- display: flex;
1167
- }
1185
+ &:hover .icon--hover {
1186
+ // opacity: 1;
1187
+ display: flex;
1188
+ }
1168
1189
 
1169
- &:hover .icon--default {
1170
- // opacity: 0;
1171
- display: none;
1172
- }
1173
- }
1174
- .btn__with__text[data-btn-name="addToOrderTemplate"] {
1175
- &[data-show-shadow="false"] {
1176
- --_show-shadow: none;
1177
- }
1178
- &[data-icon-position="left"] {
1179
- --_sf-fd-bn: row;
1180
- }
1181
- &[data-icon-position="right"] {
1182
- --_sf-fd-bn: row-reverse;
1183
- }
1184
- &[data-icon-position="center"] {
1185
- --_sf-fd-bn: row;
1190
+ &:hover .icon--default {
1191
+ // opacity: 0;
1192
+ display: none;
1193
+ }
1186
1194
  }
1195
+ &[data-btn-name="addToOrderTemplate"] {
1196
+ --_sf-spinner-clr: #{var(
1197
+ --_sf-hr-cr,
1198
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr)
1199
+ )};
1200
+ &[data-show-shadow="false"] {
1201
+ --_show-shadow: none;
1202
+ }
1203
+ &[data-icon-position="left"] {
1204
+ --_sf-fd-bn: row;
1205
+ }
1206
+ &[data-icon-position="right"] {
1207
+ --_sf-fd-bn: row-reverse;
1208
+ }
1209
+ &[data-icon-position="center"] {
1210
+ --_sf-fd-bn: row;
1211
+ }
1187
1212
 
1188
- &:hover {
1189
- --_sf-hr-bd-cr: var(
1190
- --_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1191
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
1192
- );
1193
- --_sf-hr-br-cr: var(
1194
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1195
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
1196
- );
1197
- --_sf-hr-br-se: var(
1198
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1199
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1200
- );
1201
- --_sf-hr-br-wh: var(
1202
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1203
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1204
- );
1205
- --_sf-hr-br-rs: var(
1206
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1207
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
1208
- );
1213
+ &:hover {
1214
+ --_sf-hr-bd-cr: var(
1215
+ --_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1216
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
1217
+ );
1218
+ --_sf-hr-br-cr: var(
1219
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1220
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
1221
+ );
1222
+ --_sf-hr-br-se: var(
1223
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1224
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1225
+ );
1226
+ --_sf-hr-br-wh: var(
1227
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1228
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1229
+ );
1230
+ --_sf-hr-br-rs: var(
1231
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1232
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
1233
+ );
1209
1234
 
1210
- --_sf-hr-at: var(
1211
- --_ctm-mob-dn-ad-to-or-te-hr-se-at,
1212
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
1213
- );
1214
- --_sf-hr-gp: var(
1215
- --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1216
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
1217
- );
1235
+ --_sf-hr-at: var(
1236
+ --_ctm-mob-dn-ad-to-or-te-hr-se-at,
1237
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
1238
+ );
1239
+ --_sf-hr-gp: var(
1240
+ --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1241
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
1242
+ );
1218
1243
 
1219
- // for shadow
1220
- --_sf-hr-sw-ae: var(
1221
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1222
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae))
1223
- );
1224
- --_sf-hr-sw-br: var(
1225
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1226
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br))
1227
- );
1228
- --_sf-hr-sw-hr: var(
1229
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1230
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr))
1231
- );
1232
- --_sf-hr-sw-cr: var(
1233
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1234
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr))
1235
- );
1244
+ // for shadow
1245
+ --_sf-hr-sw-ae: var(
1246
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1247
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae))
1248
+ );
1249
+ --_sf-hr-sw-br: var(
1250
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1251
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br))
1252
+ );
1253
+ --_sf-hr-sw-hr: var(
1254
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1255
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr))
1256
+ );
1257
+ --_sf-hr-sw-cr: var(
1258
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1259
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr))
1260
+ );
1236
1261
 
1237
- // for font
1262
+ // for font
1238
1263
 
1239
- --_sf-hr-cr: var(
1240
- --_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1241
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr))
1242
- );
1243
- --_sf-hr-ft-fy: var(
1244
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1245
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy))
1246
- );
1247
- --_sf-hr-ft-se: var(
1248
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1249
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se))
1250
- );
1251
- --_sf-hr-ft-wt: var(
1252
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1253
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt))
1254
- );
1255
- --_sf-hr-ft-se-ic: var(
1256
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1257
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic))
1258
- );
1259
- --_sf-hr-tt-an: var(
1260
- --_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1261
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an))
1262
- );
1263
- --_sf-hr-lr-sg: var(
1264
- --_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1265
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg))
1266
- );
1267
- --_sf-hr-le-ht: var(
1268
- --_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1269
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht))
1270
- );
1264
+ --_sf-hr-cr: var(
1265
+ --_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1266
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr))
1267
+ );
1268
+ --_sf-hr-ft-fy: var(
1269
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1270
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy))
1271
+ );
1272
+ --_sf-hr-ft-se: var(
1273
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1274
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se))
1275
+ );
1276
+ --_sf-hr-ft-wt: var(
1277
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1278
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt))
1279
+ );
1280
+ --_sf-hr-ft-se-ic: var(
1281
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1282
+ var(
1283
+ --_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic,
1284
+ var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic)
1285
+ )
1286
+ );
1287
+ --_sf-hr-tt-an: var(
1288
+ --_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1289
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an))
1290
+ );
1291
+ --_sf-hr-lr-sg: var(
1292
+ --_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1293
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg))
1294
+ );
1295
+ --_sf-hr-le-ht: var(
1296
+ --_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1297
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht))
1298
+ );
1271
1299
 
1272
- --_sf-hr-in-se: var(
1273
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1274
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1275
- );
1276
- --_sf-hr-in-se: var(
1277
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1278
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1279
- );
1280
- --_sf-hr-in-c1: var(
1281
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1282
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
1283
- );
1284
- --_sf-hr-ue: var(
1285
- --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1286
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
1287
- );
1300
+ --_sf-hr-in-se: var(
1301
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1302
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1303
+ );
1304
+ --_sf-hr-in-se: var(
1305
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1306
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1307
+ );
1308
+ --_sf-hr-in-c1: var(
1309
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1310
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
1311
+ );
1312
+ --_sf-hr-ue: var(
1313
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1314
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
1315
+ );
1288
1316
 
1289
- // for pading and width
1290
- --_sf-hr-pg: var(
1291
- --_ctm-mob-dn-ad-to-or-te-hr-pg,
1292
- var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
1293
- );
1294
- --_sf-hr-wh: var(
1295
- --_ctm-mob-dn-ad-to-or-te-hr-wh,
1296
- var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh))
1297
- );
1298
- &[data-hover-show-shadow="false"] {
1299
- --_hover-show-shadow: none;
1300
- }
1301
- &[data-hover-show-icon="false"] {
1302
- --_hover-show-icon: none;
1317
+ // for pading and width
1318
+ --_sf-hr-pg: var(
1319
+ --_ctm-mob-dn-ad-to-or-te-hr-pg,
1320
+ var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
1321
+ );
1322
+ --_sf-hr-wh: var(
1323
+ --_ctm-mob-dn-ad-to-or-te-hr-wh,
1324
+ var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh))
1325
+ );
1326
+ &[data-hover-show-shadow="false"] {
1327
+ --_hover-show-shadow: none;
1328
+ }
1329
+ &[data-hover-show-icon="false"] {
1330
+ --_hover-show-icon: none;
1331
+ }
1303
1332
  }
1304
- }
1305
- background-color: var(
1306
- --_sf-hr-bd-cr,
1307
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr)
1308
- );
1309
-
1310
- padding: 5px 10px;
1311
- display: flex;
1312
- flex-direction: var(--_sf-fd-bn);
1313
- align-items: center;
1314
-
1315
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1316
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1333
+ background-color: var(
1334
+ --_sf-hr-bd-cr,
1335
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr)
1336
+ );
1317
1337
 
1318
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1319
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1338
+ padding: 5px 10px;
1339
+ display: flex;
1340
+ flex-direction: var(--_sf-fd-bn);
1341
+ align-items: center;
1320
1342
 
1321
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
1343
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1344
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1322
1345
 
1323
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae))
1324
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br))
1325
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd))
1326
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1346
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1347
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1327
1348
 
1328
- &[data-show-border="true"] {
1329
- border-color: var(
1330
- --_sf-hr-br-cr,
1331
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr)
1349
+ border-radius: var(
1350
+ --_sf-hr-br-rs,
1351
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs)
1332
1352
  );
1333
1353
 
1334
- border-style: var(
1335
- --_sf-hr-br-se,
1336
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1337
- );
1354
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae))
1355
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br))
1356
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd))
1357
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1338
1358
 
1339
- border-width: var(
1340
- --_sf-hr-br-wh,
1341
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1342
- );
1343
- }
1359
+ &[data-show-border="true"] {
1360
+ border-color: var(
1361
+ --_sf-hr-br-cr,
1362
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr)
1363
+ );
1344
1364
 
1345
- .txt {
1346
- display: flex;
1365
+ border-style: var(
1366
+ --_sf-hr-br-se,
1367
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1368
+ );
1347
1369
 
1348
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1370
+ border-width: var(
1371
+ --_sf-hr-br-wh,
1372
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1373
+ );
1374
+ }
1349
1375
 
1350
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy));
1376
+ .txt {
1377
+ display: flex;
1351
1378
 
1352
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1379
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1353
1380
 
1354
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt));
1381
+ font-family: var(
1382
+ --_sf-hr-ft-fy,
1383
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy)
1384
+ );
1355
1385
 
1356
- font-style: var(
1357
- --_sf-hr-ft-se-ic,
1358
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1359
- );
1386
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1360
1387
 
1361
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an));
1388
+ font-weight: var(
1389
+ --_sf-hr-ft-wt,
1390
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt)
1391
+ );
1362
1392
 
1363
- letter-spacing: var(
1364
- --_sf-hr-lr-sg,
1365
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1366
- );
1393
+ font-style: var(
1394
+ --_sf-hr-ft-se-ic,
1395
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1396
+ );
1367
1397
 
1368
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht));
1398
+ text-align: var(
1399
+ --_sf-hr-tt-an,
1400
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an)
1401
+ );
1369
1402
 
1370
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1371
- }
1403
+ letter-spacing: var(
1404
+ --_sf-hr-lr-sg,
1405
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1406
+ );
1372
1407
 
1373
- .icon {
1374
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1375
- svg {
1376
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1377
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1408
+ line-height: var(
1409
+ --_sf-hr-le-ht,
1410
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht)
1411
+ );
1378
1412
 
1379
- path {
1380
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1));
1381
- }
1413
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1414
+ }
1415
+
1416
+ .icon {
1417
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1418
+ svg {
1419
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1420
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1421
+
1422
+ path {
1423
+ stroke: var(
1424
+ --_sf-hr-in-c1,
1425
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1)
1426
+ );
1427
+ }
1428
+ }
1429
+ }
1430
+ [data-element-style="Text"] {
1431
+ display: inline-block;
1432
+ width: 100%;
1382
1433
  }
1383
- }
1384
- [data-element-style="Text"] {
1385
- display: inline-block;
1386
- width: 100%;
1387
- }
1388
1434
 
1389
- .icon--hover {
1390
- // position: absolute;
1391
- // inset: 0;
1392
- // opacity: 0;
1393
- display: none;
1394
- transition: opacity 0.2s ease;
1395
- }
1435
+ .icon--hover {
1436
+ // position: absolute;
1437
+ // inset: 0;
1438
+ // opacity: 0;
1439
+ display: none;
1440
+ transition: opacity 0.2s ease;
1441
+ }
1396
1442
 
1397
- &:hover .icon--hover {
1398
- // opacity: 1;
1399
- display: flex;
1400
- }
1443
+ &:hover .icon--hover {
1444
+ // opacity: 1;
1445
+ display: flex;
1446
+ }
1401
1447
 
1402
- &:hover .icon--default {
1403
- // opacity: 0;
1404
- display: none;
1405
- }
1406
- }
1407
- .btn__with__text[data-btn-name="notifyMe"] {
1408
- &[data-show-shadow="false"] {
1409
- --_show-shadow: none;
1410
- }
1411
- &[data-icon-position="left"] {
1412
- --_sf-fd-bn: row;
1413
- }
1414
- &[data-icon-position="right"] {
1415
- --_sf-fd-bn: row-reverse;
1416
- }
1417
- &[data-icon-position="center"] {
1418
- --_sf-fd-bn: row;
1448
+ &:hover .icon--default {
1449
+ // opacity: 0;
1450
+ display: none;
1451
+ }
1419
1452
  }
1453
+ &[data-btn-name="notifyMe"] {
1454
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
1455
+ &[data-show-shadow="false"] {
1456
+ --_show-shadow: none;
1457
+ }
1458
+ &[data-icon-position="left"] {
1459
+ --_sf-fd-bn: row;
1460
+ }
1461
+ &[data-icon-position="right"] {
1462
+ --_sf-fd-bn: row-reverse;
1463
+ }
1464
+ &[data-icon-position="center"] {
1465
+ --_sf-fd-bn: row;
1466
+ }
1420
1467
 
1421
- &:hover {
1422
- --_sf-hr-bd-cr: var(
1423
- --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1424
- var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1425
- );
1426
- --_sf-hr-br-cr: var(
1427
- --_ctm-mob-dn-ny-me-hr-se-br-cr,
1428
- var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1429
- );
1430
- --_sf-hr-br-se: var(
1431
- --_ctm-mob-dn-ny-me-hr-se-br-se,
1432
- var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1433
- );
1434
- --_sf-hr-br-wh: var(
1435
- --_ctm-mob-dn-ny-me-hr-se-br-wh,
1436
- var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1437
- );
1438
- --_sf-hr-br-rs: var(
1439
- --_ctm-mob-dn-ny-me-hr-se-br-rs,
1440
- var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1441
- );
1442
- --_sf-hr-at: var(
1443
- --_ctm-mob-dn-ny-me-hr-se-at,
1444
- var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1445
- );
1446
- --_sf-hr-gp: var(
1447
- --_ctm-mob-dn-ny-me-hr-se-gp,
1448
- var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1449
- );
1468
+ &:hover {
1469
+ --_sf-hr-bd-cr: var(
1470
+ --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1471
+ var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1472
+ );
1473
+ --_sf-hr-br-cr: var(
1474
+ --_ctm-mob-dn-ny-me-hr-se-br-cr,
1475
+ var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1476
+ );
1477
+ --_sf-hr-br-se: var(
1478
+ --_ctm-mob-dn-ny-me-hr-se-br-se,
1479
+ var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1480
+ );
1481
+ --_sf-hr-br-wh: var(
1482
+ --_ctm-mob-dn-ny-me-hr-se-br-wh,
1483
+ var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1484
+ );
1485
+ --_sf-hr-br-rs: var(
1486
+ --_ctm-mob-dn-ny-me-hr-se-br-rs,
1487
+ var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1488
+ );
1489
+ --_sf-hr-at: var(
1490
+ --_ctm-mob-dn-ny-me-hr-se-at,
1491
+ var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1492
+ );
1493
+ --_sf-hr-gp: var(
1494
+ --_ctm-mob-dn-ny-me-hr-se-gp,
1495
+ var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1496
+ );
1450
1497
 
1451
- // for shadow
1452
- --_sf-hr-sw-ae: var(
1453
- --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1454
- var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1455
- );
1456
- --_sf-hr-sw-br: var(
1457
- --_ctm-mob-dn-ny-me-hr-se-sw-br,
1458
- var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1459
- );
1460
- --_sf-hr-sw-hr: var(
1461
- --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1462
- var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1463
- );
1464
- --_sf-hr-sw-cr: var(
1465
- --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1466
- var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1467
- );
1498
+ // for shadow
1499
+ --_sf-hr-sw-ae: var(
1500
+ --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1501
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1502
+ );
1503
+ --_sf-hr-sw-br: var(
1504
+ --_ctm-mob-dn-ny-me-hr-se-sw-br,
1505
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1506
+ );
1507
+ --_sf-hr-sw-hr: var(
1508
+ --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1509
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1510
+ );
1511
+ --_sf-hr-sw-cr: var(
1512
+ --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1513
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1514
+ );
1468
1515
 
1469
- // for font
1516
+ // for font
1470
1517
 
1471
- --_sf-hr-cr: var(
1472
- --_ctm-mob-dn-ny-me-hr-se-cr,
1473
- var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1474
- );
1475
- --_sf-hr-ft-fy: var(
1476
- --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1477
- var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1478
- );
1479
- --_sf-hr-ft-se: var(
1480
- --_ctm-mob-dn-ny-me-hr-se-ft-se,
1481
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1482
- );
1483
- --_sf-hr-ft-wt: var(
1484
- --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1485
- var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1486
- );
1487
- --_sf-hr-ft-se-ic: var(
1488
- --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1489
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1490
- );
1491
- --_sf-hr-tt-an: var(
1492
- --_ctm-mob-dn-ny-me-hr-se-tt-an,
1493
- var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1494
- );
1495
- --_sf-hr-lr-sg: var(
1496
- --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1497
- var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1498
- );
1499
- --_sf-hr-le-ht: var(
1500
- --_ctm-mob-dn-ny-me-hr-se-le-ht,
1501
- var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1502
- );
1518
+ --_sf-hr-cr: var(
1519
+ --_ctm-mob-dn-ny-me-hr-se-cr,
1520
+ var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1521
+ );
1522
+ --_sf-hr-ft-fy: var(
1523
+ --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1524
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1525
+ );
1526
+ --_sf-hr-ft-se: var(
1527
+ --_ctm-mob-dn-ny-me-hr-se-ft-se,
1528
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1529
+ );
1530
+ --_sf-hr-ft-wt: var(
1531
+ --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1532
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1533
+ );
1534
+ --_sf-hr-ft-se-ic: var(
1535
+ --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1536
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1537
+ );
1538
+ --_sf-hr-tt-an: var(
1539
+ --_ctm-mob-dn-ny-me-hr-se-tt-an,
1540
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1541
+ );
1542
+ --_sf-hr-lr-sg: var(
1543
+ --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1544
+ var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1545
+ );
1546
+ --_sf-hr-le-ht: var(
1547
+ --_ctm-mob-dn-ny-me-hr-se-le-ht,
1548
+ var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1549
+ );
1503
1550
 
1504
- --_sf-hr-in-se: var(
1505
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1506
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1507
- );
1508
- --_sf-hr-in-se: var(
1509
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1510
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1511
- );
1512
- --_sf-hr-in-c1: var(
1513
- --_ctm-mob-dn-ny-me-hr-se-in-c1,
1514
- var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1515
- );
1516
- --_sf-hr-ue: var(
1517
- --_ctm-mob-dn-ny-me-hr-se-ue,
1518
- var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
1519
- );
1551
+ --_sf-hr-in-se: var(
1552
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1553
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1554
+ );
1555
+ --_sf-hr-in-se: var(
1556
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1557
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1558
+ );
1559
+ --_sf-hr-in-c1: var(
1560
+ --_ctm-mob-dn-ny-me-hr-se-in-c1,
1561
+ var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1562
+ );
1563
+ --_sf-hr-ue: var(
1564
+ --_ctm-mob-dn-ny-me-hr-se-ue,
1565
+ var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
1566
+ );
1520
1567
 
1521
- // for pading and width
1522
- --_sf-hr-pg: var(
1523
- --_ctm-mob-dn-ny-me-hr-pg,
1524
- var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
1525
- );
1526
- --_sf-hr-wh: var(
1527
- --_ctm-mob-dn-ny-me-hr-wh,
1528
- var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
1529
- );
1568
+ // for pading and width
1569
+ --_sf-hr-pg: var(
1570
+ --_ctm-mob-dn-ny-me-hr-pg,
1571
+ var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
1572
+ );
1573
+ --_sf-hr-wh: var(
1574
+ --_ctm-mob-dn-ny-me-hr-wh,
1575
+ var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
1576
+ );
1530
1577
 
1531
- &[data-hover-show-shadow="false"] {
1532
- --_hover-show-shadow: none;
1533
- }
1534
- &[data-hover-show-icon="false"] {
1535
- --_hover-show-icon: none;
1578
+ &[data-hover-show-shadow="false"] {
1579
+ --_hover-show-shadow: none;
1580
+ }
1581
+ &[data-hover-show-icon="false"] {
1582
+ --_hover-show-icon: none;
1583
+ }
1536
1584
  }
1537
- }
1538
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1585
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1539
1586
 
1540
- display: flex;
1541
- flex-direction: var(--_sf-fd-bn);
1542
- align-items: center;
1587
+ display: flex;
1588
+ flex-direction: var(--_sf-fd-bn);
1589
+ align-items: center;
1543
1590
 
1544
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1545
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1591
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1592
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1546
1593
 
1547
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1548
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1594
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1595
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1549
1596
 
1550
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1597
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1551
1598
 
1552
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
1553
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
1554
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
1555
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1599
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
1600
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
1601
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
1602
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1556
1603
 
1557
- &[data-show-border="true"] {
1558
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1604
+ &[data-show-border="true"] {
1605
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1559
1606
 
1560
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1607
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1561
1608
 
1562
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1563
- }
1609
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1610
+ }
1564
1611
 
1565
- .txt {
1566
- display: flex;
1612
+ .txt {
1613
+ display: flex;
1567
1614
 
1568
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1615
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1569
1616
 
1570
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1617
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1571
1618
 
1572
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1619
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1573
1620
 
1574
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1621
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1575
1622
 
1576
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
1623
+ font-style: var(
1624
+ --_sf-hr-ft-se-ic,
1625
+ prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic)
1626
+ );
1577
1627
 
1578
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1628
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1579
1629
 
1580
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1630
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1581
1631
 
1582
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1632
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1583
1633
 
1584
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1585
- }
1634
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1635
+ }
1586
1636
 
1587
- .icon {
1588
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1589
- svg {
1590
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1591
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1637
+ .icon {
1638
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1639
+ svg {
1640
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1641
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1592
1642
 
1593
- path {
1594
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1643
+ path {
1644
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1645
+ }
1595
1646
  }
1596
1647
  }
1597
- }
1598
- [data-element-style="Text"] {
1599
- display: inline-block;
1600
- width: 100%;
1601
- }
1648
+ [data-element-style="Text"] {
1649
+ display: inline-block;
1650
+ width: 100%;
1651
+ }
1602
1652
 
1603
- .icon--hover {
1604
- // position: absolute;
1605
- // inset: 0;
1606
- // opacity: 0;
1607
- display: none;
1608
- transition: opacity 0.2s ease;
1609
- }
1653
+ .icon--hover {
1654
+ // position: absolute;
1655
+ // inset: 0;
1656
+ // opacity: 0;
1657
+ display: none;
1658
+ transition: opacity 0.2s ease;
1659
+ }
1610
1660
 
1611
- &:hover .icon--hover {
1612
- // opacity: 1;
1613
- display: flex;
1614
- }
1661
+ &:hover .icon--hover {
1662
+ // opacity: 1;
1663
+ display: flex;
1664
+ }
1615
1665
 
1616
- &:hover .icon--default {
1617
- // opacity: 0;
1618
- display: none;
1619
- }
1620
- }
1621
- .btn__with__text[data-btn-name="download"] {
1622
- &[data-show-shadow="false"] {
1623
- --_show-shadow: none;
1624
- }
1625
- &[data-icon-position="left"] {
1626
- --_sf-fd-bn: row;
1627
- }
1628
- &[data-icon-position="right"] {
1629
- --_sf-fd-bn: row-reverse;
1630
- }
1631
- &[data-icon-position="center"] {
1632
- --_sf-fd-bn: row;
1666
+ &:hover .icon--default {
1667
+ // opacity: 0;
1668
+ display: none;
1669
+ }
1633
1670
  }
1671
+ &[data-btn-name="download"] {
1672
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
1673
+ &[data-show-shadow="false"] {
1674
+ --_show-shadow: none;
1675
+ }
1676
+ &[data-icon-position="left"] {
1677
+ --_sf-fd-bn: row;
1678
+ }
1679
+ &[data-icon-position="right"] {
1680
+ --_sf-fd-bn: row-reverse;
1681
+ }
1682
+ &[data-icon-position="center"] {
1683
+ --_sf-fd-bn: row;
1684
+ }
1634
1685
 
1635
- &:hover {
1636
- --_sf-hr-bd-cr: var(
1637
- --_ctm-mob-dn-dd-hr-se-bd-cr,
1638
- var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
1639
- );
1640
- --_sf-hr-br-cr: var(
1641
- --_ctm-mob-dn-dd-hr-se-br-cr,
1642
- var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
1643
- );
1644
- --_sf-hr-br-se: var(
1645
- --_ctm-mob-dn-dd-hr-se-br-se,
1646
- var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1647
- );
1648
- --_sf-hr-br-wh: var(
1649
- --_ctm-mob-dn-dd-hr-se-br-wh,
1650
- var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1651
- );
1652
- --_sf-hr-br-rs: var(
1653
- --_ctm-mob-dn-dd-hr-se-br-rs,
1654
- var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
1655
- );
1656
- --_sf-hr-at: var(
1657
- --_ctm-mob-dn-dd-hr-se-at,
1658
- var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
1659
- );
1660
- --_sf-hr-gp: var(
1661
- --_ctm-mob-dn-dd-hr-se-gp,
1662
- var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
1663
- );
1686
+ &:hover {
1687
+ --_sf-hr-bd-cr: var(
1688
+ --_ctm-mob-dn-dd-hr-se-bd-cr,
1689
+ var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
1690
+ );
1691
+ --_sf-hr-br-cr: var(
1692
+ --_ctm-mob-dn-dd-hr-se-br-cr,
1693
+ var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
1694
+ );
1695
+ --_sf-hr-br-se: var(
1696
+ --_ctm-mob-dn-dd-hr-se-br-se,
1697
+ var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1698
+ );
1699
+ --_sf-hr-br-wh: var(
1700
+ --_ctm-mob-dn-dd-hr-se-br-wh,
1701
+ var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1702
+ );
1703
+ --_sf-hr-br-rs: var(
1704
+ --_ctm-mob-dn-dd-hr-se-br-rs,
1705
+ var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
1706
+ );
1707
+ --_sf-hr-at: var(
1708
+ --_ctm-mob-dn-dd-hr-se-at,
1709
+ var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
1710
+ );
1711
+ --_sf-hr-gp: var(
1712
+ --_ctm-mob-dn-dd-hr-se-gp,
1713
+ var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
1714
+ );
1664
1715
 
1665
- // for shadow
1666
- --_sf-hr-sw-ae: var(
1667
- --_ctm-mob-dn-dd-hr-se-sw-ae,
1668
- var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
1669
- );
1670
- --_sf-hr-sw-br: var(
1671
- --_ctm-mob-dn-dd-hr-se-sw-br,
1672
- var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
1673
- );
1674
- --_sf-hr-sw-hr: var(
1675
- --_ctm-mob-dn-dd-hr-se-sw-hr,
1676
- var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
1677
- );
1678
- --_sf-hr-sw-cr: var(
1679
- --_ctm-mob-dn-dd-hr-se-sw-cr,
1680
- var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
1681
- );
1716
+ // for shadow
1717
+ --_sf-hr-sw-ae: var(
1718
+ --_ctm-mob-dn-dd-hr-se-sw-ae,
1719
+ var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
1720
+ );
1721
+ --_sf-hr-sw-br: var(
1722
+ --_ctm-mob-dn-dd-hr-se-sw-br,
1723
+ var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
1724
+ );
1725
+ --_sf-hr-sw-hr: var(
1726
+ --_ctm-mob-dn-dd-hr-se-sw-hr,
1727
+ var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
1728
+ );
1729
+ --_sf-hr-sw-cr: var(
1730
+ --_ctm-mob-dn-dd-hr-se-sw-cr,
1731
+ var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
1732
+ );
1682
1733
 
1683
- // for font
1734
+ // for font
1684
1735
 
1685
- --_sf-hr-cr: var(
1686
- --_ctm-mob-dn-dd-hr-se-cr,
1687
- var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
1688
- );
1689
- --_sf-hr-ft-fy: var(
1690
- --_ctm-mob-dn-dd-hr-se-ft-fy,
1691
- var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
1692
- );
1693
- --_sf-hr-ft-se: var(
1694
- --_ctm-mob-dn-dd-hr-se-ft-se,
1695
- var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
1696
- );
1697
- --_sf-hr-ft-wt: var(
1698
- --_ctm-mob-dn-dd-hr-se-ft-wt,
1699
- var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
1700
- );
1701
- --_sf-hr-ft-se-ic: var(
1702
- --_ctm-mob-dn-dd-hr-se-ft-se-ic,
1703
- var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
1704
- );
1705
- --_sf-hr-tt-an: var(
1706
- --_ctm-mob-dn-dd-hr-se-tt-an,
1707
- var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
1708
- );
1709
- --_sf-hr-lr-sg: var(
1710
- --_ctm-mob-dn-dd-hr-se-lr-sg,
1711
- var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
1712
- );
1713
- --_sf-hr-le-ht: var(
1714
- --_ctm-mob-dn-dd-hr-se-le-ht,
1715
- var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
1716
- );
1736
+ --_sf-hr-cr: var(
1737
+ --_ctm-mob-dn-dd-hr-se-cr,
1738
+ var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
1739
+ );
1740
+ --_sf-hr-ft-fy: var(
1741
+ --_ctm-mob-dn-dd-hr-se-ft-fy,
1742
+ var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
1743
+ );
1744
+ --_sf-hr-ft-se: var(
1745
+ --_ctm-mob-dn-dd-hr-se-ft-se,
1746
+ var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
1747
+ );
1748
+ --_sf-hr-ft-wt: var(
1749
+ --_ctm-mob-dn-dd-hr-se-ft-wt,
1750
+ var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
1751
+ );
1752
+ --_sf-hr-ft-se-ic: var(
1753
+ --_ctm-mob-dn-dd-hr-se-ft-se-ic,
1754
+ var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
1755
+ );
1756
+ --_sf-hr-tt-an: var(
1757
+ --_ctm-mob-dn-dd-hr-se-tt-an,
1758
+ var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
1759
+ );
1760
+ --_sf-hr-lr-sg: var(
1761
+ --_ctm-mob-dn-dd-hr-se-lr-sg,
1762
+ var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
1763
+ );
1764
+ --_sf-hr-le-ht: var(
1765
+ --_ctm-mob-dn-dd-hr-se-le-ht,
1766
+ var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
1767
+ );
1717
1768
 
1718
- --_sf-hr-in-se: var(
1719
- --_ctm-mob-dn-dd-hr-se-in-se,
1720
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1721
- );
1722
- --_sf-hr-in-se: var(
1723
- --_ctm-mob-dn-dd-hr-se-in-se,
1724
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1725
- );
1726
- --_sf-hr-in-c1: var(
1727
- --_ctm-mob-dn-dd-hr-se-in-c1,
1728
- var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
1729
- );
1730
- --_sf-hr-ue: var(
1731
- --_ctm-mob-dn-dd-hr-se-ue,
1732
- var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
1733
- );
1769
+ --_sf-hr-in-se: var(
1770
+ --_ctm-mob-dn-dd-hr-se-in-se,
1771
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1772
+ );
1773
+ --_sf-hr-in-se: var(
1774
+ --_ctm-mob-dn-dd-hr-se-in-se,
1775
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1776
+ );
1777
+ --_sf-hr-in-c1: var(
1778
+ --_ctm-mob-dn-dd-hr-se-in-c1,
1779
+ var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
1780
+ );
1781
+ --_sf-hr-ue: var(
1782
+ --_ctm-mob-dn-dd-hr-se-ue,
1783
+ var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
1784
+ );
1734
1785
 
1735
- // for pading and width
1736
- --_sf-hr-pg: var(
1737
- --_ctm-mob-dn-dd-hr-pg,
1738
- var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
1739
- );
1740
- --_sf-hr-wh: var(
1741
- --_ctm-mob-dn-dd-hr-wh,
1742
- var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
1743
- );
1786
+ // for pading and width
1787
+ --_sf-hr-pg: var(
1788
+ --_ctm-mob-dn-dd-hr-pg,
1789
+ var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
1790
+ );
1791
+ --_sf-hr-wh: var(
1792
+ --_ctm-mob-dn-dd-hr-wh,
1793
+ var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
1794
+ );
1744
1795
 
1745
- &[data-hover-show-shadow="false"] {
1746
- --_hover-show-shadow: none;
1747
- }
1748
- &[data-hover-show-icon="false"] {
1749
- --_hover-show-icon: none;
1796
+ &[data-hover-show-shadow="false"] {
1797
+ --_hover-show-shadow: none;
1798
+ }
1799
+ &[data-hover-show-icon="false"] {
1800
+ --_hover-show-icon: none;
1801
+ }
1750
1802
  }
1751
- }
1752
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1803
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1753
1804
 
1754
- display: flex;
1755
- flex-direction: var(--_sf-fd-bn);
1756
- align-items: center;
1805
+ display: flex;
1806
+ flex-direction: var(--_sf-fd-bn);
1807
+ align-items: center;
1757
1808
 
1758
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1759
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1809
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1810
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1760
1811
 
1761
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1762
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1812
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1813
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1763
1814
 
1764
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1815
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1765
1816
 
1766
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
1767
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
1768
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
1769
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1817
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
1818
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
1819
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
1820
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1770
1821
 
1771
- &[data-show-border="true"] {
1772
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1822
+ &[data-show-border="true"] {
1823
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1773
1824
 
1774
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1825
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1775
1826
 
1776
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1777
- }
1827
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1828
+ }
1778
1829
 
1779
- .txt {
1780
- display: flex;
1830
+ .txt {
1831
+ display: flex;
1781
1832
 
1782
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1833
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1783
1834
 
1784
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1835
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1785
1836
 
1786
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1837
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1787
1838
 
1788
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1839
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1789
1840
 
1790
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1841
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1791
1842
 
1792
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1843
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1793
1844
 
1794
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1845
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1795
1846
 
1796
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1847
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1797
1848
 
1798
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1799
- }
1849
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1850
+ }
1800
1851
 
1801
- .icon {
1802
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1803
- svg {
1804
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1805
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1852
+ .icon {
1853
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1854
+ svg {
1855
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1856
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1806
1857
 
1807
- path {
1808
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
1858
+ path {
1859
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
1860
+ }
1809
1861
  }
1810
1862
  }
1811
- }
1812
- [data-element-style="Text"] {
1813
- display: inline-block;
1814
- width: 100%;
1815
- }
1863
+ [data-element-style="Text"] {
1864
+ display: inline-block;
1865
+ width: 100%;
1866
+ }
1816
1867
 
1817
- .icon--hover {
1818
- // position: absolute;
1819
- // inset: 0;
1820
- // opacity: 0;
1821
- display: none;
1822
- transition: opacity 0.2s ease;
1823
- }
1868
+ .icon--hover {
1869
+ // position: absolute;
1870
+ // inset: 0;
1871
+ // opacity: 0;
1872
+ display: none;
1873
+ transition: opacity 0.2s ease;
1874
+ }
1824
1875
 
1825
- &:hover .icon--hover {
1826
- // opacity: 1;
1827
- display: flex;
1828
- }
1876
+ &:hover .icon--hover {
1877
+ // opacity: 1;
1878
+ display: flex;
1879
+ }
1829
1880
 
1830
- &:hover .icon--default {
1831
- // opacity: 0;
1832
- display: none;
1833
- }
1834
- }
1835
- .btn__with__text[data-btn-name="more"] {
1836
- &[data-show-shadow="false"] {
1837
- --_show-shadow: none;
1838
- }
1839
- &[data-icon-position="left"] {
1840
- --_sf-fd-bn: row;
1841
- }
1842
- &[data-icon-position="right"] {
1843
- --_sf-fd-bn: row-reverse;
1844
- }
1845
- &[data-icon-position="center"] {
1846
- --_sf-fd-bn: row;
1881
+ &:hover .icon--default {
1882
+ // opacity: 0;
1883
+ display: none;
1884
+ }
1847
1885
  }
1886
+ &[data-btn-name="more"] {
1887
+ --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
1888
+ &[data-show-shadow="false"] {
1889
+ --_show-shadow: none;
1890
+ }
1891
+ &[data-icon-position="left"] {
1892
+ --_sf-fd-bn: row;
1893
+ }
1894
+ &[data-icon-position="right"] {
1895
+ --_sf-fd-bn: row-reverse;
1896
+ }
1897
+ &[data-icon-position="center"] {
1898
+ --_sf-fd-bn: row;
1899
+ }
1848
1900
 
1849
- &:hover {
1850
- --_sf-hr-bd-cr: var(
1851
- --_ctm-mob-dn-me-hr-se-bd-cr,
1852
- var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
1853
- );
1854
- --_sf-hr-br-cr: var(
1855
- --_ctm-mob-dn-me-hr-se-br-cr,
1856
- var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
1857
- );
1858
- --_sf-hr-br-se: var(
1859
- --_ctm-mob-dn-me-hr-se-br-se,
1860
- var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
1861
- );
1862
- --_sf-hr-br-wh: var(
1863
- --_ctm-mob-dn-me-hr-se-br-wh,
1864
- var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
1865
- );
1866
- --_sf-hr-br-rs: var(
1867
- --_ctm-mob-dn-me-hr-se-br-rs,
1868
- var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
1869
- );
1870
- --_sf-hr-at: var(
1871
- --_ctm-mob-dn-me-hr-se-at,
1872
- var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
1873
- );
1874
- --_sf-hr-gp: var(
1875
- --_ctm-mob-dn-me-hr-se-gp,
1876
- var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
1877
- );
1901
+ &:hover {
1902
+ --_sf-hr-bd-cr: var(
1903
+ --_ctm-mob-dn-me-hr-se-bd-cr,
1904
+ var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
1905
+ );
1906
+ --_sf-hr-br-cr: var(
1907
+ --_ctm-mob-dn-me-hr-se-br-cr,
1908
+ var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
1909
+ );
1910
+ --_sf-hr-br-se: var(
1911
+ --_ctm-mob-dn-me-hr-se-br-se,
1912
+ var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
1913
+ );
1914
+ --_sf-hr-br-wh: var(
1915
+ --_ctm-mob-dn-me-hr-se-br-wh,
1916
+ var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
1917
+ );
1918
+ --_sf-hr-br-rs: var(
1919
+ --_ctm-mob-dn-me-hr-se-br-rs,
1920
+ var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
1921
+ );
1922
+ --_sf-hr-at: var(
1923
+ --_ctm-mob-dn-me-hr-se-at,
1924
+ var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
1925
+ );
1926
+ --_sf-hr-gp: var(
1927
+ --_ctm-mob-dn-me-hr-se-gp,
1928
+ var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
1929
+ );
1878
1930
 
1879
- // for shadow
1880
- --_sf-hr-sw-ae: var(
1881
- --_ctm-mob-dn-me-hr-se-sw-ae,
1882
- var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
1883
- );
1884
- --_sf-hr-sw-br: var(
1885
- --_ctm-mob-dn-me-hr-se-sw-br,
1886
- var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
1887
- );
1888
- --_sf-hr-sw-hr: var(
1889
- --_ctm-mob-dn-me-hr-se-sw-hr,
1890
- var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
1891
- );
1892
- --_sf-hr-sw-cr: var(
1893
- --_ctm-mob-dn-me-hr-se-sw-cr,
1894
- var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
1895
- );
1931
+ // for shadow
1932
+ --_sf-hr-sw-ae: var(
1933
+ --_ctm-mob-dn-me-hr-se-sw-ae,
1934
+ var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
1935
+ );
1936
+ --_sf-hr-sw-br: var(
1937
+ --_ctm-mob-dn-me-hr-se-sw-br,
1938
+ var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
1939
+ );
1940
+ --_sf-hr-sw-hr: var(
1941
+ --_ctm-mob-dn-me-hr-se-sw-hr,
1942
+ var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
1943
+ );
1944
+ --_sf-hr-sw-cr: var(
1945
+ --_ctm-mob-dn-me-hr-se-sw-cr,
1946
+ var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
1947
+ );
1896
1948
 
1897
- // for font
1949
+ // for font
1898
1950
 
1899
- --_sf-hr-cr: var(
1900
- --_ctm-mob-dn-me-hr-se-cr,
1901
- var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
1902
- );
1903
- --_sf-hr-ft-fy: var(
1904
- --_ctm-mob-dn-me-hr-se-ft-fy,
1905
- var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
1906
- );
1907
- --_sf-hr-ft-se: var(
1908
- --_ctm-mob-dn-me-hr-se-ft-se,
1909
- var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
1910
- );
1911
- --_sf-hr-ft-wt: var(
1912
- --_ctm-mob-dn-me-hr-se-ft-wt,
1913
- var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
1914
- );
1915
- --_sf-hr-ft-se-ic: var(
1916
- --_ctm-mob-dn-me-hr-se-ft-se-ic,
1917
- var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
1918
- );
1919
- --_sf-hr-tt-an: var(
1920
- --_ctm-mob-dn-me-hr-se-tt-an,
1921
- var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
1922
- );
1923
- --_sf-hr-lr-sg: var(
1924
- --_ctm-mob-dn-me-hr-se-lr-sg,
1925
- var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
1926
- );
1927
- --_sf-hr-le-ht: var(
1928
- --_ctm-mob-dn-me-hr-se-le-ht,
1929
- var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
1930
- );
1951
+ --_sf-hr-cr: var(
1952
+ --_ctm-mob-dn-me-hr-se-cr,
1953
+ var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
1954
+ );
1955
+ --_sf-hr-ft-fy: var(
1956
+ --_ctm-mob-dn-me-hr-se-ft-fy,
1957
+ var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
1958
+ );
1959
+ --_sf-hr-ft-se: var(
1960
+ --_ctm-mob-dn-me-hr-se-ft-se,
1961
+ var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
1962
+ );
1963
+ --_sf-hr-ft-wt: var(
1964
+ --_ctm-mob-dn-me-hr-se-ft-wt,
1965
+ var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
1966
+ );
1967
+ --_sf-hr-ft-se-ic: var(
1968
+ --_ctm-mob-dn-me-hr-se-ft-se-ic,
1969
+ var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
1970
+ );
1971
+ --_sf-hr-tt-an: var(
1972
+ --_ctm-mob-dn-me-hr-se-tt-an,
1973
+ var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
1974
+ );
1975
+ --_sf-hr-lr-sg: var(
1976
+ --_ctm-mob-dn-me-hr-se-lr-sg,
1977
+ var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
1978
+ );
1979
+ --_sf-hr-le-ht: var(
1980
+ --_ctm-mob-dn-me-hr-se-le-ht,
1981
+ var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
1982
+ );
1931
1983
 
1932
- --_sf-hr-in-se: var(
1933
- --_ctm-mob-dn-me-hr-se-in-se,
1934
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1935
- );
1936
- --_sf-hr-in-se: var(
1937
- --_ctm-mob-dn-me-hr-se-in-se,
1938
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1939
- );
1940
- --_sf-hr-in-c1: var(
1941
- --_ctm-mob-dn-me-hr-se-in-c1,
1942
- var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
1943
- );
1944
- --_sf-hr-ue: var(
1945
- --_ctm-mob-dn-me-hr-se-ue,
1946
- var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
1947
- );
1984
+ --_sf-hr-in-se: var(
1985
+ --_ctm-mob-dn-me-hr-se-in-se,
1986
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1987
+ );
1988
+ --_sf-hr-in-se: var(
1989
+ --_ctm-mob-dn-me-hr-se-in-se,
1990
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1991
+ );
1992
+ --_sf-hr-in-c1: var(
1993
+ --_ctm-mob-dn-me-hr-se-in-c1,
1994
+ var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
1995
+ );
1996
+ --_sf-hr-ue: var(
1997
+ --_ctm-mob-dn-me-hr-se-ue,
1998
+ var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
1999
+ );
1948
2000
 
1949
- // for pading and width
1950
- --_sf-hr-pg: var(
1951
- --_ctm-mob-dn-me-hr-pg,
1952
- var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
1953
- );
1954
- --_sf-hr-wh: var(
1955
- --_ctm-mob-dn-me-hr-wh,
1956
- var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
1957
- );
2001
+ // for pading and width
2002
+ --_sf-hr-pg: var(
2003
+ --_ctm-mob-dn-me-hr-pg,
2004
+ var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
2005
+ );
2006
+ --_sf-hr-wh: var(
2007
+ --_ctm-mob-dn-me-hr-wh,
2008
+ var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
2009
+ );
1958
2010
 
1959
- &[data-hover-show-shadow="false"] {
1960
- --_hover-show-shadow: none;
1961
- }
1962
- &[data-hover-show-icon="false"] {
1963
- --_hover-show-icon: none;
2011
+ &[data-hover-show-shadow="false"] {
2012
+ --_hover-show-shadow: none;
2013
+ }
2014
+ &[data-hover-show-icon="false"] {
2015
+ --_hover-show-icon: none;
2016
+ }
1964
2017
  }
1965
- }
1966
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
2018
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
1967
2019
 
1968
- display: flex;
1969
- flex-direction: var(--_sf-fd-bn);
1970
- align-items: center;
2020
+ display: flex;
2021
+ flex-direction: var(--_sf-fd-bn);
2022
+ align-items: center;
1971
2023
 
1972
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
1973
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
2024
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
2025
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
1974
2026
 
1975
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
1976
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
1977
- height: 100%;
1978
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
2027
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
2028
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
2029
+ height: 100%;
2030
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
1979
2031
 
1980
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
1981
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
1982
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
1983
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
2032
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
2033
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
2034
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
2035
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
1984
2036
 
1985
- &[data-show-border="true"] {
1986
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
2037
+ &[data-show-border="true"] {
2038
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
1987
2039
 
1988
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
2040
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
1989
2041
 
1990
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
1991
- }
2042
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
2043
+ }
1992
2044
 
1993
- .txt {
1994
- display: flex;
2045
+ .txt {
2046
+ display: flex;
1995
2047
 
1996
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
2048
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
1997
2049
 
1998
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
2050
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
1999
2051
 
2000
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2052
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2001
2053
 
2002
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2054
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2003
2055
 
2004
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2056
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2005
2057
 
2006
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2058
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2007
2059
 
2008
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2060
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2009
2061
 
2010
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2062
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2011
2063
 
2012
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2013
- }
2064
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2065
+ }
2014
2066
 
2015
- .icon {
2016
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2017
- svg {
2018
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2019
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2067
+ .icon {
2068
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2069
+ svg {
2070
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2071
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2020
2072
 
2021
- path {
2022
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2073
+ path {
2074
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2075
+ }
2023
2076
  }
2024
2077
  }
2025
- }
2026
- [data-element-style="Text"] {
2027
- display: inline-block;
2028
- width: 100%;
2029
- }
2078
+ [data-element-style="Text"] {
2079
+ display: inline-block;
2080
+ width: 100%;
2081
+ }
2030
2082
 
2031
- .icon--hover {
2032
- // position: absolute;
2033
- // inset: 0;
2034
- // opacity: 0;
2035
- display: none;
2036
- transition: opacity 0.2s ease;
2037
- }
2083
+ .icon--hover {
2084
+ // position: absolute;
2085
+ // inset: 0;
2086
+ // opacity: 0;
2087
+ display: none;
2088
+ transition: opacity 0.2s ease;
2089
+ }
2038
2090
 
2039
- &:hover .icon--hover {
2040
- // opacity: 1;
2041
- display: flex;
2042
- }
2091
+ &:hover .icon--hover {
2092
+ // opacity: 1;
2093
+ display: flex;
2094
+ }
2043
2095
 
2044
- &:hover .icon--default {
2045
- // opacity: 0;
2046
- display: none;
2096
+ &:hover .icon--default {
2097
+ // opacity: 0;
2098
+ display: none;
2099
+ }
2047
2100
  }
2048
2101
  }
2049
2102