daisyui 2.52.0 → 3.0.0

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 (26) hide show
  1. package/README.md +18 -20
  2. package/dist/base.js +1 -1
  3. package/dist/full.css +52293 -1
  4. package/dist/styled.css +1486 -1568
  5. package/dist/styled.js +1 -1
  6. package/dist/styled.rtl.js +1 -1
  7. package/dist/themes.css +602 -700
  8. package/dist/unstyled.css +315 -431
  9. package/dist/unstyled.js +1 -1
  10. package/dist/unstyled.rtl.js +1 -1
  11. package/dist/utilities-styled.js +1 -1
  12. package/dist/utilities-unstyled.js +1 -1
  13. package/dist/utilities.js +1 -1
  14. package/package.json +18 -22
  15. package/src/index.js +119 -78
  16. package/src/lib/addPrefix.js +104 -0
  17. package/src/lib/responsiveRegex.js +5 -14
  18. package/src/{colors → theming}/colorNames.js +9 -9
  19. package/src/theming/functions.js +269 -0
  20. package/src/theming/index.js +39 -0
  21. package/src/theming/themeDefaults.js +45 -0
  22. package/src/{colors → theming}/themes.js +161 -163
  23. package/src/colors/functions.js +0 -313
  24. package/src/colors/index.js +0 -52
  25. package/src/lib/postcss-prefixer/index.js +0 -87
  26. package/src/lib/postcss-prefixer/utils.js +0 -29
package/dist/styled.css CHANGED
@@ -1,30 +1,20 @@
1
1
  .alert {
2
- display: flex;
2
+ display: grid;
3
3
  width: 100%;
4
- flex-direction: column;
4
+ grid-auto-flow: row;
5
+ align-content: flex-start;
5
6
  align-items: center;
6
- justify-content: space-between;
7
- gap: 1rem
8
- }
9
- .alert > :not([hidden]) ~ :not([hidden]) {
10
- --tw-space-y-reverse: 0;
11
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
12
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
7
+ justify-items: center;
8
+ gap: 1rem;
9
+ text-align: center
13
10
  }
14
- @media (min-width: 768px) {
11
+ @media (min-width: 640px) {
15
12
  .alert {
16
- flex-direction: row
13
+ grid-auto-flow: column;
14
+ grid-template-columns: auto minmax(auto,1fr);
15
+ justify-items: start;
16
+ text-align: left
17
17
  }
18
- .alert > :not([hidden]) ~ :not([hidden]) {
19
- --tw-space-y-reverse: 0;
20
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
21
- margin-bottom: calc(0px * var(--tw-space-y-reverse))
22
- }
23
- }
24
- .alert > :where(*) {
25
- display: flex;
26
- align-items: center;
27
- gap: 0.5rem
28
18
  }
29
19
  .artboard {
30
20
  width: 100%
@@ -74,7 +64,7 @@
74
64
  justify-content: space-around;
75
65
  padding-bottom: env(safe-area-inset-bottom)
76
66
  }
77
- .btm-nav>* {
67
+ .btm-nav > * {
78
68
  position: relative;
79
69
  display: flex;
80
70
  height: 100%;
@@ -89,7 +79,8 @@
89
79
  max-width: 100%;
90
80
  overflow-x: auto
91
81
  }
92
- .breadcrumbs > ul,.breadcrumbs > ol {
82
+ .breadcrumbs > ul,
83
+ .breadcrumbs > ol {
93
84
  display: flex;
94
85
  align-items: center;
95
86
  white-space: nowrap;
@@ -104,8 +95,10 @@
104
95
  cursor: pointer;
105
96
  align-items: center
106
97
  }
107
- .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
108
- text-decoration-line: underline
98
+ @media (hover: hover) {
99
+ .breadcrumbs>ul>li>a:hover, .breadcrumbs>ol>li>a:hover {
100
+ text-decoration-line: underline
101
+ }
109
102
  }
110
103
  .btn {
111
104
  display: inline-flex;
@@ -131,20 +124,17 @@
131
124
  }
132
125
 
133
126
  /* disabled */
134
-
135
127
  .btn-disabled,
136
- .btn[disabled] {
128
+ .btn[disabled],
129
+ .btn:disabled {
137
130
  pointer-events: none;
138
131
  }
139
-
140
132
  /* shapes */
141
-
142
133
  .btn-square {
143
134
  height: 3rem;
144
135
  width: 3rem;
145
136
  padding: 0px;
146
137
  }
147
-
148
138
  .btn-circle {
149
139
  height: 3rem;
150
140
  width: 3rem;
@@ -152,49 +142,33 @@
152
142
  padding: 0px;
153
143
  }
154
144
 
155
- /* loading */
156
-
157
- .btn.loading,
158
- .btn.loading:hover {
159
- pointer-events: none;
160
- }
161
-
162
- .btn.loading:before {
163
- margin-right: 0.5rem;
164
- height: 1rem;
165
- width: 1rem;
166
- border-radius: 9999px;
167
- border-width: 2px;
168
- animation: spin 2s linear infinite;
169
- content: "";
170
- border-top-color: transparent;
171
- border-left-color: transparent;
172
- border-bottom-color: currentColor;
173
- border-right-color: currentColor;
174
- }
175
- @media (prefers-reduced-motion: reduce) {
176
- .btn.loading:before {
177
- animation: spin 10s linear infinite;
178
- }
179
- }
180
- @keyframes spin {
181
- from {
182
- transform: rotate(0deg);
183
- }
184
- to {
185
- transform: rotate(360deg);
186
- }
187
- }
188
145
  /* group */
146
+
189
147
  .btn-group {
190
148
  display: inline-flex;
191
149
  }
150
+
192
151
  .btn-group > input[type="radio"].btn {
193
152
  appearance: none;
194
153
  }
154
+
195
155
  .btn-group > input[type="radio"].btn:before {
196
156
  content: attr(data-title);
197
- }.card {
157
+ }
158
+
159
+ /* radio input and checkbox as button */
160
+
161
+ .btn:is(input[type="checkbox"]),
162
+ .btn:is(input[type="radio"]) {
163
+ appearance: none;
164
+ }
165
+
166
+ .btn:is(input[type="checkbox"]):after,
167
+ .btn:is(input[type="radio"]):after {
168
+ --tw-content: attr(aria-label);
169
+ content: var(--tw-content);
170
+ }
171
+ .card {
198
172
  position: relative;
199
173
  display: flex;
200
174
  flex-direction: column
@@ -242,7 +216,7 @@
242
216
  position: relative
243
217
  }
244
218
  .carousel {
245
- display: flex;
219
+ display: inline-flex;
246
220
  overflow-x: scroll;
247
221
  scroll-snap-type: x mandatory;
248
222
  scroll-behavior: smooth;
@@ -302,12 +276,9 @@
302
276
  width: 0.75rem;
303
277
  background-color: inherit;
304
278
  content: "";
305
- -webkit-mask-size: contain;
306
- mask-size: contain;
307
- -webkit-mask-repeat: no-repeat;
308
- mask-repeat: no-repeat;
309
- -webkit-mask-position: center;
310
- mask-position: center;
279
+ mask-size: contain;
280
+ mask-repeat: no-repeat;
281
+ mask-position: center;
311
282
  }
312
283
  .chat-start {
313
284
  place-items: start;
@@ -326,12 +297,10 @@
326
297
  grid-column-start: 2;
327
298
  }
328
299
  .chat-start .chat-bubble:before {
329
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
330
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
300
+ mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
331
301
  }
332
302
  [dir="rtl"] .chat-start .chat-bubble:before {
333
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
334
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
303
+ mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
335
304
  }
336
305
  .chat-end {
337
306
  place-items: end;
@@ -350,46 +319,56 @@
350
319
  grid-column-start: 1;
351
320
  }
352
321
  .chat-end .chat-bubble:before {
353
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
354
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
322
+ mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
355
323
  }
356
324
  [dir="rtl"] .chat-end .chat-bubble:before {
357
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
358
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
325
+ mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
359
326
  }
360
327
  .checkbox {
361
328
  flex-shrink: 0
362
329
  }
363
- .collapse.collapse {
330
+ .collapse:not(td):not(tr):not(colgroup) {
364
331
  visibility: visible;
365
332
  }
366
333
  .collapse {
367
334
  position: relative;
368
335
  display: grid;
369
336
  overflow: hidden;
370
- grid-template-rows: 1fr auto;
337
+ grid-template-rows: auto 0fr;
338
+ transition: grid-template-rows 0.2s;
371
339
  }
372
340
  .collapse-title,
373
341
  .collapse > input[type="checkbox"],
342
+ .collapse > input[type="radio"],
374
343
  .collapse-content {
375
344
  grid-column-start: 1;
376
345
  grid-row-start: 1;
377
346
  }
378
- .collapse > input[type="checkbox"] {
347
+ .collapse > input[type="checkbox"],
348
+ .collapse > input[type="radio"] {
379
349
  appearance: none;
380
350
  opacity: 0;
381
351
  }
382
352
  .collapse-content {
353
+ visibility: hidden;
354
+ grid-column-start: 1;
383
355
  grid-row-start: 2;
384
- overflow: hidden;
385
- max-height: 0px;
356
+ min-height: 0px;
357
+ transition: visibility 0.2s;
358
+ }
359
+ .collapse[open],
360
+ .collapse-open,
361
+ .collapse:focus:not(.collapse-close),
362
+ .collapse:not(.collapse-close):has(input[type="checkbox"]:checked),
363
+ .collapse:not(.collapse-close):has(input[type="radio"]:checked) {
364
+ grid-template-rows: auto 1fr;
386
365
  }
366
+ .collapse[open] .collapse-content,
387
367
  .collapse-open .collapse-content,
388
368
  .collapse:focus:not(.collapse-close) .collapse-content,
389
- .collapse:not(.collapse-close)
390
- input[type="checkbox"]:checked
391
- ~ .collapse-content {
392
- max-height: none;
369
+ .collapse:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-content,
370
+ .collapse:not(.collapse-close) input[type="radio"]:checked ~ .collapse-content {
371
+ visibility: visible;
393
372
  }
394
373
  :root .countdown {
395
374
  line-height: 1em;
@@ -422,259 +401,143 @@
422
401
  width: 100%;
423
402
  }
424
403
  .drawer {
425
-
404
+ position: relative;
426
405
  display: grid;
427
-
428
- width: 100%;
429
-
430
- overflow: hidden;
431
-
432
- height: 100vh;
433
- height: 100dvh;
406
+ grid-auto-columns: max-content auto;
434
407
  }
435
-
436
- .drawer.drawer-end {
437
- direction: rtl;
438
- }
439
-
440
- .drawer.drawer-end > * {
441
- direction: ltr;
442
- }
443
-
444
- .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
445
-
446
- --tw-translate-x: 100%;
447
-
448
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
449
-
450
- justify-self: end;
408
+ .drawer-content {
409
+ grid-column-start: 2;
410
+ grid-row-start: 1;
451
411
  }
452
-
453
- .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
454
-
455
- --tw-translate-x: 0px;
456
-
457
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
412
+ .drawer-side {
413
+ pointer-events: none;
414
+ visibility: hidden;
415
+ position: fixed;
416
+ top: 0px;
417
+ left: 0px;
418
+ grid-column-start: 1;
419
+ grid-row-start: 1;
420
+ display: grid;
421
+ width: 100%;
422
+ grid-template-columns: repeat(1, minmax(0, 1fr));
423
+ grid-template-rows: repeat(1, minmax(0, 1fr));
424
+ align-items: flex-start;
425
+ justify-items: start;
426
+ overflow-y: auto;
427
+ overscroll-behavior: contain;
428
+ height: 100vh;
429
+ height: 100dvh;
430
+ scrollbar-width: none;
458
431
  }
459
- :where(.drawer-toggle ~ .drawer-content) {
460
- height: inherit;
432
+ .drawer-side::-webkit-scrollbar {
433
+ display: none;
461
434
  }
462
- .drawer-toggle {
463
-
464
- position: absolute;
465
-
435
+ .drawer-side > *:not(.drawer-overlay) {
436
+ transition: transform 0.4s cubic-bezier(0, 0, 0.58, 1);
437
+ transform: translateX(-100%);
438
+ }
439
+ [dir="rtl"] .drawer-side > *:not(.drawer-overlay) {
440
+ transform: translateX(100%);
441
+ }
442
+ .drawer-toggle {
443
+ position: fixed;
466
444
  height: 0px;
467
-
468
445
  width: 0px;
469
-
470
446
  appearance: none;
471
-
472
447
  opacity: 0;
473
448
  }
474
- .drawer-toggle ~ .drawer-content {
475
-
476
- z-index: 0;
477
-
478
- grid-column-start: 1;
479
-
480
- grid-row-start: 1;
481
-
482
- overflow-y: auto;
483
- }
484
- .drawer-toggle ~ .drawer-side {
485
-
486
- grid-column-start: 1;
487
-
488
- grid-row-start: 1;
489
-
490
- display: grid;
491
-
492
- max-height: 100vh;
493
-
494
- overflow-x: hidden;
495
- }
496
- .drawer-toggle ~ .drawer-side > .drawer-overlay {
497
-
498
- visibility: hidden;
499
-
500
- grid-column-start: 1;
501
-
502
- grid-row-start: 1;
503
-
504
- opacity: 0;
449
+ .drawer-toggle:checked ~ .drawer-side {
450
+ pointer-events: auto;
451
+ visibility: visible;
505
452
  }
506
- .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
507
-
508
- z-index: 10;
509
-
453
+ .drawer-toggle:checked ~ .drawer-side > * {
510
454
  grid-column-start: 1;
511
-
512
455
  grid-row-start: 1;
513
-
514
- --tw-translate-x: -100%;
515
-
516
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
517
- }
518
- .drawer-toggle:checked ~ .drawer-side {
519
-
520
- isolation: isolate;
521
-
522
- overflow-y: auto;
523
-
524
- overflow-x: hidden;
525
- }
526
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
527
-
528
- visibility: visible;
529
- }
530
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
531
-
532
- --tw-translate-x: 0px;
533
-
534
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
535
- }
536
- [dir="rtl"] .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
537
-
538
- --tw-translate-x: 100%;
539
-
540
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
541
- }
542
- [dir="rtl"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
543
-
544
- --tw-translate-x: 0px;
545
-
546
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
547
- }
548
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
549
- --tw-translate-x: -100%;
550
456
  }
551
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
552
- --tw-translate-x: 0px;
553
- }
554
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
555
- --tw-translate-x: 0.5rem;
457
+ .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
458
+ transform: translateX(0%);
459
+ }
460
+ .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
461
+ position: sticky;
462
+ top: 0px;
463
+ place-self: stretch;
556
464
  }
557
- @media (min-width: 1024px) {
558
- .drawer-mobile {
559
- grid-auto-columns: max-content auto;
560
- }
561
- .drawer-mobile > .drawer-toggle ~ .drawer-content {
562
-
563
- height: auto;
564
- }
565
- @media (min-width: 1024px) {
566
-
567
- .drawer-mobile > .drawer-toggle ~ .drawer-content {
568
-
569
- grid-column-start: 2;
570
- }
571
- }
572
- .drawer-mobile > .drawer-toggle ~ .drawer-side {
573
-
574
- overflow-y: auto;
575
- }
576
- @media (min-width: 1024px) {
577
-
578
- .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay {
579
-
580
- visibility: visible;
581
- }
582
-
583
- .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
584
-
585
- --tw-translate-x: 0px;
586
-
587
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
588
- }
589
- }
590
- .drawer-mobile.drawer-end {
465
+ .drawer-end {
591
466
  grid-auto-columns: auto max-content;
592
- direction: ltr;
593
- }
594
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
595
-
596
- height: auto;
597
- }
598
- @media (min-width: 1024px) {
599
-
600
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
601
-
602
- grid-column-start: 1;
603
- }
604
- }
605
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
606
-
607
- overflow-y: auto;
608
- }
609
- @media (min-width: 1024px) {
610
-
611
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
612
-
613
- grid-column-start: 2;
614
- }
615
-
616
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay {
617
-
618
- visibility: visible;
619
- }
620
-
621
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
622
-
623
- --tw-translate-x: 0px;
624
-
625
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
626
- }
627
467
  }
468
+ .drawer-end .drawer-toggle ~ .drawer-content {
469
+ grid-column-start: 1;
470
+ }
471
+ .drawer-end .drawer-toggle ~ .drawer-side {
472
+ justify-items: end;
628
473
  }
474
+ .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
475
+ transform: translateX(100%);
476
+ }
477
+ [dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
478
+ transform: translateX(-100%);
479
+ }
480
+ .drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
481
+ transform: translateX(0%);
482
+ }
629
483
  .dropdown {
630
- position: relative;
631
- display: inline-block
484
+ position: relative;
485
+ display: inline-block
632
486
  }
633
487
  .dropdown > *:focus {
634
- outline: 2px solid transparent;
635
- outline-offset: 2px
488
+ outline: 2px solid transparent;
489
+ outline-offset: 2px
636
490
  }
637
491
  .dropdown .dropdown-content {
638
- visibility: hidden;
639
- position: absolute;
640
- z-index: 50;
641
- opacity: 0
492
+ position: absolute
493
+ }
494
+ .dropdown:is(:not(details)) .dropdown-content {
495
+ visibility: hidden;
496
+ opacity: 0
642
497
  }
643
498
  .dropdown-end .dropdown-content {
644
- right: 0px
499
+ right: 0px
645
500
  }
646
501
  .dropdown-left .dropdown-content {
647
- top: 0px;
648
- right: 100%;
649
- bottom: auto
502
+ top: 0px;
503
+ right: 100%;
504
+ bottom: auto
650
505
  }
651
506
  .dropdown-right .dropdown-content {
652
- left: 100%;
653
- top: 0px;
654
- bottom: auto
507
+ left: 100%;
508
+ top: 0px;
509
+ bottom: auto
655
510
  }
656
511
  .dropdown-bottom .dropdown-content {
657
- bottom: auto;
658
- top: 100%
512
+ bottom: auto;
513
+ top: 100%
659
514
  }
660
515
  .dropdown-top .dropdown-content {
661
- bottom: 100%;
662
- top: auto
516
+ bottom: 100%;
517
+ top: auto
663
518
  }
664
519
  .dropdown-end.dropdown-right .dropdown-content {
665
- bottom: 0px;
666
- top: auto
520
+ bottom: 0px;
521
+ top: auto
667
522
  }
668
523
  .dropdown-end.dropdown-left .dropdown-content {
669
- bottom: 0px;
670
- top: auto
524
+ bottom: 0px;
525
+ top: auto
671
526
  }
672
527
  .dropdown.dropdown-open .dropdown-content,
673
- .dropdown.dropdown-hover:hover .dropdown-content,
674
528
  .dropdown:not(.dropdown-hover):focus .dropdown-content,
675
- .dropdown:not(.dropdown-hover):focus-within .dropdown-content {
676
- visibility: visible;
677
- opacity: 1
529
+ .dropdown:focus-within .dropdown-content {
530
+ visibility: visible;
531
+ opacity: 1
532
+ }
533
+ @media (hover: hover) {
534
+ .dropdown.dropdown-hover:hover .dropdown-content {
535
+ visibility: visible;
536
+ opacity: 1
537
+ }
538
+ }
539
+ .dropdown:is(details) summary::-webkit-details-marker {
540
+ display: none
678
541
  }
679
542
  .file-input {
680
543
  height: 3rem;
@@ -820,7 +683,7 @@
820
683
  display: flex;
821
684
  align-items: center;
822
685
  --tw-bg-opacity: 1;
823
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
686
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
824
687
  padding-left: 1rem;
825
688
  padding-right: 1rem;
826
689
  }
@@ -851,94 +714,114 @@
851
714
  border-bottom-left-radius: var(--rounded-btn, 0.5rem);
852
715
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
853
716
  }
717
+ .join {
718
+ display: inline-flex;
719
+ align-items: stretch;
720
+ }
721
+ .join * {
722
+ border-radius: inherit;
723
+ }
724
+ .join :where(.join-item) {
725
+ border-top-right-radius: 0;
726
+ border-bottom-right-radius: 0;
727
+ border-bottom-left-radius: 0;
728
+ border-top-left-radius: 0;
729
+ }
730
+ .join .join-item:not(:first-child):not(:last-child),
731
+ .join *:not(:first-child):not(:last-child) .join-item {
732
+ border-top-right-radius: 0;
733
+ border-bottom-right-radius: 0;
734
+ border-bottom-left-radius: 0;
735
+ border-top-left-radius: 0;
736
+ }
737
+ .join .join-item:first-child:not(:last-child),
738
+ .join *:first-child:not(:last-child) .join-item {
739
+ border-top-right-radius: 0;
740
+ border-bottom-right-radius: 0;
741
+ }
742
+ .join :where(.join-item:first-child:not(:last-child)),
743
+ .join :where(*:first-child:not(:last-child) .join-item) {
744
+ border-bottom-left-radius: inherit;
745
+ border-top-left-radius: inherit;
746
+ }
747
+ .join .join-item:last-child:not(:first-child),
748
+ .join *:last-child:not(:first-child) .join-item {
749
+ border-bottom-left-radius: 0;
750
+ border-top-left-radius: 0;
751
+ }
752
+ .join :where(.join-item:last-child:not(:first-child)),
753
+ .join :where(*:last-child:not(:first-child) .join-item) {
754
+ border-top-right-radius: inherit;
755
+ border-bottom-right-radius: inherit;
756
+ }
854
757
  .kbd {
855
758
  display: inline-flex;
856
759
  align-items: center;
857
760
  justify-content: center
858
761
  }
859
762
  .link {
860
- cursor: pointer;
861
- text-decoration-line: underline
763
+ cursor: pointer;
764
+ text-decoration-line: underline
862
765
  }
863
766
  .link-hover {
864
- text-decoration-line: none
767
+ text-decoration-line: none
865
768
  }
769
+ @media (hover: hover) {
866
770
  .link-hover:hover {
867
771
  text-decoration-line: underline
772
+ }
868
773
  }
869
774
  .mask {
870
- -webkit-mask-size: contain;
871
- mask-size: contain;
872
- -webkit-mask-repeat: no-repeat;
873
- mask-repeat: no-repeat;
874
- -webkit-mask-position: center;
875
- mask-position: center;
775
+ mask-size: contain;
776
+ mask-repeat: no-repeat;
777
+ mask-position: center;
876
778
  }
