euv_ui/style/class/forms/
fn.rs

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

euv_ui/style/class/forms/
fn.rs
