lesli_view 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/lesli_view/view.tailwind.css +4362 -0
  3. data/lib/lesli_view/components/header.html.erb +5 -5
  4. data/lib/lesli_view/components/tabs.html.erb +59 -26
  5. data/lib/lesli_view/components/tabs.rb +7 -7
  6. data/lib/lesli_view/components/timeline.html.erb +28 -25
  7. data/lib/lesli_view/elements/avatar.html.erb +3 -3
  8. data/lib/lesli_view/elements/avatar.rb +8 -8
  9. data/lib/lesli_view/forms/inputs.rb +0 -1
  10. data/lib/lesli_view/items/activities.html.erb +4 -6
  11. data/lib/lesli_view/items/discussion.html.erb +6 -5
  12. data/lib/lesli_view/items/discussions.html.erb +8 -6
  13. data/lib/lesli_view/items/task.html.erb +16 -11
  14. data/lib/lesli_view/items/tasks.html.erb +8 -13
  15. data/lib/lesli_view/partials/engine_spec.html.erb +28 -41
  16. data/lib/lesli_view/version.rb +2 -2
  17. data/readme.md +82 -55
  18. metadata +11 -13
  19. data/lib/lesli_view/components/tabs.scss +0 -49
  20. data/lib/lesli_view/components/tabs_spec.rb +0 -0
  21. data/lib/lesli_view/components/timeline.scss +0 -216
  22. data/lib/lesli_view/elements/avatar.scss +0 -50
  23. data/lib/lesli_view/items/activities.scss +0 -39
  24. data/lib/lesli_view/items/discussions.scss +0 -47