877
779
  .mask-half-1 {
878
- -webkit-mask-size: 200%;
879
- mask-size: 200%;
880
- -webkit-mask-position: left;
881
- mask-position: left;
780
+ mask-size: 200%;
781
+ mask-position: left;
882
782
  }
883
783
  .mask-half-2 {
884
- -webkit-mask-size: 200%;
885
- mask-size: 200%;
886
- -webkit-mask-position: right;
887
- mask-position: right;
784
+ mask-size: 200%;
785
+ mask-position: right;
888
786
  }
889
787
  .menu {
890
- display: flex;
891
- flex-direction: column;
892
- flex-wrap: wrap
788
+ display: flex;
789
+ flex-direction: column;
790
+ flex-wrap: wrap;
791
+ font-size: 0.875rem;
792
+ line-height: 1.25rem
893
793
  }
894
- .menu.horizontal {
895
- display: inline-flex;
896
- flex-direction: row
794
+ .menu :where(li ul) {
795
+ position: relative;
796
+ white-space: nowrap
897
797
  }
898
- .menu.horizontal :where(li) {
899
- flex-direction: row
798
+ .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
799
+ .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
800
+ display: grid;
801
+ grid-auto-flow: column;
802
+ align-content: flex-start;
803
+ align-items: center;
804
+ gap: 0.5rem;
805
+ grid-auto-columns: max-content auto max-content;
806
+ user-select: none
900
807
  }
901
- :where(.menu li) {
902
- position: relative;
903
- display: flex;
904
- flex-shrink: 0;
905
- flex-direction: column;
906
- flex-wrap: wrap;
907
- align-items: stretch
808
+ .menu li.disabled {
809
+ cursor: not-allowed;
810
+ user-select: none
908
811
  }
909
- .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
910
- display: flex
812
+ .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
813
+ display: none
911
814
  }
912
- .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
913
- cursor: pointer;
914
- user-select: none;
915
- align-items: center;
916
- outline: 2px solid transparent;
917
- outline-offset: 2px
918
- }
919
- .menu > :where(li > *:not(ul):focus) {
920
- outline: 2px solid transparent;
921
- outline-offset: 2px
922
- }
923
- .menu > :where(li.disabled > *:not(ul):focus) {
924
- cursor: auto
925
- }
926
- .menu > :where(li) :where(ul) {
927
- display: flex;
928
- flex-direction: column;
929
- align-items: stretch
930
- }
931
- .menu > :where(li) > :where(ul) {
932
- position: absolute;
933
- display: none;
934
- top: initial;
935
- left: 100%
936
- }
937
- .menu > :where(li:hover) > :where(ul) {
938
- display: flex
815
+ :where(.menu li) {
816
+ position: relative;
817
+ display: flex;
818
+ flex-shrink: 0;
819
+ flex-direction: column;
820
+ flex-wrap: wrap;
821
+ align-items: stretch
939
822
  }
940
- .menu > :where(li:focus) > :where(ul) {
941
- display: flex
823
+ :where(.menu li) .badge {
824
+ justify-self: end
942
825
  }
943
826
  .mockup-code {
944
827
  position: relative;
@@ -961,15 +844,25 @@
961
844
  text-align: right;
962
845
  }
963
846
  .modal {
847
+ /* @apply pointer-events-none invisible fixed inset-0 flex justify-center opacity-0; */
964
848
  pointer-events: none;
965
- visibility: hidden;
966
849
  position: fixed;
967
850
  inset: 0px;
968
- display: flex;
969
- justify-content: center;
851
+ margin: 0px;
852
+ display: grid;
853
+ height: 100%;
854
+ max-height: none;
855
+ width: 100%;
856
+ max-width: none;
857
+ justify-items: center;
858
+ padding: 0px;
970
859
  opacity: 0;
860
+ overscroll-behavior: contain;
971
861
  z-index: 999;
972
862
  }
863
+ .modal-scroll {
864
+ overscroll-behavior: auto;
865
+ }
973
866
  :where(.modal) {
974
867
  align-items: center;
975
868
  }
@@ -978,7 +871,8 @@
978
871
  }
979
872
  .modal-open,
980
873
  .modal:target,
981
- .modal-toggle:checked + .modal {
874
+ .modal-toggle:checked + .modal,
875
+ .modal[open] {
982
876
  pointer-events: auto;
983
877
  visibility: visible;
984
878
  opacity: 1;
@@ -993,6 +887,9 @@
993
887
  appearance: none;
994
888
  opacity: 0;
995
889
  }
890
+ :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
891
+ overflow: hidden;
892
+ }
996
893
  .navbar {
997
894
  display: flex;
998
895
  align-items: center;
@@ -1049,9 +946,19 @@
1049
946
  }
1050
947
  .radial-progress:before {
1051
948
  inset: 0px;
1052
- background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
1053
- -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
1054
- mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
949
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness)
950
+ var(--thickness) no-repeat,
951
+ conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
952
+ -webkit-mask: radial-gradient(
953
+ farthest-side,
954
+ #0000 calc(99% - var(--thickness)),
955
+ #000 calc(100% - var(--thickness))
956
+ );
957
+ mask: radial-gradient(
958
+ farthest-side,
959
+ #0000 calc(99% - var(--thickness)),
960
+ #000 calc(100% - var(--thickness))
961
+ );
1055
962
  }
1056
963
  .radial-progress:after {
1057
964
  inset: calc(50% - var(--thickness) / 2);
@@ -1077,28 +984,28 @@
1077
984
  border-radius: 0px
1078
985
  }
1079
986
  .select {
1080
- display: inline-flex;
1081
- flex-shrink: 0;
1082
- cursor: pointer;
1083
- user-select: none;
1084
- appearance: none;
1085
- height: 3rem;
1086
- padding-left: 1rem;
1087
- padding-right: 2.5rem;
1088
- font-size: 0.875rem;
1089
- line-height: 1.25rem;
1090
- line-height: 2;
1091
- min-height: 3rem
987
+ display: inline-flex;
988
+ flex-shrink: 0;
989
+ cursor: pointer;
990
+ user-select: none;
991
+ appearance: none;
992
+ height: 3rem;
993
+ padding-left: 1rem;
994
+ padding-right: 2.5rem;
995
+ font-size: 0.875rem;
996
+ line-height: 1.25rem;
997
+ line-height: 2;
998
+ min-height: 3rem
999
+ }
1092
1000
 
1093
1001
  /* disabled */
1094
1002
  /* &-disabled,
1095
1003
  &[disabled] {
1096
1004
  @apply pointer-events-none;
1097
1005
  } */
1098
- }
1099
1006
  /* multiple */
1100
1007
  .select[multiple] {
1101
- height: auto
1008
+ height: auto
1102
1009
  }
1103
1010
  .stack {
1104
1011
  display: inline-grid;
@@ -1234,13 +1141,29 @@
1234
1141
  }
1235
1142
  .table {
1236
1143
  position: relative;
1144
+ width: 100%
1237
1145
  }
1238
- .table th:first-child {
1239
- /* because safari */
1146
+ .table :where(.table-pin-rows thead tr) {
1147
+ position: sticky;
1148
+ top: 0px;
1149
+ z-index: 1;
1150
+ --tw-bg-opacity: 1;
1151
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1152
+ }
1153
+ .table :where(.table-pin-rows tfoot tr) {
1154
+ position: sticky;
1155
+ bottom: 0px;
1156
+ z-index: 1;
1157
+ --tw-bg-opacity: 1;
1158
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1159
+ }
1160
+ .table :where(.table-pin-cols tr th) {
1240
1161
  position: sticky;
1241
1162
  left: 0px;
1242
- z-index: 11;
1243
- }
1163
+ right: 0px;
1164
+ --tw-bg-opacity: 1;
1165
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1166
+ }
1244
1167
  .textarea {
1245
1168
  flex-shrink: 1;
1246
1169
  min-height: 3rem;
@@ -1256,80 +1179,54 @@
1256
1179
  position: fixed;
1257
1180
  display: flex;
1258
1181
  min-width: fit-content;
1259
- flex-direction: column
1182
+ flex-direction: column;
1183
+ white-space: nowrap
1260
1184
  }
1261
1185
  .toggle {
1262
1186
  flex-shrink: 0
1263
1187
  }
1264
- .tooltip {
1265
- position: relative;
1266
- display: inline-block;
1267
- --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
1268
- }
1269
- .tooltip:before {
1270
- position: absolute;
1271
- pointer-events: none;
1272
- z-index: 999;
1273
- content: var(--tw-content);
1274
- --tw-content: attr(data-tip);
1275
- }
1276
- .tooltip:before, .tooltip-top:before {
1277
- transform: translateX(-50%);
1278
- top: auto;
1279
- left: 50%;
1280
- right: auto;
1281
- bottom: var(--tooltip-offset);
1282
- }
1283
- .tooltip-bottom:before {
1284
- transform: translateX(-50%);
1285
- top: var(--tooltip-offset);
1286
- left: 50%;
1287
- right: auto;
1288
- bottom: auto;
1289
- }
1290
- .tooltip-left:before {
1291
- transform: translateY(-50%);
1292
- top: 50%;
1293
- left: auto;
1294
- right: var(--tooltip-offset);
1295
- bottom: auto;
1296
- }
1297
- .tooltip-right:before {
1298
- transform: translateY(-50%);
1299
- top: 50%;
1300
- left: var(--tooltip-offset);
1301
- right: auto;
1302
- bottom: auto;
1303
- }
1304
1188
  .alert {
1305
- --tw-bg-opacity: 1;
1306
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1307
- padding: 1rem;
1308
- border-radius: var(--rounded-box, 1rem)
1189
+ border-width: 1px;
1190
+ --tw-border-opacity: 1;
1191
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
1192
+ padding: 1rem;
1193
+ --tw-text-opacity: 1;
1194
+ color: hsl(var(--bc) / var(--tw-text-opacity));
1195
+ border-radius: var(--rounded-box, 1rem);
1196
+ --alert-bg: hsl(var(--b2));
1197
+ --alert-bg-mix: hsl(var(--b1));
1198
+ background-color: var(--alert-bg)
1309
1199
  }
1200
+ /* @supports (background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix))) {
1201
+ background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix));
1202
+ } */
1310
1203
  .alert-info {
1311
- --tw-bg-opacity: 1;
1312
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1313
- --tw-text-opacity: 1;
1314
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
1204
+ border-color: hsl(var(--in) / 0.2);
1205
+ --tw-text-opacity: 1;
1206
+ color: hsl(var(--inc) / var(--tw-text-opacity));
1207
+ --alert-bg: hsl(var(--in));
1208
+ --alert-bg-mix: hsl(var(--b1))
1315
1209
  }
1316
1210
  .alert-success {
1317
- --tw-bg-opacity: 1;
1318
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1319
- --tw-text-opacity: 1;
1320
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
1211
+ border-color: hsl(var(--su) / 0.2);
1212
+ --tw-text-opacity: 1;
1213
+ color: hsl(var(--suc) / var(--tw-text-opacity));
1214
+ --alert-bg: hsl(var(--su));
1215
+ --alert-bg-mix: hsl(var(--b1))
1321
1216
  }
1322
1217
  .alert-warning {
1323
- --tw-bg-opacity: 1;
1324
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1325
- --tw-text-opacity: 1;
1326
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
1218
+ border-color: hsl(var(--wa) / 0.2);
1219
+ --tw-text-opacity: 1;
1220
+ color: hsl(var(--wac) / var(--tw-text-opacity));
1221
+ --alert-bg: hsl(var(--wa));
1222
+ --alert-bg-mix: hsl(var(--b1))
1327
1223
  }
1328
1224
  .alert-error {
1329
- --tw-bg-opacity: 1;
1330
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1331
- --tw-text-opacity: 1;
1332
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
1225
+ border-color: hsl(var(--er) / 0.2);
1226
+ --tw-text-opacity: 1;
1227
+ color: hsl(var(--erc) / var(--tw-text-opacity));
1228
+ --alert-bg: hsl(var(--er));
1229
+ --alert-bg-mix: hsl(var(--b1))
1333
1230
  }
1334
1231
  .avatar-group {
1335
1232
  display: flex;
@@ -1344,13 +1241,21 @@
1344
1241
  }
1345
1242
  .badge {
1346
1243
  border-width: 1px;
1244
+ --tw-border-opacity: 1;
1245
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
1246
+ --tw-bg-opacity: 1;
1247
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1248
+ --tw-text-opacity: 1;
1249
+ color: hsl(var(--bc) / var(--tw-text-opacity));
1250
+ border-radius: var(--rounded-badge, 1.9rem)
1251
+ }
1252
+ .badge-neutral {
1347
1253
  --tw-border-opacity: 1;
1348
1254
  border-color: hsl(var(--n) / var(--tw-border-opacity));
1349
1255
  --tw-bg-opacity: 1;
1350
1256
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
1351
1257
  --tw-text-opacity: 1;
1352
- color: hsl(var(--nc) / var(--tw-text-opacity));
1353
- border-radius: var(--rounded-badge, 1.9rem)
1258
+ color: hsl(var(--nc) / var(--tw-text-opacity))
1354
1259
  }
1355
1260
  .badge-primary {
1356
1261
  --tw-border-opacity: 1;
@@ -1381,34 +1286,34 @@
1381
1286
  --tw-bg-opacity: 1;
1382
1287
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
1383
1288
  --tw-text-opacity: 1;
1384
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
1289
+ color: hsl(var(--inc) / var(--tw-text-opacity))
1385
1290
  }
1386
1291
  .badge-success {
1387
1292
  border-color: transparent;
1388
1293
  --tw-bg-opacity: 1;
1389
1294
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
1390
1295
  --tw-text-opacity: 1;
1391
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
1296
+ color: hsl(var(--suc) / var(--tw-text-opacity))
1392
1297
  }
1393
1298
  .badge-warning {
1394
1299
  border-color: transparent;
1395
1300
  --tw-bg-opacity: 1;
1396
1301
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1397
1302
  --tw-text-opacity: 1;
1398
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
1303
+ color: hsl(var(--wac) / var(--tw-text-opacity))
1399
1304
  }
1400
1305
  .badge-error {
1401
1306
  border-color: transparent;
1402
1307
  --tw-bg-opacity: 1;
1403
1308
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
1404
1309
  --tw-text-opacity: 1;
1405
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
1310
+ color: hsl(var(--erc) / var(--tw-text-opacity))
1406
1311
  }
1407
1312
  .badge-ghost {
1408
1313
  --tw-border-opacity: 1;
1409
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1314
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
1410
1315
  --tw-bg-opacity: 1;
1411
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1316
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
1412
1317
  --tw-text-opacity: 1;
1413
1318
  color: hsl(var(--bc) / var(--tw-text-opacity))
1414
1319
  }
@@ -1417,6 +1322,10 @@
1417
1322
  --tw-border-opacity: 0.5;
1418
1323
  background-color: transparent;
1419
1324
  color: currentColor
1325
+ }
1326
+ .badge-outline.badge-neutral {
1327
+ --tw-text-opacity: 1;
1328
+ color: hsl(var(--n) / var(--tw-text-opacity))
1420
1329
  }
1421
1330
  .badge-outline.badge-primary {
1422
1331
  --tw-text-opacity: 1;
@@ -1446,194 +1355,36 @@
1446
1355
  --tw-text-opacity: 1;
1447
1356
  color: hsl(var(--er) / var(--tw-text-opacity))
1448
1357
  }
1449
-
1450
- .btn-outline .badge {
1451
- --tw-border-opacity: 1;
1452
- border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1453
- --tw-text-opacity: 1;
1454
- color: hsl(var(--nc) / var(--tw-text-opacity))
1455
- }
1456
-
1457
- .btn-outline.btn-primary .badge {
1458
- --tw-border-opacity: 1;
1459
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1460
- --tw-bg-opacity: 1;
1461
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
1462
- --tw-text-opacity: 1;
1463
- color: hsl(var(--pc) / var(--tw-text-opacity))
1464
- }
1465
-
1466
- .btn-outline.btn-secondary .badge {
1467
- --tw-border-opacity: 1;
1468
- border-color: hsl(var(--s) / var(--tw-border-opacity));
1469
- --tw-bg-opacity: 1;
1470
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
1471
- --tw-text-opacity: 1;
1472
- color: hsl(var(--sc) / var(--tw-text-opacity))
1473
- }
1474
-
1475
- .btn-outline.btn-accent .badge {
1476
- --tw-border-opacity: 1;
1477
- border-color: hsl(var(--a) / var(--tw-border-opacity));
1478
- --tw-bg-opacity: 1;
1479
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
1480
- --tw-text-opacity: 1;
1481
- color: hsl(var(--ac) / var(--tw-text-opacity))
1482
- }
1483
-
1484
- .btn-outline .badge.outline {
1485
- --tw-border-opacity: 1;
1486
- border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1487
- background-color: transparent
1488
- }
1489
-
1490
- .btn-outline.btn-primary .badge-outline {
1491
- --tw-border-opacity: 1;
1492
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1493
- background-color: transparent;
1494
- --tw-text-opacity: 1;
1495
- color: hsl(var(--p) / var(--tw-text-opacity))
1496
- }
1497
-
1498
- .btn-outline.btn-secondary .badge-outline {
1499
- --tw-border-opacity: 1;
1500
- border-color: hsl(var(--s) / var(--tw-border-opacity));
1501
- background-color: transparent;
1502
- --tw-text-opacity: 1;
1503
- color: hsl(var(--s) / var(--tw-text-opacity))
1504
- }
1505
-
1506
- .btn-outline.btn-accent .badge-outline {
1507
- --tw-border-opacity: 1;
1508
- border-color: hsl(var(--a) / var(--tw-border-opacity));
1509
- background-color: transparent;
1510
- --tw-text-opacity: 1;
1511
- color: hsl(var(--a) / var(--tw-text-opacity))
1512
- }
1513
-
1514
- .btn-outline.btn-info .badge-outline {
1515
- --tw-border-opacity: 1;
1516
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1517
- background-color: transparent;
1518
- --tw-text-opacity: 1;
1519
- color: hsl(var(--in) / var(--tw-text-opacity))
1520
- }
1521
-
1522
- .btn-outline.btn-success .badge-outline {
1523
- --tw-border-opacity: 1;
1524
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1525
- background-color: transparent;
1526
- --tw-text-opacity: 1;
1527
- color: hsl(var(--su) / var(--tw-text-opacity))
1528
- }
1529
-
1530
- .btn-outline.btn-warning .badge-outline {
1531
- --tw-border-opacity: 1;
1532
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1533
- background-color: transparent;
1534
- --tw-text-opacity: 1;
1535
- color: hsl(var(--wa) / var(--tw-text-opacity))
1536
- }
1537
-
1538
- .btn-outline.btn-error .badge-outline {
1539
- --tw-border-opacity: 1;
1540
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1541
- background-color: transparent;
1542
- --tw-text-opacity: 1;
1543
- color: hsl(var(--er) / var(--tw-text-opacity))
1544
- }
1545
-
1546
- .btn-outline:hover .badge {
1547
- --tw-border-opacity: 1;
1548
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1549
- --tw-bg-opacity: 1;
1550
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1551
- --tw-text-opacity: 1;
1552
- color: hsl(var(--bc) / var(--tw-text-opacity))
1553
- }
1554
-
1555
- .btn-outline:hover .badge.outline {
1556
- --tw-border-opacity: 1;
1557
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1558
- --tw-text-opacity: 1;
1559
- color: hsl(var(--nc) / var(--tw-text-opacity))
1560
- }
1561
-
1562
- .btn-outline.btn-primary:hover .badge {
1563
- --tw-border-opacity: 1;
1564
- border-color: hsl(var(--pc) / var(--tw-border-opacity));
1565
- --tw-bg-opacity: 1;
1566
- background-color: hsl(var(--pc) / var(--tw-bg-opacity));
1567
- --tw-text-opacity: 1;
1568
- color: hsl(var(--p) / var(--tw-text-opacity))
1569
- }
1570
-
1571
- .btn-outline.btn-primary:hover .badge.outline {
1572
- --tw-border-opacity: 1;
1573
- border-color: hsl(var(--pc) / var(--tw-border-opacity));
1574
- --tw-bg-opacity: 1;
1575
- background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1576
- --tw-text-opacity: 1;
1577
- color: hsl(var(--pc) / var(--tw-text-opacity))
1578
- }
1579
-
1580
- .btn-outline.btn-secondary:hover .badge {
1581
- --tw-border-opacity: 1;
1582
- border-color: hsl(var(--sc) / var(--tw-border-opacity));
1583
- --tw-bg-opacity: 1;
1584
- background-color: hsl(var(--sc) / var(--tw-bg-opacity));
1585
- --tw-text-opacity: 1;
1586
- color: hsl(var(--s) / var(--tw-text-opacity))
1587
- }
1588
-
1589
- .btn-outline.btn-secondary:hover .badge.outline {
1590
- --tw-border-opacity: 1;
1591
- border-color: hsl(var(--sc) / var(--tw-border-opacity));
1592
- --tw-bg-opacity: 1;
1593
- background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1594
- --tw-text-opacity: 1;
1595
- color: hsl(var(--sc) / var(--tw-text-opacity))
1596
- }
1597
-
1598
- .btn-outline.btn-accent:hover .badge {
1599
- --tw-border-opacity: 1;
1600
- border-color: hsl(var(--ac) / var(--tw-border-opacity));
1601
- --tw-bg-opacity: 1;
1602
- background-color: hsl(var(--ac) / var(--tw-bg-opacity));
1603
- --tw-text-opacity: 1;
1604
- color: hsl(var(--a) / var(--tw-text-opacity))
1605
- }
1606
-
1607
- .btn-outline.btn-accent:hover .badge.outline {
1608
- --tw-border-opacity: 1;
1609
- border-color: hsl(var(--ac) / var(--tw-border-opacity));
1610
- --tw-bg-opacity: 1;
1611
- background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1612
- --tw-text-opacity: 1;
1613
- color: hsl(var(--ac) / var(--tw-text-opacity))
1614
- }
1615
1358
  .btm-nav {
1616
- height: 4rem;
1617
- --tw-bg-opacity: 1;
1618
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1619
- color: currentColor
1359
+ height: 4rem;
1360
+ --tw-bg-opacity: 1;
1361
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1362
+ color: currentColor
1620
1363
  }
