@sc-360-v2/storefront-cms-library 0.3.3 → 0.3.5

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