data/app/assets/stylesheets/lesli_view/view.tailwind.css ADDED
@@ -0,0 +1,4362 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ /*!
3
+
4
+ Lesli
5
+
6
+ Copyright (c) 2026, Lesli Technologies, S. A.
7
+
8
+ This program is free software: you can redistribute it and/or modify
9
+ it under the terms of the GNU General Public License as published by
10
+ the Free Software Foundation, either version 3 of the License, or
11
+ (at your option) any later version.
12
+
13
+ This program is distributed in the hope that it will be useful,
14
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
15
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
+ GNU General Public License for more details.
17
+
18
+ You should have received a copy of the GNU General Public License
19
+ along with this program. If not, see http://www.gnu.org/licenses/.
20
+
21
+ Lesli · Ruby on Rails SaaS Development Framework.
22
+
23
+ Made with ♥ by LesliTech
24
+ Building a better future, one line of code at a time.
25
+
26
+ @contact hello@lesli.tech
27
+ @website https://www.lesli.tech
28
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
29
+
30
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
31
+ // ·
32
+ */
33
+ @layer properties;
34
+ @layer theme, components, utilities;
35
+ @layer theme {
36
+ :root, :host {
37
+ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
38
+ sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
39
+ --color-amber-50: oklch(98.7% 0.022 95.277);
40
+ --color-amber-100: oklch(96.2% 0.059 95.617);
41
+ --color-amber-200: oklch(92.4% 0.12 95.746);
42
+ --color-amber-300: oklch(87.9% 0.169 91.605);
43
+ --color-amber-400: oklch(82.8% 0.189 84.429);
44
+ --color-amber-500: oklch(76.9% 0.188 70.08);
45
+ --color-amber-600: oklch(66.6% 0.179 58.318);
46
+ --color-amber-700: oklch(55.5% 0.163 48.998);
47
+ --color-amber-900: oklch(41.4% 0.112 45.904);
48
+ --color-amber-950: oklch(27.9% 0.077 45.635);
49
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
50
+ --color-emerald-50: oklch(97.9% 0.021 166.113);
51
+ --color-emerald-100: oklch(95% 0.052 163.051);
52
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
53
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
54
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
55
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
56
+ --color-emerald-600: oklch(59.6% 0.145 163.225);
57
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
58
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
59
+ --color-cyan-50: oklch(98.4% 0.019 200.873);
60
+ --color-cyan-100: oklch(95.6% 0.045 203.388);
61
+ --color-cyan-200: oklch(91.7% 0.08 205.041);
62
+ --color-cyan-500: oklch(71.5% 0.143 215.221);
63
+ --color-sky-50: oklch(97.7% 0.013 236.62);
64
+ --color-sky-100: oklch(95.1% 0.026 236.824);
65
+ --color-sky-200: oklch(90.1% 0.058 230.902);
66
+ --color-sky-300: oklch(82.8% 0.111 230.318);
67
+ --color-sky-400: oklch(74.6% 0.16 232.661);
68
+ --color-sky-500: oklch(68.5% 0.169 237.323);
69
+ --color-sky-600: oklch(58.8% 0.158 241.966);
70
+ --color-sky-700: oklch(50% 0.134 242.749);
71
+ --color-sky-800: oklch(44.3% 0.11 240.79);
72
+ --color-sky-900: oklch(39.1% 0.09 240.876);
73
+ --color-blue-50: oklch(97% 0.014 254.604);
74
+ --color-blue-100: oklch(93.2% 0.032 255.585);
75
+ --color-blue-200: oklch(88.2% 0.059 254.128);
76
+ --color-blue-300: oklch(80.9% 0.105 251.813);
77
+ --color-blue-400: oklch(70.7% 0.165 254.624);
78
+ --color-blue-500: oklch(62.3% 0.214 259.815);
79
+ --color-blue-600: oklch(54.6% 0.245 262.881);
80
+ --color-blue-700: oklch(48.8% 0.243 264.376);
81
+ --color-rose-50: oklch(96.9% 0.015 12.422);
82
+ --color-rose-100: oklch(94.1% 0.03 12.58);
83
+ --color-rose-200: oklch(89.2% 0.058 10.001);
84
+ --color-rose-300: oklch(81% 0.117 11.638);
85
+ --color-rose-400: oklch(71.2% 0.194 13.428);
86
+ --color-rose-500: oklch(64.5% 0.246 16.439);
87
+ --color-rose-600: oklch(58.6% 0.253 17.585);
88
+ --color-rose-700: oklch(51.4% 0.222 16.935);
89
+ --color-rose-900: oklch(41% 0.159 10.272);
90
+ --color-slate-50: oklch(98.4% 0.003 247.858);
91
+ --color-slate-100: oklch(96.8% 0.007 247.896);
92
+ --color-slate-200: oklch(92.9% 0.013 255.508);
93
+ --color-slate-300: oklch(86.9% 0.022 252.894);
94
+ --color-slate-400: oklch(70.4% 0.04 256.788);
95
+ --color-slate-500: oklch(55.4% 0.046 257.417);
96
+ --color-slate-600: oklch(44.6% 0.043 257.281);
97
+ --color-slate-700: oklch(37.2% 0.044 257.287);
98
+ --color-slate-800: oklch(27.9% 0.041 260.031);
99
+ --color-slate-900: oklch(20.8% 0.042 265.755);
100
+ --color-white: #fff;
101
+ --spacing: 0.25rem;
102
+ --container-md: 28rem;
103
+ --container-2xl: 42rem;
104
+ --container-7xl: 80rem;
105
+ --text-xs: 0.75rem;
106
+ --text-xs--line-height: calc(1 / 0.75);
107
+ --text-sm: 0.875rem;
108
+ --text-sm--line-height: calc(1.25 / 0.875);
109
+ --text-base: 1rem;
110
+ --text-base--line-height: calc(1.5 / 1);
111
+ --text-lg: 1.125rem;
112
+ --text-lg--line-height: calc(1.75 / 1.125);
113
+ --text-xl: 1.25rem;
114
+ --text-xl--line-height: calc(1.75 / 1.25);
115
+ --text-2xl: 1.5rem;
116
+ --text-2xl--line-height: calc(2 / 1.5);
117
+ --text-3xl: 1.875rem;
118
+ --text-3xl--line-height: calc(2.25 / 1.875);
119
+ --text-4xl: 2.25rem;
120
+ --text-4xl--line-height: calc(2.5 / 2.25);
121
+ --text-5xl: 3rem;
122
+ --text-5xl--line-height: 1;
123
+ --text-6xl: 3.75rem;
124
+ --text-6xl--line-height: 1;
125
+ --font-weight-light: 300;
126
+ --font-weight-medium: 500;
127
+ --font-weight-semibold: 600;
128
+ --font-weight-bold: 700;
129
+ --tracking-tight: -0.025em;
130
+ --tracking-wide: 0.025em;
131
+ --radius-sm: 0.25rem;
132
+ --radius-md: 0.375rem;
133
+ --radius-lg: 0.5rem;
134
+ --radius-xl: 0.75rem;
135
+ --radius-2xl: 1rem;
136
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
137
+ --blur-sm: 8px;
138
+ --default-transition-duration: 150ms;
139
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
140
+ }
141
+ }
142
+ @layer utilities {
143
+ .sr-only {
144
+ position: absolute;
145
+ width: 1px;
146
+ height: 1px;
147
+ padding: 0;
148
+ margin: -1px;
149
+ overflow: hidden;
150
+ clip-path: inset(50%);
151
+ white-space: nowrap;
152
+ border-width: 0;
153
+ }
154
+ .absolute {
155
+ position: absolute;
156
+ }
157
+ .relative {
158
+ position: relative;
159
+ }
160
+ .inset-0 {
161
+ inset: 0px;
162
+ }
163
+ .top-7 {
164
+ top: calc(var(--spacing) * 7);
165
+ }
166
+ .bottom-0 {
167
+ bottom: 0px;
168
+ }
169
+ .bottom-1 {
170
+ bottom: var(--spacing);
171
+ }
172
+ .left-1\/2 {
173
+ left: calc(1 / 2 * 100%);
174
+ }
175
+ .z-10 {
176
+ z-index: 10;
177
+ }
178
+ .col-start-1 {
179
+ grid-column-start: 1;
180
+ }
181
+ .col-start-2 {
182
+ grid-column-start: 2;
183
+ }
184
+ .row-span-2 {
185
+ grid-row: span 2 / span 2;
186
+ }
187
+ .row-start-1 {
188
+ grid-row-start: 1;
189
+ }
190
+ .row-start-2 {
191
+ grid-row-start: 2;
192
+ }
193
+ .container {
194
+ width: 100%;
195
+ @media (width >= 40rem) {
196
+ max-width: 40rem;
197
+ }
198
+ @media (width >= 48rem) {
199
+ max-width: 48rem;
200
+ }
201
+ @media (width >= 64rem) {
202
+ max-width: 64rem;
203
+ }
204
+ @media (width >= 80rem) {
205
+ max-width: 80rem;
206
+ }
207
+ @media (width >= 96rem) {
208
+ max-width: 96rem;
209
+ }
210
+ }
211
+ .m-0 {
212
+ margin: 0px;
213
+ }
214
+ .mx-5 {
215
+ margin-inline: calc(var(--spacing) * 5);
216
+ }
217
+ .mx-auto {
218
+ margin-inline: auto;
219
+ }
220
+ .my-6 {
221
+ margin-block: calc(var(--spacing) * 6);
222
+ }
223
+ .mt-0\.5 {
224
+ margin-top: calc(var(--spacing) * 0.5);
225
+ }
226
+ .mt-1 {
227
+ margin-top: var(--spacing);
228
+ }
229
+ .mt-2 {
230
+ margin-top: calc(var(--spacing) * 2);
231
+ }
232
+ .mt-3 {
233
+ margin-top: calc(var(--spacing) * 3);
234
+ }
235
+ .mt-5 {
236
+ margin-top: calc(var(--spacing) * 5);
237
+ }
238
+ .mt-6 {
239
+ margin-top: calc(var(--spacing) * 6);
240
+ }
241
+ .mt-14 {
242
+ margin-top: calc(var(--spacing) * 14);
243
+ }
244
+ .-mr-px {
245
+ margin-right: -1px;
246
+ }
247
+ .-mb-px {
248
+ margin-bottom: -1px;
249
+ }
250
+ .mb-2 {
251
+ margin-bottom: calc(var(--spacing) * 2);
252
+ }
253
+ .mb-3 {
254
+ margin-bottom: calc(var(--spacing) * 3);
255
+ }
256
+ .mb-4 {
257
+ margin-bottom: calc(var(--spacing) * 4);
258
+ }
259
+ .mb-5 {
260
+ margin-bottom: calc(var(--spacing) * 5);
261
+ }
262
+ .mb-10 {
263
+ margin-bottom: calc(var(--spacing) * 10);
264
+ }
265
+ .ml-1\.5 {
266
+ margin-left: calc(var(--spacing) * 1.5);
267
+ }
268
+ .block {
269
+ display: block;
270
+ }
271
+ .flex {
272
+ display: flex;
273
+ }
274
+ .grid {
275
+ display: grid;
276
+ }
277
+ .hidden {
278
+ display: none;
279
+ }
280
+ .inline-flex {
281
+ display: inline-flex;
282
+ }
283
+ .size-\[60px\] {
284
+ width: 60px;
285
+ height: 60px;
286
+ }
287
+ .size-\[120px\] {
288
+ width: 120px;
289
+ height: 120px;
290
+ }
291
+ .size-\[180px\] {
292
+ width: 180px;
293
+ height: 180px;
294
+ }
295
+ .h-1 {
296
+ height: var(--spacing);
297
+ }
298
+ .h-8 {
299
+ height: calc(var(--spacing) * 8);
300
+ }
301
+ .h-12 {
302
+ height: calc(var(--spacing) * 12);
303
+ }
304
+ .h-14 {
305
+ height: calc(var(--spacing) * 14);
306
+ }
307
+ .h-20 {
308
+ height: calc(var(--spacing) * 20);
309
+ }
310
+ .h-28 {
311
+ height: calc(var(--spacing) * 28);
312
+ }
313
+ .h-36 {
314
+ height: calc(var(--spacing) * 36);
315
+ }
316
+ .h-full {
317
+ height: 100%;
318
+ }
319
+ .min-h-0 {
320
+ min-height: 0px;
321
+ }
322
+ .min-h-11 {
323
+ min-height: calc(var(--spacing) * 11);
324
+ }
325
+ .min-h-40 {
326
+ min-height: calc(var(--spacing) * 40);
327
+ }
328
+ .w-1 {
329
+ width: var(--spacing);
330
+ }
331
+ .w-12 {
332
+ width: calc(var(--spacing) * 12);
333
+ }
334
+ .w-14 {
335
+ width: calc(var(--spacing) * 14);
336
+ }
337
+ .w-28 {
338
+ width: calc(var(--spacing) * 28);
339
+ }
340
+ .w-36 {
341
+ width: calc(var(--spacing) * 36);
342
+ }
343
+ .w-48 {
344
+ width: calc(var(--spacing) * 48);
345
+ }
346
+ .w-full {
347
+ width: 100%;
348
+ }
349
+ .w-px {
350
+ width: 1px;
351
+ }
352
+ .max-w-2xl {
353
+ max-width: var(--container-2xl);
354
+ }
355
+ .max-w-7xl {
356
+ max-width: var(--container-7xl);
357
+ }
358
+ .max-w-md {
359
+ max-width: var(--container-md);
360
+ }
361
+ .min-w-0 {
362
+ min-width: 0px;
363
+ }
364
+ .min-w-max {
365
+ min-width: max-content;
366
+ }
367
+ .flex-1 {
368
+ flex: 1;
369
+ }
370
+ .shrink-0 {
371
+ flex-shrink: 0;
372
+ }
373
+ .-translate-x-1\/2 {
374
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
375
+ translate: var(--tw-translate-x) var(--tw-translate-y);
376
+ }
377
+ .cursor-not-allowed {
378
+ cursor: not-allowed;
379
+ }
380
+ .cursor-pointer {
381
+ cursor: pointer;
382
+ }
383
+ .list-none {
384
+ list-style-type: none;
385
+ }
386
+ .grid-cols-1 {
387
+ grid-template-columns: repeat(1, minmax(0, 1fr));
388
+ }
389
+ .grid-cols-7 {
390
+ grid-template-columns: repeat(7, minmax(0, 1fr));
391
+ }
392
+ .grid-cols-\[1\.5rem_minmax\(0\,1fr\)\] {
393
+ grid-template-columns: 1.5rem minmax(0,1fr);
394
+ }
395
+ .flex-col {
396
+ flex-direction: column;
397
+ }
398
+ .flex-wrap {
399
+ flex-wrap: wrap;
400
+ }
401
+ .items-center {
402
+ align-items: center;
403
+ }
404
+ .items-start {
405
+ align-items: flex-start;
406
+ }
407
+ .justify-center {
408
+ justify-content: center;
409
+ }
410
+ .gap-0\.5 {
411
+ gap: calc(var(--spacing) * 0.5);
412
+ }
413
+ .gap-2 {
414
+ gap: calc(var(--spacing) * 2);
415
+ }
416
+ .gap-3 {
417
+ gap: calc(var(--spacing) * 3);
418
+ }
419
+ .gap-4 {
420
+ gap: calc(var(--spacing) * 4);
421
+ }
422
+ .gap-5 {
423
+ gap: calc(var(--spacing) * 5);
424
+ }
425
+ .gap-6 {
426
+ gap: calc(var(--spacing) * 6);
427
+ }
428
+ :where(.space-y-2 > :not(:last-child)) {
429
+ --tw-space-y-reverse: 0;
430
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
431
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
432
+ }
433
+ :where(.space-y-3 > :not(:last-child)) {
434
+ --tw-space-y-reverse: 0;
435
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
436
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
437
+ }
438
+ :where(.space-y-6 > :not(:last-child)) {
439
+ --tw-space-y-reverse: 0;
440
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
441
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
442
+ }
443
+ .gap-x-4 {
444
+ column-gap: calc(var(--spacing) * 4);
445
+ }
446
+ .truncate {
447
+ overflow: hidden;
448
+ text-overflow: ellipsis;
449
+ white-space: nowrap;
450
+ }
451
+ .overflow-hidden {
452
+ overflow: hidden;
453
+ }
454
+ .overflow-x-auto {
455
+ overflow-x: auto;
456
+ }
457
+ .rounded-2xl {
458
+ border-radius: var(--radius-2xl);
459
+ }
460
+ .rounded-full {
461
+ border-radius: calc(infinity * 1px);
462
+ }
463
+ .rounded-lg {
464
+ border-radius: var(--radius-lg);
465
+ }
466
+ .rounded-xl {
467
+ border-radius: var(--radius-xl);
468
+ }
469
+ .border {
470
+ border-style: var(--tw-border-style);
471
+ border-width: 1px;
472
+ }
473
+ .border-0 {
474
+ border-style: var(--tw-border-style);
475
+ border-width: 0px;
476
+ }
477
+ .border-\[0\.1px\] {
478
+ border-style: var(--tw-border-style);
479
+ border-width: 0.1px;
480
+ }
481
+ .border-t {
482
+ border-top-style: var(--tw-border-style);
483
+ border-top-width: 1px;
484
+ }
485
+ .border-r {
486
+ border-right-style: var(--tw-border-style);
487
+ border-right-width: 1px;
488
+ }
489
+ .border-r-2 {
490
+ border-right-style: var(--tw-border-style);
491
+ border-right-width: 2px;
492
+ }
493
+ .border-b {
494
+ border-bottom-style: var(--tw-border-style);
495
+ border-bottom-width: 1px;
496
+ }
497
+ .border-b-2 {
498
+ border-bottom-style: var(--tw-border-style);
499
+ border-bottom-width: 2px;
500
+ }
501
+ .border-blue-600 {
502
+ border-color: var(--color-blue-600);
503
+ }
504
+ .border-sky-600 {
505
+ border-color: var(--color-sky-600);
506
+ }
507
+ .border-slate-200 {
508
+ border-color: var(--color-slate-200);
509
+ }
510
+ .border-slate-300 {
511
+ border-color: var(--color-slate-300);
512
+ }
513
+ .border-slate-400 {
514
+ border-color: var(--color-slate-400);
515
+ }
516
+ .border-transparent {
517
+ border-color: transparent;
518
+ }
519
+ .bg-amber-200 {
520
+ background-color: var(--color-amber-200);
521
+ }
522
+ .bg-cyan-200 {
523
+ background-color: var(--color-cyan-200);
524
+ }
525
+ .bg-rose-400 {
526
+ background-color: var(--color-rose-400);
527
+ }
528
+ .bg-sky-50 {
529
+ background-color: var(--color-sky-50);
530
+ }
531
+ .bg-sky-200 {
532
+ background-color: var(--color-sky-200);
533
+ }
534
+ .bg-sky-600 {
535
+ background-color: var(--color-sky-600);
536
+ }
537
+ .bg-slate-50 {
538
+ background-color: var(--color-slate-50);
539
+ }
540
+ .bg-slate-100 {
541
+ background-color: var(--color-slate-100);
542
+ }
543
+ .bg-slate-100\/80 {
544
+ background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 80%, transparent);
545
+ @supports (color: color-mix(in lab, red, red)) {
546
+ background-color: color-mix(in oklab, var(--color-slate-100) 80%, transparent);
547
+ }
548
+ }
549
+ .bg-slate-200 {
550
+ background-color: var(--color-slate-200);
551
+ }
552
+ .bg-slate-300 {
553
+ background-color: var(--color-slate-300);
554
+ }
555
+ .bg-white {
556
+ background-color: var(--color-white);
557
+ }
558
+ .bg-gradient-to-br {
559
+ --tw-gradient-position: to bottom right in oklab;
560
+ background-image: linear-gradient(var(--tw-gradient-stops));
561
+ }
562
+ .from-amber-50 {
563
+ --tw-gradient-from: var(--color-amber-50);
564
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
565
+ }
566
+ .from-cyan-50 {
567
+ --tw-gradient-from: var(--color-cyan-50);
568
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
569
+ }
570
+ .from-sky-50 {
571
+ --tw-gradient-from: var(--color-sky-50);
572
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
573
+ }
574
+ .from-slate-50 {
575
+ --tw-gradient-from: var(--color-slate-50);
576
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
577
+ }
578
+ .to-blue-100 {
579
+ --tw-gradient-to: var(--color-blue-100);
580
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
581
+ }
582
+ .to-sky-100 {
583
+ --tw-gradient-to: var(--color-sky-100);
584
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
585
+ }
586
+ .to-slate-200 {
587
+ --tw-gradient-to: var(--color-slate-200);
588
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
589
+ }
590
+ .to-yellow-100 {
591
+ --tw-gradient-to: var(--color-yellow-100);
592
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
593
+ }
594
+ .object-cover {
595
+ object-fit: cover;
596
+ }
597
+ .p-0 {
598
+ padding: 0px;
599
+ }
600
+ .p-3 {
601
+ padding: calc(var(--spacing) * 3);
602
+ }
603
+ .p-4 {
604
+ padding: calc(var(--spacing) * 4);
605
+ }
606
+ .p-6 {
607
+ padding: calc(var(--spacing) * 6);
608
+ }
609
+ .px-4 {
610
+ padding-inline: calc(var(--spacing) * 4);
611
+ }
612
+ .px-6 {
613
+ padding-inline: calc(var(--spacing) * 6);
614
+ }
615
+ .py-0\.5 {
616
+ padding-block: calc(var(--spacing) * 0.5);
617
+ }
618
+ .py-2\.5 {
619
+ padding-block: calc(var(--spacing) * 2.5);
620
+ }
621
+ .py-3 {
622
+ padding-block: calc(var(--spacing) * 3);
623
+ }
624
+ .py-4 {
625
+ padding-block: calc(var(--spacing) * 4);
626
+ }
627
+ .py-6 {
628
+ padding-block: calc(var(--spacing) * 6);
629
+ }
630
+ .py-10 {
631
+ padding-block: calc(var(--spacing) * 10);
632
+ }
633
+ .pt-5 {
634
+ padding-top: calc(var(--spacing) * 5);
635
+ }
636
+ .pb-3 {
637
+ padding-bottom: calc(var(--spacing) * 3);
638
+ }
639
+ .pb-6 {
640
+ padding-bottom: calc(var(--spacing) * 6);
641
+ }
642
+ .pb-10 {
643
+ padding-bottom: calc(var(--spacing) * 10);
644
+ }
645
+ .text-center {
646
+ text-align: center;
647
+ }
648
+ .text-left {
649
+ text-align: left;
650
+ }
651
+ .font-sans {
652
+ font-family: var(--font-sans);
653
+ }
654
+ .text-2xl {
655
+ font-size: var(--text-2xl);
656
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
657
+ }
658
+ .text-3xl {
659
+ font-size: var(--text-3xl);
660
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
661
+ }
662
+ .text-5xl {
663
+ font-size: var(--text-5xl);
664
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
665
+ }
666
+ .text-6xl {
667
+ font-size: var(--text-6xl);
668
+ line-height: var(--tw-leading, var(--text-6xl--line-height));
669
+ }
670
+ .text-base {
671
+ font-size: var(--text-base);
672
+ line-height: var(--tw-leading, var(--text-base--line-height));
673
+ }
674
+ .text-lg {
675
+ font-size: var(--text-lg);
676
+ line-height: var(--tw-leading, var(--text-lg--line-height));
677
+ }
678
+ .text-sm {
679
+ font-size: var(--text-sm);
680
+ line-height: var(--tw-leading, var(--text-sm--line-height));
681
+ }
682
+ .text-xl {
683
+ font-size: var(--text-xl);
684
+ line-height: var(--tw-leading, var(--text-xl--line-height));
685
+ }
686
+ .text-xs {
687
+ font-size: var(--text-xs);
688
+ line-height: var(--tw-leading, var(--text-xs--line-height));
689
+ }
690
+ .text-\[1\.1rem\] {
691
+ font-size: 1.1rem;
692
+ }
693
+ .text-\[2rem\] {
694
+ font-size: 2rem;
695
+ }
696
+ .text-\[11px\] {
697
+ font-size: 11px;
698
+ }
699
+ .text-\[26px\] {
700
+ font-size: 26px;
701
+ }
702
+ .leading-5 {
703
+ --tw-leading: calc(var(--spacing) * 5);
704
+ line-height: calc(var(--spacing) * 5);
705
+ }
706
+ .leading-6 {
707
+ --tw-leading: calc(var(--spacing) * 6);
708
+ line-height: calc(var(--spacing) * 6);
709
+ }
710
+ .leading-7 {
711
+ --tw-leading: calc(var(--spacing) * 7);
712
+ line-height: calc(var(--spacing) * 7);
713
+ }
714
+ .leading-none {
715
+ --tw-leading: 1;
716
+ line-height: 1;
717
+ }
718
+ .font-bold {
719
+ --tw-font-weight: var(--font-weight-bold);
720
+ font-weight: var(--font-weight-bold);
721
+ }
722
+ .font-light {
723
+ --tw-font-weight: var(--font-weight-light);
724
+ font-weight: var(--font-weight-light);
725
+ }
726
+ .font-medium {
727
+ --tw-font-weight: var(--font-weight-medium);
728
+ font-weight: var(--font-weight-medium);
729
+ }
730
+ .font-semibold {
731
+ --tw-font-weight: var(--font-weight-semibold);
732
+ font-weight: var(--font-weight-semibold);
733
+ }
734
+ .tracking-\[0\.2em\] {
735
+ --tw-tracking: 0.2em;
736
+ letter-spacing: 0.2em;
737
+ }
738
+ .tracking-tight {
739
+ --tw-tracking: var(--tracking-tight);
740
+ letter-spacing: var(--tracking-tight);
741
+ }
742
+ .tracking-wide {
743
+ --tw-tracking: var(--tracking-wide);
744
+ letter-spacing: var(--tracking-wide);
745
+ }
746
+ .break-words {
747
+ overflow-wrap: break-word;
748
+ }
749
+ .break-all {
750
+ word-break: break-all;
751
+ }
752
+ .whitespace-nowrap {
753
+ white-space: nowrap;
754
+ }
755
+ .text-\[var\(--lesli-color-primary\)\] {
756
+ color: var(--lesli-color-primary);
757
+ }
758
+ .text-amber-500 {
759
+ color: var(--color-amber-500);
760
+ }
761
+ .text-blue-700 {
762
+ color: var(--color-blue-700);
763
+ }
764
+ .text-cyan-500 {
765
+ color: var(--color-cyan-500);
766
+ }
767
+ .text-sky-600 {
768
+ color: var(--color-sky-600);
769
+ }
770
+ .text-sky-700 {
771
+ color: var(--color-sky-700);
772
+ }
773
+ .text-slate-300 {
774
+ color: var(--color-slate-300);
775
+ }
776
+ .text-slate-400 {
777
+ color: var(--color-slate-400);
778
+ }
779
+ .text-slate-500 {
780
+ color: var(--color-slate-500);
781
+ }
782
+ .text-slate-600 {
783
+ color: var(--color-slate-600);
784
+ }
785
+ .text-slate-700 {
786
+ color: var(--color-slate-700);
787
+ }
788
+ .text-slate-800 {
789
+ color: var(--color-slate-800);
790
+ }
791
+ .text-white {
792
+ color: var(--color-white);
793
+ }
794
+ .capitalize {
795
+ text-transform: capitalize;
796
+ }
797
+ .uppercase {
798
+ text-transform: uppercase;
799
+ }
800
+ .tabular-nums {
801
+ --tw-numeric-spacing: tabular-nums;
802
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
803
+ }
804
+ .line-through {
805
+ text-decoration-line: line-through;
806
+ }
807
+ .no-underline {
808
+ text-decoration-line: none;
809
+ }
810
+ .underline-offset-4 {
811
+ text-underline-offset: 4px;
812
+ }
813
+ .opacity-30 {
814
+ opacity: 30%;
815
+ }
816
+ .shadow-lg {
817
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
818
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
819
+ }
820
+ .shadow-sm {
821
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
822
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
823
+ }
824
+ .ring-1 {
825
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
826
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
827
+ }
828
+ .shadow-amber-100 {
829
+ --tw-shadow-color: oklch(96.2% 0.059 95.617);
830
+ @supports (color: color-mix(in lab, red, red)) {
831
+ --tw-shadow-color: color-mix(in oklab, var(--color-amber-100) var(--tw-shadow-alpha), transparent);
832
+ }
833
+ }
834
+ .shadow-cyan-100 {
835
+ --tw-shadow-color: oklch(95.6% 0.045 203.388);
836
+ @supports (color: color-mix(in lab, red, red)) {
837
+ --tw-shadow-color: color-mix(in oklab, var(--color-cyan-100) var(--tw-shadow-alpha), transparent);
838
+ }
839
+ }
840
+ .shadow-sky-100 {
841
+ --tw-shadow-color: oklch(95.1% 0.026 236.824);
842
+ @supports (color: color-mix(in lab, red, red)) {
843
+ --tw-shadow-color: color-mix(in oklab, var(--color-sky-100) var(--tw-shadow-alpha), transparent);
844
+ }
845
+ }
846
+ .shadow-slate-200 {
847
+ --tw-shadow-color: oklch(92.9% 0.013 255.508);
848
+ @supports (color: color-mix(in lab, red, red)) {
849
+ --tw-shadow-color: color-mix(in oklab, var(--color-slate-200) var(--tw-shadow-alpha), transparent);
850
+ }
851
+ }
852
+ .ring-sky-200 {
853
+ --tw-ring-color: var(--color-sky-200);
854
+ }
855
+ .blur-sm {
856
+ --tw-blur: blur(var(--blur-sm));
857
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
858
+ }
859
+ .transition {
860
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
861
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
862
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
863
+ }
864
+ .transition-colors {
865
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
866
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
867
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
868
+ }
869
+ .duration-150 {
870
+ --tw-duration: 150ms;
871
+ transition-duration: 150ms;
872
+ }
873
+ .ring-inset {
874
+ --tw-ring-inset: inset;
875
+ }
876
+ .group-last\:hidden:is(:where(.group):last-child *) {
877
+ display: none;
878
+ }
879
+ .last\:border-b-0:last-child {
880
+ border-bottom-style: var(--tw-border-style);
881
+ border-bottom-width: 0px;
882
+ }
883
+ .last\:pb-0:last-child {
884
+ padding-bottom: 0px;
885
+ }
886
+ @media (hover: hover) {
887
+ .hover\:border-slate-300:hover {
888
+ border-color: var(--color-slate-300);
889
+ }
890
+ .hover\:bg-sky-50:hover {
891
+ background-color: var(--color-sky-50);
892
+ }
893
+ .hover\:bg-slate-50:hover {
894
+ background-color: var(--color-slate-50);
895
+ }
896
+ .hover\:text-sky-800:hover {
897
+ color: var(--color-sky-800);
898
+ }
899
+ .hover\:text-slate-700:hover {
900
+ color: var(--color-slate-700);
901
+ }
902
+ .hover\:underline:hover {
903
+ text-decoration-line: underline;
904
+ }
905
+ }
906
+ .focus\:ring-2:focus {
907
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
908
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
909
+ }
910
+ .focus\:ring-sky-500\/30:focus {
911
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
912
+ @supports (color: color-mix(in lab, red, red)) {
913
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
914
+ }
915
+ }
916
+ .focus\:outline-none:focus {
917
+ --tw-outline-style: none;
918
+ outline-style: none;
919
+ }
920
+ .focus-visible\:z-10:focus-visible {
921
+ z-index: 10;
922
+ }
923
+ .focus-visible\:rounded-sm:focus-visible {
924
+ border-radius: var(--radius-sm);
925
+ }
926
+ .focus-visible\:ring-2:focus-visible {
927
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
928
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
929
+ }
930
+ .focus-visible\:ring-\[var\(--lesli-color-primary\)\]:focus-visible {
931
+ --tw-ring-color: var(--lesli-color-primary);
932
+ }
933
+ .focus-visible\:ring-blue-500:focus-visible {
934
+ --tw-ring-color: var(--color-blue-500);
935
+ }
936
+ .focus-visible\:outline-2:focus-visible {
937
+ outline-style: var(--tw-outline-style);
938
+ outline-width: 2px;
939
+ }
940
+ .focus-visible\:outline-offset-2:focus-visible {
941
+ outline-offset: 2px;
942
+ }
943
+ .focus-visible\:outline-\[var\(--lesli-color-primary\)\]:focus-visible {
944
+ outline-color: var(--lesli-color-primary);
945
+ }
946
+ .focus-visible\:outline-none:focus-visible {
947
+ --tw-outline-style: none;
948
+ outline-style: none;
949
+ }
950
+ .focus-visible\:ring-inset:focus-visible {
951
+ --tw-ring-inset: inset;
952
+ }
953
+ .disabled\:cursor-not-allowed:disabled {
954
+ cursor: not-allowed;
955
+ }
956
+ @media (prefers-reduced-motion: no-preference) {
957
+ .motion-safe\:animate-pulse {
958
+ animation: var(--animate-pulse);
959
+ }
960
+ }
961
+ @media (width >= 40rem) {
962
+ .sm\:mx-6 {
963
+ margin-inline: calc(var(--spacing) * 6);
964
+ }
965
+ .sm\:h-9 {
966
+ height: calc(var(--spacing) * 9);
967
+ }
968
+ .sm\:h-32 {
969
+ height: calc(var(--spacing) * 32);
970
+ }
971
+ .sm\:h-40 {
972
+ height: calc(var(--spacing) * 40);
973
+ }
974
+ .sm\:w-32 {
975
+ width: calc(var(--spacing) * 32);
976
+ }
977
+ .sm\:w-40 {
978
+ width: calc(var(--spacing) * 40);
979
+ }
980
+ .sm\:flex-row {
981
+ flex-direction: row;
982
+ }
983
+ .sm\:gap-4 {
984
+ gap: calc(var(--spacing) * 4);
985
+ }
986
+ .sm\:p-4 {
987
+ padding: calc(var(--spacing) * 4);
988
+ }
989
+ .sm\:p-8 {
990
+ padding: calc(var(--spacing) * 8);
991
+ }
992
+ .sm\:px-6 {
993
+ padding-inline: calc(var(--spacing) * 6);
994
+ }
995
+ .sm\:py-12 {
996
+ padding-block: calc(var(--spacing) * 12);
997
+ }
998
+ .sm\:text-right {
999
+ text-align: right;
1000
+ }
1001
+ .sm\:text-4xl {
1002
+ font-size: var(--text-4xl);
1003
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
1004
+ }
1005
+ .sm\:text-6xl {
1006
+ font-size: var(--text-6xl);
1007
+ line-height: var(--tw-leading, var(--text-6xl--line-height));
1008
+ }
1009
+ .sm\:text-base {
1010
+ font-size: var(--text-base);
1011
+ line-height: var(--tw-leading, var(--text-base--line-height));
1012
+ }
1013
+ .sm\:text-lg {
1014
+ font-size: var(--text-lg);
1015
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1016
+ }
1017
+ }
1018
+ @media (width >= 48rem) {
1019
+ .md\:col-start-1 {
1020
+ grid-column-start: 1;
1021
+ }
1022
+ .md\:col-start-2 {
1023
+ grid-column-start: 2;
1024
+ }
1025
+ .md\:col-start-3 {
1026
+ grid-column-start: 3;
1027
+ }
1028
+ .md\:row-start-1 {
1029
+ grid-row-start: 1;
1030
+ }
1031
+ .md\:mb-0 {
1032
+ margin-bottom: 0px;
1033
+ }
1034
+ .md\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
1035
+ grid-template-columns: minmax(0,1fr) auto;
1036
+ }
1037
+ .md\:grid-cols-\[minmax\(8rem\,auto\)_1\.5rem_minmax\(0\,1fr\)\] {
1038
+ grid-template-columns: minmax(8rem,auto) 1.5rem minmax(0,1fr);
1039
+ }
1040
+ .md\:items-start {
1041
+ align-items: flex-start;
1042
+ }
1043
+ .md\:gap-x-6 {
1044
+ column-gap: calc(var(--spacing) * 6);
1045
+ }
1046
+ .md\:justify-self-end {
1047
+ justify-self: flex-end;
1048
+ }
1049
+ .md\:pt-1 {
1050
+ padding-top: var(--spacing);
1051
+ }
1052
+ .md\:text-right {
1053
+ text-align: right;
1054
+ }
1055
+ }
1056
+ @media (width >= 64rem) {
1057
+ .lg\:px-8 {
1058
+ padding-inline: calc(var(--spacing) * 8);
1059
+ }
1060
+ }
1061
+ }
1062
+ @charset "UTF-8";
1063
+ :root {
1064
+ --lesli-color-primary-50: #F2F7FF;
1065
+ --lesli-color-primary-100: #E3EEFF;
1066
+ --lesli-color-primary-200: #C6DCFF;
1067
+ --lesli-color-primary-300: #8FB5F5;
1068
+ --lesli-color-primary-400: #4C83EA;
1069
+ --lesli-color-primary-500: #276AD6;
1070
+ --lesli-color-primary-600: #1F5BBB;
1071
+ --lesli-color-primary-700: #194A99;
1072
+ --lesli-color-primary-800: #133A78;
1073
+ --lesli-color-primary-900: #0C2856;
1074
+ --lesli-color-lesli-primary: #276AD6;
1075
+ --lesli-color-lesli-light: #E3EEFF;
1076
+ --lesli-color-lesli-dark: #0C2856;
1077
+ --lesli-color-neutral-50: #F8FAFC;
1078
+ --lesli-color-neutral-100: #F1F4F8;
1079
+ --lesli-color-neutral-200: #E5EAF0;
1080
+ --lesli-color-neutral-300: #C7D0DA;
1081
+ --lesli-color-neutral-400: #8F9BAA;
1082
+ --lesli-color-neutral-500: #667383;
1083
+ --lesli-color-neutral-600: #4B5663;
1084
+ --lesli-color-neutral-700: #34404C;
1085
+ --lesli-color-neutral-800: #28323D;
1086
+ --lesli-color-neutral-900: #1F2933;
1087
+ --lesli-color-info-50: #F0FAFC;
1088
+ --lesli-color-info-100: #DDF3F7;
1089
+ --lesli-color-info-200: #BCE7EF;
1090
+ --lesli-color-info-300: #8AD4E1;
1091
+ --lesli-color-info-400: #4FB5C8;
1092
+ --lesli-color-info-500: #167D9A;
1093
+ --lesli-color-info-600: #126B84;
1094
+ --lesli-color-info-700: #11586D;
1095
+ --lesli-color-info-800: #124957;
1096
+ --lesli-color-info-900: #123D49;
1097
+ --lesli-color-success-50: #F1FAF6;
1098
+ --lesli-color-success-100: #DDF4E8;
1099
+ --lesli-color-success-200: #BDE7D2;
1100
+ --lesli-color-success-300: #8CD4B3;
1101
+ --lesli-color-success-400: #52B88D;
1102
+ --lesli-color-success-500: #23845D;
1103
+ --lesli-color-success-600: #1D704F;
1104
+ --lesli-color-success-700: #195C43;
1105
+ --lesli-color-success-800: #174B38;
1106
+ --lesli-color-success-900: #143E30;
1107
+ --lesli-color-warning-50: #FFF9EB;
1108
+ --lesli-color-warning-100: #FEF0C7;
1109
+ --lesli-color-warning-200: #FDE19A;
1110
+ --lesli-color-warning-300: #F8CB60;
1111
+ --lesli-color-warning-400: #EAA934;
1112
+ --lesli-color-warning-500: #C98518;
1113
+ --lesli-color-warning-600: #AA6C12;
1114
+ --lesli-color-warning-700: #8A560F;
1115
+ --lesli-color-warning-800: #714611;
1116
+ --lesli-color-warning-900: #5E3B12;
1117
+ --lesli-color-danger-50: #FFF4F3;
1118
+ --lesli-color-danger-100: #FFE5E2;
1119
+ --lesli-color-danger-200: #FDCBC6;
1120
+ --lesli-color-danger-300: #F5A69F;
1121
+ --lesli-color-danger-400: #E8756C;
1122
+ --lesli-color-danger-500: #C44A42;
1123
+ --lesli-color-danger-600: #A93D37;
1124
+ --lesli-color-danger-700: #8C332F;
1125
+ --lesli-color-danger-800: #742D2B;
1126
+ --lesli-color-danger-900: #612927;
1127
+ --lesli-color-black-50: #F5F5F5;
1128
+ --lesli-color-black-100: #E0E0E0;
1129
+ --lesli-color-black-200: #C2C2C2;
1130
+ --lesli-color-black-300: #A3A3A3;
1131
+ --lesli-color-black-400: #525252;
1132
+ --lesli-color-black-500: #333333;
1133
+ --lesli-color-black-600: #1F1F1F;
1134
+ --lesli-color-black-700: #141414;
1135
+ --lesli-color-black-800: #0A0A0A;
1136
+ --lesli-color-black-900: #000000;
1137
+ --lesli-color-categorical-rose-100: #FEE8EC;
1138
+ --lesli-color-categorical-rose-300: #F5A3B5;
1139
+ --lesli-color-categorical-rose-500: #D24572;
1140
+ --lesli-color-categorical-rose-700: #90314E;
1141
+ --lesli-color-categorical-rose-900: #501C2B;
1142
+ --lesli-color-categorical-orange-100: #FCEBE0;
1143
+ --lesli-color-categorical-orange-300: #E8B08B;
1144
+ --lesli-color-categorical-orange-500: #C96E20;
1145
+ --lesli-color-categorical-orange-700: #834511;
1146
+ --lesli-color-categorical-orange-900: #49260A;
1147
+ --lesli-color-categorical-gold-100: #F6F2E3;
1148
+ --lesli-color-categorical-gold-300: #D9CB95;
1149
+ --lesli-color-categorical-gold-500: #B89D2B;
1150
+ --lesli-color-categorical-gold-700: #715F14;
1151
+ --lesli-color-categorical-gold-900: #3C320A;
1152
+ --lesli-color-categorical-lime-100: #EEF5E4;
1153
+ --lesli-color-categorical-lime-300: #BED499;
1154
+ --lesli-color-categorical-lime-500: #83A730;
1155
+ --lesli-color-categorical-lime-700: #526A1B;
1156
+ --lesli-color-categorical-lime-900: #2B380E;
1157
+ --lesli-color-categorical-teal-100: #E4F3ED;
1158
+ --lesli-color-categorical-teal-300: #97CBB8;
1159
+ --lesli-color-categorical-teal-500: #239576;
1160
+ --lesli-color-categorical-teal-700: #1D6651;
1161
+ --lesli-color-categorical-teal-900: #12382C;
1162
+ --lesli-color-categorical-cyan-100: #E3F2F4;
1163
+ --lesli-color-categorical-cyan-300: #94C9CF;
1164
+ --lesli-color-categorical-cyan-500: #22909B;
1165
+ --lesli-color-categorical-cyan-700: #15636B;
1166
+ --lesli-color-categorical-cyan-900: #0F373B;
1167
+ --lesli-color-categorical-sky-100: #E4F1FA;
1168
+ --lesli-color-categorical-sky-300: #97C4E4;
1169
+ --lesli-color-categorical-sky-500: #2B88C0;
1170
+ --lesli-color-categorical-sky-700: #215E83;
1171
+ --lesli-color-categorical-sky-900: #143448;
1172
+ --lesli-color-categorical-indigo-100: #E9EEFE;
1173
+ --lesli-color-categorical-indigo-300: #A6BBFA;
1174
+ --lesli-color-categorical-indigo-500: #526EE3;
1175
+ --lesli-color-categorical-indigo-700: #3D519F;
1176
+ --lesli-color-categorical-indigo-900: #212D58;
1177
+ --lesli-color-categorical-violet-100: #F1EBFE;
1178
+ --lesli-color-categorical-violet-300: #C7AFF4;
1179
+ --lesli-color-categorical-violet-500: #9260DA;
1180
+ --lesli-color-categorical-violet-700: #644394;
1181
+ --lesli-color-categorical-violet-900: #372552;
1182
+ --lesli-color-categorical-magenta-100: #FCE7F9;
1183
+ --lesli-color-categorical-magenta-300: #E6A4E0;
1184
+ --lesli-color-categorical-magenta-500: #BE47B8;
1185
+ --lesli-color-categorical-magenta-700: #82337D;
1186
+ --lesli-color-categorical-magenta-900: #481D45;
1187
+ --lesli-color-engine-administration-100: var(--lesli-color-categorical-sky-100);
1188
+ --lesli-color-engine-administration-300: var(--lesli-color-categorical-sky-300);
1189
+ --lesli-color-engine-administration-500: var(--lesli-color-categorical-sky-500);
1190
+ --lesli-color-engine-administration-700: var(--lesli-color-categorical-sky-700);
1191
+ --lesli-color-engine-administration-900: var(--lesli-color-categorical-sky-900);
1192
+ --lesli-color-engine-intelligence-100: var(--lesli-color-categorical-violet-100);
1193
+ --lesli-color-engine-intelligence-300: var(--lesli-color-categorical-violet-300);
1194
+ --lesli-color-engine-intelligence-500: var(--lesli-color-categorical-violet-500);
1195
+ --lesli-color-engine-intelligence-700: var(--lesli-color-categorical-violet-700);
1196
+ --lesli-color-engine-intelligence-900: var(--lesli-color-categorical-violet-900);
1197
+ --lesli-color-engine-productivity-100: var(--lesli-color-categorical-orange-100);
1198
+ --lesli-color-engine-productivity-300: var(--lesli-color-categorical-orange-300);
1199
+ --lesli-color-engine-productivity-500: var(--lesli-color-categorical-orange-500);
1200
+ --lesli-color-engine-productivity-700: var(--lesli-color-categorical-orange-700);
1201
+ --lesli-color-engine-productivity-900: var(--lesli-color-categorical-orange-900);
1202
+ --lesli-color-engine-integration-100: var(--lesli-color-categorical-magenta-100);
1203
+ --lesli-color-engine-integration-300: var(--lesli-color-categorical-magenta-300);
1204
+ --lesli-color-engine-integration-500: var(--lesli-color-categorical-magenta-500);
1205
+ --lesli-color-engine-integration-700: var(--lesli-color-categorical-magenta-700);
1206
+ --lesli-color-engine-integration-900: var(--lesli-color-categorical-magenta-900);
1207
+ --lesli-color-engine-analytics-100: var(--lesli-color-categorical-cyan-100);
1208
+ --lesli-color-engine-analytics-300: var(--lesli-color-categorical-cyan-300);
1209
+ --lesli-color-engine-analytics-500: var(--lesli-color-categorical-cyan-500);
1210
+ --lesli-color-engine-analytics-700: var(--lesli-color-categorical-cyan-700);
1211
+ --lesli-color-engine-analytics-900: var(--lesli-color-categorical-cyan-900);
1212
+ --lesli-color-engine-security-100: var(--lesli-color-categorical-indigo-100);
1213
+ --lesli-color-engine-security-300: var(--lesli-color-categorical-indigo-300);
1214
+ --lesli-color-engine-security-500: var(--lesli-color-categorical-indigo-500);
1215
+ --lesli-color-engine-security-700: var(--lesli-color-categorical-indigo-700);
1216
+ --lesli-color-engine-security-900: var(--lesli-color-categorical-indigo-900);
1217
+ --lesli-color-engine-finance-100: var(--lesli-color-categorical-gold-100);
1218
+ --lesli-color-engine-finance-300: var(--lesli-color-categorical-gold-300);
1219
+ --lesli-color-engine-finance-500: var(--lesli-color-categorical-gold-500);
1220
+ --lesli-color-engine-finance-700: var(--lesli-color-categorical-gold-700);
1221
+ --lesli-color-engine-finance-900: var(--lesli-color-categorical-gold-900);
1222
+ --lesli-color-engine-sales-100: var(--lesli-color-categorical-rose-100);
1223
+ --lesli-color-engine-sales-300: var(--lesli-color-categorical-rose-300);
1224
+ --lesli-color-engine-sales-500: var(--lesli-color-categorical-rose-500);
1225
+ --lesli-color-engine-sales-700: var(--lesli-color-categorical-rose-700);
1226
+ --lesli-color-engine-sales-900: var(--lesli-color-categorical-rose-900);
1227
+ --lesli-color-engine-it-100: var(--lesli-color-categorical-teal-100);
1228
+ --lesli-color-engine-it-300: var(--lesli-color-categorical-teal-300);
1229
+ --lesli-color-engine-it-500: var(--lesli-color-categorical-teal-500);
1230
+ --lesli-color-engine-it-700: var(--lesli-color-categorical-teal-700);
1231
+ --lesli-color-engine-it-900: var(--lesli-color-categorical-teal-900);
1232
+ --lesli-color-categorical-ruby-100: #F6E5E5;
1233
+ --lesli-color-categorical-ruby-300: #D89C9C;
1234
+ --lesli-color-categorical-ruby-500: #B23A3A;
1235
+ --lesli-color-categorical-ruby-700: #8E2E2E;
1236
+ --lesli-color-categorical-ruby-900: #5C1E1E;
1237
+ --lesli-color-categorical-ember-100: #F9EBDD;
1238
+ --lesli-color-categorical-ember-300: #E2B28D;
1239
+ --lesli-color-categorical-ember-500: #C86A2D;
1240
+ --lesli-color-categorical-ember-700: #A15625;
1241
+ --lesli-color-categorical-ember-900: #673617;
1242
+ --lesli-color-categorical-maize-100: #FBF2DF;
1243
+ --lesli-color-categorical-maize-300: #DAC18F;
1244
+ --lesli-color-categorical-maize-500: #B2852D;
1245
+ --lesli-color-categorical-maize-700: #926F25;
1246
+ --lesli-color-categorical-maize-900: #5C4217;
1247
+ --lesli-color-categorical-agave-100: #ECF2E7;
1248
+ --lesli-color-categorical-agave-300: #ACBDA2;
1249
+ --lesli-color-categorical-agave-500: #5D7C4D;
1250
+ --lesli-color-categorical-agave-700: #4F6942;
1251
+ --lesli-color-categorical-agave-900: #34442C;
1252
+ --lesli-color-categorical-jade-100: #E2F1EC;
1253
+ --lesli-color-categorical-jade-300: #91BBB1;
1254
+ --lesli-color-categorical-jade-500: #2D7A68;
1255
+ --lesli-color-categorical-jade-700: #256656;
1256
+ --lesli-color-categorical-jade-900: #143F33;
1257
+ --lesli-color-categorical-cenote-100: #E3F0F3;
1258
+ --lesli-color-categorical-cenote-300: #8FB8C4;
1259
+ --lesli-color-categorical-cenote-500: #1F6F8B;
1260
+ --lesli-color-categorical-cenote-700: #195D74;
1261
+ --lesli-color-categorical-cenote-900: #103B4A;
1262
+ --lesli-color-categorical-quetzal-100: #E8EBF6;
1263
+ --lesli-color-categorical-quetzal-300: #A1AED8;
1264
+ --lesli-color-categorical-quetzal-500: #4B5FA8;
1265
+ --lesli-color-categorical-quetzal-700: #3E4F8C;
1266
+ --lesli-color-categorical-quetzal-900: #283259;
1267
+ --lesli-color-categorical-bugambilia-100: #F5E6EE;
1268
+ --lesli-color-categorical-bugambilia-300: #D49AB5;
1269
+ --lesli-color-categorical-bugambilia-500: #A83E6F;
1270
+ --lesli-color-categorical-bugambilia-700: #8A345C;
1271
+ --lesli-color-categorical-bugambilia-900: #58213B;
1272
+ --lesli-color-categorical-cacao-100: #EFE8E3;
1273
+ --lesli-color-categorical-cacao-300: #B9A394;
1274
+ --lesli-color-categorical-cacao-500: #6B4A35;
1275
+ --lesli-color-categorical-cacao-700: #593E2C;
1276
+ --lesli-color-categorical-cacao-900: #38271C;
1277
+ --lesli-color-categorical-obsidian-100: #EAEEF2;
1278
+ --lesli-color-categorical-obsidian-300: #ABB4BD;
1279
+ --lesli-color-categorical-obsidian-500: #5F6C7D;
1280
+ --lesli-color-categorical-obsidian-700: #505B69;
1281
+ --lesli-color-categorical-obsidian-900: #313942;
1282
+ --lesli-color-ruby-100: var(--lesli-color-categorical-ruby-100);
1283
+ --lesli-color-ruby-300: var(--lesli-color-categorical-ruby-300);
1284
+ --lesli-color-ruby-500: var(--lesli-color-categorical-ruby-500);
1285
+ --lesli-color-ruby-700: var(--lesli-color-categorical-ruby-700);
1286
+ --lesli-color-ruby-900: var(--lesli-color-categorical-ruby-900);
1287
+ --lesli-color-ember-100: var(--lesli-color-categorical-ember-100);
1288
+ --lesli-color-ember-300: var(--lesli-color-categorical-ember-300);
1289
+ --lesli-color-ember-500: var(--lesli-color-categorical-ember-500);
1290
+ --lesli-color-ember-700: var(--lesli-color-categorical-ember-700);
1291
+ --lesli-color-ember-900: var(--lesli-color-categorical-ember-900);
1292
+ --lesli-color-maize-100: var(--lesli-color-categorical-maize-100);
1293
+ --lesli-color-maize-300: var(--lesli-color-categorical-maize-300);
1294
+ --lesli-color-maize-500: var(--lesli-color-categorical-maize-500);
1295
+ --lesli-color-maize-700: var(--lesli-color-categorical-maize-700);
1296
+ --lesli-color-maize-900: var(--lesli-color-categorical-maize-900);
1297
+ --lesli-color-agave-100: var(--lesli-color-categorical-agave-100);
1298
+ --lesli-color-agave-300: var(--lesli-color-categorical-agave-300);
1299
+ --lesli-color-agave-500: var(--lesli-color-categorical-agave-500);
1300
+ --lesli-color-agave-700: var(--lesli-color-categorical-agave-700);
1301
+ --lesli-color-agave-900: var(--lesli-color-categorical-agave-900);
1302
+ --lesli-color-jade-100: var(--lesli-color-categorical-jade-100);
1303
+ --lesli-color-jade-300: var(--lesli-color-categorical-jade-300);
1304
+ --lesli-color-jade-500: var(--lesli-color-categorical-jade-500);
1305
+ --lesli-color-jade-700: var(--lesli-color-categorical-jade-700);
1306
+ --lesli-color-jade-900: var(--lesli-color-categorical-jade-900);
1307
+ --lesli-color-cenote-100: var(--lesli-color-categorical-cenote-100);
1308
+ --lesli-color-cenote-300: var(--lesli-color-categorical-cenote-300);
1309
+ --lesli-color-cenote-500: var(--lesli-color-categorical-cenote-500);
1310
+ --lesli-color-cenote-700: var(--lesli-color-categorical-cenote-700);
1311
+ --lesli-color-cenote-900: var(--lesli-color-categorical-cenote-900);
1312
+ --lesli-color-quetzal-100: var(--lesli-color-categorical-quetzal-100);
1313
+ --lesli-color-quetzal-300: var(--lesli-color-categorical-quetzal-300);
1314
+ --lesli-color-quetzal-500: var(--lesli-color-categorical-quetzal-500);
1315
+ --lesli-color-quetzal-700: var(--lesli-color-categorical-quetzal-700);
1316
+ --lesli-color-quetzal-900: var(--lesli-color-categorical-quetzal-900);
1317
+ --lesli-color-bugambilia-100: var(--lesli-color-categorical-bugambilia-100);
1318
+ --lesli-color-bugambilia-300: var(--lesli-color-categorical-bugambilia-300);
1319
+ --lesli-color-bugambilia-500: var(--lesli-color-categorical-bugambilia-500);
1320
+ --lesli-color-bugambilia-700: var(--lesli-color-categorical-bugambilia-700);
1321
+ --lesli-color-bugambilia-900: var(--lesli-color-categorical-bugambilia-900);
1322
+ --lesli-color-cacao-100: var(--lesli-color-categorical-cacao-100);
1323
+ --lesli-color-cacao-300: var(--lesli-color-categorical-cacao-300);
1324
+ --lesli-color-cacao-500: var(--lesli-color-categorical-cacao-500);
1325
+ --lesli-color-cacao-700: var(--lesli-color-categorical-cacao-700);
1326
+ --lesli-color-cacao-900: var(--lesli-color-categorical-cacao-900);
1327
+ --lesli-color-obsidian-100: var(--lesli-color-categorical-obsidian-100);
1328
+ --lesli-color-obsidian-300: var(--lesli-color-categorical-obsidian-300);
1329
+ --lesli-color-obsidian-500: var(--lesli-color-categorical-obsidian-500);
1330
+ --lesli-color-obsidian-700: var(--lesli-color-categorical-obsidian-700);
1331
+ --lesli-color-obsidian-900: var(--lesli-color-categorical-obsidian-900);
1332
+ --lesli-color-collection-administration: var(--lesli-color-engine-administration-500);
1333
+ --lesli-color-collection-intelligence: var(--lesli-color-engine-intelligence-500);
1334
+ --lesli-color-collection-productivity: var(--lesli-color-engine-productivity-500);
1335
+ --lesli-color-collection-integration: var(--lesli-color-engine-integration-500);
1336
+ --lesli-color-collection-analytics: var(--lesli-color-engine-analytics-500);
1337
+ --lesli-color-collection-security: var(--lesli-color-engine-security-500);
1338
+ --lesli-color-collection-finance: var(--lesli-color-engine-finance-500);
1339
+ --lesli-color-collection-sales: var(--lesli-color-engine-sales-500);
1340
+ --lesli-color-collection-it: var(--lesli-color-engine-it-500);
1341
+ --lesli-color-blue-100: #E3F0F3;
1342
+ --lesli-color-blue-300: #8FB8C4;
1343
+ --lesli-color-blue-500: #1F6F8B;
1344
+ --lesli-color-blue-700: #195D74;
1345
+ --lesli-color-blue-900: #103B4A;
1346
+ --lesli-color-mint-100: #E2F1EC;
1347
+ --lesli-color-mint-300: #91BBB1;
1348
+ --lesli-color-mint-500: #2D7A68;
1349
+ --lesli-color-mint-700: #256656;
1350
+ --lesli-color-mint-900: #143F33;
1351
+ --lesli-color-lime-100: #ECF2E7;
1352
+ --lesli-color-lime-300: #ACBDA2;
1353
+ --lesli-color-lime-500: #5D7C4D;
1354
+ --lesli-color-lime-700: #4F6942;
1355
+ --lesli-color-lime-900: #34442C;
1356
+ --lesli-color-berry-100: #F6E5E5;
1357
+ --lesli-color-berry-300: #D89C9C;
1358
+ --lesli-color-berry-500: #B23A3A;
1359
+ --lesli-color-berry-700: #8E2E2E;
1360
+ --lesli-color-berry-900: #5C1E1E;
1361
+ --lesli-color-slate-100: #EFE8E3;
1362
+ --lesli-color-slate-300: #B9A394;
1363
+ --lesli-color-slate-500: #6B4A35;
1364
+ --lesli-color-slate-700: #593E2C;
1365
+ --lesli-color-slate-900: #38271C;
1366
+ --lesli-color-silver-100: #EAEEF2;
1367
+ --lesli-color-silver-300: #ABB4BD;
1368
+ --lesli-color-silver-500: #5F6C7D;
1369
+ --lesli-color-silver-700: #505B69;
1370
+ --lesli-color-silver-900: #313942;
1371
+ --lesli-color-banana-100: #FBF2DF;
1372
+ --lesli-color-banana-300: #DAC18F;
1373
+ --lesli-color-banana-500: #B2852D;
1374
+ --lesli-color-banana-700: #926F25;
1375
+ --lesli-color-banana-900: #5C4217;
1376
+ --lesli-color-primary: var(--lesli-theme-color-primary, #193d8d);
1377
+ --lesli-color-background: var(--lesli-theme-color-background, #f9f5f3);
1378
+ --lesli-header-color: var(--lesli-theme-header-color, white);
1379
+ --lesli-footer-color: var(--lesli-theme-footer-color, white);
1380
+ --lesli-sidebar-color: var(--lesli-theme-sidebar-color, white);
1381
+ --lesli-sidebar-width: var(--lesli-theme-sidebar-width, 50px);
1382
+ --lesli-navbar-color: var(--lesli-theme-navbar-color, white);
1383
+ --lesli-logo-color: var(--lesli-theme-logo-color, white);
1384
+ --lesli-font-size: var(--lesli-theme-font-size, 16px);
1385
+ --lesli-font-color: var(--lesli-theme-font-color, black);
1386
+ }
1387
+ @layer theme {
1388
+ :root {
1389
+ --lexxy-color-ink: oklch(20% 0 0);
1390
+ --lexxy-color-ink-medium: oklch(40% 0 0);
1391
+ --lexxy-color-ink-light: oklch(60% 0 0);
1392
+ --lexxy-color-ink-lighter: oklch(85% 0 0);
1393
+ --lexxy-color-ink-lightest: oklch(96% 0 0);
1394
+ --lexxy-color-ink-inverted: white;
1395
+ --lexxy-color-accent-dark: oklch(57% 0.19 260);
1396
+ --lexxy-color-accent-medium: oklch(75% 0.196 258);
1397
+ --lexxy-color-accent-light: oklch(88% 0.026 254);
1398
+ --lexxy-color-accent-lightest: oklch(92% 0.026 254);
1399
+ --lexxy-color-red: oklch(60% 0.15 27);
1400
+ --lexxy-color-green: oklch(60% 0.15 145);
1401
+ --lexxy-color-blue: oklch(66% 0.196 258);
1402
+ --lexxy-color-purple: oklch(60% 0.15 305);
1403
+ --lexxy-color-code-token-att: #d73a49;
1404
+ --lexxy-color-code-token-comment: #6a737d;
1405
+ --lexxy-color-code-token-function: #6f42c1;
1406
+ --lexxy-color-code-token-operator: #d73a49;
1407
+ --lexxy-color-code-token-property: #005cc5;
1408
+ --lexxy-color-code-token-punctuation: #24292e;
1409
+ --lexxy-color-code-token-selector: #22863a;
1410
+ --lexxy-color-code-token-variable: #e36209;
1411
+ --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
1412
+ --lexxy-color-text: var(--lexxy-color-ink);
1413
+ --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
1414
+ --lexxy-color-link: var(--lexxy-color-accent-dark);
1415
+ --lexxy-color-selected: var(--lexxy-color-accent-lightest);
1416
+ --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
1417
+ --lexxy-color-selected-dark: var(--lexxy-color-blue);
1418
+ --lexxy-color-selected-50: var(--lexxy-color-selected-dark);
1419
+ @supports (color: color-mix(in lab, red, red)) {
1420
+ --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
1421
+ }
1422
+ --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
1423
+ --lexxy-color-floating-controls-separator: rgba(128, 128, 128, 0.3);
1424
+ --highlight-1: rgb(136, 118, 38);
1425
+ --highlight-2: rgb(185, 94, 6);
1426
+ --highlight-3: rgb(207, 0, 0);
1427
+ --highlight-4: rgb(216, 28, 170);
1428
+ --highlight-5: rgb(144, 19, 254);
1429
+ --highlight-6: rgb(5, 98, 185);
1430
+ --highlight-7: rgb(17, 138, 15);
1431
+ --highlight-8: rgb(148, 82, 22);
1432
+ --highlight-9: rgb(102, 102, 102);
1433
+ --highlight-bg-1: rgba(229, 223, 6, 0.3);
1434
+ --highlight-bg-2: rgba(255, 185, 87, 0.3);
1435
+ --highlight-bg-3: rgba(255, 118, 118, 0.3);
1436
+ --highlight-bg-4: rgba(248, 137, 216, 0.3);
1437
+ --highlight-bg-5: rgba(190, 165, 255, 0.3);
1438
+ --highlight-bg-6: rgba(124, 192, 252, 0.3);
1439
+ --highlight-bg-7: rgba(140, 255, 129, 0.3);
1440
+ --highlight-bg-8: rgba(221, 170, 123, 0.3);
1441
+ --highlight-bg-9: rgba(200, 200, 200, 0.3);
1442
+ --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
1443
+ --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
1444
+ --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
1445
+ --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
1446
+ --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
1447
+ --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
1448
+ --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
1449
+ --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
1450
+ --lexxy-table-cell-add-size: 4px;
1451
+ --lexxy-font-base: system-ui, sans-serif;
1452
+ --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
1453
+ --lexxy-text-small: 0.875rem;
1454
+ --lexxy-content-margin: 1rem;
1455
+ --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
1456
+ --lexxy-focus-ring-offset: -2px;
1457
+ --lexxy-focus-ring-size: 2px;
1458
+ --lexxy-toolbar-button-size: 2lh;
1459
+ --lexxy-radius: 0.5ch;
1460
+ --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1461
+ --lexxy-z-popup: 1000;
1462
+ }
1463
+ }
1464
+ @layer components {
1465
+ @import url("lexxy-variables.css");
1466
+ :where(.lexxy-content) {
1467
+ color: var(--lexxy-color-ink);
1468
+ h1, h2, h3, h4, h5, h6 {
1469
+ display: block;
1470
+ font-weight: bold;
1471
+ hyphens: auto;
1472
+ margin-block: 0 var(--lexxy-content-margin);
1473
+ overflow-wrap: break-word;
1474
+ @supports (text-wrap: balance) {
1475
+ text-wrap: balance;
1476
+ }
1477
+ }
1478
+ h1 {
1479
+ font-size: 2rem;
1480
+ }
1481
+ h2 {
1482
+ font-size: 1.5rem;
1483
+ }
1484
+ h3 {
1485
+ font-size: 1.25rem;
1486
+ }
1487
+ h4 {
1488
+ font-size: 1rem;
1489
+ }
1490
+ h5 {
1491
+ font-size: 0.875rem;
1492
+ }
1493
+ h6 {
1494
+ font-size: 0.75rem;
1495
+ }
1496
+ p, ul, ol, dl, blockquote, figure, .attachment, .attachment-gallery {
1497
+ margin-block: 0 var(--lexxy-content-margin);
1498
+ position: relative;
1499
+ &:not(lexxy-editor &) {
1500
+ overflow-wrap: break-word;
1501
+ @supports (text-wrap: pretty) {
1502
+ text-wrap: pretty;
1503
+ }
1504
+ }
1505
+ }
1506
+ .lexxy-content__italic {
1507
+ font-style: italic;
1508
+ }
1509
+ .lexxy-content__bold {
1510
+ font-weight: bold;
1511
+ }
1512
+ .lexxy-content__strikethrough {
1513
+ text-decoration: line-through;
1514
+ }
1515
+ .lexxy-content__underline {
1516
+ text-decoration: underline;
1517
+ }
1518
+ .lexxy-content__strikethrough.lexxy-content__underline {
1519
+ text-decoration: line-through underline;
1520
+ }
1521
+ mark, .lexxy-content__highlight {
1522
+ background-color: transparent;
1523
+ color: inherit;
1524
+ }
1525
+ blockquote {
1526
+ border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
1527
+ font-style: italic;
1528
+ margin: var(--lexxy-content-margin) 0;
1529
+ padding: 0.5lh 2ch;
1530
+ p:last-child {
1531
+ margin-block-end: 0;
1532
+ }
1533
+ }
1534
+ p:empty {
1535
+ display: none;
1536
+ }
1537
+ a {
1538
+ color: var(--lexxy-color-link);
1539
+ text-decoration: underline;
1540
+ }
1541
+ img, video, embed, object {
1542
+ inline-size: auto;
1543
+ margin-inline: auto;
1544
+ max-block-size: 32rem;
1545
+ object-fit: contain;
1546
+ a:has(&) {
1547
+ display: inline-block;
1548
+ }
1549
+ }
1550
+ code, pre {
1551
+ background-color: var(--lexxy-color-ink-lightest);
1552
+ border-radius: var(--lexxy-radius);
1553
+ color: var(--lexxy-color-ink);
1554
+ font-family: var(--lexxy-font-mono);
1555
+ font-size: 0.9em;
1556
+ padding: 0.25ch 0.5ch;
1557
+ &:is(pre), &[data-language] {
1558
+ border-radius: var(--lexxy-radius);
1559
+ display: block;
1560
+ hyphens: none;
1561
+ margin-block: 0 var(--lexxy-content-margin);
1562
+ overflow-x: auto;
1563
+ overflow-wrap: break-word;
1564
+ padding: 1ch;
1565
+ tab-size: 2;
1566
+ white-space: pre;
1567
+ @supports (text-wrap: nowrap) {
1568
+ text-wrap: nowrap;
1569
+ }
1570
+ }
1571
+ }
1572
+ ol, ul:not(.lexxy-prompt-menu) {
1573
+ margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
1574
+ padding: 0;
1575
+ }
1576
+ ul {
1577
+ list-style-type: disc;
1578
+ }
1579
+ ol {
1580
+ list-style-type: decimal;
1581
+ }
1582
+ li.lexxy-nested-listitem {
1583
+ list-style-type: none;
1584
+ ol, ul {
1585
+ margin-block-end: 0;
1586
+ }
1587
+ }
1588
+ hr {
1589
+ border: 0;
1590
+ border-block-end: 1px solid currentColor;
1591
+ inline-size: 20%;
1592
+ margin: calc(0.5em + var(--lexxy-content-margin)) 0;
1593
+ }
1594
+ .horizontal-divider {
1595
+ margin: 0;
1596
+ padding: calc(0.5em + var(--lexxy-content-margin)) 0;
1597
+ hr {
1598
+ margin: 0;
1599
+ }
1600
+ }
1601
+ *:has(+ .horizontal-divider) {
1602
+ margin-block-end: 0;
1603
+ }
1604
+ > :last-child {
1605
+ margin-block-end: 0;
1606
+ }
1607
+ .code-token__attr, .token.attr-name, .token.atrule, .token.attr, .token.keyword {
1608
+ color: var(--lexxy-color-code-token-att);
1609
+ }
1610
+ .code-token__property, .token.boolean, .token.constant, .token.number, .token.property, .token.symbol, .token.tag {
1611
+ color: var(--lexxy-color-code-token-property);
1612
+ }
1613
+ .code-token__selector, .token.attr-value, .token.builtin, .token.char, .token.inserted, .token.line, .token.selector, .token.string {
1614
+ color: var(--lexxy-color-code-token-selector);
1615
+ }
1616
+ .code-token__comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
1617
+ color: var(--lexxy-color-code-token-comment);
1618
+ font-style: italic;
1619
+ }
1620
+ .code-token__operator, .token.deleted, .token.entity, .token.operator, .token.url, code[data-language="diff"] .code-token__operator + .code-token__selector {
1621
+ color: var(--lexxy-color-code-token-operator);
1622
+ }
1623
+ .code-token__function, .token.class, .token.class-name, .token.function {
1624
+ color: var(--lexxy-color-code-token-function);
1625
+ }
1626
+ .code-token__variable, .token.important, .token.namespace, .token.regex, .token.variable {
1627
+ color: var(--lexxy-color-code-token-variable);
1628
+ }
1629
+ .code-token__punctuation, .token.punctuation {
1630
+ color: var(--lexxy-color-code-token-punctuation);
1631
+ }
1632
+ :where(.lexxy-content__table-wrapper) {
1633
+ margin: 0;
1634
+ margin-block: 1ch;
1635
+ overflow-x: auto;
1636
+ }
1637
+ table {
1638
+ border-collapse: collapse;
1639
+ border-spacing: 0;
1640
+ inline-size: calc(100% - 0.5ch);
1641
+ margin: 0.25ch;
1642
+ th, td {
1643
+ border: 1px solid var(--lexxy-color-ink-lighter);
1644
+ min-width: 5ch;
1645
+ max-width: 50ch;
1646
+ padding: 1ch;
1647
+ text-align: start;
1648
+ word-break: normal;
1649
+ *:last-child {
1650
+ margin-block-end: 0;
1651
+ }
1652
+ &.lexxy-content__table-cell--header {
1653
+ background-color: var(--lexxy-color-table-header-bg);
1654
+ font-weight: bold;
1655
+ }
1656
+ *:is(code, pre) {
1657
+ hyphens: auto;
1658
+ white-space: pre-wrap;
1659
+ @supports (text-wrap: wrap) {
1660
+ text-wrap: wrap;
1661
+ }
1662
+ }
1663
+ }
1664
+ }
1665
+ p:has(.attachment) {
1666
+ text-align: center;
1667
+ }
1668
+ .attachment {
1669
+ --lexxy-attachment-gap: 0.75ch;
1670
+ block-size: auto;
1671
+ box-sizing: border-box;
1672
+ border-radius: var(--lexxy-radius);
1673
+ display: block;
1674
+ inline-size: fit-content;
1675
+ margin-inline: auto;
1676
+ max-inline-size: 100%;
1677
+ min-inline-size: 10ch;
1678
+ padding: var(--lexxy-attachment-gap);
1679
+ position: relative;
1680
+ text-align: center;
1681
+ }
1682
+ .attachment__caption {
1683
+ color: var(--lexxy-color-text-subtle);
1684
+ display: block;
1685
+ font-size: var(--lexxy-text-small);
1686
+ padding: 1ch;
1687
+ }
1688
+ .attachment__icon {
1689
+ aspect-ratio: 4/5;
1690
+ background-color: transparent;
1691
+ @supports (color: color-mix(in lab, red, red)) {
1692
+ background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
1693
+ }
1694
+ block-size: 3lh;
1695
+ border: 1px solid var(--lexxy-attachment-icon-color);
1696
+ border-block-start-width: 1.5ch;
1697
+ border-radius: var(--lexxy-radius);
1698
+ box-sizing: border-box;
1699
+ color: var(--lexxy-attachment-icon-color);
1700
+ display: grid;
1701
+ font-size: var(--lexxy-text-small);
1702
+ font-weight: bold;
1703
+ inline-size: auto;
1704
+ overflow: hidden;
1705
+ place-content: center;
1706
+ text-transform: uppercase;
1707
+ white-space: nowrap;
1708
+ }
1709
+ .attachment--preview {
1710
+ img, video {
1711
+ border-radius: var(--lexxy-radius);
1712
+ block-size: auto;
1713
+ display: block;
1714
+ margin-inline: auto;
1715
+ max-inline-size: 100%;
1716
+ -webkit-user-select: none;
1717
+ @supports (user-select: none) {
1718
+ user-select: none;
1719
+ }
1720
+ }
1721
+ > a {
1722
+ display: block;
1723
+ }
1724
+ .attachment__caption {
1725
+ padding-block-end: 0.5ch;
1726
+ }
1727
+ }
1728
+ .attachment--file {
1729
+ --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
1730
+ align-items: center;
1731
+ display: flex;
1732
+ flex-wrap: wrap;
1733
+ inline-size: auto;
1734
+ .attachment__caption {
1735
+ display: grid;
1736
+ flex: 1;
1737
+ text-align: start;
1738
+ }
1739
+ .attachment__name {
1740
+ color: var(--lexxy-color-ink);
1741
+ font-weight: bold;
1742
+ }
1743
+ }
1744
+ .attachment--psd, .attachment--key, .attachment--sketch, .attachment--ai, .attachment--eps, .attachment--indd, .attachment--svg, .attachment--ppt, .attachment--pptx {
1745
+ --lexxy-attachment-icon-color: var(--lexxy-color-red);
1746
+ }
1747
+ .attachment--css, .attachment--php, .attachment--json, .attachment--htm, .attachment--html, .attachment--rb, .attachment--erb, .attachment--ts, .attachment--js {
1748
+ --lexxy-attachment-icon-color: var(--lexxy-color-purple);
1749
+ }
1750
+ .attachment--txt, .attachment--pages, .attachment--rtf, .attachment--md, .attachment--doc, .attachment--docx {
1751
+ --lexxy-attachment-icon-color: var(--lexxy-color-blue);
1752
+ }
1753
+ .attachment--csv, .attachment--numbers, .attachment--xls, .attachment--xlsx {
1754
+ --lexxy-attachment-icon-color: var(--lexxy-color-green);
1755
+ }
1756
+ .attachment--error {
1757
+ padding-block: 2ch;
1758
+ }
1759
+ .attachment-gallery {
1760
+ display: block;
1761
+ text-align: center;
1762
+ .attachment {
1763
+ display: inline-flex;
1764
+ flex-direction: column;
1765
+ gap: 0;
1766
+ inline-size: calc(33.333% - 0.8ch);
1767
+ vertical-align: top;
1768
+ .attachment__caption {
1769
+ padding-block-end: 1ch;
1770
+ }
1771
+ }
1772
+ &.attachment-gallery--2, &.attachment-gallery--4 {
1773
+ .attachment {
1774
+ inline-size: calc(50% - 0.8ch);
1775
+ }
1776
+ }
1777
+ }
1778
+ action-text-attachment[content-type^="application/vnd.actiontext"] {
1779
+ --lexxy-attachment-bg-color: transparent;
1780
+ --lexxy-attachment-image-size: 1em;
1781
+ --lexxy-attachment-text-color: currentColor;
1782
+ align-items: center;
1783
+ background: var(--lexxy-attachment-bg-color);
1784
+ border-radius: var(--lexxy-radius);
1785
+ color: var(--lexxy-attachment-text-color);
1786
+ display: inline-flex;
1787
+ gap: 0.25ch;
1788
+ margin: 0;
1789
+ padding: 0;
1790
+ position: relative;
1791
+ white-space: normal;
1792
+ img {
1793
+ block-size: var(--lexxy-attachment-image-size);
1794
+ border-radius: 50%;
1795
+ inline-size: var(--lexxy-attachment-image-size);
1796
+ }
1797
+ }
1798
+ .horizontal-divider {
1799
+ margin: 0;
1800
+ margin-block-end: .5em;
1801
+ padding: 1.5em 0 .5em;
1802
+ hr {
1803
+ border: 0;
1804
+ border-block-end: 1px solid currentColor;
1805
+ inline-size: 20%;
1806
+ margin: 0;
1807
+ }
1808
+ }
1809
+ }
1810
+ @import url("lexxy-variables.css");
1811
+ :where(lexxy-editor) {
1812
+ --lexxy-editor-padding: 1ch;
1813
+ --lexxy-editor-rows: 8lh;
1814
+ @supports (min-block-size: attr(rows lh)) {
1815
+ --lexxy-editor-rows: attr(rows lh, 8lh);
1816
+ }
1817
+ --lexxy-toolbar-gap: 2px;
1818
+ --lexxy-toolbar-spacing: 0.5ch;
1819
+ --lexxy-toolbar-padding: 2px;
1820
+ --lexxy-toolbar-border-size: 1px;
1821
+ --lexxy-toolbar-height: calc(var(--lexxy-toolbar-button-size) + 2 * var(--lexxy-toolbar-padding) + var(--lexxy-toolbar-border-size));
1822
+ border: 1px solid var(--lexxy-color-ink-lighter);
1823
+ border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
1824
+ background-color: var(--lexxy-color-canvas);
1825
+ container-type: inline-size;
1826
+ display: block;
1827
+ overflow: visible;
1828
+ position: relative;
1829
+ transition: opacity 150ms;
1830
+ p.provisional-paragraph {
1831
+ display: block;
1832
+ &.hidden {
1833
+ block-size: 0.5ch;
1834
+ margin: 0;
1835
+ }
1836
+ }
1837
+ input, button, summary {
1838
+ &:focus-visible {
1839
+ outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
1840
+ outline-offset: var(--lexxy-focus-ring-offset);
1841
+ }
1842
+ }
1843
+ summary {
1844
+ list-style: none;
1845
+ &::-webkit-details-marker {
1846
+ display: none;
1847
+ }
1848
+ }
1849
+ button, summary {
1850
+ -webkit-appearance: none;
1851
+ appearance: none;
1852
+ background: var(--lexxy-color-canvas);
1853
+ border: none;
1854
+ border-radius: var(--lexxy-radius);
1855
+ cursor: pointer;
1856
+ line-height: normal;
1857
+ font-size: inherit;
1858
+ inline-size: auto;
1859
+ padding: 0;
1860
+ @media (any-hover: hover) {
1861
+ &:hover:not([aria-disabled="true"]) {
1862
+ background: var(--lexxy-color-ink-lightest);
1863
+ }
1864
+ }
1865
+ }
1866
+ .node--selected {
1867
+ outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
1868
+ outline-offset: var(--lexxy-focus-ring-offset);
1869
+ }
1870
+ &[data-links-openable] a {
1871
+ cursor: pointer;
1872
+ }
1873
+ table {
1874
+ th, td {
1875
+ position: relative;
1876
+ transition: all 0.1s ease-in-out;
1877
+ &:after {
1878
+ box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
1879
+ content: "";
1880
+ display: block;
1881
+ inset-block-start: -1px;
1882
+ inset-block-end: -1px;
1883
+ inset-inline-start: -1px;
1884
+ inset-inline-end: -1px;
1885
+ pointer-events: none;
1886
+ position: absolute;
1887
+ transition: box-shadow 0.1s ease-in-out;
1888
+ z-index: 2;
1889
+ }
1890
+ &.lexxy-content__table-cell--selected {
1891
+ background-color: var(--lexxy-color-table-cell-selected-bg);
1892
+ }
1893
+ &.lexxy-content__table-cell--focus {
1894
+ &:after {
1895
+ box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
1896
+ }
1897
+ }
1898
+ &.lexxy-content__table-cell--highlight {
1899
+ &[data-action="insert"] {
1900
+ &[data-child-type="row"] {
1901
+ &[data-direction="after"] {
1902
+ &:after {
1903
+ box-shadow: 0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add), 0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
1904
+ }
1905
+ }
1906
+ &[data-direction="before"] {
1907
+ &:after {
1908
+ box-shadow: 0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add), 0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
1909
+ }
1910
+ }
1911
+ }
1912
+ &[data-child-type="column"] {
1913
+ &[data-direction="after"] {
1914
+ &:after {
1915
+ box-shadow: var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add), calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
1916
+ }
1917
+ }
1918
+ &[data-direction="before"] {
1919
+ &:after {
1920
+ box-shadow: calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add), var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
1921
+ }
1922
+ }
1923
+ }
1924
+ }
1925
+ &[data-action="delete"] {
1926
+ background-color: var(--lexxy-color-table-cell-remove);
1927
+ color: var(--lexxy-color-red);
1928
+ &:after {
1929
+ box-shadow: 0 0 0 0 transparent;
1930
+ }
1931
+ }
1932
+ &[data-action="toggle"] {
1933
+ background-color: var(--lexxy-color-table-cell-toggle);
1934
+ &:after {
1935
+ box-shadow: 0 0 0 0 transparent;
1936
+ }
1937
+ }
1938
+ }
1939
+ }
1940
+ tr.lexxy-content__table-cell--highlight[data-action="delete"] {
1941
+ th, td {
1942
+ background-color: var(--lexxy-color-table-cell-remove);
1943
+ color: var(--lexxy-color-red);
1944
+ &:after {
1945
+ box-shadow: 0 0 0 0 transparent;
1946
+ }
1947
+ }
1948
+ }
1949
+ &.lexxy-content__table--selection {
1950
+ ::selection {
1951
+ background: transparent;
1952
+ }
1953
+ }
1954
+ }
1955
+ &:has(.lexxy-content__table-cell--selected) {
1956
+ lexxy-table-tools {
1957
+ visibility: hidden;
1958
+ }
1959
+ }
1960
+ [data-lexical-linebreak] {
1961
+ block-size: 0;
1962
+ display: contents;
1963
+ inline-size: 0;
1964
+ }
1965
+ action-text-attachment {
1966
+ cursor: pointer;
1967
+ }
1968
+ .attachment {
1969
+ background-color: var(--lexxy-color-canvas);
1970
+ progress {
1971
+ max-inline-size: 10ch;
1972
+ margin: auto;
1973
+ }
1974
+ &.attachment--preview {
1975
+ progress {
1976
+ inset-block-start: 2ch;
1977
+ inset-inline-start: 0;
1978
+ inset-inline-end: 0;
1979
+ position: absolute;
1980
+ }
1981
+ }
1982
+ &.attachment--error {
1983
+ background: transparent;
1984
+ @supports (color: color-mix(in lab, red, red)) {
1985
+ background: color-mix(var(--lexxy-color-red) 10%, transparent);
1986
+ }
1987
+ padding: 2ch;
1988
+ &:before {
1989
+ align-items: center;
1990
+ aspect-ratio: 1;
1991
+ background: var(--lexxy-color-red);
1992
+ block-size: 1.5lh;
1993
+ border-radius: 50%;
1994
+ color: white;
1995
+ content: "!";
1996
+ display: flex;
1997
+ justify-content: center;
1998
+ margin: auto;
1999
+ }
2000
+ > div {
2001
+ flex: 1;
2002
+ font-size: 0.85em;
2003
+ padding: 1ch;
2004
+ text-align: start;
2005
+ }
2006
+ }
2007
+ }
2008
+ .attachment[draggable] {
2009
+ cursor: grab;
2010
+ }
2011
+ .attachment.lexxy-dragging {
2012
+ opacity: 0.4;
2013
+ }
2014
+ [data-lexxy-decorator][draggable] {
2015
+ cursor: grab;
2016
+ }
2017
+ [data-lexxy-decorator].lexxy-dragging {
2018
+ opacity: 0.4;
2019
+ }
2020
+ .lexxy-drop-caret {
2021
+ background-color: var(--lexxy-focus-ring-color);
2022
+ border-radius: 1px;
2023
+ inline-size: 2px;
2024
+ pointer-events: none;
2025
+ position: fixed;
2026
+ }
2027
+ [class*="lexxy-drop-target--"] {
2028
+ position: relative;
2029
+ }
2030
+ .lexxy-drop-target--block-before::before, .lexxy-drop-target--block-after::after, .lexxy-drop-target--list-before::before, .lexxy-drop-target--list-after::after {
2031
+ background-color: var(--lexxy-focus-ring-color);
2032
+ block-size: 3px;
2033
+ border-radius: 1px;
2034
+ content: "";
2035
+ inset-inline: 0;
2036
+ pointer-events: none;
2037
+ position: absolute;
2038
+ transform: translate(0, 0.5ch);
2039
+ }
2040
+ .lexxy-drop-target--block-before::before, .lexxy-drop-target--list-before::before {
2041
+ transform: translate(0, -0.5ch);
2042
+ }
2043
+ .lexxy-drop-target--block-before::before, .lexxy-drop-target--list-before::before {
2044
+ inset-block-start: -2px;
2045
+ }
2046
+ .lexxy-drop-target--block-after::after, .lexxy-drop-target--list-after::after {
2047
+ inset-block-end: -2px;
2048
+ }
2049
+ .lexxy-drop-target--gallery-before::before, .lexxy-drop-target--gallery-after::after {
2050
+ background-color: var(--lexxy-focus-ring-color);
2051
+ border-radius: 1px;
2052
+ content: "";
2053
+ inset-block: 0;
2054
+ inline-size: 3px;
2055
+ pointer-events: none;
2056
+ position: absolute;
2057
+ }
2058
+ .lexxy-drop-target--gallery-before::before {
2059
+ inset-inline-start: -4px;
2060
+ }
2061
+ .lexxy-drop-target--gallery-after::after {
2062
+ inset-inline-end: -4px;
2063
+ }
2064
+ .attachment:hover:not(.node--selected) {
2065
+ outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
2066
+ @supports (color: color-mix(in lab, red, red)) {
2067
+ outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
2068
+ }
2069
+ outline-offset: var(--lexxy-focus-ring-offset);
2070
+ }
2071
+ .attachment-gallery {
2072
+ --lexxy-attachment-gallery-columns: 3;
2073
+ --lexxy-attachment-gallery-gap: 0.4ch;
2074
+ --lexxy-focus-ring-offset: -6px;
2075
+ padding: 0;
2076
+ .attachment {
2077
+ background: transparent;
2078
+ box-sizing: border-box;
2079
+ margin: var(--lexxy-attachment-gallery-gap);
2080
+ padding: 0;
2081
+ padding-block-end: var(--lexxy-attachment-gap);
2082
+ vertical-align: top;
2083
+ img {
2084
+ box-sizing: border-box;
2085
+ padding: 1ch;
2086
+ padding-block-end: 0;
2087
+ }
2088
+ &.attachment--error {
2089
+ background: transparent;
2090
+ @supports (color: color-mix(in lab, red, red)) {
2091
+ background: color-mix(var(--lexxy-color-red) 10%, transparent);
2092
+ }
2093
+ padding: 2ch;
2094
+ > div {
2095
+ text-align: center;
2096
+ }
2097
+ }
2098
+ }
2099
+ }
2100
+ .attachment__caption--editable {
2101
+ box-sizing: border-box;
2102
+ cursor: text;
2103
+ .attachment__caption-text {
2104
+ display: block;
2105
+ min-block-size: 1lh;
2106
+ overflow-wrap: anywhere;
2107
+ white-space: pre-wrap;
2108
+ text-align: center;
2109
+ }
2110
+ &[data-placeholder] .attachment__caption-text {
2111
+ overflow: hidden;
2112
+ text-overflow: ellipsis;
2113
+ white-space: nowrap;
2114
+ }
2115
+ }
2116
+ .attachment__caption--editing .attachment__caption-text {
2117
+ display: none;
2118
+ }
2119
+ }
2120
+ :where(lexxy-editor:not(:defined)) {
2121
+ min-block-size: calc(var(--lexxy-toolbar-height) + var(--lexxy-editor-rows) + 2 * var(--lexxy-editor-padding));
2122
+ }
2123
+ :where(.lexxy-editor--empty) .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
2124
+ content: attr(placeholder);
2125
+ color: currentColor;
2126
+ cursor: text;
2127
+ opacity: 0.66;
2128
+ pointer-events: none;
2129
+ position: absolute;
2130
+ white-space: pre-line;
2131
+ }
2132
+ :where(.lexxy-editor__content) {
2133
+ min-block-size: var(--lexxy-editor-rows);
2134
+ outline: 0;
2135
+ padding: var(--lexxy-editor-padding);
2136
+ contain: layout style;
2137
+ }
2138
+ :where(.lexxy-editor--drag-over) {
2139
+ background-color: var(--lexxy-color-selected);
2140
+ border-radius: var(--lexxy-radius);
2141
+ outline: 2px dashed var(--lexxy-color-selected-dark);
2142
+ }
2143
+ :where([data-lexical-cursor]) {
2144
+ animation: blink 1s infinite;
2145
+ block-size: 1lh;
2146
+ border-inline-start: 1.5px solid currentColor;
2147
+ line-height: inherit;
2148
+ margin-block: 0 var(--lexxy-content-margin);
2149
+ }
2150
+ @keyframes blink {
2151
+ 0% {
2152
+ opacity: 1;
2153
+ }
2154
+ 60% {
2155
+ opacity: 1;
2156
+ }
2157
+ 100% {
2158
+ opacity: 0;
2159
+ }
2160
+ }
2161
+ :where(lexxy-toolbar) {
2162
+ --lexxy-toolbar-icon-size: 1.125em;
2163
+ border-block-end: var(--lexxy-toolbar-border-size) solid var(--lexxy-color-ink-lighter);
2164
+ color: currentColor;
2165
+ display: flex;
2166
+ font-size: inherit;
2167
+ gap: var(--lexxy-toolbar-gap);
2168
+ max-inline-size: 100%;
2169
+ padding: var(--lexxy-toolbar-padding);
2170
+ position: relative;
2171
+ @container (width < 300px) {
2172
+ font-size: 0.8em;
2173
+ }
2174
+ &[data-attachments="false"] button[name="image"], &[data-attachments="false"] button[name="file"] {
2175
+ display: none;
2176
+ }
2177
+ &[data-upload="file"] button[name="image"] {
2178
+ display: none;
2179
+ }
2180
+ &[data-upload="image"] button[name="file"] {
2181
+ display: none;
2182
+ }
2183
+ .lexxy-editor__toolbar-button {
2184
+ aspect-ratio: 1;
2185
+ block-size: var(--lexxy-toolbar-button-size);
2186
+ border: 0;
2187
+ border-radius: var(--lexxy-radius);
2188
+ color: currentColor;
2189
+ display: grid;
2190
+ line-height: inherit;
2191
+ place-items: center;
2192
+ &:is(:active):not([aria-disabled="true"]), &[aria-pressed="true"] {
2193
+ background-color: var(--lexxy-color-selected);
2194
+ &:hover {
2195
+ background-color: var(--lexxy-color-selected-hover);
2196
+ }
2197
+ }
2198
+ &[aria-disabled="true"] {
2199
+ cursor: default;
2200
+ opacity: 0.3;
2201
+ }
2202
+ svg {
2203
+ -webkit-touch-callout: none;
2204
+ block-size: var(--lexxy-toolbar-icon-size);
2205
+ fill: currentColor;
2206
+ grid-area: 1/1;
2207
+ inline-size: var(--lexxy-toolbar-icon-size);
2208
+ -webkit-user-select: none;
2209
+ @supports (user-select: none) {
2210
+ user-select: none;
2211
+ }
2212
+ }
2213
+ &.lexxy-editor__toolbar-group-end {
2214
+ position: relative;
2215
+ margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);
2216
+ &:after {
2217
+ background-color: var(--lexxy-color-ink-lighter);
2218
+ block-size: var(--lexxy-toolbar-icon-size);
2219
+ content: "";
2220
+ display: block;
2221
+ inline-size: 1px;
2222
+ inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
2223
+ inset-block: 0;
2224
+ margin: auto;
2225
+ pointer-events: none;
2226
+ position: absolute;
2227
+ }
2228
+ }
2229
+ }
2230
+ .lexxy-editor__toolbar-button--push-right {
2231
+ margin-inline-start: auto;
2232
+ }
2233
+ }
2234
+ :where(.lexxy-editor__toolbar-dropdown) {
2235
+ -webkit-user-select: none;
2236
+ @supports (user-select: none) {
2237
+ user-select: none;
2238
+ }
2239
+ .lexxy-editor__toolbar-button {
2240
+ color: currentColor;
2241
+ &:hover {
2242
+ opacity: 0.8;
2243
+ }
2244
+ &.lexxy-editor__toolbar-button--chevron {
2245
+ aspect-ratio: unset;
2246
+ gap: 0.5ch;
2247
+ grid-template-columns: 2fr 1fr;
2248
+ min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
2249
+ padding-inline: 0.75ch;
2250
+ &:after {
2251
+ block-size: 0.3ch;
2252
+ border-block-end: 2px solid currentColor;
2253
+ border-inline-end: 2px solid currentColor;
2254
+ content: "";
2255
+ display: inline-block;
2256
+ inline-size: 0.3ch;
2257
+ transform: rotate(45deg);
2258
+ }
2259
+ }
2260
+ }
2261
+ > .lexxy-editor__toolbar-button[aria-expanded="true"] {
2262
+ background-color: var(--lexxy-color-selected-hover);
2263
+ border-end-end-radius: 0;
2264
+ border-end-start-radius: 0;
2265
+ &:hover {
2266
+ background-color: var(--lexxy-color-selected-hover);
2267
+ }
2268
+ }
2269
+ [data-dropdown-panel] {
2270
+ background-color: var(--lexxy-color-canvas);
2271
+ border: 2px solid var(--lexxy-color-selected-hover);
2272
+ border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
2273
+ box-sizing: border-box;
2274
+ box-shadow: var(--lexxy-shadow);
2275
+ color: var(--lexxy-color-text);
2276
+ display: flex;
2277
+ gap: var(--lexxy-toolbar-gap);
2278
+ margin: 0;
2279
+ padding: var(--lexxy-toolbar-spacing);
2280
+ position: absolute;
2281
+ z-index: 3;
2282
+ &[hidden], [overflowing] &[hidden] {
2283
+ display: none;
2284
+ }
2285
+ }
2286
+ .lexxy-editor__toolbar-dropdown-list {
2287
+ border-start-start-radius: 0;
2288
+ flex-direction: column;
2289
+ padding: 0.1ch;
2290
+ button {
2291
+ align-items: center;
2292
+ color: var(--lexxy-color-text);
2293
+ display: flex;
2294
+ flex-direction: row;
2295
+ gap: 1ch;
2296
+ padding: 1ch;
2297
+ position: relative;
2298
+ &[aria-checked="true"] {
2299
+ background-color: var(--lexxy-color-selected);
2300
+ &:hover {
2301
+ background-color: var(--lexxy-color-selected-hover);
2302
+ }
2303
+ }
2304
+ span {
2305
+ font-size: var(--lexxy-text-small);
2306
+ }
2307
+ svg {
2308
+ block-size: 1lh;
2309
+ fill: currentColor;
2310
+ inline-size: 1lh;
2311
+ }
2312
+ }
2313
+ .lexxy-editor__toolbar-separator {
2314
+ background: var(--lexxy-color-ink-lighter);
2315
+ block-size: 1px;
2316
+ inline-size: 100%;
2317
+ }
2318
+ [overflowing] & {
2319
+ display: grid;
2320
+ grid-template-columns: repeat(4, 1fr);
2321
+ button span {
2322
+ display: none;
2323
+ }
2324
+ .lexxy-editor__toolbar-separator {
2325
+ grid-column: 1 / -1;
2326
+ }
2327
+ }
2328
+ }
2329
+ &.lexxy-editor__toolbar-overflow {
2330
+ display: none;
2331
+ justify-self: flex-end;
2332
+ z-index: 1;
2333
+ [data-dropdown-panel] {
2334
+ border-start-end-radius: 0;
2335
+ display: grid;
2336
+ grid-template-columns: repeat(4, 1fr);
2337
+ inset-inline-end: var(--lexxy-toolbar-gap);
2338
+ }
2339
+ }
2340
+ &.lexxy-editor__toolbar-dropdown--link {
2341
+ [data-dropdown-panel] {
2342
+ font-size: var(--lexxy-text-small);
2343
+ gap: var(--lexxy-toolbar-spacing);
2344
+ inset-inline-start: var(--lexxy-toolbar-spacing);
2345
+ inset-inline-end: var(--lexxy-toolbar-spacing);
2346
+ [overflowing] & {
2347
+ flex-wrap: wrap;
2348
+ }
2349
+ .lexxy-editor__toolbar-dropdown-actions {
2350
+ display: flex;
2351
+ flex: 1;
2352
+ gap: var(--lexxy-toolbar-spacing);
2353
+ }
2354
+ input[type="url"] {
2355
+ background-color: var(--lexxy-color-canvas);
2356
+ border: 1px solid var(--lexxy-color-ink-lighter);
2357
+ border-radius: var(--lexxy-radius);
2358
+ color: var(--lexxy-color-text);
2359
+ block-size: var(--lexxy-toolbar-button-size);
2360
+ box-sizing: border-box;
2361
+ font-size: var(--lexxy-text-small);
2362
+ flex: 2;
2363
+ inline-size: 100%;
2364
+ line-height: inherit;
2365
+ padding-block: 0;
2366
+ padding-inline: 1ch;
2367
+ [overflowing] & {
2368
+ min-inline-size: 100%;
2369
+ }
2370
+ }
2371
+ button {
2372
+ background-color: var(--lexxy-color-ink-lightest);
2373
+ inline-size: 100%;
2374
+ padding-inline: 2ch;
2375
+ }
2376
+ button[value="link"] {
2377
+ background-color: var(--lexxy-color-accent-dark);
2378
+ color: var(--lexxy-color-ink-inverted);
2379
+ &:hover {
2380
+ background-color: var(--lexxy-color-accent-medium);
2381
+ }
2382
+ }
2383
+ }
2384
+ }
2385
+ &.lexxy-editor__toolbar-dropdown--highlight {
2386
+ position: relative;
2387
+ [overflowing] & {
2388
+ position: static;
2389
+ }
2390
+ [data-dropdown-panel] {
2391
+ --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
2392
+ border-start-start-radius: 0;
2393
+ gap: var(--lexxy-toolbar-spacing);
2394
+ flex-direction: column;
2395
+ font-size: var(--lexxy-text-small);
2396
+ inset-inline-start: 0;
2397
+ max-inline-size: var(--max-inline-size);
2398
+ [overflowing] & {
2399
+ border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
2400
+ inset-inline-end: var(--lexxy-toolbar-spacing);
2401
+ inset-inline-start: var(--lexxy-toolbar-spacing);
2402
+ }
2403
+ button {
2404
+ position: relative;
2405
+ }
2406
+ .lexxy-highlight-colors {
2407
+ display: grid;
2408
+ gap: var(--lexxy-toolbar-gap);
2409
+ grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
2410
+ max-inline-size: var(--max-inline-size);
2411
+ .lexxy-highlight-colors__group {
2412
+ display: contents;
2413
+ }
2414
+ button {
2415
+ block-size: unset;
2416
+ inline-size: 100%;
2417
+ &:after {
2418
+ align-items: center;
2419
+ content: "Aa";
2420
+ display: flex;
2421
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
2422
+ inset: 0;
2423
+ justify-content: center;
2424
+ position: absolute;
2425
+ }
2426
+ &[aria-checked="true"] {
2427
+ background-color: transparent;
2428
+ box-shadow: 0 0 0 2px currentColor inset;
2429
+ &:after {
2430
+ content: "✓";
2431
+ }
2432
+ }
2433
+ }
2434
+ }
2435
+ .lexxy-editor__toolbar-dropdown-reset {
2436
+ background-color: var(--lexxy-color-ink-lightest);
2437
+ &:is([disabled]) {
2438
+ display: none;
2439
+ }
2440
+ }
2441
+ }
2442
+ }
2443
+ }
2444
+ :where(.lexxy-floating-controls) {
2445
+ --button-size: 2.3lh;
2446
+ --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);
2447
+ color: var(--lexxy-color-ink-inverted);
2448
+ font-size: var(--lexxy-text-small);
2449
+ line-height: 1;
2450
+ position: absolute;
2451
+ z-index: 2;
2452
+ button {
2453
+ align-items: center;
2454
+ background: transparent;
2455
+ block-size: var(--button-size);
2456
+ color: var(--lexxy-color-ink-inverted);
2457
+ display: flex;
2458
+ justify-content: center;
2459
+ line-height: inherit;
2460
+ min-block-size: var(--button-size);
2461
+ min-inline-size: var(--button-size);
2462
+ -webkit-user-select: none;
2463
+ @supports (user-select: none) {
2464
+ user-select: none;
2465
+ }
2466
+ @media (any-hover: hover) {
2467
+ &:hover:not([aria-disabled="true"]), &.lexxy-table-control__more-menu-trigger[aria-expanded="true"] {
2468
+ background: var(--lexxy-color-ink-medium);
2469
+ svg {
2470
+ opacity: 1;
2471
+ }
2472
+ }
2473
+ &:focus-visible {
2474
+ outline-color: var(--lexxy-focus-ring-color);
2475
+ }
2476
+ }
2477
+ }
2478
+ button {
2479
+ aspect-ratio: 1 / 1;
2480
+ font-weight: bold;
2481
+ svg {
2482
+ block-size: 1.125em;
2483
+ inline-size: 1.125em;
2484
+ fill: currentColor;
2485
+ opacity: 0.8;
2486
+ padding: 1px;
2487
+ }
2488
+ span {
2489
+ display: none;
2490
+ }
2491
+ }
2492
+ .lexxy-table-control__more-menu-trigger {
2493
+ aspect-ratio: auto;
2494
+ box-shadow: 0 0 0 1px inset var(--lexxy-color-floating-controls-separator);
2495
+ font-weight: normal;
2496
+ padding: 0 1.25ch;
2497
+ }
2498
+ .lexxy-floating-controls__group {
2499
+ background-color: var(--lexxy-color-ink);
2500
+ border-radius: var(--floating-tools-radius);
2501
+ padding: 0.25ch;
2502
+ }
2503
+ &:is(lexxy-table-tools) {
2504
+ flex-direction: row;
2505
+ gap: 0.25ch;
2506
+ inset-inline-start: var(--lexxy-editor-padding);
2507
+ transform: translate(-50%, -120%);
2508
+ .lexxy-table-control {
2509
+ align-items: stretch;
2510
+ display: flex;
2511
+ flex-direction: row;
2512
+ gap: 0.25ch;
2513
+ white-space: nowrap;
2514
+ .lexxy-table-control__more-menu {
2515
+ display: flex;
2516
+ gap: 0;
2517
+ position: relative;
2518
+ .lexxy-table-control__more-menu-details {
2519
+ background: var(--lexxy-color-ink);
2520
+ border-radius: var(--floating-tools-radius);
2521
+ display: flex;
2522
+ flex-direction: column;
2523
+ gap: 0.25ch;
2524
+ inset-block-start: 110%;
2525
+ inset-inline-start: 50%;
2526
+ padding: 0.25ch;
2527
+ position: absolute;
2528
+ transform: translateX(-50%);
2529
+ &[hidden] {
2530
+ display: none;
2531
+ }
2532
+ button {
2533
+ aspect-ratio: unset;
2534
+ flex-direction: row;
2535
+ font-weight: normal;
2536
+ gap: 1ch;
2537
+ justify-content: flex-start;
2538
+ padding: 0.75ch;
2539
+ padding-inline-end: 1.5ch;
2540
+ white-space: nowrap;
2541
+ span {
2542
+ display: inline-block;
2543
+ }
2544
+ svg {
2545
+ block-size: 1.3lh;
2546
+ inline-size: 1.3lh;
2547
+ fill: currentColor;
2548
+ }
2549
+ }
2550
+ }
2551
+ }
2552
+ .lexxy-table-control__button--delete-table {
2553
+ align-items: center;
2554
+ block-size: auto;
2555
+ font-weight: normal;
2556
+ justify-content: center;
2557
+ svg {
2558
+ block-size: 1.125em;
2559
+ inline-size: 1.125em;
2560
+ min-block-size: 1.125em;
2561
+ min-inline-size: 1.125em;
2562
+ }
2563
+ span {
2564
+ align-items: center;
2565
+ background: var(--lexxy-color-ink);
2566
+ border-radius: var(--floating-tools-radius);
2567
+ color: var(--lexxy-color-ink-inverted);
2568
+ @supports (color: color-mix(in lab, red, red)) {
2569
+ color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
2570
+ }
2571
+ display: flex;
2572
+ inset-inline-end: calc(var(--button-size) + 1ch);
2573
+ inset-block-start: 0;
2574
+ inset-block-end: 0;
2575
+ inset-inline-start: 0;
2576
+ justify-content: center;
2577
+ padding: 0.5ch 1ch;
2578
+ position: absolute;
2579
+ transition: all 0.2s ease-out;
2580
+ opacity: 0;
2581
+ pointer-events: none;
2582
+ white-space: nowrap;
2583
+ }
2584
+ &:hover {
2585
+ background-color: var(--lexxy-color-red);
2586
+ svg {
2587
+ color: var(--lexxy-color-ink-inverted);
2588
+ }
2589
+ span {
2590
+ opacity: 1;
2591
+ }
2592
+ }
2593
+ }
2594
+ }
2595
+ }
2596
+ &:is(lexxy-attachment-toolbar) {
2597
+ display: flex;
2598
+ left: calc(var(--lexxy-anchor-left) + var(--lexxy-anchor-width));
2599
+ top: var(--lexxy-anchor-top);
2600
+ transform: translate(calc(-100% - 1.5ch), 1.5ch);
2601
+ &[hidden] {
2602
+ display: none;
2603
+ }
2604
+ &[data-node-type="horizontal_divider"] {
2605
+ --button-size: 1.8lh;
2606
+ top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
2607
+ transform: translate(calc(-100% - 0.5ch), -50%);
2608
+ }
2609
+ &[data-presentation="inline"] {
2610
+ --button-size: 1.6lh;
2611
+ top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
2612
+ transform: translate(0.5ch, -50%);
2613
+ &[data-overflow] {
2614
+ transform: translate(-100%, -50%);
2615
+ }
2616
+ }
2617
+ .lexxy-floating-controls__group {
2618
+ display: flex;
2619
+ }
2620
+ button[hidden] {
2621
+ display: none;
2622
+ }
2623
+ .lexxy-attachment-toolbar__alternative-text {
2624
+ aspect-ratio: auto;
2625
+ margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);
2626
+ padding-inline: 1ch;
2627
+ position: relative;
2628
+ span {
2629
+ display: inline-block;
2630
+ font-size: 0.9em;
2631
+ }
2632
+ &:after {
2633
+ background-color: var(--lexxy-color-floating-controls-separator);
2634
+ block-size: 1.125em;
2635
+ content: "";
2636
+ display: block;
2637
+ inline-size: 1px;
2638
+ inset-block: 0;
2639
+ inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
2640
+ margin: auto;
2641
+ pointer-events: none;
2642
+ position: absolute;
2643
+ }
2644
+ }
2645
+ .lexxy-attachment-toolbar__remove:hover, .lexxy-attachment-toolbar__remove:focus-visible {
2646
+ background-color: var(--lexxy-color-red);
2647
+ }
2648
+ }
2649
+ &:is(lexxy-code-language-picker) {
2650
+ inset-inline-end: var(--lexxy-editor-padding);
2651
+ select {
2652
+ -webkit-appearance: none;
2653
+ appearance: none;
2654
+ background-color: var(--lexxy-color-canvas);
2655
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
2656
+ background-position: center right 1ch;
2657
+ background-repeat: no-repeat;
2658
+ background-size: 1ch;
2659
+ block-size: 1.5lh;
2660
+ border: 1px solid var(--lexxy-color-ink-lighter);
2661
+ border-radius: var(--lexxy-radius);
2662
+ color: var(--lexxy-color-ink);
2663
+ font-family: var(--lexxy-font-base);
2664
+ font-size: var(--lexxy-text-small);
2665
+ font-weight: normal;
2666
+ margin: 0.5ch 0.5ch 0 -0.5ch;
2667
+ padding: 0 2ch 0 1ch;
2668
+ text-align: start;
2669
+ @media (prefers-color-scheme: dark) {
2670
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
2671
+ }
2672
+ }
2673
+ }
2674
+ }
2675
+ :where(.lexxy-prompt-menu) {
2676
+ --lexxy-prompt-avatar-size: 24px;
2677
+ --lexxy-prompt-padding: 0.5ch;
2678
+ --lexxy-prompt-offset-x: 0;
2679
+ --lexxy-prompt-offset-y: 0;
2680
+ background-color: var(--lexxy-color-canvas);
2681
+ border-radius: calc(var(--lexxy-prompt-padding) * 2);
2682
+ box-shadow: var(--lexxy-shadow);
2683
+ color: var(--lexxy-color-ink);
2684
+ font-family: var(--lexxy-font-base);
2685
+ font-size: var(--lexxy-text-small);
2686
+ list-style: none;
2687
+ inset-block-start: var(--lexxy-prompt-offset-y);
2688
+ inset-inline-start: var(--lexxy-prompt-offset-x);
2689
+ margin: 0;
2690
+ max-block-size: 200px;
2691
+ max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
2692
+ min-inline-size: 20ch;
2693
+ overflow: auto;
2694
+ padding: var(--lexxy-prompt-padding);
2695
+ position: absolute;
2696
+ visibility: hidden;
2697
+ z-index: var(--lexxy-z-popup);
2698
+ &[data-clipped-at-right] {
2699
+ inset-inline-start: unset;
2700
+ inset-inline-end: 1ch;
2701
+ max-inline-size: calc(100% - 1ch);
2702
+ }
2703
+ &[data-clipped-at-bottom] {
2704
+ inset-block-start: unset;
2705
+ inset-block-end: var(--lexxy-prompt-offset-y);
2706
+ }
2707
+ }
2708
+ :where(.lexxy-prompt-menu--visible[data-anchored]) {
2709
+ visibility: initial;
2710
+ }
2711
+ :where(.lexxy-prompt-menu__item) {
2712
+ align-items: center;
2713
+ border-radius: var(--lexxy-radius);
2714
+ cursor: pointer;
2715
+ display: flex;
2716
+ gap: var(--lexxy-prompt-padding);
2717
+ padding: var(--lexxy-prompt-padding);
2718
+ &:hover {
2719
+ background-color: var(--lexxy-color-ink-lightest);
2720
+ }
2721
+ &[aria-selected] {
2722
+ background-color: var(--lexxy-color-selected);
2723
+ }
2724
+ img {
2725
+ block-size: var(--lexxy-prompt-avatar-size);
2726
+ border-radius: 50%;
2727
+ flex-shrink: 0;
2728
+ inline-size: var(--lexxy-prompt-avatar-size);
2729
+ margin: 0;
2730
+ }
2731
+ + & {
2732
+ margin-top: 2px;
2733
+ }
2734
+ }
2735
+ :where(.lexxy-prompt-menu__item--empty) {
2736
+ color: var(--lexxy-color-ink-medium);
2737
+ padding: var(--lexxy-prompt-padding);
2738
+ }
2739
+ action-text-attachment[content-type^="application/vnd.actiontext"].node--selected {
2740
+ --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
2741
+ --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
2742
+ outline: none;
2743
+ }
2744
+ :where(lexxy-live-region, .lexxy-fake-selection) {
2745
+ block-size: 1px;
2746
+ border: 0;
2747
+ clip-path: inset(50%);
2748
+ inline-size: 1px;
2749
+ margin: -1px;
2750
+ overflow: hidden;
2751
+ padding: 0;
2752
+ position: absolute;
2753
+ white-space: nowrap;
2754
+ }
2755
+ .lexxy-fake-selection {
2756
+ -webkit-user-select: text;
2757
+ @supports (user-select: text) {
2758
+ user-select: text;
2759
+ }
2760
+ }
2761
+ :where(.lexxy-caption-editor) {
2762
+ position: absolute;
2763
+ z-index: 2;
2764
+ box-sizing: border-box;
2765
+ background: var(--lexxy-color-canvas);
2766
+ border: 0;
2767
+ border-radius: var(--lexxy-radius);
2768
+ outline: 0;
2769
+ padding: 0;
2770
+ overflow: hidden;
2771
+ @supports (resize: none) {
2772
+ resize: none;
2773
+ }
2774
+ &[hidden] {
2775
+ display: none;
2776
+ }
2777
+ }
2778
+ .lexxy-alternative-text-dialog {
2779
+ background: var(--lexxy-color-canvas);
2780
+ border: 2px solid var(--lexxy-color-selected-hover);
2781
+ border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
2782
+ box-shadow: var(--lexxy-shadow);
2783
+ box-sizing: border-box;
2784
+ color: var(--lexxy-color-ink);
2785
+ font: inherit;
2786
+ inline-size: 60%;
2787
+ inset-block: calc(var(--lexxy-anchor-bottom) + var(--lexxy-toolbar-spacing)) auto;
2788
+ inset-inline: 0;
2789
+ margin-block: 0;
2790
+ margin-inline: auto;
2791
+ min-inline-size: min(20rem, 100%);
2792
+ overflow: auto;
2793
+ padding: var(--lexxy-toolbar-spacing);
2794
+ z-index: 3;
2795
+ h2 {
2796
+ font-size: inherit;
2797
+ font-weight: bold;
2798
+ line-height: 1.5;
2799
+ margin: 0;
2800
+ padding-block-start: calc(0.25 * var(--lexxy-text-small));
2801
+ padding-inline: calc(0.5 * var(--lexxy-text-small));
2802
+ text-align: center;
2803
+ }
2804
+ .lexxy-alternative-text-dialog__controls {
2805
+ align-items: stretch;
2806
+ display: flex;
2807
+ flex-direction: column;
2808
+ gap: 0.5em;
2809
+ margin-block-start: 0.5em;
2810
+ }
2811
+ textarea {
2812
+ background: var(--lexxy-color-canvas);
2813
+ border: 1px solid var(--lexxy-color-ink-lighter);
2814
+ border-radius: var(--lexxy-radius);
2815
+ box-sizing: border-box;
2816
+ color: inherit;
2817
+ display: block;
2818
+ font: inherit;
2819
+ font-size: var(--lexxy-text-small);
2820
+ font-weight: normal;
2821
+ min-block-size: calc(2lh + 1em + 2px);
2822
+ min-inline-size: 0;
2823
+ padding: 0.5em;
2824
+ @supports (field-sizing: content) {
2825
+ field-sizing: content;
2826
+ }
2827
+ @supports (resize: none) {
2828
+ resize: none;
2829
+ }
2830
+ }
2831
+ button {
2832
+ background-color: var(--lexxy-color-ink-lightest);
2833
+ block-size: var(--lexxy-toolbar-button-size);
2834
+ border: 0;
2835
+ border-radius: var(--lexxy-radius);
2836
+ color: currentColor;
2837
+ cursor: pointer;
2838
+ display: grid;
2839
+ font-size: var(--lexxy-text-small);
2840
+ inline-size: 100%;
2841
+ line-height: inherit;
2842
+ padding-inline: 2ch;
2843
+ place-items: center;
2844
+ &:hover {
2845
+ opacity: 0.8;
2846
+ }
2847
+ }
2848
+ .lexxy-alternative-text-dialog__save {
2849
+ background-color: var(--lexxy-color-accent-dark);
2850
+ color: var(--lexxy-color-ink-inverted);
2851
+ &:hover {
2852
+ background-color: var(--lexxy-color-accent-medium);
2853
+ }
2854
+ }
2855
+ textarea:focus-visible {
2856
+ outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
2857
+ outline-offset: var(--lexxy-focus-ring-offset);
2858
+ }
2859
+ .lexxy-alternative-text-dialog__actions {
2860
+ display: flex;
2861
+ gap: 0.5em;
2862
+ button {
2863
+ flex: 1;
2864
+ }
2865
+ }
2866
+ }
2867
+ .lesli-toolbar {
2868
+ margin-bottom: calc(var(--spacing) * 6);
2869
+ display: flex;
2870
+ width: 100%;
2871
+ flex-direction: column;
2872
+ gap: calc(var(--spacing) * 2);
2873
+ @media (width >= 40rem) {
2874
+ flex-direction: row;
2875
+ }
2876
+ @media (width >= 40rem) {
2877
+ align-items: center;
2878
+ }
2879
+ }
2880
+ .lesli-toolbar__form {
2881
+ display: flex;
2882
+ min-width: 0px;
2883
+ flex: 1;
2884
+ flex-direction: column;
2885
+ gap: calc(var(--spacing) * 2);
2886
+ @media (width >= 40rem) {
2887
+ flex-direction: row;
2888
+ }
2889
+ @media (width >= 40rem) {
2890
+ align-items: center;
2891
+ }
2892
+ }
2893
+ .lesli-toolbar__search {
2894
+ position: relative;
2895
+ min-width: 0px;
2896
+ flex: 1;
2897
+ }
2898
+ .lesli-toolbar__input {
2899
+ height: calc(var(--spacing) * 10);
2900
+ width: 100%;
2901
+ border-radius: var(--radius-lg);
2902
+ border-style: var(--tw-border-style);
2903
+ border-width: 1px;
2904
+ border-color: var(--color-slate-300);
2905
+ background-color: var(--color-white);
2906
+ padding-block: calc(var(--spacing) * 2);
2907
+ padding-right: calc(var(--spacing) * 10);
2908
+ padding-left: calc(var(--spacing) * 10);
2909
+ font-size: var(--text-sm);
2910
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2911
+ color: var(--color-slate-900);
2912
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2913
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2914
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2915
+ --tw-outline-style: none;
2916
+ outline-style: none;
2917
+ &::placeholder {
2918
+ color: var(--color-slate-400);
2919
+ }
2920
+ &:hover {
2921
+ @media (hover: hover) {
2922
+ border-color: var(--color-slate-400);
2923
+ }
2924
+ }
2925
+ &:focus {
2926
+ border-color: var(--color-sky-500);
2927
+ }
2928
+ &:focus {
2929
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2930
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2931
+ }
2932
+ &:focus {
2933
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
2934
+ @supports (color: color-mix(in lab, red, red)) {
2935
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
2936
+ }
2937
+ }
2938
+ }
2939
+ .lesli-toolbar__search-icon {
2940
+ pointer-events: none;
2941
+ position: absolute;
2942
+ top: calc(1 / 2 * 100%);
2943
+ left: calc(var(--spacing) * 3);
2944
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2945
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2946
+ font-size: var(--text-lg);
2947
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2948
+ --tw-leading: 1;
2949
+ line-height: 1;
2950
+ color: var(--color-slate-400);
2951
+ }
2952
+ .lesli-toolbar__clear {
2953
+ position: absolute;
2954
+ top: calc(1 / 2 * 100%);
2955
+ right: calc(var(--spacing) * 1.5);
2956
+ display: inline-flex;
2957
+ height: calc(var(--spacing) * 7);
2958
+ width: calc(var(--spacing) * 7);
2959
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2960
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2961
+ align-items: center;
2962
+ justify-content: center;
2963
+ border-radius: var(--radius-md);
2964
+ color: var(--color-slate-400);
2965
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2966
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2967
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2968
+ &:hover {
2969
+ @media (hover: hover) {
2970
+ background-color: var(--color-slate-100);
2971
+ }
2972
+ }
2973
+ &:hover {
2974
+ @media (hover: hover) {
2975
+ color: var(--color-slate-700);
2976
+ }
2977
+ }
2978
+ &:focus-visible {
2979
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2980
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2981
+ }
2982
+ &:focus-visible {
2983
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
2984
+ @supports (color: color-mix(in lab, red, red)) {
2985
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
2986
+ }
2987
+ }
2988
+ &:focus-visible {
2989
+ --tw-outline-style: none;
2990
+ outline-style: none;
2991
+ }
2992
+ }
2993
+ .lesli-toolbar__clear .material-symbols {
2994
+ font-size: var(--text-lg);
2995
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2996
+ --tw-leading: 1;
2997
+ line-height: 1;
2998
+ }
2999
+ .lesli-toolbar__filters {
3000
+ display: flex;
3001
+ flex-wrap: wrap;
3002
+ align-items: center;
3003
+ gap: calc(var(--spacing) * 2);
3004
+ }
3005
+ .lesli-toolbar__filters select, .lesli-toolbar__filters input {
3006
+ height: calc(var(--spacing) * 10);
3007
+ border-radius: var(--radius-lg);
3008
+ border-style: var(--tw-border-style);
3009
+ border-width: 1px;
3010
+ border-color: var(--color-slate-300);
3011
+ background-color: var(--color-white);
3012
+ padding-inline: calc(var(--spacing) * 3);
3013
+ font-size: var(--text-sm);
3014
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3015
+ color: var(--color-slate-700);
3016
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3017
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3018
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3019
+ --tw-outline-style: none;
3020
+ outline-style: none;
3021
+ &:hover {
3022
+ @media (hover: hover) {
3023
+ border-color: var(--color-slate-400);
3024
+ }
3025
+ }
3026
+ &:focus {
3027
+ border-color: var(--color-sky-500);
3028
+ }
3029
+ &:focus {
3030
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3031
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3032
+ }
3033
+ &:focus {
3034
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
3035
+ @supports (color: color-mix(in lab, red, red)) {
3036
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
3037
+ }
3038
+ }
3039
+ }
3040
+ .lesli-toolbar__submit {
3041
+ display: inline-flex;
3042
+ height: calc(var(--spacing) * 10);
3043
+ width: calc(var(--spacing) * 10);
3044
+ flex-shrink: 0;
3045
+ cursor: pointer;
3046
+ align-items: center;
3047
+ justify-content: center;
3048
+ border-radius: var(--radius-lg);
3049
+ border-style: var(--tw-border-style);
3050
+ border-width: 1px;
3051
+ border-color: var(--color-slate-300);
3052
+ background-color: var(--color-white);
3053
+ color: var(--color-slate-500);
3054
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3055
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3056
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3057
+ &:hover {
3058
+ @media (hover: hover) {
3059
+ border-color: var(--color-sky-300);
3060
+ }
3061
+ }
3062
+ &:hover {
3063
+ @media (hover: hover) {
3064
+ background-color: var(--color-sky-50);
3065
+ }
3066
+ }
3067
+ &:hover {
3068
+ @media (hover: hover) {
3069
+ color: var(--color-sky-700);
3070
+ }
3071
+ }
3072
+ &:focus-visible {
3073
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3074
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3075
+ }
3076
+ &:focus-visible {
3077
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
3078
+ @supports (color: color-mix(in lab, red, red)) {
3079
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
3080
+ }
3081
+ }
3082
+ &:focus-visible {
3083
+ --tw-outline-style: none;
3084
+ outline-style: none;
3085
+ }
3086
+ }
3087
+ .lesli-toolbar__submit .material-symbols {
3088
+ font-size: var(--text-xl);
3089
+ line-height: var(--tw-leading, var(--text-xl--line-height));
3090
+ --tw-leading: 1;
3091
+ line-height: 1;
3092
+ }
3093
+ .lesli-toolbar__actions {
3094
+ display: flex;
3095
+ flex-shrink: 0;
3096
+ flex-wrap: wrap;
3097
+ align-items: center;
3098
+ gap: calc(var(--spacing) * 2);
3099
+ }
3100
+ }
3101
+ /*!
3102
+
3103
+ Lesli
3104
+
3105
+ Copyright (c) 2026, Lesli Technologies, S. A.
3106
+
3107
+ This program is free software: you can redistribute it and/or modify
3108
+ it under the terms of the GNU General Public License as published by
3109
+ the Free Software Foundation, either version 3 of the License, or
3110
+ (at your option) any later version.
3111
+
3112
+ This program is distributed in the hope that it will be useful,
3113
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
3114
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
3115
+ GNU General Public License for more details.
3116
+
3117
+ You should have received a copy of the GNU General Public License
3118
+ along with this program. If not, see http://www.gnu.org/licenses/.
3119
+
3120
+ Lesli · Ruby on Rails SaaS Development Framework.
3121
+
3122
+ Made with ♥ by LesliTech
3123
+ Building a better future, one line of code at a time.
3124
+
3125
+ @contact hello@lesli.tech
3126
+ @website https://www.lesli.tech
3127
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
3128
+
3129
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
3130
+ // ·
3131
+ */
3132
+ @layer components {
3133
+ .lesli-button:hover {
3134
+ cursor: pointer;
3135
+ }
3136
+ .lesli-button {
3137
+ display: inline-flex;
3138
+ height: calc(var(--spacing) * 10);
3139
+ cursor: pointer;
3140
+ align-items: center;
3141
+ justify-content: center;
3142
+ gap: calc(var(--spacing) * 2);
3143
+ border-radius: var(--radius-lg);
3144
+ border-style: var(--tw-border-style);
3145
+ border-width: 1px;
3146
+ padding-inline: calc(var(--spacing) * 4);
3147
+ font-size: var(--text-sm);
3148
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3149
+ --tw-font-weight: var(--font-weight-medium);
3150
+ font-weight: var(--font-weight-medium);
3151
+ white-space: nowrap;
3152
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3153
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3154
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3155
+ --tw-duration: 150ms;
3156
+ transition-duration: 150ms;
3157
+ &:focus {
3158
+ --tw-outline-style: none;
3159
+ outline-style: none;
3160
+ }
3161
+ &:focus-visible {
3162
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3163
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3164
+ }
3165
+ &:focus-visible {
3166
+ --tw-ring-offset-width: 2px;
3167
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3168
+ }
3169
+ &:disabled {
3170
+ pointer-events: none;
3171
+ }
3172
+ &:disabled {
3173
+ opacity: 50%;
3174
+ }
3175
+ }
3176
+ .lesli-button.is-small {
3177
+ height: calc(var(--spacing) * 8);
3178
+ border-radius: var(--radius-md);
3179
+ padding-inline: calc(var(--spacing) * 3);
3180
+ font-size: var(--text-xs);
3181
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3182
+ }
3183
+ .lesli-button.is-icon-only {
3184
+ width: calc(var(--spacing) * 10);
3185
+ padding-inline: 0px;
3186
+ }
3187
+ .lesli-button.is-icon-only.is-small {
3188
+ width: calc(var(--spacing) * 8);
3189
+ padding-inline: 0px;
3190
+ }
3191
+ .lesli-button.is-loading {
3192
+ pointer-events: none;
3193
+ cursor: wait;
3194
+ opacity: 80%;
3195
+ }
3196
+ .lesli-button.is-loading::before {
3197
+ width: 1rem;
3198
+ height: 1rem;
3199
+ content: "";
3200
+ border: 2px solid currentColor;
3201
+ border-right-color: transparent;
3202
+ border-radius: 9999px;
3203
+ animation: lesli-button-spin .65s linear infinite;
3204
+ }
3205
+ .lesli-button.is-primary {
3206
+ border-color: var(--color-blue-600);
3207
+ background-color: var(--color-blue-600);
3208
+ color: var(--color-white);
3209
+ &:hover {
3210
+ @media (hover: hover) {
3211
+ border-color: var(--color-blue-700);
3212
+ }
3213
+ }
3214
+ &:hover {
3215
+ @media (hover: hover) {
3216
+ background-color: var(--color-blue-700);
3217
+ }
3218
+ }
3219
+ &:focus-visible {
3220
+ --tw-ring-color: var(--color-blue-500);
3221
+ }
3222
+ }
3223
+ .lesli-button.is-info {
3224
+ border-color: var(--color-sky-600);
3225
+ background-color: var(--color-sky-600);
3226
+ color: var(--color-white);
3227
+ &:hover {
3228
+ @media (hover: hover) {
3229
+ border-color: var(--color-sky-700);
3230
+ }
3231
+ }
3232
+ &:hover {
3233
+ @media (hover: hover) {
3234
+ background-color: var(--color-sky-700);
3235
+ }
3236
+ }
3237
+ &:focus-visible {
3238
+ --tw-ring-color: var(--color-sky-500);
3239
+ }
3240
+ }
3241
+ .lesli-button.is-success {
3242
+ border-color: var(--color-emerald-600);
3243
+ background-color: var(--color-emerald-600);
3244
+ color: var(--color-white);
3245
+ &:hover {
3246
+ @media (hover: hover) {
3247
+ border-color: var(--color-emerald-700);
3248
+ }
3249
+ }
3250
+ &:hover {
3251
+ @media (hover: hover) {
3252
+ background-color: var(--color-emerald-700);
3253
+ }
3254
+ }
3255
+ &:focus-visible {
3256
+ --tw-ring-color: var(--color-emerald-500);
3257
+ }
3258
+ }
3259
+ .lesli-button.is-warning {
3260
+ border-color: var(--color-amber-500);
3261
+ background-color: var(--color-amber-500);
3262
+ color: var(--color-amber-950);
3263
+ &:hover {
3264
+ @media (hover: hover) {
3265
+ border-color: var(--color-amber-600);
3266
+ }
3267
+ }
3268
+ &:hover {
3269
+ @media (hover: hover) {
3270
+ background-color: var(--color-amber-600);
3271
+ }
3272
+ }
3273
+ &:focus-visible {
3274
+ --tw-ring-color: var(--color-amber-500);
3275
+ }
3276
+ }
3277
+ .lesli-button.is-danger {
3278
+ border-color: var(--color-rose-600);
3279
+ background-color: var(--color-rose-600);
3280
+ color: var(--color-white);
3281
+ &:hover {
3282
+ @media (hover: hover) {
3283
+ border-color: var(--color-rose-700);
3284
+ }
3285
+ }
3286
+ &:hover {
3287
+ @media (hover: hover) {
3288
+ background-color: var(--color-rose-700);
3289
+ }
3290
+ }
3291
+ &:focus-visible {
3292
+ --tw-ring-color: var(--color-rose-500);
3293
+ }
3294
+ }
3295
+ .lesli-button.is-primary.is-light {
3296
+ border-color: var(--color-blue-100);
3297
+ background-color: var(--color-blue-50);
3298
+ color: var(--color-blue-700);
3299
+ &:hover {
3300
+ @media (hover: hover) {
3301
+ border-color: var(--color-blue-200);
3302
+ }
3303
+ }
3304
+ &:hover {
3305
+ @media (hover: hover) {
3306
+ background-color: var(--color-blue-100);
3307
+ }
3308
+ }
3309
+ &:focus-visible {
3310
+ --tw-ring-color: var(--color-blue-500);
3311
+ }
3312
+ }
3313
+ .lesli-button.is-info.is-light {
3314
+ border-color: var(--color-sky-100);
3315
+ background-color: var(--color-sky-50);
3316
+ color: var(--color-sky-700);
3317
+ &:hover {
3318
+ @media (hover: hover) {
3319
+ border-color: var(--color-sky-200);
3320
+ }
3321
+ }
3322
+ &:hover {
3323
+ @media (hover: hover) {
3324
+ background-color: var(--color-sky-100);
3325
+ }
3326
+ }
3327
+ &:focus-visible {
3328
+ --tw-ring-color: var(--color-sky-500);
3329
+ }
3330
+ }
3331
+ .lesli-button.is-success.is-light {
3332
+ border-color: var(--color-emerald-100);
3333
+ background-color: var(--color-emerald-50);
3334
+ color: var(--color-emerald-700);
3335
+ &:hover {
3336
+ @media (hover: hover) {
3337
+ border-color: var(--color-emerald-200);
3338
+ }
3339
+ }
3340
+ &:hover {
3341
+ @media (hover: hover) {
3342
+ background-color: var(--color-emerald-100);
3343
+ }
3344
+ }
3345
+ &:focus-visible {
3346
+ --tw-ring-color: var(--color-emerald-500);
3347
+ }
3348
+ }
3349
+ .lesli-button.is-warning.is-light {
3350
+ border-color: var(--color-amber-100);
3351
+ background-color: var(--color-amber-50);
3352
+ color: var(--color-amber-700);
3353
+ &:hover {
3354
+ @media (hover: hover) {
3355
+ border-color: var(--color-amber-200);
3356
+ }
3357
+ }
3358
+ &:hover {
3359
+ @media (hover: hover) {
3360
+ background-color: var(--color-amber-100);
3361
+ }
3362
+ }
3363
+ &:focus-visible {
3364
+ --tw-ring-color: var(--color-amber-500);
3365
+ }
3366
+ }
3367
+ .lesli-button.is-danger.is-light {
3368
+ border-color: var(--color-rose-100);
3369
+ background-color: var(--color-rose-50);
3370
+ color: var(--color-rose-700);
3371
+ &:hover {
3372
+ @media (hover: hover) {
3373
+ border-color: var(--color-rose-200);
3374
+ }
3375
+ }
3376
+ &:hover {
3377
+ @media (hover: hover) {
3378
+ background-color: var(--color-rose-100);
3379
+ }
3380
+ }
3381
+ &:focus-visible {
3382
+ --tw-ring-color: var(--color-rose-500);
3383
+ }
3384
+ }
3385
+ .lesli-button.is-primary.is-outlined {
3386
+ border-color: var(--color-blue-300);
3387
+ background-color: transparent;
3388
+ color: var(--color-blue-700);
3389
+ &:hover {
3390
+ @media (hover: hover) {
3391
+ border-color: var(--color-blue-400);
3392
+ }
3393
+ }
3394
+ &:hover {
3395
+ @media (hover: hover) {
3396
+ background-color: var(--color-blue-50);
3397
+ }
3398
+ }
3399
+ &:focus-visible {
3400
+ --tw-ring-color: var(--color-blue-500);
3401
+ }
3402
+ }
3403
+ .lesli-button.is-info.is-outlined {
3404
+ border-color: var(--color-sky-300);
3405
+ background-color: transparent;
3406
+ color: var(--color-sky-700);
3407
+ &:hover {
3408
+ @media (hover: hover) {
3409
+ border-color: var(--color-sky-400);
3410
+ }
3411
+ }
3412
+ &:hover {
3413
+ @media (hover: hover) {
3414
+ background-color: var(--color-sky-50);
3415
+ }
3416
+ }
3417
+ &:focus-visible {
3418
+ --tw-ring-color: var(--color-sky-500);
3419
+ }
3420
+ }
3421
+ .lesli-button.is-success.is-outlined {
3422
+ border-color: var(--color-emerald-300);
3423
+ background-color: transparent;
3424
+ color: var(--color-emerald-700);
3425
+ &:hover {
3426
+ @media (hover: hover) {
3427
+ border-color: var(--color-emerald-400);
3428
+ }
3429
+ }
3430
+ &:hover {
3431
+ @media (hover: hover) {
3432
+ background-color: var(--color-emerald-50);
3433
+ }
3434
+ }
3435
+ &:focus-visible {
3436
+ --tw-ring-color: var(--color-emerald-500);
3437
+ }
3438
+ }
3439
+ .lesli-button.is-warning.is-outlined {
3440
+ border-color: var(--color-amber-300);
3441
+ background-color: transparent;
3442
+ color: var(--color-amber-700);
3443
+ &:hover {
3444
+ @media (hover: hover) {
3445
+ border-color: var(--color-amber-400);
3446
+ }
3447
+ }
3448
+ &:hover {
3449
+ @media (hover: hover) {
3450
+ background-color: var(--color-amber-50);
3451
+ }
3452
+ }
3453
+ &:focus-visible {
3454
+ --tw-ring-color: var(--color-amber-500);
3455
+ }
3456
+ }
3457
+ .lesli-button.is-danger.is-outlined {
3458
+ border-color: var(--color-rose-300);
3459
+ background-color: transparent;
3460
+ color: var(--color-rose-700);
3461
+ &:hover {
3462
+ @media (hover: hover) {
3463
+ border-color: var(--color-rose-400);
3464
+ }
3465
+ }
3466
+ &:hover {
3467
+ @media (hover: hover) {
3468
+ background-color: var(--color-rose-50);
3469
+ }
3470
+ }
3471
+ &:focus-visible {
3472
+ --tw-ring-color: var(--color-rose-500);
3473
+ }
3474
+ }
3475
+ .lesli-button.is-light.is-outlined {
3476
+ background-color: transparent;
3477
+ }
3478
+ }
3479
+ @keyframes lesli-button-spin {
3480
+ to {
3481
+ transform: rotate(360deg);
3482
+ }
3483
+ }
3484
+ @layer components {
3485
+ .lesli-icon {
3486
+ display: inline-flex;
3487
+ height: calc(var(--spacing) * 6);
3488
+ width: calc(var(--spacing) * 6);
3489
+ flex-shrink: 0;
3490
+ align-items: center;
3491
+ justify-content: center;
3492
+ font-size: 1.5rem;
3493
+ --tw-leading: 1;
3494
+ line-height: 1;
3495
+ }
3496
+ .lesli-icon.is-small {
3497
+ height: calc(var(--spacing) * 4);
3498
+ width: calc(var(--spacing) * 4);
3499
+ font-size: 1rem;
3500
+ }
3501
+ .lesli-icon.is-medium {
3502
+ height: calc(var(--spacing) * 8);
3503
+ width: calc(var(--spacing) * 8);
3504
+ font-size: 2rem;
3505
+ }
3506
+ .lesli-icon.is-large {
3507
+ height: calc(var(--spacing) * 12);
3508
+ width: calc(var(--spacing) * 12);
3509
+ font-size: 3rem;
3510
+ }
3511
+ .lesli-icon .material-symbols, .lesli-icon .material-symbols-outlined, .lesli-icon .material-symbols-rounded, .lesli-icon .material-symbols-sharp {
3512
+ display: block;
3513
+ --tw-leading: 1;
3514
+ line-height: 1;
3515
+ color: inherit;
3516
+ }
3517
+ .lesli-button .lesli-icon {
3518
+ height: calc(var(--spacing) * 5);
3519
+ width: calc(var(--spacing) * 5);
3520
+ font-size: 1.25rem;
3521
+ }
3522
+ .lesli-button.is-small .lesli-icon {
3523
+ height: calc(var(--spacing) * 4);
3524
+ width: calc(var(--spacing) * 4);
3525
+ font-size: 1rem;
3526
+ }
3527
+ .lesli-button.is-icon-only .lesli-icon {
3528
+ height: calc(var(--spacing) * 5);
3529
+ width: calc(var(--spacing) * 5);
3530
+ font-size: 1.25rem;
3531
+ }
3532
+ .lesli-button.is-icon-only.is-small .lesli-icon {
3533
+ height: calc(var(--spacing) * 4);
3534
+ width: calc(var(--spacing) * 4);
3535
+ font-size: 1rem;
3536
+ }
3537
+ .lesli-table-container {
3538
+ width: 100%;
3539
+ overflow-x: auto;
3540
+ border-radius: var(--radius-2xl);
3541
+ border-style: var(--tw-border-style);
3542
+ border-width: 1px;
3543
+ border-color: var(--color-slate-200);
3544
+ background-color: var(--color-white);
3545
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3546
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3547
+ }
3548
+ .lesli-table {
3549
+ width: 100%;
3550
+ min-width: 40rem;
3551
+ border-collapse: collapse;
3552
+ text-align: left;
3553
+ font-size: var(--text-sm);
3554
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3555
+ color: var(--color-slate-600);
3556
+ }
3557
+ .lesli-table thead {
3558
+ border-bottom-style: var(--tw-border-style);
3559
+ border-bottom-width: 1px;
3560
+ border-color: var(--color-slate-200);
3561
+ background-color: var(--color-slate-50);
3562
+ }
3563
+ .lesli-table th {
3564
+ padding-inline: calc(var(--spacing) * 4);
3565
+ padding-block: calc(var(--spacing) * 3);
3566
+ font-size: var(--text-xs);
3567
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3568
+ --tw-font-weight: var(--font-weight-semibold);
3569
+ font-weight: var(--font-weight-semibold);
3570
+ --tw-tracking: var(--tracking-wide);
3571
+ letter-spacing: var(--tracking-wide);
3572
+ white-space: nowrap;
3573
+ color: var(--color-slate-600);
3574
+ text-transform: uppercase;
3575
+ }
3576
+ .lesli-table td {
3577
+ border-bottom-style: var(--tw-border-style);
3578
+ border-bottom-width: 1px;
3579
+ border-color: var(--color-slate-100);
3580
+ padding-inline: calc(var(--spacing) * 4);
3581
+ padding-block: calc(var(--spacing) * 3);
3582
+ vertical-align: middle;
3583
+ }
3584
+ .lesli-table tbody tr {
3585
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3586
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3587
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3588
+ &:hover {
3589
+ @media (hover: hover) {
3590
+ background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 50%, transparent);
3591
+ @supports (color: color-mix(in lab, red, red)) {
3592
+ background-color: color-mix(in oklab, var(--color-sky-50) 50%, transparent);
3593
+ }
3594
+ }
3595
+ }
3596
+ }
3597
+ .lesli-table tbody tr:last-child td {
3598
+ border-bottom-style: var(--tw-border-style);
3599
+ border-bottom-width: 0px;
3600
+ }
3601
+ .lesli-table--striped tbody tr:nth-child(even) {
3602
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);
3603
+ @supports (color: color-mix(in lab, red, red)) {
3604
+ background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);
3605
+ }
3606
+ }
3607
+ .lesli-table--striped tbody tr:nth-child(even):hover {
3608
+ background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 70%, transparent);
3609
+ @supports (color: color-mix(in lab, red, red)) {
3610
+ background-color: color-mix(in oklab, var(--color-sky-50) 70%, transparent);
3611
+ }
3612
+ }
3613
+ .lesli-table--compact th, .lesli-table--compact td {
3614
+ padding-inline: calc(var(--spacing) * 3);
3615
+ padding-block: calc(var(--spacing) * 2);
3616
+ }
3617
+ .lesli-table__cell--center {
3618
+ text-align: center;
3619
+ }
3620
+ .lesli-table__cell--right {
3621
+ text-align: right;
3622
+ }
3623
+ .lesli-table__cell--left {
3624
+ text-align: left;
3625
+ }
3626
+ .lesli-table td.lesli-table__cell--linked {
3627
+ padding: 0px;
3628
+ }
3629
+ .lesli-table__link {
3630
+ display: block;
3631
+ padding-inline: calc(var(--spacing) * 4);
3632
+ padding-block: calc(var(--spacing) * 3);
3633
+ color: var(--color-slate-700);
3634
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3635
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3636
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3637
+ &:hover {
3638
+ @media (hover: hover) {
3639
+ color: var(--color-sky-700);
3640
+ }
3641
+ }
3642
+ &:focus-visible {
3643
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3644
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3645
+ }
3646
+ &:focus-visible {
3647
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 40%, transparent);
3648
+ @supports (color: color-mix(in lab, red, red)) {
3649
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 40%, transparent);
3650
+ }
3651
+ }
3652
+ &:focus-visible {
3653
+ --tw-outline-style: none;
3654
+ outline-style: none;
3655
+ }
3656
+ &:focus-visible {
3657
+ --tw-ring-inset: inset;
3658
+ }
3659
+ }
3660
+ .lesli-table--compact .lesli-table__link {
3661
+ padding-inline: calc(var(--spacing) * 3);
3662
+ padding-block: calc(var(--spacing) * 2);
3663
+ }
3664
+ .lesli-table__row--danger {
3665
+ background-color: var(--color-rose-50);
3666
+ color: var(--color-rose-900);
3667
+ }
3668
+ .lesli-table__row--warning {
3669
+ background-color: var(--color-amber-50);
3670
+ color: var(--color-amber-900);
3671
+ }
3672
+ .lesli-table__row--info {
3673
+ background-color: var(--color-sky-50);
3674
+ color: var(--color-sky-900);
3675
+ }
3676
+ .lesli-table__row--success {
3677
+ background-color: var(--color-emerald-50);
3678
+ color: var(--color-emerald-900);
3679
+ }
3680
+ .lesli-table__empty {
3681
+ padding-block: calc(var(--spacing) * 12);
3682
+ text-align: center;
3683
+ font-size: var(--text-sm);
3684
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3685
+ color: var(--color-slate-400);
3686
+ }
3687
+ .lesli-form-field {
3688
+ margin-bottom: calc(var(--spacing) * 4);
3689
+ }
3690
+ .lesli-form-label-wrapper {
3691
+ margin-bottom: calc(var(--spacing) * 2);
3692
+ }
3693
+ .lesli-form-label {
3694
+ display: block;
3695
+ font-size: var(--text-sm);
3696
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3697
+ --tw-leading: calc(var(--spacing) * 5);
3698
+ line-height: calc(var(--spacing) * 5);
3699
+ --tw-font-weight: var(--font-weight-medium);
3700
+ font-weight: var(--font-weight-medium);
3701
+ color: var(--color-slate-700);
3702
+ }
3703
+ .lesli-form-field-body {
3704
+ min-width: 0px;
3705
+ }
3706
+ .lesli-form-control {
3707
+ position: relative;
3708
+ }
3709
+ .lesli-form-input, .lesli-form-select, .lesli-form-control textarea, .lesli-form-control trix-editor {
3710
+ display: block;
3711
+ width: 100%;
3712
+ border-radius: var(--radius-xl);
3713
+ border-style: var(--tw-border-style);
3714
+ border-width: 1px;
3715
+ border-color: var(--color-slate-300);
3716
+ background-color: var(--color-white);
3717
+ padding-inline: calc(var(--spacing) * 3.5);
3718
+ padding-block: calc(var(--spacing) * 2.5);
3719
+ font-size: var(--text-sm);
3720
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3721
+ color: var(--color-slate-900);
3722
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3723
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3724
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3725
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3726
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3727
+ --tw-outline-style: none;
3728
+ outline-style: none;
3729
+ &::placeholder {
3730
+ color: var(--color-slate-400);
3731
+ }
3732
+ &:hover {
3733
+ @media (hover: hover) {
3734
+ border-color: var(--color-slate-400);
3735
+ }
3736
+ }
3737
+ &:focus {
3738
+ border-color: var(--color-sky-500);
3739
+ }
3740
+ &:focus {
3741
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3742
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3743
+ }
3744
+ &:focus {
3745
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
3746
+ @supports (color: color-mix(in lab, red, red)) {
3747
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
3748
+ }
3749
+ }
3750
+ &:disabled {
3751
+ cursor: not-allowed;
3752
+ }
3753
+ &:disabled {
3754
+ background-color: var(--color-slate-100);
3755
+ }
3756
+ &:disabled {
3757
+ color: var(--color-slate-500);
3758
+ }
3759
+ &:disabled {
3760
+ opacity: 75%;
3761
+ }
3762
+ }
3763
+ .lesli-form-input, .lesli-form-select {
3764
+ height: calc(var(--spacing) * 11);
3765
+ }
3766
+ .lesli-form-control textarea, .lesli-form-control trix-editor {
3767
+ min-height: calc(var(--spacing) * 32);
3768
+ resize: vertical;
3769
+ }
3770
+ .lesli-form-select-wrapper {
3771
+ position: relative;
3772
+ }
3773
+ .lesli-form-select {
3774
+ cursor: pointer;
3775
+ appearance: none;
3776
+ padding-right: calc(var(--spacing) * 10);
3777
+ }
3778
+ .lesli-form-select-wrapper::after {
3779
+ pointer-events: none;
3780
+ position: absolute;
3781
+ top: calc(1 / 2 * 100%);
3782
+ right: calc(var(--spacing) * 3.5);
3783
+ height: calc(var(--spacing) * 2);
3784
+ width: calc(var(--spacing) * 2);
3785
+ --tw-translate-y: calc(var(--spacing) * -2);
3786
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3787
+ rotate: 45deg;
3788
+ border-right-style: var(--tw-border-style);
3789
+ border-right-width: 2px;
3790
+ border-bottom-style: var(--tw-border-style);
3791
+ border-bottom-width: 2px;
3792
+ border-color: var(--color-slate-400);
3793
+ --tw-content: '';
3794
+ content: var(--tw-content);
3795
+ }
3796
+ .lesli-form-checkbox {
3797
+ height: calc(var(--spacing) * 4);
3798
+ width: calc(var(--spacing) * 4);
3799
+ cursor: pointer;
3800
+ border-radius: 0.25rem;
3801
+ border-color: var(--color-slate-300);
3802
+ accent-color: var(--color-sky-600);
3803
+ &:focus {
3804
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3805
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3806
+ }
3807
+ &:focus {
3808
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
3809
+ @supports (color: color-mix(in lab, red, red)) {
3810
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
3811
+ }
3812
+ }
3813
+ &:focus {
3814
+ --tw-ring-offset-width: 2px;
3815
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3816
+ }
3817
+ &:disabled {
3818
+ cursor: not-allowed;
3819
+ }
3820
+ &:disabled {
3821
+ opacity: 50%;
3822
+ }
3823
+ }
3824
+ .lesli-form-checkbox-label {
3825
+ display: inline-flex;
3826
+ cursor: pointer;
3827
+ align-items: center;
3828
+ gap: calc(var(--spacing) * 2.5);
3829
+ font-size: var(--text-sm);
3830
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3831
+ color: var(--color-slate-600);
3832
+ }
3833
+ .lesli-form-control.has-icon .lesli-form-input, .lesli-form-control.has-icon .lesli-form-select {
3834
+ padding-left: calc(var(--spacing) * 11);
3835
+ }
3836
+ .lesli-form-icon {
3837
+ pointer-events: none;
3838
+ position: absolute;
3839
+ top: calc(1 / 2 * 100%);
3840
+ left: calc(var(--spacing) * 3.5);
3841
+ display: inline-flex;
3842
+ height: calc(var(--spacing) * 5);
3843
+ width: calc(var(--spacing) * 5);
3844
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
3845
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3846
+ align-items: center;
3847
+ justify-content: center;
3848
+ color: var(--color-slate-400);
3849
+ }
3850
+ .lesli-form-icon .material-symbols-outlined {
3851
+ font-size: var(--text-xl);
3852
+ line-height: var(--tw-leading, var(--text-xl--line-height));
3853
+ --tw-leading: 1;
3854
+ line-height: 1;
3855
+ }
3856
+ .lesli-form-help {
3857
+ margin-top: calc(var(--spacing) * 2);
3858
+ font-size: var(--text-sm);
3859
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3860
+ --tw-leading: calc(var(--spacing) * 5);
3861
+ line-height: calc(var(--spacing) * 5);
3862
+ color: var(--color-slate-500);
3863
+ }
3864
+ .lesli-form-field.is-danger .lesli-form-input, .lesli-form-field.is-danger .lesli-form-select, .lesli-form-field.is-danger textarea, .lesli-form-field.is-danger trix-editor {
3865
+ border-color: var(--color-rose-400);
3866
+ &:focus {
3867
+ border-color: var(--color-rose-500);
3868
+ }
3869
+ &:focus {
3870
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);
3871
+ @supports (color: color-mix(in lab, red, red)) {
3872
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
3873
+ }
3874
+ }
3875
+ }
3876
+ .lesli-form-help.is-danger {
3877
+ color: var(--color-rose-700);
3878
+ }
3879
+ .lesli-form-help.is-warning {
3880
+ color: var(--color-amber-700);
3881
+ }
3882
+ .lesli-form-help.is-success {
3883
+ color: var(--color-emerald-700);
3884
+ }
3885
+ .lesli-form-help.is-info {
3886
+ color: var(--color-sky-700);
3887
+ }
3888
+ .lesli-form-button {
3889
+ display: inline-flex;
3890
+ height: calc(var(--spacing) * 11);
3891
+ cursor: pointer;
3892
+ align-items: center;
3893
+ justify-content: center;
3894
+ gap: calc(var(--spacing) * 2);
3895
+ border-radius: var(--radius-xl);
3896
+ border-style: var(--tw-border-style);
3897
+ border-width: 1px;
3898
+ border-color: transparent;
3899
+ padding-inline: calc(var(--spacing) * 4);
3900
+ font-size: var(--text-sm);
3901
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3902
+ --tw-font-weight: var(--font-weight-semibold);
3903
+ font-weight: var(--font-weight-semibold);
3904
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3905
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3906
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3907
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3908
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3909
+ &:focus {
3910
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3911
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3912
+ }
3913
+ &:focus {
3914
+ --tw-outline-style: none;
3915
+ outline-style: none;
3916
+ }
3917
+ &:disabled {
3918
+ pointer-events: none;
3919
+ }
3920
+ &:disabled {
3921
+ cursor: not-allowed;
3922
+ }
3923
+ &:disabled {
3924
+ opacity: 50%;
3925
+ }
3926
+ }
3927
+ .lesli-form-button.is-primary, .lesli-form-button.is-info {
3928
+ background-color: var(--color-sky-600);
3929
+ color: var(--color-white);
3930
+ &:hover {
3931
+ @media (hover: hover) {
3932
+ background-color: var(--color-sky-700);
3933
+ }
3934
+ }
3935
+ &:focus {
3936
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
3937
+ @supports (color: color-mix(in lab, red, red)) {
3938
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
3939
+ }
3940
+ }
3941
+ }
3942
+ .lesli-form-button.is-success {
3943
+ background-color: var(--color-emerald-600);
3944
+ color: var(--color-white);
3945
+ &:hover {
3946
+ @media (hover: hover) {
3947
+ background-color: var(--color-emerald-700);
3948
+ }
3949
+ }
3950
+ &:focus {
3951
+ --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
3952
+ @supports (color: color-mix(in lab, red, red)) {
3953
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
3954
+ }
3955
+ }
3956
+ }
3957
+ .lesli-form-button.is-warning {
3958
+ background-color: var(--color-amber-500);
3959
+ color: var(--color-amber-950);
3960
+ &:hover {
3961
+ @media (hover: hover) {
3962
+ background-color: var(--color-amber-600);
3963
+ }
3964
+ }
3965
+ &:focus {
3966
+ --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
3967
+ @supports (color: color-mix(in lab, red, red)) {
3968
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
3969
+ }
3970
+ }
3971
+ }
3972
+ .lesli-form-button.is-danger {
3973
+ background-color: var(--color-rose-600);
3974
+ color: var(--color-white);
3975
+ &:hover {
3976
+ @media (hover: hover) {
3977
+ background-color: var(--color-rose-700);
3978
+ }
3979
+ }
3980
+ &:focus {
3981
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
3982
+ @supports (color: color-mix(in lab, red, red)) {
3983
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
3984
+ }
3985
+ }
3986
+ }
3987
+ .lesli-form-button.is-fullwidth {
3988
+ width: 100%;
3989
+ }
3990
+ .lesli-form-button-icon {
3991
+ display: inline-flex;
3992
+ height: calc(var(--spacing) * 5);
3993
+ width: calc(var(--spacing) * 5);
3994
+ align-items: center;
3995
+ justify-content: center;
3996
+ }
3997
+ .lesli-form-button-icon .material-symbols {
3998
+ font-size: var(--text-xl);
3999
+ line-height: var(--tw-leading, var(--text-xl--line-height));
4000
+ --tw-leading: 1;
4001
+ line-height: 1;
4002
+ }
4003
+ .lesli-form-fieldset {
4004
+ margin-bottom: calc(var(--spacing) * 6);
4005
+ border-radius: var(--radius-2xl);
4006
+ border-style: var(--tw-border-style);
4007
+ border-width: 1px;
4008
+ border-color: var(--color-slate-200);
4009
+ background-color: var(--color-white);
4010
+ padding: calc(var(--spacing) * 6);
4011
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4012
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4013
+ }
4014
+ .lesli-form-legend {
4015
+ margin-bottom: calc(var(--spacing) * 5);
4016
+ margin-left: calc(var(--spacing) * -1);
4017
+ padding-inline: var(--spacing);
4018
+ font-size: var(--text-lg);
4019
+ line-height: var(--tw-leading, var(--text-lg--line-height));
4020
+ --tw-font-weight: var(--font-weight-semibold);
4021
+ font-weight: var(--font-weight-semibold);
4022
+ color: var(--color-slate-800);
4023
+ }
4024
+ .lesli-form-fieldset.is-info {
4025
+ border-color: var(--color-sky-200);
4026
+ background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 40%, transparent);
4027
+ @supports (color: color-mix(in lab, red, red)) {
4028
+ background-color: color-mix(in oklab, var(--color-sky-50) 40%, transparent);
4029
+ }
4030
+ }
4031
+ .lesli-form-fieldset.is-success {
4032
+ border-color: var(--color-emerald-200);
4033
+ background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 40%, transparent);
4034
+ @supports (color: color-mix(in lab, red, red)) {
4035
+ background-color: color-mix(in oklab, var(--color-emerald-50) 40%, transparent);
4036
+ }
4037
+ }
4038
+ .lesli-form-fieldset.is-warning {
4039
+ border-color: var(--color-amber-200);
4040
+ background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 50%, transparent);
4041
+ @supports (color: color-mix(in lab, red, red)) {
4042
+ background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent);
4043
+ }
4044
+ }
4045
+ .lesli-form-fieldset.is-danger {
4046
+ border-color: var(--color-rose-200);
4047
+ background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 40%, transparent);
4048
+ @supports (color: color-mix(in lab, red, red)) {
4049
+ background-color: color-mix(in oklab, var(--color-rose-50) 40%, transparent);
4050
+ }
4051
+ }
4052
+ @media (min-width: 768px) {
4053
+ .lesli-form-field.is-horizontal {
4054
+ display: grid;
4055
+ grid-template-columns: minmax(8rem,1fr) minmax(0,3fr);
4056
+ align-items: flex-start;
4057
+ gap: calc(var(--spacing) * 5);
4058
+ }
4059
+ .lesli-form-field.is-horizontal > .lesli-form-label-wrapper {
4060
+ margin-bottom: 0px;
4061
+ padding-top: calc(var(--spacing) * 2.5);
4062
+ text-align: right;
4063
+ }
4064
+ .lesli-form-field.is-horizontal > .lesli-form-field-body {
4065
+ grid-column-start: 2;
4066
+ }
4067
+ }
4068
+ }
4069
+ @property --tw-translate-x {
4070
+ syntax: "*";
4071
+ inherits: false;
4072
+ initial-value: 0;
4073
+ }
4074
+ @property --tw-translate-y {
4075
+ syntax: "*";
4076
+ inherits: false;
4077
+ initial-value: 0;
4078
+ }
4079
+ @property --tw-translate-z {
4080
+ syntax: "*";
4081
+ inherits: false;
4082
+ initial-value: 0;
4083
+ }
4084
+ @property --tw-space-y-reverse {
4085
+ syntax: "*";
4086
+ inherits: false;
4087
+ initial-value: 0;
4088
+ }
4089
+ @property --tw-border-style {
4090
+ syntax: "*";
4091
+ inherits: false;
4092
+ initial-value: solid;
4093
+ }
4094
+ @property --tw-gradient-position {
4095
+ syntax: "*";
4096
+ inherits: false;
4097
+ }
4098
+ @property --tw-gradient-from {
4099
+ syntax: "<color>";
4100
+ inherits: false;
4101
+ initial-value: #0000;
4102
+ }
4103
+ @property --tw-gradient-via {
4104
+ syntax: "<color>";
4105
+ inherits: false;
4106
+ initial-value: #0000;
4107
+ }
4108
+ @property --tw-gradient-to {
4109
+ syntax: "<color>";
4110
+ inherits: false;
4111
+ initial-value: #0000;
4112
+ }
4113
+ @property --tw-gradient-stops {
4114
+ syntax: "*";
4115
+ inherits: false;
4116
+ }
4117
+ @property --tw-gradient-via-stops {
4118
+ syntax: "*";
4119
+ inherits: false;
4120
+ }
4121
+ @property --tw-gradient-from-position {
4122
+ syntax: "<length-percentage>";
4123
+ inherits: false;
4124
+ initial-value: 0%;
4125
+ }
4126
+ @property --tw-gradient-via-position {
4127
+ syntax: "<length-percentage>";
4128
+ inherits: false;
4129
+ initial-value: 50%;
4130
+ }
4131
+ @property --tw-gradient-to-position {
4132
+ syntax: "<length-percentage>";
4133
+ inherits: false;
4134
+ initial-value: 100%;
4135
+ }
4136
+ @property --tw-leading {
4137
+ syntax: "*";
4138
+ inherits: false;
4139
+ }
4140
+ @property --tw-font-weight {
4141
+ syntax: "*";
4142
+ inherits: false;
4143
+ }
4144
+ @property --tw-tracking {
4145
+ syntax: "*";
4146
+ inherits: false;
4147
+ }
4148
+ @property --tw-ordinal {
4149
+ syntax: "*";
4150
+ inherits: false;
4151
+ }
4152
+ @property --tw-slashed-zero {
4153
+ syntax: "*";
4154
+ inherits: false;
4155
+ }
4156
+ @property --tw-numeric-figure {
4157
+ syntax: "*";
4158
+ inherits: false;
4159
+ }
4160
+ @property --tw-numeric-spacing {
4161
+ syntax: "*";
4162
+ inherits: false;
4163
+ }
4164
+ @property --tw-numeric-fraction {
4165
+ syntax: "*";
4166
+ inherits: false;
4167
+ }
4168
+ @property --tw-shadow {
4169
+ syntax: "*";
4170
+ inherits: false;
4171
+ initial-value: 0 0 #0000;
4172
+ }
4173
+ @property --tw-shadow-color {
4174
+ syntax: "*";
4175
+ inherits: false;
4176
+ }
4177
+ @property --tw-shadow-alpha {
4178
+ syntax: "<percentage>";
4179
+ inherits: false;
4180
+ initial-value: 100%;
4181
+ }
4182
+ @property --tw-inset-shadow {
4183
+ syntax: "*";
4184
+ inherits: false;
4185
+ initial-value: 0 0 #0000;
4186
+ }
4187
+ @property --tw-inset-shadow-color {
4188
+ syntax: "*";
4189
+ inherits: false;
4190
+ }
4191
+ @property --tw-inset-shadow-alpha {
4192
+ syntax: "<percentage>";
4193
+ inherits: false;
4194
+ initial-value: 100%;
4195
+ }
4196
+ @property --tw-ring-color {
4197
+ syntax: "*";
4198
+ inherits: false;
4199
+ }
4200
+ @property --tw-ring-shadow {
4201
+ syntax: "*";
4202
+ inherits: false;
4203
+ initial-value: 0 0 #0000;
4204
+ }
4205
+ @property --tw-inset-ring-color {
4206
+ syntax: "*";
4207
+ inherits: false;
4208
+ }
4209
+ @property --tw-inset-ring-shadow {
4210
+ syntax: "*";
4211
+ inherits: false;
4212
+ initial-value: 0 0 #0000;
4213
+ }
4214
+ @property --tw-ring-inset {
4215
+ syntax: "*";
4216
+ inherits: false;
4217
+ }
4218
+ @property --tw-ring-offset-width {
4219
+ syntax: "<length>";
4220
+ inherits: false;
4221
+ initial-value: 0px;
4222
+ }
4223
+ @property --tw-ring-offset-color {
4224
+ syntax: "*";
4225
+ inherits: false;
4226
+ initial-value: #fff;
4227
+ }
4228
+ @property --tw-ring-offset-shadow {
4229
+ syntax: "*";
4230
+ inherits: false;
4231
+ initial-value: 0 0 #0000;
4232
+ }
4233
+ @property --tw-blur {
4234
+ syntax: "*";
4235
+ inherits: false;
4236
+ }
4237
+ @property --tw-brightness {
4238
+ syntax: "*";
4239
+ inherits: false;
4240
+ }
4241
+ @property --tw-contrast {
4242
+ syntax: "*";
4243
+ inherits: false;
4244
+ }
4245
+ @property --tw-grayscale {
4246
+ syntax: "*";
4247
+ inherits: false;
4248
+ }
4249
+ @property --tw-hue-rotate {
4250
+ syntax: "*";
4251
+ inherits: false;
4252
+ }
4253
+ @property --tw-invert {
4254
+ syntax: "*";
4255
+ inherits: false;
4256
+ }
4257
+ @property --tw-opacity {
4258
+ syntax: "*";
4259
+ inherits: false;
4260
+ }
4261
+ @property --tw-saturate {
4262
+ syntax: "*";
4263
+ inherits: false;
4264
+ }
4265
+ @property --tw-sepia {
4266
+ syntax: "*";
4267
+ inherits: false;
4268
+ }
4269
+ @property --tw-drop-shadow {
4270
+ syntax: "*";
4271
+ inherits: false;
4272
+ }
4273
+ @property --tw-drop-shadow-color {
4274
+ syntax: "*";
4275
+ inherits: false;
4276
+ }
4277
+ @property --tw-drop-shadow-alpha {
4278
+ syntax: "<percentage>";
4279
+ inherits: false;
4280
+ initial-value: 100%;
4281
+ }
4282
+ @property --tw-drop-shadow-size {
4283
+ syntax: "*";
4284
+ inherits: false;
4285
+ }
4286
+ @property --tw-duration {
4287
+ syntax: "*";
4288
+ inherits: false;
4289
+ }
4290
+ @property --tw-outline-style {
4291
+ syntax: "*";
4292
+ inherits: false;
4293
+ initial-value: solid;
4294
+ }
4295
+ @property --tw-content {
4296
+ syntax: "*";
4297
+ inherits: false;
4298
+ initial-value: "";
4299
+ }
4300
+ @keyframes pulse {
4301
+ 50% {
4302
+ opacity: 0.5;
4303
+ }
4304
+ }
4305
+ @layer properties {
4306
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4307
+ *, ::before, ::after, ::backdrop {
4308
+ --tw-translate-x: 0;
4309
+ --tw-translate-y: 0;
4310
+ --tw-translate-z: 0;
4311
+ --tw-space-y-reverse: 0;
4312
+ --tw-border-style: solid;
4313
+ --tw-gradient-position: initial;
4314
+ --tw-gradient-from: #0000;
4315
+ --tw-gradient-via: #0000;
4316
+ --tw-gradient-to: #0000;
4317
+ --tw-gradient-stops: initial;
4318
+ --tw-gradient-via-stops: initial;
4319
+ --tw-gradient-from-position: 0%;
4320
+ --tw-gradient-via-position: 50%;
4321
+ --tw-gradient-to-position: 100%;
4322
+ --tw-leading: initial;
4323
+ --tw-font-weight: initial;
4324
+ --tw-tracking: initial;
4325
+ --tw-ordinal: initial;
4326
+ --tw-slashed-zero: initial;
4327
+ --tw-numeric-figure: initial;
4328
+ --tw-numeric-spacing: initial;
4329
+ --tw-numeric-fraction: initial;
4330
+ --tw-shadow: 0 0 #0000;
4331
+ --tw-shadow-color: initial;
4332
+ --tw-shadow-alpha: 100%;
4333
+ --tw-inset-shadow: 0 0 #0000;
4334
+ --tw-inset-shadow-color: initial;
4335
+ --tw-inset-shadow-alpha: 100%;
4336
+ --tw-ring-color: initial;
4337
+ --tw-ring-shadow: 0 0 #0000;
4338
+ --tw-inset-ring-color: initial;
4339
+ --tw-inset-ring-shadow: 0 0 #0000;
4340
+ --tw-ring-inset: initial;
4341
+ --tw-ring-offset-width: 0px;
4342
+ --tw-ring-offset-color: #fff;
4343
+ --tw-ring-offset-shadow: 0 0 #0000;
4344
+ --tw-blur: initial;
4345
+ --tw-brightness: initial;
4346
+ --tw-contrast: initial;
4347
+ --tw-grayscale: initial;
4348
+ --tw-hue-rotate: initial;
4349
+ --tw-invert: initial;
4350
+ --tw-opacity: initial;
4351
+ --tw-saturate: initial;
4352
+ --tw-sepia: initial;
4353
+ --tw-drop-shadow: initial;
4354
+ --tw-drop-shadow-color: initial;
4355
+ --tw-drop-shadow-alpha: 100%;
4356
+ --tw-drop-shadow-size: initial;
4357
+ --tw-duration: initial;
4358
+ --tw-outline-style: solid;
4359
+ --tw-content: "";
4360
+ }
4361
+ }
4362
+ }