1621
- .btm-nav>* {
1622
- border-color: currentColor
1364
+ .btm-nav > * {
1365
+ border-color: currentColor
1623
1366
  }
1624
- .btm-nav>*:not(.active) {
1625
- padding-top: 0.125rem
1367
+ .btm-nav > *:not(.active) {
1368
+ padding-top: 0.125rem
1626
1369
  }
1627
1370
  /* active */
1628
- .btm-nav>*:where(.active) {
1629
- border-top-width: 2px;
1630
- --tw-bg-opacity: 1;
1631
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1371
+ .btm-nav > *:where(.active) {
1372
+ border-top-width: 2px;
1373
+ --tw-bg-opacity: 1;
1374
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1632
1375
  }
1633
1376
  /* disabled */
1634
1377
  .btm-nav>*.disabled,
1635
- .btm-nav>*.disabled:hover,
1636
- .btm-nav>*[disabled],
1378
+ .btm-nav>*[disabled] {
1379
+ pointer-events: none;
1380
+ --tw-border-opacity: 0;
1381
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
1382
+ --tw-bg-opacity: 0.1;
1383
+ color: hsl(var(--bc) / var(--tw-text-opacity));
1384
+ --tw-text-opacity: 0.2
1385
+ }
1386
+ @media (hover: hover) {
1387
+ .btm-nav>*.disabled:hover,
1637
1388
  .btm-nav>*[disabled]:hover {
1638
1389
  pointer-events: none;
1639
1390
  --tw-border-opacity: 0;
@@ -1641,13 +1392,12 @@
1641
1392
  --tw-bg-opacity: 0.1;
1642
1393
  color: hsl(var(--bc) / var(--tw-text-opacity));
1643
1394
  --tw-text-opacity: 0.2
1395
+ }
1644
1396
  }
1645
- .btm-nav>* .label {
1646
- font-size: 1rem;
1647
- line-height: 1.5rem
1397
+ .btm-nav > * .label {
1398
+ font-size: 1rem;
1399
+ line-height: 1.5rem
1648
1400
  }
1649
-
1650
-
1651
1401
  .breadcrumbs {
1652
1402
  padding-top: 0.5rem;
1653
1403
  padding-bottom: 0.5rem;
@@ -1680,42 +1430,53 @@
1680
1430
  --tw-rotate: -135deg;
1681
1431
  }
1682
1432
  .btn {
1433
+ gap: 0.5rem;
1683
1434
  font-weight: 600;
1684
- text-transform: uppercase;
1685
1435
  text-decoration-line: none;
1686
1436
  border-width: var(--border-btn, 1px);
1687
1437
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
1688
1438
  text-transform: var(--btn-text-case, uppercase);
1689
1439
  }
1690
- .btn:active:hover,
1691
1440
  .btn:active:focus {
1692
1441
  animation: none;
1442
+ transform: scale(var(--btn-focus-scale, 0.97));
1693
1443
  }
1694
- .btn:not(.no-animation):active:hover,
1695
- .btn:not(.no-animation):active:focus {
1696
- transform: scale(var(--btn-focus-scale, 0.95));
1444
+ @media (hover: hover) {
1445
+ .btn:active:hover {
1446
+ animation: none;
1447
+ transform: scale(var(--btn-focus-scale, 0.97));
1697
1448
  }
1449
+ }
1698
1450
  /* default btn */
1699
1451
  .btn {
1700
1452
  --tw-border-opacity: 1;
1701
- border-color: hsl(var(--n) / var(--tw-border-opacity));
1453
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
1702
1454
  --tw-bg-opacity: 1;
1703
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1455
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
1704
1456
  --tw-text-opacity: 1;
1705
- color: hsl(var(--nc) / var(--tw-text-opacity));
1457
+ color: hsl(var(--bc) / var(--tw-text-opacity));
1706
1458
  text-decoration-line: none;
1707
1459
  }
1708
- .btn:hover,
1709
- .btn-active {
1460
+ .btn-active {
1710
1461
  --tw-border-opacity: 1;
1711
- border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1462
+ border-color: hsl(var(--b3) / var(--tw-border-opacity));
1712
1463
  --tw-bg-opacity: 1;
1713
- background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
1464
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
1465
+ }
1466
+ @media (hover: hover) {
1467
+ .btn:hover {
1468
+ --tw-border-opacity: 1;
1469
+ border-color: hsl(var(--b3) / var(--tw-border-opacity));
1470
+ --tw-bg-opacity: 1;
1471
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
1472
+ }
1714
1473
  }
1715
1474
  .btn:focus-visible {
1716
- outline: 2px solid hsl(var(--nf));
1717
- outline-offset: 2px;
1718
- }
1475
+ outline-style: solid;
1476
+ outline-width: 2px;
1477
+ outline-offset: 2px;
1478
+ outline-color: hsl(var(--bc) / 1);
1479
+ }
1719
1480
  /* brand colors */
1720
1481
  .btn-primary {
1721
1482
  --tw-border-opacity: 1;
@@ -1725,16 +1486,23 @@
1725
1486
  --tw-text-opacity: 1;
1726
1487
  color: hsl(var(--pc) / var(--tw-text-opacity));
1727
1488
  }
1728
- .btn-primary:hover,
1729
- .btn-primary.btn-active {
1489
+ .btn-primary.btn-active {
1730
1490
  --tw-border-opacity: 1;
1731
- border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
1491
+ border-color: hsl(var(--pf) / var(--tw-border-opacity));
1732
1492
  --tw-bg-opacity: 1;
1733
- background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1493
+ background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1494
+ }
1495
+ @media (hover: hover) {
1496
+ .btn-primary:hover {
1497
+ --tw-border-opacity: 1;
1498
+ border-color: hsl(var(--pf) / var(--tw-border-opacity));
1499
+ --tw-bg-opacity: 1;
1500
+ background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1501
+ }
1734
1502
  }
1735
1503
  .btn-primary:focus-visible {
1736
- outline: 2px solid hsl(var(--p));
1737
- }
1504
+ outline-color: hsl(var(--p) / 1);
1505
+ }
1738
1506
  .btn-secondary {
1739
1507
  --tw-border-opacity: 1;
1740
1508
  border-color: hsl(var(--s) / var(--tw-border-opacity));
@@ -1743,16 +1511,23 @@
1743
1511
  --tw-text-opacity: 1;
1744
1512
  color: hsl(var(--sc) / var(--tw-text-opacity));
1745
1513
  }
1746
- .btn-secondary:hover,
1747
- .btn-secondary.btn-active {
1514
+ .btn-secondary.btn-active {
1748
1515
  --tw-border-opacity: 1;
1749
- border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
1516
+ border-color: hsl(var(--sf) / var(--tw-border-opacity));
1750
1517
  --tw-bg-opacity: 1;
1751
- background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1518
+ background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1519
+ }
1520
+ @media (hover: hover) {
1521
+ .btn-secondary:hover {
1522
+ --tw-border-opacity: 1;
1523
+ border-color: hsl(var(--sf) / var(--tw-border-opacity));
1524
+ --tw-bg-opacity: 1;
1525
+ background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1526
+ }
1752
1527
  }
1753
1528
  .btn-secondary:focus-visible {
1754
- outline: 2px solid hsl(var(--s));
1755
- }
1529
+ outline-color: hsl(var(--s) / 1);
1530
+ }
1756
1531
  .btn-accent {
1757
1532
  --tw-border-opacity: 1;
1758
1533
  border-color: hsl(var(--a) / var(--tw-border-opacity));
@@ -1761,16 +1536,48 @@
1761
1536
  --tw-text-opacity: 1;
1762
1537
  color: hsl(var(--ac) / var(--tw-text-opacity));
1763
1538
  }
1764
- .btn-accent:hover,
1765
- .btn-accent.btn-active {
1539
+ .btn-accent.btn-active {
1766
1540
  --tw-border-opacity: 1;
1767
- border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
1541
+ border-color: hsl(var(--af) / var(--tw-border-opacity));
1768
1542
  --tw-bg-opacity: 1;
1769
- background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1543
+ background-color: hsl(var(--af) / var(--tw-bg-opacity));
1544
+ }
1545
+ @media (hover: hover) {
1546
+ .btn-accent:hover {
1547
+ --tw-border-opacity: 1;
1548
+ border-color: hsl(var(--af) / var(--tw-border-opacity));
1549
+ --tw-bg-opacity: 1;
1550
+ background-color: hsl(var(--af) / var(--tw-bg-opacity));
1551
+ }
1770
1552
  }
1771
1553
  .btn-accent:focus-visible {
1772
- outline: 2px solid hsl(var(--a));
1773
- }
1554
+ outline-color: hsl(var(--a) / 1);
1555
+ }
1556
+ .btn-neutral {
1557
+ --tw-border-opacity: 1;
1558
+ border-color: hsl(var(--n) / var(--tw-border-opacity));
1559
+ --tw-bg-opacity: 1;
1560
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
1561
+ --tw-text-opacity: 1;
1562
+ color: hsl(var(--nc) / var(--tw-text-opacity));
1563
+ }
1564
+ .btn-neutral.btn-active {
1565
+ --tw-border-opacity: 1;
1566
+ border-color: hsl(var(--nf) / var(--tw-border-opacity));
1567
+ --tw-bg-opacity: 1;
1568
+ background-color: hsl(var(--nf) / var(--tw-bg-opacity));
1569
+ }
1570
+ @media (hover: hover) {
1571
+ .btn-neutral:hover {
1572
+ --tw-border-opacity: 1;
1573
+ border-color: hsl(var(--nf) / var(--tw-border-opacity));
1574
+ --tw-bg-opacity: 1;
1575
+ background-color: hsl(var(--nf) / var(--tw-bg-opacity));
1576
+ }
1577
+ }
1578
+ .btn-neutral:focus-visible {
1579
+ outline-color: hsl(var(--n) / 1);
1580
+ }
1774
1581
  /* btn with state colors */
1775
1582
  .btn-info {
1776
1583
  --tw-border-opacity: 1;
@@ -1778,245 +1585,371 @@
1778
1585
  --tw-bg-opacity: 1;
1779
1586
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
1780
1587
  --tw-text-opacity: 1;
1781
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
1588
+ color: hsl(var(--inc) / var(--tw-text-opacity));
1782
1589
  }
1783
- .btn-info:hover,
1784
- .btn-info.btn-active {
1590
+ .btn-info.btn-active {
1785
1591
  --tw-border-opacity: 1;
1786
1592
  border-color: hsl(var(--in) / var(--tw-border-opacity));
1787
1593
  --tw-bg-opacity: 1;
1788
1594
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
1595
+ }
1596
+ @media (hover: hover) {
1597
+ .btn-info:hover {
1598
+ --tw-border-opacity: 1;
1599
+ border-color: hsl(var(--in) / var(--tw-border-opacity));
1600
+ --tw-bg-opacity: 1;
1601
+ background-color: hsl(var(--in) / var(--tw-bg-opacity));
1602
+ }
1789
1603
  }
1790
1604
  .btn-info:focus-visible {
1791
- outline: 2px solid hsl(var(--in));
1792
- }
1605
+ outline-color: hsl(var(--in) / 1);
1606
+ }
1793
1607
  .btn-success {
1794
1608
  --tw-border-opacity: 1;
1795
1609
  border-color: hsl(var(--su) / var(--tw-border-opacity));
1796
1610
  --tw-bg-opacity: 1;
1797
1611
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
1798
1612
  --tw-text-opacity: 1;
1799
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
1613
+ color: hsl(var(--suc) / var(--tw-text-opacity));
1800
1614
  }
1801
- .btn-success:hover,
1802
- .btn-success.btn-active {
1615
+ .btn-success.btn-active {
1803
1616
  --tw-border-opacity: 1;
1804
1617
  border-color: hsl(var(--su) / var(--tw-border-opacity));
1805
1618
  --tw-bg-opacity: 1;
1806
1619
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
1620
+ }
1621
+ @media (hover: hover) {
1622
+ .btn-success:hover {
1623
+ --tw-border-opacity: 1;
1624
+ border-color: hsl(var(--su) / var(--tw-border-opacity));
1625
+ --tw-bg-opacity: 1;
1626
+ background-color: hsl(var(--su) / var(--tw-bg-opacity));
1627
+ }
1807
1628
  }
1808
1629
  .btn-success:focus-visible {
1809
- outline: 2px solid hsl(var(--su));
1810
- }
1630
+ outline-color: hsl(var(--su) / 1);
1631
+ }
1811
1632
  .btn-warning {
1812
1633
  --tw-border-opacity: 1;
1813
1634
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
1814
1635
  --tw-bg-opacity: 1;
1815
1636
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1816
1637
  --tw-text-opacity: 1;
1817
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
1638
+ color: hsl(var(--wac) / var(--tw-text-opacity));
1818
1639
  }
1819
- .btn-warning:hover,
1820
- .btn-warning.btn-active {
1640
+ .btn-warning.btn-active {
1821
1641
  --tw-border-opacity: 1;
1822
1642
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
1823
1643
  --tw-bg-opacity: 1;
1824
1644
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1645
+ }
1646
+ @media (hover: hover) {
1647
+ .btn-warning:hover {
1648
+ --tw-border-opacity: 1;
1649
+ border-color: hsl(var(--wa) / var(--tw-border-opacity));
1650
+ --tw-bg-opacity: 1;
1651
+ background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1652
+ }
1825
1653
  }
1826
1654
  .btn-warning:focus-visible {
1827
- outline: 2px solid hsl(var(--wa));
1828
- }
1655
+ outline-color: hsl(var(--wa) / 1);
1656
+ }
1829
1657
  .btn-error {
1830
1658
  --tw-border-opacity: 1;
1831
1659
  border-color: hsl(var(--er) / var(--tw-border-opacity));
1832
1660
  --tw-bg-opacity: 1;
1833
1661
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
1834
1662
  --tw-text-opacity: 1;
1835
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
1663
+ color: hsl(var(--erc) / var(--tw-text-opacity));
1836
1664
  }
1837
- .btn-error:hover,
1838
- .btn-error.btn-active {
1665
+ .btn-error.btn-active {
1839
1666
  --tw-border-opacity: 1;
1840
1667
  border-color: hsl(var(--er) / var(--tw-border-opacity));
1841
1668
  --tw-bg-opacity: 1;
1842
1669
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
1670
+ }
1671
+ @media (hover: hover) {
1672
+ .btn-error:hover {
1673
+ --tw-border-opacity: 1;
1674
+ border-color: hsl(var(--er) / var(--tw-border-opacity));
1675
+ --tw-bg-opacity: 1;
1676
+ background-color: hsl(var(--er) / var(--tw-bg-opacity));
1677
+ }
1843
1678
  }
1844
1679
  .btn-error:focus-visible {
1845
- outline: 2px solid hsl(var(--er));
1846
- }
1680
+ outline-color: hsl(var(--er) / 1);
1681
+ }
1847
1682
  /* glass */
1848
- .btn.glass:hover,
1849
- .btn.glass.btn-active {
1683
+ .btn.glass {
1684
+ --tw-shadow: 0 0 #0000;
1685
+ --tw-shadow-colored: 0 0 #0000;
1686
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1687
+ }
1688
+ .btn.glass.btn-active {
1850
1689
  --glass-opacity: 25%;
1851
1690
  --glass-border-opacity: 15%;
1852
1691
  }
1853
- .btn.glass:focus-visible {
1854
- outline: 2px solid currentColor;
1692
+ @media (hover: hover) {
1693
+ .btn.glass:hover {
1694
+ --glass-opacity: 25%;
1695
+ --glass-border-opacity: 15%;
1855
1696
  }
1697
+ }
1698
+ .btn.glass:focus-visible {
1699
+ outline-color: currentColor;
1700
+ }
1856
1701
  /* btn variants */
1857
1702
  .btn-ghost {
1858
1703
  border-width: 1px;
1859
1704
  border-color: transparent;
1860
1705
  background-color: transparent;
1861
1706
  color: currentColor;
1707
+ --tw-shadow: 0 0 #0000;
1708
+ --tw-shadow-colored: 0 0 #0000;
1709
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1862
1710
  }
1863
- .btn-ghost:hover,
1864
- .btn-ghost.btn-active {
1711
+ .btn-ghost.btn-active {
1865
1712
  --tw-border-opacity: 0;
1866
1713
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1867
1714
  --tw-bg-opacity: 0.2;
1715
+ }
1716
+ @media (hover: hover) {
1717
+ .btn-ghost:hover {
1718
+ --tw-border-opacity: 0;
1719
+ background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1720
+ --tw-bg-opacity: 0.2;
1721
+ }
1868
1722
  }
1869
1723
  .btn-ghost:focus-visible {
1870
- outline: 2px solid currentColor;
1871
- }
1724
+ outline-color: currentColor;
1725
+ }
1872
1726
  .btn-link {
1873
1727
  border-color: transparent;
1874
1728
  background-color: transparent;
1875
1729
  --tw-text-opacity: 1;
1876
1730
  color: hsl(var(--p) / var(--tw-text-opacity));
1877
1731
  text-decoration-line: underline;
1732
+ --tw-shadow: 0 0 #0000;
1733
+ --tw-shadow-colored: 0 0 #0000;
1734
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1878
1735
  }
1879
- .btn-link:hover,
1880
- .btn-link.btn-active {
1736
+ .btn-link.btn-active {
1881
1737
  border-color: transparent;
1882
1738
  background-color: transparent;
1883
1739
  text-decoration-line: underline;
1740
+ }
1741
+ @media (hover: hover) {
1742
+ .btn-link:hover {
1743
+ border-color: transparent;
1744
+ background-color: transparent;
1745
+ text-decoration-line: underline;
1746
+ }
1884
1747
  }
1885
1748
  .btn-link:focus-visible {
1886
- outline: 2px solid currentColor;
1887
- }
1749
+ outline-color: currentColor;
1750
+ }
1888
1751
  /* outline */
1889
1752
  .btn-outline {
1890
1753
  border-color: currentColor;
1891
1754
  background-color: transparent;
1892
1755
  --tw-text-opacity: 1;
1893
1756
  color: hsl(var(--bc) / var(--tw-text-opacity));
1757
+ --tw-shadow: 0 0 #0000;
1758
+ --tw-shadow-colored: 0 0 #0000;
1759
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1894
1760
  }
1895
- .btn-outline:hover,
1896
- .btn-outline.btn-active {
1761
+ .btn-outline.btn-active {
1897
1762
  --tw-border-opacity: 1;
1898
1763
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
1899
1764
  --tw-bg-opacity: 1;
1900
1765
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1901
1766
  --tw-text-opacity: 1;
1902
1767
  color: hsl(var(--b1) / var(--tw-text-opacity));
1768
+ }
1769
+ @media (hover: hover) {
1770
+ .btn-outline:hover {
1771
+ --tw-border-opacity: 1;
1772
+ border-color: hsl(var(--bc) / var(--tw-border-opacity));
1773
+ --tw-bg-opacity: 1;
1774
+ background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1775
+ --tw-text-opacity: 1;
1776
+ color: hsl(var(--b1) / var(--tw-text-opacity));
1777
+ }
1903
1778
  }
1904
1779
  .btn-outline.btn-primary {
1905
1780
  --tw-text-opacity: 1;
1906
1781
  color: hsl(var(--p) / var(--tw-text-opacity));
1907
1782
  }
1908
- .btn-outline.btn-primary:hover,
1909
- .btn-outline.btn-primary.btn-active {
1783
+ .btn-outline.btn-primary.btn-active {
1910
1784
  --tw-border-opacity: 1;
1911
- border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
1785
+ border-color: hsl(var(--pf) / var(--tw-border-opacity));
1912
1786
  --tw-bg-opacity: 1;
1913
- background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1787
+ background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1914
1788
  --tw-text-opacity: 1;
1915
1789
  color: hsl(var(--pc) / var(--tw-text-opacity));
1790
+ }
1791
+ @media (hover: hover) {
1792
+ .btn-outline.btn-primary:hover {
1793
+ --tw-border-opacity: 1;
1794
+ border-color: hsl(var(--pf) / var(--tw-border-opacity));
1795
+ --tw-bg-opacity: 1;
1796
+ background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1797
+ --tw-text-opacity: 1;
1798
+ color: hsl(var(--pc) / var(--tw-text-opacity));
1799
+ }
1916
1800
  }
1917
1801
  .btn-outline.btn-secondary {
1918
1802
  --tw-text-opacity: 1;
1919
1803
  color: hsl(var(--s) / var(--tw-text-opacity));
1920
1804
  }
1921
- .btn-outline.btn-secondary:hover,
1922
- .btn-outline.btn-secondary.btn-active {
1805
+ .btn-outline.btn-secondary.btn-active {
1923
1806
  --tw-border-opacity: 1;
1924
- border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
1807
+ border-color: hsl(var(--sf) / var(--tw-border-opacity));
1925
1808
  --tw-bg-opacity: 1;
1926
- background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1809
+ background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1927
1810
  --tw-text-opacity: 1;
1928
1811
  color: hsl(var(--sc) / var(--tw-text-opacity));
1812
+ }
1813
+ @media (hover: hover) {
1814
+ .btn-outline.btn-secondary:hover {
1815
+ --tw-border-opacity: 1;
1816
+ border-color: hsl(var(--sf) / var(--tw-border-opacity));
1817
+ --tw-bg-opacity: 1;
1818
+ background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1819
+ --tw-text-opacity: 1;
1820
+ color: hsl(var(--sc) / var(--tw-text-opacity));
1821
+ }
1929
1822
  }
1930
1823
  .btn-outline.btn-accent {
1931
1824
  --tw-text-opacity: 1;
1932
1825
  color: hsl(var(--a) / var(--tw-text-opacity));
1933
1826
  }
1934
- .btn-outline.btn-accent:hover,
1935
- .btn-outline.btn-accent.btn-active {
1827
+ .btn-outline.btn-accent.btn-active {
1936
1828
  --tw-border-opacity: 1;
1937
- border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
1829
+ border-color: hsl(var(--af) / var(--tw-border-opacity));
1938
1830
  --tw-bg-opacity: 1;
1939
- background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1831
+ background-color: hsl(var(--af) / var(--tw-bg-opacity));
1940
1832
  --tw-text-opacity: 1;
1941
1833
  color: hsl(var(--ac) / var(--tw-text-opacity));
1834
+ }
1835
+ @media (hover: hover) {
1836
+ .btn-outline.btn-accent:hover {
1837
+ --tw-border-opacity: 1;
1838
+ border-color: hsl(var(--af) / var(--tw-border-opacity));
1839
+ --tw-bg-opacity: 1;
1840
+ background-color: hsl(var(--af) / var(--tw-bg-opacity));
1841
+ --tw-text-opacity: 1;
1842
+ color: hsl(var(--ac) / var(--tw-text-opacity));
1843
+ }
1942
1844
  }
1943
1845
  .btn-outline.btn-success {
1944
1846
  --tw-text-opacity: 1;
1945
1847
  color: hsl(var(--su) / var(--tw-text-opacity));
1946
1848
  }
1947
- .btn-outline.btn-success:hover,
1948
- .btn-outline.btn-success.btn-active {
1849
+ .btn-outline.btn-success.btn-active {
1949
1850
  --tw-border-opacity: 1;
1950
1851
  border-color: hsl(var(--su) / var(--tw-border-opacity));
1951
1852
  --tw-bg-opacity: 1;
1952
1853
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
1953
1854
  --tw-text-opacity: 1;
1954
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
1855
+ color: hsl(var(--suc) / var(--tw-text-opacity));
1856
+ }
1857
+ @media (hover: hover) {
1858
+ .btn-outline.btn-success:hover {
1859
+ --tw-border-opacity: 1;
1860
+ border-color: hsl(var(--su) / var(--tw-border-opacity));
1861
+ --tw-bg-opacity: 1;
1862
+ background-color: hsl(var(--su) / var(--tw-bg-opacity));
1863
+ --tw-text-opacity: 1;
1864
+ color: hsl(var(--suc) / var(--tw-text-opacity));
1865
+ }
1955
1866
  }
1956
1867
  .btn-outline.btn-info {
1957
1868
  --tw-text-opacity: 1;
1958
1869
  color: hsl(var(--in) / var(--tw-text-opacity));
1959
1870
  }
1960
- .btn-outline.btn-info:hover,
1961
- .btn-outline.btn-info.btn-active {
1871
+ .btn-outline.btn-info.btn-active {
1962
1872
  --tw-border-opacity: 1;
1963
1873
  border-color: hsl(var(--in) / var(--tw-border-opacity));
1964
1874
  --tw-bg-opacity: 1;
1965
1875
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
1966
1876
  --tw-text-opacity: 1;
1967
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
1877
+ color: hsl(var(--inc) / var(--tw-text-opacity));
1878
+ }
1879
+ @media (hover: hover) {
1880
+ .btn-outline.btn-info:hover {
1881
+ --tw-border-opacity: 1;
1882
+ border-color: hsl(var(--in) / var(--tw-border-opacity));
1883
+ --tw-bg-opacity: 1;
1884
+ background-color: hsl(var(--in) / var(--tw-bg-opacity));
1885
+ --tw-text-opacity: 1;
1886
+ color: hsl(var(--inc) / var(--tw-text-opacity));
1887
+ }
1968
1888
  }
1969
1889
  .btn-outline.btn-warning {
1970
1890
  --tw-text-opacity: 1;
1971
1891
  color: hsl(var(--wa) / var(--tw-text-opacity));
1972
1892
  }
1973
- .btn-outline.btn-warning:hover,
1974
- .btn-outline.btn-warning.btn-active {
1893
+ .btn-outline.btn-warning.btn-active {
1975
1894
  --tw-border-opacity: 1;
1976
1895
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
1977
1896
  --tw-bg-opacity: 1;
1978
1897
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1979
1898
  --tw-text-opacity: 1;
1980
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
1899
+ color: hsl(var(--wac) / var(--tw-text-opacity));
1900
+ }
1901
+ @media (hover: hover) {
1902
+ .btn-outline.btn-warning:hover {
1903
+ --tw-border-opacity: 1;
1904
+ border-color: hsl(var(--wa) / var(--tw-border-opacity));
1905
+ --tw-bg-opacity: 1;
1906
+ background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1907
+ --tw-text-opacity: 1;
1908
+ color: hsl(var(--wac) / var(--tw-text-opacity));
1909
+ }
1981
1910
  }
1982
1911
  .btn-outline.btn-error {
1983
1912
  --tw-text-opacity: 1;
1984
1913
  color: hsl(var(--er) / var(--tw-text-opacity));
1985
1914
  }
1986
- .btn-outline.btn-error:hover,
1987
- .btn-outline.btn-error.btn-active {
1915
+ .btn-outline.btn-error.btn-active {
1988
1916
  --tw-border-opacity: 1;
1989
1917
  border-color: hsl(var(--er) / var(--tw-border-opacity));
1990
1918
  --tw-bg-opacity: 1;
1991
1919
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
1992
1920
  --tw-text-opacity: 1;
1993
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
1921
+ color: hsl(var(--erc) / var(--tw-text-opacity));
1922
+ }
1923
+ @media (hover: hover) {
1924
+ .btn-outline.btn-error:hover {
1925
+ --tw-border-opacity: 1;
1926
+ border-color: hsl(var(--er) / var(--tw-border-opacity));
1927
+ --tw-bg-opacity: 1;
1928
+ background-color: hsl(var(--er) / var(--tw-bg-opacity));
1929
+ --tw-text-opacity: 1;
1930
+ color: hsl(var(--erc) / var(--tw-text-opacity));
1931
+ }
1994
1932
  }
1995
1933
  /* disabled */
1996
1934
  .btn-disabled,
1997
- .btn-disabled:hover,
1998
1935
  .btn[disabled],
1999
- .btn[disabled]:hover {
1936
+ .btn:disabled {
2000
1937
  --tw-border-opacity: 0;
2001
1938
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
2002
1939
  --tw-bg-opacity: 0.2;
2003
1940
  color: hsl(var(--bc) / var(--tw-text-opacity));
2004
1941
  --tw-text-opacity: 0.2;
2005
1942
  }
2006
- /* loading */
2007
- .btn.loading.btn-square:before,
2008
- .btn.loading.btn-circle:before {
2009
- margin-right: 0px;
2010
- }
2011
- .btn.loading.btn-xl:before,
2012
- .btn.loading.btn-lg:before {
2013
- height: 1.25rem;
2014
- width: 1.25rem;
2015
- }
2016
- .btn.loading.btn-sm:before,
2017
- .btn.loading.btn-xs:before {
2018
- height: 0.75rem;
2019
- width: 0.75rem;
1943
+ @media (hover: hover) {
1944
+ .btn-disabled:hover,
1945
+ .btn[disabled]:hover,
1946
+ .btn:disabled:hover {
1947
+ --tw-border-opacity: 0;
1948
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
1949
+ --tw-bg-opacity: 0.2;
1950
+ color: hsl(var(--bc) / var(--tw-text-opacity));
1951
+ --tw-text-opacity: 0.2;
1952
+ }
2020
1953
  }
2021
1954
  /* group */
2022
1955
  .btn-group > input[type="radio"]:checked.btn,
@@ -2029,11 +1962,34 @@
2029
1962
  color: hsl(var(--pc) / var(--tw-text-opacity));
2030
1963
  }
2031
1964
  .btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
2032
- outline: 2px solid hsl(var(--p));
2033
- }
1965
+ outline-style: solid;
1966
+ outline-width: 2px;
1967
+ outline-color: hsl(var(--p) / 1);
1968
+ }
1969
+ /* radio input and checkbox as button */
1970
+ .btn:is(input[type="checkbox"]:checked),
1971
+ .btn:is(input[type="radio"]:checked) {
1972
+ --tw-border-opacity: 1;
1973
+ border-color: hsl(var(--p) / var(--tw-border-opacity));
1974
+ --tw-bg-opacity: 1;
1975
+ background-color: hsl(var(--p) / var(--tw-bg-opacity));
1976
+ --tw-text-opacity: 1;
1977
+ color: hsl(var(--pc) / var(--tw-text-opacity));
1978
+ }
1979
+ @media (hover: hover) {
1980
+ .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
1981
+ --tw-border-opacity: 1;
1982
+ border-color: hsl(var(--pf) / var(--tw-border-opacity));
1983
+ --tw-bg-opacity: 1;
1984
+ background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1985
+ }
1986
+ }
1987
+ .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
1988
+ outline-color: hsl(var(--p) / 1);
1989
+ }
2034
1990
  @keyframes button-pop {
2035
1991
  0% {
2036
- transform: scale(var(--btn-focus-scale, 0.95));
1992
+ transform: scale(var(--btn-focus-scale, 0.98));
2037
1993
  }
2038
1994
  40% {
2039
1995
  transform: scale(1.02);
@@ -2066,12 +2022,12 @@
2066
2022
  .card.bordered {
2067
2023
  border-width: 1px;
2068
2024
  --tw-border-opacity: 1;
2069
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2025
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2070
2026
  }
2071
2027
  .card-bordered {
2072
2028
  border-width: 1px;
2073
2029
  --tw-border-opacity: 1;
2074
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2030
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2075
2031
  }
2076
2032
  .card.compact .card-body {
2077
2033
  padding: 1rem;
@@ -2122,65 +2078,55 @@
2122
2078
  }
2123
2079
 
2124
2080
  /* default */
2125
-
2126
2081
  .chat-bubble {
2127
2082
  --tw-bg-opacity: 1;
2128
2083
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
2129
2084
  --tw-text-opacity: 1;
2130
2085
  color: hsl(var(--nc) / var(--tw-text-opacity));
2131
2086
  }
2132
-
2133
2087
  /* brand colors */
2134
-
2135
2088
  .chat-bubble-primary {
2136
2089
  --tw-bg-opacity: 1;
2137
2090
  background-color: hsl(var(--p) / var(--tw-bg-opacity));
2138
2091
  --tw-text-opacity: 1;
2139
2092
  color: hsl(var(--pc) / var(--tw-text-opacity));
2140
2093
  }
2141
-
2142
2094
  .chat-bubble-secondary {
2143
2095
  --tw-bg-opacity: 1;
2144
2096
  background-color: hsl(var(--s) / var(--tw-bg-opacity));
2145
2097
  --tw-text-opacity: 1;
2146
2098
  color: hsl(var(--sc) / var(--tw-text-opacity));
2147
2099
  }
2148
-
2149
2100
  .chat-bubble-accent {
2150
2101
  --tw-bg-opacity: 1;
2151
2102
  background-color: hsl(var(--a) / var(--tw-bg-opacity));
2152
2103
  --tw-text-opacity: 1;
2153
2104
  color: hsl(var(--ac) / var(--tw-text-opacity));
2154
2105
  }
2155
-
2156
2106
  /* state colors */
2157
-
2158
2107
  .chat-bubble-info {
2159
2108
  --tw-bg-opacity: 1;
2160
2109
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
2161
2110
  --tw-text-opacity: 1;
2162
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
2111
+ color: hsl(var(--inc) / var(--tw-text-opacity));
2163
2112
  }
2164
-
2165
2113
  .chat-bubble-success {
2166
2114
  --tw-bg-opacity: 1;
2167
2115
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
2168
2116
  --tw-text-opacity: 1;
2169
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
2117
+ color: hsl(var(--suc) / var(--tw-text-opacity));
2170
2118
  }
2171
-
2172
2119
  .chat-bubble-warning {
2173
2120
  --tw-bg-opacity: 1;
2174
2121
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2175
2122
  --tw-text-opacity: 1;
2176
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
2123
+ color: hsl(var(--wac) / var(--tw-text-opacity));
2177
2124
  }
2178
-
2179
2125
  .chat-bubble-error {
2180
2126
  --tw-bg-opacity: 1;
2181
2127
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
2182
2128
  --tw-text-opacity: 1;
2183
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
2129
+ color: hsl(var(--erc) / var(--tw-text-opacity));
2184
2130
  }
2185
2131
  .chat-start .chat-bubble {
2186
2132
  border-bottom-left-radius: 0px;
@@ -2207,9 +2153,11 @@
2207
2153
  border-radius: var(--rounded-btn, 0.5rem);
2208
2154
  }
2209
2155
  .checkbox:focus-visible {
2210
- outline: 2px solid hsl(var(--bc));
2211
- outline-offset: 2px;
2212
- }
2156
+ outline-style: solid;
2157
+ outline-width: 2px;
2158
+ outline-offset: 2px;
2159
+ outline-color: hsl(var(--bc) / 1);
2160
+ }
2213
2161
  .checkbox:checked,
2214
2162
  .checkbox[checked="true"],
2215
2163
  .checkbox[aria-checked="true"] {
@@ -2217,14 +2165,32 @@
2217
2165
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2218
2166
  background-repeat: no-repeat;
2219
2167
  animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2220
- background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2168
+ background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
2169
+ linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
2170
+ linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
2171
+ linear-gradient(
2172
+ 45deg,
2173
+ hsl(var(--chkbg)) 30%,
2174
+ hsl(var(--chkfg)) 30.99%,
2175
+ hsl(var(--chkfg)) 40%,
2176
+ transparent 40.99%
2177
+ ),
2178
+ linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2221
2179
  }
2222
2180
  .checkbox:indeterminate {
2223
2181
  --tw-bg-opacity: 1;
2224
2182
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2225
2183
  background-repeat: no-repeat;
2226
2184
  animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2227
- background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57%);
2185
+ background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%),
2186
+ linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%),
2187
+ linear-gradient(
2188
+ 0deg,
2189
+ hsl(var(--chkbg)) 43%,
2190
+ hsl(var(--chkfg)) 43%,
2191
+ hsl(var(--chkfg)) 57%,
2192
+ hsl(var(--chkbg)) 57%
2193
+ );
2228
2194
  }
2229
2195
  .checkbox-primary {
2230
2196
  --chkbg: var(--p);
@@ -2232,13 +2198,15 @@
2232
2198
  --tw-border-opacity: 1;
2233
2199
  border-color: hsl(var(--p) / var(--tw-border-opacity));
2234
2200
  }
2201
+ @media (hover: hover) {
2235
2202
  .checkbox-primary:hover {
2236
- --tw-border-opacity: 1;
2237
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2203
+ --tw-border-opacity: 1;
2204
+ border-color: hsl(var(--p) / var(--tw-border-opacity));
2205
+ }
2238
2206
  }
2239
2207
  .checkbox-primary:focus-visible {
2240
- outline: 2px solid hsl(var(--p));
2241
- }
2208
+ outline-color: hsl(var(--p) / 1);
2209
+ }
2242
2210
  .checkbox-primary:checked,
2243
2211
  .checkbox-primary[checked="true"],
2244
2212
  .checkbox-primary[aria-checked="true"] {
@@ -2255,13 +2223,15 @@
2255
2223
  --tw-border-opacity: 1;
2256
2224
  border-color: hsl(var(--s) / var(--tw-border-opacity));
2257
2225
  }
2226
+ @media (hover: hover) {
2258
2227
  .checkbox-secondary:hover {
2259
- --tw-border-opacity: 1;
2260
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2228
+ --tw-border-opacity: 1;
2229
+ border-color: hsl(var(--s) / var(--tw-border-opacity));
2230
+ }
2261
2231
  }
2262
2232
  .checkbox-secondary:focus-visible {
2263
- outline: 2px solid hsl(var(--s));
2264
- }
2233
+ outline-color: hsl(var(--s) / 1);
2234
+ }
2265
2235
  .checkbox-secondary:checked,
2266
2236
  .checkbox-secondary[checked="true"],
2267
2237
  .checkbox-secondary[aria-checked="true"] {
@@ -2278,13 +2248,15 @@
2278
2248
  --tw-border-opacity: 1;
2279
2249
  border-color: hsl(var(--a) / var(--tw-border-opacity));
2280
2250
  }
2251
+ @media (hover: hover) {
2281
2252
  .checkbox-accent:hover {
2282
- --tw-border-opacity: 1;
2283
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2253
+ --tw-border-opacity: 1;
2254
+ border-color: hsl(var(--a) / var(--tw-border-opacity));
2255
+ }
2284
2256
  }
2285
2257
  .checkbox-accent:focus-visible {
2286
- outline: 2px solid hsl(var(--a));
2287
- }
2258
+ outline-color: hsl(var(--a) / 1);
2259
+ }
2288
2260
  .checkbox-accent:checked,
2289
2261
  .checkbox-accent[checked="true"],
2290
2262
  .checkbox-accent[aria-checked="true"] {
@@ -2301,22 +2273,24 @@
2301
2273
  --tw-border-opacity: 1;
2302
2274
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2303
2275
  }
2276
+ @media (hover: hover) {
2304
2277
  .checkbox-success:hover {
2305
- --tw-border-opacity: 1;
2306
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2278
+ --tw-border-opacity: 1;
2279
+ border-color: hsl(var(--su) / var(--tw-border-opacity));
2280
+ }
2307
2281
  }
2308
2282
  .checkbox-success:focus-visible {
2309
- outline: 2px solid hsl(var(--su));
2310
- }
2283
+ outline-color: hsl(var(--su) / 1);
2284
+ }
2311
2285
  .checkbox-success:checked,
2312
2286
  .checkbox-success[checked="true"],
2313
- .checkbox-success[aria-checked=true] {
2287
+ .checkbox-success[aria-checked="true"] {
2314
2288
  --tw-border-opacity: 1;
2315
2289
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2316
2290
  --tw-bg-opacity: 1;
2317
2291
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
2318
2292
  --tw-text-opacity: 1;
2319
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
2293
+ color: hsl(var(--suc) / var(--tw-text-opacity));
2320
2294
  }
2321
2295
  .checkbox-warning {
2322
2296
  --chkbg: var(--wa);
@@ -2324,22 +2298,24 @@
2324
2298
  --tw-border-opacity: 1;
2325
2299
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2326
2300
  }
2301
+ @media (hover: hover) {
2327
2302
  .checkbox-warning:hover {
2328
- --tw-border-opacity: 1;
2329
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2303
+ --tw-border-opacity: 1;
2304
+ border-color: hsl(var(--wa) / var(--tw-border-opacity));
2305
+ }
2330
2306
  }
2331
2307
  .checkbox-warning:focus-visible {
2332
- outline: 2px solid hsl(var(--wa));
2333
- }
2308
+ outline-color: hsl(var(--wa) / 1);
2309
+ }
2334
2310
  .checkbox-warning:checked,
2335
2311
  .checkbox-warning[checked="true"],
2336
- .checkbox-warning[aria-checked=true] {
2312
+ .checkbox-warning[aria-checked="true"] {
2337
2313
  --tw-border-opacity: 1;
2338
2314
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2339
2315
  --tw-bg-opacity: 1;
2340
2316
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2341
2317
  --tw-text-opacity: 1;
2342
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
2318
+ color: hsl(var(--wac) / var(--tw-text-opacity));
2343
2319
  }
2344
2320
  .checkbox-info {
2345
2321
  --chkbg: var(--in);
@@ -2347,22 +2323,24 @@
2347
2323
  --tw-border-opacity: 1;
2348
2324
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2349
2325
  }
2326
+ @media (hover: hover) {
2350
2327
  .checkbox-info:hover {
2351
- --tw-border-opacity: 1;
2352
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2328
+ --tw-border-opacity: 1;
2329
+ border-color: hsl(var(--in) / var(--tw-border-opacity));
2330
+ }
2353
2331
  }
2354
2332
  .checkbox-info:focus-visible {
2355
- outline: 2px solid hsl(var(--in));
2356
- }
2333
+ outline-color: hsl(var(--in) / 1);
2334
+ }
2357
2335
  .checkbox-info:checked,
2358
2336
  .checkbox-info[checked="true"],
2359
- .checkbox-info[aria-checked=true] {
2337
+ .checkbox-info[aria-checked="true"] {
2360
2338
  --tw-border-opacity: 1;
2361
2339
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2362
2340
  --tw-bg-opacity: 1;
2363
2341
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
2364
2342
  --tw-text-opacity: 1;
2365
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
2343
+ color: hsl(var(--inc) / var(--tw-text-opacity));
2366
2344
  }
2367
2345
  .checkbox-error {
2368
2346
  --chkbg: var(--er);
@@ -2370,22 +2348,24 @@
2370
2348
  --tw-border-opacity: 1;
2371
2349
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2372
2350
  }
2351
+ @media (hover: hover) {
2373
2352
  .checkbox-error:hover {
2374
- --tw-border-opacity: 1;
2375
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2353
+ --tw-border-opacity: 1;
2354
+ border-color: hsl(var(--er) / var(--tw-border-opacity));
2355
+ }
2376
2356
  }
2377
2357
  .checkbox-error:focus-visible {
2378
- outline: 2px solid hsl(var(--er));
2379
- }
2358
+ outline-color: hsl(var(--er) / 1);
2359
+ }
2380
2360
  .checkbox-error:checked,
2381
2361
  .checkbox-error[checked="true"],
2382
- .checkbox-error[aria-checked=true] {
2362
+ .checkbox-error[aria-checked="true"] {
2383
2363
  --tw-border-opacity: 1;
2384
2364
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2385
2365
  --tw-bg-opacity: 1;
2386
2366
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
2387
2367
  --tw-text-opacity: 1;
2388
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
2368
+ color: hsl(var(--erc) / var(--tw-text-opacity));
2389
2369
  }
2390
2370
  .checkbox:disabled {
2391
2371
  cursor: not-allowed;
@@ -2416,11 +2396,49 @@
2416
2396
  [dir="rtl"] .checkbox:checked,
2417
2397
  [dir="rtl"] .checkbox[checked="true"],
2418
2398
  [dir="rtl"] .checkbox[aria-checked="true"] {
2419
- background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2399
+ background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
2400
+ linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
2401
+ linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
2402
+ linear-gradient(
2403
+ -45deg,
2404
+ hsl(var(--chkbg)) 30%,
2405
+ hsl(var(--chkfg)) 30.99%,
2406
+ hsl(var(--chkfg)) 40%,
2407
+ transparent 40.99%
2408
+ ),
2409
+ linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2420
2410
  }
2411
+ .collapse {
2412
+ width: 100%;
2413
+ border-radius: var(--rounded-box, 1rem);
2414
+ }
2415
+ details.collapse {
2416
+ width: 100%;
2417
+ }
2418
+ details.collapse summary {
2419
+ position: relative;
2420
+ display: block;
2421
+ }
2422
+ details.collapse summary::-webkit-details-marker {
2423
+ display: none;
2424
+ }
2421
2425
  .collapse:focus-visible {
2422
- outline: 2px solid hsl(var(--nf));
2426
+ outline-style: solid;
2427
+ outline-width: 2px;
2428
+ outline-offset: 2px;
2429
+ outline-color: hsl(var(--bc) / 1);
2430
+ }
2431
+ details.collapse summary {
2432
+ outline: 2px solid transparent;
2433
+ outline-offset: 2px;
2434
+ }
2435
+ .collapse:has(.collapse-title:focus-visible),
2436
+ .collapse:has(input[type="checkbox"]:focus-visible),
2437
+ .collapse:has(input[type="radio"]:focus-visible) {
2438
+ outline-style: solid;
2439
+ outline-width: 2px;
2423
2440
  outline-offset: 2px;
2441
+ outline-color: hsl(var(--bc) / 1);
2424
2442
  }
2425
2443
  .collapse-arrow .collapse-title:after {
2426
2444
  position: absolute;
@@ -2458,59 +2476,66 @@
2458
2476
  pointer-events: none;
2459
2477
  }
2460
2478
  .collapse:not(.collapse-open):not(.collapse-close) input[type="checkbox"],
2479
+ .collapse:not(.collapse-open):not(.collapse-close) input[type="radio"]:not(:checked),
2461
2480
  .collapse:not(.collapse-open):not(.collapse-close) .collapse-title {
2462
2481
  cursor: pointer;
2463
2482
  }
2464
- .collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title {
2483
+ .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) .collapse-title {
2465
2484
  cursor: unset;
2466
2485
  }
2467
2486
  .collapse-title {
2468
2487
  position: relative;
2469
2488
  }
2470
- :where(.collapse > input[type="checkbox"]) {
2489
+ :where(.collapse > input[type="checkbox"]),
2490
+ :where(.collapse > input[type="radio"]) {
2471
2491
  z-index: 1;
2472
2492
  }
2473
2493
  .collapse-title,
2474
- :where(.collapse > input[type="checkbox"]) {
2494
+ :where(.collapse > input[type="checkbox"]),
2495
+ :where(.collapse > input[type="radio"]) {
2475
2496
  width: 100%;
2476
2497
  padding: 1rem;
2477
2498
  padding-right: 3rem;
2478
2499
  min-height: 3.75rem;
2479
2500
  transition: background-color 0.2s ease-in-out;
2480
2501
  }
2481
- /*
2482
- .collapse-open :where(.collapse-title),
2483
- .collapse:focus:not(.collapse-close) :where(.collapse-title),
2484
- .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-title) {
2485
- @apply bg-base-content bg-opacity-10;
2486
- } */
2487
2502
  .collapse-content {
2488
2503
  padding-left: 1rem;
2489
2504
  padding-right: 1rem;
2490
2505
  cursor: unset;
2491
2506
  transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2492
2507
  }
2508
+ .collapse[open] :where(.collapse-content),
2493
2509
  .collapse-open :where(.collapse-content),
2494
2510
  .collapse:focus:not(.collapse-close) :where(.collapse-content),
2495
- .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content) {
2511
+ .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content),
2512
+ .collapse:not(.collapse-close) :where(input[type="radio"]:checked ~ .collapse-content) {
2496
2513
  padding-bottom: 1rem;
2497
2514
  transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2498
2515
  }
2516
+ .collapse[open].collapse-arrow .collapse-title:after,
2499
2517
  .collapse-open.collapse-arrow .collapse-title:after,
2500
2518
  .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
2501
- .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
2519
+ .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after,
2520
+ .collapse-arrow:not(.collapse-close) input[type="radio"]:checked ~ .collapse-title:after {
2502
2521
  --tw-translate-y: -50%;
2503
2522
  --tw-rotate: 225deg;
2504
2523
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2505
2524
  }
2525
+ [dir="rtl"] .collapse[open].collapse-arrow .collapse-title:after,
2506
2526
  [dir="rtl"] .collapse-open.collapse-arrow .collapse-title:after,
2507
2527
  [dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
2508
- [dir="rtl"] .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
2528
+ [dir="rtl"]
2529
+ .collapse-arrow:not(.collapse-close)
2530
+ input[type="checkbox"]:checked
2531
+ ~ .collapse-title:after {
2509
2532
  --tw-rotate: 135deg;
2510
2533
  }
2534
+ .collapse[open].collapse-plus .collapse-title:after,
2511
2535
  .collapse-open.collapse-plus .collapse-title:after,
2512
2536
  .collapse-plus:focus:not(.collapse-close) .collapse-title:after,
2513
- .collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
2537
+ .collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after,
2538
+ .collapse-plus:not(.collapse-close) input[type="radio"]:checked ~ .collapse-title:after {
2514
2539
  content: "−";
2515
2540
  }
2516
2541
  .countdown > *:before {
@@ -2534,103 +2559,51 @@
2534
2559
  .divider:not(:empty) {
2535
2560
  gap: 1rem
2536
2561
  }
2537
- .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
2538
- --tw-translate-x: -0.5rem;
2539
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2540
- }
2541
- .drawer-toggle ~ .drawer-content {
2542
- transition-property: all;
2543
- transition-duration: 300ms;
2544
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2545
- }
2546
- .drawer-toggle ~ .drawer-side > .drawer-overlay {
2547
- cursor: pointer;
2548
- --tw-bg-opacity: 1;
2549
- background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
2550
- transition-property: all;
2551
- transition-duration: 300ms;
2552
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2553
- }
2554
- .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
2555
- transition-property: all;
2556
- transition-duration: 300ms;
2557
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2558
- }
2559
- .drawer-toggle:checked ~ .drawer-content {
2560
- --tw-translate-x: 0.5rem;
2561
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2562
- }
2563
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
2564
- opacity: 0.999999; /* 1 causes a bug on chrome 🤷‍♂️ */ --tw-bg-opacity: 0.4;
2565
- }
2566
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button {
2567
- outline: 2px solid hsl(var(--nf));
2568
- outline-offset: 2px;
2569
- }
2570
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-primary {
2571
- outline: 2px solid hsl(var(--p));
2572
- }
2573
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-secondary {
2574
- outline: 2px solid hsl(var(--s));
2575
- }
2576
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-accent {
2577
- outline: 2px solid hsl(var(--a));
2578
- }
2579
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-info {
2580
- outline: 2px solid hsl(var(--in));
2581
- }
2582
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-success {
2583
- outline: 2px solid hsl(var(--su));
2584
- }
2585
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-warning {
2586
- outline: 2px solid hsl(var(--wa));
2587
- }
2588
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-error {
2589
- outline: 2px solid hsl(var(--er));
2590
- }
2591
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.glass {
2592
- outline: 2px solid currentColor;
2593
- }
2594
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-ghost {
2595
- outline: 2px solid currentColor;
2596
- }
2597
- .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-link {
2598
- outline: 2px solid currentColor;
2599
- }
2600
- @media (min-width: 1024px) {
2601
- .drawer-mobile > .drawer-toggle:checked ~ .drawer-content {
2602
- --tw-translate-x: 0px;
2603
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2604
- }
2562
+ .drawer {
2563
+ width: 100%;
2605
2564
  }
2606
- .dropdown .dropdown-content {
2607
- transform-origin: top;
2608
- --tw-scale-x: .95;
2609
- --tw-scale-y: .95;
2610
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2611
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2612
- transition-duration: 200ms;
2613
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
2565
+ .drawer-side > .drawer-overlay {
2566
+ cursor: pointer;
2567
+ background-color: transparent;
2568
+ transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1);
2569
+ }
2570
+ .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
2571
+ background-color: hsl(0 0% 0%/0.4);
2572
+ }
2573
+ .dropdown:is(:not(details)) .dropdown-content {
2574
+ transform-origin: top;
2575
+ --tw-scale-x: .95;
2576
+ --tw-scale-y: .95;
2577
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2578
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2579
+ transition-duration: 200ms;
2580
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
2614
2581
  }
2615
2582
  .dropdown-bottom .dropdown-content {
2616
- transform-origin: top
2583
+ transform-origin: top
2617
2584
  }
2618
2585
  .dropdown-top .dropdown-content {
2619
- transform-origin: bottom
2586
+ transform-origin: bottom
2620
2587
  }
2621
2588
  .dropdown-left .dropdown-content {
2622
- transform-origin: right
2589
+ transform-origin: right
2623
2590
  }
2624
2591
  .dropdown-right .dropdown-content {
2625
- transform-origin: left
2592
+ transform-origin: left
2626
2593
  }
2627
2594
  .dropdown.dropdown-open .dropdown-content,
2628
- .dropdown.dropdown-hover:hover .dropdown-content,
2629
2595
  .dropdown:focus .dropdown-content,
2630
2596
  .dropdown:focus-within .dropdown-content {
2631
- --tw-scale-x: 1;
2632
- --tw-scale-y: 1;
2633
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
2597
+ --tw-scale-x: 1;
2598
+ --tw-scale-y: 1;
2599
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
2600
+ }
2601
+ @media (hover: hover) {
2602
+ .dropdown.dropdown-hover:hover .dropdown-content {
2603
+ --tw-scale-x: 1;
2604
+ --tw-scale-y: 1;
2605
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
2606
+ }
2634
2607
  }
2635
2608
  .file-input {
2636
2609
  overflow: hidden;
@@ -2662,9 +2635,11 @@
2662
2635
  --tw-border-opacity: 0.2;
2663
2636
  }
2664
2637
  .file-input:focus {
2665
- outline: 2px solid hsla(var(--bc) / 0.2);
2638
+ outline-style: solid;
2639
+ outline-width: 2px;
2666
2640
  outline-offset: 2px;
2667
- }
2641
+ outline-color: hsl(var(--bc) / 1);
2642
+ }
2668
2643
  .file-input-ghost {
2669
2644
  --tw-bg-opacity: 0.05;
2670
2645
  }
@@ -2685,8 +2660,8 @@
2685
2660
  border-color: hsl(var(--p) / var(--tw-border-opacity));
2686
2661
  }
2687
2662
  .file-input-primary:focus {
2688
- outline: 2px solid hsl(var(--p));
2689
- }
2663
+ outline-color: hsl(var(--p) / 1);
2664
+ }
2690
2665
  .file-input-primary::file-selector-button {
2691
2666
  --tw-border-opacity: 1;
2692
2667
  border-color: hsl(var(--p) / var(--tw-border-opacity));
@@ -2700,8 +2675,8 @@
2700
2675
  border-color: hsl(var(--s) / var(--tw-border-opacity));
2701
2676
  }
2702
2677
  .file-input-secondary:focus {
2703
- outline: 2px solid hsl(var(--s));
2704
- }
2678
+ outline-color: hsl(var(--s) / 1);
2679
+ }
2705
2680
  .file-input-secondary::file-selector-button {
2706
2681
  --tw-border-opacity: 1;
2707
2682
  border-color: hsl(var(--s) / var(--tw-border-opacity));
@@ -2715,8 +2690,8 @@
2715
2690
  border-color: hsl(var(--a) / var(--tw-border-opacity));
2716
2691
  }
2717
2692
  .file-input-accent:focus {
2718
- outline: 2px solid hsl(var(--a));
2719
- }
2693
+ outline-color: hsl(var(--a) / 1);
2694
+ }
2720
2695
  .file-input-accent::file-selector-button {
2721
2696
  --tw-border-opacity: 1;
2722
2697
  border-color: hsl(var(--a) / var(--tw-border-opacity));
@@ -2730,68 +2705,68 @@
2730
2705
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2731
2706
  }
2732
2707
  .file-input-info:focus {
2733
- outline: 2px solid hsl(var(--in));
2734
- }
2708
+ outline-color: hsl(var(--in) / 1);
2709
+ }
2735
2710
  .file-input-info::file-selector-button {
2736
2711
  --tw-border-opacity: 1;
2737
2712
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2738
2713
  --tw-bg-opacity: 1;
2739
2714
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
2740
2715
  --tw-text-opacity: 1;
2741
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
2716
+ color: hsl(var(--inc) / var(--tw-text-opacity));
2742
2717
  }
2743
2718
  .file-input-success {
2744
2719
  --tw-border-opacity: 1;
2745
2720
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2746
2721
  }
2747
2722
  .file-input-success:focus {
2748
- outline: 2px solid hsl(var(--su));
2749
- }
2723
+ outline-color: hsl(var(--su) / 1);
2724
+ }
2750
2725
  .file-input-success::file-selector-button {
2751
2726
  --tw-border-opacity: 1;
2752
2727
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2753
2728
  --tw-bg-opacity: 1;
2754
2729
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
2755
2730
  --tw-text-opacity: 1;
2756
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
2731
+ color: hsl(var(--suc) / var(--tw-text-opacity));
2757
2732
  }
2758
2733
  .file-input-warning {
2759
2734
  --tw-border-opacity: 1;
2760
2735
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2761
2736
  }
2762
2737
  .file-input-warning:focus {
2763
- outline: 2px solid hsl(var(--wa));
2764
- }
2738
+ outline-color: hsl(var(--wa) / 1);
2739
+ }
2765
2740
  .file-input-warning::file-selector-button {
2766
2741
  --tw-border-opacity: 1;
2767
2742
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2768
2743
  --tw-bg-opacity: 1;
2769
2744
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2770
2745
  --tw-text-opacity: 1;
2771
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
2746
+ color: hsl(var(--wac) / var(--tw-text-opacity));
2772
2747
  }
