euv_ui/style/class/forms/
fn.rs

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

euv_ui/style/class/forms/
fn.rs
