@homlista-devs/ui 1.6.5 → 1.6.7

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.
@@ -0,0 +1,1373 @@
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
+ "Courier New", monospace;
10
+ --color-black: #000;
11
+ --spacing: 0.25rem;
12
+ --container-lg: 32rem;
13
+ --text-sm: 0.875rem;
14
+ --text-sm--line-height: calc(1.25 / 0.875);
15
+ --text-base: 1rem;
16
+ --text-base--line-height: calc(1.5 / 1);
17
+ --text-lg: 1.125rem;
18
+ --text-lg--line-height: calc(1.75 / 1.125);
19
+ --text-2xl: 1.5rem;
20
+ --text-2xl--line-height: calc(2 / 1.5);
21
+ --font-weight-medium: 500;
22
+ --font-weight-semibold: 600;
23
+ --tracking-tight: -0.025em;
24
+ --radius-md: 0.375rem;
25
+ --radius-lg: 0.5rem;
26
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
27
+ --blur-sm: 8px;
28
+ --default-transition-duration: 150ms;
29
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
30
+ --default-font-family: var(--font-sans);
31
+ --default-mono-font-family: var(--font-mono);
32
+ --color-background: #ffffff;
33
+ --color-background-secondary: #fafafa;
34
+ --color-foreground: hsl(222.2, 84%, 4.9%);
35
+ --color-primary-600: hsl(220.9, 87.2%, 46.9%);
36
+ --color-primary: hsl(221.2, 83.2%, 53.3%);
37
+ --color-primary-foreground: hsl(210, 40%, 98%);
38
+ --color-secondary-200: hsl(210, 40%, 94%);
39
+ --color-secondary: hsl(210, 40%, 96%);
40
+ --color-secondary-foreground: hsl(222.2, 84%, 4.9%);
41
+ --color-success-600: hsl(142.1, 71.8%, 39.6%);
42
+ --color-success: hsl(142.1, 70.6%, 45.3%);
43
+ --color-success-foreground: hsl(355.7, 100%, 97.3%);
44
+ --color-warning-600: hsl(32, 95.6%, 43.7%);
45
+ --color-warning: hsl(38, 92%, 50.2%);
46
+ --color-warning-foreground: hsl(48, 96.6%, 9%);
47
+ --color-error-600: hsl(0, 84.2%, 52.4%);
48
+ --color-error: hsl(0, 84.2%, 60.2%);
49
+ --color-error-foreground: hsl(210, 40%, 98%);
50
+ --color-border: hsl(214.3, 31.8%, 91.4%);
51
+ --color-input: hsl(214.3, 31.8%, 91.4%);
52
+ --color-ring: hsl(221.2, 83.2%, 53.3%);
53
+ --color-card: #ffffff;
54
+ --color-card-foreground: hsl(222.2, 84%, 4.9%);
55
+ --color-muted-foreground: hsl(215.4, 16.3%, 46.9%);
56
+ --color-accent: hsl(210, 40%, 96%);
57
+ --color-accent-foreground: hsl(222.2, 84%, 4.9%);
58
+ }
59
+ }
60
+ @layer base {
61
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
62
+ box-sizing: border-box;
63
+ margin: 0;
64
+ padding: 0;
65
+ border: 0 solid;
66
+ }
67
+ html, :host {
68
+ line-height: 1.5;
69
+ -webkit-text-size-adjust: 100%;
70
+ -moz-tab-size: 4;
71
+ -o-tab-size: 4;
72
+ tab-size: 4;
73
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
74
+ font-feature-settings: var(--default-font-feature-settings, normal);
75
+ font-variation-settings: var(--default-font-variation-settings, normal);
76
+ -webkit-tap-highlight-color: transparent;
77
+ }
78
+ hr {
79
+ height: 0;
80
+ color: inherit;
81
+ border-top-width: 1px;
82
+ }
83
+ abbr:where([title]) {
84
+ -webkit-text-decoration: underline dotted;
85
+ text-decoration: underline dotted;
86
+ }
87
+ h1, h2, h3, h4, h5, h6 {
88
+ font-size: inherit;
89
+ font-weight: inherit;
90
+ }
91
+ a {
92
+ color: inherit;
93
+ -webkit-text-decoration: inherit;
94
+ text-decoration: inherit;
95
+ }
96
+ b, strong {
97
+ font-weight: bolder;
98
+ }
99
+ code, kbd, samp, pre {
100
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
101
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
102
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
103
+ font-size: 1em;
104
+ }
105
+ small {
106
+ font-size: 80%;
107
+ }
108
+ sub, sup {
109
+ font-size: 75%;
110
+ line-height: 0;
111
+ position: relative;
112
+ vertical-align: baseline;
113
+ }
114
+ sub {
115
+ bottom: -0.25em;
116
+ }
117
+ sup {
118
+ top: -0.5em;
119
+ }
120
+ table {
121
+ text-indent: 0;
122
+ border-color: inherit;
123
+ border-collapse: collapse;
124
+ }
125
+ :-moz-focusring {
126
+ outline: auto;
127
+ }
128
+ progress {
129
+ vertical-align: baseline;
130
+ }
131
+ summary {
132
+ display: list-item;
133
+ }
134
+ ol, ul, menu {
135
+ list-style: none;
136
+ }
137
+ img, svg, video, canvas, audio, iframe, embed, object {
138
+ display: block;
139
+ vertical-align: middle;
140
+ }
141
+ img, video {
142
+ max-width: 100%;
143
+ height: auto;
144
+ }
145
+ button, input, select, optgroup, textarea, ::file-selector-button {
146
+ font: inherit;
147
+ font-feature-settings: inherit;
148
+ font-variation-settings: inherit;
149
+ letter-spacing: inherit;
150
+ color: inherit;
151
+ border-radius: 0;
152
+ background-color: transparent;
153
+ opacity: 1;
154
+ }
155
+ :where(select:is([multiple], [size])) optgroup {
156
+ font-weight: bolder;
157
+ }
158
+ :where(select:is([multiple], [size])) optgroup option {
159
+ padding-inline-start: 20px;
160
+ }
161
+ ::file-selector-button {
162
+ margin-inline-end: 4px;
163
+ }
164
+ ::-moz-placeholder {
165
+ opacity: 1;
166
+ }
167
+ ::placeholder {
168
+ opacity: 1;
169
+ }
170
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
171
+ ::-moz-placeholder {
172
+ color: currentcolor;
173
+ @supports (color: color-mix(in lab, red, red)) {
174
+ color: color-mix(in oklab, currentcolor 50%, transparent);
175
+ }
176
+ }
177
+ ::placeholder {
178
+ color: currentcolor;
179
+ @supports (color: color-mix(in lab, red, red)) {
180
+ color: color-mix(in oklab, currentcolor 50%, transparent);
181
+ }
182
+ }
183
+ }
184
+ textarea {
185
+ resize: vertical;
186
+ }
187
+ ::-webkit-search-decoration {
188
+ -webkit-appearance: none;
189
+ }
190
+ ::-webkit-date-and-time-value {
191
+ min-height: 1lh;
192
+ text-align: inherit;
193
+ }
194
+ ::-webkit-datetime-edit {
195
+ display: inline-flex;
196
+ }
197
+ ::-webkit-datetime-edit-fields-wrapper {
198
+ padding: 0;
199
+ }
200
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
201
+ padding-block: 0;
202
+ }
203
+ ::-webkit-calendar-picker-indicator {
204
+ line-height: 1;
205
+ }
206
+ :-moz-ui-invalid {
207
+ box-shadow: none;
208
+ }
209
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
210
+ -webkit-appearance: button;
211
+ -moz-appearance: button;
212
+ appearance: button;
213
+ }
214
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
215
+ height: auto;
216
+ }
217
+ [hidden]:where(:not([hidden="until-found"])) {
218
+ display: none !important;
219
+ }
220
+ }
221
+ @layer utilities;
222
+ :root {
223
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
224
+ --font-heading: var(--font-sans);
225
+ --font-body: var(--font-sans);
226
+ --background: 0 0% 100%;
227
+ --background-secondary: 0 0% 98%;
228
+ --background-tertiary: 0 0% 96%;
229
+ --background-inverse: 222.2 84% 4.9%;
230
+ --foreground: 222.2 84% 4.9%;
231
+ --foreground-secondary: 215.4 16.3% 46.9%;
232
+ --foreground-tertiary: 215.4 20.2% 65.1%;
233
+ --foreground-inverse: 210 40% 98%;
234
+ --primary-50: 214.3 31.8% 91.4%;
235
+ --primary-100: 214.3 31.8% 91.4%;
236
+ --primary-200: 213.8 34.1% 84.3%;
237
+ --primary-300: 212.7 35.9% 74.6%;
238
+ --primary-400: 213.1 41.5% 63.1%;
239
+ --primary-500: 221.2 83.2% 53.3%;
240
+ --primary-600: 220.9 87.2% 46.9%;
241
+ --primary-700: 220.9 92.9% 36.1%;
242
+ --primary-800: 220.9 96.3% 28.2%;
243
+ --primary-900: 220.9 98.8% 22.4%;
244
+ --primary: 221.2 83.2% 53.3%;
245
+ --primary-foreground: 210 40% 98%;
246
+ --secondary-50: 210 40% 96%;
247
+ --secondary-100: 210 40% 96%;
248
+ --secondary-200: 210 40% 94%;
249
+ --secondary-300: 210 40% 90%;
250
+ --secondary-400: 210 40% 86%;
251
+ --secondary-500: 210 40% 80%;
252
+ --secondary-600: 217.2 32.6% 17.5%;
253
+ --secondary-700: 217.2 32.6% 15%;
254
+ --secondary-800: 217.2 32.6% 12%;
255
+ --secondary-900: 217.2 32.6% 9%;
256
+ --secondary: 210 40% 96%;
257
+ --secondary-foreground: 222.2 84% 4.9%;
258
+ --success-50: 142.1 76.2% 94.2%;
259
+ --success-100: 142.1 76.2% 94.2%;
260
+ --success-200: 142.1 76.2% 88.4%;
261
+ --success-300: 142.1 76.2% 78.8%;
262
+ --success-400: 142.1 76.2% 66.3%;
263
+ --success-500: 142.1 70.6% 45.3%;
264
+ --success-600: 142.1 71.8% 39.6%;
265
+ --success-700: 142.1 72.9% 32.9%;
266
+ --success-800: 142.1 73.8% 26.8%;
267
+ --success-900: 142.1 74.4% 21.8%;
268
+ --success: 142.1 70.6% 45.3%;
269
+ --success-foreground: 355.7 100% 97.3%;
270
+ --warning-50: 48 96.6% 93.6%;
271
+ --warning-100: 48 96.6% 93.6%;
272
+ --warning-200: 48 96.6% 87.3%;
273
+ --warning-300: 48 96.6% 76.7%;
274
+ --warning-400: 48 96.6% 63.5%;
275
+ --warning-500: 38 92% 50.2%;
276
+ --warning-600: 32 95.6% 43.7%;
277
+ --warning-700: 25 95% 36.7%;
278
+ --warning-800: 21 94.1% 30.8%;
279
+ --warning-900: 18 93.2% 25.9%;
280
+ --warning: 38 92% 50.2%;
281
+ --warning-foreground: 48 96.6% 9%;
282
+ --error-50: 0 84.2% 95.9%;
283
+ --error-100: 0 84.2% 95.9%;
284
+ --error-200: 0 84.2% 91.8%;
285
+ --error-300: 0 84.2% 85.2%;
286
+ --error-400: 0 84.2% 75.3%;
287
+ --error-500: 0 84.2% 60.2%;
288
+ --error-600: 0 84.2% 52.4%;
289
+ --error-700: 0 84.2% 43.9%;
290
+ --error-800: 0 84.2% 36.7%;
291
+ --error-900: 0 84.2% 30.4%;
292
+ --error: 0 84.2% 60.2%;
293
+ --error-foreground: 210 40% 98%;
294
+ --info-50: 199.2 89.1% 93.6%;
295
+ --info-100: 199.2 89.1% 93.6%;
296
+ --info-200: 199.2 89.1% 87.3%;
297
+ --info-300: 199.2 89.1% 76.7%;
298
+ --info-400: 199.2 89.1% 63.5%;
299
+ --info-500: 199.2 89.1% 50.2%;
300
+ --info-600: 199.2 89.1% 43.7%;
301
+ --info-700: 199.2 89.1% 36.7%;
302
+ --info-800: 199.2 89.1% 30.8%;
303
+ --info-900: 199.2 89.1% 25.9%;
304
+ --info: 199.2 89.1% 50.2%;
305
+ --info-foreground: 210 40% 98%;
306
+ --neutral-50: 210 40% 98%;
307
+ --neutral-100: 210 40% 96%;
308
+ --neutral-200: 214.3 31.8% 91.4%;
309
+ --neutral-300: 213.8 34.1% 84.3%;
310
+ --neutral-400: 215.4 16.3% 46.9%;
311
+ --neutral-500: 215.4 20.2% 65.1%;
312
+ --neutral-600: 217.2 32.6% 17.5%;
313
+ --neutral-700: 217.2 32.6% 15%;
314
+ --neutral-800: 217.2 32.6% 12%;
315
+ --neutral-900: 217.2 32.6% 9%;
316
+ --card: 0 0% 100%;
317
+ --card-foreground: 222.2 84% 4.9%;
318
+ --popover: 0 0% 100%;
319
+ --popover-foreground: 222.2 84% 4.9%;
320
+ --muted: 210 40% 96%;
321
+ --muted-foreground: 215.4 16.3% 46.9%;
322
+ --accent: 210 40% 96%;
323
+ --accent-foreground: 222.2 84% 4.9%;
324
+ --destructive: 0 84.2% 60.2%;
325
+ --destructive-foreground: 210 40% 98%;
326
+ --border: 214.3 31.8% 91.4%;
327
+ --input: 214.3 31.8% 91.4%;
328
+ --ring: 221.2 83.2% 53.3%;
329
+ --radius: 0.5rem;
330
+ --radius-sm: 0.25rem;
331
+ --radius-md: 0.375rem;
332
+ --radius-lg: 0.5rem;
333
+ --radius-xl: 0.75rem;
334
+ --radius-2xl: 1rem;
335
+ --radius-3xl: 1.5rem;
336
+ --radius-full: 9999px;
337
+ }
338
+ .dark, [data-theme="dark"] {
339
+ --background: 222.2 84% 4.9%;
340
+ --background-secondary: 222.2 84% 6%;
341
+ --background-tertiary: 222.2 84% 8%;
342
+ --background-inverse: 0 0% 100%;
343
+ --foreground: 210 40% 98%;
344
+ --foreground-secondary: 215 20.2% 65.1%;
345
+ --foreground-tertiary: 217.2 32.6% 17.5%;
346
+ --foreground-inverse: 222.2 84% 4.9%;
347
+ --primary-50: 220.9 98.8% 22.4%;
348
+ --primary-100: 220.9 96.3% 28.2%;
349
+ --primary-200: 220.9 92.9% 36.1%;
350
+ --primary-300: 220.9 87.2% 46.9%;
351
+ --primary-400: 221.2 83.2% 53.3%;
352
+ --primary-500: 217.2 91.2% 59.8%;
353
+ --primary-600: 217.2 91.2% 65%;
354
+ --primary-700: 217.2 91.2% 70%;
355
+ --primary-800: 217.2 91.2% 75%;
356
+ --primary-900: 217.2 91.2% 80%;
357
+ --primary: 217.2 91.2% 59.8%;
358
+ --primary-foreground: 222.2 84% 4.9%;
359
+ --secondary-50: 217.2 32.6% 17.5%;
360
+ --secondary-100: 217.2 32.6% 20%;
361
+ --secondary-200: 217.2 32.6% 25%;
362
+ --secondary-300: 217.2 32.6% 30%;
363
+ --secondary-400: 217.2 32.6% 35%;
364
+ --secondary-500: 217.2 32.6% 40%;
365
+ --secondary-600: 210 40% 96%;
366
+ --secondary-700: 210 40% 94%;
367
+ --secondary-800: 210 40% 90%;
368
+ --secondary-900: 210 40% 86%;
369
+ --secondary: 217.2 32.6% 17.5%;
370
+ --secondary-foreground: 210 40% 98%;
371
+ --success-50: 142.1 74.4% 21.8%;
372
+ --success-100: 142.1 73.8% 26.8%;
373
+ --success-200: 142.1 72.9% 32.9%;
374
+ --success-300: 142.1 71.8% 39.6%;
375
+ --success-400: 142.1 70.6% 45.3%;
376
+ --success-500: 142.1 76.2% 66.3%;
377
+ --success-600: 142.1 76.2% 78.8%;
378
+ --success-700: 142.1 76.2% 88.4%;
379
+ --success-800: 142.1 76.2% 94.2%;
380
+ --success-900: 142.1 76.2% 96%;
381
+ --success: 142.1 70.6% 45.3%;
382
+ --success-foreground: 142.1 76.2% 9%;
383
+ --warning-50: 18 93.2% 25.9%;
384
+ --warning-100: 21 94.1% 30.8%;
385
+ --warning-200: 25 95% 36.7%;
386
+ --warning-300: 32 95.6% 43.7%;
387
+ --warning-400: 38 92% 50.2%;
388
+ --warning-500: 48 96.6% 63.5%;
389
+ --warning-600: 48 96.6% 76.7%;
390
+ --warning-700: 48 96.6% 87.3%;
391
+ --warning-800: 48 96.6% 93.6%;
392
+ --warning-900: 48 96.6% 96%;
393
+ --warning: 38 92% 50.2%;
394
+ --warning-foreground: 48 96.6% 9%;
395
+ --error-50: 0 84.2% 30.4%;
396
+ --error-100: 0 84.2% 36.7%;
397
+ --error-200: 0 84.2% 43.9%;
398
+ --error-300: 0 84.2% 52.4%;
399
+ --error-400: 0 84.2% 60.2%;
400
+ --error-500: 0 84.2% 75.3%;
401
+ --error-600: 0 84.2% 85.2%;
402
+ --error-700: 0 84.2% 91.8%;
403
+ --error-800: 0 84.2% 95.9%;
404
+ --error-900: 0 84.2% 97%;
405
+ --error: 0 62.8% 30.6%;
406
+ --error-foreground: 210 40% 98%;
407
+ --info-50: 199.2 89.1% 25.9%;
408
+ --info-100: 199.2 89.1% 30.8%;
409
+ --info-200: 199.2 89.1% 36.7%;
410
+ --info-300: 199.2 89.1% 43.7%;
411
+ --info-400: 199.2 89.1% 50.2%;
412
+ --info-500: 199.2 89.1% 63.5%;
413
+ --info-600: 199.2 89.1% 76.7%;
414
+ --info-700: 199.2 89.1% 87.3%;
415
+ --info-800: 199.2 89.1% 93.6%;
416
+ --info-900: 199.2 89.1% 96%;
417
+ --info: 199.2 89.1% 50.2%;
418
+ --info-foreground: 210 40% 98%;
419
+ --neutral-50: 217.2 32.6% 9%;
420
+ --neutral-100: 217.2 32.6% 12%;
421
+ --neutral-200: 217.2 32.6% 15%;
422
+ --neutral-300: 217.2 32.6% 17.5%;
423
+ --neutral-400: 215.4 20.2% 65.1%;
424
+ --neutral-500: 215.4 16.3% 46.9%;
425
+ --neutral-600: 213.8 34.1% 84.3%;
426
+ --neutral-700: 214.3 31.8% 91.4%;
427
+ --neutral-800: 210 40% 96%;
428
+ --neutral-900: 210 40% 98%;
429
+ --card: 222.2 84% 4.9%;
430
+ --card-foreground: 210 40% 98%;
431
+ --popover: 222.2 84% 4.9%;
432
+ --popover-foreground: 210 40% 98%;
433
+ --muted: 217.2 32.6% 17.5%;
434
+ --muted-foreground: 215 20.2% 65.1%;
435
+ --accent: 217.2 32.6% 17.5%;
436
+ --accent-foreground: 210 40% 98%;
437
+ --destructive: 0 62.8% 30.6%;
438
+ --destructive-foreground: 210 40% 98%;
439
+ --border: 217.2 32.6% 17.5%;
440
+ --input: 217.2 32.6% 17.5%;
441
+ --ring: 224.3 76.3% 94.1%;
442
+ }
443
+ [data-theme="corporate"] {
444
+ --background: 210 40% 98%;
445
+ --background-secondary: 0 0% 100%;
446
+ --background-tertiary: 213 27% 97%;
447
+ --background-inverse: 216 28% 7%;
448
+ --foreground: 216 28% 7%;
449
+ --foreground-secondary: 215 25% 27%;
450
+ --foreground-tertiary: 215 16% 47%;
451
+ --foreground-inverse: 210 40% 98%;
452
+ --primary-50: 216 28% 95%;
453
+ --primary-100: 216 28% 90%;
454
+ --primary-200: 216 28% 80%;
455
+ --primary-300: 216 28% 60%;
456
+ --primary-400: 216 28% 45%;
457
+ --primary-500: 216 28% 25%;
458
+ --primary-600: 216 28% 20%;
459
+ --primary-700: 216 28% 15%;
460
+ --primary-800: 216 28% 10%;
461
+ --primary-900: 216 28% 7%;
462
+ --primary: 216 28% 25%;
463
+ --primary-foreground: 0 0% 100%;
464
+ --secondary-50: 215 25% 97%;
465
+ --secondary-100: 215 25% 93%;
466
+ --secondary-200: 215 25% 85%;
467
+ --secondary-300: 215 25% 70%;
468
+ --secondary-400: 215 25% 55%;
469
+ --secondary-500: 215 25% 40%;
470
+ --secondary-600: 215 25% 35%;
471
+ --secondary-700: 215 25% 30%;
472
+ --secondary-800: 215 25% 25%;
473
+ --secondary-900: 215 25% 20%;
474
+ --secondary: 215 25% 40%;
475
+ --secondary-foreground: 0 0% 100%;
476
+ --success: 151 55% 42%;
477
+ --success-foreground: 0 0% 100%;
478
+ --warning: 43 96% 44%;
479
+ --warning-foreground: 216 28% 7%;
480
+ --error: 0 72% 51%;
481
+ --error-foreground: 0 0% 100%;
482
+ --info: 200 98% 39%;
483
+ --info-foreground: 0 0% 100%;
484
+ --card: 0 0% 100%;
485
+ --card-foreground: 216 28% 7%;
486
+ --popover: 0 0% 100%;
487
+ --popover-foreground: 216 28% 7%;
488
+ --muted: 215 27% 92%;
489
+ --muted-foreground: 215 25% 27%;
490
+ --accent: 215 27% 92%;
491
+ --accent-foreground: 216 28% 7%;
492
+ --destructive: 0 72% 51%;
493
+ --destructive-foreground: 0 0% 100%;
494
+ --border: 215 27% 90%;
495
+ --input: 215 27% 90%;
496
+ --ring: 216 28% 25%;
497
+ }
498
+ [data-theme="minimal"] {
499
+ --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
500
+ --font-heading: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
501
+ --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
502
+ --background: 0 0% 100%;
503
+ --background-secondary: 0 0% 98%;
504
+ --background-tertiary: 0 0% 96%;
505
+ --background-inverse: 0 0% 0%;
506
+ --foreground: 0 0% 0%;
507
+ --foreground-secondary: 0 0% 40%;
508
+ --foreground-tertiary: 0 0% 60%;
509
+ --foreground-inverse: 0 0% 100%;
510
+ --primary-50: 0 0% 95%;
511
+ --primary-100: 0 0% 90%;
512
+ --primary-200: 0 0% 80%;
513
+ --primary-300: 0 0% 60%;
514
+ --primary-400: 0 0% 40%;
515
+ --primary-500: 0 0% 20%;
516
+ --primary-600: 0 0% 15%;
517
+ --primary-700: 0 0% 10%;
518
+ --primary-800: 0 0% 5%;
519
+ --primary-900: 0 0% 0%;
520
+ --primary: 0 0% 0%;
521
+ --primary-foreground: 0 0% 100%;
522
+ --secondary-50: 0 0% 98%;
523
+ --secondary-100: 0 0% 95%;
524
+ --secondary-200: 0 0% 90%;
525
+ --secondary-300: 0 0% 80%;
526
+ --secondary-400: 0 0% 70%;
527
+ --secondary-500: 0 0% 60%;
528
+ --secondary-600: 0 0% 50%;
529
+ --secondary-700: 0 0% 40%;
530
+ --secondary-800: 0 0% 30%;
531
+ --secondary-900: 0 0% 20%;
532
+ --secondary: 0 0% 40%;
533
+ --secondary-foreground: 0 0% 100%;
534
+ --success: 120 100% 33%;
535
+ --success-foreground: 0 0% 100%;
536
+ --warning: 38 100% 50%;
537
+ --warning-foreground: 0 0% 0%;
538
+ --error: 0 100% 33%;
539
+ --error-foreground: 0 0% 100%;
540
+ --info: 180 100% 33%;
541
+ --info-foreground: 0 0% 100%;
542
+ --card: 0 0% 100%;
543
+ --card-foreground: 0 0% 0%;
544
+ --popover: 0 0% 100%;
545
+ --popover-foreground: 0 0% 0%;
546
+ --muted: 0 0% 98%;
547
+ --muted-foreground: 0 0% 40%;
548
+ --accent: 0 0% 95%;
549
+ --accent-foreground: 0 0% 0%;
550
+ --destructive: 0 100% 33%;
551
+ --destructive-foreground: 0 0% 100%;
552
+ --border: 0 0% 80%;
553
+ --input: 0 0% 80%;
554
+ --ring: 0 0% 0%;
555
+ }
556
+ [data-theme="modern"] {
557
+ --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
558
+ --font-heading: 'Poppins', ui-sans-serif, system-ui, sans-serif;
559
+ --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif;
560
+ --background: 0 0% 100%;
561
+ --background-secondary: 0 0% 98%;
562
+ --background-tertiary: 0 0% 96%;
563
+ --background-inverse: 222.2 84% 4.9%;
564
+ --foreground: 222.2 84% 4.9%;
565
+ --foreground-secondary: 215.4 16.3% 46.9%;
566
+ --foreground-tertiary: 215.4 20.2% 65.1%;
567
+ --foreground-inverse: 210 40% 98%;
568
+ --primary: 221.2 83.2% 53.3%;
569
+ --primary-foreground: 210 40% 98%;
570
+ --secondary: 210 40% 96%;
571
+ --secondary-foreground: 222.2 84% 4.9%;
572
+ --muted: 210 40% 96%;
573
+ --muted-foreground: 215.4 16.3% 46.9%;
574
+ --accent: 210 40% 96%;
575
+ --accent-foreground: 222.2 84% 4.9%;
576
+ --card: 0 0% 100%;
577
+ --card-foreground: 222.2 84% 4.9%;
578
+ --border: 214.3 31.8% 91.4%;
579
+ --input: 214.3 31.8% 91.4%;
580
+ --ring: 221.2 83.2% 53.3%;
581
+ }
582
+ [data-theme="luxury"] {
583
+ --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
584
+ --font-heading: 'Tenor Sans', 'Inter', serif;
585
+ --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
586
+ --background: 0 0% 100%;
587
+ --background-secondary: 0 0% 98%;
588
+ --background-tertiary: 0 0% 96%;
589
+ --background-inverse: 222.2 84% 4.9%;
590
+ --foreground: 222.2 84% 4.9%;
591
+ --foreground-secondary: 215.4 16.3% 46.9%;
592
+ --foreground-tertiary: 215.4 20.2% 65.1%;
593
+ --foreground-inverse: 210 40% 98%;
594
+ --primary: 221.2 83.2% 53.3%;
595
+ --primary-foreground: 210 40% 98%;
596
+ --secondary: 210 40% 96%;
597
+ --secondary-foreground: 222.2 84% 4.9%;
598
+ --muted: 210 40% 96%;
599
+ --muted-foreground: 215.4 16.3% 46.9%;
600
+ --accent: 210 40% 96%;
601
+ --accent-foreground: 222.2 84% 4.9%;
602
+ --card: 0 0% 100%;
603
+ --card-foreground: 222.2 84% 4.9%;
604
+ --border: 214.3 31.8% 91.4%;
605
+ --input: 214.3 31.8% 91.4%;
606
+ --ring: 221.2 83.2% 53.3%;
607
+ }
608
+ @layer base {
609
+ *, *::before, *::after {
610
+ box-sizing: border-box;
611
+ }
612
+ * {
613
+ margin: 0;
614
+ padding: 0;
615
+ }
616
+ html {
617
+ -webkit-text-size-adjust: 100%;
618
+ -webkit-font-smoothing: antialiased;
619
+ -moz-osx-font-smoothing: grayscale;
620
+ text-rendering: optimizeLegibility;
621
+ }
622
+ :focus-visible {
623
+ outline: 2px solid hsl(var(--ring));
624
+ outline-offset: 2px;
625
+ }
626
+ :focus:not(:focus-visible) {
627
+ outline: none;
628
+ }
629
+ img, picture, video, canvas, svg {
630
+ display: block;
631
+ max-width: 100%;
632
+ }
633
+ input, button, select, optgroup, textarea {
634
+ font-family: inherit;
635
+ font-size: 100%;
636
+ line-height: 1.15;
637
+ margin: 0;
638
+ }
639
+ input[type="search"] {
640
+ -webkit-appearance: textfield;
641
+ outline-offset: -2px;
642
+ }
643
+ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
644
+ -webkit-appearance: none;
645
+ }
646
+ button {
647
+ background: none;
648
+ border: none;
649
+ cursor: pointer;
650
+ font: inherit;
651
+ }
652
+ body {
653
+ line-height: 1.5;
654
+ -webkit-font-smoothing: antialiased;
655
+ -moz-osx-font-smoothing: grayscale;
656
+ font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
657
+ }
658
+ ol, ul {
659
+ list-style: none;
660
+ }
661
+ blockquote, q {
662
+ quotes: none;
663
+ }
664
+ blockquote::before, blockquote::after, q::before, q::after {
665
+ content: '';
666
+ content: none;
667
+ }
668
+ table {
669
+ border-collapse: collapse;
670
+ border-spacing: 0;
671
+ }
672
+ body {
673
+ background-color: var(--color-background);
674
+ color: var(--color-foreground);
675
+ font-family: var(--font-body);
676
+ }
677
+ h1, h2, h3, h4, h5, h6 {
678
+ font-family: var(--font-heading);
679
+ }
680
+ * {
681
+ border-color: var(--color-border);
682
+ }
683
+ .focus-ring {
684
+ &:focus {
685
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
686
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
687
+ }
688
+ &:focus {
689
+ --tw-ring-color: var(--color-ring);
690
+ }
691
+ &:focus {
692
+ --tw-ring-offset-width: 2px;
693
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
694
+ }
695
+ &:focus {
696
+ --tw-outline-style: none;
697
+ outline-style: none;
698
+ }
699
+ }
700
+ .sr-only {
701
+ position: absolute;
702
+ width: 1px;
703
+ height: 1px;
704
+ padding: 0;
705
+ margin: -1px;
706
+ overflow: hidden;
707
+ clip: rect(0, 0, 0, 0);
708
+ white-space: nowrap;
709
+ border: 0;
710
+ }
711
+ .skip-link {
712
+ position: absolute;
713
+ top: -40px;
714
+ left: 6px;
715
+ background: hsl(var(--primary));
716
+ color: hsl(var(--primary-foreground));
717
+ padding: 8px;
718
+ text-decoration: none;
719
+ border-radius: 4px;
720
+ z-index: 1000;
721
+ }
722
+ .skip-link:focus {
723
+ top: 6px;
724
+ }
725
+ }
726
+ @layer components {
727
+ .btn {
728
+ display: inline-flex;
729
+ align-items: center;
730
+ justify-content: center;
731
+ border-radius: var(--radius-md);
732
+ font-size: var(--text-sm);
733
+ line-height: var(--tw-leading, var(--text-sm--line-height));
734
+ --tw-font-weight: var(--font-weight-medium);
735
+ font-weight: var(--font-weight-medium);
736
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
737
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
738
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
739
+ &:focus-visible {
740
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
741
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
742
+ }
743
+ &:focus-visible {
744
+ --tw-ring-color: var(--color-ring);
745
+ }
746
+ &:focus-visible {
747
+ --tw-ring-offset-width: 2px;
748
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
749
+ }
750
+ &:focus-visible {
751
+ --tw-outline-style: none;
752
+ outline-style: none;
753
+ }
754
+ &:disabled {
755
+ pointer-events: none;
756
+ }
757
+ &:disabled {
758
+ opacity: 50%;
759
+ }
760
+ }
761
+ .btn-primary {
762
+ background-color: var(--color-primary);
763
+ color: var(--color-primary-foreground);
764
+ &:hover {
765
+ @media (hover: hover) {
766
+ background-color: var(--color-primary-600);
767
+ }
768
+ }
769
+ }
770
+ .btn-secondary {
771
+ background-color: var(--color-secondary);
772
+ color: var(--color-secondary-foreground);
773
+ &:hover {
774
+ @media (hover: hover) {
775
+ background-color: var(--color-secondary-200);
776
+ }
777
+ }
778
+ }
779
+ .btn-success {
780
+ background-color: var(--color-success);
781
+ color: var(--color-success-foreground);
782
+ &:hover {
783
+ @media (hover: hover) {
784
+ background-color: var(--color-success-600);
785
+ }
786
+ }
787
+ }
788
+ .btn-warning {
789
+ background-color: var(--color-warning);
790
+ color: var(--color-warning-foreground);
791
+ &:hover {
792
+ @media (hover: hover) {
793
+ background-color: var(--color-warning-600);
794
+ }
795
+ }
796
+ }
797
+ .btn-error {
798
+ background-color: var(--color-error);
799
+ color: var(--color-error-foreground);
800
+ &:hover {
801
+ @media (hover: hover) {
802
+ background-color: var(--color-error-600);
803
+ }
804
+ }
805
+ }
806
+ .btn-ghost {
807
+ background-color: transparent;
808
+ color: var(--color-foreground);
809
+ &:hover {
810
+ @media (hover: hover) {
811
+ background-color: var(--color-accent);
812
+ }
813
+ }
814
+ &:hover {
815
+ @media (hover: hover) {
816
+ color: var(--color-accent-foreground);
817
+ }
818
+ }
819
+ }
820
+ .card {
821
+ border-radius: var(--radius-lg);
822
+ border-style: var(--tw-border-style);
823
+ border-width: 1px;
824
+ background-color: var(--color-card);
825
+ color: var(--color-card-foreground);
826
+ --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));
827
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
828
+ }
829
+ .card-header {
830
+ display: flex;
831
+ flex-direction: column;
832
+ :where(& > :not(:last-child)) {
833
+ --tw-space-y-reverse: 0;
834
+ margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
835
+ margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
836
+ }
837
+ padding: calc(var(--spacing) * 6);
838
+ }
839
+ .card-title {
840
+ font-size: var(--text-2xl);
841
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
842
+ --tw-leading: 1;
843
+ line-height: 1;
844
+ --tw-font-weight: var(--font-weight-semibold);
845
+ font-weight: var(--font-weight-semibold);
846
+ --tw-tracking: var(--tracking-tight);
847
+ letter-spacing: var(--tracking-tight);
848
+ }
849
+ .card-description {
850
+ font-size: var(--text-sm);
851
+ line-height: var(--tw-leading, var(--text-sm--line-height));
852
+ color: var(--color-muted-foreground);
853
+ }
854
+ .card-content {
855
+ padding: calc(var(--spacing) * 6);
856
+ padding-top: calc(var(--spacing) * 0);
857
+ }
858
+ .card-footer {
859
+ display: flex;
860
+ align-items: center;
861
+ padding: calc(var(--spacing) * 6);
862
+ padding-top: calc(var(--spacing) * 0);
863
+ }
864
+ .form-input {
865
+ display: flex;
866
+ height: calc(var(--spacing) * 10);
867
+ width: 100%;
868
+ border-radius: var(--radius-md);
869
+ border-style: var(--tw-border-style);
870
+ border-width: 1px;
871
+ border-color: var(--color-input);
872
+ background-color: var(--color-background);
873
+ padding-inline: calc(var(--spacing) * 3);
874
+ padding-block: calc(var(--spacing) * 2);
875
+ font-size: var(--text-sm);
876
+ line-height: var(--tw-leading, var(--text-sm--line-height));
877
+ --tw-ring-offset-color: var(--color-background);
878
+ &::file-selector-button {
879
+ border-style: var(--tw-border-style);
880
+ border-width: 0px;
881
+ }
882
+ &::file-selector-button {
883
+ background-color: transparent;
884
+ }
885
+ &::file-selector-button {
886
+ font-size: var(--text-sm);
887
+ line-height: var(--tw-leading, var(--text-sm--line-height));
888
+ }
889
+ &::file-selector-button {
890
+ --tw-font-weight: var(--font-weight-medium);
891
+ font-weight: var(--font-weight-medium);
892
+ }
893
+ &::-moz-placeholder {
894
+ color: var(--color-muted-foreground);
895
+ }
896
+ &::placeholder {
897
+ color: var(--color-muted-foreground);
898
+ }
899
+ &:focus-visible {
900
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
901
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
902
+ }
903
+ &:focus-visible {
904
+ --tw-ring-color: var(--color-ring);
905
+ }
906
+ &:focus-visible {
907
+ --tw-ring-offset-width: 2px;
908
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
909
+ }
910
+ &:focus-visible {
911
+ --tw-outline-style: none;
912
+ outline-style: none;
913
+ }
914
+ &:disabled {
915
+ cursor: not-allowed;
916
+ }
917
+ &:disabled {
918
+ opacity: 50%;
919
+ }
920
+ }
921
+ .form-label {
922
+ font-size: var(--text-sm);
923
+ line-height: var(--tw-leading, var(--text-sm--line-height));
924
+ --tw-leading: 1;
925
+ line-height: 1;
926
+ --tw-font-weight: var(--font-weight-medium);
927
+ font-weight: var(--font-weight-medium);
928
+ &:is(:where(.peer):disabled ~ *) {
929
+ cursor: not-allowed;
930
+ }
931
+ &:is(:where(.peer):disabled ~ *) {
932
+ opacity: 70%;
933
+ }
934
+ }
935
+ .form-error {
936
+ font-size: var(--text-sm);
937
+ line-height: var(--tw-leading, var(--text-sm--line-height));
938
+ color: var(--color-error);
939
+ }
940
+ .modal-overlay {
941
+ position: fixed;
942
+ inset: calc(var(--spacing) * 0);
943
+ z-index: 50;
944
+ background-color: color-mix(in srgb, #000 50%, transparent);
945
+ @supports (color: color-mix(in lab, red, red)) {
946
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
947
+ }
948
+ --tw-backdrop-blur: blur(var(--blur-sm));
949
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
950
+ }
951
+ .modal-content {
952
+ position: fixed;
953
+ top: 50%;
954
+ left: 50%;
955
+ z-index: 50;
956
+ display: grid;
957
+ width: 100%;
958
+ max-width: var(--container-lg);
959
+ --tw-translate-x: -50%;
960
+ --tw-translate-y: -50%;
961
+ translate: var(--tw-translate-x) var(--tw-translate-y);
962
+ gap: calc(var(--spacing) * 4);
963
+ border-style: var(--tw-border-style);
964
+ border-width: 1px;
965
+ background-color: var(--color-background);
966
+ padding: calc(var(--spacing) * 6);
967
+ --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));
968
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
969
+ --tw-duration: 200ms;
970
+ transition-duration: 200ms;
971
+ @media (width >= 40rem) {
972
+ border-radius: var(--radius-lg);
973
+ }
974
+ }
975
+ .container-responsive {
976
+ width: 100%;
977
+ @media (width >= 40rem) {
978
+ max-width: 40rem;
979
+ }
980
+ @media (width >= 48rem) {
981
+ max-width: 48rem;
982
+ }
983
+ @media (width >= 64rem) {
984
+ max-width: 64rem;
985
+ }
986
+ @media (width >= 80rem) {
987
+ max-width: 80rem;
988
+ }
989
+ @media (width >= 96rem) {
990
+ max-width: 96rem;
991
+ }
992
+ margin-inline: auto;
993
+ padding-inline: calc(var(--spacing) * 4);
994
+ @media (width >= 40rem) {
995
+ padding-inline: calc(var(--spacing) * 6);
996
+ }
997
+ @media (width >= 64rem) {
998
+ padding-inline: calc(var(--spacing) * 8);
999
+ }
1000
+ }
1001
+ .grid-responsive {
1002
+ display: grid;
1003
+ gap: calc(var(--spacing) * 4);
1004
+ @media (width >= 40rem) {
1005
+ gap: calc(var(--spacing) * 6);
1006
+ }
1007
+ @media (width >= 64rem) {
1008
+ gap: calc(var(--spacing) * 8);
1009
+ }
1010
+ }
1011
+ .text-responsive {
1012
+ font-size: var(--text-sm);
1013
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1014
+ @media (width >= 40rem) {
1015
+ font-size: var(--text-base);
1016
+ line-height: var(--tw-leading, var(--text-base--line-height));
1017
+ }
1018
+ @media (width >= 64rem) {
1019
+ font-size: var(--text-lg);
1020
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1021
+ }
1022
+ }
1023
+ .animate-in {
1024
+ animation: fade-in 0.2s ease-out;
1025
+ }
1026
+ .animate-out {
1027
+ animation: fade-out 0.2s ease-out;
1028
+ }
1029
+ @media (prefers-contrast: high) {
1030
+ .btn {
1031
+ border-style: var(--tw-border-style);
1032
+ border-width: 2px;
1033
+ border-color: currentcolor;
1034
+ }
1035
+ .card {
1036
+ border-style: var(--tw-border-style);
1037
+ border-width: 2px;
1038
+ }
1039
+ }
1040
+ @media (prefers-reduced-motion: reduce) {
1041
+ *, *::before, *::after {
1042
+ animation-duration: 0.01ms !important;
1043
+ animation-iteration-count: 1 !important;
1044
+ transition-duration: 0.01ms !important;
1045
+ }
1046
+ }
1047
+ }
1048
+ @layer utilities {
1049
+ .font-sans {
1050
+ font-family: var(--font-sans);
1051
+ }
1052
+ .font-heading {
1053
+ font-family: var(--font-heading);
1054
+ }
1055
+ .font-body {
1056
+ font-family: var(--font-body);
1057
+ }
1058
+ .text-balance {
1059
+ text-wrap: balance;
1060
+ }
1061
+ .text-pretty {
1062
+ text-wrap: pretty;
1063
+ }
1064
+ .flex-center {
1065
+ display: flex;
1066
+ align-items: center;
1067
+ justify-content: center;
1068
+ }
1069
+ .grid-center {
1070
+ display: grid;
1071
+ place-items: center;
1072
+ }
1073
+ .space-x-fluid {
1074
+ margin-left: calc(var(--fluid-space) * calc(1 - var(--fluid-space-direction)));
1075
+ margin-right: calc(var(--fluid-space) * var(--fluid-space-direction));
1076
+ }
1077
+ .bg-surface {
1078
+ background-color: var(--color-background-secondary);
1079
+ }
1080
+ .text-on-surface {
1081
+ color: var(--color-foreground);
1082
+ }
1083
+ .focus-ring-primary {
1084
+ &:focus {
1085
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1086
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1087
+ }
1088
+ &:focus {
1089
+ --tw-ring-color: var(--color-primary);
1090
+ }
1091
+ &:focus {
1092
+ --tw-ring-offset-width: 2px;
1093
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1094
+ }
1095
+ &:focus {
1096
+ --tw-outline-style: none;
1097
+ outline-style: none;
1098
+ }
1099
+ }
1100
+ .focus-ring-error {
1101
+ &:focus {
1102
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1103
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1104
+ }
1105
+ &:focus {
1106
+ --tw-ring-color: var(--color-error);
1107
+ }
1108
+ &:focus {
1109
+ --tw-ring-offset-width: 2px;
1110
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1111
+ }
1112
+ &:focus {
1113
+ --tw-outline-style: none;
1114
+ outline-style: none;
1115
+ }
1116
+ }
1117
+ .hover-lift {
1118
+ transition-property: transform, translate, scale, rotate;
1119
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1120
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1121
+ --tw-duration: 200ms;
1122
+ transition-duration: 200ms;
1123
+ --tw-ease: var(--ease-out);
1124
+ transition-timing-function: var(--ease-out);
1125
+ &:hover {
1126
+ @media (hover: hover) {
1127
+ --tw-translate-y: calc(var(--spacing) * -1);
1128
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1129
+ }
1130
+ }
1131
+ }
1132
+ .active-press {
1133
+ transition-property: transform, translate, scale, rotate;
1134
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1135
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1136
+ --tw-duration: 100ms;
1137
+ transition-duration: 100ms;
1138
+ --tw-ease: var(--ease-out);
1139
+ transition-timing-function: var(--ease-out);
1140
+ &:active {
1141
+ --tw-scale-x: 95%;
1142
+ --tw-scale-y: 95%;
1143
+ --tw-scale-z: 95%;
1144
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1145
+ }
1146
+ }
1147
+ .sr-only {
1148
+ position: absolute;
1149
+ margin: -1px;
1150
+ height: 1px;
1151
+ width: 1px;
1152
+ overflow: hidden;
1153
+ border-style: var(--tw-border-style);
1154
+ border-width: 0px;
1155
+ padding: calc(var(--spacing) * 0);
1156
+ white-space: nowrap;
1157
+ clip: rect(0, 0, 0, 0);
1158
+ }
1159
+ @media print {
1160
+ .no-print {
1161
+ display: none !important;
1162
+ }
1163
+ .print-break-before {
1164
+ page-break-before: always;
1165
+ }
1166
+ .print-break-after {
1167
+ page-break-after: always;
1168
+ }
1169
+ }
1170
+ }
1171
+ @property --tw-shadow {
1172
+ syntax: "*";
1173
+ inherits: false;
1174
+ initial-value: 0 0 #0000;
1175
+ }
1176
+ @property --tw-shadow-color {
1177
+ syntax: "*";
1178
+ inherits: false;
1179
+ }
1180
+ @property --tw-shadow-alpha {
1181
+ syntax: "<percentage>";
1182
+ inherits: false;
1183
+ initial-value: 100%;
1184
+ }
1185
+ @property --tw-inset-shadow {
1186
+ syntax: "*";
1187
+ inherits: false;
1188
+ initial-value: 0 0 #0000;
1189
+ }
1190
+ @property --tw-inset-shadow-color {
1191
+ syntax: "*";
1192
+ inherits: false;
1193
+ }
1194
+ @property --tw-inset-shadow-alpha {
1195
+ syntax: "<percentage>";
1196
+ inherits: false;
1197
+ initial-value: 100%;
1198
+ }
1199
+ @property --tw-ring-color {
1200
+ syntax: "*";
1201
+ inherits: false;
1202
+ }
1203
+ @property --tw-ring-shadow {
1204
+ syntax: "*";
1205
+ inherits: false;
1206
+ initial-value: 0 0 #0000;
1207
+ }
1208
+ @property --tw-inset-ring-color {
1209
+ syntax: "*";
1210
+ inherits: false;
1211
+ }
1212
+ @property --tw-inset-ring-shadow {
1213
+ syntax: "*";
1214
+ inherits: false;
1215
+ initial-value: 0 0 #0000;
1216
+ }
1217
+ @property --tw-ring-inset {
1218
+ syntax: "*";
1219
+ inherits: false;
1220
+ }
1221
+ @property --tw-ring-offset-width {
1222
+ syntax: "<length>";
1223
+ inherits: false;
1224
+ initial-value: 0px;
1225
+ }
1226
+ @property --tw-ring-offset-color {
1227
+ syntax: "*";
1228
+ inherits: false;
1229
+ initial-value: #fff;
1230
+ }
1231
+ @property --tw-ring-offset-shadow {
1232
+ syntax: "*";
1233
+ inherits: false;
1234
+ initial-value: 0 0 #0000;
1235
+ }
1236
+ @property --tw-font-weight {
1237
+ syntax: "*";
1238
+ inherits: false;
1239
+ }
1240
+ @property --tw-border-style {
1241
+ syntax: "*";
1242
+ inherits: false;
1243
+ initial-value: solid;
1244
+ }
1245
+ @property --tw-space-y-reverse {
1246
+ syntax: "*";
1247
+ inherits: false;
1248
+ initial-value: 0;
1249
+ }
1250
+ @property --tw-leading {
1251
+ syntax: "*";
1252
+ inherits: false;
1253
+ }
1254
+ @property --tw-tracking {
1255
+ syntax: "*";
1256
+ inherits: false;
1257
+ }
1258
+ @property --tw-backdrop-blur {
1259
+ syntax: "*";
1260
+ inherits: false;
1261
+ }
1262
+ @property --tw-backdrop-brightness {
1263
+ syntax: "*";
1264
+ inherits: false;
1265
+ }
1266
+ @property --tw-backdrop-contrast {
1267
+ syntax: "*";
1268
+ inherits: false;
1269
+ }
1270
+ @property --tw-backdrop-grayscale {
1271
+ syntax: "*";
1272
+ inherits: false;
1273
+ }
1274
+ @property --tw-backdrop-hue-rotate {
1275
+ syntax: "*";
1276
+ inherits: false;
1277
+ }
1278
+ @property --tw-backdrop-invert {
1279
+ syntax: "*";
1280
+ inherits: false;
1281
+ }
1282
+ @property --tw-backdrop-opacity {
1283
+ syntax: "*";
1284
+ inherits: false;
1285
+ }
1286
+ @property --tw-backdrop-saturate {
1287
+ syntax: "*";
1288
+ inherits: false;
1289
+ }
1290
+ @property --tw-backdrop-sepia {
1291
+ syntax: "*";
1292
+ inherits: false;
1293
+ }
1294
+ @property --tw-translate-x {
1295
+ syntax: "*";
1296
+ inherits: false;
1297
+ initial-value: 0;
1298
+ }
1299
+ @property --tw-translate-y {
1300
+ syntax: "*";
1301
+ inherits: false;
1302
+ initial-value: 0;
1303
+ }
1304
+ @property --tw-translate-z {
1305
+ syntax: "*";
1306
+ inherits: false;
1307
+ initial-value: 0;
1308
+ }
1309
+ @property --tw-duration {
1310
+ syntax: "*";
1311
+ inherits: false;
1312
+ }
1313
+ @property --tw-ease {
1314
+ syntax: "*";
1315
+ inherits: false;
1316
+ }
1317
+ @property --tw-scale-x {
1318
+ syntax: "*";
1319
+ inherits: false;
1320
+ initial-value: 1;
1321
+ }
1322
+ @property --tw-scale-y {
1323
+ syntax: "*";
1324
+ inherits: false;
1325
+ initial-value: 1;
1326
+ }
1327
+ @property --tw-scale-z {
1328
+ syntax: "*";
1329
+ inherits: false;
1330
+ initial-value: 1;
1331
+ }
1332
+ @layer properties {
1333
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1334
+ *, ::before, ::after, ::backdrop {
1335
+ --tw-shadow: 0 0 #0000;
1336
+ --tw-shadow-color: initial;
1337
+ --tw-shadow-alpha: 100%;
1338
+ --tw-inset-shadow: 0 0 #0000;
1339
+ --tw-inset-shadow-color: initial;
1340
+ --tw-inset-shadow-alpha: 100%;
1341
+ --tw-ring-color: initial;
1342
+ --tw-ring-shadow: 0 0 #0000;
1343
+ --tw-inset-ring-color: initial;
1344
+ --tw-inset-ring-shadow: 0 0 #0000;
1345
+ --tw-ring-inset: initial;
1346
+ --tw-ring-offset-width: 0px;
1347
+ --tw-ring-offset-color: #fff;
1348
+ --tw-ring-offset-shadow: 0 0 #0000;
1349
+ --tw-font-weight: initial;
1350
+ --tw-border-style: solid;
1351
+ --tw-space-y-reverse: 0;
1352
+ --tw-leading: initial;
1353
+ --tw-tracking: initial;
1354
+ --tw-backdrop-blur: initial;
1355
+ --tw-backdrop-brightness: initial;
1356
+ --tw-backdrop-contrast: initial;
1357
+ --tw-backdrop-grayscale: initial;
1358
+ --tw-backdrop-hue-rotate: initial;
1359
+ --tw-backdrop-invert: initial;
1360
+ --tw-backdrop-opacity: initial;
1361
+ --tw-backdrop-saturate: initial;
1362
+ --tw-backdrop-sepia: initial;
1363
+ --tw-translate-x: 0;
1364
+ --tw-translate-y: 0;
1365
+ --tw-translate-z: 0;
1366
+ --tw-duration: initial;
1367
+ --tw-ease: initial;
1368
+ --tw-scale-x: 1;
1369
+ --tw-scale-y: 1;
1370
+ --tw-scale-z: 1;
1371
+ }
1372
+ }
1373
+ }