2773
2748
  .file-input-error {
2774
2749
  --tw-border-opacity: 1;
2775
2750
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2776
2751
  }
2777
2752
  .file-input-error:focus {
2778
- outline: 2px solid hsl(var(--er));
2779
- }
2753
+ outline-color: hsl(var(--er) / 1);
2754
+ }
2780
2755
  .file-input-error::file-selector-button {
2781
2756
  --tw-border-opacity: 1;
2782
2757
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2783
2758
  --tw-bg-opacity: 1;
2784
2759
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
2785
2760
  --tw-text-opacity: 1;
2786
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
2761
+ color: hsl(var(--erc) / var(--tw-text-opacity));
2787
2762
  }
2788
2763
  .file-input-disabled,
2789
2764
  .file-input[disabled] {
2790
2765
  cursor: not-allowed;
2791
2766
  --tw-border-opacity: 1;
2792
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2767
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2793
2768
  --tw-bg-opacity: 1;
2794
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2769
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2795
2770
  --tw-text-opacity: 0.2;
2796
2771
  }
2797
2772
  .file-input-disabled::placeholder,
@@ -2822,26 +2797,28 @@
2822
2797
  opacity: 0.5
2823
2798
  }
2824
2799
  .label {
2825
- padding-left: 0.25rem;
2826
- padding-right: 0.25rem;
2827
- padding-top: 0.5rem;
2828
- padding-bottom: 0.5rem
2800
+ padding-left: 0.25rem;
2801
+ padding-right: 0.25rem;
2802
+ padding-top: 0.5rem;
2803
+ padding-bottom: 0.5rem
2829
2804
  }
