PluginProbe
Subscriptions for WooCommerce with Stripe Recurring Payments / 1.10.6
Subscriptions for WooCommerce with Stripe Recurring Payments v1.10.6
2.4.0 2.3.0 2.2.0 2.1.0 2.0.0 1.11.2 1.11.1 1.11.0 1.10.9 1.10.8 1.10.7 1.10.6 1.10.5 1.10.4 1.10.3 1.10.2 1.10.1 1.10.0 1.9.6 1.9.5 trunk 1.3.0 1.3.1 1.3.2 1.4.0 All 65 releases
subscription / assets / css / tailwind / output.css

output.css in Subscriptions for WooCommerce with Stripe Recurring Payments 1.10.6, at assets/css/tailwind/output.css

3,088 lines 101.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2 @layer properties;
3 @layer theme, base, components, utilities;
4 @layer theme {
5 :root, :host {
6 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
7 'Noto Color Emoji';
8 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
9 monospace;
10 --color-black: #000;
11 --default-transition-duration: 150ms;
12 --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
13 --default-font-family: var(--font-sans);
14 --default-mono-font-family: var(--font-mono);
15 }
16 }
17 .wpsubs-tw-root {
18 @layer base {
19 *, ::after, ::before, ::backdrop, ::file-selector-button {
20 box-sizing: border-box;
21 margin: 0;
22 padding: 0;
23 border: 0 solid;
24 }
25 html, :host {
26 line-height: 1.5;
27 -webkit-text-size-adjust: 100%;
28 tab-size: 4;
29 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
30 font-feature-settings: var(--default-font-feature-settings, normal);
31 font-variation-settings: var(--default-font-variation-settings, normal);
32 -webkit-tap-highlight-color: transparent;
33 }
34 hr {
35 height: 0;
36 color: inherit;
37 border-top-width: 1px;
38 }
39 abbr:where([title]) {
40 -webkit-text-decoration: underline dotted;
41 text-decoration: underline dotted;
42 }
43 h1, h2, h3, h4, h5, h6 {
44 font-size: inherit;
45 font-weight: inherit;
46 }
47 a {
48 color: inherit;
49 -webkit-text-decoration: inherit;
50 text-decoration: inherit;
51 }
52 b, strong {
53 font-weight: bolder;
54 }
55 code, kbd, samp, pre {
56 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
57 font-feature-settings: var(--default-mono-font-feature-settings, normal);
58 font-variation-settings: var(--default-mono-font-variation-settings, normal);
59 font-size: 1em;
60 }
61 small {
62 font-size: 80%;
63 }
64 sub, sup {
65 font-size: 75%;
66 line-height: 0;
67 position: relative;
68 vertical-align: baseline;
69 }
70 sub {
71 bottom: -0.25em;
72 }
73 sup {
74 top: -0.5em;
75 }
76 table {
77 text-indent: 0;
78 border-color: inherit;
79 border-collapse: collapse;
80 }
81 :-moz-focusring {
82 outline: auto;
83 }
84 progress {
85 vertical-align: baseline;
86 }
87 summary {
88 display: list-item;
89 }
90 ol, ul, menu {
91 list-style: none;
92 }
93 img, svg, video, canvas, audio, iframe, embed, object {
94 display: block;
95 vertical-align: middle;
96 }
97 img, video {
98 max-width: 100%;
99 height: auto;
100 }
101 button, input, select, optgroup, textarea, ::file-selector-button {
102 font: inherit;
103 font-feature-settings: inherit;
104 font-variation-settings: inherit;
105 letter-spacing: inherit;
106 color: inherit;
107 border-radius: 0;
108 background-color: transparent;
109 opacity: 1;
110 }
111 :where(select:is([multiple], [size])) optgroup {
112 font-weight: bolder;
113 }
114 :where(select:is([multiple], [size])) optgroup option {
115 padding-inline-start: 20px;
116 }
117 ::file-selector-button {
118 margin-inline-end: 4px;
119 }
120 ::placeholder {
121 opacity: 1;
122 }
123 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
124 ::placeholder {
125 color: currentcolor;
126 @supports (color: color-mix(in lab, red, red)) {
127 color: color-mix(in oklab, currentcolor 50%, transparent);
128 }
129 }
130 }
131 textarea {
132 resize: vertical;
133 }
134 ::-webkit-search-decoration {
135 -webkit-appearance: none;
136 }
137 ::-webkit-date-and-time-value {
138 min-height: 1lh;
139 text-align: inherit;
140 }
141 ::-webkit-datetime-edit {
142 display: inline-flex;
143 }
144 ::-webkit-datetime-edit-fields-wrapper {
145 padding: 0;
146 }
147 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
148 padding-block: 0;
149 }
150 ::-webkit-calendar-picker-indicator {
151 line-height: 1;
152 }
153 :-moz-ui-invalid {
154 box-shadow: none;
155 }
156 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
157 appearance: button;
158 }
159 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
160 height: auto;
161 }
162 [hidden]:where(:not([hidden='until-found'])) {
163 display: none !important;
164 }
165 }
166 @layer utilities {
167 .modal {
168 @layer daisyui.l1.l2.l3 {
169 pointer-events: none;
170 visibility: hidden;
171 position: fixed;
172 inset: calc(0.25rem * 0);
173 margin: calc(0.25rem * 0);
174 display: grid;
175 height: 100%;
176 max-height: none;
177 width: 100%;
178 max-width: none;
179 align-items: center;
180 justify-items: center;
181 background-color: transparent;
182 padding: calc(0.25rem * 0);
183 color: inherit;
184 transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
185 overflow: clip;
186 overscroll-behavior: contain;
187 z-index: 999;
188 scrollbar-gutter: auto;
189 &::backdrop {
190 display: none;
191 }
192 }
193 @layer daisyui.l1.l2 {
194 &.modal-open, &[open], &:target, .modal-toggle:checked + & {
195 pointer-events: auto;
196 visibility: visible;
197 opacity: 100%;
198 transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
199 background-color: oklch(0% 0 0/ 0.4);
200 .modal-box {
201 translate: 0 0;
202 scale: 1;
203 opacity: 1;
204 }
205 :root:has(&) {
206 --page-has-backdrop: 1;
207 --page-overflow: hidden;
208 --page-scroll-bg: var(--page-scroll-bg-on);
209 --page-scroll-gutter: stable;
210 --page-scroll-transition: var(--page-scroll-transition-on);
211 animation: set-page-has-scroll forwards;
212 animation-timeline: scroll();
213 }
214 }
215 @starting-style {
216 &.modal-open, &[open], &:target, .modal-toggle:checked + & {
217 opacity: 0%;
218 }
219 }
220 }
221 }
222 .tooltip {
223 @layer daisyui.l1.l2.l3 {
224 position: relative;
225 display: inline-block;
226 --tt-bg: var(--color-neutral);
227 --tt-off: calc(100% + 0.5rem);
228 --tt-tail: calc(100% + 1px + 0.25rem);
229 & > .tooltip-content, &[data-tip]:before {
230 position: absolute;
231 max-width: 20rem;
232 border-radius: var(--radius-field);
233 padding-inline: calc(0.25rem * 2);
234 padding-block: calc(0.25rem * 1);
235 text-align: center;
236 white-space: normal;
237 color: var(--color-neutral-content);
238 opacity: 0%;
239 font-size: 0.875rem;
240 line-height: 1.25;
241 background-color: var(--tt-bg);
242 width: max-content;
243 pointer-events: none;
244 z-index: 2;
245 --tw-content: attr(data-tip);
246 content: var(--tw-content);
247 }
248 &:after {
249 opacity: 0%;
250 background-color: var(--tt-bg);
251 content: "";
252 pointer-events: none;
253 width: 0.625rem;
254 height: 0.25rem;
255 display: block;
256 position: absolute;
257 mask-repeat: no-repeat;
258 mask-position: -1px 0;
259 --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
260 mask-image: var(--mask-tooltip);
261 }
262 @media (prefers-reduced-motion: no-preference) {
263 & > .tooltip-content, &[data-tip]:before, &:after {
264 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
265 }
266 }
267 &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) {
268 &.tooltip-open, &:hover, &:has(:focus-visible) {
269 & > .tooltip-content, &[data-tip]:before, &:after {
270 opacity: 100%;
271 --tt-pos: 0rem;
272 @media (prefers-reduced-motion: no-preference) {
273 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
274 }
275 }
276 }
277 }
278 }
279 @layer daisyui.l1.l2 {
280 > .tooltip-content, &[data-tip]:before {
281 transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
282 inset: auto auto var(--tt-off) 50%;
283 }
284 &:after {
285 transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
286 inset: auto auto var(--tt-tail) 50%;
287 }
288 }
289 }
290 .tab {
291 @layer daisyui.l1.l2.l3 {
292 position: relative;
293 display: inline-flex;
294 cursor: pointer;
295 appearance: none;
296 flex-wrap: wrap;
297 align-items: center;
298 justify-content: center;
299 text-align: center;
300 webkit-user-select: none;
301 user-select: none;
302 &:hover {
303 @media (hover: hover) {
304 color: var(--color-base-content);
305 }
306 }
307 --tab-p: 0.75rem;
308 --tab-bg: var(--color-base-100);
309 --tab-border-color: var(--color-base-300);
310 --tab-radius-ss: 0;
311 --tab-radius-se: 0;
312 --tab-radius-es: 0;
313 --tab-radius-ee: 0;
314 --tab-order: 0;
315 --tab-radius-min: calc(0.75rem - var(--border));
316 --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
317 --tab-radius-grad: #0000 calc(69% - var(--border)),
318 var(--tab-border-color) calc(69% - var(--border) + 0.25px),
319 var(--tab-border-color) 69%,
320 var(--tab-bg) calc(69% + 0.25px);
321 border-color: #0000;
322 order: var(--tab-order);
323 height: var(--tab-height);
324 font-size: 0.875rem;
325 padding-inline: var(--tab-p);
326 &:is(input[type="radio"]) {
327 min-width: fit-content;
328 &:after {
329 --tw-content: attr(aria-label);
330 content: var(--tw-content);
331 }
332 }
333 &:is(label) {
334 position: relative;
335 input {
336 position: absolute;
337 inset: calc(0.25rem * 0);
338 cursor: pointer;
339 appearance: none;
340 opacity: 0%;
341 }
342 }
343 &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
344 & + .tab-content {
345 display: block;
346 }
347 }
348 &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
349 color: var(--color-base-content);
350 @supports (color: color-mix(in lab, red, red)) {
351 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
352 }
353 }
354 &:not(input):empty {
355 flex-grow: 1;
356 cursor: default;
357 }
358 &:focus {
359 --tw-outline-style: none;
360 outline-style: none;
361 @media (forced-colors: active) {
362 outline: 2px solid transparent;
363 outline-offset: 2px;
364 }
365 }
366 &:focus-visible, &:is(label:has(:checked:focus-visible)) {
367 outline: 2px solid currentColor;
368 outline-offset: -5px;
369 }
370 &[disabled] {
371 pointer-events: none;
372 opacity: 40%;
373 }
374 }
375 }
376 .menu {
377 @layer daisyui.l1.l2.l3 {
378 display: flex;
379 width: fit-content;
380 flex-direction: column;
381 flex-wrap: wrap;
382 padding: calc(0.25rem * 2);
383 --menu-active-fg: var(--color-neutral-content);
384 --menu-active-bg: var(--color-neutral);
385 font-size: 0.875rem;
386 :where(li ul) {
387 position: relative;
388 margin-inline-start: calc(0.25rem * 4);
389 padding-inline-start: calc(0.25rem * 2);
390 white-space: nowrap;
391 &:before {
392 position: absolute;
393 inset-inline-start: calc(0.25rem * 0);
394 top: calc(0.25rem * 3);
395 bottom: calc(0.25rem * 3);
396 background-color: var(--color-base-content);
397 opacity: 10%;
398 width: var(--border);
399 content: "";
400 }
401 }
402 :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
403 display: none;
404 }
405 :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
406 display: grid;
407 grid-auto-flow: column;
408 align-content: flex-start;
409 align-items: center;
410 gap: calc(0.25rem * 2);
411 border-radius: var(--radius-field);
412 padding-inline: calc(0.25rem * 3);
413 padding-block: calc(0.25rem * 1.5);
414 text-align: start;
415 transition-property: color, background-color, box-shadow;
416 transition-duration: 0.2s;
417 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
418 grid-auto-columns: minmax(auto, max-content) auto max-content;
419 text-wrap: balance;
420 user-select: none;
421 }
422 :where(li > details > summary) {
423 --tw-outline-style: none;
424 outline-style: none;
425 @media (forced-colors: active) {
426 outline: 2px solid transparent;
427 outline-offset: 2px;
428 }
429 &::-webkit-details-marker {
430 display: none;
431 }
432 }
433 :where(li > details > summary), :where(li > .menu-dropdown-toggle) {
434 &:after {
435 justify-self: flex-end;
436 display: block;
437 height: 0.375rem;
438 width: 0.375rem;
439 rotate: -135deg;
440 translate: 0 -1px;
441 transition-property: rotate, translate;
442 transition-duration: 0.2s;
443 content: "";
444 transform-origin: 50% 50%;
445 box-shadow: 2px 2px inset;
446 pointer-events: none;
447 }
448 }
449 details {
450 overflow: hidden;
451 interpolate-size: allow-keywords;
452 }
453 details::details-content {
454 block-size: 0;
455 @media (prefers-reduced-motion: no-preference) {
456 transition-behavior: allow-discrete;
457 transition-property: block-size, content-visibility;
458 transition-duration: 0.2s;
459 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
460 }
461 }
462 details[open]::details-content {
463 block-size: auto;
464 }
465 :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
466 rotate: 45deg;
467 translate: 0 1px;
468 }
469 :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) {
470 &.menu-focus, &:focus-visible {
471 cursor: pointer;
472 background-color: var(--color-base-content);
473 @supports (color: color-mix(in lab, red, red)) {
474 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
475 }
476 color: var(--color-base-content);
477 --tw-outline-style: none;
478 outline-style: none;
479 @media (forced-colors: active) {
480 outline: 2px solid transparent;
481 outline-offset: 2px;
482 }
483 }
484 }
485 :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
486 cursor: pointer;
487 background-color: var(--color-base-content);
488 @supports (color: color-mix(in lab, red, red)) {
489 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
490 }
491 --tw-outline-style: none;
492 outline-style: none;
493 @media (forced-colors: active) {
494 outline: 2px solid transparent;
495 outline-offset: 2px;
496 }
497 box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
498 }
499 :where(li:empty) {
500 background-color: var(--color-base-content);
501 opacity: 10%;
502 margin: 0.5rem 1rem;
503 height: 1px;
504 }
505 :where(li) {
506 position: relative;
507 display: flex;
508 flex-shrink: 0;
509 flex-direction: column;
510 flex-wrap: wrap;
511 align-items: stretch;
512 .badge {
513 justify-self: flex-end;
514 }
515 & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active {
516 --tw-outline-style: none;
517 outline-style: none;
518 @media (forced-colors: active) {
519 outline: 2px solid transparent;
520 outline-offset: 2px;
521 }
522 color: var(--menu-active-fg);
523 background-color: var(--menu-active-bg);
524 background-size: auto, calc(var(--noise) * 100%);
525 background-image: none, var(--fx-noise);
526 &:not(&:active) {
527 box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
528 }
529 }
530 &.menu-disabled {
531 pointer-events: none;
532 color: var(--color-base-content);
533 @supports (color: color-mix(in lab, red, red)) {
534 color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
535 }
536 }
537 }
538 .dropdown:focus-within {
539 .menu-dropdown-toggle:after {
540 rotate: 45deg;
541 translate: 0 1px;
542 }
543 }
544 .dropdown-content {
545 margin-top: calc(0.25rem * 2);
546 padding: calc(0.25rem * 2);
547 &:before {
548 display: none;
549 }
550 }
551 }
552 }
553 .dropdown {
554 @layer daisyui.l1.l2.l3 {
555 position: relative;
556 display: inline-block;
557 position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
558 & > *:not(:has(~ [class*="dropdown-content"])):focus {
559 --tw-outline-style: none;
560 outline-style: none;
561 @media (forced-colors: active) {
562 outline: 2px solid transparent;
563 outline-offset: 2px;
564 }
565 }
566 .dropdown-content {
567 position: absolute;
568 }
569 &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content {
570 display: none;
571 transform-origin: top;
572 opacity: 0%;
573 scale: 95%;
574 }
575 &[popover], .dropdown-content {
576 z-index: 999;
577 @media (prefers-reduced-motion: no-preference) {
578 animation: dropdown 0.2s;
579 transition-property: opacity, scale, display;
580 transition-behavior: allow-discrete;
581 transition-duration: 0.2s;
582 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
583 }
584 }
585 @starting-style {
586 &[popover], .dropdown-content {
587 scale: 95%;
588 opacity: 0;
589 }
590 }
591 &:not(.dropdown-close) {
592 &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
593 > [tabindex]:first-child {
594 pointer-events: none;
595 }
596 .dropdown-content {
597 opacity: 100%;
598 scale: 100%;
599 }
600 }
601 &.dropdown-hover:hover {
602 .dropdown-content {
603 opacity: 100%;
604 scale: 100%;
605 }
606 }
607 }
608 &:is(details) {
609 summary {
610 &::-webkit-details-marker {
611 display: none;
612 }
613 }
614 }
615 &:where([popover]) {
616 background: #0000;
617 }
618 &[popover] {
619 position: fixed;
620 color: inherit;
621 @supports not (position-area: bottom) {
622 margin: auto;
623 &.dropdown-close, &.dropdown-open:not(:popover-open) {
624 display: none;
625 transform-origin: top;
626 opacity: 0%;
627 scale: 95%;
628 }
629 &::backdrop {
630 background-color: color-mix(in oklab, #000 30%, #0000);
631 }
632 }
633 &.dropdown-close, &:not(.dropdown-open, :popover-open) {
634 display: none;
635 transform-origin: top;
636 opacity: 0%;
637 scale: 95%;
638 }
639 }
640 }
641 }
642 .btn {
643 :where(&) {
644 @layer daisyui.l1.l2.l3 {
645 width: unset;
646 }
647 }
648 .prose :where(a&:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
649 text-decoration-line: none;
650 }
651 @layer daisyui.l1.l2.l3 {
652 display: inline-flex;
653 flex-shrink: 0;
654 cursor: pointer;
655 flex-wrap: nowrap;
656 align-items: center;
657 justify-content: center;
658 gap: calc(0.25rem * 1.5);
659 text-align: center;
660 vertical-align: middle;
661 outline-offset: 2px;
662 webkit-user-select: none;
663 user-select: none;
664 padding-inline: var(--btn-p);
665 color: var(--btn-fg);
666 --tw-prose-links: var(--btn-fg);
667 height: var(--size);
668 font-size: var(--fontsize, 0.875rem);
669 font-weight: 600;
670 outline-color: var(--btn-color, var(--color-base-content));
671 transition-property: color, background-color, border-color, box-shadow;
672 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
673 transition-duration: 0.2s;
674 border-start-start-radius: var(--join-ss, var(--radius-field));
675 border-start-end-radius: var(--join-se, var(--radius-field));
676 border-end-start-radius: var(--join-es, var(--radius-field));
677 border-end-end-radius: var(--join-ee, var(--radius-field));
678 background-color: var(--btn-bg);
679 background-size: auto, calc(var(--noise) * 100%);
680 background-image: none, var(--btn-noise);
681 border-width: var(--border);
682 border-style: solid;
683 border-color: var(--btn-border);
684 text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
685 touch-action: manipulation;
686 box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
687 --size: calc(var(--size-field, 0.25rem) * 10);
688 --btn-bg: var(--btn-color, var(--color-base-200));
689 --btn-fg: var(--color-base-content);
690 --btn-p: 1rem;
691 --btn-border: var(--btn-bg);
692 @supports (color: color-mix(in lab, red, red)) {
693 --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
694 }
695 --btn-shadow: 0 3px 2px -2px var(--btn-bg),
696 0 4px 3px -2px var(--btn-bg);
697 @supports (color: color-mix(in lab, red, red)) {
698 --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
699 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
700 }
701 --btn-noise: var(--fx-noise);
702 @media (hover: hover) {
703 &:hover {
704 --btn-bg: var(--btn-color, var(--color-base-200));
705 @supports (color: color-mix(in lab, red, red)) {
706 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
707 }
708 }
709 }
710 &:focus-visible, &:has(:focus-visible) {
711 outline-width: 2px;
712 outline-style: solid;
713 isolation: isolate;
714 }
715 &:active:not(.btn-active) {
716 translate: 0 0.5px;
717 --btn-bg: var(--btn-color, var(--color-base-200));
718 @supports (color: color-mix(in lab, red, red)) {
719 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
720 }
721 --btn-border: var(--btn-color, var(--color-base-200));
722 @supports (color: color-mix(in lab, red, red)) {
723 --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
724 }
725 --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
726 }
727 &:is(input[type="checkbox"], input[type="radio"]) {
728 appearance: none;
729 &[aria-label]::after {
730 --tw-content: attr(aria-label);
731 content: var(--tw-content);
732 }
733 }
734 &:where(input:checked:not(.filter .btn)) {
735 --btn-color: var(--color-primary);
736 --btn-fg: var(--color-primary-content);
737 isolation: isolate;
738 }
739 }
740 &:disabled {
741 @layer daisyui.l1.l2 {
742 &:not(.btn-link, .btn-ghost) {
743 background-color: var(--color-base-content);
744 @supports (color: color-mix(in lab, red, red)) {
745 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
746 }
747 box-shadow: none;
748 }
749 pointer-events: none;
750 --btn-border: #0000;
751 --btn-noise: none;
752 --btn-fg: var(--color-base-content);
753 @supports (color: color-mix(in lab, red, red)) {
754 --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
755 }
756 }
757 }
758 &[disabled] {
759 @layer daisyui.l1.l2 {
760 &:not(.btn-link, .btn-ghost) {
761 background-color: var(--color-base-content);
762 @supports (color: color-mix(in lab, red, red)) {
763 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
764 }
765 box-shadow: none;
766 }
767 pointer-events: none;
768 --btn-border: #0000;
769 --btn-noise: none;
770 --btn-fg: var(--color-base-content);
771 @supports (color: color-mix(in lab, red, red)) {
772 --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
773 }
774 }
775 }
776 }
777 .loading {
778 @layer daisyui.l1.l2.l3 {
779 pointer-events: none;
780 display: inline-block;
781 aspect-ratio: 1 / 1;
782 background-color: currentcolor;
783 vertical-align: middle;
784 width: calc(var(--size-selector, 0.25rem) * 6);
785 mask-size: 100%;
786 mask-repeat: no-repeat;
787 mask-position: center;
788 mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
789 }
790 }
791 .visible {
792 visibility: visible;
793 }
794 .list {
795 @layer daisyui.l1.l2.l3 {
796 display: flex;
797 flex-direction: column;
798 font-size: 0.875rem;
799 .list-row {
800 --list-grid-cols: minmax(0, auto) 1fr;
801 position: relative;
802 display: grid;
803 grid-auto-flow: column;
804 gap: calc(0.25rem * 4);
805 border-radius: var(--radius-box);
806 padding: calc(0.25rem * 4);
807 word-break: break-word;
808 grid-template-columns: var(--list-grid-cols);
809 }
810 & > :not(:last-child) {
811 &.list-row, .list-row {
812 &:after {
813 content: "";
814 border-bottom: var(--border) solid;
815 inset-inline: var(--radius-box);
816 position: absolute;
817 bottom: calc(0.25rem * 0);
818 border-color: var(--color-base-content);
819 @supports (color: color-mix(in lab, red, red)) {
820 border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
821 }
822 }
823 }
824 }
825 }
826 @layer daisyui.l1.l2 {
827 .list-row {
828 &:has(.list-col-grow:nth-child(1)) {
829 --list-grid-cols: 1fr;
830 }
831 &:has(.list-col-grow:nth-child(2)) {
832 --list-grid-cols: minmax(0, auto) 1fr;
833 }
834 &:has(.list-col-grow:nth-child(3)) {
835 --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;
836 }
837 &:has(.list-col-grow:nth-child(4)) {
838 --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
839 }
840 &:has(.list-col-grow:nth-child(5)) {
841 --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
842 }
843 &:has(.list-col-grow:nth-child(6)) {
844 --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto)
845 minmax(0, auto) 1fr;
846 }
847 > * {
848 grid-row-start: 1;
849 }
850 }
851 }
852 }
853 .toggle {
854 @layer daisyui.l1.l2.l3 {
855 border: var(--border) solid currentColor;
856 color: var(--input-color);
857 position: relative;
858 display: inline-grid;
859 flex-shrink: 0;
860 cursor: pointer;
861 appearance: none;
862 place-content: center;
863 vertical-align: middle;
864 webkit-user-select: none;
865 user-select: none;
866 grid-template-columns: 0fr 1fr 1fr;
867 --radius-selector-max: calc(
868 var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
869 );
870 border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
871 padding: var(--toggle-p);
872 box-shadow: 0 1px currentColor inset;
873 @supports (color: color-mix(in lab, red, red)) {
874 box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
875 }
876 transition: color 0.3s, grid-template-columns 0.2s;
877 --input-color: var(--color-base-content);
878 @supports (color: color-mix(in lab, red, red)) {
879 --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
880 }
881 --toggle-p: calc(var(--size) * 0.125);
882 --size: calc(var(--size-selector, 0.25rem) * 6);
883 width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
884 height: var(--size);
885 > * {
886 z-index: 1;
887 grid-column: span 1 / span 1;
888 grid-column-start: 2;
889 grid-row-start: 1;
890 height: 100%;
891 cursor: pointer;
892 appearance: none;
893 background-color: transparent;
894 padding: calc(0.25rem * 0.5);
895 transition: opacity 0.2s, rotate 0.4s;
896 border: none;
897 &:focus {
898 --tw-outline-style: none;
899 outline-style: none;
900 @media (forced-colors: active) {
901 outline: 2px solid transparent;
902 outline-offset: 2px;
903 }
904 }
905 &:nth-child(2) {
906 color: var(--color-base-100);
907 rotate: 0deg;
908 }
909 &:nth-child(3) {
910 color: var(--color-base-100);
911 opacity: 0%;
912 rotate: -15deg;
913 }
914 }
915 &:has(:checked) {
916 > :nth-child(2) {
917 opacity: 0%;
918 rotate: 15deg;
919 }
920 > :nth-child(3) {
921 opacity: 100%;
922 rotate: 0deg;
923 }
924 }
925 &:before {
926 position: relative;
927 inset-inline-start: calc(0.25rem * 0);
928 grid-column-start: 2;
929 grid-row-start: 1;
930 aspect-ratio: 1 / 1;
931 height: 100%;
932 width: 100%;
933 border-radius: var(--radius-selector);
934 background-color: currentcolor;
935 translate: 0;
936 --tw-content: "";
937 content: var(--tw-content);
938 transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
939 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor;
940 @supports (color: color-mix(in lab, red, red)) {
941 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
942 }
943 background-size: auto, calc(var(--noise) * 100%);
944 background-image: none, var(--fx-noise);
945 }
946 @media (forced-colors: active) {
947 &:before {
948 outline-style: var(--tw-outline-style);
949 outline-width: 1px;
950 outline-offset: calc(1px * -1);
951 }
952 }
953 @media print {
954 &:before {
955 outline: 0.25rem solid;
956 outline-offset: -1rem;
957 }
958 }
959 &:focus-visible, &:has(:focus-visible) {
960 outline: 2px solid currentColor;
961 outline-offset: 2px;
962 }
963 &:checked, &[aria-checked="true"], &:has(> input:checked) {
964 grid-template-columns: 1fr 1fr 0fr;
965 background-color: var(--color-base-100);
966 --input-color: var(--color-base-content);
967 &:before {
968 background-color: currentcolor;
969 }
970 @starting-style {
971 &:before {
972 opacity: 0;
973 }
974 }
975 }
976 &:indeterminate {
977 grid-template-columns: 0.5fr 1fr 0.5fr;
978 }
979 &:disabled {
980 cursor: not-allowed;
981 opacity: 30%;
982 &:before {
983 background-color: transparent;
984 border: var(--border) solid currentColor;
985 }
986 }
987 }
988 }
989 .toggle\! {
990 @layer daisyui.l1.l2.l3 {
991 border: var(--border) solid currentColor !important;
992 color: var(--input-color) !important;
993 position: relative !important;
994 display: inline-grid !important;
995 flex-shrink: 0 !important;
996 cursor: pointer !important;
997 appearance: none !important;
998 place-content: center !important;
999 vertical-align: middle !important;
1000 webkit-user-select: none !important;
1001 user-select: none !important;
1002 grid-template-columns: 0fr 1fr 1fr !important;
1003 --radius-selector-max: calc(
1004 var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
1005 ) !important;
1006 border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ) !important;
1007 padding: var(--toggle-p) !important;
1008 box-shadow: 0 1px currentColor inset !important;
1009 @supports (color: color-mix(in lab, red, red)) {
1010 box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset !important;
1011 }
1012 transition: color 0.3s, grid-template-columns 0.2s !important;
1013 --input-color: var(--color-base-content) !important;
1014 @supports (color: color-mix(in lab, red, red)) {
1015 --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000) !important;
1016 }
1017 --toggle-p: calc(var(--size) * 0.125) !important;
1018 --size: calc(var(--size-selector, 0.25rem) * 6) !important;
1019 width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2) !important;
1020 height: var(--size) !important;
1021 > * {
1022 z-index: 1 !important;
1023 grid-column: span 1 / span 1 !important;
1024 grid-column-start: 2 !important;
1025 grid-row-start: 1 !important;
1026 height: 100% !important;
1027 cursor: pointer !important;
1028 appearance: none !important;
1029 background-color: transparent !important;
1030 padding: calc(0.25rem * 0.5) !important;
1031 transition: opacity 0.2s, rotate 0.4s !important;
1032 border: none !important;
1033 &:focus {
1034 --tw-outline-style: none !important;
1035 outline-style: none !important;
1036 @media (forced-colors: active) {
1037 outline: 2px solid transparent !important;
1038 outline-offset: 2px !important;
1039 }
1040 }
1041 &:nth-child(2) {
1042 color: var(--color-base-100) !important;
1043 rotate: 0deg !important;
1044 }
1045 &:nth-child(3) {
1046 color: var(--color-base-100) !important;
1047 opacity: 0% !important;
1048 rotate: -15deg !important;
1049 }
1050 }
1051 &:has(:checked) {
1052 > :nth-child(2) {
1053 opacity: 0% !important;
1054 rotate: 15deg !important;
1055 }
1056 > :nth-child(3) {
1057 opacity: 100% !important;
1058 rotate: 0deg !important;
1059 }
1060 }
1061 &:before {
1062 position: relative !important;
1063 inset-inline-start: calc(0.25rem * 0) !important;
1064 grid-column-start: 2 !important;
1065 grid-row-start: 1 !important;
1066 aspect-ratio: 1 / 1 !important;
1067 height: 100% !important;
1068 width: 100% !important;
1069 border-radius: var(--radius-selector) !important;
1070 background-color: currentcolor !important;
1071 translate: 0 !important;
1072 --tw-content: "" !important;
1073 content: var(--tw-content) !important;
1074 transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s !important;
1075 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor !important;
1076 @supports (color: color-mix(in lab, red, red)) {
1077 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) !important;
1078 }
1079 background-size: auto, calc(var(--noise) * 100%) !important;
1080 background-image: none, var(--fx-noise) !important;
1081 }
1082 @media (forced-colors: active) {
1083 &:before {
1084 outline-style: var(--tw-outline-style) !important;
1085 outline-width: 1px !important;
1086 outline-offset: calc(1px * -1) !important;
1087 }
1088 }
1089 @media print {
1090 &:before {
1091 outline: 0.25rem solid !important;
1092 outline-offset: -1rem !important;
1093 }
1094 }
1095 &:focus-visible, &:has(:focus-visible) {
1096 outline: 2px solid currentColor !important;
1097 outline-offset: 2px !important;
1098 }
1099 &:checked, &[aria-checked="true"], &:has(> input:checked) {
1100 grid-template-columns: 1fr 1fr 0fr !important;
1101 background-color: var(--color-base-100) !important;
1102 --input-color: var(--color-base-content) !important;
1103 &:before {
1104 background-color: currentcolor !important;
1105 }
1106 @starting-style {
1107 &:before {
1108 opacity: 0 !important;
1109 }
1110 }
1111 }
1112 &:indeterminate {
1113 grid-template-columns: 0.5fr 1fr 0.5fr !important;
1114 }
1115 &:disabled {
1116 cursor: not-allowed !important;
1117 opacity: 30% !important;
1118 &:before {
1119 background-color: transparent !important;
1120 border: var(--border) solid currentColor !important;
1121 }
1122 }
1123 }
1124 }
1125 .input {
1126 @layer daisyui.l1.l2.l3 {
1127 cursor: text;
1128 border: var(--border) solid #0000;
1129 position: relative;
1130 display: inline-flex;
1131 flex-shrink: 1;
1132 appearance: none;
1133 align-items: center;
1134 gap: calc(0.25rem * 2);
1135 background-color: var(--color-base-100);
1136 padding-inline: calc(0.25rem * 3);
1137 vertical-align: middle;
1138 white-space: nowrap;
1139 width: clamp(3rem, 20rem, 100%);
1140 height: var(--size);
1141 font-size: max(var(--font-size, 0.875rem), 0.875rem);
1142 touch-action: manipulation;
1143 border-start-start-radius: var(--join-ss, var(--radius-field));
1144 border-start-end-radius: var(--join-se, var(--radius-field));
1145 border-end-start-radius: var(--join-es, var(--radius-field));
1146 border-end-end-radius: var(--join-ee, var(--radius-field));
1147 border-color: var(--input-color);
1148 box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1149 @supports (color: color-mix(in lab, red, red)) {
1150 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1151 }
1152 --size: calc(var(--size-field, 0.25rem) * 10);
1153 --input-color: var(--color-base-content);
1154 @supports (color: color-mix(in lab, red, red)) {
1155 --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1156 }
1157 &:where(input) {
1158 display: inline-flex;
1159 }
1160 :where(input) {
1161 display: inline-flex;
1162 height: 100%;
1163 width: 100%;
1164 appearance: none;
1165 background-color: transparent;
1166 border: none;
1167 &:focus, &:focus-within {
1168 --tw-outline-style: none;
1169 outline-style: none;
1170 @media (forced-colors: active) {
1171 outline: 2px solid transparent;
1172 outline-offset: 2px;
1173 }
1174 }
1175 }
1176 :where(input[type="url"]), :where(input[type="email"]) {
1177 direction: ltr;
1178 }
1179 :where(input[type="date"]) {
1180 display: inline-flex;
1181 }
1182 &:focus, &:focus-within {
1183 --input-color: var(--color-base-content);
1184 box-shadow: 0 1px var(--input-color);
1185 @supports (color: color-mix(in lab, red, red)) {
1186 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1187 }
1188 outline: 2px solid var(--input-color);
1189 outline-offset: 2px;
1190 isolation: isolate;
1191 }
1192 @media (pointer: coarse) {
1193 @supports (-webkit-touch-callout: none) {
1194 &:focus, &:focus-within {
1195 --font-size: 1rem;
1196 }
1197 }
1198 }
1199 &:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
1200 cursor: not-allowed;
1201 border-color: var(--color-base-200);
1202 background-color: var(--color-base-200);
1203 color: var(--color-base-content);
1204 @supports (color: color-mix(in lab, red, red)) {
1205 color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1206 }
1207 &::placeholder {
1208 color: var(--color-base-content);
1209 @supports (color: color-mix(in lab, red, red)) {
1210 color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1211 }
1212 }
1213 box-shadow: none;
1214 }
1215 &:has(> input[disabled]) > input[disabled] {
1216 cursor: not-allowed;
1217 }
1218 &::-webkit-date-and-time-value {
1219 text-align: inherit;
1220 }
1221 &[type="number"] {
1222 &::-webkit-inner-spin-button {
1223 margin-block: calc(0.25rem * -3);
1224 margin-inline-end: calc(0.25rem * -3);
1225 }
1226 }
1227 &::-webkit-calendar-picker-indicator {
1228 position: absolute;
1229 inset-inline-end: 0.75em;
1230 }
1231 &:has(> input[type="date"]) {
1232 :where(input[type="date"]) {
1233 display: inline-flex;
1234 webkit-appearance: none;
1235 appearance: none;
1236 }
1237 input[type="date"]::-webkit-calendar-picker-indicator {
1238 position: absolute;
1239 inset-inline-end: 0.75em;
1240 width: 1em;
1241 height: 1em;
1242 cursor: pointer;
1243 }
1244 }
1245 }
1246 }
1247 .indicator {
1248 @layer daisyui.l1.l2.l3 {
1249 position: relative;
1250 display: inline-flex;
1251 width: max-content;
1252 :where(.indicator-item) {
1253 z-index: 1;
1254 position: absolute;
1255 white-space: nowrap;
1256 top: var(--indicator-t, 0);
1257 bottom: var(--indicator-b, auto);
1258 left: var(--indicator-s, auto);
1259 right: var(--indicator-e, 0);
1260 translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
1261 }
1262 }
1263 }
1264 .table {
1265 @layer daisyui.l1.l2.l3 {
1266 font-size: 0.875rem;
1267 position: relative;
1268 width: 100%;
1269 border-collapse: separate;
1270 --tw-border-spacing-x: calc(0.25rem * 0);
1271 --tw-border-spacing-y: calc(0.25rem * 0);
1272 border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1273 border-radius: var(--radius-box);
1274 text-align: left;
1275 &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1276 text-align: right;
1277 }
1278 tr.row-hover {
1279 &, &:nth-child(even) {
1280 &:hover {
1281 @media (hover: hover) {
1282 background-color: var(--color-base-200);
1283 }
1284 }
1285 }
1286 }
1287 :where(th, td) {
1288 padding-inline: calc(0.25rem * 4);
1289 padding-block: calc(0.25rem * 3);
1290 vertical-align: middle;
1291 }
1292 :where(thead, tfoot) {
1293 white-space: nowrap;
1294 color: var(--color-base-content);
1295 @supports (color: color-mix(in lab, red, red)) {
1296 color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1297 }
1298 font-size: 0.875rem;
1299 font-weight: 600;
1300 }
1301 :where(tfoot tr:first-child :is(td, th)) {
1302 border-top: var(--border) solid var(--color-base-content);
1303 @supports (color: color-mix(in lab, red, red)) {
1304 border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1305 }
1306 }
1307 :where(.table-pin-rows thead tr) {
1308 position: sticky;
1309 top: calc(0.25rem * 0);
1310 z-index: 1;
1311 background-color: var(--color-base-100);
1312 }
1313 :where(.table-pin-rows tfoot tr) {
1314 position: sticky;
1315 bottom: calc(0.25rem * 0);
1316 z-index: 1;
1317 background-color: var(--color-base-100);
1318 }
1319 :where(.table-pin-cols tr th) {
1320 position: sticky;
1321 right: calc(0.25rem * 0);
1322 left: calc(0.25rem * 0);
1323 background-color: var(--color-base-100);
1324 }
1325 :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
1326 border-bottom: var(--border) solid var(--color-base-content);
1327 @supports (color: color-mix(in lab, red, red)) {
1328 border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1329 }
1330 }
1331 }
1332 }
1333 .steps {
1334 @layer daisyui.l1.l2.l3 {
1335 display: inline-grid;
1336 grid-auto-flow: column;
1337 overflow: hidden;
1338 overflow-x: auto;
1339 counter-reset: step;
1340 grid-auto-columns: 1fr;
1341 .step {
1342 display: grid;
1343 grid-template-columns: repeat(1, minmax(0, 1fr));
1344 grid-template-columns: auto;
1345 grid-template-rows: repeat(2, minmax(0, 1fr));
1346 grid-template-rows: 40px 1fr;
1347 place-items: center;
1348 text-align: center;
1349 min-width: 4rem;
1350 --step-bg: var(--color-base-300);
1351 --step-fg: var(--color-base-content);
1352 &:before {
1353 top: calc(0.25rem * 0);
1354 grid-column-start: 1;
1355 grid-row-start: 1;
1356 height: calc(0.25rem * 2);
1357 width: 100%;
1358 border: 1px solid;
1359 color: var(--step-bg);
1360 background-color: var(--step-bg);
1361 content: "";
1362 margin-inline-start: -100%;
1363 }
1364 > .step-icon, &:not(:has(.step-icon)):after {
1365 --tw-content: counter(step);
1366 content: var(--tw-content);
1367 counter-increment: step;
1368 z-index: 1;
1369 color: var(--step-fg);
1370 background-color: var(--step-bg);
1371 border: 1px solid var(--step-bg);
1372 position: relative;
1373 grid-column-start: 1;
1374 grid-row-start: 1;
1375 display: grid;
1376 height: calc(0.25rem * 8);
1377 width: calc(0.25rem * 8);
1378 place-items: center;
1379 place-self: center;
1380 border-radius: calc(infinity * 1px);
1381 }
1382 &:first-child:before {
1383 --tw-content: none;
1384 content: var(--tw-content);
1385 }
1386 &[data-content]:after {
1387 --tw-content: attr(data-content);
1388 content: var(--tw-content);
1389 }
1390 }
1391 }
1392 @layer daisyui.l1.l2 {
1393 .step-neutral {
1394 + .step-neutral:before, &:after, > .step-icon {
1395 --step-bg: var(--color-neutral);
1396 --step-fg: var(--color-neutral-content);
1397 }
1398 }
1399 .step-primary {
1400 + .step-primary:before, &:after, > .step-icon {
1401 --step-bg: var(--color-primary);
1402 --step-fg: var(--color-primary-content);
1403 }
1404 }
1405 .step-secondary {
1406 + .step-secondary:before, &:after, > .step-icon {
1407 --step-bg: var(--color-secondary);
1408 --step-fg: var(--color-secondary-content);
1409 }
1410 }
1411 .step-accent {
1412 + .step-accent:before, &:after, > .step-icon {
1413 --step-bg: var(--color-accent);
1414 --step-fg: var(--color-accent-content);
1415 }
1416 }
1417 .step-info {
1418 + .step-info:before, &:after, > .step-icon {
1419 --step-bg: var(--color-info);
1420 --step-fg: var(--color-info-content);
1421 }
1422 }
1423 .step-success {
1424 + .step-success:before, &:after, > .step-icon {
1425 --step-bg: var(--color-success);
1426 --step-fg: var(--color-success-content);
1427 }
1428 }
1429 .step-warning {
1430 + .step-warning:before, &:after, > .step-icon {
1431 --step-bg: var(--color-warning);
1432 --step-fg: var(--color-warning-content);
1433 }
1434 }
1435 .step-error {
1436 + .step-error:before, &:after, > .step-icon {
1437 --step-bg: var(--color-error);
1438 --step-fg: var(--color-error-content);
1439 }
1440 }
1441 }
1442 }
1443 .range {
1444 @layer daisyui.l1.l2.l3 {
1445 appearance: none;
1446 webkit-appearance: none;
1447 --range-thumb: var(--color-base-100);
1448 --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
1449 --range-progress: currentColor;
1450 --range-fill: 1;
1451 --range-p: 0.25rem;
1452 --range-bg: currentColor;
1453 @supports (color: color-mix(in lab, red, red)) {
1454 --range-bg: color-mix(in oklab, currentColor 10%, #0000);
1455 }
1456 cursor: pointer;
1457 overflow: hidden;
1458 background-color: transparent;
1459 vertical-align: middle;
1460 width: clamp(3rem, 20rem, 100%);
1461 --radius-selector-max: calc(
1462 var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
1463 );
1464 border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1465 border: none;
1466 height: var(--range-thumb-size);
1467 [dir="rtl"] & {
1468 --range-dir: -1;
1469 }
1470 &:focus {
1471 outline: none;
1472 }
1473 &:focus-visible {
1474 outline: 2px solid;
1475 outline-offset: 2px;
1476 }
1477 &::-webkit-slider-runnable-track {
1478 width: 100%;
1479 background-color: var(--range-bg);
1480 border-radius: var(--radius-selector);
1481 height: calc(var(--range-thumb-size) * 0.5);
1482 }
1483 @media (forced-colors: active) {
1484 &::-webkit-slider-runnable-track {
1485 border: 1px solid;
1486 }
1487 }
1488 @media (forced-colors: active) {
1489 &::-moz-range-track {
1490 border: 1px solid;
1491 }
1492 }
1493 &::-webkit-slider-thumb {
1494 position: relative;
1495 box-sizing: border-box;
1496 border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1497 background-color: var(--range-thumb);
1498 height: var(--range-thumb-size);
1499 width: var(--range-thumb-size);
1500 border: var(--range-p) solid;
1501 appearance: none;
1502 webkit-appearance: none;
1503 top: 50%;
1504 color: var(--range-progress);
1505 transform: translateY(-50%);
1506 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
1507 @supports (color: color-mix(in lab, red, red)) {
1508 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
1509 }
1510 }
1511 &::-moz-range-track {
1512 width: 100%;
1513 background-color: var(--range-bg);
1514 border-radius: var(--radius-selector);
1515 height: calc(var(--range-thumb-size) * 0.5);
1516 }
1517 &::-moz-range-thumb {
1518 position: relative;
1519 box-sizing: border-box;
1520 border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1521 background-color: currentColor;
1522 height: var(--range-thumb-size);
1523 width: var(--range-thumb-size);
1524 border: var(--range-p) solid;
1525 top: 50%;
1526 color: var(--range-progress);
1527 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
1528 @supports (color: color-mix(in lab, red, red)) {
1529 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
1530 }
1531 }
1532 &:disabled {
1533 cursor: not-allowed;
1534 opacity: 30%;
1535 }
1536 }
1537 }
1538 .select {
1539 @layer daisyui.l1.l2.l3 {
1540 border: var(--border) solid #0000;
1541 position: relative;
1542 display: inline-flex;
1543 flex-shrink: 1;
1544 appearance: none;
1545 align-items: center;
1546 gap: calc(0.25rem * 1.5);
1547 background-color: var(--color-base-100);
1548 padding-inline-start: calc(0.25rem * 3);
1549 padding-inline-end: calc(0.25rem * 7);
1550 vertical-align: middle;
1551 width: clamp(3rem, 20rem, 100%);
1552 height: var(--size);
1553 font-size: 0.875rem;
1554 touch-action: manipulation;
1555 border-start-start-radius: var(--join-ss, var(--radius-field));
1556 border-start-end-radius: var(--join-se, var(--radius-field));
1557 border-end-start-radius: var(--join-es, var(--radius-field));
1558 border-end-end-radius: var(--join-ee, var(--radius-field));
1559 background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
1560 background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
1561 background-size: 4px 4px, 4px 4px;
1562 background-repeat: no-repeat;
1563 white-space: nowrap;
1564 overflow: hidden;
1565 text-overflow: ellipsis;
1566 box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1567 @supports (color: color-mix(in lab, red, red)) {
1568 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1569 }
1570 border-color: var(--input-color);
1571 --input-color: var(--color-base-content);
1572 @supports (color: color-mix(in lab, red, red)) {
1573 --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1574 }
1575 --size: calc(var(--size-field, 0.25rem) * 10);
1576 [dir="rtl"] & {
1577 background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
1578 &::picker(select), select::picker(select) {
1579 translate: 0.5rem 0;
1580 }
1581 }
1582 &[multiple] {
1583 height: auto;
1584 overflow: auto;
1585 padding-block: calc(0.25rem * 3);
1586 padding-inline-end: calc(0.25rem * 3);
1587 background-image: none;
1588 }
1589 select {
1590 margin-inline-start: calc(0.25rem * -3);
1591 margin-inline-end: calc(0.25rem * -7);
1592 width: calc(100% + 2.75rem);
1593 appearance: none;
1594 padding-inline-start: calc(0.25rem * 3);
1595 padding-inline-end: calc(0.25rem * 7);
1596 height: calc(100% - calc(var(--border) * 2));
1597 align-items: center;
1598 background: inherit;
1599 border-radius: inherit;
1600 border-style: none;
1601 &:focus, &:focus-within {
1602 --tw-outline-style: none;
1603 outline-style: none;
1604 @media (forced-colors: active) {
1605 outline: 2px solid transparent;
1606 outline-offset: 2px;
1607 }
1608 }
1609 &:not(:last-child) {
1610 margin-inline-end: calc(0.25rem * -5.5);
1611 background-image: none;
1612 }
1613 }
1614 &:focus, &:focus-within {
1615 --input-color: var(--color-base-content);
1616 box-shadow: 0 1px var(--input-color);
1617 @supports (color: color-mix(in lab, red, red)) {
1618 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1619 }
1620 outline: 2px solid var(--input-color);
1621 outline-offset: 2px;
1622 isolation: isolate;
1623 }
1624 &:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
1625 cursor: not-allowed;
1626 border-color: var(--color-base-200);
1627 background-color: var(--color-base-200);
1628 color: var(--color-base-content);
1629 @supports (color: color-mix(in lab, red, red)) {
1630 color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1631 }
1632 &::placeholder {
1633 color: var(--color-base-content);
1634 @supports (color: color-mix(in lab, red, red)) {
1635 color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1636 }
1637 }
1638 }
1639 &:has(> select[disabled]) > select[disabled] {
1640 cursor: not-allowed;
1641 }
1642 &, & select {
1643 @supports (appearance: base-select) {
1644 appearance: base-select;
1645 }
1646 @supports (appearance: base-select) {
1647 &::picker(select) {
1648 appearance: base-select;
1649 }
1650 }
1651 &::picker(select) {
1652 color: inherit;
1653 max-height: min(24rem, 70dvh);
1654 margin-inline: 0.5rem;
1655 translate: -0.5rem 0;
1656 border: var(--border) solid var(--color-base-200);
1657 margin-block: calc(0.25rem * 2);
1658 border-radius: var(--radius-box);
1659 padding: calc(0.25rem * 2);
1660 background-color: inherit;
1661 box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
1662 box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
1663 }
1664 &::picker-icon {
1665 display: none;
1666 }
1667 optgroup {
1668 padding-top: 0.5em;
1669 option {
1670 &:nth-child(1) {
1671 margin-top: 0.5em;
1672 }
1673 }
1674 }
1675 option {
1676 border-radius: var(--radius-field);
1677 padding-inline: calc(0.25rem * 3);
1678 padding-block: calc(0.25rem * 1.5);
1679 transition-property: color, background-color;
1680 transition-duration: 0.2s;
1681 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1682 white-space: normal;
1683 &:not(:disabled) {
1684 &:hover, &:focus-visible {
1685 cursor: pointer;
1686 background-color: var(--color-base-content);
1687 @supports (color: color-mix(in lab, red, red)) {
1688 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
1689 }
1690 --tw-outline-style: none;
1691 outline-style: none;
1692 @media (forced-colors: active) {
1693 outline: 2px solid transparent;
1694 outline-offset: 2px;
1695 }
1696 }
1697 &:active {
1698 background-color: var(--color-neutral);
1699 color: var(--color-neutral-content);
1700 box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
1701 }
1702 }
1703 }
1704 }
1705 }
1706 }
1707 .timeline {
1708 @layer daisyui.l1.l2.l3 {
1709 position: relative;
1710 display: flex;
1711 > li {
1712 position: relative;
1713 display: grid;
1714 flex-shrink: 0;
1715 align-items: center;
1716 grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) );
1717 grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) );
1718 > hr {
1719 border: none;
1720 width: 100%;
1721 &:first-child {
1722 grid-column-start: 1;
1723 grid-row-start: 2;
1724 }
1725 &:last-child {
1726 grid-column-start: 3;
1727 grid-column-end: none;
1728 grid-row-start: 2;
1729 grid-row-end: auto;
1730 }
1731 @media print {
1732 border: 0.1px solid var(--color-base-300);
1733 }
1734 }
1735 }
1736 :where(hr) {
1737 height: calc(0.25rem * 1);
1738 background-color: var(--color-base-300);
1739 }
1740 &:has(.timeline-middle hr) {
1741 &:first-child {
1742 border-start-start-radius: 0;
1743 border-end-start-radius: 0;
1744 border-start-end-radius: var(--radius-selector);
1745 border-end-end-radius: var(--radius-selector);
1746 }
1747 &:last-child {
1748 border-start-start-radius: var(--radius-selector);
1749 border-end-start-radius: var(--radius-selector);
1750 border-start-end-radius: 0;
1751 border-end-end-radius: 0;
1752 }
1753 }
1754 &:not(:has(.timeline-middle)) {
1755 :first-child hr:last-child {
1756 border-start-start-radius: var(--radius-selector);
1757 border-end-start-radius: var(--radius-selector);
1758 border-start-end-radius: 0;
1759 border-end-end-radius: 0;
1760 }
1761 :last-child hr:first-child {
1762 border-start-start-radius: 0;
1763 border-end-start-radius: 0;
1764 border-start-end-radius: var(--radius-selector);
1765 border-end-end-radius: var(--radius-selector);
1766 }
1767 }
1768 }
1769 }
1770 .avatar {
1771 @layer daisyui.l1.l2.l3 {
1772 position: relative;
1773 display: inline-flex;
1774 vertical-align: middle;
1775 & > div {
1776 display: block;
1777 aspect-ratio: 1 / 1;
1778 overflow: hidden;
1779 }
1780 img {
1781 height: 100%;
1782 width: 100%;
1783 object-fit: cover;
1784 }
1785 }
1786 }
1787 .checkbox {
1788 @layer daisyui.l1.l2.l3 {
1789 border: var(--border) solid var(--input-color, var(--color-base-content));
1790 @supports (color: color-mix(in lab, red, red)) {
1791 border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
1792 }
1793 position: relative;
1794 display: inline-block;
1795 flex-shrink: 0;
1796 cursor: pointer;
1797 appearance: none;
1798 border-radius: var(--radius-selector);
1799 padding: calc(0.25rem * 1);
1800 vertical-align: middle;
1801 color: var(--color-base-content);
1802 box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
1803 transition: background-color 0.2s, box-shadow 0.2s;
1804 --size: calc(var(--size-selector, 0.25rem) * 6);
1805 width: var(--size);
1806 height: var(--size);
1807 background-size: auto, calc(var(--noise) * 100%);
1808 background-image: none, var(--fx-noise);
1809 &:before {
1810 --tw-content: "";
1811 content: var(--tw-content);
1812 display: block;
1813 width: 100%;
1814 height: 100%;
1815 rotate: 45deg;
1816 background-color: currentcolor;
1817 opacity: 0%;
1818 transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
1819 transition-delay: 0.1s;
1820 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
1821 box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1822 font-size: 1rem;
1823 line-height: 0.75;
1824 }
1825 &:focus-visible {
1826 outline: 2px solid var(--input-color, currentColor);
1827 outline-offset: 2px;
1828 }
1829 &:checked, &[aria-checked="true"] {
1830 background-color: var(--input-color, #0000);
1831 box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
1832 &:before {
1833 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
1834 opacity: 100%;
1835 }
1836 @media (forced-colors: active) {
1837 &:before {
1838 rotate: 0deg;
1839 background-color: transparent;
1840 --tw-content: "✔︎";
1841 clip-path: none;
1842 }
1843 }
1844 @media print {
1845 &:before {
1846 rotate: 0deg;
1847 background-color: transparent;
1848 --tw-content: "✔︎";
1849 clip-path: none;
1850 }
1851 }
1852 }
1853 &:indeterminate {
1854 background-color: var( --input-color, var(--color-base-content) );
1855 @supports (color: color-mix(in lab, red, red)) {
1856 background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) );
1857 }
1858 &:before {
1859 rotate: 0deg;
1860 opacity: 100%;
1861 translate: 0 -35%;
1862 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
1863 }
1864 }
1865 }
1866 &:disabled {
1867 @layer daisyui.l1.l2 {
1868 cursor: not-allowed;
1869 opacity: 20%;
1870 }
1871 }
1872 }
1873 .radio {
1874 @layer daisyui.l1.l2.l3 {
1875 position: relative;
1876 display: inline-block;
1877 flex-shrink: 0;
1878 cursor: pointer;
1879 appearance: none;
1880 border-radius: calc(infinity * 1px);
1881 padding: calc(0.25rem * 1);
1882 vertical-align: middle;
1883 border: var(--border) solid var(--input-color, currentColor);
1884 @supports (color: color-mix(in lab, red, red)) {
1885 border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
1886 }
1887 box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
1888 --size: calc(var(--size-selector, 0.25rem) * 6);
1889 width: var(--size);
1890 height: var(--size);
1891 color: var(--input-color, currentColor);
1892 &:before {
1893 display: block;
1894 width: 100%;
1895 height: 100%;
1896 border-radius: calc(infinity * 1px);
1897 --tw-content: "";
1898 content: var(--tw-content);
1899 background-size: auto, calc(var(--noise) * 100%);
1900 background-image: none, var(--fx-noise);
1901 }
1902 &:focus-visible {
1903 outline: 2px solid currentColor;
1904 }
1905 &:checked, &[aria-checked="true"] {
1906 border-color: currentcolor;
1907 background-color: var(--color-base-100);
1908 @media (prefers-reduced-motion: no-preference) {
1909 animation: radio 0.2s ease-out;
1910 }
1911 &:before {
1912 background-color: currentcolor;
1913 box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
1914 }
1915 @media (forced-colors: active) {
1916 &:before {
1917 outline-style: var(--tw-outline-style);
1918 outline-width: 1px;
1919 outline-offset: calc(1px * -1);
1920 }
1921 }
1922 @media print {
1923 &:before {
1924 outline: 0.25rem solid;
1925 outline-offset: -1rem;
1926 }
1927 }
1928 }
1929 }
1930 &:disabled {
1931 @layer daisyui.l1.l2 {
1932 cursor: not-allowed;
1933 opacity: 20%;
1934 }
1935 }
1936 }
1937 .rating {
1938 @layer daisyui.l1.l2.l3 {
1939 position: relative;
1940 display: inline-flex;
1941 vertical-align: middle;
1942 & input {
1943 border: none;
1944 appearance: none;
1945 }
1946 :where(*) {
1947 height: calc(0.25rem * 6);
1948 width: calc(0.25rem * 6);
1949 border-radius: 0;
1950 background-color: var(--color-base-content);
1951 opacity: 20%;
1952 @media (prefers-reduced-motion: no-preference) {
1953 animation: rating 0.25s ease-out;
1954 }
1955 &:is(input) {
1956 cursor: pointer;
1957 }
1958 }
1959 & .rating-hidden {
1960 width: calc(0.25rem * 2);
1961 background-color: transparent;
1962 }
1963 input[type="radio"]:checked {
1964 background-image: none;
1965 }
1966 * {
1967 &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
1968 opacity: 100%;
1969 }
1970 &:focus-visible {
1971 scale: 1.1;
1972 @media (prefers-reduced-motion: no-preference) {
1973 transition: scale 0.2s ease-out;
1974 }
1975 }
1976 }
1977 & *:active:focus {
1978 animation: none;
1979 scale: 1.1;
1980 }
1981 }
1982 @layer daisyui.l1.l2 {
1983 &.rating-xs :where(*:not(.rating-hidden)) {
1984 width: calc(0.25rem * 4);
1985 height: calc(0.25rem * 4);
1986 }
1987 &.rating-sm :where(*:not(.rating-hidden)) {
1988 width: calc(0.25rem * 5);
1989 height: calc(0.25rem * 5);
1990 }
1991 &.rating-md :where(*:not(.rating-hidden)) {
1992 width: calc(0.25rem * 6);
1993 height: calc(0.25rem * 6);
1994 }
1995 &.rating-lg :where(*:not(.rating-hidden)) {
1996 width: calc(0.25rem * 7);
1997 height: calc(0.25rem * 7);
1998 }
1999 &.rating-xl :where(*:not(.rating-hidden)) {
2000 width: calc(0.25rem * 8);
2001 height: calc(0.25rem * 8);
2002 }
2003 }
2004 }
2005 .card {
2006 @layer daisyui.l1.l2.l3 {
2007 position: relative;
2008 display: flex;
2009 flex-direction: column;
2010 border-radius: var(--radius-box);
2011 outline-width: 2px;
2012 transition: outline 0.2s ease-in-out;
2013 outline: 0 solid #0000;
2014 outline-offset: 2px;
2015 &:focus {
2016 --tw-outline-style: none;
2017 outline-style: none;
2018 @media (forced-colors: active) {
2019 outline: 2px solid transparent;
2020 outline-offset: 2px;
2021 }
2022 }
2023 &:focus-visible {
2024 outline-color: currentColor;
2025 }
2026 :where(figure:first-child) {
2027 overflow: hidden;
2028 border-start-start-radius: inherit;
2029 border-start-end-radius: inherit;
2030 border-end-start-radius: unset;
2031 border-end-end-radius: unset;
2032 }
2033 :where(figure:last-child) {
2034 overflow: hidden;
2035 border-start-start-radius: unset;
2036 border-start-end-radius: unset;
2037 border-end-start-radius: inherit;
2038 border-end-end-radius: inherit;
2039 }
2040 figure {
2041 display: flex;
2042 align-items: center;
2043 justify-content: center;
2044 }
2045 &:has(> input:is(input[type="checkbox"], input[type="radio"])) {
2046 cursor: pointer;
2047 user-select: none;
2048 }
2049 &:has(> :checked) {
2050 outline: 2px solid currentColor;
2051 }
2052 }
2053 }
2054 .stats {
2055 @layer daisyui.l1.l2.l3 {
2056 position: relative;
2057 display: inline-grid;
2058 grid-auto-flow: column;
2059 overflow-x: auto;
2060 border-radius: var(--radius-box);
2061 }
2062 }
2063 .progress {
2064 @layer daisyui.l1.l2.l3 {
2065 position: relative;
2066 height: calc(0.25rem * 2);
2067 width: 100%;
2068 appearance: none;
2069 overflow: hidden;
2070 border-radius: var(--radius-box);
2071 background-color: currentcolor;
2072 @supports (color: color-mix(in lab, red, red)) {
2073 background-color: color-mix(in oklab, currentcolor 20%, transparent);
2074 }
2075 color: var(--color-base-content);
2076 &:indeterminate {
2077 background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
2078 background-size: 200%;
2079 background-position-x: 15%;
2080 @media (prefers-reduced-motion: no-preference) {
2081 animation: progress 5s ease-in-out infinite;
2082 }
2083 @supports (-moz-appearance: none) {
2084 &::-moz-progress-bar {
2085 background-color: transparent;
2086 @media (prefers-reduced-motion: no-preference) {
2087 animation: progress 5s ease-in-out infinite;
2088 background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
2089 background-size: 200%;
2090 background-position-x: 15%;
2091 }
2092 }
2093 }
2094 }
2095 @supports (-moz-appearance: none) {
2096 &::-moz-progress-bar {
2097 border-radius: var(--radius-box);
2098 background-color: currentcolor;
2099 }
2100 }
2101 @supports (-webkit-appearance: none) {
2102 &::-webkit-progress-bar {
2103 border-radius: var(--radius-box);
2104 background-color: transparent;
2105 }
2106 &::-webkit-progress-value {
2107 border-radius: var(--radius-box);
2108 background-color: currentColor;
2109 }
2110 }
2111 }
2112 }
2113 .fixed {
2114 position: fixed;
2115 }
2116 .static {
2117 position: static;
2118 }
2119 .join {
2120 display: inline-flex;
2121 align-items: stretch;
2122 --join-ss: 0;
2123 --join-se: 0;
2124 --join-es: 0;
2125 --join-ee: 0;
2126 :where(.join-item) {
2127 border-start-start-radius: var(--join-ss, 0);
2128 border-start-end-radius: var(--join-se, 0);
2129 border-end-start-radius: var(--join-es, 0);
2130 border-end-end-radius: var(--join-ee, 0);
2131 * {
2132 --join-ss: var(--radius-field);
2133 --join-se: var(--radius-field);
2134 --join-es: var(--radius-field);
2135 --join-ee: var(--radius-field);
2136 }
2137 }
2138 > .join-item:where(:first-child) {
2139 --join-ss: var(--radius-field);
2140 --join-se: 0;
2141 --join-es: var(--radius-field);
2142 --join-ee: 0;
2143 }
2144 :first-child:not(:last-child) {
2145 :where(.join-item) {
2146 --join-ss: var(--radius-field);
2147 --join-se: 0;
2148 --join-es: var(--radius-field);
2149 --join-ee: 0;
2150 }
2151 }
2152 > .join-item:where(:last-child) {
2153 --join-ss: 0;
2154 --join-se: var(--radius-field);
2155 --join-es: 0;
2156 --join-ee: var(--radius-field);
2157 }
2158 :last-child:not(:first-child) {
2159 :where(.join-item) {
2160 --join-ss: 0;
2161 --join-se: var(--radius-field);
2162 --join-es: 0;
2163 --join-ee: var(--radius-field);
2164 }
2165 }
2166 > .join-item:where(:only-child) {
2167 --join-ss: var(--radius-field);
2168 --join-se: var(--radius-field);
2169 --join-es: var(--radius-field);
2170 --join-ee: var(--radius-field);
2171 }
2172 :only-child {
2173 :where(.join-item) {
2174 --join-ss: var(--radius-field);
2175 --join-se: var(--radius-field);
2176 --join-es: var(--radius-field);
2177 --join-ee: var(--radius-field);
2178 }
2179 }
2180 > :where(:focus, :has(:focus)) {
2181 z-index: 1;
2182 }
2183 @media (hover: hover) {
2184 > :where(.btn:hover, :has(.btn:hover)) {
2185 isolation: isolate;
2186 }
2187 }
2188 }
2189 .textarea {
2190 @layer daisyui.l1.l2.l3 {
2191 border: var(--border) solid #0000;
2192 min-height: calc(0.25rem * 20);
2193 flex-shrink: 1;
2194 appearance: none;
2195 border-radius: var(--radius-field);
2196 background-color: var(--color-base-100);
2197 padding-block: calc(0.25rem * 2);
2198 vertical-align: middle;
2199 width: clamp(3rem, 20rem, 100%);
2200 padding-inline-start: 0.75rem;
2201 padding-inline-end: 0.75rem;
2202 font-size: max(var(--font-size, 0.875rem), 0.875rem);
2203 touch-action: manipulation;
2204 border-color: var(--input-color);
2205 box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
2206 @supports (color: color-mix(in lab, red, red)) {
2207 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
2208 }
2209 --input-color: var(--color-base-content);
2210 @supports (color: color-mix(in lab, red, red)) {
2211 --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
2212 }
2213 textarea {
2214 appearance: none;
2215 background-color: transparent;
2216 border: none;
2217 &:focus, &:focus-within {
2218 --tw-outline-style: none;
2219 outline-style: none;
2220 @media (forced-colors: active) {
2221 outline: 2px solid transparent;
2222 outline-offset: 2px;
2223 }
2224 }
2225 }
2226 &:focus, &:focus-within {
2227 --input-color: var(--color-base-content);
2228 box-shadow: 0 1px var(--input-color);
2229 @supports (color: color-mix(in lab, red, red)) {
2230 box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
2231 }
2232 outline: 2px solid var(--input-color);
2233 outline-offset: 2px;
2234 isolation: isolate;
2235 }
2236 @media (pointer: coarse) {
2237 @supports (-webkit-touch-callout: none) {
2238 &:focus, &:focus-within {
2239 --font-size: 1rem;
2240 }
2241 }
2242 }
2243 &:has(> textarea[disabled]), &:is(:disabled, [disabled]) {
2244 cursor: not-allowed;
2245 border-color: var(--color-base-200);
2246 background-color: var(--color-base-200);
2247 color: var(--color-base-content);
2248 @supports (color: color-mix(in lab, red, red)) {
2249 color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
2250 }
2251 &::placeholder {
2252 color: var(--color-base-content);
2253 @supports (color: color-mix(in lab, red, red)) {
2254 color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2255 }
2256 }
2257 box-shadow: none;
2258 }
2259 &:has(> textarea[disabled]) > textarea[disabled] {
2260 cursor: not-allowed;
2261 }
2262 }
2263 }
2264 .stack {
2265 @layer daisyui.l1.l2.l3 {
2266 display: inline-grid;
2267 grid-template-columns: 3px 4px 1fr 4px 3px;
2268 grid-template-rows: 3px 4px 1fr 4px 3px;
2269 & > * {
2270 height: 100%;
2271 width: 100%;
2272 &:nth-child(n + 2) {
2273 width: 100%;
2274 opacity: 70%;
2275 }
2276 &:nth-child(2) {
2277 z-index: 2;
2278 opacity: 90%;
2279 }
2280 &:nth-child(1) {
2281 z-index: 3;
2282 width: 100%;
2283 }
2284 }
2285 }
2286 @layer daisyui.l1.l2 {
2287 &, &.stack-bottom {
2288 > * {
2289 grid-column: 3 / 4;
2290 grid-row: 3 / 6;
2291 &:nth-child(2) {
2292 grid-column: 2 / 5;
2293 grid-row: 2 / 5;
2294 }
2295 &:nth-child(1) {
2296 grid-column: 1 / 6;
2297 grid-row: 1 / 4;
2298 }
2299 }
2300 }
2301 &.stack-top {
2302 > * {
2303 grid-column: 3 / 4;
2304 grid-row: 1 / 4;
2305 &:nth-child(2) {
2306 grid-column: 2 / 5;
2307 grid-row: 2 / 5;
2308 }
2309 &:nth-child(1) {
2310 grid-column: 1 / 6;
2311 grid-row: 3 / 6;
2312 }
2313 }
2314 }
2315 &.stack-start {
2316 > * {
2317 grid-column: 1 / 4;
2318 grid-row: 3 / 4;
2319 &:nth-child(2) {
2320 grid-column: 2 / 5;
2321 grid-row: 2 / 5;
2322 }
2323 &:nth-child(1) {
2324 grid-column: 3 / 6;
2325 grid-row: 1 / 6;
2326 }
2327 }
2328 }
2329 &.stack-end {
2330 > * {
2331 grid-column: 3 / 6;
2332 grid-row: 3 / 4;
2333 &:nth-child(2) {
2334 grid-column: 2 / 5;
2335 grid-row: 2 / 5;
2336 }
2337 &:nth-child(1) {
2338 grid-column: 1 / 4;
2339 grid-row: 1 / 6;
2340 }
2341 }
2342 }
2343 }
2344 }
2345 .hero {
2346 @layer daisyui.l1.l2.l3 {
2347 display: grid;
2348 width: 100%;
2349 place-items: center;
2350 background-size: cover;
2351 background-position: center;
2352 & > * {
2353 grid-column-start: 1;
2354 grid-row-start: 1;
2355 }
2356 }
2357 }
2358 .container {
2359 width: 100%;
2360 @media (width >= 40rem) {
2361 max-width: 40rem;
2362 }
2363 @media (width >= 48rem) {
2364 max-width: 48rem;
2365 }
2366 @media (width >= 64rem) {
2367 max-width: 64rem;
2368 }
2369 @media (width >= 80rem) {
2370 max-width: 80rem;
2371 }
2372 @media (width >= 96rem) {
2373 max-width: 96rem;
2374 }
2375 }
2376 .divider {
2377 @layer daisyui.l1.l2.l3 {
2378 display: flex;
2379 height: calc(0.25rem * 4);
2380 flex-direction: row;
2381 align-items: center;
2382 align-self: stretch;
2383 white-space: nowrap;
2384 margin: var(--divider-m, 1rem 0);
2385 --divider-color: var(--color-base-content);
2386 @supports (color: color-mix(in lab, red, red)) {
2387 --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
2388 }
2389 &:before, &:after {
2390 content: "";
2391 height: calc(0.25rem * 0.5);
2392 width: 100%;
2393 flex-grow: 1;
2394 background-color: var(--divider-color);
2395 }
2396 @media print {
2397 &:before, &:after {
2398 border: 0.5px solid;
2399 }
2400 }
2401 &:not(:empty) {
2402 gap: calc(0.25rem * 4);
2403 }
2404 }
2405 }
2406 .filter {
2407 @layer daisyui.l1.l2.l3 {
2408 display: flex;
2409 flex-wrap: wrap;
2410 input[type="radio"] {
2411 width: auto;
2412 }
2413 input {
2414 overflow: hidden;
2415 opacity: 100%;
2416 scale: 1;
2417 transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s;
2418 &:not(:last-child) {
2419 margin-inline-end: calc(0.25rem * 1);
2420 }
2421 &.filter-reset {
2422 aspect-ratio: 1 / 1;
2423 &::after {
2424 --tw-content: "×";
2425 content: var(--tw-content);
2426 }
2427 }
2428 }
2429 &:not(:has(input:checked:not(.filter-reset))) {
2430 .filter-reset, input[type="reset"] {
2431 scale: 0;
2432 border-width: 0;
2433 margin-inline: calc(0.25rem * 0);
2434 width: calc(0.25rem * 0);
2435 padding-inline: calc(0.25rem * 0);
2436 opacity: 0%;
2437 }
2438 }
2439 &:has(input:checked:not(.filter-reset)) {
2440 input:not(:checked, .filter-reset, input[type="reset"]) {
2441 scale: 0;
2442 border-width: 0;
2443 margin-inline: calc(0.25rem * 0);
2444 width: calc(0.25rem * 0);
2445 padding-inline: calc(0.25rem * 0);
2446 opacity: 0%;
2447 }
2448 }
2449 }
2450 }
2451 .breadcrumbs {
2452 @layer daisyui.l1.l2.l3 {
2453 max-width: 100%;
2454 overflow-x: auto;
2455 padding-block: calc(0.25rem * 2);
2456 > menu, > ul, > ol {
2457 display: flex;
2458 min-height: min-content;
2459 align-items: center;
2460 white-space: nowrap;
2461 > li {
2462 display: flex;
2463 align-items: center;
2464 > * {
2465 display: flex;
2466 cursor: pointer;
2467 align-items: center;
2468 gap: calc(0.25rem * 2);
2469 &:hover {
2470 @media (hover: hover) {
2471 text-decoration-line: underline;
2472 }
2473 }
2474 &:focus {
2475 --tw-outline-style: none;
2476 outline-style: none;
2477 @media (forced-colors: active) {
2478 outline: 2px solid transparent;
2479 outline-offset: 2px;
2480 }
2481 }
2482 &:focus-visible {
2483 outline: 2px solid currentColor;
2484 outline-offset: 2px;
2485 }
2486 }
2487 & + *:before {
2488 content: "";
2489 margin-inline-start: calc(0.25rem * 2);
2490 margin-inline-end: calc(0.25rem * 3);
2491 display: block;
2492 height: calc(0.25rem * 1.5);
2493 width: calc(0.25rem * 1.5);
2494 opacity: 40%;
2495 rotate: 45deg;
2496 border-top: 1px solid;
2497 border-right: 1px solid;
2498 background-color: #0000;
2499 }
2500 [dir="rtl"] & + *:before {
2501 rotate: -135deg;
2502 }
2503 }
2504 }
2505 }
2506 }
2507 .label {
2508 @layer daisyui.l1.l2.l3 {
2509 display: inline-flex;
2510 align-items: center;
2511 gap: calc(0.25rem * 1.5);
2512 white-space: nowrap;
2513 color: currentcolor;
2514 @supports (color: color-mix(in lab, red, red)) {
2515 color: color-mix(in oklab, currentcolor 60%, transparent);
2516 }
2517 &:has(input) {
2518 cursor: pointer;
2519 }
2520 &:is(.input > *, .select > *) {
2521 display: flex;
2522 height: calc(100% - 0.5rem);
2523 align-items: center;
2524 padding-inline: calc(0.25rem * 3);
2525 white-space: nowrap;
2526 font-size: inherit;
2527 &:first-child {
2528 margin-inline-start: calc(0.25rem * -3);
2529 margin-inline-end: calc(0.25rem * 3);
2530 border-inline-end: var(--border) solid currentColor;
2531 @supports (color: color-mix(in lab, red, red)) {
2532 border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2533 }
2534 }
2535 &:last-child {
2536 margin-inline-start: calc(0.25rem * 3);
2537 margin-inline-end: calc(0.25rem * -3);
2538 border-inline-start: var(--border) solid currentColor;
2539 @supports (color: color-mix(in lab, red, red)) {
2540 border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2541 }
2542 }
2543 }
2544 }
2545 }
2546 .status {
2547 @layer daisyui.l1.l2.l3 {
2548 display: inline-block;
2549 aspect-ratio: 1 / 1;
2550 width: calc(0.25rem * 2);
2551 height: calc(0.25rem * 2);
2552 border-radius: var(--radius-selector);
2553 background-color: var(--color-base-content);
2554 @supports (color: color-mix(in lab, red, red)) {
2555 background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2556 }
2557 background-position: center;
2558 background-repeat: no-repeat;
2559 vertical-align: middle;
2560 color: color-mix(in srgb, #000 30%, transparent);
2561 @supports (color: color-mix(in lab, red, red)) {
2562 color: color-mix(in oklab, var(--color-black) 30%, transparent);
2563 }
2564 background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
2565 box-shadow: 0 2px 3px -1px currentColor;
2566 @supports (color: color-mix(in lab, red, red)) {
2567 box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
2568 }
2569 }
2570 }
2571 .badge {
2572 @layer daisyui.l1.l2.l3 {
2573 display: inline-flex;
2574 align-items: center;
2575 justify-content: center;
2576 gap: calc(0.25rem * 2);
2577 border-radius: var(--radius-selector);
2578 vertical-align: middle;
2579 color: var(--badge-fg);
2580 border: var(--border) solid var(--badge-color, var(--color-base-200));
2581 font-size: 0.875rem;
2582 width: fit-content;
2583 background-size: auto, calc(var(--noise) * 100%);
2584 background-image: none, var(--fx-noise);
2585 background-color: var(--badge-bg);
2586 --badge-bg: var(--badge-color, var(--color-base-100));
2587 --badge-fg: var(--color-base-content);
2588 --size: calc(var(--size-selector, 0.25rem) * 6);
2589 height: var(--size);
2590 padding-inline: calc(var(--size) / 2 - var(--border));
2591 }
2592 }
2593 .footer {
2594 @layer daisyui.l1.l2.l3 {
2595 display: grid;
2596 width: 100%;
2597 grid-auto-flow: row;
2598 place-items: start;
2599 column-gap: calc(0.25rem * 4);
2600 row-gap: calc(0.25rem * 10);
2601 font-size: 0.875rem;
2602 line-height: 1.25rem;
2603 & > * {
2604 display: grid;
2605 place-items: start;
2606 gap: calc(0.25rem * 2);
2607 }
2608 &.footer-center {
2609 grid-auto-flow: column dense;
2610 place-items: center;
2611 text-align: center;
2612 & > * {
2613 place-items: center;
2614 }
2615 }
2616 }
2617 }
2618 .stat {
2619 @layer daisyui.l1.l2.l3 {
2620 display: inline-grid;
2621 width: 100%;
2622 column-gap: calc(0.25rem * 4);
2623 padding-inline: calc(0.25rem * 6);
2624 padding-block: calc(0.25rem * 4);
2625 grid-template-columns: repeat(1, 1fr);
2626 &:not(:last-child) {
2627 border-inline-end: var(--border) dashed currentColor;
2628 @supports (color: color-mix(in lab, red, red)) {
2629 border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
2630 }
2631 border-block-end: none;
2632 }
2633 }
2634 }
2635 .alert {
2636 border-width: var(--border);
2637 border-color: var(--alert-border-color, var(--color-base-200));
2638 @layer daisyui.l1.l2.l3 {
2639 border-style: solid;
2640 --alert-border-color: var(--color-base-200);
2641 display: grid;
2642 align-items: center;
2643 gap: calc(0.25rem * 4);
2644 border-radius: var(--radius-box);
2645 padding-inline: calc(0.25rem * 4);
2646 padding-block: calc(0.25rem * 3);
2647 color: var(--color-base-content);
2648 background-color: var(--alert-color, var(--color-base-200));
2649 justify-content: start;
2650 justify-items: start;
2651 grid-auto-flow: column;
2652 grid-template-columns: auto;
2653 text-align: start;
2654 font-size: 0.875rem;
2655 line-height: 1.25rem;
2656 background-size: auto, calc(var(--noise) * 100%);
2657 background-image: none, var(--fx-noise);
2658 box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
2659 @supports (color: color-mix(in lab, red, red)) {
2660 box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
2661 }
2662 &:has(:nth-child(2)) {
2663 grid-template-columns: auto minmax(auto, 1fr);
2664 }
2665 }
2666 }
2667 .block {
2668 display: block;
2669 }
2670 .flex {
2671 display: flex;
2672 }
2673 .grid {
2674 display: grid;
2675 }
2676 .hidden {
2677 display: none;
2678 }
2679 .inline {
2680 display: inline;
2681 }
2682 .table {
2683 display: table;
2684 }
2685 .flex-shrink {
2686 flex-shrink: 1;
2687 }
2688 .flex-grow {
2689 flex-grow: 1;
2690 }
2691 .grow {
2692 flex-grow: 1;
2693 }
2694 .border-collapse {
2695 border-collapse: collapse;
2696 }
2697 .transform {
2698 transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
2699 }
2700 .link {
2701 @layer daisyui.l1.l2.l3 {
2702 cursor: pointer;
2703 text-decoration-line: underline;
2704 &:focus {
2705 --tw-outline-style: none;
2706 outline-style: none;
2707 @media (forced-colors: active) {
2708 outline: 2px solid transparent;
2709 outline-offset: 2px;
2710 }
2711 }
2712 &:focus-visible {
2713 outline: 2px solid currentColor;
2714 outline-offset: 2px;
2715 }
2716 }
2717 }
2718 .resize {
2719 resize: both;
2720 }
2721 .flex-wrap {
2722 flex-wrap: wrap;
2723 }
2724 .rounded {
2725 border-radius: 0.25rem;
2726 }
2727 .border {
2728 border-style: var(--tw-border-style);
2729 border-width: 1px;
2730 }
2731 .capitalize {
2732 text-transform: capitalize;
2733 }
2734 .uppercase {
2735 text-transform: uppercase;
2736 }
2737 .shadow {
2738 --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2739 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2740 }
2741 .outline {
2742 outline-style: var(--tw-outline-style);
2743 outline-width: 1px;
2744 }
2745 .filter {
2746 filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2747 }
2748 .transition {
2749 transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2750 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2751 transition-duration: var(--tw-duration, var(--default-transition-duration));
2752 }
2753 }
2754 }
2755 @layer base {
2756 :where(.wpsubs-tw-root),.wpsubs-tw-root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
2757 color-scheme: light;
2758 --color-base-100: oklch(100% 0 0);
2759 --color-base-200: oklch(98% 0 0);
2760 --color-base-300: oklch(95% 0 0);
2761 --color-base-content: oklch(21% 0.006 285.885);
2762 --color-primary: oklch(45% 0.24 277.023);
2763 --color-primary-content: oklch(93% 0.034 272.788);
2764 --color-secondary: oklch(65% 0.241 354.308);
2765 --color-secondary-content: oklch(94% 0.028 342.258);
2766 --color-accent: oklch(77% 0.152 181.912);
2767 --color-accent-content: oklch(38% 0.063 188.416);
2768 --color-neutral: oklch(14% 0.005 285.823);
2769 --color-neutral-content: oklch(92% 0.004 286.32);
2770 --color-info: oklch(74% 0.16 232.661);
2771 --color-info-content: oklch(29% 0.066 243.157);
2772 --color-success: oklch(76% 0.177 163.223);
2773 --color-success-content: oklch(37% 0.077 168.94);
2774 --color-warning: oklch(82% 0.189 84.429);
2775 --color-warning-content: oklch(41% 0.112 45.904);
2776 --color-error: oklch(71% 0.194 13.428);
2777 --color-error-content: oklch(27% 0.105 12.094);
2778 --radius-selector: 0.5rem;
2779 --radius-field: 0.25rem;
2780 --radius-box: 0.5rem;
2781 --size-selector: 0.25rem;
2782 --size-field: 0.25rem;
2783 --border: 1px;
2784 --depth: 1;
2785 --noise: 0;
2786 }
2787 }
2788 @layer base {
2789 :root {
2790 --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
2791 }
2792 }
2793 @layer base {
2794 :root {
2795 scrollbar-color: currentColor #0000;
2796 @supports (color: color-mix(in lab, red, red)) {
2797 scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
2798 }
2799 }
2800 }
2801 @layer base {
2802 @property --radialprogress {
2803 syntax: "<percentage>";
2804 inherits: true;
2805 initial-value: 0%;
2806 }
2807 }
2808 @layer base {
2809 :root:not(span) {
2810 overflow: var(--page-overflow);
2811 }
2812 }
2813 @layer base {
2814 :root {
2815 background: var(--page-scroll-bg, var(--root-bg));
2816 --page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
2817 var(--root-bg, #0000);
2818 @supports (color: color-mix(in lab, red, red)) {
2819 --page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
2820 color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
2821 }
2822 --page-scroll-transition-on: background-color 0.3s ease-out;
2823 transition: var(--page-scroll-transition);
2824 scrollbar-gutter: var(--page-scroll-gutter, unset);
2825 scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset);
2826 }
2827 @keyframes set-page-has-scroll {
2828 0%, to {
2829 --page-has-scroll: 1;
2830 }
2831 }
2832 }
2833 @layer base {
2834 :root, [data-theme] {
2835 background: var(--page-scroll-bg, var(--root-bg));
2836 color: var(--color-base-content);
2837 }
2838 :where(:root, [data-theme]) {
2839 --root-bg: var(--color-base-100);
2840 }
2841 }
2842 @keyframes rating {
2843 0%, 40% {
2844 scale: 1.1;
2845 filter: brightness(1.05) contrast(1.05);
2846 }
2847 }
2848 @keyframes dropdown {
2849 0% {
2850 opacity: 0;
2851 }
2852 }
2853 @keyframes radio {
2854 0% {
2855 padding: 5px;
2856 }
2857 50% {
2858 padding: 3px;
2859 }
2860 }
2861 @keyframes toast {
2862 0% {
2863 scale: 0.9;
2864 opacity: 0;
2865 }
2866 100% {
2867 scale: 1;
2868 opacity: 1;
2869 }
2870 }
2871 @keyframes rotator {
2872 89.9999%, 100% {
2873 --first-item-position: 0 0%;
2874 }
2875 90%, 99.9999% {
2876 --first-item-position: 0 calc(var(--items) * 100%);
2877 }
2878 100% {
2879 translate: 0 -100%;
2880 }
2881 }
2882 @keyframes skeleton {
2883 0% {
2884 background-position: 150%;
2885 }
2886 100% {
2887 background-position: -50%;
2888 }
2889 }
2890 @keyframes menu {
2891 0% {
2892 opacity: 0;
2893 }
2894 }
2895 @keyframes progress {
2896 50% {
2897 background-position-x: -115%;
2898 }
2899 }
2900 @property --tw-rotate-x {
2901 syntax: "*";
2902 inherits: false;
2903 }
2904 @property --tw-rotate-y {
2905 syntax: "*";
2906 inherits: false;
2907 }
2908 @property --tw-rotate-z {
2909 syntax: "*";
2910 inherits: false;
2911 }
2912 @property --tw-skew-x {
2913 syntax: "*";
2914 inherits: false;
2915 }
2916 @property --tw-skew-y {
2917 syntax: "*";
2918 inherits: false;
2919 }
2920 @property --tw-border-style {
2921 syntax: "*";
2922 inherits: false;
2923 initial-value: solid;
2924 }
2925 @property --tw-shadow {
2926 syntax: "*";
2927 inherits: false;
2928 initial-value: 0 0 #0000;
2929 }
2930 @property --tw-shadow-color {
2931 syntax: "*";
2932 inherits: false;
2933 }
2934 @property --tw-shadow-alpha {
2935 syntax: "<percentage>";
2936 inherits: false;
2937 initial-value: 100%;
2938 }
2939 @property --tw-inset-shadow {
2940 syntax: "*";
2941 inherits: false;
2942 initial-value: 0 0 #0000;
2943 }
2944 @property --tw-inset-shadow-color {
2945 syntax: "*";
2946 inherits: false;
2947 }
2948 @property --tw-inset-shadow-alpha {
2949 syntax: "<percentage>";
2950 inherits: false;
2951 initial-value: 100%;
2952 }
2953 @property --tw-ring-color {
2954 syntax: "*";
2955 inherits: false;
2956 }
2957 @property --tw-ring-shadow {
2958 syntax: "*";
2959 inherits: false;
2960 initial-value: 0 0 #0000;
2961 }
2962 @property --tw-inset-ring-color {
2963 syntax: "*";
2964 inherits: false;
2965 }
2966 @property --tw-inset-ring-shadow {
2967 syntax: "*";
2968 inherits: false;
2969 initial-value: 0 0 #0000;
2970 }
2971 @property --tw-ring-inset {
2972 syntax: "*";
2973 inherits: false;
2974 }
2975 @property --tw-ring-offset-width {
2976 syntax: "<length>";
2977 inherits: false;
2978 initial-value: 0px;
2979 }
2980 @property --tw-ring-offset-color {
2981 syntax: "*";
2982 inherits: false;
2983 initial-value: #fff;
2984 }
2985 @property --tw-ring-offset-shadow {
2986 syntax: "*";
2987 inherits: false;
2988 initial-value: 0 0 #0000;
2989 }
2990 @property --tw-outline-style {
2991 syntax: "*";
2992 inherits: false;
2993 initial-value: solid;
2994 }
2995 @property --tw-blur {
2996 syntax: "*";
2997 inherits: false;
2998 }
2999 @property --tw-brightness {
3000 syntax: "*";
3001 inherits: false;
3002 }
3003 @property --tw-contrast {
3004 syntax: "*";
3005 inherits: false;
3006 }
3007 @property --tw-grayscale {
3008 syntax: "*";
3009 inherits: false;
3010 }
3011 @property --tw-hue-rotate {
3012 syntax: "*";
3013 inherits: false;
3014 }
3015 @property --tw-invert {
3016 syntax: "*";
3017 inherits: false;
3018 }
3019 @property --tw-opacity {
3020 syntax: "*";
3021 inherits: false;
3022 }
3023 @property --tw-saturate {
3024 syntax: "*";
3025 inherits: false;
3026 }
3027 @property --tw-sepia {
3028 syntax: "*";
3029 inherits: false;
3030 }
3031 @property --tw-drop-shadow {
3032 syntax: "*";
3033 inherits: false;
3034 }
3035 @property --tw-drop-shadow-color {
3036 syntax: "*";
3037 inherits: false;
3038 }
3039 @property --tw-drop-shadow-alpha {
3040 syntax: "<percentage>";
3041 inherits: false;
3042 initial-value: 100%;
3043 }
3044 @property --tw-drop-shadow-size {
3045 syntax: "*";
3046 inherits: false;
3047 }
3048 @layer properties {
3049 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3050 *, ::before, ::after, ::backdrop {
3051 --tw-rotate-x: initial;
3052 --tw-rotate-y: initial;
3053 --tw-rotate-z: initial;
3054 --tw-skew-x: initial;
3055 --tw-skew-y: initial;
3056 --tw-border-style: solid;
3057 --tw-shadow: 0 0 #0000;
3058 --tw-shadow-color: initial;
3059 --tw-shadow-alpha: 100%;
3060 --tw-inset-shadow: 0 0 #0000;
3061 --tw-inset-shadow-color: initial;
3062 --tw-inset-shadow-alpha: 100%;
3063 --tw-ring-color: initial;
3064 --tw-ring-shadow: 0 0 #0000;
3065 --tw-inset-ring-color: initial;
3066 --tw-inset-ring-shadow: 0 0 #0000;
3067 --tw-ring-inset: initial;
3068 --tw-ring-offset-width: 0px;
3069 --tw-ring-offset-color: #fff;
3070 --tw-ring-offset-shadow: 0 0 #0000;
3071 --tw-outline-style: solid;
3072 --tw-blur: initial;
3073 --tw-brightness: initial;
3074 --tw-contrast: initial;
3075 --tw-grayscale: initial;
3076 --tw-hue-rotate: initial;
3077 --tw-invert: initial;
3078 --tw-opacity: initial;
3079 --tw-saturate: initial;
3080 --tw-sepia: initial;
3081 --tw-drop-shadow: initial;
3082 --tw-drop-shadow-color: initial;
3083 --tw-drop-shadow-alpha: 100%;
3084 --tw-drop-shadow-size: initial;
3085 }
3086 }
3087 }
3088