@commandcenterio/convert-ui 0.0.5 → 0.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/index.js +193 -325
  2. package/dist/index.mjs +143 -251
  3. package/package.json +1 -1
  4. package/dist/index.css +0 -752
package/dist/index.css DELETED
@@ -1,752 +0,0 @@
1
- /* src/CookieConsentForm/cookieformstyles.module.css */
2
- .container {
3
- z-index: 100;
4
- height: auto;
5
- width: 100%;
6
- max-width: 350px;
7
- border-radius: var(--rounded-box, 1rem);
8
- padding: 1rem;
9
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
10
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
11
- box-shadow:
12
- var(--tw-ring-offset-shadow, 0 0 #0000),
13
- var(--tw-ring-shadow, 0 0 #0000),
14
- var(--tw-shadow);
15
- container-type: inline-size;
16
- }
17
- .header {
18
- margin-bottom: 1rem;
19
- font-size: 1.25rem;
20
- line-height: 1.75rem;
21
- font-weight: 600;
22
- }
23
- .text {
24
- margin-bottom: 1rem;
25
- font-size: 0.875rem;
26
- line-height: 1.25rem;
27
- }
28
- .button_container {
29
- display: flex;
30
- align-items: center;
31
- justify-content: flex-start;
32
- gap: 0.5rem;
33
- }
34
- .accept_button {
35
- display: inline-flex;
36
- height: 3rem;
37
- min-height: 3rem;
38
- flex-shrink: 0;
39
- cursor: pointer;
40
- -webkit-user-select: none;
41
- -moz-user-select: none;
42
- user-select: none;
43
- flex-wrap: wrap;
44
- align-items: center;
45
- justify-content: center;
46
- border-radius: var(--rounded-btn, 0.5rem);
47
- border-color: transparent;
48
- border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
49
- padding-left: 1rem;
50
- padding-right: 1rem;
51
- text-align: center;
52
- font-size: 0.875rem;
53
- line-height: 1em;
54
- gap: 0.5rem;
55
- font-weight: 600;
56
- text-decoration-line: none;
57
- transition-duration: 200ms;
58
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
59
- border-width: var(--border-btn, 1px);
60
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
61
- transition-property:
62
- color,
63
- background-color,
64
- border-color,
65
- opacity,
66
- box-shadow,
67
- transform;
68
- --tw-text-opacity: 1;
69
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
70
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
71
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
72
- box-shadow:
73
- var(--tw-ring-offset-shadow, 0 0 #0000),
74
- var(--tw-ring-shadow, 0 0 #0000),
75
- var(--tw-shadow);
76
- outline-color: var(--fallback-bc,oklch(var(--bc)/1));
77
- background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
78
- --tw-bg-opacity: 1;
79
- --tw-border-opacity: 1 ;
80
- }
81
- .accept_button[disabled],
82
- .accept_button:disabled {
83
- pointer-events: none;
84
- }
85
- :where(.accept_button:is(input[type=checkbox])),
86
- :where(.accept_button:is(input[type=radio])) {
87
- width: auto;
88
- -webkit-appearance: none;
89
- -moz-appearance: none;
90
- appearance: none;
91
- }
92
- .accept_button:is(input[type=checkbox]):after,
93
- .accept_button:is(input[type=radio]):after {
94
- --tw-content: attr(aria-label);
95
- content: var(--tw-content);
96
- }
97
- @media (hover: hover) {
98
- .accept_button:hover {
99
- --tw-border-opacity: 1;
100
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
101
- --tw-bg-opacity: 1;
102
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
103
- }
104
- @supports (color: color-mix(in oklab, black, black)) {
105
- .accept_button:hover {
106
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
107
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
108
- }
109
- }
110
- @supports not (color: oklch(0 0 0)) {
111
- .accept_button:hover {
112
- background-color: var(--btn-color, var(--fallback-b2));
113
- border-color: var(--btn-color, var(--fallback-b2));
114
- }
115
- }
116
- .accept_button:hover {
117
- --tw-border-opacity: 1;
118
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
119
- --tw-bg-opacity: 1;
120
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
121
- }
122
- @supports (color: color-mix(in oklab, black, black)) {
123
- .accept_button:hover {
124
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
125
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
126
- }
127
- }
128
- @supports not (color: oklch(0 0 0)) {
129
- .accept_button:hover {
130
- background-color: var(--btn-color, var(--fallback-b2));
131
- border-color: var(--btn-color, var(--fallback-b2));
132
- }
133
- }
134
- .accept_button:hover {
135
- --tw-border-opacity: 1;
136
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
137
- --tw-bg-opacity: 1;
138
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
139
- }
140
- @supports (color: color-mix(in oklab, black, black)) {
141
- .accept_button:hover {
142
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
143
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
144
- }
145
- }
146
- @supports not (color: oklch(0 0 0)) {
147
- .accept_button:hover {
148
- background-color: var(--btn-color, var(--fallback-b2));
149
- border-color: var(--btn-color, var(--fallback-b2));
150
- }
151
- }
152
- .accept_button.glass:hover {
153
- --glass-opacity: 25%;
154
- --glass-border-opacity: 15% ;
155
- }
156
- .btn-outline.accept_button:hover {
157
- --tw-text-opacity: 1;
158
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
159
- }
160
- @supports (color: color-mix(in oklab, black, black)) {
161
- .btn-outline.accept_button:hover {
162
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
163
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
164
- }
165
- }
166
- .btn-outline.accept_button:hover {
167
- --tw-text-opacity: 1;
168
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
169
- }
170
- @supports (color: color-mix(in oklab, black, black)) {
171
- .btn-outline.accept_button:hover {
172
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
173
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
174
- }
175
- }
176
- .accept_button[disabled]:hover,
177
- .accept_button:disabled:hover {
178
- --tw-border-opacity: 0;
179
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
180
- --tw-bg-opacity: 0.2;
181
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
182
- --tw-text-opacity: 0.2 ;
183
- }
184
- @supports (color: color-mix(in oklab, black, black)) {
185
- .accept_button:is(input[type=checkbox]:checked):hover,
186
- .accept_button:is(input[type=radio]:checked):hover {
187
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
188
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
189
- }
190
- }
191
- }
192
- .accept_button:active:hover,
193
- .accept_button:active:focus {
194
- animation: button-pop 0s ease-out;
195
- transform: scale(var(--btn-focus-scale, 0.97));
196
- }
197
- @supports not (color: oklch(0 0 0)) {
198
- .accept_button {
199
- background-color: var(--btn-color, var(--fallback-b2));
200
- border-color: var(--btn-color, var(--fallback-b2));
201
- --btn-color: var(--fallback-p) ;
202
- }
203
- }
204
- @supports (color: color-mix(in oklab, black, black)) {
205
- .btn-outline.accept_button.btn-active {
206
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
207
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
208
- }
209
- }
210
- .accept_button:focus-visible {
211
- outline-style: solid;
212
- outline-width: 2px;
213
- outline-offset: 2px;
214
- }
215
- .accept_button {
216
- --tw-text-opacity: 1;
217
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
218
- outline-color: var(--fallback-p,oklch(var(--p)/1));
219
- }
220
- @supports (color: oklch(0 0 0)) {
221
- .accept_button {
222
- --btn-color: var(--p) ;
223
- }
224
- }
225
- .accept_button.glass {
226
- --tw-shadow: 0 0 #0000;
227
- --tw-shadow-colored: 0 0 #0000;
228
- box-shadow:
229
- var(--tw-ring-offset-shadow, 0 0 #0000),
230
- var(--tw-ring-shadow, 0 0 #0000),
231
- var(--tw-shadow);
232
- outline-color: currentColor;
233
- }
234
- .accept_button.glass.btn-active {
235
- --glass-opacity: 25%;
236
- --glass-border-opacity: 15% ;
237
- }
238
- .btn-outline.accept_button {
239
- --tw-text-opacity: 1;
240
- color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
241
- }
242
- .btn-outline.accept_button.btn-active {
243
- --tw-text-opacity: 1;
244
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
245
- }
246
- .accept_button.btn-disabled,
247
- .accept_button[disabled],
248
- .accept_button:disabled {
249
- --tw-border-opacity: 0;
250
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
251
- --tw-bg-opacity: 0.2;
252
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
253
- --tw-text-opacity: 0.2 ;
254
- }
255
- .accept_button:is(input[type=checkbox]:checked),
256
- .accept_button:is(input[type=radio]:checked) {
257
- --tw-border-opacity: 1;
258
- border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
259
- --tw-bg-opacity: 1;
260
- background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
261
- --tw-text-opacity: 1;
262
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
263
- }
264
- .accept_button:is(input[type=checkbox]:checked):focus-visible,
265
- .accept_button:is(input[type=radio]:checked):focus-visible {
266
- outline-color: var(--fallback-p,oklch(var(--p)/1));
267
- }
268
- .accept_button {
269
- height: 2rem;
270
- min-height: 2rem;
271
- padding-left: 0.75rem;
272
- padding-right: 0.75rem;
273
- font-size: 0.875rem;
274
- }
275
- .btn-square:where(.accept_button) {
276
- height: 2rem;
277
- width: 2rem;
278
- padding: 0px;
279
- }
280
- .btn-circle:where(.accept_button) {
281
- height: 2rem;
282
- width: 2rem;
283
- border-radius: 9999px;
284
- padding: 0px;
285
- }
286
- .accept_button {
287
- border-radius: var(--rounded-box, 1rem);
288
- }
289
- .reject_button {
290
- display: inline-flex;
291
- height: 3rem;
292
- min-height: 3rem;
293
- flex-shrink: 0;
294
- cursor: pointer;
295
- -webkit-user-select: none;
296
- -moz-user-select: none;
297
- user-select: none;
298
- flex-wrap: wrap;
299
- align-items: center;
300
- justify-content: center;
301
- border-radius: var(--rounded-btn, 0.5rem);
302
- border-color: transparent;
303
- border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
304
- padding-left: 1rem;
305
- padding-right: 1rem;
306
- text-align: center;
307
- font-size: 0.875rem;
308
- line-height: 1em;
309
- gap: 0.5rem;
310
- font-weight: 600;
311
- text-decoration-line: none;
312
- transition-duration: 200ms;
313
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
314
- border-width: var(--border-btn, 1px);
315
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
316
- transition-property:
317
- color,
318
- background-color,
319
- border-color,
320
- opacity,
321
- box-shadow,
322
- transform;
323
- --tw-text-opacity: 1;
324
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
325
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
326
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
327
- box-shadow:
328
- var(--tw-ring-offset-shadow, 0 0 #0000),
329
- var(--tw-ring-shadow, 0 0 #0000),
330
- var(--tw-shadow);
331
- outline-color: var(--fallback-bc,oklch(var(--bc)/1));
332
- background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
333
- --tw-bg-opacity: 1;
334
- --tw-border-opacity: 1 ;
335
- }
336
- .reject_button[disabled],
337
- .reject_button:disabled {
338
- pointer-events: none;
339
- }
340
- :where(.reject_button:is(input[type=checkbox])),
341
- :where(.reject_button:is(input[type=radio])) {
342
- width: auto;
343
- -webkit-appearance: none;
344
- -moz-appearance: none;
345
- appearance: none;
346
- }
347
- .reject_button:is(input[type=checkbox]):after,
348
- .reject_button:is(input[type=radio]):after {
349
- --tw-content: attr(aria-label);
350
- content: var(--tw-content);
351
- }
352
- @media (hover: hover) {
353
- .reject_button:hover {
354
- --tw-border-opacity: 1;
355
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
356
- --tw-bg-opacity: 1;
357
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
358
- }
359
- @supports (color: color-mix(in oklab, black, black)) {
360
- .reject_button:hover {
361
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
362
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
363
- }
364
- }
365
- @supports not (color: oklch(0 0 0)) {
366
- .reject_button:hover {
367
- background-color: var(--btn-color, var(--fallback-b2));
368
- border-color: var(--btn-color, var(--fallback-b2));
369
- }
370
- }
371
- .reject_button:hover {
372
- --tw-border-opacity: 1;
373
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
374
- --tw-bg-opacity: 1;
375
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
376
- }
377
- @supports (color: color-mix(in oklab, black, black)) {
378
- .reject_button:hover {
379
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
380
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
381
- }
382
- }
383
- @supports not (color: oklch(0 0 0)) {
384
- .reject_button:hover {
385
- background-color: var(--btn-color, var(--fallback-b2));
386
- border-color: var(--btn-color, var(--fallback-b2));
387
- }
388
- }
389
- .reject_button:hover {
390
- --tw-border-opacity: 1;
391
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
392
- --tw-bg-opacity: 1;
393
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
394
- }
395
- @supports (color: color-mix(in oklab, black, black)) {
396
- .reject_button:hover {
397
- background-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
398
- border-color: color-mix(in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
399
- }
400
- }
401
- @supports not (color: oklch(0 0 0)) {
402
- .reject_button:hover {
403
- background-color: var(--btn-color, var(--fallback-b2));
404
- border-color: var(--btn-color, var(--fallback-b2));
405
- }
406
- }
407
- .reject_button.glass:hover {
408
- --glass-opacity: 25%;
409
- --glass-border-opacity: 15% ;
410
- }
411
- .reject_button:hover {
412
- --tw-border-opacity: 1;
413
- border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
414
- --tw-bg-opacity: 1;
415
- background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
416
- --tw-text-opacity: 1;
417
- color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
418
- }
419
- .reject_button.btn-primary:hover {
420
- --tw-text-opacity: 1;
421
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
422
- }
423
- @supports (color: color-mix(in oklab, black, black)) {
424
- .reject_button.btn-primary:hover {
425
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
426
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
427
- }
428
- }
429
- .reject_button.btn-primary:hover {
430
- --tw-text-opacity: 1;
431
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
432
- }
433
- @supports (color: color-mix(in oklab, black, black)) {
434
- .reject_button.btn-primary:hover {
435
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
436
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
437
- }
438
- }
439
- .reject_button.btn-secondary:hover {
440
- --tw-text-opacity: 1;
441
- color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
442
- }
443
- @supports (color: color-mix(in oklab, black, black)) {
444
- .reject_button.btn-secondary:hover {
445
- background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
446
- border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
447
- }
448
- }
449
- .reject_button.btn-secondary:hover {
450
- --tw-text-opacity: 1;
451
- color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
452
- }
453
- @supports (color: color-mix(in oklab, black, black)) {
454
- .reject_button.btn-secondary:hover {
455
- background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
456
- border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
457
- }
458
- }
459
- .reject_button.btn-accent:hover {
460
- --tw-text-opacity: 1;
461
- color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
462
- }
463
- @supports (color: color-mix(in oklab, black, black)) {
464
- .reject_button.btn-accent:hover {
465
- background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
466
- border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
467
- }
468
- }
469
- .reject_button.btn-accent:hover {
470
- --tw-text-opacity: 1;
471
- color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
472
- }
473
- @supports (color: color-mix(in oklab, black, black)) {
474
- .reject_button.btn-accent:hover {
475
- background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
476
- border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
477
- }
478
- }
479
- .reject_button.btn-success:hover {
480
- --tw-text-opacity: 1;
481
- color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
482
- }
483
- @supports (color: color-mix(in oklab, black, black)) {
484
- .reject_button.btn-success:hover {
485
- background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
486
- border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
487
- }
488
- }
489
- .reject_button.btn-success:hover {
490
- --tw-text-opacity: 1;
491
- color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
492
- }
493
- @supports (color: color-mix(in oklab, black, black)) {
494
- .reject_button.btn-success:hover {
495
- background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
496
- border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
497
- }
498
- }
499
- .reject_button.btn-info:hover {
500
- --tw-text-opacity: 1;
501
- color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
502
- }
503
- @supports (color: color-mix(in oklab, black, black)) {
504
- .reject_button.btn-info:hover {
505
- background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
506
- border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
507
- }
508
- }
509
- .reject_button.btn-info:hover {
510
- --tw-text-opacity: 1;
511
- color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
512
- }
513
- @supports (color: color-mix(in oklab, black, black)) {
514
- .reject_button.btn-info:hover {
515
- background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
516
- border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
517
- }
518
- }
519
- .reject_button.btn-warning:hover {
520
- --tw-text-opacity: 1;
521
- color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
522
- }
523
- @supports (color: color-mix(in oklab, black, black)) {
524
- .reject_button.btn-warning:hover {
525
- background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
526
- border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
527
- }
528
- }
529
- .reject_button.btn-warning:hover {
530
- --tw-text-opacity: 1;
531
- color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
532
- }
533
- @supports (color: color-mix(in oklab, black, black)) {
534
- .reject_button.btn-warning:hover {
535
- background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
536
- border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
537
- }
538
- }
539
- .reject_button.btn-error:hover {
540
- --tw-text-opacity: 1;
541
- color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
542
- }
543
- @supports (color: color-mix(in oklab, black, black)) {
544
- .reject_button.btn-error:hover {
545
- background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
546
- border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
547
- }
548
- }
549
- .reject_button.btn-error:hover {
550
- --tw-text-opacity: 1;
551
- color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
552
- }
553
- @supports (color: color-mix(in oklab, black, black)) {
554
- .reject_button.btn-error:hover {
555
- background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
556
- border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
557
- }
558
- }
559
- .reject_button[disabled]:hover,
560
- .reject_button:disabled:hover {
561
- --tw-border-opacity: 0;
562
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
563
- --tw-bg-opacity: 0.2;
564
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
565
- --tw-text-opacity: 0.2 ;
566
- }
567
- @supports (color: color-mix(in oklab, black, black)) {
568
- .reject_button:is(input[type=checkbox]:checked):hover,
569
- .reject_button:is(input[type=radio]:checked):hover {
570
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
571
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
572
- }
573
- }
574
- }
575
- .reject_button:active:hover,
576
- .reject_button:active:focus {
577
- animation: button-pop 0s ease-out;
578
- transform: scale(var(--btn-focus-scale, 0.97));
579
- }
580
- @supports not (color: oklch(0 0 0)) {
581
- .reject_button {
582
- background-color: var(--btn-color, var(--fallback-b2));
583
- border-color: var(--btn-color, var(--fallback-b2));
584
- }
585
- }
586
- @supports (color: color-mix(in oklab, black, black)) {
587
- .reject_button.btn-primary.btn-active {
588
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
589
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
590
- }
591
- .reject_button.btn-secondary.btn-active {
592
- background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
593
- border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
594
- }
595
- .reject_button.btn-accent.btn-active {
596
- background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
597
- border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
598
- }
599
- .reject_button.btn-success.btn-active {
600
- background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
601
- border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
602
- }
603
- .reject_button.btn-info.btn-active {
604
- background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
605
- border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
606
- }
607
- .reject_button.btn-warning.btn-active {
608
- background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
609
- border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
610
- }
611
- .reject_button.btn-error.btn-active {
612
- background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
613
- border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
614
- }
615
- }
616
- .reject_button:focus-visible {
617
- outline-style: solid;
618
- outline-width: 2px;
619
- outline-offset: 2px;
620
- }
621
- .reject_button.glass {
622
- --tw-shadow: 0 0 #0000;
623
- --tw-shadow-colored: 0 0 #0000;
624
- box-shadow:
625
- var(--tw-ring-offset-shadow, 0 0 #0000),
626
- var(--tw-ring-shadow, 0 0 #0000),
627
- var(--tw-shadow);
628
- outline-color: currentColor;
629
- }
630
- .reject_button.glass.btn-active {
631
- --glass-opacity: 25%;
632
- --glass-border-opacity: 15% ;
633
- }
634
- .reject_button {
635
- border-color: currentColor;
636
- background-color: transparent;
637
- --tw-text-opacity: 1;
638
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
639
- --tw-shadow: 0 0 #0000;
640
- --tw-shadow-colored: 0 0 #0000;
641
- box-shadow:
642
- var(--tw-ring-offset-shadow, 0 0 #0000),
643
- var(--tw-ring-shadow, 0 0 #0000),
644
- var(--tw-shadow);
645
- }
646
- .reject_button.btn-active {
647
- --tw-border-opacity: 1;
648
- border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
649
- --tw-bg-opacity: 1;
650
- background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
651
- --tw-text-opacity: 1;
652
- color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
653
- }
654
- .reject_button.btn-primary {
655
- --tw-text-opacity: 1;
656
- color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
657
- }
658
- .reject_button.btn-primary.btn-active {
659
- --tw-text-opacity: 1;
660
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
661
- }
662
- .reject_button.btn-secondary {
663
- --tw-text-opacity: 1;
664
- color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
665
- }
666
- .reject_button.btn-secondary.btn-active {
667
- --tw-text-opacity: 1;
668
- color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
669
- }
670
- .reject_button.btn-accent {
671
- --tw-text-opacity: 1;
672
- color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
673
- }
674
- .reject_button.btn-accent.btn-active {
675
- --tw-text-opacity: 1;
676
- color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
677
- }
678
- .reject_button.btn-success {
679
- --tw-text-opacity: 1;
680
- color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
681
- }
682
- .reject_button.btn-success.btn-active {
683
- --tw-text-opacity: 1;
684
- color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
685
- }
686
- .reject_button.btn-info {
687
- --tw-text-opacity: 1;
688
- color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
689
- }
690
- .reject_button.btn-info.btn-active {
691
- --tw-text-opacity: 1;
692
- color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
693
- }
694
- .reject_button.btn-warning {
695
- --tw-text-opacity: 1;
696
- color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
697
- }
698
- .reject_button.btn-warning.btn-active {
699
- --tw-text-opacity: 1;
700
- color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
701
- }
702
- .reject_button.btn-error {
703
- --tw-text-opacity: 1;
704
- color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
705
- }
706
- .reject_button.btn-error.btn-active {
707
- --tw-text-opacity: 1;
708
- color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
709
- }
710
- .reject_button.btn-disabled,
711
- .reject_button[disabled],
712
- .reject_button:disabled {
713
- --tw-border-opacity: 0;
714
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
715
- --tw-bg-opacity: 0.2;
716
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
717
- --tw-text-opacity: 0.2 ;
718
- }
719
- .reject_button:is(input[type=checkbox]:checked),
720
- .reject_button:is(input[type=radio]:checked) {
721
- --tw-border-opacity: 1;
722
- border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
723
- --tw-bg-opacity: 1;
724
- background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
725
- --tw-text-opacity: 1;
726
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
727
- }
728
- .reject_button:is(input[type=checkbox]:checked):focus-visible,
729
- .reject_button:is(input[type=radio]:checked):focus-visible {
730
- outline-color: var(--fallback-p,oklch(var(--p)/1));
731
- }
732
- .reject_button {
733
- height: 2rem;
734
- min-height: 2rem;
735
- padding-left: 0.75rem;
736
- padding-right: 0.75rem;
737
- font-size: 0.875rem;
738
- }
739
- .btn-square:where(.reject_button) {
740
- height: 2rem;
741
- width: 2rem;
742
- padding: 0px;
743
- }
744
- .btn-circle:where(.reject_button) {
745
- height: 2rem;
746
- width: 2rem;
747
- border-radius: 9999px;
748
- padding: 0px;
749
- }
750
- .reject_button {
751
- border-radius: var(--rounded-box, 1rem);
752
- }