2830
2805
  .label-text {
2831
- font-size: 0.875rem;
2832
- line-height: 1.25rem;
2833
- --tw-text-opacity: 1;
2834
- color: hsl(var(--bc) / var(--tw-text-opacity))
2806
+ font-size: 0.875rem;
2807
+ line-height: 1.25rem;
2808
+ --tw-text-opacity: 1;
2809
+ color: hsl(var(--bc) / var(--tw-text-opacity))
2835
2810
  }
2836
2811
  .label-text-alt {
2837
- font-size: 0.75rem;
2838
- line-height: 1rem;
2839
- --tw-text-opacity: 1;
2840
- color: hsl(var(--bc) / var(--tw-text-opacity))
2812
+ font-size: 0.75rem;
2813
+ line-height: 1rem;
2814
+ --tw-text-opacity: 1;
2815
+ color: hsl(var(--bc) / var(--tw-text-opacity))
2841
2816
  }
2817
+ @media (hover: hover) {
2842
2818
  .label a:hover {
2843
2819
  --tw-text-opacity: 1;
2844
2820
  color: hsl(var(--bc) / var(--tw-text-opacity))
2821
+ }
2845
2822
  }
2846
2823
  .hero-overlay {
2847
2824
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
@@ -2872,9 +2849,11 @@
2872
2849
  --tw-border-opacity: 0.2;
2873
2850
  }
2874
2851
  .input:focus {
2875
- outline: 2px solid hsla(var(--bc) / 0.2);
2876
- outline-offset: 2px;
2877
- }
2852
+ outline-style: solid;
2853
+ outline-width: 2px;
2854
+ outline-offset: 2px;
2855
+ outline-color: hsl(var(--bc) / 1);
2856
+ }
2878
2857
  .input-ghost {
2879
2858
  --tw-bg-opacity: 0.05;
2880
2859
  }
@@ -2889,70 +2868,83 @@
2889
2868
  border-color: hsl(var(--p) / var(--tw-border-opacity));
2890
2869
  }
2891
2870
  .input-primary:focus {
2892
- outline: 2px solid hsl(var(--p));
2893
- }
2871
+ outline-color: hsl(var(--p) / 1);
2872
+ }
2894
2873
  .input-secondary {
2895
2874
  --tw-border-opacity: 1;
2896
2875
  border-color: hsl(var(--s) / var(--tw-border-opacity));
2897
2876
  }
2898
2877
  .input-secondary:focus {
2899
- outline: 2px solid hsl(var(--s));
2900
- }
2878
+ outline-color: hsl(var(--s) / 1);
2879
+ }
2901
2880
  .input-accent {
2902
2881
  --tw-border-opacity: 1;
2903
2882
  border-color: hsl(var(--a) / var(--tw-border-opacity));
2904
2883
  }
2905
2884
  .input-accent:focus {
2906
- outline: 2px solid hsl(var(--a));
2907
- }
2885
+ outline-color: hsl(var(--a) / 1);
2886
+ }
2908
2887
  .input-info {
2909
2888
  --tw-border-opacity: 1;
2910
2889
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2911
2890
  }
2912
2891
  .input-info:focus {
2913
- outline: 2px solid hsl(var(--in));
2914
- }
2892
+ outline-color: hsl(var(--in) / 1);
2893
+ }
2915
2894
  .input-success {
2916
2895
  --tw-border-opacity: 1;
2917
2896
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2918
2897
  }
2919
2898
  .input-success:focus {
2920
- outline: 2px solid hsl(var(--su));
2921
- }
2899
+ outline-color: hsl(var(--su) / 1);
2900
+ }
2922
2901
  .input-warning {
2923
2902
  --tw-border-opacity: 1;
2924
2903
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2925
2904
  }
2926
2905
  .input-warning:focus {
2927
- outline: 2px solid hsl(var(--wa));
2928
- }
2906
+ outline-color: hsl(var(--wa) / 1);
2907
+ }
2929
2908
  .input-error {
2930
2909
  --tw-border-opacity: 1;
2931
2910
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2932
2911
  }
2933
2912
  .input-error:focus {
2934
- outline: 2px solid hsl(var(--er));
2935
- }
2913
+ outline-color: hsl(var(--er) / 1);
2914
+ }
2936
2915
  .input-disabled,
2916
+ .input:disabled,
2937
2917
  .input[disabled] {
2938
2918
  cursor: not-allowed;
2939
2919
  --tw-border-opacity: 1;
2940
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2920
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2941
2921
  --tw-bg-opacity: 1;
2942
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2922
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2943
2923
  --tw-text-opacity: 0.2;
2944
2924
  }
2945
2925
  .input-disabled::placeholder,
2926
+ .input:disabled::placeholder,
2946
2927
  .input[disabled]::placeholder {
2947
2928
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
2948
2929
  --tw-placeholder-opacity: 0.2;
2949
2930
  }
2931
+ .join {
2932
+ border-radius: var(--rounded-btn, 0.5rem)
2933
+ }
2934
+ .join > :where(*:not(:first-child)) {
2935
+ margin-top: 0px;
2936
+ margin-bottom: 0px;
2937
+ margin-left: -1px
2938
+ }
2939
+ .join-item:focus {
2940
+ isolation: isolate
2941
+ }
2950
2942
  .kbd {
2951
2943
  border-width: 1px;
2952
2944
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
2953
2945
  --tw-border-opacity: 0.2;
2954
2946
  --tw-bg-opacity: 1;
2955
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2947
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2956
2948
  padding-left: 0.5rem;
2957
2949
  padding-right: 0.5rem;
2958
2950
  border-radius: var(--rounded-btn, 0.5rem);
@@ -2961,346 +2953,299 @@
2961
2953
  min-width: 2.2em
2962
2954
  }
2963
2955
  .link-primary {
2964
- --tw-text-opacity: 1;
2965
- color: hsl(var(--p) / var(--tw-text-opacity));
2956
+ --tw-text-opacity: 1;
2957
+ color: hsl(var(--p) / var(--tw-text-opacity));
2966
2958
  }
