@commandcenterio/convert-ui 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/dist/index.css +752 -0
  2. package/dist/index.d.mts +288 -0
  3. package/dist/index.d.ts +288 -0
  4. package/dist/index.js +1095 -0
  5. package/dist/index.mjs +1038 -0
  6. package/package.json +41 -0
package/dist/index.css ADDED
@@ -0,0 +1,752 @@
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
+ }