1use super::*;
2
3#[cfg(not(feature = "theme-custom"))]
4class! {
5 pub c_form_switch_off {
6 display: "inline-flex";
7 align-items: "center";
8 gap: var!(space-sm);
9 cursor: "pointer";
10 touch-action: "manipulation";
11 user-select: "none";
12 -webkit-user-select: "none";
13 }
14
15 pub c_euv_input_wrapper {
20 width: "100%";
21 margin: format!("{} 0px", var!(gap-element));
22 }
23
24 pub c_form_label {
25 display: "block";
26 margin-bottom: var!(space-sm);
27 color: "inherit";
28 font-weight: var!(font-weight-medium);
29 font-size: var!(font-base);
30 }
31
32 pub c_inline_input_row {
33 display: "flex";
34 align-items: "center";
35 gap: var!(gap-component);
36 }
37
38 pub c_euv_input {
39 width: "100%";
40 min-height: var!(control-height);
41 padding: format!("0px {}", var!(space-lg));
42 border: format!("{} solid {}", var!(border-width), var!(input));
43 font-size: var!(font-base);
44 line-height: "normal";
45 box-sizing: "border-box";
46 outline: "none";
47 color: var!(foreground);
48 appearance: "none";
49 -webkit-appearance: "none";
50 -moz-appearance: "none";
51 vertical-align: "middle";
52 :hover {
53 border-color: var!(ring);
54 background: var!(muted);
55 }
56 :focus {
57 outline: "none";
58 border-color: var!(ring);
59 background: var!(muted);
60 }
61 border-radius: var!(radius-md);
62 }
63
64 pub c_euv_input_no_transition {
65 width: "100%";
66 min-height: var!(control-height);
67 padding: format!("0px {}", var!(space-lg));
68 border: format!("{} solid {}", var!(border-width), var!(input));
69 font-size: var!(font-base);
70 line-height: "normal";
71 box-sizing: "border-box";
72 outline: "none";
73 color: var!(foreground);
74 appearance: "none";
75 -webkit-appearance: "none";
76 -moz-appearance: "none";
77 vertical-align: "middle";
78 border-radius: var!(radius-md);
79 }
80
81 pub c_euv_input_error {
82 width: "100%";
83 min-height: var!(control-height);
84 padding: format!("0px {}", var!(space-lg));
85 border: format!("{} solid {}", var!(border-width), var!(destructive));
86 background: var!(error-container);
87 font-size: var!(font-base);
88 line-height: "normal";
89 box-sizing: "border-box";
90 outline: "none";
91 color: var!(destructive);
92 appearance: "none";
93 -webkit-appearance: "none";
94 -moz-appearance: "none";
95 vertical-align: "middle";
96 :focus {
97 outline: "none";
98 border-color: var!(foreground);
99 }
100 border-radius: var!(radius-md);
101 }
102
103 pub c_form_checkbox {
104 cursor: "pointer";
105 width: var!(space-lg);
106 height: var!(space-lg);
107 border-radius: var!(radius-xs);
108 }
109
110 pub c_form_checkbox_label {
111 font-size: var!(font-base);
112 color: "inherit";
113 cursor: "pointer";
114 }
115
116 pub c_form_checkbox_row {
117 margin: format!("{} 0px", var!(gap-component));
118 display: "flex";
119 align-items: "center";
120 gap: var!(gap-element);
121 }
122
123 pub c_select_input {
124 width: "100%";
125 min-height: var!(control-height);
126 padding: format!("0px {}", var!(space-lg));
127 border: format!("{} solid {}", var!(border-width), var!(input));
128 font-size: var!(font-base);
129 line-height: "normal";
130 box-sizing: "border-box";
131 outline: "none";
132 cursor: "pointer";
133 appearance: "none";
134 -webkit-appearance: "none";
135 -moz-appearance: "none";
136 color: var!(foreground);
137 vertical-align: "middle";
138 background-image: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E\")";
139 background-repeat: "no-repeat";
140 background-position: "right 14px center";
141 :focus {
142 outline: "none";
143 border-color: var!(ring);
144 background: var!(muted);
145 }
146 border-radius: var!(radius-md);
147 }
148
149 pub c_textarea_input {
150 width: "100%";
151 max-width: "100%";
152 padding: format!("{} {}", var!(space-md), var!(space-lg));
153 border: format!("{} solid {}", var!(border-width), var!(input));
154 font-size: var!(font-base);
155 line-height: "normal";
156 box-sizing: "border-box";
157 outline: "none";
158 resize: "vertical";
159 overflow-x: "hidden";
160 word-wrap: "break-word";
161 font-family: "inherit";
162 color: var!(foreground);
163 appearance: "none";
164 -webkit-appearance: "none";
165 -moz-appearance: "none";
166 :hover {
167 border-color: var!(ring);
168 background: var!(muted);
169 }
170 :focus {
171 outline: "none";
172 border-color: var!(ring);
173 background: var!(muted);
174 }
175 border-radius: var!(radius-md);
176 }
177
178 pub c_textarea_input_error {
179 width: "100%";
180 max-width: "100%";
181 padding: format!("{} {}", var!(space-md), var!(space-lg));
182 border: format!("{} solid {}", var!(border-width), var!(destructive));
183 font-size: var!(font-base);
184 line-height: "normal";
185 box-sizing: "border-box";
186 outline: "none";
187 resize: "vertical";
188 overflow-x: "hidden";
189 word-wrap: "break-word";
190 font-family: "inherit";
191 color: var!(destructive);
192 appearance: "none";
193 -webkit-appearance: "none";
194 -moz-appearance: "none";
195 :focus {
196 outline: "none";
197 border-color: var!(foreground);
198 }
199 border-radius: var!(radius-md);
200 }
201
202 pub c_textarea_counter {
203 text-align: "right";
204 margin-top: var!(space-xs);
205 margin-bottom: var!(gap-component);
206 }
207
208 pub c_textarea_counter_text {
209 font-size: var!(font-sm);
210 color: "inherit";
211 opacity: "1";
212 }
213
214 pub c_field_error_text {
215 color: var!(destructive);
216 font-size: var!(font-base);
217 margin-top: var!(space-xs);
218 margin-bottom: var!(space-sm);
219 }
220
221 pub(crate) c_form_switch {
222 display: "inline-flex";
223 align-items: "center";
224 gap: var!(space-sm);
225 cursor: "pointer";
226 touch-action: "manipulation";
227 user-select: "none";
228 -webkit-user-select: "none";
229 }
230
231 pub(crate) c_form_switch_row {
232 display: "flex";
233 align-items: "center";
234 justify-content: "space-between";
235 gap: var!(gap-component);
236 min-height: var!(control-height);
237 padding: format!("{} 0px", var!(space-sm));
238 border-bottom: format!("{} solid {}", var!(border-width), var!(border));
239 }
240
241 pub(crate) c_form_switch_on {
242 display: "inline-flex";
243 align-items: "center";
244 gap: var!(space-sm);
245 cursor: "pointer";
246 touch-action: "manipulation";
247 user-select: "none";
248 -webkit-user-select: "none";
249 }
250
251 pub(crate) c_form_switch_track {
252 position: "relative";
253 width: "44px";
254 height: "24px";
255 flex-shrink: "0";
256 box-sizing: "border-box";
257 border: format!("{} solid {}", var!(border-width), var!(input));
258 border-radius: var!(radius-full);
259 background: var!(background);
260 transition: format!("{} {}", var!(duration-fast), var!(ease-out));
261 }
262
263 pub(crate) c_form_switch_thumb {
264 position: "absolute";
265 top: "3px";
266 left: "3px";
267 width: "16px";
268 height: "16px";
269 box-sizing: "border-box";
270 border-radius: var!(radius-full);
271 background: var!(foreground);
272 transition: format!("{} {}", var!(duration-fast), var!(ease-out));
273 }
274
275 pub(crate) c_form_switch_label {
276 font-size: var!(font-base);
277 font-weight: var!(font-weight-medium);
278 color: var!(foreground);
279 }
280
281 pub(crate) c_euv_slider_input {
282 flex: "1";
283 width: "100%";
284 height: "24px";
285 padding: "0px";
286 background: "transparent";
287 cursor: "pointer";
288 touch-action: "manipulation";
289 -webkit-appearance: "none";
290 appearance: "none";
291 border: "none";
292 outline: "none";
293 ::-webkit-slider-runnable-track {
294 height: "6px";
295 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
296 border: format!("{} solid {}", var!(border-width), var!(input));
297 border-radius: var!(radius-full);
298 }
299 ::-webkit-slider-thumb {
300 width: "16px";
301 height: "16px";
302 background: var!(background);
303 border: format!("2px solid {}", var!(primary));
304 border-radius: var!(radius-full);
305 cursor: "pointer";
306 -webkit-appearance: "none";
307 margin-top: "-6px";
310 }
311 : active::-webkit-slider-thumb {
312 transform: "scale(0.92)";
313 }
314 ::-moz-range-track {
315 height: "6px";
316 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
317 border: format!("{} solid {}", var!(border-width), var!(input));
318 border-radius: var!(radius-full);
319 }
320 ::-moz-range-thumb {
321 width: "16px";
322 height: "16px";
323 background: var!(background);
324 border: format!("2px solid {}", var!(primary));
325 border-radius: var!(radius-full);
326 cursor: "pointer";
327 }
328 :focus {
329 outline: "none";
330 }
331 }
332
333 pub(crate) c_euv_slider_row {
334 display: "flex";
335 align-items: "center";
336 gap: var!(space-md);
337 margin-bottom: var!(space-sm);
338 }
339
340 pub(crate) c_euv_slider_header {
341 display: "flex";
342 align-items: "baseline";
343 justify-content: "space-between";
344 gap: var!(space-sm);
345 margin-bottom: var!(space-xs);
346 }
347
348 pub(crate) c_euv_radio_group {
349 display: "flex";
350 flex-direction: "column";
351 gap: var!(space-sm);
352 border: "none";
353 margin: "0px";
354 padding: "0px";
355 }
356
357 pub(crate) c_euv_radio_item {
358 display: "flex";
359 align-items: "center";
360 gap: var!(space-sm);
361 min-height: var!(control-height);
362 padding: format!("{} 0px", var!(space-xs));
363 cursor: "pointer";
364 touch-action: "manipulation";
365 user-select: "none";
366 -webkit-user-select: "none";
367 font-size: var!(font-base);
368 color: var!(foreground);
369 :hover {
370 background: var!(muted);
371 color: var!(primary);
372 }
373 }
374
375 pub(crate) c_euv_radio_item_checked {
376 display: "flex";
377 align-items: "center";
378 justify-content: "center";
379 width: "16px";
380 height: "16px";
381 flex-shrink: "0";
382 box-sizing: "border-box";
383 border: format!("2px solid {}", var!(primary));
384 border-radius: var!(radius-full);
385 background: var!(primary);
386 color: var!(primary-foreground);
387 font-size: var!(font-xs);
388 font-weight: var!(font-weight-bold);
389 line-height: "1";
390 }
391
392 pub(crate) c_euv_radio_item_unchecked {
393 display: "flex";
394 align-items: "center";
395 justify-content: "center";
396 width: "16px";
397 height: "16px";
398 flex-shrink: "0";
399 box-sizing: "border-box";
400 border: format!("{} solid {}", var!(border-width), var!(input));
401 border-radius: var!(radius-full);
402 background: var!(background);
403 color: var!(muted-foreground);
404 font-size: var!(font-xs);
405 font-weight: var!(font-weight-bold);
406 line-height: "1";
407 }
408
409 pub(crate) c_euv_radio_input {
410 position: "absolute";
411 width: "1px";
412 height: "1px";
413 opacity: "0";
414 pointer-events: "none";
415 margin: "0px";
416 padding: "0px";
417 border: "none";
418 outline: "none";
419 }
420
421 pub(crate) c_progress_bar_fill {
422 height: "100%";
423 width: "0%";
424 background: var!(primary);
425 transition: format!("width {} {}", var!(duration-normal), var!(ease-out));
426 }
427
428 pub(crate) c_euv_select {
433 position: "relative";
434 display: "flex";
435 flex-direction: "column";
436 width: "100%";
437 }
438
439 pub(crate) c_euv_select_trigger {
440 display: "flex";
441 align-items: "center";
442 justify-content: "space-between";
443 gap: var!(space-sm);
444 width: "100%";
445 min-height: var!(control-height);
446 padding: format!("{} {}", var!(space-xs), var!(space-lg));
447 border: format!("{} solid {}", var!(border-width), var!(input));
448 background: var!(background);
449 color: var!(foreground);
450 font-size: var!(font-base);
451 text-align: "left";
452 cursor: "pointer";
453 box-sizing: "border-box";
454 appearance: "none";
455 -webkit-appearance: "none";
456 touch-action: "manipulation";
457 :hover {
458 border-color: var!(ring);
459 background: var!(muted);
460 }
461 :focus {
462 outline: "none";
463 border-color: var!(ring);
464 }
465 border-radius: var!(radius-md);
466 }
467
468 pub(crate) c_euv_select_value {
469 flex: "1";
470 min-width: "0px";
471 overflow: "hidden";
472 text-overflow: "ellipsis";
473 white-space: "nowrap";
474 }
475
476 pub(crate) c_euv_select_placeholder {
477 color: var!(muted-foreground);
478 }
479
480 pub(crate) c_euv_select_caret {
481 flex-shrink: "0";
482 font-size: var!(font-xs);
483 line-height: "1";
484 color: var!(muted-foreground);
485 }
486
487 pub(crate) c_euv_select_panel {
488 position: "absolute";
489 top: "100%";
490 left: "0px";
491 right: "0px";
492 z-index: "150";
493 margin-top: var!(space-2xs);
494 max-height: "240px";
495 overflow-y: "auto";
496 border: format!("{} solid {}", var!(border-width), var!(input));
497 background: var!(popover);
498 color: var!(popover-foreground);
499 box-shadow: var!(shadow-md);
500 box-sizing: "border-box";
501 border-radius: var!(radius-md);
502 }
503
504 pub(crate) c_euv_select_panel_open {
505 position: "absolute";
506 top: "100%";
507 left: "0px";
508 right: "0px";
509 z-index: "150";
510 margin-top: var!(space-2xs);
511 max-height: "240px";
512 overflow-y: "auto";
513 border: format!("{} solid {}", var!(border-width), var!(input));
514 background: var!(background);
515 box-shadow: var!(shadow-md);
516 box-sizing: "border-box";
517 display: "flex";
518 flex-direction: "column";
519 }
520
521 pub(crate) c_euv_select_panel_closed {
522 position: "absolute";
523 top: "100%";
524 left: "0px";
525 right: "0px";
526 z-index: "150";
527 margin-top: var!(space-2xs);
528 max-height: "240px";
529 overflow-y: "auto";
530 border: format!("{} solid {}", var!(border-width), var!(input));
531 background: var!(background);
532 box-shadow: var!(shadow-md);
533 box-sizing: "border-box";
534 display: "none";
535 }
536
537 pub(crate) c_euv_select_option {
538 display: "flex";
539 align-items: "center";
540 justify-content: "space-between";
541 gap: var!(space-sm);
542 width: "100%";
543 padding: format!("{} {}", var!(space-sm), var!(space-lg));
544 border: "none";
545 background: "transparent";
546 color: var!(foreground);
547 font-size: var!(font-base);
548 text-align: "left";
549 cursor: "pointer";
550 box-sizing: "border-box";
551 touch-action: "manipulation";
552 :hover {
553 background: var!(muted);
554 color: var!(primary);
555 }
556 }
557
558 pub(crate) c_euv_select_option_active {
559 display: "flex";
560 align-items: "center";
561 justify-content: "space-between";
562 gap: var!(space-sm);
563 width: "100%";
564 padding: format!("{} {}", var!(space-sm), var!(space-lg));
565 border: "none";
566 background: var!(primary);
567 color: var!(primary-foreground);
568 font-size: var!(font-base);
569 font-weight: var!(font-weight-semibold);
570 text-align: "left";
571 cursor: "pointer";
572 box-sizing: "border-box";
573 touch-action: "manipulation";
574 :hover {
575 background: var!(primary);
576 color: var!(primary-foreground);
577 }
578 }
579
580 pub(crate) c_euv_select_option_disabled {
581 display: "flex";
582 align-items: "center";
583 justify-content: "space-between";
584 gap: var!(space-sm);
585 width: "100%";
586 padding: format!("{} {}", var!(space-sm), var!(space-lg));
587 border: "none";
588 background: "transparent";
589 color: var!(muted-foreground);
590 font-size: var!(font-base);
591 text-align: "left";
592 cursor: "not-allowed";
593 opacity: "0.5";
594 box-sizing: "border-box";
595 }
596
597 pub(crate) c_euv_select_group {
598 padding: format!("{} {}", var!(space-xs), var!(space-lg));
599 color: var!(muted-foreground);
600 font-size: var!(font-xs);
601 letter-spacing: var!(letter-spacing-wide);
602 text-transform: var!(text-transform-uppercase);
603 cursor: "default";
604 }
605
606 pub(crate) c_euv_select_empty {
607 padding: format!("{} {}", var!(space-sm), var!(space-lg));
608 color: var!(muted-foreground);
609 font-size: var!(font-sm);
610 text-align: "center";
611 }
612
613 pub(crate) c_euv_checkbox_group {
618 display: "flex";
619 flex-direction: "column";
620 gap: var!(space-sm);
621 border: "none";
622 margin: "0px";
623 padding: "0px";
624 }
625
626 pub(crate) c_euv_checkbox_group_label {
627 display: "block";
628 margin-bottom: var!(space-sm);
629 color: "inherit";
630 font-weight: var!(font-weight-medium);
631 font-size: var!(font-base);
632 }
633
634 pub(crate) c_euv_checkbox_group_item {
635 display: "flex";
636 align-items: "center";
637 gap: var!(space-sm);
638 min-height: var!(control-height);
639 padding: format!("{} 0px", var!(space-xs));
640 cursor: "pointer";
641 touch-action: "manipulation";
642 user-select: "none";
643 -webkit-user-select: "none";
644 font-size: var!(font-base);
645 color: var!(foreground);
646 :hover {
647 background: var!(muted);
648 color: var!(primary);
649 }
650 }
651
652 pub(crate) c_euv_checkbox_group_box {
653 display: "flex";
654 align-items: "center";
655 justify-content: "center";
656 width: "16px";
657 height: "16px";
658 flex-shrink: "0";
659 box-sizing: "border-box";
660 border: format!("{} solid {}", var!(border-width), var!(input));
661 border-radius: var!(radius-xs);
662 background: var!(background);
663 color: var!(primary-foreground);
664 font-size: var!(font-xs);
665 font-weight: var!(font-weight-bold);
666 line-height: "1";
667 }
668
669 pub(crate) c_euv_checkbox_group_box_checked {
670 display: "flex";
671 align-items: "center";
672 justify-content: "center";
673 width: "16px";
674 height: "16px";
675 flex-shrink: "0";
676 box-sizing: "border-box";
677 border: format!("2px solid {}", var!(primary));
678 border-radius: var!(radius-xs);
679 background: var!(primary);
680 color: var!(primary-foreground);
681 font-size: var!(font-xs);
682 font-weight: var!(font-weight-bold);
683 line-height: "1";
684 }
685
686 pub(crate) c_euv_checkbox_group_box_unchecked {
687 display: "flex";
688 align-items: "center";
689 justify-content: "center";
690 width: "16px";
691 height: "16px";
692 flex-shrink: "0";
693 box-sizing: "border-box";
694 border: format!("{} solid {}", var!(border-width), var!(input));
695 border-radius: var!(radius-xs);
696 background: var!(background);
697 color: var!(muted-foreground);
698 font-size: var!(font-xs);
699 font-weight: var!(font-weight-bold);
700 line-height: "1";
701 }
702
703 pub(crate) c_euv_checkbox_group_input {
704 position: "absolute";
705 width: "1px";
706 height: "1px";
707 opacity: "0";
708 pointer-events: "none";
709 margin: "0px";
710 padding: "0px";
711 border: "none";
712 outline: "none";
713 }
714
715 pub(crate) c_euv_checkbox_group_text {
716 font-size: var!(font-base);
717 color: "inherit";
718 }
719
720 pub(crate) c_euv_segmented {
725 display: "inline-flex";
726 align-items: "stretch";
727 white-space: "nowrap";
730 border: format!("{} solid {}", var!(border-width), var!(input));
731 box-sizing: "border-box";
732 max-width: "100%";
733 overflow-x: "auto";
734 }
735
736 pub(crate) c_euv_segmented_item {
737 flex: "1 1 auto";
738 min-width: "0px";
739 min-height: var!(control-height);
740 padding: format!("{} {}", var!(space-xs), var!(space-lg));
741 border: "none";
742 border-right: format!("{} solid {}", var!(border-width), var!(border));
743 background: var!(background);
744 color: var!(foreground);
745 font-size: var!(font-sm);
746 text-align: "center";
747 white-space: "nowrap";
748 cursor: "pointer";
749 touch-action: "manipulation";
750 user-select: "none";
751 -webkit-user-select: "none";
752 :hover {
753 background: var!(muted);
754 color: var!(primary);
755 }
756 }
757
758 pub(crate) c_euv_segmented_item_active {
759 flex: "1 1 auto";
760 min-width: "0px";
761 min-height: var!(control-height);
762 padding: format!("{} {}", var!(space-xs), var!(space-lg));
763 border: "none";
764 border-right: format!("{} solid {}", var!(border-width), var!(border));
765 background: var!(primary);
766 color: var!(primary-foreground);
767 font-size: var!(font-sm);
768 font-weight: var!(font-weight-semibold);
769 text-align: "center";
770 white-space: "nowrap";
771 cursor: "pointer";
772 touch-action: "manipulation";
773 user-select: "none";
774 -webkit-user-select: "none";
775 :hover {
776 background: var!(primary);
777 color: var!(primary-foreground);
778 }
779 }
780
781 pub(crate) c_euv_number_input {
786 display: "flex";
787 align-items: "stretch";
788 width: "100%";
789 min-height: var!(control-height);
790 border: format!("{} solid {}", var!(border-width), var!(input));
791 background: var!(background);
792 box-sizing: "border-box";
793 :hover {
794 border-color: var!(ring);
795 background: var!(muted);
796 }
797 :focus-within {
800 box-shadow: format!("inset 0 0 0 1px {}", var!(ring));
801 }
802 }
803
804 pub(crate) c_euv_number_input_field {
805 flex: "1";
806 min-width: "0px";
807 min-height: var!(control-height);
808 padding: format!("0px {}", var!(space-lg));
809 border: "none";
810 background: "transparent";
811 color: var!(foreground);
812 font-size: var!(font-base);
813 text-align: "left";
814 box-sizing: "border-box";
815 outline: "none";
816 appearance: "none";
817 -webkit-appearance: "none";
818 -moz-appearance: "none";
819 :focus-visible {
823 box-shadow: "none";
824 }
825 }
826
827 pub(crate) c_euv_number_input_stepper {
828 display: "flex";
829 align-items: "center";
830 justify-content: "center";
831 width: var!(space-2xl);
832 flex-shrink: "0";
833 min-height: var!(control-height);
834 padding: "0px";
835 border: "none";
836 border-left: format!("{} solid {}", var!(border-width), var!(border));
837 background: var!(background);
838 color: var!(foreground);
839 font-size: var!(font-sm);
840 line-height: "1";
841 cursor: "pointer";
842 touch-action: "manipulation";
843 user-select: "none";
844 -webkit-user-select: "none";
845 :hover {
846 background: var!(muted);
847 color: var!(primary);
848 }
849 }
850
851 pub(crate) c_euv_number_input_stepper_disabled {
852 display: "flex";
853 align-items: "center";
854 justify-content: "center";
855 width: var!(space-2xl);
856 flex-shrink: "0";
857 min-height: var!(control-height);
858 padding: "0px";
859 border: "none";
860 border-left: format!("{} solid {}", var!(border-width), var!(border));
861 background: var!(background);
862 color: var!(muted-foreground);
863 font-size: var!(font-sm);
864 line-height: "1";
865 cursor: "not-allowed";
866 opacity: "0.5";
867 touch-action: "manipulation";
868 user-select: "none";
869 -webkit-user-select: "none";
870 }
871
872 pub(crate) c_euv_auto_complete {
877 position: "relative";
878 display: "flex";
879 flex-direction: "column";
880 width: "100%";
881 }
882
883 pub(crate) c_euv_auto_complete_input {
884 width: "100%";
885 min-height: var!(control-height);
886 padding: format!("0px {}", var!(space-lg));
887 border: format!("{} solid {}", var!(border-width), var!(input));
888 font-size: var!(font-base);
889 line-height: "normal";
890 box-sizing: "border-box";
891 outline: "none";
892 color: var!(foreground);
893 appearance: "none";
894 -webkit-appearance: "none";
895 -moz-appearance: "none";
896 :hover {
897 border-color: var!(ring);
898 background: var!(muted);
899 }
900 :focus {
901 outline: "none";
902 border-color: var!(ring);
903 }
904 }
905
906 pub(crate) c_euv_auto_complete_panel {
907 position: "absolute";
908 top: "100%";
909 left: "0px";
910 right: "0px";
911 z-index: "150";
912 margin-top: var!(space-2xs);
913 max-height: "240px";
914 overflow-y: "auto";
915 border: format!("{} solid {}", var!(border-width), var!(input));
916 background: var!(background);
917 box-shadow: var!(shadow-md);
918 box-sizing: "border-box";
919 }
920
921 pub(crate) c_euv_auto_complete_panel_open {
922 position: "absolute";
923 top: "100%";
924 left: "0px";
925 right: "0px";
926 z-index: "150";
927 margin-top: var!(space-2xs);
928 max-height: "240px";
929 overflow-y: "auto";
930 border: format!("{} solid {}", var!(border-width), var!(input));
931 background: var!(background);
932 box-shadow: var!(shadow-md);
933 box-sizing: "border-box";
934 display: "flex";
935 flex-direction: "column";
936 }
937
938 pub(crate) c_euv_auto_complete_panel_closed {
939 position: "absolute";
940 top: "100%";
941 left: "0px";
942 right: "0px";
943 z-index: "150";
944 margin-top: var!(space-2xs);
945 max-height: "240px";
946 overflow-y: "auto";
947 border: format!("{} solid {}", var!(border-width), var!(input));
948 background: var!(background);
949 box-shadow: var!(shadow-md);
950 box-sizing: "border-box";
951 display: "none";
952 }
953
954 pub(crate) c_euv_auto_complete_option {
955 display: "block";
956 width: "100%";
957 padding: format!("{} {}", var!(space-sm), var!(space-lg));
958 border: "none";
959 background: "transparent";
960 color: var!(foreground);
961 font-size: var!(font-base);
962 text-align: "left";
963 cursor: "pointer";
964 box-sizing: "border-box";
965 touch-action: "manipulation";
966 :hover {
967 background: var!(muted);
968 color: var!(primary);
969 }
970 }
971
972 pub(crate) c_euv_auto_complete_option_active {
973 display: "block";
974 width: "100%";
975 padding: format!("{} {}", var!(space-sm), var!(space-lg));
976 border: "none";
977 background: var!(primary);
978 color: var!(primary-foreground);
979 font-size: var!(font-base);
980 font-weight: var!(font-weight-semibold);
981 text-align: "left";
982 cursor: "pointer";
983 box-sizing: "border-box";
984 touch-action: "manipulation";
985 :hover {
986 background: var!(primary);
987 color: var!(primary-foreground);
988 }
989 }
990
991 pub(crate) c_euv_auto_complete_empty {
992 padding: format!("{} {}", var!(space-sm), var!(space-lg));
993 color: var!(muted-foreground);
994 font-size: var!(font-sm);
995 text-align: "center";
996 }
997
998 pub(crate) c_euv_form {
1003 display: "flex";
1004 flex-direction: "column";
1005 width: "100%";
1006 }
1007
1008 pub(crate) c_euv_form_actions {
1009 display: "flex";
1010 align-items: "center";
1011 gap: var!(gap-component);
1012 margin-top: var!(gap-component);
1013 }
1014
1015 pub(crate) c_euv_date_picker {
1020 position: "relative";
1021 display: "flex";
1022 flex-direction: "column";
1023 width: "100%";
1024 }
1025
1026 pub(crate) c_euv_date_picker_trigger {
1027 display: "flex";
1028 align-items: "center";
1029 justify-content: "space-between";
1030 gap: var!(space-sm);
1031 width: "100%";
1032 min-height: var!(control-height);
1033 padding: format!("{} {}", var!(space-xs), var!(space-lg));
1034 border: format!("{} solid {}", var!(border-width), var!(input));
1035 background: var!(background);
1036 color: var!(foreground);
1037 font-size: var!(font-base);
1038 text-align: "left";
1039 cursor: "pointer";
1040 box-sizing: "border-box";
1041 touch-action: "manipulation";
1042 :hover {
1043 border-color: var!(ring);
1044 background: var!(muted);
1045 }
1046 :focus {
1047 outline: "none";
1048 border-color: var!(ring);
1049 }
1050 }
1051
1052 pub(crate) c_euv_date_picker_value {
1053 flex: "1";
1054 min-width: "0px";
1055 overflow: "hidden";
1056 text-overflow: "ellipsis";
1057 white-space: "nowrap";
1058 }
1059
1060 pub(crate) c_euv_date_picker_placeholder {
1061 color: var!(muted-foreground);
1062 }
1063
1064 pub(crate) c_euv_date_picker_caret {
1065 flex-shrink: "0";
1066 font-size: var!(font-xs);
1067 line-height: "1";
1068 color: var!(muted-foreground);
1069 }
1070
1071 pub(crate) c_euv_date_picker_panel {
1072 position: "absolute";
1073 top: "100%";
1074 left: "0px";
1075 z-index: "150";
1076 margin-top: var!(space-2xs);
1077 width: "280px";
1078 border: format!("{} solid {}", var!(border-width), var!(input));
1079 background: var!(background);
1080 box-shadow: var!(shadow-md);
1081 box-sizing: "border-box";
1082 }
1083
1084 pub(crate) c_euv_date_picker_panel_open {
1085 position: "absolute";
1086 top: "100%";
1087 left: "0px";
1088 z-index: "150";
1089 margin-top: var!(space-2xs);
1090 width: "280px";
1091 border: format!("{} solid {}", var!(border-width), var!(input));
1092 background: var!(background);
1093 box-shadow: var!(shadow-md);
1094 box-sizing: "border-box";
1095 display: "flex";
1096 flex-direction: "column";
1097 }
1098
1099 pub(crate) c_euv_date_picker_panel_closed {
1100 position: "absolute";
1101 top: "100%";
1102 left: "0px";
1103 z-index: "150";
1104 margin-top: var!(space-2xs);
1105 width: "280px";
1106 border: format!("{} solid {}", var!(border-width), var!(input));
1107 background: var!(background);
1108 box-shadow: var!(shadow-md);
1109 box-sizing: "border-box";
1110 display: "none";
1111 }
1112
1113 pub(crate) c_euv_date_picker_footer {
1114 display: "flex";
1115 align-items: "center";
1116 justify-content: "space-between";
1117 gap: var!(space-sm);
1118 padding: var!(space-sm);
1119 border-top: format!("{} solid {}", var!(border-width), var!(border));
1120 }
1121
1122 pub(crate) c_euv_date_picker_nav {
1128 display: "flex";
1129 align-items: "center";
1130 justify-content: "center";
1131 min-height: "36px";
1132 min-width: "36px";
1133 box-sizing: "border-box";
1134 font-size: var!(font-base);
1135 font-weight: var!(font-weight-medium);
1136 color: var!(foreground);
1137 background: var!(background);
1138 border: format!("{} solid transparent", var!(border-width));
1139 border-radius: var!(radius-md);
1140 cursor: "pointer";
1141 touch-action: "manipulation";
1142 user-select: "none";
1143 -webkit-user-select: "none";
1144 :hover {
1145 background: var!(muted);
1146 color: var!(primary);
1147 }
1148 }
1149
1150 pub(crate) c_euv_time_picker {
1155 position: "relative";
1156 display: "flex";
1157 flex-direction: "column";
1158 width: "100%";
1159 }
1160
1161 pub(crate) c_euv_time_picker_trigger {
1162 display: "flex";
1163 align-items: "center";
1164 justify-content: "space-between";
1165 gap: var!(space-sm);
1166 width: "100%";
1167 min-height: var!(control-height);
1168 padding: format!("{} {}", var!(space-xs), var!(space-lg));
1169 border: format!("{} solid {}", var!(border-width), var!(input));
1170 background: var!(background);
1171 color: var!(foreground);
1172 font-size: var!(font-base);
1173 text-align: "left";
1174 cursor: "pointer";
1175 box-sizing: "border-box";
1176 touch-action: "manipulation";
1177 :hover {
1178 border-color: var!(ring);
1179 background: var!(muted);
1180 }
1181 :focus {
1182 outline: "none";
1183 border-color: var!(ring);
1184 }
1185 }
1186
1187 pub(crate) c_euv_time_picker_value {
1188 flex: "1";
1189 min-width: "0px";
1190 overflow: "hidden";
1191 text-overflow: "ellipsis";
1192 white-space: "nowrap";
1193 }
1194
1195 pub(crate) c_euv_time_picker_placeholder {
1196 color: var!(muted-foreground);
1197 }
1198
1199 pub(crate) c_euv_time_picker_caret {
1200 flex-shrink: "0";
1201 font-size: var!(font-xs);
1202 line-height: "1";
1203 color: var!(muted-foreground);
1204 }
1205
1206 pub(crate) c_euv_time_picker_panel {
1207 position: "absolute";
1208 top: "100%";
1209 left: "0px";
1210 z-index: "150";
1211 margin-top: var!(space-2xs);
1212 width: "220px";
1213 border: format!("{} solid {}", var!(border-width), var!(input));
1214 background: var!(background);
1215 box-shadow: var!(shadow-md);
1216 box-sizing: "border-box";
1217 }
1218
1219 pub(crate) c_euv_time_picker_panel_open {
1220 position: "absolute";
1221 top: "100%";
1222 left: "0px";
1223 z-index: "150";
1224 margin-top: var!(space-2xs);
1225 width: "220px";
1226 border: format!("{} solid {}", var!(border-width), var!(input));
1227 background: var!(background);
1228 box-shadow: var!(shadow-md);
1229 box-sizing: "border-box";
1230 display: "flex";
1231 flex-direction: "column";
1232 }
1233
1234 pub(crate) c_euv_time_picker_panel_closed {
1235 position: "absolute";
1236 top: "100%";
1237 left: "0px";
1238 z-index: "150";
1239 margin-top: var!(space-2xs);
1240 width: "220px";
1241 border: format!("{} solid {}", var!(border-width), var!(input));
1242 background: var!(background);
1243 box-shadow: var!(shadow-md);
1244 box-sizing: "border-box";
1245 display: "none";
1246 }
1247
1248 pub(crate) c_euv_time_picker_grid {
1249 display: "flex";
1250 gap: var!(space-sm);
1251 padding: var!(space-sm);
1252 }
1253
1254 pub(crate) c_euv_time_picker_column {
1255 display: "flex";
1256 flex-direction: "column";
1257 gap: var!(space-2xs);
1258 flex: "1";
1259 min-width: "0px";
1260 max-height: "160px";
1261 overflow-y: "auto";
1262 }
1263
1264 pub(crate) c_euv_time_picker_cell {
1265 display: "block";
1266 width: "100%";
1267 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
1268 border: "none";
1269 background: "transparent";
1270 color: var!(foreground);
1271 font-size: var!(font-sm);
1272 text-align: "center";
1273 cursor: "pointer";
1274 box-sizing: "border-box";
1275 touch-action: "manipulation";
1276 :hover {
1277 background: var!(muted);
1278 color: var!(primary);
1279 }
1280 }
1281
1282 pub(crate) c_euv_time_picker_cell_active {
1283 display: "block";
1284 width: "100%";
1285 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
1286 border: "none";
1287 background: var!(primary);
1288 color: var!(primary-foreground);
1289 font-size: var!(font-sm);
1290 font-weight: var!(font-weight-semibold);
1291 text-align: "center";
1292 cursor: "pointer";
1293 box-sizing: "border-box";
1294 touch-action: "manipulation";
1295 :hover {
1296 background: var!(primary);
1297 color: var!(primary-foreground);
1298 }
1299 }
1300
1301 pub(crate) c_euv_time_picker_footer {
1302 display: "flex";
1303 align-items: "center";
1304 justify-content: "space-between";
1305 gap: var!(space-sm);
1306 padding: var!(space-sm);
1307 border-top: format!("{} solid {}", var!(border-width), var!(border));
1308 }
1309
1310 pub(crate) c_euv_transfer {
1315 display: "flex";
1316 align-items: "stretch";
1317 gap: var!(gap-component);
1318 width: "100%";
1319 }
1320
1321 pub(crate) c_euv_transfer_panel {
1322 display: "flex";
1323 flex-direction: "column";
1324 flex: "1";
1325 min-width: "0px";
1326 border: format!("{} solid {}", var!(border-width), var!(input));
1327 background: var!(background);
1328 box-sizing: "border-box";
1329 }
1330
1331 pub(crate) c_euv_transfer_header {
1332 display: "flex";
1333 align-items: "center";
1334 justify-content: "space-between";
1335 gap: var!(space-sm);
1336 padding: var!(space-sm);
1337 border-bottom: format!("{} solid {}", var!(border-width), var!(border));
1338 font-size: var!(font-sm);
1339 }
1340
1341 pub(crate) c_euv_transfer_list {
1342 display: "flex";
1343 flex-direction: "column";
1344 flex: "1";
1345 min-height: "0px";
1346 max-height: "240px";
1347 overflow-y: "auto";
1348 padding: var!(space-2xs);
1349 }
1350
1351 pub(crate) c_euv_transfer_item {
1352 display: "flex";
1353 align-items: "center";
1354 gap: var!(space-sm);
1355 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1356 font-size: var!(font-sm);
1357 color: var!(foreground);
1358 cursor: "pointer";
1359 touch-action: "manipulation";
1360 user-select: "none";
1361 -webkit-user-select: "none";
1362 :hover {
1363 background: var!(muted);
1364 color: var!(primary);
1365 }
1366 }
1367
1368 pub(crate) c_euv_transfer_item_active {
1369 display: "flex";
1370 align-items: "center";
1371 gap: var!(space-sm);
1372 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1373 font-size: var!(font-sm);
1374 font-weight: var!(font-weight-semibold);
1375 color: var!(foreground);
1376 background: var!(muted);
1377 cursor: "pointer";
1378 touch-action: "manipulation";
1379 user-select: "none";
1380 -webkit-user-select: "none";
1381 :hover {
1382 background: var!(muted);
1383 color: var!(primary);
1384 }
1385 }
1386
1387 pub(crate) c_euv_transfer_box {
1388 display: "flex";
1389 align-items: "center";
1390 justify-content: "center";
1391 width: "14px";
1392 height: "14px";
1393 flex-shrink: "0";
1394 box-sizing: "border-box";
1395 border: format!("{} solid {}", var!(border-width), var!(input));
1396 border-radius: var!(radius-sm);
1397 background: var!(background);
1398 color: var!(primary-foreground);
1399 font-size: var!(font-xs);
1400 font-weight: var!(font-weight-bold);
1401 line-height: "1";
1402 }
1403
1404 pub(crate) c_euv_transfer_box_active {
1405 display: "flex";
1406 align-items: "center";
1407 justify-content: "center";
1408 width: "14px";
1409 height: "14px";
1410 flex-shrink: "0";
1411 box-sizing: "border-box";
1412 border: format!("2px solid {}", var!(primary));
1413 border-radius: var!(radius-sm);
1414 background: var!(primary);
1415 color: var!(primary-foreground);
1416 font-size: var!(font-xs);
1417 font-weight: var!(font-weight-bold);
1418 line-height: "1";
1419 }
1420
1421 pub(crate) c_euv_transfer_actions {
1422 display: "flex";
1423 flex-direction: "column";
1424 align-items: "center";
1425 justify-content: "center";
1426 gap: var!(space-sm);
1427 flex-shrink: "0";
1428 }
1429
1430 pub(crate) c_euv_cascader {
1435 position: "relative";
1436 display: "flex";
1437 flex-direction: "column";
1438 width: "100%";
1439 }
1440
1441 pub(crate) c_euv_cascader_trigger {
1442 display: "flex";
1443 align-items: "center";
1444 justify-content: "space-between";
1445 gap: var!(space-sm);
1446 width: "100%";
1447 min-height: var!(control-height);
1448 padding: format!("{} {}", var!(space-xs), var!(space-lg));
1449 border: format!("{} solid {}", var!(border-width), var!(input));
1450 background: var!(background);
1451 color: var!(foreground);
1452 font-size: var!(font-base);
1453 text-align: "left";
1454 cursor: "pointer";
1455 box-sizing: "border-box";
1456 touch-action: "manipulation";
1457 :hover {
1458 border-color: var!(ring);
1459 background: var!(muted);
1460 }
1461 :focus {
1462 outline: "none";
1463 border-color: var!(ring);
1464 }
1465 }
1466
1467 pub(crate) c_euv_cascader_value {
1468 flex: "1";
1469 min-width: "0px";
1470 overflow: "hidden";
1471 text-overflow: "ellipsis";
1472 white-space: "nowrap";
1473 }
1474
1475 pub(crate) c_euv_cascader_placeholder {
1476 color: var!(muted-foreground);
1477 }
1478
1479 pub(crate) c_euv_cascader_caret {
1480 flex-shrink: "0";
1481 font-size: var!(font-xs);
1482 line-height: "1";
1483 color: var!(muted-foreground);
1484 }
1485
1486 pub(crate) c_euv_cascader_panel {
1487 position: "absolute";
1488 top: "100%";
1489 left: "0px";
1490 z-index: "150";
1491 margin-top: var!(space-2xs);
1492 min-width: "240px";
1493 border: format!("{} solid {}", var!(border-width), var!(input));
1494 background: var!(background);
1495 box-shadow: var!(shadow-md);
1496 box-sizing: "border-box";
1497 }
1498
1499 pub(crate) c_euv_cascader_panel_open {
1500 position: "absolute";
1501 top: "100%";
1502 left: "0px";
1503 z-index: "150";
1504 margin-top: var!(space-2xs);
1505 min-width: "240px";
1506 border: format!("{} solid {}", var!(border-width), var!(input));
1507 background: var!(background);
1508 box-shadow: var!(shadow-md);
1509 box-sizing: "border-box";
1510 display: "flex";
1511 flex-direction: "row";
1512 }
1513
1514 pub(crate) c_euv_cascader_panel_closed {
1515 position: "absolute";
1516 top: "100%";
1517 left: "0px";
1518 z-index: "150";
1519 margin-top: var!(space-2xs);
1520 min-width: "240px";
1521 border: format!("{} solid {}", var!(border-width), var!(input));
1522 background: var!(background);
1523 box-shadow: var!(shadow-md);
1524 box-sizing: "border-box";
1525 display: "none";
1526 }
1527
1528 pub(crate) c_euv_cascader_columns {
1529 display: "flex";
1530 flex-direction: "row";
1531 }
1532
1533 pub(crate) c_euv_cascader_column {
1534 display: "flex";
1535 flex-direction: "column";
1536 min-width: "140px";
1537 max-height: "240px";
1538 overflow-y: "auto";
1539 padding: var!(space-2xs);
1540 border-right: format!("{} solid {}", var!(border-width), var!(border));
1541 }
1542
1543 pub(crate) c_euv_cascader_option {
1544 display: "flex";
1545 align-items: "center";
1546 justify-content: "space-between";
1547 gap: var!(space-sm);
1548 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1549 font-size: var!(font-sm);
1550 color: var!(foreground);
1551 cursor: "pointer";
1552 touch-action: "manipulation";
1553 user-select: "none";
1554 -webkit-user-select: "none";
1555 :hover {
1556 background: var!(muted);
1557 color: var!(primary);
1558 }
1559 }
1560
1561 pub(crate) c_euv_cascader_option_active {
1562 display: "flex";
1563 align-items: "center";
1564 justify-content: "space-between";
1565 gap: var!(space-sm);
1566 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1567 font-size: var!(font-sm);
1568 font-weight: var!(font-weight-semibold);
1569 color: var!(foreground);
1570 background: var!(muted);
1571 cursor: "pointer";
1572 touch-action: "manipulation";
1573 user-select: "none";
1574 -webkit-user-select: "none";
1575 :hover {
1576 background: var!(muted);
1577 color: var!(primary);
1578 }
1579 }
1580
1581 pub(crate) c_euv_tree_select {
1586 position: "relative";
1587 display: "flex";
1588 flex-direction: "column";
1589 width: "100%";
1590 }
1591
1592 pub(crate) c_euv_tree_select_trigger {
1593 display: "flex";
1594 align-items: "center";
1595 justify-content: "space-between";
1596 gap: var!(space-sm);
1597 width: "100%";
1598 min-height: var!(control-height);
1599 padding: format!("{} {}", var!(space-xs), var!(space-lg));
1600 border: format!("{} solid {}", var!(border-width), var!(input));
1601 background: var!(background);
1602 color: var!(foreground);
1603 font-size: var!(font-base);
1604 text-align: "left";
1605 cursor: "pointer";
1606 box-sizing: "border-box";
1607 touch-action: "manipulation";
1608 :hover {
1609 border-color: var!(ring);
1610 background: var!(muted);
1611 }
1612 :focus {
1613 outline: "none";
1614 border-color: var!(ring);
1615 }
1616 }
1617
1618 pub(crate) c_euv_tree_select_value {
1619 flex: "1";
1620 min-width: "0px";
1621 overflow: "hidden";
1622 text-overflow: "ellipsis";
1623 white-space: "nowrap";
1624 }
1625
1626 pub(crate) c_euv_tree_select_placeholder {
1627 color: var!(muted-foreground);
1628 }
1629
1630 pub(crate) c_euv_tree_select_caret {
1631 flex-shrink: "0";
1632 font-size: var!(font-xs);
1633 line-height: "1";
1634 color: var!(muted-foreground);
1635 }
1636
1637 pub(crate) c_euv_tree_select_panel {
1638 position: "absolute";
1639 top: "100%";
1640 left: "0px";
1641 z-index: "150";
1642 margin-top: var!(space-2xs);
1643 min-width: "240px";
1644 max-height: "280px";
1645 overflow-y: "auto";
1646 padding: var!(space-sm);
1647 border: format!("{} solid {}", var!(border-width), var!(input));
1648 background: var!(background);
1649 box-shadow: var!(shadow-md);
1650 box-sizing: "border-box";
1651 }
1652
1653 pub(crate) c_euv_tree_select_panel_open {
1654 position: "absolute";
1655 top: "100%";
1656 left: "0px";
1657 z-index: "150";
1658 margin-top: var!(space-2xs);
1659 min-width: "240px";
1660 max-height: "280px";
1661 overflow-y: "auto";
1662 padding: var!(space-sm);
1663 border: format!("{} solid {}", var!(border-width), var!(input));
1664 background: var!(background);
1665 box-shadow: var!(shadow-md);
1666 box-sizing: "border-box";
1667 display: "block";
1668 }
1669
1670 pub(crate) c_euv_tree_select_panel_closed {
1671 position: "absolute";
1672 top: "100%";
1673 left: "0px";
1674 z-index: "150";
1675 margin-top: var!(space-2xs);
1676 min-width: "240px";
1677 max-height: "280px";
1678 overflow-y: "auto";
1679 padding: var!(space-sm);
1680 border: format!("{} solid {}", var!(border-width), var!(input));
1681 background: var!(background);
1682 box-shadow: var!(shadow-md);
1683 box-sizing: "border-box";
1684 display: "none";
1685 }
1686
1687 pub(crate) c_euv_mentions {
1692 position: "relative";
1693 display: "flex";
1694 flex-direction: "column";
1695 width: "100%";
1696 }
1697
1698 pub(crate) c_euv_mentions_input {
1699 width: "100%";
1700 min-height: var!(control-height);
1701 padding: format!("{} {}", var!(space-xs), var!(space-lg));
1702 border: format!("{} solid {}", var!(border-width), var!(input));
1703 font-size: var!(font-base);
1704 line-height: "normal";
1705 box-sizing: "border-box";
1706 outline: "none";
1707 color: var!(foreground);
1708 appearance: "none";
1709 -webkit-appearance: "none";
1710 -moz-appearance: "none";
1711 :hover {
1712 border-color: var!(ring);
1713 background: var!(muted);
1714 }
1715 :focus {
1716 outline: "none";
1717 border-color: var!(ring);
1718 }
1719 }
1720
1721 pub(crate) c_euv_mentions_panel {
1722 position: "absolute";
1723 top: "100%";
1724 left: "0px";
1725 z-index: "150";
1726 margin-top: var!(space-2xs);
1727 min-width: "180px";
1728 max-height: "220px";
1729 overflow-y: "auto";
1730 border: format!("{} solid {}", var!(border-width), var!(input));
1731 background: var!(background);
1732 box-shadow: var!(shadow-md);
1733 box-sizing: "border-box";
1734 }
1735
1736 pub(crate) c_euv_mentions_panel_open {
1737 position: "absolute";
1738 top: "100%";
1739 left: "0px";
1740 z-index: "150";
1741 margin-top: var!(space-2xs);
1742 min-width: "180px";
1743 max-height: "220px";
1744 overflow-y: "auto";
1745 border: format!("{} solid {}", var!(border-width), var!(input));
1746 background: var!(background);
1747 box-shadow: var!(shadow-md);
1748 box-sizing: "border-box";
1749 display: "flex";
1750 flex-direction: "column";
1751 }
1752
1753 pub(crate) c_euv_mentions_panel_closed {
1754 position: "absolute";
1755 top: "100%";
1756 left: "0px";
1757 z-index: "150";
1758 margin-top: var!(space-2xs);
1759 min-width: "180px";
1760 max-height: "220px";
1761 overflow-y: "auto";
1762 border: format!("{} solid {}", var!(border-width), var!(input));
1763 background: var!(background);
1764 box-shadow: var!(shadow-md);
1765 box-sizing: "border-box";
1766 display: "none";
1767 }
1768
1769 pub(crate) c_euv_mentions_option {
1770 display: "flex";
1771 align-items: "center";
1772 gap: var!(space-sm);
1773 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1774 font-size: var!(font-sm);
1775 color: var!(foreground);
1776 cursor: "pointer";
1777 touch-action: "manipulation";
1778 user-select: "none";
1779 -webkit-user-select: "none";
1780 :hover {
1781 background: var!(muted);
1782 color: var!(primary);
1783 }
1784 }
1785
1786 pub(crate) c_euv_mentions_option_active {
1787 display: "flex";
1788 align-items: "center";
1789 gap: var!(space-sm);
1790 padding: format!("{} {}", var!(space-xs), var!(space-sm));
1791 font-size: var!(font-sm);
1792 font-weight: var!(font-weight-semibold);
1793 color: var!(foreground);
1794 background: var!(muted);
1795 cursor: "pointer";
1796 touch-action: "manipulation";
1797 user-select: "none";
1798 -webkit-user-select: "none";
1799 :hover {
1800 background: var!(muted);
1801 color: var!(primary);
1802 }
1803 }
1804}
1805
1806#[cfg(feature = "theme-custom")]
1807class! {
1808 pub c_form_switch_off {}
1809
1810 pub c_euv_input_wrapper {}
1815
1816 pub c_form_label {}
1817
1818 pub c_inline_input_row {}
1819
1820 pub c_euv_input {}
1821
1822 pub c_euv_input_no_transition {}
1823
1824 pub c_euv_input_error {}
1825
1826 pub c_form_checkbox {}
1827
1828 pub c_form_checkbox_label {}
1829
1830 pub c_form_checkbox_row {}
1831
1832 pub c_select_input {}
1833
1834 pub c_textarea_input {}
1835
1836 pub c_textarea_input_error {}
1837
1838 pub c_textarea_counter {}
1839
1840 pub c_textarea_counter_text {}
1841
1842 pub c_field_error_text {}
1843
1844 pub(crate) c_form_switch {}
1845
1846 pub(crate) c_form_switch_row {}
1847
1848 pub(crate) c_form_switch_on {}
1849
1850 pub(crate) c_form_switch_track {}
1851
1852 pub(crate) c_form_switch_thumb {}
1853
1854 pub(crate) c_form_switch_label {}
1855
1856 pub(crate) c_euv_slider_input {}
1857
1858 pub(crate) c_euv_slider_row {}
1859
1860 pub(crate) c_euv_slider_header {}
1861
1862 pub(crate) c_euv_radio_group {}
1863
1864 pub(crate) c_euv_radio_item {}
1865
1866 pub(crate) c_euv_radio_item_checked {}
1867
1868 pub(crate) c_euv_radio_item_unchecked {}
1869
1870 pub(crate) c_euv_radio_input {}
1871
1872 pub(crate) c_progress_bar_fill {}
1873
1874 pub(crate) c_euv_select {}
1879
1880 pub(crate) c_euv_select_trigger {}
1881
1882 pub(crate) c_euv_select_value {}
1883
1884 pub(crate) c_euv_select_placeholder {}
1885
1886 pub(crate) c_euv_select_caret {}
1887
1888 pub(crate) c_euv_select_panel {}
1889
1890 pub(crate) c_euv_select_panel_open {}
1891
1892 pub(crate) c_euv_select_panel_closed {}
1893
1894 pub(crate) c_euv_select_option {}
1895
1896 pub(crate) c_euv_select_option_active {}
1897
1898 pub(crate) c_euv_select_option_disabled {}
1899
1900 pub(crate) c_euv_select_group {}
1901
1902 pub(crate) c_euv_select_empty {}
1903
1904 pub(crate) c_euv_checkbox_group {}
1909
1910 pub(crate) c_euv_checkbox_group_label {}
1911
1912 pub(crate) c_euv_checkbox_group_item {}
1913
1914 pub(crate) c_euv_checkbox_group_box {}
1915
1916 pub(crate) c_euv_checkbox_group_box_checked {}
1917
1918 pub(crate) c_euv_checkbox_group_box_unchecked {}
1919
1920 pub(crate) c_euv_checkbox_group_input {}
1921
1922 pub(crate) c_euv_checkbox_group_text {}
1923
1924 pub(crate) c_euv_segmented {}
1929
1930 pub(crate) c_euv_segmented_item {}
1931
1932 pub(crate) c_euv_segmented_item_active {}
1933
1934 pub(crate) c_euv_number_input {}
1939
1940 pub(crate) c_euv_number_input_field {}
1941
1942 pub(crate) c_euv_number_input_stepper {}
1943
1944 pub(crate) c_euv_number_input_stepper_disabled {}
1945
1946 pub(crate) c_euv_auto_complete {}
1951
1952 pub(crate) c_euv_auto_complete_input {}
1953
1954 pub(crate) c_euv_auto_complete_panel {}
1955
1956 pub(crate) c_euv_auto_complete_panel_open {}
1957
1958 pub(crate) c_euv_auto_complete_panel_closed {}
1959
1960 pub(crate) c_euv_auto_complete_option {}
1961
1962 pub(crate) c_euv_auto_complete_option_active {}
1963
1964 pub(crate) c_euv_auto_complete_empty {}
1965
1966 pub(crate) c_euv_form {}
1971
1972 pub(crate) c_euv_form_actions {}
1973
1974 pub(crate) c_euv_date_picker {}
1979
1980 pub(crate) c_euv_date_picker_trigger {}
1981
1982 pub(crate) c_euv_date_picker_value {}
1983
1984 pub(crate) c_euv_date_picker_placeholder {}
1985
1986 pub(crate) c_euv_date_picker_caret {}
1987
1988 pub(crate) c_euv_date_picker_panel {}
1989
1990 pub(crate) c_euv_date_picker_panel_open {}
1991
1992 pub(crate) c_euv_date_picker_panel_closed {}
1993
1994 pub(crate) c_euv_date_picker_footer {}
1995
1996 pub(crate) c_euv_date_picker_nav {}
2002
2003 pub(crate) c_euv_time_picker {}
2008
2009 pub(crate) c_euv_time_picker_trigger {}
2010
2011 pub(crate) c_euv_time_picker_value {}
2012
2013 pub(crate) c_euv_time_picker_placeholder {}
2014
2015 pub(crate) c_euv_time_picker_caret {}
2016
2017 pub(crate) c_euv_time_picker_panel {}
2018
2019 pub(crate) c_euv_time_picker_panel_open {}
2020
2021 pub(crate) c_euv_time_picker_panel_closed {}
2022
2023 pub(crate) c_euv_time_picker_grid {}
2024
2025 pub(crate) c_euv_time_picker_column {}
2026
2027 pub(crate) c_euv_time_picker_cell {}
2028
2029 pub(crate) c_euv_time_picker_cell_active {}
2030
2031 pub(crate) c_euv_time_picker_footer {}
2032
2033 pub(crate) c_euv_transfer {}
2038
2039 pub(crate) c_euv_transfer_panel {}
2040
2041 pub(crate) c_euv_transfer_header {}
2042
2043 pub(crate) c_euv_transfer_list {}
2044
2045 pub(crate) c_euv_transfer_item {}
2046
2047 pub(crate) c_euv_transfer_item_active {}
2048
2049 pub(crate) c_euv_transfer_box {}
2050
2051 pub(crate) c_euv_transfer_box_active {}
2052
2053 pub(crate) c_euv_transfer_actions {}
2054
2055 pub(crate) c_euv_cascader {}
2060
2061 pub(crate) c_euv_cascader_trigger {}
2062
2063 pub(crate) c_euv_cascader_value {}
2064
2065 pub(crate) c_euv_cascader_placeholder {}
2066
2067 pub(crate) c_euv_cascader_caret {}
2068
2069 pub(crate) c_euv_cascader_panel {}
2070
2071 pub(crate) c_euv_cascader_panel_open {}
2072
2073 pub(crate) c_euv_cascader_panel_closed {}
2074
2075 pub(crate) c_euv_cascader_columns {}
2076
2077 pub(crate) c_euv_cascader_column {}
2078
2079 pub(crate) c_euv_cascader_option {}
2080
2081 pub(crate) c_euv_cascader_option_active {}
2082
2083 pub(crate) c_euv_tree_select {}
2088
2089 pub(crate) c_euv_tree_select_trigger {}
2090
2091 pub(crate) c_euv_tree_select_value {}
2092
2093 pub(crate) c_euv_tree_select_placeholder {}
2094
2095 pub(crate) c_euv_tree_select_caret {}
2096
2097 pub(crate) c_euv_tree_select_panel {}
2098
2099 pub(crate) c_euv_tree_select_panel_open {}
2100
2101 pub(crate) c_euv_tree_select_panel_closed {}
2102
2103 pub(crate) c_euv_mentions {}
2108
2109 pub(crate) c_euv_mentions_input {}
2110
2111 pub(crate) c_euv_mentions_panel {}
2112
2113 pub(crate) c_euv_mentions_panel_open {}
2114
2115 pub(crate) c_euv_mentions_panel_closed {}
2116
2117 pub(crate) c_euv_mentions_option {}
2118
2119 pub(crate) c_euv_mentions_option_active {}
2120}