2967
- .link-primary:hover {
2959
+ @media (hover: hover) {
2960
+ .link-primary:hover {
2968
2961
  --tw-text-opacity: 1;
2969
- color: hsl(var(--pf, var(--p)) / var(--tw-text-opacity));
2962
+ color: hsl(var(--pf) / var(--tw-text-opacity));
2963
+ }
2970
2964
  }
2971
2965
  .link-secondary {
2972
- --tw-text-opacity: 1;
2973
- color: hsl(var(--s) / var(--tw-text-opacity));
2966
+ --tw-text-opacity: 1;
2967
+ color: hsl(var(--s) / var(--tw-text-opacity));
2974
2968
  }
2969
+ @media (hover: hover) {
2975
2970
  .link-secondary:hover {
2976
2971
  --tw-text-opacity: 1;
2977
- color: hsl(var(--sf, var(--s)) / var(--tw-text-opacity));
2972
+ color: hsl(var(--sf) / var(--tw-text-opacity));
2973
+ }
2978
2974
  }
2979
2975
  .link-accent {
2980
- --tw-text-opacity: 1;
2981
- color: hsl(var(--a) / var(--tw-text-opacity));
2976
+ --tw-text-opacity: 1;
2977
+ color: hsl(var(--a) / var(--tw-text-opacity));
2982
2978
  }
2979
+ @media (hover: hover) {
2983
2980
  .link-accent:hover {
2984
2981
  --tw-text-opacity: 1;
2985
- color: hsl(var(--af, var(--a)) / var(--tw-text-opacity));
2982
+ color: hsl(var(--af) / var(--tw-text-opacity));
2983
+ }
2986
2984
  }
2987
2985
  .link-neutral {
2988
- --tw-text-opacity: 1;
2989
- color: hsl(var(--n) / var(--tw-text-opacity));
2986
+ --tw-text-opacity: 1;
2987
+ color: hsl(var(--n) / var(--tw-text-opacity));
2990
2988
  }
2989
+ @media (hover: hover) {
2991
2990
  .link-neutral:hover {
2992
2991
  --tw-text-opacity: 1;
2993
- color: hsl(var(--nf, var(--n)) / var(--tw-text-opacity));
2992
+ color: hsl(var(--nf) / var(--tw-text-opacity));
2993
+ }
2994
2994
  }
2995
2995
  .link-success {
2996
- --tw-text-opacity: 1;
2997
- color: hsl(var(--su) / var(--tw-text-opacity));
2996
+ --tw-text-opacity: 1;
2997
+ color: hsl(var(--su) / var(--tw-text-opacity));
2998
2998
  }
2999
+ @media (hover: hover) {
2999
3000
  .link-success:hover {
3000
3001
  --tw-text-opacity: 1;
3001
3002
  color: hsl(var(--su) / var(--tw-text-opacity));
3003
+ }
3002
3004
  }
3003
3005
  .link-info {
3004
- --tw-text-opacity: 1;
3005
- color: hsl(var(--in) / var(--tw-text-opacity));
3006
+ --tw-text-opacity: 1;
3007
+ color: hsl(var(--in) / var(--tw-text-opacity));
3006
3008
  }
3009
+ @media (hover: hover) {
3007
3010
  .link-info:hover {
3008
3011
  --tw-text-opacity: 1;
3009
3012
  color: hsl(var(--in) / var(--tw-text-opacity));
3013
+ }
3010
3014
  }
3011
3015
  .link-warning {
3012
- --tw-text-opacity: 1;
3013
- color: hsl(var(--wa) / var(--tw-text-opacity));
3016
+ --tw-text-opacity: 1;
3017
+ color: hsl(var(--wa) / var(--tw-text-opacity));
3014
3018
  }
3019
+ @media (hover: hover) {
3015
3020
  .link-warning:hover {
3016
3021
  --tw-text-opacity: 1;
3017
3022
  color: hsl(var(--wa) / var(--tw-text-opacity));
3023
+ }
3018
3024
  }
3019
3025
  .link-error {
3020
- --tw-text-opacity: 1;
3021
- color: hsl(var(--er) / var(--tw-text-opacity));
3026
+ --tw-text-opacity: 1;
3027
+ color: hsl(var(--er) / var(--tw-text-opacity));
3022
3028
  }
3029
+ @media (hover: hover) {
3023
3030
  .link-error:hover {
3024
3031
  --tw-text-opacity: 1;
3025
3032
  color: hsl(var(--er) / var(--tw-text-opacity));
3033
+ }
3026
3034
  }
3027
3035
  .link:focus {
3028
- outline: 2px solid transparent;
3029
- outline-offset: 2px;
3036
+ outline: 2px solid transparent;
3037
+ outline-offset: 2px;
3030
3038
  }
3031
3039
  .link:focus-visible {
3032
3040
  outline: 2px solid currentColor;
3033
3041
  outline-offset: 2px;
3034
3042
  }
3043
+ .loading {
3044
+ pointer-events: none;
3045
+ display: inline-block;
3046
+ aspect-ratio: 1 / 1;
3047
+ width: 1.5rem;
3048
+ background-color: currentColor;
3049
+ mask-size: 100%;
3050
+ mask-repeat: no-repeat;
3051
+ mask-position: center;
3052
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3053
+ }
3054
+ .loading-spinner {
3055
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3056
+ }
3057
+ .loading-dots {
3058
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
3059
+ }
3060
+ .loading-ring {
3061
+ mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3062
+ }
3063
+ .loading-ball {
3064
+ mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E");
3065
+ }
3066
+ .loading-bars {
3067
+ mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E");
3068
+ }
3069
+ .loading-infinity {
3070
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E");
3071
+ }
3072
+ .loading-xs {
3073
+ width: 1rem;
3074
+ }
3075
+ .loading-sm {
3076
+ width: 1.25rem;
3077
+ }
3078
+ .loading-md {
3079
+ width: 1.5rem;
3080
+ }
3081
+ .loading-lg {
3082
+ width: 2.5rem;
3083
+ }
3035
3084
  .mask-squircle {
3036
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
3037
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
3085
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
3038
3086
  }
3039
3087
  .mask-decagon {
3040
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3041
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3088
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3042
3089
  }
3043
3090
  .mask-diamond {
3044
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3045
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3091
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3046
3092
  }
3047
3093
  .mask-heart {
3048
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3049
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3094
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3050
3095
  }
3051
3096
  .mask-hexagon {
3052
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3053
- mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3097
+ mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3054
3098
  }
3055
3099
  .mask-hexagon-2 {
3056
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3057
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3100
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3058
3101
  }
3059
3102
  .mask-circle {
3060
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
3061
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
3103
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
3062
3104
  }
3063
3105
  .mask-parallelogram {
3064
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3065
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3106
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3066
3107
  }
3067
3108
  .mask-parallelogram-2 {
3068
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
3069
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
3109
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
3070
3110
  }
3071
3111
  .mask-parallelogram-3 {
3072
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3073
- mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3112
+ mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3074
3113
  }
3075
3114
  .mask-parallelogram-4 {
3076
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3077
- mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3115
+ mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3078
3116
  }
3079
3117
  .mask-pentagon {
3080
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3081
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3118
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3082
3119
  }
3083
3120
  .mask-square {
3084
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3085
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3121
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3086
3122
  }
3087
3123
  .mask-star {
3088
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3089
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3124
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3090
3125
  }
3091
3126
  .mask-star-2 {
3092
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3093
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3127
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3094
3128
  }
3095
3129
  .mask-triangle {
3096
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3097
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3130
+ mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3098
3131
  }
3099
3132
  .mask-triangle-2 {
3100
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3101
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3133
+ mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3102
3134
  }
3103
3135
  .mask-triangle-3 {
3104
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3105
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3136
+ mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3106
3137
  }
3107
3138
  .mask-triangle-4 {
3108
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3109
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3110
- }
3111
- .menu.horizontal > li.bordered > a,
3112
- .menu.horizontal > li.bordered > button,
3113
- .menu.horizontal > li.bordered > span {
3114
- border-left-width: 0px;
3115
- border-bottom-width: 4px;
3116
- --tw-border-opacity: 1;
3117
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3118
- }
3119
- .menu[class*=" px-"]:not(.menu[class*=" px-0"]) li > *,
3120
- .menu[class^="px-"]:not(.menu[class^="px-0"]) li > *,
3121
- .menu[class*=" p-"]:not(.menu[class*=" p-0"]) li > *,
3122
- .menu[class^="p-"]:not(.menu[class^="p-0"]) li > * {
3123
- border-radius: var(--rounded-btn, 0.5rem);
3124
- }
3125
- .menu :where(li.bordered > *) {
3126
- border-left-width: 4px;
3127
- --tw-border-opacity: 1;
3128
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3129
- }
3130
- .menu :where(li) > :where(*:not(ul)) {
3131
- gap: 0.75rem;
3132
- padding-left: 1rem;
3133
- padding-right: 1rem;
3134
- padding-top: 0.75rem;
3135
- padding-bottom: 0.75rem;
3136
- color: currentColor;
3137
- }
3138
- .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),
3139
- .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover) {
3140
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3141
- --tw-bg-opacity: 0.1;
3142
- }
3143
- .menu :where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),
3144
- .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active) {
3145
- --tw-bg-opacity: 1;
3146
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3147
- --tw-text-opacity: 1;
3148
- color: hsl(var(--pc) / var(--tw-text-opacity));
3139
+ mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3140
+ }
3141
+ .menu {
3142
+ padding: 0.5rem;
3149
3143
  }
3150
3144
  .menu :where(li:empty) {
3151
- margin-left: 1rem;
3152
- margin-right: 1rem;
3153
- margin-top: 0.5rem;
3154
- margin-bottom: 0.5rem;
3155
- height: 1px;
3156
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3157
- --tw-bg-opacity: 0.1;
3158
- }
3159
- .menu li.disabled > * {
3160
- user-select: none;
3161
- color: hsl(var(--bc) / var(--tw-text-opacity));
3162
- --tw-text-opacity: 0.2;
3163
- }
3164
- .menu li.disabled > *:hover {
3165
- background-color: transparent;
3166
- }
3167
- .menu li.hover-bordered a {
3168
- border-left-width: 4px;
3169
- border-color: transparent;
3170
- }
3171
- .menu li.hover-bordered a:hover {
3172
- --tw-border-opacity: 1;
3173
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3174
- }
3175
- .menu.compact li > a,
3176
- .menu.compact li > span {
3177
- padding-top: 0.5rem;
3178
- padding-bottom: 0.5rem;
3179
- font-size: 0.875rem;
3180
- line-height: 1.25rem;
3181
- }
3182
- .menu .menu-title {
3183
- font-size: 0.75rem;
3184
- line-height: 1rem;
3185
- font-weight: 700;
3186
- opacity: 0.4;
3187
- }
3188
- .menu .menu-title > * {
3189
- padding-top: 0.25rem;
3190
- padding-bottom: 0.25rem;
3191
- }
3192
-
3193
- .menu :where(li:not(.disabled)) > :where(*:not(ul)) {
3194
- outline: 2px solid transparent;
3195
- outline-offset: 2px;
3196
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3197
- transition-duration: 200ms;
3198
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3199
- }
3200
-
3201
- .menu > :where(li:first-child) {
3202
- border-top-left-radius: inherit;
3203
- border-top-right-radius: inherit;
3204
- border-bottom-right-radius: unset;
3205
- border-bottom-left-radius: unset;
3145
+ background-color: hsl(var(--bc) / 0.1);
3146
+ margin: 0.5rem 1rem;
3147
+ height: 1px;
3206
3148
  }
3207
-
3208
- .menu > :where(li:first-child) > :where(:not(ul)) {
3209
- border-top-left-radius: inherit;
3210
- border-top-right-radius: inherit;
3211
- border-bottom-right-radius: unset;
3212
- border-bottom-left-radius: unset;
3213
- }
3214
-
3215
- .menu > :where(li:last-child) {
3216
- border-top-left-radius: unset;
3217
- border-top-right-radius: unset;
3218
- border-bottom-right-radius: inherit;
3219
- border-bottom-left-radius: inherit;
3220
- }
3221
-
3222
- .menu > :where(li:last-child) > :where(:not(ul)) {
3223
- border-top-left-radius: unset;
3224
- border-top-right-radius: unset;
3225
- border-bottom-right-radius: inherit;
3226
- border-bottom-left-radius: inherit;
3227
- }
3228
-
3229
- .menu > :where(li:first-child:last-child) {
3230
- border-top-left-radius: inherit;
3231
- border-top-right-radius: inherit;
3232
- border-bottom-right-radius: inherit;
3233
- border-bottom-left-radius: inherit;
3234
- }
3235
-
3236
- .menu > :where(li:first-child:last-child) > :where(:not(ul)) {
3237
- border-top-left-radius: inherit;
3238
- border-top-right-radius: inherit;
3239
- border-bottom-right-radius: inherit;
3240
- border-bottom-left-radius: inherit;
3149
+ .menu :where(li ul) {
3150
+ margin-left: 1rem;
3151
+ padding-left: 0.5rem;
3241
3152
  }
3242
-
3243
- .menu > :where(li) > :where(ul) {
3244
- border-top-left-radius: inherit;
3245
- border-top-right-radius: inherit;
3246
- border-bottom-right-radius: inherit;
3247
- border-bottom-left-radius: inherit;
3153
+ .menu :where(li ul):before {
3154
+ position: absolute;
3155
+ left: 0px;
3156
+ top: 0.75rem;
3157
+ bottom: 0.75rem;
3158
+ width: 1px;
3159
+ background-color: hsl(var(--bc) / 0.1);
3160
+ content: "";
3248
3161
  }
3249
-
3250
- .menu > :where(li) > :where(ul) :where(li) {
3251
- width: 100%;
3252
- white-space: nowrap;
3162
+ /* :where(& > li:not(.menu-title) > details > ul) {
3163
+ @apply bg-base-100 shadow-xl rounded-box;
3164
+ } */
3165
+ .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3166
+ .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
3167
+ padding-left: 1rem;
3168
+ padding-right: 1rem;
3169
+ padding-top: 0.5rem;
3170
+ padding-bottom: 0.5rem;
3171
+ text-align: left;
3172
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3173
+ transition-duration: 200ms;
3174
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3175
+ border-radius: var(--rounded-btn, 0.5rem);
3253
3176
  }
3254
-
3255
- .menu > :where(li) > :where(ul) :where(li) :where(ul) {
3256
- padding-left: 1rem;
3177
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)).focus,
3178
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)):focus,
3179
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)).focus,
3180
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):focus {
3181
+ cursor: pointer;
3182
+ background-color: hsl(var(--bc) / 0.1);
3183
+ outline: 2px solid transparent;
3184
+ outline-offset: 2px;
3257
3185
  }
3258
-
3259
- .menu > :where(li) > :where(ul) :where(li) > :where(:not(ul)) {
3260
- width: 100%;
3261
- white-space: nowrap;
3186
+ @media (hover: hover) {
3187
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)):hover,
3188
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):hover {
3189
+ cursor: pointer;
3190
+ background-color: hsl(var(--bc) / 0.1);
3191
+ outline: 2px solid transparent;
3192
+ outline-offset: 2px;
3193
+ }
3262
3194
  }
3263
-
3264
- .menu > :where(li) > :where(ul) > :where(li:first-child) {
3265
- border-top-left-radius: inherit;
3266
- border-top-right-radius: inherit;
3267
- border-bottom-right-radius: unset;
3268
- border-bottom-left-radius: unset;
3195
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)):active,
3196
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)):where(.active),
3197
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):active,
3198
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):where(.active) {
3199
+ --tw-bg-opacity: 1;
3200
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3201
+ --tw-text-opacity: 1;
3202
+ color: hsl(var(--nc) / var(--tw-text-opacity));
3269
3203
  }
