daisyui 2.51.6 → 3.0.0

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