PluginProbe
Subscriptions for WooCommerce with Stripe Recurring Payments / 1.9.6
Subscriptions for WooCommerce with Stripe Recurring Payments v1.9.6
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 1.4.1 1.4.2 1.5.0 1.5.1 All 61 releases
subscription / assets / css / tailwind / output.css

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

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