3270
-
3271
- .menu > :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul)) {
3272
- border-top-left-radius: inherit;
3273
- border-top-right-radius: inherit;
3274
- border-bottom-right-radius: unset;
3275
- border-bottom-left-radius: unset;
3204
+ @media (hover: hover) {
3205
+ .menu :where(li:not(.menu-title):not(.disabled)>*:not(ul):not(details):not(.menu-title)):where(.active):hover,
3206
+ .menu :where(li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):where(.active):hover {
3207
+ --tw-bg-opacity: 1;
3208
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3209
+ --tw-text-opacity: 1;
3210
+ color: hsl(var(--nc) / var(--tw-text-opacity));
3211
+ }
3276
3212
  }
3277
-
3278
- .menu > :where(li) > :where(ul) > :where(li:last-child) {
3279
- border-top-left-radius: unset;
3280
- border-top-right-radius: unset;
3281
- border-bottom-right-radius: inherit;
3282
- border-bottom-left-radius: inherit;
3213
+ .menu li.disabled {
3214
+ color: hsl(var(--bc) / 0.3);
3283
3215
  }
3284
-
3285
- .menu > :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul)) {
3286
- border-top-left-radius: unset;
3287
- border-top-right-radius: unset;
3288
- border-bottom-right-radius: inherit;
3289
- border-bottom-left-radius: inherit;
3216
+ .menu :where(li > details > summary)::-webkit-details-marker {
3217
+ display: none;
3290
3218
  }
3291
-
3292
- .menu > :where(li) > :where(ul) > :where(li:first-child:last-child) {
3293
- border-top-left-radius: inherit;
3294
- border-top-right-radius: inherit;
3295
- border-bottom-right-radius: inherit;
3296
- border-bottom-left-radius: inherit;
3219
+ .menu :where(li > details > summary):after,
3220
+ .menu :where(li > .menu-dropdown-toggle):after {
3221
+ justify-self: end;
3222
+ display: block;
3223
+ margin-top: -0.5rem;
3224
+ height: 0.5rem;
3225
+ width: 0.5rem;
3226
+ transform: rotate(45deg);
3227
+ transition-property: transform, margin-top;
3228
+ transition-duration: 0.3s;
3229
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3230
+ content: "";
3231
+ transform-origin: 75% 75%;
3232
+ box-shadow: 2px 2px;
3233
+ pointer-events: none;
3297
3234
  }
3298
-
3299
- .menu > :where(li) > :where(ul) > :where(li:first-child:last-child) > :where(:not(ul)) {
3300
- border-top-left-radius: inherit;
3301
- border-top-right-radius: inherit;
3302
- border-bottom-right-radius: inherit;
3303
- border-bottom-left-radius: inherit;
3235
+ .menu :where(li > details[open] > summary):after,
3236
+ .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
3237
+ transform: rotate(225deg);
3238
+ margin-top: 0;
3239
+ }
3240
+ .menu .menu-title {
3241
+ padding-left: 1rem;
3242
+ padding-right: 1rem;
3243
+ padding-top: 0.5rem;
3244
+ padding-bottom: 0.5rem;
3245
+ font-size: 0.875rem;
3246
+ line-height: 1.25rem;
3247
+ font-weight: 700;
3248
+ color: hsl(var(--bc) / 0.4);
3304
3249
  }
3305
3250
  .mockup-code {
3306
3251
  min-width: 18rem;
@@ -3396,50 +3341,65 @@
3396
3341
  margin-top: -25px;
3397
3342
  }
3398
3343
  .modal {
3399
- background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
3400
- --tw-bg-opacity: 0.4;
3344
+ background-color: transparent;
3401
3345
  transition-duration: 200ms;
3402
3346
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3403
3347
  transition-property: transform, opacity, visibility;
3404
3348
  overflow-y: hidden;
3405
- overscroll-behavior: contain
3349
+ overscroll-behavior: contain;
3350
+ background-color: rgba(0, 0, 0, 0.3);
3351
+ }
3352
+ .modal::backdrop {
3353
+ background: transparent;
3354
+ }
3355
+ .modal-backdrop {
3356
+ z-index: -1;
3357
+ grid-column-start: 1;
3358
+ grid-row-start: 1;
3359
+ display: grid;
3360
+ align-self: stretch;
3361
+ justify-self: stretch;
3362
+ color: transparent;
3406
3363
  }
3407
3364
  .modal-box {
3365
+ grid-column-start: 1;
3366
+ grid-row-start: 1;
3367
+ width: 91.666667%;
3368
+ max-width: 32rem;
3369
+ --tw-scale-x: .9;
3370
+ --tw-scale-y: .9;
3371
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3408
3372
  --tw-bg-opacity: 1;
3409
3373
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3410
3374
  padding: 1.5rem;
3411
3375
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3412
3376
  transition-duration: 200ms;
3413
3377
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3414
- width: 91.666667%;
3415
- max-width: 32rem;
3416
- --tw-scale-x: .9;
3417
- --tw-scale-y: .9;
3418
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3419
3378
  border-top-left-radius: var(--rounded-box, 1rem);
3420
3379
  border-top-right-radius: var(--rounded-box, 1rem);
3421
3380
  border-bottom-left-radius: var(--rounded-box, 1rem);
3422
3381
  border-bottom-right-radius: var(--rounded-box, 1rem);
3423
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3382
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
3424
3383
  overflow-y: auto;
3425
- overscroll-behavior: contain
3384
+ overscroll-behavior: contain;
3426
3385
  }
3427
3386
  .modal-open .modal-box,
3428
3387
  .modal-toggle:checked + .modal .modal-box,
3429
- .modal:target .modal-box {
3388
+ .modal:target .modal-box,
3389
+ .modal[open] .modal-box {
3430
3390
  --tw-translate-y: 0px;
3431
3391
  --tw-scale-x: 1;
3432
3392
  --tw-scale-y: 1;
3433
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
3393
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3434
3394
  }
3435
3395
  .modal-action {
3436
3396
  margin-top: 1.5rem;
3437
- justify-content: flex-end
3397
+ justify-content: flex-end;
3438
3398
  }
3439
3399
  .modal-action > :not([hidden]) ~ :not([hidden]) {
3440
3400
  --tw-space-x-reverse: 0;
3441
3401
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3442
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
3402
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3443
3403
  }
3444
3404
  .navbar {
3445
3405
  padding: var(--navbar-padding, 0.5rem);
@@ -3521,7 +3481,7 @@
3521
3481
  }
3522
3482
  .progress::-webkit-progress-value {
3523
3483
  --tw-bg-opacity: 1;
3524
- background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
3484
+ background-color: hsl(var(--nf) / var(--tw-bg-opacity));
3525
3485
  border-radius: var(--rounded-box, 1rem);
3526
3486
  }
3527
3487
  .progress-primary::-webkit-progress-value {
@@ -3568,7 +3528,8 @@
3568
3528
  50% {
3569
3529
  left: 107%;
3570
3530
  }
3571
- }.radial-progress {
3531
+ }
3532
+ .radial-progress {
3572
3533
  --value: 0;
3573
3534
  --size: 5rem;
3574
3535
  --thickness: calc(var(--size) / 10);
@@ -3588,11 +3549,13 @@
3588
3549
  --tw-border-opacity: 0.2;
3589
3550
  }
3590
3551
  .radio:focus-visible {
3591
- outline: 2px solid hsl(var(--bc));
3592
- outline-offset: 2px;
3593
- }
3552
+ outline-style: solid;
3553
+ outline-width: 2px;
3554
+ outline-offset: 2px;
3555
+ outline-color: hsl(var(--bc) / 1);
3556
+ }
3594
3557
  .radio:checked,
3595
- .radio[aria-checked=true] {
3558
+ .radio[aria-checked="true"] {
3596
3559
  --tw-bg-opacity: 1;
3597
3560
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3598
3561
  animation: radiomark var(--animation-input, 0.2s) ease-in-out;
@@ -3603,15 +3566,17 @@
3603
3566
  --tw-border-opacity: 1;
3604
3567
  border-color: hsl(var(--p) / var(--tw-border-opacity));
3605
3568
  }
3569
+ @media (hover: hover) {
3606
3570
  .radio-primary:hover {
3607
- --tw-border-opacity: 1;
3608
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3571
+ --tw-border-opacity: 1;
3572
+ border-color: hsl(var(--p) / var(--tw-border-opacity));
3573
+ }
3609
3574
  }
3610
3575
  .radio-primary:focus-visible {
3611
- outline: 2px solid hsl(var(--p));
3612
- }
3576
+ outline-color: hsl(var(--p) / 1);
3577
+ }
3613
3578
  .radio-primary:checked,
3614
- .radio-primary[aria-checked=true] {
3579
+ .radio-primary[aria-checked="true"] {
3615
3580
  --tw-border-opacity: 1;
3616
3581
  border-color: hsl(var(--p) / var(--tw-border-opacity));
3617
3582
  --tw-bg-opacity: 1;
@@ -3624,15 +3589,17 @@
3624
3589
  --tw-border-opacity: 1;
3625
3590
  border-color: hsl(var(--s) / var(--tw-border-opacity));
3626
3591
  }
3592
+ @media (hover: hover) {
3627
3593
  .radio-secondary:hover {
3628
- --tw-border-opacity: 1;
3629
- border-color: hsl(var(--s) / var(--tw-border-opacity));
3594
+ --tw-border-opacity: 1;
3595
+ border-color: hsl(var(--s) / var(--tw-border-opacity));
3596
+ }
3630
3597
  }
3631
3598
  .radio-secondary:focus-visible {
3632
- outline: 2px solid hsl(var(--s));
3633
- }
3599
+ outline-color: hsl(var(--s) / 1);
3600
+ }
3634
3601
  .radio-secondary:checked,
3635
- .radio-secondary[aria-checked=true] {
3602
+ .radio-secondary[aria-checked="true"] {
3636
3603
  --tw-border-opacity: 1;
3637
3604
  border-color: hsl(var(--s) / var(--tw-border-opacity));
3638
3605
  --tw-bg-opacity: 1;
@@ -3645,15 +3612,17 @@
3645
3612
  --tw-border-opacity: 1;
3646
3613
  border-color: hsl(var(--a) / var(--tw-border-opacity));
3647
3614
  }
3615
+ @media (hover: hover) {
3648
3616
  .radio-accent:hover {
3649
- --tw-border-opacity: 1;
3650
- border-color: hsl(var(--a) / var(--tw-border-opacity));
3617
+ --tw-border-opacity: 1;
3618
+ border-color: hsl(var(--a) / var(--tw-border-opacity));
3619
+ }
3651
3620
  }
3652
3621
  .radio-accent:focus-visible {
3653
- outline: 2px solid hsl(var(--a));
3654
- }
3622
+ outline-color: hsl(var(--a) / 1);
3623
+ }
3655
3624
  .radio-accent:checked,
3656
- .radio-accent[aria-checked=true] {
3625
+ .radio-accent[aria-checked="true"] {
3657
3626
  --tw-border-opacity: 1;
3658
3627
  border-color: hsl(var(--a) / var(--tw-border-opacity));
3659
3628
  --tw-bg-opacity: 1;
@@ -3666,84 +3635,92 @@
3666
3635
  --tw-border-opacity: 1;
3667
3636
  border-color: hsl(var(--su) / var(--tw-border-opacity));
3668
3637
  }
3638
+ @media (hover: hover) {
3669
3639
  .radio-success:hover {
3670
- --tw-border-opacity: 1;
3671
- border-color: hsl(var(--su) / var(--tw-border-opacity));
3640
+ --tw-border-opacity: 1;
3641
+ border-color: hsl(var(--su) / var(--tw-border-opacity));
3642
+ }
3672
3643
  }
3673
3644
  .radio-success:focus-visible {
3674
- outline: 2px solid hsl(var(--su));
3675
- }
3645
+ outline-color: hsl(var(--su) / 1);
3646
+ }
3676
3647
  .radio-success:checked,
3677
- .radio-success[aria-checked=true] {
3648
+ .radio-success[aria-checked="true"] {
3678
3649
  --tw-border-opacity: 1;
3679
3650
  border-color: hsl(var(--su) / var(--tw-border-opacity));
3680
3651
  --tw-bg-opacity: 1;
3681
3652
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
3682
3653
  --tw-text-opacity: 1;
3683
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
3654
+ color: hsl(var(--suc) / var(--tw-text-opacity));
3684
3655
  }
3685
3656
  .radio-warning {
3686
3657
  --chkbg: var(--wa);
3687
3658
  --tw-border-opacity: 1;
3688
3659
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
3689
3660
  }
3661
+ @media (hover: hover) {
3690
3662
  .radio-warning:hover {
3691
- --tw-border-opacity: 1;
3692
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
3663
+ --tw-border-opacity: 1;
3664
+ border-color: hsl(var(--wa) / var(--tw-border-opacity));
3665
+ }
3693
3666
  }
3694
3667
  .radio-warning:focus-visible {
3695
- outline: 2px solid hsl(var(--wa));
3696
- }
3668
+ outline-color: hsl(var(--wa) / 1);
3669
+ }
3697
3670
  .radio-warning:checked,
3698
- .radio-warning[aria-checked=true] {
3671
+ .radio-warning[aria-checked="true"] {
3699
3672
  --tw-border-opacity: 1;
3700
3673
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
3701
3674
  --tw-bg-opacity: 1;
3702
3675
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3703
3676
  --tw-text-opacity: 1;
3704
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
3677
+ color: hsl(var(--wac) / var(--tw-text-opacity));
3705
3678
  }
3706
3679
  .radio-info {
3707
3680
  --chkbg: var(--in);
3708
3681
  --tw-border-opacity: 1;
3709
3682
  border-color: hsl(var(--in) / var(--tw-border-opacity));
3710
3683
  }
3684
+ @media (hover: hover) {
3711
3685
  .radio-info:hover {
3712
- --tw-border-opacity: 1;
3713
- border-color: hsl(var(--in) / var(--tw-border-opacity));
3686
+ --tw-border-opacity: 1;
3687
+ border-color: hsl(var(--in) / var(--tw-border-opacity));
3688
+ }
3714
3689
  }
3715
3690
  .radio-info:focus-visible {
3716
- outline: 2px solid hsl(var(--in));
3717
- }
3691
+ outline-color: hsl(var(--in) / 1);
3692
+ }
3718
3693
  .radio-info:checked,
3719
- .radio-info[aria-checked=true] {
3694
+ .radio-info[aria-checked="true"] {
3720
3695
  --tw-border-opacity: 1;
3721
3696
  border-color: hsl(var(--in) / var(--tw-border-opacity));
3722
3697
  --tw-bg-opacity: 1;
3723
3698
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
3724
3699
  --tw-text-opacity: 1;
3725
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
3700
+ color: hsl(var(--inc) / var(--tw-text-opacity));
3726
3701
  }
3727
3702
  .radio-error {
3728
3703
  --chkbg: var(--er);
3729
3704
  --tw-border-opacity: 1;
3730
3705
  border-color: hsl(var(--er) / var(--tw-border-opacity));
3731
3706
  }
3707
+ @media (hover: hover) {
3732
3708
  .radio-error:hover {
3733
- --tw-border-opacity: 1;
3734
- border-color: hsl(var(--er) / var(--tw-border-opacity));
3709
+ --tw-border-opacity: 1;
3710
+ border-color: hsl(var(--er) / var(--tw-border-opacity));
3711
+ }
3735
3712
  }
3736
3713
  .radio-error:focus-visible {
3737
- outline: 2px solid hsl(var(--er));
3738
- }
3714
+ outline-color: hsl(var(--er) / 1);
3715
+ }
3739
3716
  .radio-error:checked,
3740
- .radio-error[aria-checked=true] {
3717
+ .radio-error[aria-checked="true"] {
3741
3718
  --tw-border-opacity: 1;
3742
3719
  border-color: hsl(var(--er) / var(--tw-border-opacity));
3743
3720
  --tw-bg-opacity: 1;
3744
3721
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
3745
3722
  --tw-text-opacity: 1;
3746
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
3723
+ color: hsl(var(--erc) / var(--tw-text-opacity));
3747
3724
  }
3748
3725
  .radio:disabled {
3749
3726
  cursor: not-allowed;
@@ -3784,22 +3761,23 @@
3784
3761
  .range::-webkit-slider-runnable-track {
3785
3762
  height: 0.5rem;
3786
3763
  width: 100%;
3764
+ background-color: hsl(var(--bc) / 0.1);
3787
3765
  border-radius: var(--rounded-box, 1rem);
3788
- background-color: hsla(var(--bc) / 0.1);
3789
3766
  }
3790
3767
  .range::-moz-range-track {
3791
3768
  height: 0.5rem;
3792
3769
  width: 100%;
3770
+ background-color: hsl(var(--bc) / 0.1);
3793
3771
  border-radius: var(--rounded-box, 1rem);
3794
- background-color: hsla(var(--bc) / 0.1);
3795
3772
  }
3796
3773
  .range::-webkit-slider-thumb {
3797
- background-color: hsl(var(--b1));
3798
- position: relative;
3799
- height: 1.5rem;
3800
- width: 1.5rem;
3801
- border-style: none;
3802
- border-radius: var(--rounded-box, 1rem);
3774
+ position: relative;
3775
+ height: 1.5rem;
3776
+ width: 1.5rem;
3777
+ border-style: none;
3778
+ --tw-bg-opacity: 1;
3779
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3780
+ border-radius: var(--rounded-box, 1rem);
3803
3781
  appearance: none;
3804
3782
  -webkit-appearance: none;
3805
3783
  top: 50%;
@@ -3807,21 +3785,24 @@
3807
3785
  transform: translateY(-50%);
3808
3786
  --filler-size: 100rem;
3809
3787
  --filler-offset: 0.6rem;
3810
- box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3811
- }
3788
+ box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
3789
+ calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3790
+ }
3812
3791
  .range::-moz-range-thumb {
3813
- background-color: hsl(var(--b1));
3814
- position: relative;
3815
- height: 1.5rem;
3816
- width: 1.5rem;
3817
- border-style: none;
3818
- border-radius: var(--rounded-box, 1rem);
3792
+ position: relative;
3793
+ height: 1.5rem;
3794
+ width: 1.5rem;
3795
+ border-style: none;
3796
+ --tw-bg-opacity: 1;
3797
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3798
+ border-radius: var(--rounded-box, 1rem);
3819
3799
  top: 50%;
3820
3800
  color: hsl(var(--range-shdw));
3821
3801
  --filler-size: 100rem;
3822
3802
  --filler-offset: 0.5rem;
3823
- box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3824
- }
3803
+ box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
3804
+ calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3805
+ }
3825
3806
  .range-primary {
3826
3807
  --range-shdw: var(--p);
3827
3808
  }
@@ -3859,7 +3840,7 @@
3859
3840
  background-color: transparent;
3860
3841
  }
3861
3842
  .rating input:checked ~ input,
3862
- .rating input[aria-checked=true] ~ input {
3843
+ .rating input[aria-checked="true"] ~ input {
3863
3844
  --tw-bg-opacity: 0.2;
3864
3845
  }
3865
3846
  .rating input:focus-visible {
@@ -3900,15 +3881,18 @@
3900
3881
  --tw-border-opacity: 0.2;
3901
3882
  }
3902
3883
  .select {
3903
- background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
3884
+ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
3885
+ linear-gradient(135deg, currentColor 50%, transparent 50%);
3904
3886
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
3905
3887
  background-size: 4px 4px, 4px 4px;
3906
3888
  background-repeat: no-repeat;
3907
3889
  }
3908
3890
  .select:focus {
3909
- outline: 2px solid hsla(var(--bc) / 0.2);
3910
- outline-offset: 2px;
3911
- }
3891
+ outline-style: solid;
3892
+ outline-width: 2px;
3893
+ outline-offset: 2px;
3894
+ outline-color: hsl(var(--bc) / 0.2);
3895
+ }
3912
3896
  .select-ghost {
3913
3897
  --tw-bg-opacity: 0.05;
3914
3898
  }
@@ -3922,60 +3906,62 @@
3922
3906
  border-color: hsl(var(--p) / var(--tw-border-opacity));
3923
3907
  }
3924
3908
  .select-primary:focus {
3925
- outline: 2px solid hsl(var(--p));
3926
- }
3909
+ outline-color: hsl(var(--p) / 1);
3910
+ }
3927
3911
  .select-secondary {
3928
3912
  --tw-border-opacity: 1;
3929
3913
  border-color: hsl(var(--s) / var(--tw-border-opacity));
3930
3914
  }
3931
3915
  .select-secondary:focus {
3932
- outline: 2px solid hsl(var(--s));
3933
- }
3916
+ outline-color: hsl(var(--s) / 1);
3917
+ }
3934
3918
  .select-accent {
3935
3919
  --tw-border-opacity: 1;
3936
3920
  border-color: hsl(var(--a) / var(--tw-border-opacity));
3937
3921
  }
3938
3922
  .select-accent:focus {
3939
- outline: 2px solid hsl(var(--a));
3940
- }
3923
+ outline-color: hsl(var(--a) / 1);
3924
+ }
3941
3925
  .select-info {
3942
3926
  --tw-border-opacity: 1;
3943
3927
  border-color: hsl(var(--in) / var(--tw-border-opacity));
3944
3928
  }
3945
3929
  .select-info:focus {
3946
- outline: 2px solid hsl(var(--in));
3947
- }
3930
+ outline-color: hsl(var(--in) / 1);
3931
+ }
3948
3932
  .select-success {
3949
3933
  --tw-border-opacity: 1;
3950
3934
  border-color: hsl(var(--su) / var(--tw-border-opacity));
3951
3935
  }
3952
3936
  .select-success:focus {
3953
- outline: 2px solid hsl(var(--su));
3954
- }
3937
+ outline-color: hsl(var(--su) / 1);
3938
+ }
3955
3939
  .select-warning {
3956
3940
  --tw-border-opacity: 1;
3957
3941
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
3958
3942
  }
3959
3943
  .select-warning:focus {
3960
- outline: 2px solid hsl(var(--wa));
3961
- }
3944
+ outline-color: hsl(var(--wa) / 1);
3945
+ }
3962
3946
  .select-error {
3963
3947
  --tw-border-opacity: 1;
3964
3948
  border-color: hsl(var(--er) / var(--tw-border-opacity));
3965
3949
  }
3966
3950
  .select-error:focus {
3967
- outline: 2px solid hsl(var(--er));
3968
- }
3951
+ outline-color: hsl(var(--er) / 1);
3952
+ }
3969
3953
  .select-disabled,
3954
+ .select:disabled,
3970
3955
  .select[disabled] {
3971
3956
  cursor: not-allowed;
3972
3957
  --tw-border-opacity: 1;
3973
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
3958
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
3974
3959
  --tw-bg-opacity: 1;
3975
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
3960
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
3976
3961
  --tw-text-opacity: 0.2;
3977
3962
  }
3978
3963
  .select-disabled::placeholder,
3964
+ .select:disabled::placeholder,
3979
3965
  .select[disabled]::placeholder {
3980
3966
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
3981
3967
  --tw-placeholder-opacity: 0.2;
@@ -4085,7 +4071,7 @@
4085
4071
  width: 100%;
4086
4072
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4087
4073
  --tw-bg-opacity: 1;
4088
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
4074
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
4089
4075
  --tw-text-opacity: 1;
4090
4076
  color: hsl(var(--bc) / var(--tw-text-opacity));
4091
4077
  content: "";
@@ -4106,7 +4092,7 @@
4106
4092
  place-self: center;
4107
4093
  border-radius: 9999px;
4108
4094
  --tw-bg-opacity: 1;
4109
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
4095
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
4110
4096
  --tw-text-opacity: 1;
4111
4097
  color: hsl(var(--bc) / var(--tw-text-opacity));
4112
4098
  }
@@ -4152,7 +4138,7 @@
4152
4138
  --tw-bg-opacity: 1;
4153
4139
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
4154
4140
  --tw-text-opacity: 1;
4155
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
4141
+ color: hsl(var(--inc) / var(--tw-text-opacity));
4156
4142
  }
4157
4143
  .steps .step-success + .step-success:before {
4158
4144
  --tw-bg-opacity: 1;
@@ -4162,7 +4148,7 @@
4162
4148
  --tw-bg-opacity: 1;
4163
4149
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
4164
4150
  --tw-text-opacity: 1;
4165
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
4151
+ color: hsl(var(--suc) / var(--tw-text-opacity));
4166
4152
  }
4167
4153
  .steps .step-warning + .step-warning:before {
4168
4154
  --tw-bg-opacity: 1;
@@ -4172,7 +4158,7 @@
4172
4158
  --tw-bg-opacity: 1;
4173
4159
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
4174
4160
  --tw-text-opacity: 1;
4175
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
4161
+ color: hsl(var(--wac) / var(--tw-text-opacity));
4176
4162
  }
4177
4163
  .steps .step-error + .step-error:before {
4178
4164
  --tw-bg-opacity: 1;
@@ -4182,7 +4168,7 @@
4182
4168
  --tw-bg-opacity: 1;
4183
4169
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
4184
4170
  --tw-text-opacity: 1;
4185
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
4171
+ color: hsl(var(--erc) / var(--tw-text-opacity));
4186
4172
  }
4187
4173
  .swap {
4188
4174
  cursor: pointer;
@@ -4243,12 +4229,13 @@
4243
4229
  }
4244
4230
  .tab {
4245
4231
  --tw-text-opacity: 0.5;
4246
- }.tab:hover {
4247
- --tw-text-opacity: 1;
4232
+ }@media (hover: hover) {.tab:hover {
4233
+ --tw-text-opacity: 1;
4234
+ }
4248
4235
  }.tab {
4249
- --tab-color: hsla(var(--bc) / var(--tw-text-opacity, 1));
4250
- --tab-bg: hsla(var(--b1) / var(--tw-bg-opacity, 1));
4251
- --tab-border-color: hsla(var(--b3) / var(--tw-bg-opacity, 1));
4236
+ --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
4237
+ --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
4238
+ --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
4252
4239
  color: var(--tab-color);
4253
4240
  padding-left: var(--tab-padding, 1rem);
4254
4241
  padding-right: var(--tab-padding, 1rem);
@@ -4272,12 +4259,18 @@
4272
4259
  }
4273
4260
  /* disabled */
4274
4261
  .tab-disabled,
4275
- .tab-disabled:hover,
4276
- .tab[disabled],
4277
- .tab[disabled]:hover {
4262
+ .tab[disabled] {
4278
4263
  cursor: not-allowed;
4279
4264
  color: hsl(var(--bc) / var(--tw-text-opacity));
4280
4265
  --tw-text-opacity: 0.2;
4266
+ }
4267
+ @media (hover: hover) {
4268
+ .tab-disabled:hover,
4269
+ .tab[disabled]:hover {
4270
+ cursor: not-allowed;
4271
+ color: hsl(var(--bc) / var(--tw-text-opacity));
4272
+ --tw-text-opacity: 0.2;
4273
+ }
4281
4274
  }
4282
4275
  .tab-bordered {
4283
4276
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
@@ -4316,7 +4309,13 @@
4316
4309
  height: var(--tab-radius, 0.5rem);
4317
4310
  bottom: 0;
4318
4311
  --tab-grad: calc(68% - var(--tab-border, 1px));
4319
- --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.3px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px));
4312
+ --tab-corner-bg: radial-gradient(
4313
+ circle at var(--circle-pos),
4314
+ transparent var(--tab-grad),
4315
+ var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
4316
+ var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
4317
+ var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
4318
+ );
4320
4319
  }
4321
4320
  .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4322
4321
  left: calc(var(--tab-radius, 0.5rem) * -1);
@@ -4342,12 +4341,13 @@
4342
4341
  .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:after {
4343
4342
  background: none;
4344
4343
  }
4345
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4344
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
4345
+ + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4346
4346
  background: none;
4347
4347
  }
4348
4348
  .tabs-boxed {
4349
4349
  --tw-bg-opacity: 1;
4350
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
4350
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
4351
4351
  padding: 0.25rem;
4352
4352
  border-radius: var(--rounded-btn, 0.5rem);
4353
4353
  }
@@ -4360,162 +4360,160 @@
4360
4360
  --tw-text-opacity: 1;
4361
4361
  color: hsl(var(--pc) / var(--tw-text-opacity));
4362
4362
  }
4363
+ @media (hover: hover) {
4363
4364
  .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
4364
- --tw-text-opacity: 1;
4365
- color: hsl(var(--pc) / var(--tw-text-opacity));
4365
+ --tw-text-opacity: 1;
4366
+ color: hsl(var(--pc) / var(--tw-text-opacity));
4367
+ }
4366
4368
  }
4367
4369
  .table {
4368
- text-align: left
4370
+ text-align: left;
4371
+ font-size: 0.875rem;
4372
+ line-height: 1.25rem;
4373
+ border-radius: var(--rounded-box, 1rem)
4369
4374
  }
4370
4375
  .table :where(th, td) {
4371
- white-space: nowrap;
4372
- padding: 1rem;
4373
- vertical-align: middle
4374
- }
4375
- .table tr.active th,
4376
- .table tr.active td,
4377
- .table tr.active:nth-child(even) th,
4378
- .table tr.active:nth-child(even) td {
4379
- --tw-bg-opacity: 1;
4380
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
4381
- }
4382
- .table tr.hover:hover th,
4383
- .table tr.hover:hover td,
4384
- .table tr.hover:nth-child(even):hover th,
4385
- .table tr.hover:nth-child(even):hover td {
4386
- --tw-bg-opacity: 1;
4387
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
4376
+ padding-left: 1rem;
4377
+ padding-right: 1rem;
4378
+ padding-top: 0.75rem;
4379
+ padding-bottom: 0.75rem;
4380
+ vertical-align: middle
4388
4381
  }
4389
- .table:where(:not(.table-zebra)) :where(thead, tbody, tfoot) :where(tr:not(:last-child) :where(th, td)) {
4390
- border-bottom-width: 1px;
4391
- --tw-border-opacity: 1;
4392
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))
4382
+ .table tr.active,
4383
+ .table tr.active:nth-child(even),
4384
+ .table-zebra tbody tr:nth-child(even) {
4385
+ --tw-bg-opacity: 1;
4386
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity))
4393
4387
  }
4394
- .table :where(thead, tfoot) :where(th, td) {
4388
+ @media (hover: hover) {
4389
+ .table tr.hover:hover,
4390
+ .table tr.hover:nth-child(even):hover {
4395
4391
  --tw-bg-opacity: 1;
4396
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
4397
- font-size: 0.75rem;
4398
- line-height: 1rem;
4399
- font-weight: 700;
4400
- text-transform: uppercase
4392
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity))
4393
+ }
4401
4394
  }
4402
- .table :where(tbody th, tbody td) {
4403
- --tw-bg-opacity: 1;
4404
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
4395
+ .table-zebra tr.active,
4396
+ .table-zebra tr.active:nth-child(even),
4397
+ .table-zebra-zebra tbody tr:nth-child(even) {
4398
+ --tw-bg-opacity: 1;
4399
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity))
4405
4400
  }
4406
- .table-zebra tbody tr:nth-child(even) th,
4407
- .table-zebra tbody tr:nth-child(even) td {
4401
+ @media (hover: hover) {
4402
+ .table-zebra tr.hover:hover,
4403
+ .table-zebra tr.hover:nth-child(even):hover {
4408
4404
  --tw-bg-opacity: 1;
4409
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))
4410
- }
4411
-
4412
- :where(.table *:first-child) :where(*:first-child) :where(th, td):first-child {
4413
- border-top-left-radius: var(--rounded-box, 1rem)
4414
- }
4415
-
4416
- :where(.table *:first-child) :where(*:first-child) :where(th, td):last-child {
4417
- border-top-right-radius: var(--rounded-box, 1rem)
4405
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity))
4406
+ }
4418
4407
  }
