@sc-360-v2/storefront-cms-library 0.4.75 → 0.4.76

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 (18) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/button.scss +299 -292
  3. package/dist/cart-summary.scss +318 -0
  4. package/dist/countdown.scss +774 -751
  5. package/dist/gallery-slider-temp.scss +235 -14
  6. package/dist/product-image.scss +225 -13
  7. package/dist/profile.scss +1 -1
  8. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +30 -0
  9. package/dist/types/builder/tools/element-edit/bundle.d.ts +40 -0
  10. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +20 -0
  11. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +20 -0
  12. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +545 -5
  13. package/dist/types/builder/tools/element-edit/coupon.d.ts +20 -0
  14. package/dist/types/builder/tools/element-edit/embroidery.d.ts +10 -0
  15. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +47 -2
  16. package/dist/types/builder/tools/element-edit/product-image.d.ts +47 -2
  17. package/dist/uom-selector.scss +23 -0
  18. package/package.json +1 -1
package/dist/button.scss CHANGED
@@ -1,292 +1,299 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- @use "./functions.scss" as *;
5
-
6
- [data-div-type="element"] {
7
- &[data-element-type="button"] {
8
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
-
10
- & > .wrapper {
11
- // width: 100%;
12
- height: 100%;
13
- }
14
-
15
- &[data-show-shadow="false"] {
16
- --_show-shadow: none;
17
- }
18
- &[data-icon-position="left"] {
19
- --_sf-fd-bn: row;
20
- }
21
- &[data-icon-position="right"] {
22
- --_sf-fd-bn: row-reverse;
23
- }
24
- &[data-icon-position="center"] {
25
- --_sf-fd-bn: row;
26
- }
27
-
28
- &:hover {
29
- --_sf-hr-bd-cr: var(
30
- --_ctm-mob-dn-hr-se-bd-cr,
31
- var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
32
- );
33
- --_sf-hr-br-cr: var(
34
- --_ctm-mob-dn-hr-se-br-cr,
35
- var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
36
- );
37
- --_sf-hr-br-se: var(
38
- --_ctm-mob-dn-hr-se-br-se,
39
- var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
40
- );
41
- --_sf-hr-br-wh: var(
42
- --_ctm-mob-dn-hr-se-br-wh,
43
- var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
44
- );
45
- --_sf-hr-br-rs: var(
46
- --_ctm-mob-dn-hr-se-br-rs,
47
- var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
48
- );
49
-
50
- // for shadow
51
- --_sf-hr-sw-ae: var(
52
- --_ctm-mob-dn-hr-se-sw-ae,
53
- var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
54
- );
55
- --_sf-hr-sw-br: var(
56
- --_ctm-mob-dn-hr-se-sw-br,
57
- var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br))
58
- );
59
-
60
- --_sf-hr-sw-cr: var(
61
- --_ctm-mob-dn-hr-se-sw-cr,
62
- var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr))
63
- );
64
-
65
- // for font
66
-
67
- --_sf-hr-cr: var(
68
- --_ctm-mob-dn-hr-se-cr,
69
- var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
70
- );
71
- --_sf-hr-ft-fy: var(
72
- --_ctm-mob-dn-hr-se-ft-fy,
73
- var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
74
- );
75
- --_sf-hr-ft-se: var(
76
- --_ctm-mob-dn-hr-se-ft-se,
77
- var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
78
- );
79
- --_sf-hr-ft-wt: var(
80
- --_ctm-mob-dn-hr-se-ft-wt,
81
- var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
82
- );
83
- --_sf-hr-ft-se-ic: var(
84
- --_ctm-mob-dn-hr-se-ft-se-ic,
85
- var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
86
- );
87
- --_sf-hr-tt-an: var(
88
- --_ctm-mob-dn-hr-se-tt-an,
89
- var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
90
- );
91
- --_sf-hr-lr-sg: var(
92
- --_ctm-mob-dn-hr-se-lr-sg,
93
- var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
94
- );
95
- --_sf-hr-le-ht: var(
96
- --_ctm-mob-dn-hr-se-le-ht,
97
- var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
98
- );
99
-
100
- --_sf-hr-in-se: var(
101
- --_ctm-mob-dn-hr-se-in-se,
102
- var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
103
- );
104
-
105
- --_sf-hr-in-c1: var(
106
- --_ctm-mob-dn-hr-se-in-c1,
107
- var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
108
- );
109
- --_sf-hr-ue: var(
110
- --_ctm-mob-dn-hr-se-ue,
111
- var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
112
- );
113
-
114
- &[data-hover-show-shadow="false"] {
115
- --_hover-show-shadow: none;
116
- }
117
- &[data-hover-show-icon="false"] {
118
- --_hover-show-icon: none;
119
- }
120
- }
121
- &[data-show-icon="false"] {
122
- --_show-icon: none;
123
- }
124
- &[data-element-style="Icon"] {
125
- &[data-icon-position="left"] {
126
- --_sf-jc: start;
127
- }
128
- &[data-icon-position="right"] {
129
- --_sf-jc: end;
130
- }
131
- &[data-icon-position="center"] {
132
- --_sf-jc: center;
133
- }
134
- }
135
-
136
- .btn__with__text {
137
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dt-se-bd-cr));
138
-
139
- padding: prepareMediaVariable(--_ctm-lt-pg);
140
- display: flex;
141
- flex-direction: var(--_sf-fd-bn);
142
- align-items: center;
143
-
144
- justify-content: prepareMediaVariable(--_ctm-lt-at);
145
- gap: prepareMediaVariable(--_ctm-lt-gp);
146
-
147
- width: 100%;
148
- height: 100%;
149
-
150
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dt-se-br-rs));
151
-
152
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dt-se-sw-ae))
153
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dt-se-sw-br))
154
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dt-se-sw-sd))
155
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dt-se-sw-cr));
156
-
157
- &[data-show-border="true"] {
158
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));
159
-
160
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dt-se-br-se));
161
-
162
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dt-se-br-wh));
163
- }
164
-
165
- .txt {
166
- display: flex;
167
-
168
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dt-se-cr));
169
-
170
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
171
-
172
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));
173
-
174
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dt-se-ft-wt));
175
-
176
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dt-se-ft-se-ic));
177
-
178
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dt-se-tt-an));
179
-
180
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dt-se-lr-sg));
181
-
182
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));
183
-
184
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
185
- // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
186
- }
187
-
188
- .icon {
189
- display: var(--_hover-show-icon, var(--_show-icon, flex));
190
- svg {
191
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
192
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
193
-
194
- path {
195
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dt-se-in-c1));
196
- }
197
- }
198
- }
199
- [data-element-style="Text"] {
200
- display: inline-block;
201
- width: 100%;
202
- }
203
-
204
- .icon--hover {
205
- // position: absolute;
206
- // inset: 0;
207
- // opacity: 0;
208
- display: none;
209
- transition: opacity 0.2s ease;
210
- }
211
-
212
- &:hover .icon--hover {
213
- // opacity: 1;
214
- display: flex;
215
- }
216
-
217
- &:hover .icon--default {
218
- // opacity: 0;
219
- display: none;
220
- }
221
- }
222
- }
223
- }
224
-
225
- .action__button {
226
- display: flex;
227
- justify-content: center;
228
- align-items: center;
229
- border-radius: 4px;
230
- gap: 8px;
231
- & > span {
232
- display: flex;
233
- }
234
-
235
- &.btn__sm {
236
- padding-inline: 16px;
237
- font-size: 14px;
238
- svg {
239
- width: 16px;
240
- height: 16px;
241
- }
242
- }
243
- &.btn__md {
244
- padding-inline: 24px;
245
- font-size: 18px;
246
- svg {
247
- width: 20px;
248
- height: 20px;
249
- }
250
- }
251
- &.btn__lg {
252
- padding-inline: 32px;
253
- font-size: 24px;
254
- svg {
255
- width: 24px;
256
- height: 24px;
257
- }
258
- }
259
-
260
- &.primary {
261
- background-color: var(--_primary-400);
262
- color: var(--_base-white);
263
-
264
- &:hover {
265
- background-color: var(--_primary-500);
266
- color: var(--_base-white);
267
- }
268
- }
269
- &.secondary {
270
- background-color: var(--_gray-100);
271
- color: var(--_gray-700);
272
- &:hover {
273
- background-color: var(--_gray-200);
274
- color: var(--_gray-900);
275
- }
276
- }
277
- &.tertiary {
278
- background-color: transparent;
279
- &.primary__txt {
280
- color: var(--_primary-400);
281
- &:hover {
282
- color: var(--_primary-500);
283
- }
284
- }
285
- &.secondary__txt {
286
- color: var(--_gray-700);
287
- &:hover {
288
- color: var(--_gray-900);
289
- }
290
- }
291
- }
292
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ @use "./functions.scss" as *;
5
+
6
+ [data-div-type="element"] {
7
+ &[data-element-type="button"] {
8
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
+
10
+ & > .wrapper {
11
+ // width: 100%;
12
+ height: 100%;
13
+ }
14
+
15
+ &[data-show-shadow="false"] {
16
+ --_show-shadow: none;
17
+ }
18
+ &[data-icon-position="left"] {
19
+ --_sf-fd-bn: row;
20
+ }
21
+ &[data-icon-position="right"] {
22
+ --_sf-fd-bn: row-reverse;
23
+ }
24
+ &[data-icon-position="center"] {
25
+ --_sf-fd-bn: row;
26
+ }
27
+
28
+ &:hover {
29
+ --_sf-hr-bd-cr: var(
30
+ --_ctm-mob-dn-hr-se-bd-cr,
31
+ var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
32
+ );
33
+ --_sf-hr-br-cr: var(
34
+ --_ctm-mob-dn-hr-se-br-cr,
35
+ var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
36
+ );
37
+ --_sf-hr-br-se: var(
38
+ --_ctm-mob-dn-hr-se-br-se,
39
+ var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
40
+ );
41
+ --_sf-hr-br-wh: var(
42
+ --_ctm-mob-dn-hr-se-br-wh,
43
+ var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
44
+ );
45
+ --_sf-hr-br-rs: var(
46
+ --_ctm-mob-dn-hr-se-br-rs,
47
+ var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
48
+ );
49
+
50
+ // for shadow
51
+ --_sf-hr-sw-ae: var(
52
+ --_ctm-mob-dn-hr-se-sw-ae,
53
+ var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
54
+ );
55
+ --_sf-hr-sw-br: var(
56
+ --_ctm-mob-dn-hr-se-sw-br,
57
+ var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br))
58
+ );
59
+
60
+ --_sf-hr-sw-cr: var(
61
+ --_ctm-mob-dn-hr-se-sw-cr,
62
+ var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr))
63
+ );
64
+
65
+ // for font
66
+
67
+ --_sf-hr-cr: var(
68
+ --_ctm-mob-dn-hr-se-cr,
69
+ var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
70
+ );
71
+ --_sf-hr-ft-fy: var(
72
+ --_ctm-mob-dn-hr-se-ft-fy,
73
+ var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
74
+ );
75
+ --_sf-hr-ft-se: var(
76
+ --_ctm-mob-dn-hr-se-ft-se,
77
+ var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
78
+ );
79
+ --_sf-hr-ft-wt: var(
80
+ --_ctm-mob-dn-hr-se-ft-wt,
81
+ var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
82
+ );
83
+ --_sf-hr-ft-se-ic: var(
84
+ --_ctm-mob-dn-hr-se-ft-se-ic,
85
+ var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
86
+ );
87
+ --_sf-hr-tt-an: var(
88
+ --_ctm-mob-dn-hr-se-tt-an,
89
+ var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
90
+ );
91
+ --_sf-hr-lr-sg: var(
92
+ --_ctm-mob-dn-hr-se-lr-sg,
93
+ var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
94
+ );
95
+ --_sf-hr-le-ht: var(
96
+ --_ctm-mob-dn-hr-se-le-ht,
97
+ var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
98
+ );
99
+
100
+ --_sf-hr-txt-tr: var(
101
+ --_ctm-mob-dn-hr-se-tt-tm,
102
+ var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
103
+ );
104
+
105
+ --_sf-hr-in-se: var(
106
+ --_ctm-mob-dn-hr-se-in-se,
107
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
108
+ );
109
+
110
+ --_sf-hr-in-c1: var(
111
+ --_ctm-mob-dn-hr-se-in-c1,
112
+ var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
113
+ );
114
+ --_sf-hr-ue: var(
115
+ --_ctm-mob-dn-hr-se-ue,
116
+ var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
117
+ );
118
+
119
+ &[data-hover-show-shadow="false"] {
120
+ --_hover-show-shadow: none;
121
+ }
122
+ &[data-hover-show-icon="false"] {
123
+ --_hover-show-icon: none;
124
+ }
125
+ }
126
+ &[data-show-icon="false"] {
127
+ --_show-icon: none;
128
+ }
129
+ &[data-element-style="Icon"] {
130
+ &[data-icon-position="left"] {
131
+ --_sf-jc: start;
132
+ }
133
+ &[data-icon-position="right"] {
134
+ --_sf-jc: end;
135
+ }
136
+ &[data-icon-position="center"] {
137
+ --_sf-jc: center;
138
+ }
139
+ }
140
+
141
+ .btn__with__text {
142
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dt-se-bd-cr));
143
+
144
+ padding: prepareMediaVariable(--_ctm-lt-pg);
145
+ display: flex;
146
+ flex-direction: var(--_sf-fd-bn);
147
+ align-items: center;
148
+
149
+ justify-content: prepareMediaVariable(--_ctm-lt-at);
150
+ gap: prepareMediaVariable(--_ctm-lt-gp);
151
+
152
+ width: 100%;
153
+ height: 100%;
154
+
155
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dt-se-br-rs));
156
+
157
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dt-se-sw-ae))
158
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dt-se-sw-br))
159
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dt-se-sw-sd))
160
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dt-se-sw-cr));
161
+
162
+ &[data-show-border="true"] {
163
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));
164
+
165
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dt-se-br-se));
166
+
167
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dt-se-br-wh));
168
+ }
169
+
170
+ .txt {
171
+ display: flex;
172
+
173
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dt-se-cr));
174
+
175
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
176
+
177
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));
178
+
179
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dt-se-ft-wt));
180
+
181
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dt-se-ft-se-ic));
182
+
183
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dt-se-tt-an));
184
+
185
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dt-se-lr-sg));
186
+
187
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));
188
+
189
+ text-transform: var(--_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm, normal));
190
+
191
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
192
+ // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
193
+ }
194
+
195
+ .icon {
196
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
197
+ svg {
198
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
199
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
200
+
201
+ path {
202
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dt-se-in-c1));
203
+ }
204
+ }
205
+ }
206
+ [data-element-style="Text"] {
207
+ display: inline-block;
208
+ width: 100%;
209
+ }
210
+
211
+ .icon--hover {
212
+ // position: absolute;
213
+ // inset: 0;
214
+ // opacity: 0;
215
+ display: none;
216
+ transition: opacity 0.2s ease;
217
+ }
218
+
219
+ &:hover .icon--hover {
220
+ // opacity: 1;
221
+ display: flex;
222
+ }
223
+
224
+ &:hover .icon--default {
225
+ // opacity: 0;
226
+ display: none;
227
+ }
228
+ }
229
+ }
230
+ }
231
+
232
+ .action__button {
233
+ display: flex;
234
+ justify-content: center;
235
+ align-items: center;
236
+ border-radius: 4px;
237
+ gap: 8px;
238
+ & > span {
239
+ display: flex;
240
+ }
241
+
242
+ &.btn__sm {
243
+ padding-inline: 16px;
244
+ font-size: 14px;
245
+ svg {
246
+ width: 16px;
247
+ height: 16px;
248
+ }
249
+ }
250
+ &.btn__md {
251
+ padding-inline: 24px;
252
+ font-size: 18px;
253
+ svg {
254
+ width: 20px;
255
+ height: 20px;
256
+ }
257
+ }
258
+ &.btn__lg {
259
+ padding-inline: 32px;
260
+ font-size: 24px;
261
+ svg {
262
+ width: 24px;
263
+ height: 24px;
264
+ }
265
+ }
266
+
267
+ &.primary {
268
+ background-color: var(--_primary-400);
269
+ color: var(--_base-white);
270
+
271
+ &:hover {
272
+ background-color: var(--_primary-500);
273
+ color: var(--_base-white);
274
+ }
275
+ }
276
+ &.secondary {
277
+ background-color: var(--_gray-100);
278
+ color: var(--_gray-700);
279
+ &:hover {
280
+ background-color: var(--_gray-200);
281
+ color: var(--_gray-900);
282
+ }
283
+ }
284
+ &.tertiary {
285
+ background-color: transparent;
286
+ &.primary__txt {
287
+ color: var(--_primary-400);
288
+ &:hover {
289
+ color: var(--_primary-500);
290
+ }
291
+ }
292
+ &.secondary__txt {
293
+ color: var(--_gray-700);
294
+ &:hover {
295
+ color: var(--_gray-900);
296
+ }
297
+ }
298
+ }
299
+ }