daisyui 2.52.0 → 3.0.1

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