4419
-
4420
- :where(.table *:last-child) :where(*:last-child) :where(th, td):first-child {
4421
- border-bottom-left-radius: var(--rounded-box, 1rem)
4408
+ .table :where(thead, tbody) :where(tr:not(:last-child)),
4409
+ .table :where(thead, tbody) :where(tr:first-child:last-child) {
4410
+ border-bottom-width: 1px;
4411
+ --tw-border-opacity: 1;
4412
+ border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity))
4422
4413
  }
4423
-
4424
- :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
4425
- border-bottom-right-radius: var(--rounded-box, 1rem)
4414
+ .table :where(thead, tfoot) {
4415
+ white-space: nowrap;
4416
+ font-size: 0.75rem;
4417
+ line-height: 1rem;
4418
+ font-weight: 700;
4419
+ color: hsl(var(--bc) / 0.6)
4426
4420
  }
4427
4421
  .textarea {
4428
- border-width: 1px;
4429
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4430
- --tw-border-opacity: 0;
4431
- --tw-bg-opacity: 1;
4432
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
4433
- border-radius: var(--rounded-btn, 0.5rem);
4422
+ border-width: 1px;
4423
+ border-color: hsl(var(--bc) / var(--tw-border-opacity));
4424
+ --tw-border-opacity: 0;
4425
+ --tw-bg-opacity: 1;
4426
+ background-color: hsl(var(--b1) / var(--tw-bg-opacity));
4427
+ border-radius: var(--rounded-btn, 0.5rem)
4434
4428
  }
4435
4429
  .textarea-bordered {
4436
- --tw-border-opacity: 0.2;
4430
+ --tw-border-opacity: 0.2
4437
4431
  }
4438
4432
  .textarea:focus {
4439
- outline: 2px solid hsla(var(--bc) / 0.2);
4440
- outline-offset: 2px;
4441
- }
4433
+ outline-style: solid;
4434
+ outline-width: 2px;
4435
+ outline-offset: 2px;
4436
+ outline-color: hsl(var(--bc) / 0.2)
4437
+ }
4442
4438
  .textarea-ghost {
4443
- --tw-bg-opacity: 0.05;
4439
+ --tw-bg-opacity: 0.05
4444
4440
  }
4445
4441
  .textarea-ghost:focus {
4446
- --tw-bg-opacity: 1;
4447
- --tw-text-opacity: 1;
4448
- color: hsl(var(--bc) / var(--tw-text-opacity));
4449
- box-shadow: none;
4442
+ --tw-bg-opacity: 1;
4443
+ --tw-text-opacity: 1;
4444
+ color: hsl(var(--bc) / var(--tw-text-opacity));
4445
+ box-shadow: none
4450
4446
  }
4451
4447
  .textarea-primary {
4452
- --tw-border-opacity: 1;
4453
- border-color: hsl(var(--p) / var(--tw-border-opacity));
4448
+ --tw-border-opacity: 1;
4449
+ border-color: hsl(var(--p) / var(--tw-border-opacity))
4454
4450
  }
4455
4451
  .textarea-primary:focus {
4456
- outline: 2px solid hsl(var(--p));
4457
- }
4452
+ outline-color: hsl(var(--p) / 1)
4453
+ }
4458
4454
  .textarea-secondary {
4459
- --tw-border-opacity: 1;
4460
- border-color: hsl(var(--s) / var(--tw-border-opacity));
4455
+ --tw-border-opacity: 1;
4456
+ border-color: hsl(var(--s) / var(--tw-border-opacity))
4461
4457
  }
4462
4458
  .textarea-secondary:focus {
4463
- outline: 2px solid hsl(var(--s));
4464
- }
4459
+ outline-color: hsl(var(--s) / 1)
4460
+ }
4465
4461
  .textarea-accent {
4466
- --tw-border-opacity: 1;
4467
- border-color: hsl(var(--a) / var(--tw-border-opacity));
4462
+ --tw-border-opacity: 1;
4463
+ border-color: hsl(var(--a) / var(--tw-border-opacity))
4468
4464
  }
4469
4465
  .textarea-accent:focus {
4470
- outline: 2px solid hsl(var(--a));
4471
- }
4466
+ outline-color: hsl(var(--a) / 1)
4467
+ }
4472
4468
  .textarea-info {
4473
- --tw-border-opacity: 1;
4474
- border-color: hsl(var(--in) / var(--tw-border-opacity));
4469
+ --tw-border-opacity: 1;
4470
+ border-color: hsl(var(--in) / var(--tw-border-opacity))
4475
4471
  }
4476
4472
  .textarea-info:focus {
4477
- outline: 2px solid hsl(var(--in));
4478
- }
4473
+ outline-color: hsl(var(--in) / 1)
4474
+ }
4479
4475
  .textarea-success {
4480
- --tw-border-opacity: 1;
4481
- border-color: hsl(var(--su) / var(--tw-border-opacity));
4476
+ --tw-border-opacity: 1;
4477
+ border-color: hsl(var(--su) / var(--tw-border-opacity))
4482
4478
  }
4483
4479
  .textarea-success:focus {
4484
- outline: 2px solid hsl(var(--su));
4485
- }
4480
+ outline-color: hsl(var(--su) / 1)
4481
+ }
4486
4482
  .textarea-warning {
4487
- --tw-border-opacity: 1;
4488
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
4483
+ --tw-border-opacity: 1;
4484
+ border-color: hsl(var(--wa) / var(--tw-border-opacity))
4489
4485
  }
4490
4486
  .textarea-warning:focus {
4491
- outline: 2px solid hsl(var(--wa));
4492
- }
4487
+ outline-color: hsl(var(--wa) / 1)
4488
+ }
4493
4489
  .textarea-error {
4494
- --tw-border-opacity: 1;
4495
- border-color: hsl(var(--er) / var(--tw-border-opacity));
4490
+ --tw-border-opacity: 1;
4491
+ border-color: hsl(var(--er) / var(--tw-border-opacity))
4496
4492
  }
4497
4493
  .textarea-error:focus {
4498
- outline: 2px solid hsl(var(--er));
4499
- }
4494
+ outline-color: hsl(var(--er) / 1)
4495
+ }
4500
4496
  .textarea-disabled,
4497
+ .textarea:disabled,
4501
4498
  .textarea[disabled] {
4502
- cursor: not-allowed;
4503
- --tw-border-opacity: 1;
4504
- border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
4505
- --tw-bg-opacity: 1;
4506
- background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
4507
- --tw-text-opacity: 0.2;
4499
+ cursor: not-allowed;
4500
+ --tw-border-opacity: 1;
4501
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
4502
+ --tw-bg-opacity: 1;
4503
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
4504
+ --tw-text-opacity: 0.2
4508
4505
  }
4509
4506
  .textarea-disabled::placeholder,
4507
+ .textarea:disabled::placeholder,
4510
4508
  .textarea[disabled]::placeholder {
4511
- color: hsl(var(--bc) / var(--tw-placeholder-opacity));
4512
- --tw-placeholder-opacity: 0.2;
4509
+ color: hsl(var(--bc) / var(--tw-placeholder-opacity));
4510
+ --tw-placeholder-opacity: 0.2
4513
4511
  }
4514
- .toast{
4512
+ .toast {
4515
4513
  gap: 0.5rem;
4516
4514
  padding: 1rem;
4517
4515
  }
4518
- .toast>*{
4516
+ .toast > * {
4519
4517
  animation: toast-pop 0.25s ease-out;
4520
4518
  }
4521
4519
 
@@ -4547,39 +4545,44 @@
4547
4545
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4548
4546
  border-radius: var(--rounded-badge, 1.9rem);
4549
4547
  transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
4550
- box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder);
4548
+ box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset,
4549
+ var(--togglehandleborder);
4551
4550
  }
4552
4551
  [dir="rtl"] .toggle {
4553
4552
  --handleoffsetcalculator: calc(var(--handleoffset) * 1);
4554
4553
  }
4555
4554
  .toggle:focus-visible {
4556
- outline: 2px solid hsl(var(--bc));
4557
- outline-offset: 2px;
4558
- }
4555
+ outline-style: solid;
4556
+ outline-width: 2px;
4557
+ outline-offset: 2px;
4558
+ outline-color: hsl(var(--bc) / 0.2);
4559
+ }
4559
4560
  .toggle:checked,
4560
4561
  .toggle[checked="true"],
4561
- .toggle[aria-checked=true] {
4562
+ .toggle[aria-checked="true"] {
4562
4563
  --handleoffsetcalculator: var(--handleoffset);
4563
4564
  --tw-border-opacity: 1;
4564
4565
  --tw-bg-opacity: 1;
4565
4566
  }
4566
- [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked=true] {
4567
+ [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
4567
4568
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
4568
4569
  }
4569
4570
  .toggle:indeterminate {
4570
4571
  --tw-border-opacity: 1;
4571
4572
  --tw-bg-opacity: 1;
4572
- box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4573
+ box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
4574
+ calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4573
4575
  }
4574
4576
  [dir="rtl"] .toggle:indeterminate {
4575
- box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4577
+ box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
4578
+ calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4576
4579
  }
4577
4580
  .toggle-primary:focus-visible {
4578
- outline: 2px solid hsl(var(--p));
4579
- }
4581
+ outline-color: hsl(var(--p) / 1);
4582
+ }
4580
4583
  .toggle-primary:checked,
4581
4584
  .toggle-primary[checked="true"],
4582
- .toggle-primary[aria-checked=true] {
4585
+ .toggle-primary[aria-checked="true"] {
4583
4586
  border-color: hsl(var(--p) / var(--tw-border-opacity));
4584
4587
  --tw-border-opacity: 0.1;
4585
4588
  --tw-bg-opacity: 1;
@@ -4588,11 +4591,11 @@
4588
4591
  color: hsl(var(--pc) / var(--tw-text-opacity));
4589
4592
  }
4590
4593
  .toggle-secondary:focus-visible {
4591
- outline: 2px solid hsl(var(--s));
4592
- }
4594
+ outline-color: hsl(var(--s) / 1);
4595
+ }
4593
4596
  .toggle-secondary:checked,
4594
4597
  .toggle-secondary[checked="true"],
4595
- .toggle-secondary[aria-checked=true] {
4598
+ .toggle-secondary[aria-checked="true"] {
4596
4599
  border-color: hsl(var(--s) / var(--tw-border-opacity));
4597
4600
  --tw-border-opacity: 0.1;
4598
4601
  --tw-bg-opacity: 1;
@@ -4601,11 +4604,11 @@
4601
4604
  color: hsl(var(--sc) / var(--tw-text-opacity));
4602
4605
  }
4603
4606
  .toggle-accent:focus-visible {
4604
- outline: 2px solid hsl(var(--a));
4605
- }
4607
+ outline-color: hsl(var(--a) / 1);
4608
+ }
4606
4609
  .toggle-accent:checked,
4607
4610
  .toggle-accent[checked="true"],
4608
- .toggle-accent[aria-checked=true] {
4611
+ .toggle-accent[aria-checked="true"] {
4609
4612
  border-color: hsl(var(--a) / var(--tw-border-opacity));
4610
4613
  --tw-border-opacity: 0.1;
4611
4614
  --tw-bg-opacity: 1;
@@ -4614,56 +4617,56 @@
4614
4617
  color: hsl(var(--ac) / var(--tw-text-opacity));
4615
4618
  }
4616
4619
  .toggle-success:focus-visible {
4617
- outline: 2px solid hsl(var(--su));
4618
- }
4620
+ outline-color: hsl(var(--in) / 1);
4621
+ }
4619
4622
  .toggle-success:checked,
4620
4623
  .toggle-success[checked="true"],
4621
- .toggle-success[aria-checked=true] {
4624
+ .toggle-success[aria-checked="true"] {
4622
4625
  border-color: hsl(var(--su) / var(--tw-border-opacity));
4623
4626
  --tw-border-opacity: 0.1;
4624
4627
  --tw-bg-opacity: 1;
4625
4628
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
4626
4629
  --tw-text-opacity: 1;
4627
- color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
4630
+ color: hsl(var(--suc) / var(--tw-text-opacity));
4628
4631
  }
4629
4632
  .toggle-warning:focus-visible {
4630
- outline: 2px solid hsl(var(--wa));
4631
- }
4633
+ outline-color: hsl(var(--su) / 1);
4634
+ }
4632
4635
  .toggle-warning:checked,
4633
4636
  .toggle-warning[checked="true"],
4634
- .toggle-warning[aria-checked=true] {
4637
+ .toggle-warning[aria-checked="true"] {
4635
4638
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
4636
4639
  --tw-border-opacity: 0.1;
4637
4640
  --tw-bg-opacity: 1;
4638
4641
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
4639
4642
  --tw-text-opacity: 1;
4640
- color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
4643
+ color: hsl(var(--wac) / var(--tw-text-opacity));
4641
4644
  }
4642
4645
  .toggle-info:focus-visible {
4643
- outline: 2px solid hsl(var(--in));
4644
- }
4646
+ outline-color: hsl(var(--wa) / 1);
4647
+ }
4645
4648
  .toggle-info:checked,
4646
4649
  .toggle-info[checked="true"],
4647
- .toggle-info[aria-checked=true] {
4650
+ .toggle-info[aria-checked="true"] {
4648
4651
  border-color: hsl(var(--in) / var(--tw-border-opacity));
4649
4652
  --tw-border-opacity: 0.1;
4650
4653
  --tw-bg-opacity: 1;
4651
4654
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
4652
4655
  --tw-text-opacity: 1;
4653
- color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
4656
+ color: hsl(var(--inc) / var(--tw-text-opacity));
4654
4657
  }
4655
4658
  .toggle-error:focus-visible {
4656
- outline: 2px solid hsl(var(--er));
4657
- }
4659
+ outline-color: hsl(var(--er) / 1);
4660
+ }
4658
4661
  .toggle-error:checked,
4659
4662
  .toggle-error[checked="true"],
4660
- .toggle-error[aria-checked=true] {
4663
+ .toggle-error[aria-checked="true"] {
4661
4664
  border-color: hsl(var(--er) / var(--tw-border-opacity));
4662
4665
  --tw-border-opacity: 0.1;
4663
4666
  --tw-bg-opacity: 1;
4664
4667
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
4665
4668
  --tw-text-opacity: 1;
4666
- color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
4669
+ color: hsl(var(--erc) / var(--tw-text-opacity));
4667
4670
  }
4668
4671
  .toggle:disabled {
4669
4672
  cursor: not-allowed;
@@ -4671,7 +4674,8 @@
4671
4674
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
4672
4675
  background-color: transparent;
4673
4676
  opacity: 0.3;
4674
- --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
4677
+ --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
4678
+ var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
4675
4679
  }
4676
4680
 
4677
4681
  /* backward compatibility */
@@ -4679,150 +4683,64 @@
4679
4683
  .toggle-mark {
4680
4684
  display: none;
4681
4685
  }
4682
- .tooltip {
4683
- position: relative;
4684
- display: inline-block;
4685
- text-align: center;
4686
- --tooltip-tail: 3px;
4687
- --tooltip-color: hsl(var(--n));
4688
- --tooltip-text-color: hsl(var(--nc));
4689
- --tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail));
4690
- }
4691
- .tooltip:before,
4692
- .tooltip:after {
4693
- opacity: 0;
4694
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
4695
- transition-delay: 100ms;
4696
- transition-duration: 200ms;
4697
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4698
- }
4699
- .tooltip:after {
4700
- position: absolute;
4701
- }
4702
- .tooltip:before {
4703
- max-width: 20rem;
4704
- border-radius: 0.25rem;
4705
- padding-left: 0.5rem;
4706
- padding-right: 0.5rem;
4707
- padding-top: 0.25rem;
4708
- padding-bottom: 0.25rem;
4709
- font-size: 0.875rem;
4710
- line-height: 1.25rem;
4711
- background-color: var(--tooltip-color);
4712
- color: var(--tooltip-text-color);
4713
- width: max-content;
4714
- }
4715
- .tooltip.tooltip-open:before,
4716
- .tooltip.tooltip-open:after,
4717
- .tooltip:hover:before,
4718
- .tooltip:hover:after {
4719
- opacity: 1;
4720
- transition-delay: 75ms;
4721
- }
4722
- .tooltip:not([data-tip]):hover:before,
4723
- .tooltip:not([data-tip]):hover:after {
4724
- visibility: hidden;
4725
- opacity: 0;
4726
- }
4727
- .tooltip:after {
4728
- content: "";
4729
- border-style: solid;
4730
- border-width: var(--tooltip-tail, 0);
4731
- width: 0;
4732
- height: 0;
4733
- display: block;
4734
- position: absolute;
4735
- }
4736
- .tooltip:after, .tooltip-top:after {
4737
- transform: translateX(-50%);
4738
- border-color: var(--tooltip-color) transparent transparent transparent;
4739
- top: auto;
4740
- left: 50%;
4741
- right: auto;
4742
- bottom: var(--tooltip-tail-offset);
4743
- }
4744
- .tooltip-bottom:after {
4745
- transform: translateX(-50%);
4746
- border-color: transparent transparent var(--tooltip-color) transparent;
4747
- top: var(--tooltip-tail-offset);
4748
- left: 50%;
4749
- right: auto;
4750
- bottom: auto;
4751
- }
4752
- .tooltip-left:after {
4753
- transform: translateY(-50%);
4754
- border-color: transparent transparent transparent var(--tooltip-color);
4755
- top: 50%;
4756
- left: auto;
4757
- right: calc(var(--tooltip-tail-offset) + 1px);
4758
- bottom: auto;
4759
- }
4760
- .tooltip-right:after {
4761
- transform: translateY(-50%);
4762
- border-color: transparent var(--tooltip-color) transparent transparent;
4763
- top: 50%;
4764
- left: calc(var(--tooltip-tail-offset) + 1px);
4765
- right: auto;
4766
- bottom: auto;
4767
- }
4768
- .tooltip-primary {
4686
+ .tooltip.tooltip-primary {
4769
4687
  --tooltip-color: hsl(var(--p));
4770
4688
  --tooltip-text-color: hsl(var(--pc));
4771
4689
  }
4772
- .tooltip-secondary {
4690
+ .tooltip.tooltip-secondary {
4773
4691
  --tooltip-color: hsl(var(--s));
4774
4692
  --tooltip-text-color: hsl(var(--sc));
4775
4693
  }
4776
- .tooltip-accent {
4694
+ .tooltip.tooltip-accent {
4777
4695
  --tooltip-color: hsl(var(--a));
4778
4696
  --tooltip-text-color: hsl(var(--ac));
4779
4697
  }
4780
- .tooltip-info {
4781
- --tooltip-color: hsla(var(--in));
4698
+ .tooltip.tooltip-info {
4699
+ --tooltip-color: hsl(var(--in));
4782
4700
  --tooltip-text-color: hsl(var(--inc));
4783
4701
  }
4784
- .tooltip-success {
4785
- --tooltip-color: hsla(var(--su));
4702
+ .tooltip.tooltip-success {
4703
+ --tooltip-color: hsl(var(--su));
4786
4704
  --tooltip-text-color: hsl(var(--suc));
4787
4705
  }
4788
- .tooltip-warning {
4789
- --tooltip-color: hsla(var(--wa));
4706
+ .tooltip.tooltip-warning {
4707
+ --tooltip-color: hsl(var(--wa));
4790
4708
  --tooltip-text-color: hsl(var(--wac));
4791
4709
  }
4792
- .tooltip-error {
4793
- --tooltip-color: hsla(var(--er));
4710
+ .tooltip.tooltip-error {
4711
+ --tooltip-color: hsl(var(--er));
4794
4712
  --tooltip-text-color: hsl(var(--erc));
4795
4713
  }
4796
- :root .prose{
4797
- --tw-prose-body: hsla(var(--bc)/.8);
4714
+ :root .prose {
4715
+ --tw-prose-body: hsl(var(--bc) / 0.8);
4798
4716
  --tw-prose-headings: hsl(var(--bc));
4799
4717
  --tw-prose-lead: hsl(var(--bc));
4800
4718
  --tw-prose-links: hsl(var(--bc));
4801
4719
  --tw-prose-bold: hsl(var(--bc));
4802
4720
  --tw-prose-counters: hsl(var(--bc));
4803
- --tw-prose-bullets: hsla(var(--bc)/.5);
4804
- --tw-prose-hr: hsla(var(--bc)/.2);
4721
+ --tw-prose-bullets: hsl(var(--bc) / 0.5);
4722
+ --tw-prose-hr: hsl(var(--bc) / 0.2);
4805
4723
  --tw-prose-quotes: hsl(var(--bc));
4806
- --tw-prose-quote-borders: hsla(var(--bc)/.2);
4807
- --tw-prose-captions: hsla(var(--bc)/.5);
4724
+ --tw-prose-quote-borders: hsl(var(--bc) / 0.2);
4725
+ --tw-prose-captions: hsl(var(--bc) / 0.5);
4808
4726
  --tw-prose-code: hsl(var(--bc));
4809
4727
  --tw-prose-pre-code: hsl(var(--nc));
4810
4728
  --tw-prose-pre-bg: hsl(var(--n));
4811
- --tw-prose-th-borders: hsla(var(--bc)/.5);
4812
- --tw-prose-td-borders: hsla(var(--bc)/.2);
4729
+ --tw-prose-th-borders: hsl(var(--bc) / 0.5);
4730
+ --tw-prose-td-borders: hsl(var(--bc) / 0.2);
4813
4731
  }
4814
- .prose :where(code):not(:where([class~="not-prose"] *)){
4732
+ .prose :where(code):not(:where([class~="not-prose"] *)) {
4815
4733
  padding: 2px 8px;
4816
4734
  border-radius: var(--rounded-badge);
4817
4735
  }
4818
- .prose code:after,
4819
- .prose code:before{
4736
+ .prose code:after,
4737
+ .prose code:before {
4820
4738
  content: none;
4821
4739
  }
4822
- .prose pre code{
4740
+ .prose pre code {
4823
4741
  border-radius: 0;
4824
4742
  padding: 0;
4825
4743
  }
4826
- .prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)){
4744
+ .prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
4827
4745
  border-bottom-color: hsl(var(--bc) / 20%);
4828
4746
  }