activeadmin_mitosis_editor 0.1.0

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 (165) hide show
  1. checksums.yaml +7 -0
  2. data/CHANGELOG.md +17 -0
  3. data/CLAUDE.md +118 -0
  4. data/Gemfile +3 -0
  5. data/LICENSE +21 -0
  6. data/README.md +126 -0
  7. data/RELEASE.md +80 -0
  8. data/Rakefile +2 -0
  9. data/activeadmin_mitosis_editor.gemspec +17 -0
  10. data/app/views/inputs/mitosis_editor_input/_dependencies.html.erb +9 -0
  11. data/app/views/inputs/mitosis_editor_input/_form.html.erb +52 -0
  12. data/bin/console +5 -0
  13. data/bin/setup +14 -0
  14. data/demo/.dockerignore +51 -0
  15. data/demo/.gitattributes +9 -0
  16. data/demo/.gitignore +37 -0
  17. data/demo/.kamal/hooks/docker-setup.sample +3 -0
  18. data/demo/.kamal/hooks/post-app-boot.sample +3 -0
  19. data/demo/.kamal/hooks/post-deploy.sample +14 -0
  20. data/demo/.kamal/hooks/post-proxy-reboot.sample +3 -0
  21. data/demo/.kamal/hooks/pre-app-boot.sample +3 -0
  22. data/demo/.kamal/hooks/pre-build.sample +51 -0
  23. data/demo/.kamal/hooks/pre-connect.sample +47 -0
  24. data/demo/.kamal/hooks/pre-deploy.sample +122 -0
  25. data/demo/.kamal/hooks/pre-proxy-reboot.sample +3 -0
  26. data/demo/.kamal/secrets +20 -0
  27. data/demo/.rubocop.yml +8 -0
  28. data/demo/.ruby-version +1 -0
  29. data/demo/Dockerfile +76 -0
  30. data/demo/Gemfile +78 -0
  31. data/demo/Procfile.dev +2 -0
  32. data/demo/README.md +24 -0
  33. data/demo/Rakefile +6 -0
  34. data/demo/app/admin/articles.rb +12 -0
  35. data/demo/app/admin/dashboard.rb +17 -0
  36. data/demo/app/admin/pages.rb +12 -0
  37. data/demo/app/admin/posts.rb +12 -0
  38. data/demo/app/assets/builds/.keep +0 -0
  39. data/demo/app/assets/builds/active_admin.css +3852 -0
  40. data/demo/app/assets/images/.keep +0 -0
  41. data/demo/app/assets/stylesheets/active_admin.css +3 -0
  42. data/demo/app/assets/stylesheets/application.css +1 -0
  43. data/demo/app/assets/stylesheets/mitosis-editor.css +1 -0
  44. data/demo/app/assets/stylesheets/theme-dark.css +1 -0
  45. data/demo/app/assets/stylesheets/theme-light.css +1 -0
  46. data/demo/app/controllers/application_controller.rb +7 -0
  47. data/demo/app/controllers/articles_controller.rb +7 -0
  48. data/demo/app/controllers/concerns/.keep +0 -0
  49. data/demo/app/helpers/application_helper.rb +2 -0
  50. data/demo/app/helpers/articles_helper.rb +2 -0
  51. data/demo/app/javascript/application.js +3 -0
  52. data/demo/app/javascript/controllers/application.js +9 -0
  53. data/demo/app/javascript/controllers/hello_controller.js +7 -0
  54. data/demo/app/javascript/controllers/index.js +4 -0
  55. data/demo/app/jobs/application_job.rb +7 -0
  56. data/demo/app/mailers/application_mailer.rb +4 -0
  57. data/demo/app/models/application_record.rb +3 -0
  58. data/demo/app/models/article.rb +5 -0
  59. data/demo/app/models/concerns/.keep +0 -0
  60. data/demo/app/models/page.rb +5 -0
  61. data/demo/app/models/post.rb +5 -0
  62. data/demo/app/views/articles/_article.html.erb +12 -0
  63. data/demo/app/views/articles/_article.json.jbuilder +2 -0
  64. data/demo/app/views/articles/_form.html.erb +27 -0
  65. data/demo/app/views/articles/edit.html.erb +12 -0
  66. data/demo/app/views/articles/index.html.erb +16 -0
  67. data/demo/app/views/articles/index.json.jbuilder +1 -0
  68. data/demo/app/views/articles/new.html.erb +11 -0
  69. data/demo/app/views/articles/show.html.erb +10 -0
  70. data/demo/app/views/articles/show.json.jbuilder +1 -0
  71. data/demo/app/views/inputs/mitosis_editor_input/_dependencies.html.erb +17 -0
  72. data/demo/app/views/layouts/application.html.erb +29 -0
  73. data/demo/app/views/layouts/mailer.html.erb +13 -0
  74. data/demo/app/views/layouts/mailer.text.erb +1 -0
  75. data/demo/app/views/pwa/manifest.json.erb +22 -0
  76. data/demo/app/views/pwa/service-worker.js +26 -0
  77. data/demo/bin/brakeman +7 -0
  78. data/demo/bin/bundler-audit +6 -0
  79. data/demo/bin/ci +6 -0
  80. data/demo/bin/dev +8 -0
  81. data/demo/bin/docker-entrypoint +8 -0
  82. data/demo/bin/importmap +4 -0
  83. data/demo/bin/jobs +6 -0
  84. data/demo/bin/kamal +27 -0
  85. data/demo/bin/rails +4 -0
  86. data/demo/bin/rake +4 -0
  87. data/demo/bin/rubocop +8 -0
  88. data/demo/bin/setup +35 -0
  89. data/demo/bin/thrust +5 -0
  90. data/demo/config/application.rb +27 -0
  91. data/demo/config/boot.rb +4 -0
  92. data/demo/config/bundler-audit.yml +5 -0
  93. data/demo/config/cable.yml +17 -0
  94. data/demo/config/cache.yml +16 -0
  95. data/demo/config/ci.rb +23 -0
  96. data/demo/config/credentials.yml.enc +1 -0
  97. data/demo/config/database.yml +41 -0
  98. data/demo/config/deploy.yml +120 -0
  99. data/demo/config/environment.rb +21 -0
  100. data/demo/config/environments/development.rb +78 -0
  101. data/demo/config/environments/production.rb +90 -0
  102. data/demo/config/environments/test.rb +53 -0
  103. data/demo/config/importmap.rb +7 -0
  104. data/demo/config/initializers/active_admin.rb +275 -0
  105. data/demo/config/initializers/activeadmin_mitosis_editor.rb +19 -0
  106. data/demo/config/initializers/assets.rb +7 -0
  107. data/demo/config/initializers/content_security_policy.rb +29 -0
  108. data/demo/config/initializers/filter_parameter_logging.rb +8 -0
  109. data/demo/config/initializers/inflections.rb +16 -0
  110. data/demo/config/locales/en.yml +31 -0
  111. data/demo/config/puma.rb +42 -0
  112. data/demo/config/queue.yml +18 -0
  113. data/demo/config/recurring.yml +15 -0
  114. data/demo/config/routes.rb +16 -0
  115. data/demo/config/storage.yml +27 -0
  116. data/demo/config.ru +6 -0
  117. data/demo/db/cable_schema.rb +11 -0
  118. data/demo/db/cache_schema.rb +12 -0
  119. data/demo/db/migrate/20260215110410_create_active_admin_comments.rb +16 -0
  120. data/demo/db/migrate/20260215110416_create_articles.rb +10 -0
  121. data/demo/db/migrate/20260216124916_create_posts.rb +10 -0
  122. data/demo/db/migrate/20260216124919_create_pages.rb +10 -0
  123. data/demo/db/queue_schema.rb +129 -0
  124. data/demo/db/schema.rb +48 -0
  125. data/demo/db/seeds.rb +9 -0
  126. data/demo/lib/tasks/.keep +0 -0
  127. data/demo/log/.keep +0 -0
  128. data/demo/package-lock.json +1260 -0
  129. data/demo/package.json +13 -0
  130. data/demo/public/400.html +135 -0
  131. data/demo/public/404.html +135 -0
  132. data/demo/public/406-unsupported-browser.html +135 -0
  133. data/demo/public/422.html +135 -0
  134. data/demo/public/500.html +135 -0
  135. data/demo/public/icon.png +0 -0
  136. data/demo/public/icon.svg +3 -0
  137. data/demo/public/robots.txt +1 -0
  138. data/demo/script/.keep +0 -0
  139. data/demo/spec/rails_helper.rb +72 -0
  140. data/demo/spec/spec_helper.rb +94 -0
  141. data/demo/spec/system/admin_articles_spec.rb +22 -0
  142. data/demo/spec/system/mitosis_editor_prism_spec.rb +34 -0
  143. data/demo/spec/system/mitosis_editor_theme_spec.rb +63 -0
  144. data/demo/storage/.keep +0 -0
  145. data/demo/tailwind-active_admin.config.js +17 -0
  146. data/demo/tmp/.keep +0 -0
  147. data/demo/tmp/storage/.keep +0 -0
  148. data/demo/vendor/.keep +0 -0
  149. data/demo/vendor/javascript/.keep +0 -0
  150. data/docs/plans/2026-02-15-mitosis-editor-gem-design.md +70 -0
  151. data/docs/plans/2026-02-15-mitosis-editor-gem-implementation.md +407 -0
  152. data/lib/activeadmin_mitosis_editor/inputs/mitosis_editor_input.rb +29 -0
  153. data/lib/activeadmin_mitosis_editor/railtie.rb +7 -0
  154. data/lib/activeadmin_mitosis_editor/version.rb +3 -0
  155. data/lib/activeadmin_mitosis_editor.rb +13 -0
  156. data/lib/generators/mitosis_editor/styles_generator.rb +23 -0
  157. data/lib/generators/mitosis_editor/templates/_dependencies.html.erb +17 -0
  158. data/lib/generators/mitosis_editor/views_generator.rb +14 -0
  159. data/preview.png +0 -0
  160. data/script/bump-version +78 -0
  161. data/vendor/assets/javascripts/mitosis-editor.js +61 -0
  162. data/vendor/assets/stylesheets/mitosis-editor.css +1 -0
  163. data/vendor/assets/stylesheets/theme-dark.min.css +1 -0
  164. data/vendor/assets/stylesheets/theme-light.min.css +1 -0
  165. metadata +248 -0
@@ -0,0 +1,3852 @@
1
+ /*! tailwindcss v4.1.18 | 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-red-50: oklch(97.1% 0.013 17.38);
11
+ --color-red-200: oklch(88.5% 0.062 18.334);
12
+ --color-red-300: oklch(80.8% 0.114 19.571);
13
+ --color-red-400: oklch(70.4% 0.191 22.216);
14
+ --color-red-500: oklch(63.7% 0.237 25.331);
15
+ --color-red-600: oklch(57.7% 0.245 27.325);
16
+ --color-red-800: oklch(44.4% 0.177 26.899);
17
+ --color-yellow-50: oklch(98.7% 0.026 102.212);
18
+ --color-yellow-300: oklch(90.5% 0.182 98.111);
19
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
20
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
21
+ --color-green-50: oklch(98.2% 0.018 155.826);
22
+ --color-green-100: oklch(96.2% 0.044 156.743);
23
+ --color-green-300: oklch(87.1% 0.15 154.449);
24
+ --color-green-400: oklch(79.2% 0.209 151.711);
25
+ --color-green-700: oklch(52.7% 0.154 150.069);
26
+ --color-green-800: oklch(44.8% 0.119 151.328);
27
+ --color-blue-300: oklch(80.9% 0.105 251.813);
28
+ --color-blue-500: oklch(62.3% 0.214 259.815);
29
+ --color-blue-600: oklch(54.6% 0.245 262.881);
30
+ --color-blue-700: oklch(48.8% 0.243 264.376);
31
+ --color-blue-800: oklch(42.4% 0.199 265.638);
32
+ --color-indigo-100: oklch(93% 0.034 272.788);
33
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
34
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
35
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
36
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
37
+ --color-indigo-800: oklch(39.8% 0.195 277.366);
38
+ --color-gray-50: oklch(98.5% 0.002 247.839);
39
+ --color-gray-100: oklch(96.7% 0.003 264.542);
40
+ --color-gray-200: oklch(92.8% 0.006 264.531);
41
+ --color-gray-300: oklch(87.2% 0.01 258.338);
42
+ --color-gray-400: oklch(70.7% 0.022 261.325);
43
+ --color-gray-500: oklch(55.1% 0.027 264.364);
44
+ --color-gray-600: oklch(44.6% 0.03 256.802);
45
+ --color-gray-700: oklch(37.3% 0.034 259.733);
46
+ --color-gray-800: oklch(27.8% 0.033 256.848);
47
+ --color-gray-900: oklch(21% 0.034 264.665);
48
+ --color-gray-950: oklch(13% 0.028 261.692);
49
+ --color-black: #000;
50
+ --color-white: #fff;
51
+ --spacing: 0.25rem;
52
+ --container-md: 28rem;
53
+ --container-3xl: 48rem;
54
+ --text-xs: 0.75rem;
55
+ --text-xs--line-height: calc(1 / 0.75);
56
+ --text-sm: 0.875rem;
57
+ --text-sm--line-height: calc(1.25 / 0.875);
58
+ --text-base: 1rem;
59
+ --text-base--line-height: calc(1.5 / 1);
60
+ --text-lg: 1.125rem;
61
+ --text-lg--line-height: calc(1.75 / 1.125);
62
+ --text-xl: 1.25rem;
63
+ --text-xl--line-height: calc(1.75 / 1.25);
64
+ --text-2xl: 1.5rem;
65
+ --text-2xl--line-height: calc(2 / 1.5);
66
+ --text-3xl: 1.875rem;
67
+ --text-3xl--line-height: calc(2.25 / 1.875);
68
+ --text-4xl: 2.25rem;
69
+ --text-4xl--line-height: calc(2.5 / 2.25);
70
+ --font-weight-normal: 400;
71
+ --font-weight-medium: 500;
72
+ --font-weight-semibold: 600;
73
+ --font-weight-bold: 700;
74
+ --leading-tight: 1.25;
75
+ --radius-sm: 0.25rem;
76
+ --radius-md: 0.375rem;
77
+ --radius-lg: 0.5rem;
78
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
79
+ --blur-md: 12px;
80
+ --default-transition-duration: 150ms;
81
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
82
+ --default-font-family: var(--font-sans);
83
+ --default-mono-font-family: var(--font-mono);
84
+ }
85
+ }
86
+ @layer base {
87
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
88
+ box-sizing: border-box;
89
+ margin: 0;
90
+ padding: 0;
91
+ border: 0 solid;
92
+ }
93
+ html, :host {
94
+ line-height: 1.5;
95
+ -webkit-text-size-adjust: 100%;
96
+ tab-size: 4;
97
+ 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");
98
+ font-feature-settings: var(--default-font-feature-settings, normal);
99
+ font-variation-settings: var(--default-font-variation-settings, normal);
100
+ -webkit-tap-highlight-color: transparent;
101
+ }
102
+ hr {
103
+ height: 0;
104
+ color: inherit;
105
+ border-top-width: 1px;
106
+ }
107
+ abbr:where([title]) {
108
+ -webkit-text-decoration: underline dotted;
109
+ text-decoration: underline dotted;
110
+ }
111
+ h1, h2, h3, h4, h5, h6 {
112
+ font-size: inherit;
113
+ font-weight: inherit;
114
+ }
115
+ a {
116
+ color: inherit;
117
+ -webkit-text-decoration: inherit;
118
+ text-decoration: inherit;
119
+ }
120
+ b, strong {
121
+ font-weight: bolder;
122
+ }
123
+ code, kbd, samp, pre {
124
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
125
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
126
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
127
+ font-size: 1em;
128
+ }
129
+ small {
130
+ font-size: 80%;
131
+ }
132
+ sub, sup {
133
+ font-size: 75%;
134
+ line-height: 0;
135
+ position: relative;
136
+ vertical-align: baseline;
137
+ }
138
+ sub {
139
+ bottom: -0.25em;
140
+ }
141
+ sup {
142
+ top: -0.5em;
143
+ }
144
+ table {
145
+ text-indent: 0;
146
+ border-color: inherit;
147
+ border-collapse: collapse;
148
+ }
149
+ :-moz-focusring {
150
+ outline: auto;
151
+ }
152
+ progress {
153
+ vertical-align: baseline;
154
+ }
155
+ summary {
156
+ display: list-item;
157
+ }
158
+ ol, ul, menu {
159
+ list-style: none;
160
+ }
161
+ img, svg, video, canvas, audio, iframe, embed, object {
162
+ display: block;
163
+ vertical-align: middle;
164
+ }
165
+ img, video {
166
+ max-width: 100%;
167
+ height: auto;
168
+ }
169
+ button, input, select, optgroup, textarea, ::file-selector-button {
170
+ font: inherit;
171
+ font-feature-settings: inherit;
172
+ font-variation-settings: inherit;
173
+ letter-spacing: inherit;
174
+ color: inherit;
175
+ border-radius: 0;
176
+ background-color: transparent;
177
+ opacity: 1;
178
+ }
179
+ :where(select:is([multiple], [size])) optgroup {
180
+ font-weight: bolder;
181
+ }
182
+ :where(select:is([multiple], [size])) optgroup option {
183
+ padding-inline-start: 20px;
184
+ }
185
+ ::file-selector-button {
186
+ margin-inline-end: 4px;
187
+ }
188
+ ::placeholder {
189
+ opacity: 1;
190
+ }
191
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
192
+ ::placeholder {
193
+ color: currentcolor;
194
+ @supports (color: color-mix(in lab, red, red)) {
195
+ color: color-mix(in oklab, currentcolor 50%, transparent);
196
+ }
197
+ }
198
+ }
199
+ textarea {
200
+ resize: vertical;
201
+ }
202
+ ::-webkit-search-decoration {
203
+ -webkit-appearance: none;
204
+ }
205
+ ::-webkit-date-and-time-value {
206
+ min-height: 1lh;
207
+ text-align: inherit;
208
+ }
209
+ ::-webkit-datetime-edit {
210
+ display: inline-flex;
211
+ }
212
+ ::-webkit-datetime-edit-fields-wrapper {
213
+ padding: 0;
214
+ }
215
+ ::-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 {
216
+ padding-block: 0;
217
+ }
218
+ ::-webkit-calendar-picker-indicator {
219
+ line-height: 1;
220
+ }
221
+ :-moz-ui-invalid {
222
+ box-shadow: none;
223
+ }
224
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
225
+ appearance: button;
226
+ }
227
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
228
+ height: auto;
229
+ }
230
+ [hidden]:where(:not([hidden="until-found"])) {
231
+ display: none !important;
232
+ }
233
+ }
234
+ @layer utilities {
235
+ .batch-actions-dropdown-toggle {
236
+ display: inline-flex;
237
+ align-items: center;
238
+ justify-content: center;
239
+ gap: calc(var(--spacing) * 2);
240
+ border-radius: var(--radius-md);
241
+ border-style: var(--tw-border-style);
242
+ border-width: 1px;
243
+ border-color: var(--color-gray-200);
244
+ background-color: var(--color-white);
245
+ padding-inline: calc(var(--spacing) * 3);
246
+ padding-block: calc(var(--spacing) * 2);
247
+ font-size: var(--text-sm);
248
+ line-height: var(--tw-leading, var(--text-sm--line-height));
249
+ --tw-font-weight: var(--font-weight-medium);
250
+ font-weight: var(--font-weight-medium);
251
+ color: var(--color-gray-900);
252
+ transition-property: opacity;
253
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
254
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
255
+ &:hover {
256
+ @media (hover: hover) {
257
+ background-color: var(--color-gray-100);
258
+ }
259
+ }
260
+ &:hover {
261
+ @media (hover: hover) {
262
+ color: var(--color-blue-700);
263
+ }
264
+ }
265
+ &:focus {
266
+ z-index: 10;
267
+ }
268
+ &:focus {
269
+ color: var(--color-blue-700);
270
+ }
271
+ &:focus {
272
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
273
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
274
+ }
275
+ &:focus {
276
+ --tw-ring-color: var(--color-blue-700);
277
+ }
278
+ &:disabled {
279
+ pointer-events: none;
280
+ }
281
+ &:disabled {
282
+ border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
283
+ @supports (color: color-mix(in lab, red, red)) {
284
+ border-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
285
+ }
286
+ }
287
+ &:disabled {
288
+ color: var(--color-gray-400);
289
+ }
290
+ &:where(.dark, .dark *) {
291
+ border-color: var(--color-gray-700);
292
+ }
293
+ &:where(.dark, .dark *) {
294
+ background-color: var(--color-gray-800);
295
+ }
296
+ &:where(.dark, .dark *) {
297
+ color: var(--color-white);
298
+ }
299
+ &:where(.dark, .dark *) {
300
+ &:hover {
301
+ @media (hover: hover) {
302
+ background-color: var(--color-gray-700);
303
+ }
304
+ }
305
+ }
306
+ &:where(.dark, .dark *) {
307
+ &:hover {
308
+ @media (hover: hover) {
309
+ color: var(--color-white);
310
+ }
311
+ }
312
+ }
313
+ &:where(.dark, .dark *) {
314
+ &:focus {
315
+ color: var(--color-white);
316
+ }
317
+ }
318
+ &:where(.dark, .dark *) {
319
+ &:focus {
320
+ --tw-ring-color: var(--color-blue-500);
321
+ }
322
+ }
323
+ &:where(.dark, .dark *) {
324
+ &:disabled {
325
+ border-color: var(--color-gray-800);
326
+ }
327
+ }
328
+ &:where(.dark, .dark *) {
329
+ &:disabled {
330
+ background-color: var(--color-gray-900);
331
+ }
332
+ }
333
+ &:where(.dark, .dark *) {
334
+ &:disabled {
335
+ color: var(--color-gray-700);
336
+ }
337
+ }
338
+ }
339
+ .data-table-sorted-icon {
340
+ visibility: hidden;
341
+ height: 5px;
342
+ width: 8px;
343
+ :where(th[data-sort-direction]) & {
344
+ visibility: visible;
345
+ }
346
+ :where(th[data-sort-direction="asc"]) & {
347
+ rotate: 180deg;
348
+ }
349
+ }
350
+ .collapse {
351
+ visibility: collapse;
352
+ }
353
+ .invisible {
354
+ visibility: hidden;
355
+ }
356
+ .visible {
357
+ visibility: visible;
358
+ }
359
+ .formtastic {
360
+ font-size: var(--text-sm);
361
+ line-height: var(--tw-leading, var(--text-sm--line-height));
362
+ & :where(.inputs,.has-many-fields) {
363
+ margin-bottom: calc(var(--spacing) * 6);
364
+ }
365
+ & :where(.fieldset-title, .has-many-fields-title) {
366
+ margin-bottom: calc(var(--spacing) * 3);
367
+ display: block;
368
+ width: 100%;
369
+ border-bottom-style: var(--tw-border-style);
370
+ border-bottom-width: 1px;
371
+ border-color: var(--color-gray-200);
372
+ font-size: var(--text-lg);
373
+ line-height: var(--tw-leading, var(--text-lg--line-height));
374
+ --tw-font-weight: var(--font-weight-bold);
375
+ font-weight: var(--font-weight-bold);
376
+ &:where(.dark, .dark *) {
377
+ border-color: var(--color-gray-800);
378
+ }
379
+ }
380
+ & :where(.label) {
381
+ margin-bottom: calc(var(--spacing) * 1.5);
382
+ display: block;
383
+ }
384
+ & :where(.label abbr) {
385
+ margin-inline-start: calc(var(--spacing) * 1);
386
+ text-decoration-line: none;
387
+ }
388
+ & :where(.input) {
389
+ padding-block: calc(var(--spacing) * 3);
390
+ }
391
+ & :where(.choice) {
392
+ margin-bottom: calc(var(--spacing) * 1);
393
+ }
394
+ & :where(.boolean label, .choice label) {
395
+ display: flex;
396
+ align-items: center;
397
+ gap: calc(var(--spacing) * 2);
398
+ }
399
+ & :where(.fragments-group) {
400
+ display: inline-flex;
401
+ flex-wrap: wrap;
402
+ gap: calc(var(--spacing) * 1);
403
+ }
404
+ & :where(.fragment label) {
405
+ position: absolute;
406
+ width: 1px;
407
+ height: 1px;
408
+ padding: 0;
409
+ margin: -1px;
410
+ overflow: hidden;
411
+ clip-path: inset(50%);
412
+ white-space: nowrap;
413
+ border-width: 0;
414
+ }
415
+ & :where(.inline-hints) {
416
+ margin-top: calc(var(--spacing) * 2);
417
+ color: var(--color-gray-500);
418
+ &:where(.dark, .dark *) {
419
+ color: var(--color-gray-400);
420
+ }
421
+ }
422
+ & :where(.errors) {
423
+ margin-bottom: calc(var(--spacing) * 6);
424
+ :where(& > :not(:last-child)) {
425
+ --tw-space-y-reverse: 0;
426
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
427
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
428
+ }
429
+ border-radius: var(--radius-md);
430
+ background-color: var(--color-red-50);
431
+ padding: calc(var(--spacing) * 4);
432
+ color: var(--color-red-800);
433
+ &:where(.dark, .dark *) {
434
+ background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
435
+ @supports (color: color-mix(in lab, red, red)) {
436
+ background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
437
+ }
438
+ }
439
+ &:where(.dark, .dark *) {
440
+ color: var(--color-red-200);
441
+ }
442
+ }
443
+ & :where(.errors > li) {
444
+ margin-inline-start: calc(var(--spacing) * 4);
445
+ list-style-type: disc;
446
+ }
447
+ & :where(.inline-errors) {
448
+ margin-top: calc(var(--spacing) * 2);
449
+ --tw-font-weight: var(--font-weight-bold);
450
+ font-weight: var(--font-weight-bold);
451
+ color: var(--color-red-600);
452
+ &:where(.dark, .dark *) {
453
+ color: var(--color-red-400);
454
+ }
455
+ }
456
+ & :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, .error textarea) {
457
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
458
+ @supports (color: color-mix(in lab, red, red)) {
459
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
460
+ }
461
+ }
462
+ & :where(.buttons, .actions) {
463
+ margin-top: calc(var(--spacing) * 3);
464
+ }
465
+ & :where(.actions > ol) {
466
+ display: flex;
467
+ align-items: center;
468
+ gap: calc(var(--spacing) * 6);
469
+ }
470
+ & :where([type=submit], [type=button], button) {
471
+ cursor: pointer;
472
+ border-radius: var(--radius-lg);
473
+ background-color: var(--color-blue-600);
474
+ padding-inline: calc(var(--spacing) * 4);
475
+ padding-block: calc(var(--spacing) * 2);
476
+ text-align: center;
477
+ --tw-font-weight: var(--font-weight-bold);
478
+ font-weight: var(--font-weight-bold);
479
+ color: var(--color-white);
480
+ &:hover {
481
+ @media (hover: hover) {
482
+ background-color: var(--color-blue-700);
483
+ }
484
+ }
485
+ &:focus {
486
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
487
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
488
+ }
489
+ &:focus {
490
+ --tw-ring-color: var(--color-blue-300);
491
+ }
492
+ &:focus {
493
+ --tw-outline-style: none;
494
+ outline-style: none;
495
+ @media (forced-colors: active) {
496
+ outline: 2px solid transparent;
497
+ outline-offset: 2px;
498
+ }
499
+ }
500
+ &:where(.dark, .dark *) {
501
+ background-color: var(--color-blue-600);
502
+ }
503
+ &:where(.dark, .dark *) {
504
+ &:hover {
505
+ @media (hover: hover) {
506
+ background-color: var(--color-blue-700);
507
+ }
508
+ }
509
+ }
510
+ &:where(.dark, .dark *) {
511
+ &:focus {
512
+ --tw-ring-color: var(--color-blue-800);
513
+ }
514
+ }
515
+ }
516
+ & :where(.actions .cancel-link) {
517
+ --tw-leading: calc(var(--spacing) * 6);
518
+ line-height: calc(var(--spacing) * 6);
519
+ --tw-font-weight: var(--font-weight-semibold);
520
+ font-weight: var(--font-weight-semibold);
521
+ color: var(--color-gray-900);
522
+ text-decoration-line: none;
523
+ &:where(.dark, .dark *) {
524
+ color: var(--color-white);
525
+ }
526
+ }
527
+ & :where(.has-many-add) {
528
+ margin-bottom: calc(var(--spacing) * 3);
529
+ display: inline-block;
530
+ padding-block: calc(var(--spacing) * 3);
531
+ }
532
+ & :where(.has-many-fields) {
533
+ border-inline-start-style: var(--tw-border-style);
534
+ border-inline-start-width: 4px;
535
+ border-inline-start-color: var(--color-gray-200);
536
+ padding-inline-start: calc(var(--spacing) * 3);
537
+ &:where(.dark, .dark *) {
538
+ border-inline-start-color: var(--color-gray-700);
539
+ }
540
+ }
541
+ }
542
+ .fragment {
543
+ .formtastic :where(& label) {
544
+ position: absolute;
545
+ width: 1px;
546
+ height: 1px;
547
+ padding: 0;
548
+ margin: -1px;
549
+ overflow: hidden;
550
+ clip-path: inset(50%);
551
+ white-space: nowrap;
552
+ border-width: 0;
553
+ }
554
+ }
555
+ .sr-only {
556
+ position: absolute;
557
+ width: 1px;
558
+ height: 1px;
559
+ padding: 0;
560
+ margin: -1px;
561
+ overflow: hidden;
562
+ clip-path: inset(50%);
563
+ white-space: nowrap;
564
+ border-width: 0;
565
+ }
566
+ .index-as-table {
567
+ position: relative;
568
+ overflow-x: auto;
569
+ }
570
+ .absolute {
571
+ position: absolute;
572
+ }
573
+ .batch-actions-dropdown {
574
+ position: relative;
575
+ }
576
+ .fixed {
577
+ position: fixed;
578
+ }
579
+ .relative {
580
+ position: relative;
581
+ }
582
+ .static {
583
+ position: static;
584
+ }
585
+ .inset-0 {
586
+ inset: calc(var(--spacing) * 0);
587
+ }
588
+ .start-0 {
589
+ inset-inline-start: calc(var(--spacing) * 0);
590
+ }
591
+ .top-0 {
592
+ top: calc(var(--spacing) * 0);
593
+ }
594
+ .right-0 {
595
+ right: calc(var(--spacing) * 0);
596
+ }
597
+ .bottom-0 {
598
+ bottom: calc(var(--spacing) * 0);
599
+ }
600
+ .bottom-\[60px\] {
601
+ bottom: 60px;
602
+ }
603
+ .left-0 {
604
+ left: calc(var(--spacing) * 0);
605
+ }
606
+ .batch-actions-dropdown-menu {
607
+ z-index: 10;
608
+ display: none;
609
+ min-width: calc(var(--spacing) * 28);
610
+ border-radius: var(--radius-md);
611
+ background-color: var(--color-white);
612
+ padding-block: calc(var(--spacing) * 1);
613
+ font-size: var(--text-sm);
614
+ line-height: var(--tw-leading, var(--text-sm--line-height));
615
+ color: var(--color-gray-700);
616
+ --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));
617
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
618
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
619
+ --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
620
+ &:focus {
621
+ --tw-outline-style: none;
622
+ outline-style: none;
623
+ @media (forced-colors: active) {
624
+ outline: 2px solid transparent;
625
+ outline-offset: 2px;
626
+ }
627
+ }
628
+ &:where(.dark, .dark *) {
629
+ background-color: var(--color-gray-800);
630
+ }
631
+ &:where(.dark, .dark *) {
632
+ color: var(--color-gray-200);
633
+ }
634
+ & :where(li > a) {
635
+ display: block;
636
+ padding-inline: calc(var(--spacing) * 2.5);
637
+ padding-block: calc(var(--spacing) * 2);
638
+ color: var(--color-gray-700);
639
+ text-decoration-line: none;
640
+ &:hover {
641
+ @media (hover: hover) {
642
+ background-color: var(--color-gray-100);
643
+ }
644
+ }
645
+ &:hover {
646
+ @media (hover: hover) {
647
+ color: var(--color-gray-900);
648
+ }
649
+ }
650
+ &:where(.dark, .dark *) {
651
+ color: var(--color-white);
652
+ }
653
+ &:where(.dark, .dark *) {
654
+ &:hover {
655
+ @media (hover: hover) {
656
+ background-color: var(--color-gray-700);
657
+ }
658
+ }
659
+ }
660
+ &:where(.dark, .dark *) {
661
+ &:hover {
662
+ @media (hover: hover) {
663
+ color: var(--color-white);
664
+ }
665
+ }
666
+ }
667
+ }
668
+ }
669
+ .index-button {
670
+ display: inline-flex;
671
+ align-items: center;
672
+ justify-content: center;
673
+ border-style: var(--tw-border-style);
674
+ border-width: 1px;
675
+ border-color: var(--color-gray-200);
676
+ background-color: var(--color-white);
677
+ padding-inline: calc(var(--spacing) * 3);
678
+ padding-block: calc(var(--spacing) * 2);
679
+ font-size: var(--text-sm);
680
+ line-height: var(--tw-leading, var(--text-sm--line-height));
681
+ --tw-font-weight: var(--font-weight-medium);
682
+ font-weight: var(--font-weight-medium);
683
+ color: var(--color-gray-900);
684
+ text-decoration-line: none;
685
+ &:first-child {
686
+ border-start-start-radius: var(--radius-md);
687
+ border-end-start-radius: var(--radius-md);
688
+ }
689
+ &:last-child {
690
+ border-start-end-radius: var(--radius-md);
691
+ border-end-end-radius: var(--radius-md);
692
+ }
693
+ &:hover {
694
+ @media (hover: hover) {
695
+ background-color: var(--color-gray-100);
696
+ }
697
+ }
698
+ &:focus {
699
+ z-index: 10;
700
+ }
701
+ &:focus {
702
+ color: var(--color-blue-700);
703
+ }
704
+ &:focus {
705
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
706
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
707
+ }
708
+ &:focus {
709
+ --tw-ring-color: var(--color-blue-700);
710
+ }
711
+ &:where(.dark, .dark *) {
712
+ border-color: var(--color-gray-700);
713
+ }
714
+ &:where(.dark, .dark *) {
715
+ background-color: var(--color-gray-900);
716
+ }
717
+ &:where(.dark, .dark *) {
718
+ color: var(--color-gray-100);
719
+ }
720
+ &:where(.dark, .dark *) {
721
+ &:hover {
722
+ @media (hover: hover) {
723
+ background-color: var(--color-gray-800);
724
+ }
725
+ }
726
+ }
727
+ &:where(.dark, .dark *) {
728
+ &:hover {
729
+ @media (hover: hover) {
730
+ color: var(--color-gray-200);
731
+ }
732
+ }
733
+ }
734
+ &:where(.dark, .dark *) {
735
+ &:focus {
736
+ color: var(--color-white);
737
+ }
738
+ }
739
+ &:where(.dark, .dark *) {
740
+ &:focus {
741
+ --tw-ring-color: var(--color-blue-500);
742
+ }
743
+ }
744
+ }
745
+ .action-item-button {
746
+ border-radius: var(--radius-md);
747
+ border-style: var(--tw-border-style);
748
+ border-width: 1px;
749
+ border-color: var(--color-gray-200);
750
+ background-color: var(--color-white);
751
+ padding-inline: calc(var(--spacing) * 3);
752
+ padding-block: calc(var(--spacing) * 2);
753
+ font-size: var(--text-sm);
754
+ line-height: var(--tw-leading, var(--text-sm--line-height));
755
+ --tw-font-weight: var(--font-weight-medium);
756
+ font-weight: var(--font-weight-medium);
757
+ color: var(--color-gray-900);
758
+ text-decoration-line: none;
759
+ &:hover {
760
+ @media (hover: hover) {
761
+ background-color: var(--color-gray-100);
762
+ }
763
+ }
764
+ &:hover {
765
+ @media (hover: hover) {
766
+ color: var(--color-blue-700);
767
+ }
768
+ }
769
+ &:focus {
770
+ z-index: 10;
771
+ }
772
+ &:focus {
773
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
774
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
775
+ }
776
+ &:focus {
777
+ --tw-ring-color: var(--color-gray-200);
778
+ }
779
+ &:focus {
780
+ --tw-outline-style: none;
781
+ outline-style: none;
782
+ @media (forced-colors: active) {
783
+ outline: 2px solid transparent;
784
+ outline-offset: 2px;
785
+ }
786
+ }
787
+ &:where(.dark, .dark *) {
788
+ border-color: var(--color-gray-700);
789
+ }
790
+ &:where(.dark, .dark *) {
791
+ background-color: var(--color-gray-800);
792
+ }
793
+ &:where(.dark, .dark *) {
794
+ color: var(--color-gray-400);
795
+ }
796
+ &:where(.dark, .dark *) {
797
+ &:hover {
798
+ @media (hover: hover) {
799
+ background-color: var(--color-gray-700);
800
+ }
801
+ }
802
+ }
803
+ &:where(.dark, .dark *) {
804
+ &:hover {
805
+ @media (hover: hover) {
806
+ color: var(--color-white);
807
+ }
808
+ }
809
+ }
810
+ &:where(.dark, .dark *) {
811
+ &:focus {
812
+ --tw-ring-color: var(--color-gray-700);
813
+ }
814
+ }
815
+ }
816
+ .z-10 {
817
+ z-index: 10;
818
+ }
819
+ .z-20 {
820
+ z-index: 20;
821
+ }
822
+ .z-30 {
823
+ z-index: 30;
824
+ }
825
+ .z-40 {
826
+ z-index: 40;
827
+ }
828
+ .z-50 {
829
+ z-index: 50;
830
+ }
831
+ .container {
832
+ width: 100%;
833
+ @media (width >= 40rem) {
834
+ max-width: 40rem;
835
+ }
836
+ @media (width >= 48rem) {
837
+ max-width: 48rem;
838
+ }
839
+ @media (width >= 64rem) {
840
+ max-width: 64rem;
841
+ }
842
+ @media (width >= 80rem) {
843
+ max-width: 80rem;
844
+ }
845
+ @media (width >= 96rem) {
846
+ max-width: 96rem;
847
+ }
848
+ }
849
+ .m-auto {
850
+ margin: auto;
851
+ }
852
+ .mx-8 {
853
+ margin-inline: calc(var(--spacing) * 8);
854
+ }
855
+ .mx-auto {
856
+ margin-inline: auto;
857
+ }
858
+ .index-button-group {
859
+ display: inline-flex;
860
+ flex-wrap: wrap;
861
+ align-items: stretch;
862
+ border-radius: var(--radius-md);
863
+ & > :where(*:not(:first-child)) {
864
+ margin-block: calc(var(--spacing) * 0);
865
+ margin-inline-start: -1px;
866
+ }
867
+ }
868
+ .my-0 {
869
+ margin-block: calc(var(--spacing) * 0);
870
+ }
871
+ .label {
872
+ .filters-form :where(&) {
873
+ margin-bottom: calc(var(--spacing) * 1.5);
874
+ display: block;
875
+ font-size: var(--text-sm);
876
+ line-height: var(--tw-leading, var(--text-sm--line-height));
877
+ }
878
+ .formtastic :where(&) {
879
+ margin-bottom: calc(var(--spacing) * 1.5);
880
+ display: block;
881
+ }
882
+ .formtastic :where(& abbr) {
883
+ margin-inline-start: calc(var(--spacing) * 1);
884
+ text-decoration-line: none;
885
+ }
886
+ }
887
+ .errors {
888
+ .formtastic :where(&) {
889
+ margin-bottom: calc(var(--spacing) * 6);
890
+ :where(& > :not(:last-child)) {
891
+ --tw-space-y-reverse: 0;
892
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
893
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
894
+ }
895
+ border-radius: var(--radius-md);
896
+ background-color: var(--color-red-50);
897
+ padding: calc(var(--spacing) * 4);
898
+ color: var(--color-red-800);
899
+ &:where(.dark, .dark *) {
900
+ background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
901
+ @supports (color: color-mix(in lab, red, red)) {
902
+ background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
903
+ }
904
+ }
905
+ &:where(.dark, .dark *) {
906
+ color: var(--color-red-200);
907
+ }
908
+ }
909
+ .formtastic :where(& > li) {
910
+ margin-inline-start: calc(var(--spacing) * 4);
911
+ list-style-type: disc;
912
+ }
913
+ }
914
+ .scopes-count {
915
+ margin-inline-start: calc(var(--spacing) * 2);
916
+ display: inline-flex;
917
+ align-items: center;
918
+ justify-content: center;
919
+ border-radius: calc(infinity * 1px);
920
+ background-color: var(--color-indigo-100);
921
+ padding-inline: calc(var(--spacing) * 1.5);
922
+ padding-block: calc(var(--spacing) * 1);
923
+ font-size: var(--text-xs);
924
+ line-height: var(--tw-leading, var(--text-xs--line-height));
925
+ --tw-leading: 1;
926
+ line-height: 1;
927
+ --tw-font-weight: var(--font-weight-normal);
928
+ font-weight: var(--font-weight-normal);
929
+ color: var(--color-indigo-700);
930
+ &:where(.dark, .dark *) {
931
+ background-color: color-mix(in srgb, oklch(39.8% 0.195 277.366) 60%, transparent);
932
+ @supports (color: color-mix(in lab, red, red)) {
933
+ background-color: color-mix(in oklab, var(--color-indigo-800) 60%, transparent);
934
+ }
935
+ }
936
+ &:where(.dark, .dark *) {
937
+ color: var(--color-indigo-400);
938
+ }
939
+ }
940
+ .-ms-px {
941
+ margin-inline-start: -1px;
942
+ }
943
+ .ms-1 {
944
+ margin-inline-start: calc(var(--spacing) * 1);
945
+ }
946
+ .ms-2 {
947
+ margin-inline-start: calc(var(--spacing) * 2);
948
+ }
949
+ .ms-4 {
950
+ margin-inline-start: calc(var(--spacing) * 4);
951
+ }
952
+ .ms-auto {
953
+ margin-inline-start: auto;
954
+ }
955
+ .me-1 {
956
+ margin-inline-end: calc(var(--spacing) * 1);
957
+ }
958
+ .actions {
959
+ .formtastic :where(.buttons, &) {
960
+ margin-top: calc(var(--spacing) * 3);
961
+ }
962
+ .formtastic :where(& > ol) {
963
+ display: flex;
964
+ align-items: center;
965
+ gap: calc(var(--spacing) * 6);
966
+ }
967
+ .formtastic :where(& .cancel-link) {
968
+ --tw-leading: calc(var(--spacing) * 6);
969
+ line-height: calc(var(--spacing) * 6);
970
+ --tw-font-weight: var(--font-weight-semibold);
971
+ font-weight: var(--font-weight-semibold);
972
+ color: var(--color-gray-900);
973
+ text-decoration-line: none;
974
+ &:where(.dark, .dark *) {
975
+ color: var(--color-white);
976
+ }
977
+ }
978
+ }
979
+ .buttons {
980
+ .formtastic :where(&, .actions) {
981
+ margin-top: calc(var(--spacing) * 3);
982
+ }
983
+ }
984
+ .mt-1 {
985
+ margin-top: calc(var(--spacing) * 1);
986
+ }
987
+ .mt-2 {
988
+ margin-top: calc(var(--spacing) * 2);
989
+ }
990
+ .mt-3 {
991
+ margin-top: calc(var(--spacing) * 3);
992
+ }
993
+ .mt-6 {
994
+ margin-top: calc(var(--spacing) * 6);
995
+ }
996
+ .mt-16 {
997
+ margin-top: calc(var(--spacing) * 16);
998
+ }
999
+ .index-data-table-toolbar {
1000
+ margin-bottom: calc(var(--spacing) * 4);
1001
+ display: flex;
1002
+ flex-direction: column;
1003
+ gap: calc(var(--spacing) * 4);
1004
+ @media (width >= 64rem) {
1005
+ flex-direction: row;
1006
+ }
1007
+ }
1008
+ .filters-form-field {
1009
+ margin-bottom: calc(var(--spacing) * 4);
1010
+ & :where(.choices > label) {
1011
+ margin-bottom: calc(var(--spacing) * 1);
1012
+ display: flex;
1013
+ align-items: center;
1014
+ gap: calc(var(--spacing) * 2);
1015
+ }
1016
+ }
1017
+ .choice {
1018
+ .formtastic :where(&) {
1019
+ margin-bottom: calc(var(--spacing) * 1);
1020
+ }
1021
+ .formtastic :where(.boolean label, & label) {
1022
+ display: flex;
1023
+ align-items: center;
1024
+ gap: calc(var(--spacing) * 2);
1025
+ }
1026
+ }
1027
+ .choices {
1028
+ .filters-form-field :where(& > label) {
1029
+ margin-bottom: calc(var(--spacing) * 1);
1030
+ display: flex;
1031
+ align-items: center;
1032
+ gap: calc(var(--spacing) * 2);
1033
+ }
1034
+ }
1035
+ .filters-form {
1036
+ margin-bottom: calc(var(--spacing) * 6);
1037
+ font-size: var(--text-sm);
1038
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1039
+ & :where(.label) {
1040
+ margin-bottom: calc(var(--spacing) * 1.5);
1041
+ display: block;
1042
+ font-size: var(--text-sm);
1043
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1044
+ }
1045
+ }
1046
+ .attributes-table {
1047
+ margin-bottom: calc(var(--spacing) * 6);
1048
+ overflow: hidden;
1049
+ border-radius: var(--radius-md);
1050
+ border-style: var(--tw-border-style);
1051
+ border-width: 1px;
1052
+ border-color: var(--color-gray-200);
1053
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1054
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1055
+ &:where(.dark, .dark *) {
1056
+ border-color: var(--color-gray-800);
1057
+ }
1058
+ & > :where(table) {
1059
+ width: 100%;
1060
+ font-size: var(--text-sm);
1061
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1062
+ color: var(--color-gray-800);
1063
+ &:where(.dark, .dark *) {
1064
+ color: var(--color-gray-300);
1065
+ }
1066
+ }
1067
+ & :where(tbody > tr) {
1068
+ border-bottom-style: var(--tw-border-style);
1069
+ border-bottom-width: 1px;
1070
+ border-color: var(--color-gray-200);
1071
+ vertical-align: baseline;
1072
+ &:last-child {
1073
+ border-bottom-style: var(--tw-border-style);
1074
+ border-bottom-width: 0px;
1075
+ }
1076
+ &:where(.dark, .dark *) {
1077
+ border-color: var(--color-gray-800);
1078
+ }
1079
+ }
1080
+ & :where(tbody > tr > th) {
1081
+ width: calc(var(--spacing) * 32);
1082
+ background-color: var(--color-gray-50);
1083
+ text-align: start;
1084
+ font-size: var(--text-xs);
1085
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1086
+ color: var(--color-gray-700);
1087
+ text-transform: uppercase;
1088
+ @media (width >= 40rem) {
1089
+ width: calc(var(--spacing) * 40);
1090
+ }
1091
+ &:where(.dark, .dark *) {
1092
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 50%, transparent);
1093
+ @supports (color: color-mix(in lab, red, red)) {
1094
+ background-color: color-mix(in oklab, var(--color-gray-950) 50%, transparent);
1095
+ }
1096
+ }
1097
+ &:where(.dark, .dark *) {
1098
+ color: var(--color-gray-300);
1099
+ }
1100
+ }
1101
+ & :where(tbody > tr > th, tbody > tr > td) {
1102
+ padding: calc(var(--spacing) * 3);
1103
+ }
1104
+ }
1105
+ .panel {
1106
+ margin-bottom: calc(var(--spacing) * 6);
1107
+ border-radius: var(--radius-md);
1108
+ border-style: var(--tw-border-style);
1109
+ border-width: 1px;
1110
+ border-color: var(--color-gray-200);
1111
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1112
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1113
+ &:where(.dark, .dark *) {
1114
+ border-color: var(--color-gray-800);
1115
+ }
1116
+ }
1117
+ .active-filters-title {
1118
+ margin-bottom: calc(var(--spacing) * 4);
1119
+ font-size: var(--text-lg);
1120
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1121
+ --tw-font-weight: var(--font-weight-bold);
1122
+ font-weight: var(--font-weight-bold);
1123
+ color: var(--color-gray-700);
1124
+ &:where(.dark, .dark *) {
1125
+ color: var(--color-gray-200);
1126
+ }
1127
+ }
1128
+ .filters-form-title {
1129
+ margin-bottom: calc(var(--spacing) * 4);
1130
+ font-size: var(--text-lg);
1131
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1132
+ --tw-font-weight: var(--font-weight-bold);
1133
+ font-weight: var(--font-weight-bold);
1134
+ color: var(--color-gray-700);
1135
+ &:where(.dark, .dark *) {
1136
+ color: var(--color-gray-200);
1137
+ }
1138
+ }
1139
+ .inputs {
1140
+ .formtastic :where(&,.has-many-fields) {
1141
+ margin-bottom: calc(var(--spacing) * 6);
1142
+ }
1143
+ }
1144
+ .mb-1 {
1145
+ margin-bottom: calc(var(--spacing) * 1);
1146
+ }
1147
+ .mb-1\.5 {
1148
+ margin-bottom: calc(var(--spacing) * 1.5);
1149
+ }
1150
+ .mb-2 {
1151
+ margin-bottom: calc(var(--spacing) * 2);
1152
+ }
1153
+ .mb-3 {
1154
+ margin-bottom: calc(var(--spacing) * 3);
1155
+ }
1156
+ .mb-4 {
1157
+ margin-bottom: calc(var(--spacing) * 4);
1158
+ }
1159
+ .mb-6 {
1160
+ margin-bottom: calc(var(--spacing) * 6);
1161
+ }
1162
+ .mb-8 {
1163
+ margin-bottom: calc(var(--spacing) * 8);
1164
+ }
1165
+ .mb-12 {
1166
+ margin-bottom: calc(var(--spacing) * 12);
1167
+ }
1168
+ .data-table {
1169
+ width: 100%;
1170
+ font-size: var(--text-sm);
1171
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1172
+ color: var(--color-gray-800);
1173
+ &:where(.dark, .dark *) {
1174
+ color: var(--color-gray-300);
1175
+ }
1176
+ & :where(thead > tr > th) {
1177
+ border-bottom-style: var(--tw-border-style);
1178
+ border-bottom-width: 1px;
1179
+ border-color: var(--color-gray-200);
1180
+ background-color: var(--color-gray-50);
1181
+ padding-inline: calc(var(--spacing) * 3);
1182
+ padding-block: calc(var(--spacing) * 3.5);
1183
+ text-align: start;
1184
+ font-size: var(--text-xs);
1185
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1186
+ --tw-font-weight: var(--font-weight-semibold);
1187
+ font-weight: var(--font-weight-semibold);
1188
+ color: var(--color-gray-700);
1189
+ text-transform: uppercase;
1190
+ &:where(.dark, .dark *) {
1191
+ border-color: var(--color-gray-800);
1192
+ }
1193
+ &:where(.dark, .dark *) {
1194
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 50%, transparent);
1195
+ @supports (color: color-mix(in lab, red, red)) {
1196
+ background-color: color-mix(in oklab, var(--color-gray-950) 50%, transparent);
1197
+ }
1198
+ }
1199
+ &:where(.dark, .dark *) {
1200
+ color: var(--color-white);
1201
+ }
1202
+ }
1203
+ & :where(thead > tr > th > a) {
1204
+ display: inline-flex;
1205
+ align-items: center;
1206
+ gap: calc(var(--spacing) * 2);
1207
+ color: inherit;
1208
+ text-decoration-line: none;
1209
+ }
1210
+ & :where(tbody > tr) {
1211
+ border-bottom-style: var(--tw-border-style);
1212
+ border-bottom-width: 1px;
1213
+ border-color: var(--color-gray-200);
1214
+ &:last-child {
1215
+ border-bottom-style: var(--tw-border-style);
1216
+ border-bottom-width: 0px;
1217
+ }
1218
+ &:where(.dark, .dark *) {
1219
+ border-color: var(--color-gray-800);
1220
+ }
1221
+ }
1222
+ & :where(td) {
1223
+ padding-inline: calc(var(--spacing) * 3);
1224
+ padding-block: calc(var(--spacing) * 4);
1225
+ }
1226
+ }
1227
+ .filters-form-input-group {
1228
+ display: grid;
1229
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1230
+ gap: calc(var(--spacing) * 2);
1231
+ }
1232
+ .paginated-collection-pagination {
1233
+ display: flex;
1234
+ flex-direction: column-reverse;
1235
+ align-items: center;
1236
+ justify-content: space-between;
1237
+ gap: calc(var(--spacing) * 4);
1238
+ border-top-style: var(--tw-border-style);
1239
+ border-top-width: 1px;
1240
+ border-color: var(--color-gray-200);
1241
+ padding: calc(var(--spacing) * 2);
1242
+ @media (width >= 64rem) {
1243
+ flex-direction: row;
1244
+ }
1245
+ @media (width >= 64rem) {
1246
+ padding: calc(var(--spacing) * 3);
1247
+ }
1248
+ &:where(.dark, .dark *) {
1249
+ border-color: var(--color-gray-800);
1250
+ }
1251
+ }
1252
+ .scopes {
1253
+ display: flex;
1254
+ flex-wrap: wrap;
1255
+ gap: calc(var(--spacing) * 1.5);
1256
+ }
1257
+ .paginated-collection-footer {
1258
+ display: flex;
1259
+ align-items: center;
1260
+ justify-content: space-between;
1261
+ gap: calc(var(--spacing) * 2);
1262
+ border-top-style: var(--tw-border-style);
1263
+ border-top-width: 1px;
1264
+ border-color: var(--color-gray-200);
1265
+ padding: calc(var(--spacing) * 3);
1266
+ font-size: var(--text-sm);
1267
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1268
+ &:where(.dark, .dark *) {
1269
+ border-color: var(--color-gray-800);
1270
+ }
1271
+ }
1272
+ .boolean {
1273
+ .formtastic :where(& label, .choice label) {
1274
+ display: flex;
1275
+ align-items: center;
1276
+ gap: calc(var(--spacing) * 2);
1277
+ }
1278
+ }
1279
+ .filters-form-buttons {
1280
+ display: flex;
1281
+ align-items: center;
1282
+ gap: calc(var(--spacing) * 2);
1283
+ }
1284
+ .status-tag {
1285
+ display: inline-flex;
1286
+ align-items: center;
1287
+ border-radius: calc(infinity * 1px);
1288
+ background-color: var(--color-gray-200);
1289
+ padding-inline: calc(var(--spacing) * 2.5);
1290
+ padding-block: calc(var(--spacing) * 0.5);
1291
+ font-size: var(--text-sm);
1292
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1293
+ --tw-font-weight: var(--font-weight-medium);
1294
+ font-weight: var(--font-weight-medium);
1295
+ white-space: nowrap;
1296
+ color: var(--color-gray-600);
1297
+ &:where(.dark, .dark *) {
1298
+ background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 20%, transparent);
1299
+ @supports (color: color-mix(in lab, red, red)) {
1300
+ background-color: color-mix(in oklab, var(--color-gray-400) 20%, transparent);
1301
+ }
1302
+ }
1303
+ &:where(.dark, .dark *) {
1304
+ color: var(--color-gray-400);
1305
+ }
1306
+ &:where([data-status=yes]) {
1307
+ background-color: var(--color-green-100);
1308
+ color: var(--color-green-700);
1309
+ &:where(.dark, .dark *) {
1310
+ background-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 20%, transparent);
1311
+ @supports (color: color-mix(in lab, red, red)) {
1312
+ background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent);
1313
+ }
1314
+ }
1315
+ &:where(.dark, .dark *) {
1316
+ color: var(--color-green-400);
1317
+ }
1318
+ }
1319
+ }
1320
+ .data-table-resource-actions {
1321
+ display: flex;
1322
+ gap: calc(var(--spacing) * 2);
1323
+ }
1324
+ .block {
1325
+ display: block;
1326
+ }
1327
+ .flex {
1328
+ display: flex;
1329
+ }
1330
+ .grid {
1331
+ display: grid;
1332
+ }
1333
+ .hidden {
1334
+ display: none;
1335
+ }
1336
+ .inline {
1337
+ display: inline;
1338
+ }
1339
+ .inline-block {
1340
+ display: inline-block;
1341
+ }
1342
+ .inline-flex {
1343
+ display: inline-flex;
1344
+ }
1345
+ .table {
1346
+ display: table;
1347
+ }
1348
+ .batch-actions-dropdown-arrow {
1349
+ height: calc(var(--spacing) * 2.5);
1350
+ width: calc(var(--spacing) * 2.5);
1351
+ }
1352
+ .h-2\.5 {
1353
+ height: calc(var(--spacing) * 2.5);
1354
+ }
1355
+ .h-4 {
1356
+ height: calc(var(--spacing) * 4);
1357
+ }
1358
+ .h-5 {
1359
+ height: calc(var(--spacing) * 5);
1360
+ }
1361
+ .h-6 {
1362
+ height: calc(var(--spacing) * 6);
1363
+ }
1364
+ .h-7 {
1365
+ height: calc(var(--spacing) * 7);
1366
+ }
1367
+ .h-8 {
1368
+ height: calc(var(--spacing) * 8);
1369
+ }
1370
+ .h-9 {
1371
+ height: calc(var(--spacing) * 9);
1372
+ }
1373
+ .h-16 {
1374
+ height: calc(var(--spacing) * 16);
1375
+ }
1376
+ .h-\[5px\] {
1377
+ height: 5px;
1378
+ }
1379
+ .min-h-20 {
1380
+ min-height: calc(var(--spacing) * 20);
1381
+ }
1382
+ .min-h-screen {
1383
+ min-height: 100vh;
1384
+ }
1385
+ .pagination-per-page {
1386
+ width: auto;
1387
+ width: min-content;
1388
+ padding-block: calc(var(--spacing) * 1);
1389
+ padding-inline-end: calc(var(--spacing) * 7);
1390
+ font-size: var(--text-sm);
1391
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1392
+ }
1393
+ .w-1\/2 {
1394
+ width: calc(1/2 * 100%);
1395
+ }
1396
+ .w-2\.5 {
1397
+ width: calc(var(--spacing) * 2.5);
1398
+ }
1399
+ .w-4 {
1400
+ width: calc(var(--spacing) * 4);
1401
+ }
1402
+ .w-5 {
1403
+ width: calc(var(--spacing) * 5);
1404
+ }
1405
+ .w-7 {
1406
+ width: calc(var(--spacing) * 7);
1407
+ }
1408
+ .w-8 {
1409
+ width: calc(var(--spacing) * 8);
1410
+ }
1411
+ .w-9 {
1412
+ width: calc(var(--spacing) * 9);
1413
+ }
1414
+ .w-32 {
1415
+ width: calc(var(--spacing) * 32);
1416
+ }
1417
+ .w-64 {
1418
+ width: calc(var(--spacing) * 64);
1419
+ }
1420
+ .w-72 {
1421
+ width: calc(var(--spacing) * 72);
1422
+ }
1423
+ .w-\[8px\] {
1424
+ width: 8px;
1425
+ }
1426
+ .w-auto {
1427
+ width: auto;
1428
+ }
1429
+ .w-full {
1430
+ width: 100%;
1431
+ }
1432
+ .w-min {
1433
+ width: min-content;
1434
+ }
1435
+ .max-w-3xl {
1436
+ max-width: var(--container-3xl);
1437
+ }
1438
+ .max-w-\[700px\] {
1439
+ max-width: 700px;
1440
+ }
1441
+ .filters-form-submit {
1442
+ min-width: calc(var(--spacing) * 24);
1443
+ cursor: pointer;
1444
+ border-radius: var(--radius-md);
1445
+ background-color: var(--color-blue-600);
1446
+ padding-inline: calc(var(--spacing) * 3);
1447
+ padding-block: calc(var(--spacing) * 2);
1448
+ text-align: center;
1449
+ --tw-font-weight: var(--font-weight-bold);
1450
+ font-weight: var(--font-weight-bold);
1451
+ color: var(--color-white);
1452
+ &:hover {
1453
+ @media (hover: hover) {
1454
+ background-color: var(--color-blue-700);
1455
+ }
1456
+ }
1457
+ &:focus {
1458
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1459
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1460
+ }
1461
+ &:focus {
1462
+ --tw-ring-color: var(--color-blue-300);
1463
+ }
1464
+ &:focus {
1465
+ --tw-outline-style: none;
1466
+ outline-style: none;
1467
+ @media (forced-colors: active) {
1468
+ outline: 2px solid transparent;
1469
+ outline-offset: 2px;
1470
+ }
1471
+ }
1472
+ &:where(.dark, .dark *) {
1473
+ background-color: var(--color-blue-600);
1474
+ }
1475
+ &:where(.dark, .dark *) {
1476
+ &:hover {
1477
+ @media (hover: hover) {
1478
+ background-color: var(--color-blue-700);
1479
+ }
1480
+ }
1481
+ }
1482
+ &:where(.dark, .dark *) {
1483
+ &:focus {
1484
+ --tw-ring-color: var(--color-blue-800);
1485
+ }
1486
+ }
1487
+ }
1488
+ .min-w-24 {
1489
+ min-width: calc(var(--spacing) * 24);
1490
+ }
1491
+ .min-w-28 {
1492
+ min-width: calc(var(--spacing) * 28);
1493
+ }
1494
+ .min-w-max {
1495
+ min-width: max-content;
1496
+ }
1497
+ .flex-1 {
1498
+ flex: 1;
1499
+ }
1500
+ .flex-shrink {
1501
+ flex-shrink: 1;
1502
+ }
1503
+ .shrink-0 {
1504
+ flex-shrink: 0;
1505
+ }
1506
+ .grow {
1507
+ flex-grow: 1;
1508
+ }
1509
+ .-translate-x-full {
1510
+ --tw-translate-x: -100%;
1511
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1512
+ }
1513
+ .translate-x-0 {
1514
+ --tw-translate-x: calc(var(--spacing) * 0);
1515
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1516
+ }
1517
+ .translate-x-full {
1518
+ --tw-translate-x: 100%;
1519
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1520
+ }
1521
+ .-translate-y-full {
1522
+ --tw-translate-y: -100%;
1523
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1524
+ }
1525
+ .translate-y-full {
1526
+ --tw-translate-y: 100%;
1527
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1528
+ }
1529
+ .rotate-180 {
1530
+ rotate: 180deg;
1531
+ }
1532
+ .transform {
1533
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1534
+ }
1535
+ .transform-none {
1536
+ transform: none;
1537
+ }
1538
+ .cursor-default {
1539
+ cursor: default;
1540
+ }
1541
+ .cursor-not-allowed {
1542
+ cursor: not-allowed;
1543
+ }
1544
+ .cursor-pointer {
1545
+ cursor: pointer;
1546
+ }
1547
+ .resize {
1548
+ resize: both;
1549
+ }
1550
+ .active-filters-list {
1551
+ list-style-type: disc;
1552
+ :where(& > :not(:last-child)) {
1553
+ --tw-space-y-reverse: 0;
1554
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
1555
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
1556
+ }
1557
+ padding-inline-start: calc(var(--spacing) * 5);
1558
+ color: var(--color-gray-700);
1559
+ &:where(.dark, .dark *) {
1560
+ color: var(--color-gray-200);
1561
+ }
1562
+ }
1563
+ .list-disc {
1564
+ list-style-type: disc;
1565
+ }
1566
+ .grid-cols-1 {
1567
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1568
+ }
1569
+ .grid-cols-2 {
1570
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1571
+ }
1572
+ .grid-cols-4 {
1573
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1574
+ }
1575
+ .grid-cols-7 {
1576
+ grid-template-columns: repeat(7, minmax(0, 1fr));
1577
+ }
1578
+ .flex-col {
1579
+ flex-direction: column;
1580
+ }
1581
+ .flex-col-reverse {
1582
+ flex-direction: column-reverse;
1583
+ }
1584
+ .flex-wrap {
1585
+ flex-wrap: wrap;
1586
+ }
1587
+ .items-center {
1588
+ align-items: center;
1589
+ }
1590
+ .items-end {
1591
+ align-items: flex-end;
1592
+ }
1593
+ .items-start {
1594
+ align-items: flex-start;
1595
+ }
1596
+ .items-stretch {
1597
+ align-items: stretch;
1598
+ }
1599
+ .justify-between {
1600
+ justify-content: space-between;
1601
+ }
1602
+ .justify-center {
1603
+ justify-content: center;
1604
+ }
1605
+ .justify-end {
1606
+ justify-content: flex-end;
1607
+ }
1608
+ .justify-start {
1609
+ justify-content: flex-start;
1610
+ }
1611
+ .gap-1 {
1612
+ gap: calc(var(--spacing) * 1);
1613
+ }
1614
+ .gap-1\.5 {
1615
+ gap: calc(var(--spacing) * 1.5);
1616
+ }
1617
+ .gap-2 {
1618
+ gap: calc(var(--spacing) * 2);
1619
+ }
1620
+ .gap-3 {
1621
+ gap: calc(var(--spacing) * 3);
1622
+ }
1623
+ .gap-4 {
1624
+ gap: calc(var(--spacing) * 4);
1625
+ }
1626
+ .gap-6 {
1627
+ gap: calc(var(--spacing) * 6);
1628
+ }
1629
+ .space-y-1 {
1630
+ :where(& > :not(:last-child)) {
1631
+ --tw-space-y-reverse: 0;
1632
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
1633
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
1634
+ }
1635
+ }
1636
+ .space-y-1\.5 {
1637
+ :where(& > :not(:last-child)) {
1638
+ --tw-space-y-reverse: 0;
1639
+ margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
1640
+ margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
1641
+ }
1642
+ }
1643
+ .space-y-2 {
1644
+ :where(& > :not(:last-child)) {
1645
+ --tw-space-y-reverse: 0;
1646
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
1647
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
1648
+ }
1649
+ }
1650
+ .space-y-4 {
1651
+ :where(& > :not(:last-child)) {
1652
+ --tw-space-y-reverse: 0;
1653
+ margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
1654
+ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
1655
+ }
1656
+ }
1657
+ .space-y-8 {
1658
+ :where(& > :not(:last-child)) {
1659
+ --tw-space-y-reverse: 0;
1660
+ margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
1661
+ margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
1662
+ }
1663
+ }
1664
+ .gap-x-2 {
1665
+ column-gap: calc(var(--spacing) * 2);
1666
+ }
1667
+ .-space-x-px {
1668
+ :where(& > :not(:last-child)) {
1669
+ --tw-space-x-reverse: 0;
1670
+ margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
1671
+ margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
1672
+ }
1673
+ }
1674
+ .space-x-2 {
1675
+ :where(& > :not(:last-child)) {
1676
+ --tw-space-x-reverse: 0;
1677
+ margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
1678
+ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
1679
+ }
1680
+ }
1681
+ .paginated-collection {
1682
+ overflow: hidden;
1683
+ border-radius: var(--radius-md);
1684
+ border-style: var(--tw-border-style);
1685
+ border-width: 1px;
1686
+ border-color: var(--color-gray-200);
1687
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1688
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1689
+ &:where(.dark, .dark *) {
1690
+ border-color: var(--color-gray-800);
1691
+ }
1692
+ }
1693
+ .truncate {
1694
+ overflow: hidden;
1695
+ text-overflow: ellipsis;
1696
+ white-space: nowrap;
1697
+ }
1698
+ .overflow-hidden {
1699
+ overflow: hidden;
1700
+ }
1701
+ .overflow-x-auto {
1702
+ overflow-x: auto;
1703
+ }
1704
+ .paginated-collection-contents {
1705
+ overflow-x: auto;
1706
+ }
1707
+ .overflow-y-auto {
1708
+ overflow-y: auto;
1709
+ }
1710
+ .filters-form-clear {
1711
+ border-radius: var(--radius-md);
1712
+ padding-inline: calc(var(--spacing) * 3);
1713
+ padding-block: calc(var(--spacing) * 2);
1714
+ --tw-font-weight: var(--font-weight-semibold);
1715
+ font-weight: var(--font-weight-semibold);
1716
+ color: var(--color-gray-700);
1717
+ text-decoration-line: none;
1718
+ &:hover {
1719
+ @media (hover: hover) {
1720
+ background-color: var(--color-gray-100);
1721
+ }
1722
+ }
1723
+ &:where(.dark, .dark *) {
1724
+ color: var(--color-gray-400);
1725
+ }
1726
+ &:where(.dark, .dark *) {
1727
+ &:hover {
1728
+ @media (hover: hover) {
1729
+ background-color: inherit;
1730
+ }
1731
+ }
1732
+ }
1733
+ &:where(.dark, .dark *) {
1734
+ &:hover {
1735
+ @media (hover: hover) {
1736
+ color: var(--color-gray-100);
1737
+ }
1738
+ }
1739
+ }
1740
+ &:where(.dark, .dark *) {
1741
+ &:focus {
1742
+ --tw-ring-color: var(--color-blue-800);
1743
+ }
1744
+ }
1745
+ }
1746
+ .rounded {
1747
+ border-radius: 0.25rem;
1748
+ }
1749
+ .rounded-full {
1750
+ border-radius: calc(infinity * 1px);
1751
+ }
1752
+ .rounded-lg {
1753
+ border-radius: var(--radius-lg);
1754
+ }
1755
+ .rounded-md {
1756
+ border-radius: var(--radius-md);
1757
+ }
1758
+ .rounded-sm {
1759
+ border-radius: var(--radius-sm);
1760
+ }
1761
+ .panel-title {
1762
+ border-top-left-radius: var(--radius-md);
1763
+ border-top-right-radius: var(--radius-md);
1764
+ background-color: var(--color-gray-100);
1765
+ padding: calc(var(--spacing) * 3);
1766
+ --tw-font-weight: var(--font-weight-bold);
1767
+ font-weight: var(--font-weight-bold);
1768
+ &:where(.dark, .dark *) {
1769
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 50%, transparent);
1770
+ @supports (color: color-mix(in lab, red, red)) {
1771
+ background-color: color-mix(in oklab, var(--color-gray-950) 50%, transparent);
1772
+ }
1773
+ }
1774
+ }
1775
+ .rounded-t-md {
1776
+ border-top-left-radius: var(--radius-md);
1777
+ border-top-right-radius: var(--radius-md);
1778
+ }
1779
+ .rounded-l-lg {
1780
+ border-top-left-radius: var(--radius-lg);
1781
+ border-bottom-left-radius: var(--radius-lg);
1782
+ }
1783
+ .rounded-r-lg {
1784
+ border-top-right-radius: var(--radius-lg);
1785
+ border-bottom-right-radius: var(--radius-lg);
1786
+ }
1787
+ .border {
1788
+ border-style: var(--tw-border-style);
1789
+ border-width: 1px;
1790
+ }
1791
+ .border-0 {
1792
+ border-style: var(--tw-border-style);
1793
+ border-width: 0px;
1794
+ }
1795
+ .border-2 {
1796
+ border-style: var(--tw-border-style);
1797
+ border-width: 2px;
1798
+ }
1799
+ .border-s-2 {
1800
+ border-inline-start-style: var(--tw-border-style);
1801
+ border-inline-start-width: 2px;
1802
+ }
1803
+ .border-s-4 {
1804
+ border-inline-start-style: var(--tw-border-style);
1805
+ border-inline-start-width: 4px;
1806
+ }
1807
+ .border-t {
1808
+ border-top-style: var(--tw-border-style);
1809
+ border-top-width: 1px;
1810
+ }
1811
+ .border-b {
1812
+ border-bottom-style: var(--tw-border-style);
1813
+ border-bottom-width: 1px;
1814
+ }
1815
+ .border-dashed {
1816
+ --tw-border-style: dashed;
1817
+ border-style: dashed;
1818
+ }
1819
+ .error {
1820
+ .formtastic :where(& [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, .error textarea) {
1821
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1822
+ @supports (color: color-mix(in lab, red, red)) {
1823
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1824
+ }
1825
+ }
1826
+ .formtastic :where(.error [type=email], & [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, .error textarea) {
1827
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1828
+ @supports (color: color-mix(in lab, red, red)) {
1829
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1830
+ }
1831
+ }
1832
+ .formtastic :where(.error [type=email], .error [type=number], & [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, .error textarea) {
1833
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1834
+ @supports (color: color-mix(in lab, red, red)) {
1835
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1836
+ }
1837
+ }
1838
+ .formtastic :where(.error [type=email], .error [type=number], .error [type=password], & [type=tel], .error [type=text], .error [type=url], .error select, .error textarea) {
1839
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1840
+ @supports (color: color-mix(in lab, red, red)) {
1841
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1842
+ }
1843
+ }
1844
+ .formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], & [type=text], .error [type=url], .error select, .error textarea) {
1845
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1846
+ @supports (color: color-mix(in lab, red, red)) {
1847
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1848
+ }
1849
+ }
1850
+ .formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], & [type=url], .error select, .error textarea) {
1851
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1852
+ @supports (color: color-mix(in lab, red, red)) {
1853
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1854
+ }
1855
+ }
1856
+ .formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], & select, .error textarea) {
1857
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1858
+ @supports (color: color-mix(in lab, red, red)) {
1859
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1860
+ }
1861
+ }
1862
+ .formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, & textarea) {
1863
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1864
+ @supports (color: color-mix(in lab, red, red)) {
1865
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1866
+ }
1867
+ }
1868
+ }
1869
+ .border-blue-600 {
1870
+ border-color: var(--color-blue-600);
1871
+ }
1872
+ .border-blue-700 {
1873
+ border-color: var(--color-blue-700);
1874
+ }
1875
+ .border-gray-100 {
1876
+ border-color: var(--color-gray-100);
1877
+ }
1878
+ .border-gray-200 {
1879
+ border-color: var(--color-gray-200);
1880
+ }
1881
+ .border-gray-300 {
1882
+ border-color: var(--color-gray-300);
1883
+ }
1884
+ .border-red-500\/50 {
1885
+ border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1886
+ @supports (color: color-mix(in lab, red, red)) {
1887
+ border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1888
+ }
1889
+ }
1890
+ .border-white\/5 {
1891
+ border-color: color-mix(in srgb, #fff 5%, transparent);
1892
+ @supports (color: color-mix(in lab, red, red)) {
1893
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1894
+ }
1895
+ }
1896
+ .border-s-gray-200 {
1897
+ border-inline-start-color: var(--color-gray-200);
1898
+ }
1899
+ .index-button-selected {
1900
+ background-color: var(--color-gray-100);
1901
+ &:hover {
1902
+ @media (hover: hover) {
1903
+ background-color: var(--color-gray-100);
1904
+ }
1905
+ }
1906
+ &:where(.dark, .dark *) {
1907
+ background-color: var(--color-gray-800);
1908
+ }
1909
+ &:where(.dark, .dark *) {
1910
+ &:hover {
1911
+ @media (hover: hover) {
1912
+ background-color: var(--color-gray-800);
1913
+ }
1914
+ }
1915
+ }
1916
+ }
1917
+ .bg-blue-500 {
1918
+ background-color: var(--color-blue-500);
1919
+ }
1920
+ .bg-blue-600 {
1921
+ background-color: var(--color-blue-600);
1922
+ }
1923
+ .bg-blue-700 {
1924
+ background-color: var(--color-blue-700);
1925
+ }
1926
+ .bg-gray-50 {
1927
+ background-color: var(--color-gray-50);
1928
+ }
1929
+ .bg-gray-100 {
1930
+ background-color: var(--color-gray-100);
1931
+ }
1932
+ .bg-gray-200 {
1933
+ background-color: var(--color-gray-200);
1934
+ }
1935
+ .bg-gray-900\/50 {
1936
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
1937
+ @supports (color: color-mix(in lab, red, red)) {
1938
+ background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
1939
+ }
1940
+ }
1941
+ .bg-green-50 {
1942
+ background-color: var(--color-green-50);
1943
+ }
1944
+ .bg-green-100 {
1945
+ background-color: var(--color-green-100);
1946
+ }
1947
+ .bg-indigo-100 {
1948
+ background-color: var(--color-indigo-100);
1949
+ }
1950
+ .bg-red-50 {
1951
+ background-color: var(--color-red-50);
1952
+ }
1953
+ .bg-white {
1954
+ background-color: var(--color-white);
1955
+ }
1956
+ .bg-white\/5 {
1957
+ background-color: color-mix(in srgb, #fff 5%, transparent);
1958
+ @supports (color: color-mix(in lab, red, red)) {
1959
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1960
+ }
1961
+ }
1962
+ .bg-white\/50 {
1963
+ background-color: color-mix(in srgb, #fff 50%, transparent);
1964
+ @supports (color: color-mix(in lab, red, red)) {
1965
+ background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
1966
+ }
1967
+ }
1968
+ .bg-yellow-50 {
1969
+ background-color: var(--color-yellow-50);
1970
+ }
1971
+ .p-1 {
1972
+ padding: calc(var(--spacing) * 1);
1973
+ }
1974
+ .p-2 {
1975
+ padding: calc(var(--spacing) * 2);
1976
+ }
1977
+ .p-2\.5 {
1978
+ padding: calc(var(--spacing) * 2.5);
1979
+ }
1980
+ .p-3 {
1981
+ padding: calc(var(--spacing) * 3);
1982
+ }
1983
+ .p-4 {
1984
+ padding: calc(var(--spacing) * 4);
1985
+ }
1986
+ .p-6 {
1987
+ padding: calc(var(--spacing) * 6);
1988
+ }
1989
+ .panel-body {
1990
+ padding-inline: calc(var(--spacing) * 3);
1991
+ padding-block: calc(var(--spacing) * 5);
1992
+ }
1993
+ .px-1\.5 {
1994
+ padding-inline: calc(var(--spacing) * 1.5);
1995
+ }
1996
+ .px-2 {
1997
+ padding-inline: calc(var(--spacing) * 2);
1998
+ }
1999
+ .px-2\.5 {
2000
+ padding-inline: calc(var(--spacing) * 2.5);
2001
+ }
2002
+ .px-3 {
2003
+ padding-inline: calc(var(--spacing) * 3);
2004
+ }
2005
+ .px-4 {
2006
+ padding-inline: calc(var(--spacing) * 4);
2007
+ }
2008
+ .px-5 {
2009
+ padding-inline: calc(var(--spacing) * 5);
2010
+ }
2011
+ .px-6 {
2012
+ padding-inline: calc(var(--spacing) * 6);
2013
+ }
2014
+ .input {
2015
+ .formtastic :where(&) {
2016
+ padding-block: calc(var(--spacing) * 3);
2017
+ }
2018
+ }
2019
+ .py-0\.5 {
2020
+ padding-block: calc(var(--spacing) * 0.5);
2021
+ }
2022
+ .py-1 {
2023
+ padding-block: calc(var(--spacing) * 1);
2024
+ }
2025
+ .py-1\.5 {
2026
+ padding-block: calc(var(--spacing) * 1.5);
2027
+ }
2028
+ .py-2 {
2029
+ padding-block: calc(var(--spacing) * 2);
2030
+ }
2031
+ .py-2\.5 {
2032
+ padding-block: calc(var(--spacing) * 2.5);
2033
+ }
2034
+ .py-3 {
2035
+ padding-block: calc(var(--spacing) * 3);
2036
+ }
2037
+ .py-3\.5 {
2038
+ padding-block: calc(var(--spacing) * 3.5);
2039
+ }
2040
+ .py-4 {
2041
+ padding-block: calc(var(--spacing) * 4);
2042
+ }
2043
+ .py-5 {
2044
+ padding-block: calc(var(--spacing) * 5);
2045
+ }
2046
+ .py-6 {
2047
+ padding-block: calc(var(--spacing) * 6);
2048
+ }
2049
+ .py-8 {
2050
+ padding-block: calc(var(--spacing) * 8);
2051
+ }
2052
+ .py-12 {
2053
+ padding-block: calc(var(--spacing) * 12);
2054
+ }
2055
+ .py-16 {
2056
+ padding-block: calc(var(--spacing) * 16);
2057
+ }
2058
+ .ps-2 {
2059
+ padding-inline-start: calc(var(--spacing) * 2);
2060
+ }
2061
+ .ps-3 {
2062
+ padding-inline-start: calc(var(--spacing) * 3);
2063
+ }
2064
+ .ps-5 {
2065
+ padding-inline-start: calc(var(--spacing) * 5);
2066
+ }
2067
+ .pe-3 {
2068
+ padding-inline-end: calc(var(--spacing) * 3);
2069
+ }
2070
+ .pe-7 {
2071
+ padding-inline-end: calc(var(--spacing) * 7);
2072
+ }
2073
+ .pt-1 {
2074
+ padding-top: calc(var(--spacing) * 1);
2075
+ }
2076
+ .pt-2 {
2077
+ padding-top: calc(var(--spacing) * 2);
2078
+ }
2079
+ .pt-9 {
2080
+ padding-top: calc(var(--spacing) * 9);
2081
+ }
2082
+ .pt-16 {
2083
+ padding-top: calc(var(--spacing) * 16);
2084
+ }
2085
+ .pb-12 {
2086
+ padding-bottom: calc(var(--spacing) * 12);
2087
+ }
2088
+ .text-center {
2089
+ text-align: center;
2090
+ }
2091
+ .text-start {
2092
+ text-align: start;
2093
+ }
2094
+ .align-baseline {
2095
+ vertical-align: baseline;
2096
+ }
2097
+ .attributes-table-empty-value {
2098
+ font-size: var(--text-xs);
2099
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2100
+ --tw-font-weight: var(--font-weight-semibold);
2101
+ font-weight: var(--font-weight-semibold);
2102
+ color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 50%, transparent);
2103
+ @supports (color: color-mix(in lab, red, red)) {
2104
+ color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
2105
+ }
2106
+ text-transform: uppercase;
2107
+ &:where(.dark, .dark *) {
2108
+ color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 50%, transparent);
2109
+ @supports (color: color-mix(in lab, red, red)) {
2110
+ color: color-mix(in oklab, var(--color-gray-600) 50%, transparent);
2111
+ }
2112
+ }
2113
+ }
2114
+ .text-2xl {
2115
+ font-size: var(--text-2xl);
2116
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2117
+ }
2118
+ .text-3xl {
2119
+ font-size: var(--text-3xl);
2120
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
2121
+ }
2122
+ .text-base {
2123
+ font-size: var(--text-base);
2124
+ line-height: var(--tw-leading, var(--text-base--line-height));
2125
+ }
2126
+ .text-lg {
2127
+ font-size: var(--text-lg);
2128
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2129
+ }
2130
+ .text-sm {
2131
+ font-size: var(--text-sm);
2132
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2133
+ }
2134
+ .text-xl {
2135
+ font-size: var(--text-xl);
2136
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2137
+ }
2138
+ .text-xs {
2139
+ font-size: var(--text-xs);
2140
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2141
+ }
2142
+ .leading-6 {
2143
+ --tw-leading: calc(var(--spacing) * 6);
2144
+ line-height: calc(var(--spacing) * 6);
2145
+ }
2146
+ .leading-7 {
2147
+ --tw-leading: calc(var(--spacing) * 7);
2148
+ line-height: calc(var(--spacing) * 7);
2149
+ }
2150
+ .leading-8 {
2151
+ --tw-leading: calc(var(--spacing) * 8);
2152
+ line-height: calc(var(--spacing) * 8);
2153
+ }
2154
+ .leading-9 {
2155
+ --tw-leading: calc(var(--spacing) * 9);
2156
+ line-height: calc(var(--spacing) * 9);
2157
+ }
2158
+ .leading-none {
2159
+ --tw-leading: 1;
2160
+ line-height: 1;
2161
+ }
2162
+ .leading-tight {
2163
+ --tw-leading: var(--leading-tight);
2164
+ line-height: var(--leading-tight);
2165
+ }
2166
+ .font-bold {
2167
+ --tw-font-weight: var(--font-weight-bold);
2168
+ font-weight: var(--font-weight-bold);
2169
+ }
2170
+ .font-medium {
2171
+ --tw-font-weight: var(--font-weight-medium);
2172
+ font-weight: var(--font-weight-medium);
2173
+ }
2174
+ .font-normal {
2175
+ --tw-font-weight: var(--font-weight-normal);
2176
+ font-weight: var(--font-weight-normal);
2177
+ }
2178
+ .font-semibold {
2179
+ --tw-font-weight: var(--font-weight-semibold);
2180
+ font-weight: var(--font-weight-semibold);
2181
+ }
2182
+ .break-keep {
2183
+ word-break: keep-all;
2184
+ }
2185
+ .whitespace-nowrap {
2186
+ white-space: nowrap;
2187
+ }
2188
+ .text-blue-600 {
2189
+ color: var(--color-blue-600);
2190
+ }
2191
+ .text-gray-300 {
2192
+ color: var(--color-gray-300);
2193
+ }
2194
+ .text-gray-400 {
2195
+ color: var(--color-gray-400);
2196
+ }
2197
+ .text-gray-400\/50 {
2198
+ color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 50%, transparent);
2199
+ @supports (color: color-mix(in lab, red, red)) {
2200
+ color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
2201
+ }
2202
+ }
2203
+ .text-gray-500 {
2204
+ color: var(--color-gray-500);
2205
+ }
2206
+ .text-gray-600 {
2207
+ color: var(--color-gray-600);
2208
+ }
2209
+ .text-gray-700 {
2210
+ color: var(--color-gray-700);
2211
+ }
2212
+ .text-gray-800 {
2213
+ color: var(--color-gray-800);
2214
+ }
2215
+ .text-gray-900 {
2216
+ color: var(--color-gray-900);
2217
+ }
2218
+ .text-gray-950 {
2219
+ color: var(--color-gray-950);
2220
+ }
2221
+ .text-green-400 {
2222
+ color: var(--color-green-400);
2223
+ }
2224
+ .text-green-700 {
2225
+ color: var(--color-green-700);
2226
+ }
2227
+ .text-green-800 {
2228
+ color: var(--color-green-800);
2229
+ }
2230
+ .text-indigo-600 {
2231
+ color: var(--color-indigo-600);
2232
+ }
2233
+ .text-indigo-700 {
2234
+ color: var(--color-indigo-700);
2235
+ }
2236
+ .text-inherit {
2237
+ color: inherit;
2238
+ }
2239
+ .text-red-400 {
2240
+ color: var(--color-red-400);
2241
+ }
2242
+ .text-red-600 {
2243
+ color: var(--color-red-600);
2244
+ }
2245
+ .text-red-800 {
2246
+ color: var(--color-red-800);
2247
+ }
2248
+ .text-white {
2249
+ color: var(--color-white);
2250
+ }
2251
+ .text-yellow-400 {
2252
+ color: var(--color-yellow-400);
2253
+ }
2254
+ .text-yellow-800 {
2255
+ color: var(--color-yellow-800);
2256
+ }
2257
+ .uppercase {
2258
+ text-transform: uppercase;
2259
+ }
2260
+ .no-underline {
2261
+ text-decoration-line: none;
2262
+ }
2263
+ .underline {
2264
+ text-decoration-line: underline;
2265
+ }
2266
+ .underline-offset-\[\.2rem\] {
2267
+ text-underline-offset: .2rem;
2268
+ }
2269
+ .antialiased {
2270
+ -webkit-font-smoothing: antialiased;
2271
+ -moz-osx-font-smoothing: grayscale;
2272
+ }
2273
+ .opacity-0 {
2274
+ opacity: 0%;
2275
+ }
2276
+ .opacity-100 {
2277
+ opacity: 100%;
2278
+ }
2279
+ .shadow {
2280
+ --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));
2281
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2282
+ }
2283
+ .shadow-lg {
2284
+ --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));
2285
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2286
+ }
2287
+ .shadow-xs {
2288
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2289
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2290
+ }
2291
+ .ring-1 {
2292
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2293
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2294
+ }
2295
+ .ring-black\/5 {
2296
+ --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
2297
+ @supports (color: color-mix(in lab, red, red)) {
2298
+ --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
2299
+ }
2300
+ }
2301
+ .outline {
2302
+ outline-style: var(--tw-outline-style);
2303
+ outline-width: 1px;
2304
+ }
2305
+ .outline-black\/5 {
2306
+ outline-color: color-mix(in srgb, #000 5%, transparent);
2307
+ @supports (color: color-mix(in lab, red, red)) {
2308
+ outline-color: color-mix(in oklab, var(--color-black) 5%, transparent);
2309
+ }
2310
+ }
2311
+ .blur {
2312
+ --tw-blur: blur(8px);
2313
+ 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,);
2314
+ }
2315
+ .filter {
2316
+ 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,);
2317
+ }
2318
+ .backdrop-blur-md {
2319
+ --tw-backdrop-blur: blur(var(--blur-md));
2320
+ -webkit-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,);
2321
+ 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,);
2322
+ }
2323
+ .transition-opacity {
2324
+ transition-property: opacity;
2325
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2326
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2327
+ }
2328
+ .transition-transform {
2329
+ transition-property: transform, translate, scale, rotate;
2330
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2331
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2332
+ }
2333
+ .duration-200 {
2334
+ --tw-duration: 200ms;
2335
+ transition-duration: 200ms;
2336
+ }
2337
+ .ease-out {
2338
+ --tw-ease: var(--ease-out);
2339
+ transition-timing-function: var(--ease-out);
2340
+ }
2341
+ .group-data-open\:block {
2342
+ &:is(:where(.group)[data-open] *) {
2343
+ display: block;
2344
+ }
2345
+ }
2346
+ .group-data-open\:rotate-90 {
2347
+ &:is(:where(.group)[data-open] *) {
2348
+ rotate: 90deg;
2349
+ }
2350
+ }
2351
+ .placeholder\:text-gray-400 {
2352
+ &::placeholder {
2353
+ color: var(--color-gray-400);
2354
+ }
2355
+ }
2356
+ .first\:rounded-s-md {
2357
+ &:first-child {
2358
+ border-start-start-radius: var(--radius-md);
2359
+ border-end-start-radius: var(--radius-md);
2360
+ }
2361
+ }
2362
+ .last\:rounded-e-md {
2363
+ &:last-child {
2364
+ border-start-end-radius: var(--radius-md);
2365
+ border-end-end-radius: var(--radius-md);
2366
+ }
2367
+ }
2368
+ .last\:border-b-0 {
2369
+ &:last-child {
2370
+ border-bottom-style: var(--tw-border-style);
2371
+ border-bottom-width: 0px;
2372
+ }
2373
+ }
2374
+ .only\:mb-0 {
2375
+ &:only-child {
2376
+ margin-bottom: calc(var(--spacing) * 0);
2377
+ }
2378
+ }
2379
+ .hover\:border-gray-300 {
2380
+ &:hover {
2381
+ @media (hover: hover) {
2382
+ border-color: var(--color-gray-300);
2383
+ }
2384
+ }
2385
+ }
2386
+ .hover\:border-gray-400 {
2387
+ &:hover {
2388
+ @media (hover: hover) {
2389
+ border-color: var(--color-gray-400);
2390
+ }
2391
+ }
2392
+ }
2393
+ .hover\:bg-blue-500 {
2394
+ &:hover {
2395
+ @media (hover: hover) {
2396
+ background-color: var(--color-blue-500);
2397
+ }
2398
+ }
2399
+ }
2400
+ .hover\:bg-blue-700 {
2401
+ &:hover {
2402
+ @media (hover: hover) {
2403
+ background-color: var(--color-blue-700);
2404
+ }
2405
+ }
2406
+ }
2407
+ .hover\:bg-blue-800 {
2408
+ &:hover {
2409
+ @media (hover: hover) {
2410
+ background-color: var(--color-blue-800);
2411
+ }
2412
+ }
2413
+ }
2414
+ .hover\:bg-gray-100 {
2415
+ &:hover {
2416
+ @media (hover: hover) {
2417
+ background-color: var(--color-gray-100);
2418
+ }
2419
+ }
2420
+ }
2421
+ .hover\:bg-white {
2422
+ &:hover {
2423
+ @media (hover: hover) {
2424
+ background-color: var(--color-white);
2425
+ }
2426
+ }
2427
+ }
2428
+ .hover\:bg-white\/10 {
2429
+ &:hover {
2430
+ @media (hover: hover) {
2431
+ background-color: color-mix(in srgb, #fff 10%, transparent);
2432
+ @supports (color: color-mix(in lab, red, red)) {
2433
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2434
+ }
2435
+ }
2436
+ }
2437
+ }
2438
+ .hover\:text-blue-600 {
2439
+ &:hover {
2440
+ @media (hover: hover) {
2441
+ color: var(--color-blue-600);
2442
+ }
2443
+ }
2444
+ }
2445
+ .hover\:text-blue-700 {
2446
+ &:hover {
2447
+ @media (hover: hover) {
2448
+ color: var(--color-blue-700);
2449
+ }
2450
+ }
2451
+ }
2452
+ .hover\:text-gray-500 {
2453
+ &:hover {
2454
+ @media (hover: hover) {
2455
+ color: var(--color-gray-500);
2456
+ }
2457
+ }
2458
+ }
2459
+ .hover\:text-gray-600 {
2460
+ &:hover {
2461
+ @media (hover: hover) {
2462
+ color: var(--color-gray-600);
2463
+ }
2464
+ }
2465
+ }
2466
+ .hover\:text-gray-700 {
2467
+ &:hover {
2468
+ @media (hover: hover) {
2469
+ color: var(--color-gray-700);
2470
+ }
2471
+ }
2472
+ }
2473
+ .hover\:text-gray-900 {
2474
+ &:hover {
2475
+ @media (hover: hover) {
2476
+ color: var(--color-gray-900);
2477
+ }
2478
+ }
2479
+ }
2480
+ .hover\:text-white {
2481
+ &:hover {
2482
+ @media (hover: hover) {
2483
+ color: var(--color-white);
2484
+ }
2485
+ }
2486
+ }
2487
+ .focus\:z-10 {
2488
+ &:focus {
2489
+ z-index: 10;
2490
+ }
2491
+ }
2492
+ .focus\:border-blue-500 {
2493
+ &:focus {
2494
+ border-color: var(--color-blue-500);
2495
+ }
2496
+ }
2497
+ .focus\:text-blue-700 {
2498
+ &:focus {
2499
+ color: var(--color-blue-700);
2500
+ }
2501
+ }
2502
+ .focus\:ring-2 {
2503
+ &:focus {
2504
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2505
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2506
+ }
2507
+ }
2508
+ .focus\:ring-4 {
2509
+ &:focus {
2510
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2511
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2512
+ }
2513
+ }
2514
+ .focus\:ring-blue-300 {
2515
+ &:focus {
2516
+ --tw-ring-color: var(--color-blue-300);
2517
+ }
2518
+ }
2519
+ .focus\:ring-blue-500 {
2520
+ &:focus {
2521
+ --tw-ring-color: var(--color-blue-500);
2522
+ }
2523
+ }
2524
+ .focus\:ring-blue-700 {
2525
+ &:focus {
2526
+ --tw-ring-color: var(--color-blue-700);
2527
+ }
2528
+ }
2529
+ .focus\:ring-gray-200 {
2530
+ &:focus {
2531
+ --tw-ring-color: var(--color-gray-200);
2532
+ }
2533
+ }
2534
+ .focus\:outline-hidden {
2535
+ &:focus {
2536
+ --tw-outline-style: none;
2537
+ outline-style: none;
2538
+ @media (forced-colors: active) {
2539
+ outline: 2px solid transparent;
2540
+ outline-offset: 2px;
2541
+ }
2542
+ }
2543
+ }
2544
+ .focus\:outline-none {
2545
+ &:focus {
2546
+ --tw-outline-style: none;
2547
+ outline-style: none;
2548
+ }
2549
+ }
2550
+ .focus-visible\:bg-transparent {
2551
+ &:focus-visible {
2552
+ background-color: transparent;
2553
+ }
2554
+ }
2555
+ .focus-visible\:ring-0 {
2556
+ &:focus-visible {
2557
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2558
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2559
+ }
2560
+ }
2561
+ .focus-visible\:ring-offset-0 {
2562
+ &:focus-visible {
2563
+ --tw-ring-offset-width: 0px;
2564
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2565
+ }
2566
+ }
2567
+ .focus-visible\:outline-hidden {
2568
+ &:focus-visible {
2569
+ --tw-outline-style: none;
2570
+ outline-style: none;
2571
+ @media (forced-colors: active) {
2572
+ outline: 2px solid transparent;
2573
+ outline-offset: 2px;
2574
+ }
2575
+ }
2576
+ }
2577
+ .disabled\:pointer-events-none {
2578
+ &:disabled {
2579
+ pointer-events: none;
2580
+ }
2581
+ }
2582
+ .disabled\:border-gray-200\/70 {
2583
+ &:disabled {
2584
+ border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
2585
+ @supports (color: color-mix(in lab, red, red)) {
2586
+ border-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
2587
+ }
2588
+ }
2589
+ }
2590
+ .disabled\:text-gray-400 {
2591
+ &:disabled {
2592
+ color: var(--color-gray-400);
2593
+ }
2594
+ }
2595
+ .sm\:w-40 {
2596
+ @media (width >= 40rem) {
2597
+ width: calc(var(--spacing) * 40);
2598
+ }
2599
+ }
2600
+ .sm\:max-w-md {
2601
+ @media (width >= 40rem) {
2602
+ max-width: var(--container-md);
2603
+ }
2604
+ }
2605
+ .sm\:rounded-md {
2606
+ @media (width >= 40rem) {
2607
+ border-radius: var(--radius-md);
2608
+ }
2609
+ }
2610
+ .sm\:p-8 {
2611
+ @media (width >= 40rem) {
2612
+ padding: calc(var(--spacing) * 8);
2613
+ }
2614
+ }
2615
+ .sm\:px-6 {
2616
+ @media (width >= 40rem) {
2617
+ padding-inline: calc(var(--spacing) * 6);
2618
+ }
2619
+ }
2620
+ .sm\:py-8 {
2621
+ @media (width >= 40rem) {
2622
+ padding-block: calc(var(--spacing) * 8);
2623
+ }
2624
+ }
2625
+ .sm\:text-4xl {
2626
+ @media (width >= 40rem) {
2627
+ font-size: var(--text-4xl);
2628
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
2629
+ }
2630
+ }
2631
+ .md\:flex-row {
2632
+ @media (width >= 48rem) {
2633
+ flex-direction: row;
2634
+ }
2635
+ }
2636
+ .md\:items-center {
2637
+ @media (width >= 48rem) {
2638
+ align-items: center;
2639
+ }
2640
+ }
2641
+ .md\:space-y-6 {
2642
+ @media (width >= 48rem) {
2643
+ :where(& > :not(:last-child)) {
2644
+ --tw-space-y-reverse: 0;
2645
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
2646
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
2647
+ }
2648
+ }
2649
+ }
2650
+ .md\:py-32 {
2651
+ @media (width >= 48rem) {
2652
+ padding-block: calc(var(--spacing) * 32);
2653
+ }
2654
+ }
2655
+ .md\:text-2xl {
2656
+ @media (width >= 48rem) {
2657
+ font-size: var(--text-2xl);
2658
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2659
+ }
2660
+ }
2661
+ .lg\:auto-cols-\[minmax\(0\,250px\)\] {
2662
+ @media (width >= 64rem) {
2663
+ grid-auto-columns: minmax(0,250px);
2664
+ }
2665
+ }
2666
+ .lg\:grid-flow-col {
2667
+ @media (width >= 64rem) {
2668
+ grid-auto-flow: column;
2669
+ }
2670
+ }
2671
+ .lg\:flex-row {
2672
+ @media (width >= 64rem) {
2673
+ flex-direction: row;
2674
+ }
2675
+ }
2676
+ .lg\:justify-end {
2677
+ @media (width >= 64rem) {
2678
+ justify-content: flex-end;
2679
+ }
2680
+ }
2681
+ .lg\:gap-6 {
2682
+ @media (width >= 64rem) {
2683
+ gap: calc(var(--spacing) * 6);
2684
+ }
2685
+ }
2686
+ .lg\:p-3 {
2687
+ @media (width >= 64rem) {
2688
+ padding: calc(var(--spacing) * 3);
2689
+ }
2690
+ }
2691
+ .lg\:px-5 {
2692
+ @media (width >= 64rem) {
2693
+ padding-inline: calc(var(--spacing) * 5);
2694
+ }
2695
+ }
2696
+ .lg\:py-4 {
2697
+ @media (width >= 64rem) {
2698
+ padding-block: calc(var(--spacing) * 4);
2699
+ }
2700
+ }
2701
+ .xl\:top-16 {
2702
+ @media (width >= 80rem) {
2703
+ top: calc(var(--spacing) * 16);
2704
+ }
2705
+ }
2706
+ .xl\:ms-60 {
2707
+ @media (width >= 80rem) {
2708
+ margin-inline-start: calc(var(--spacing) * 60);
2709
+ }
2710
+ }
2711
+ .xl\:hidden {
2712
+ @media (width >= 80rem) {
2713
+ display: none;
2714
+ }
2715
+ }
2716
+ .xl\:w-60 {
2717
+ @media (width >= 80rem) {
2718
+ width: calc(var(--spacing) * 60);
2719
+ }
2720
+ }
2721
+ .xl\:translate-x-0 {
2722
+ @media (width >= 80rem) {
2723
+ --tw-translate-x: calc(var(--spacing) * 0);
2724
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2725
+ }
2726
+ }
2727
+ .xl\:border-e {
2728
+ @media (width >= 80rem) {
2729
+ border-inline-end-style: var(--tw-border-style);
2730
+ border-inline-end-width: 1px;
2731
+ }
2732
+ }
2733
+ .xl\:border-gray-200 {
2734
+ @media (width >= 80rem) {
2735
+ border-color: var(--color-gray-200);
2736
+ }
2737
+ }
2738
+ .rtl\:-scale-x-100 {
2739
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2740
+ --tw-scale-x: calc(100% * -1);
2741
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2742
+ }
2743
+ }
2744
+ .rtl\:rotate-180 {
2745
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2746
+ rotate: 180deg;
2747
+ }
2748
+ }
2749
+ .rtl\:space-x-reverse {
2750
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2751
+ :where(& > :not(:last-child)) {
2752
+ --tw-space-x-reverse: 1;
2753
+ }
2754
+ }
2755
+ }
2756
+ .group-data-open\:rtl\:-rotate-90 {
2757
+ &:is(:where(.group)[data-open] *) {
2758
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2759
+ rotate: calc(90deg * -1);
2760
+ }
2761
+ }
2762
+ }
2763
+ .dark\:block {
2764
+ &:where(.dark, .dark *) {
2765
+ display: block;
2766
+ }
2767
+ }
2768
+ .dark\:hidden {
2769
+ &:where(.dark, .dark *) {
2770
+ display: none;
2771
+ }
2772
+ }
2773
+ .dark\:border {
2774
+ &:where(.dark, .dark *) {
2775
+ border-style: var(--tw-border-style);
2776
+ border-width: 1px;
2777
+ }
2778
+ }
2779
+ .dark\:border-blue-500 {
2780
+ &:where(.dark, .dark *) {
2781
+ border-color: var(--color-blue-500);
2782
+ }
2783
+ }
2784
+ .dark\:border-gray-600 {
2785
+ &:where(.dark, .dark *) {
2786
+ border-color: var(--color-gray-600);
2787
+ }
2788
+ }
2789
+ .dark\:border-gray-700 {
2790
+ &:where(.dark, .dark *) {
2791
+ border-color: var(--color-gray-700);
2792
+ }
2793
+ }
2794
+ .dark\:border-gray-800 {
2795
+ &:where(.dark, .dark *) {
2796
+ border-color: var(--color-gray-800);
2797
+ }
2798
+ }
2799
+ .dark\:border-gray-800\/50 {
2800
+ &:where(.dark, .dark *) {
2801
+ border-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
2802
+ @supports (color: color-mix(in lab, red, red)) {
2803
+ border-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
2804
+ }
2805
+ }
2806
+ }
2807
+ .dark\:border-transparent {
2808
+ &:where(.dark, .dark *) {
2809
+ border-color: transparent;
2810
+ }
2811
+ }
2812
+ .dark\:border-white\/5 {
2813
+ &:where(.dark, .dark *) {
2814
+ border-color: color-mix(in srgb, #fff 5%, transparent);
2815
+ @supports (color: color-mix(in lab, red, red)) {
2816
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2817
+ }
2818
+ }
2819
+ }
2820
+ .dark\:border-white\/10 {
2821
+ &:where(.dark, .dark *) {
2822
+ border-color: color-mix(in srgb, #fff 10%, transparent);
2823
+ @supports (color: color-mix(in lab, red, red)) {
2824
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2825
+ }
2826
+ }
2827
+ }
2828
+ .dark\:border-s-gray-700 {
2829
+ &:where(.dark, .dark *) {
2830
+ border-inline-start-color: var(--color-gray-700);
2831
+ }
2832
+ }
2833
+ .dark\:bg-blue-600 {
2834
+ &:where(.dark, .dark *) {
2835
+ background-color: var(--color-blue-600);
2836
+ }
2837
+ }
2838
+ .dark\:bg-gray-400\/20 {
2839
+ &:where(.dark, .dark *) {
2840
+ background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 20%, transparent);
2841
+ @supports (color: color-mix(in lab, red, red)) {
2842
+ background-color: color-mix(in oklab, var(--color-gray-400) 20%, transparent);
2843
+ }
2844
+ }
2845
+ }
2846
+ .dark\:bg-gray-600 {
2847
+ &:where(.dark, .dark *) {
2848
+ background-color: var(--color-gray-600);
2849
+ }
2850
+ }
2851
+ .dark\:bg-gray-700 {
2852
+ &:where(.dark, .dark *) {
2853
+ background-color: var(--color-gray-700);
2854
+ }
2855
+ }
2856
+ .dark\:bg-gray-800 {
2857
+ &:where(.dark, .dark *) {
2858
+ background-color: var(--color-gray-800);
2859
+ }
2860
+ }
2861
+ .dark\:bg-gray-800\/50 {
2862
+ &:where(.dark, .dark *) {
2863
+ background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
2864
+ @supports (color: color-mix(in lab, red, red)) {
2865
+ background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
2866
+ }
2867
+ }
2868
+ }
2869
+ .dark\:bg-gray-900 {
2870
+ &:where(.dark, .dark *) {
2871
+ background-color: var(--color-gray-900);
2872
+ }
2873
+ }
2874
+ .dark\:bg-gray-900\/80 {
2875
+ &:where(.dark, .dark *) {
2876
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
2877
+ @supports (color: color-mix(in lab, red, red)) {
2878
+ background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
2879
+ }
2880
+ }
2881
+ }
2882
+ .dark\:bg-gray-950 {
2883
+ &:where(.dark, .dark *) {
2884
+ background-color: var(--color-gray-950);
2885
+ }
2886
+ }
2887
+ .dark\:bg-gray-950\/50 {
2888
+ &:where(.dark, .dark *) {
2889
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 50%, transparent);
2890
+ @supports (color: color-mix(in lab, red, red)) {
2891
+ background-color: color-mix(in oklab, var(--color-gray-950) 50%, transparent);
2892
+ }
2893
+ }
2894
+ }
2895
+ .dark\:bg-gray-950\/75 {
2896
+ &:where(.dark, .dark *) {
2897
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 75%, transparent);
2898
+ @supports (color: color-mix(in lab, red, red)) {
2899
+ background-color: color-mix(in oklab, var(--color-gray-950) 75%, transparent);
2900
+ }
2901
+ }
2902
+ }
2903
+ .dark\:bg-gray-950\/95 {
2904
+ &:where(.dark, .dark *) {
2905
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 95%, transparent);
2906
+ @supports (color: color-mix(in lab, red, red)) {
2907
+ background-color: color-mix(in oklab, var(--color-gray-950) 95%, transparent);
2908
+ }
2909
+ }
2910
+ }
2911
+ .dark\:bg-green-400\/20 {
2912
+ &:where(.dark, .dark *) {
2913
+ background-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 20%, transparent);
2914
+ @supports (color: color-mix(in lab, red, red)) {
2915
+ background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent);
2916
+ }
2917
+ }
2918
+ }
2919
+ .dark\:bg-green-800 {
2920
+ &:where(.dark, .dark *) {
2921
+ background-color: var(--color-green-800);
2922
+ }
2923
+ }
2924
+ .dark\:bg-indigo-800\/60 {
2925
+ &:where(.dark, .dark *) {
2926
+ background-color: color-mix(in srgb, oklch(39.8% 0.195 277.366) 60%, transparent);
2927
+ @supports (color: color-mix(in lab, red, red)) {
2928
+ background-color: color-mix(in oklab, var(--color-indigo-800) 60%, transparent);
2929
+ }
2930
+ }
2931
+ }
2932
+ .dark\:bg-inherit {
2933
+ &:where(.dark, .dark *) {
2934
+ background-color: inherit;
2935
+ }
2936
+ }
2937
+ .dark\:bg-red-500\/15 {
2938
+ &:where(.dark, .dark *) {
2939
+ background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
2940
+ @supports (color: color-mix(in lab, red, red)) {
2941
+ background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
2942
+ }
2943
+ }
2944
+ }
2945
+ .dark\:bg-red-800 {
2946
+ &:where(.dark, .dark *) {
2947
+ background-color: var(--color-red-800);
2948
+ }
2949
+ }
2950
+ .dark\:bg-white\/5 {
2951
+ &:where(.dark, .dark *) {
2952
+ background-color: color-mix(in srgb, #fff 5%, transparent);
2953
+ @supports (color: color-mix(in lab, red, red)) {
2954
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2955
+ }
2956
+ }
2957
+ }
2958
+ .dark\:bg-yellow-800 {
2959
+ &:where(.dark, .dark *) {
2960
+ background-color: var(--color-yellow-800);
2961
+ }
2962
+ }
2963
+ .dark\:text-blue-500 {
2964
+ &:where(.dark, .dark *) {
2965
+ color: var(--color-blue-500);
2966
+ }
2967
+ }
2968
+ .dark\:text-gray-100 {
2969
+ &:where(.dark, .dark *) {
2970
+ color: var(--color-gray-100);
2971
+ }
2972
+ }
2973
+ .dark\:text-gray-200 {
2974
+ &:where(.dark, .dark *) {
2975
+ color: var(--color-gray-200);
2976
+ }
2977
+ }
2978
+ .dark\:text-gray-300 {
2979
+ &:where(.dark, .dark *) {
2980
+ color: var(--color-gray-300);
2981
+ }
2982
+ }
2983
+ .dark\:text-gray-400 {
2984
+ &:where(.dark, .dark *) {
2985
+ color: var(--color-gray-400);
2986
+ }
2987
+ }
2988
+ .dark\:text-gray-500 {
2989
+ &:where(.dark, .dark *) {
2990
+ color: var(--color-gray-500);
2991
+ }
2992
+ }
2993
+ .dark\:text-gray-600\/50 {
2994
+ &:where(.dark, .dark *) {
2995
+ color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 50%, transparent);
2996
+ @supports (color: color-mix(in lab, red, red)) {
2997
+ color: color-mix(in oklab, var(--color-gray-600) 50%, transparent);
2998
+ }
2999
+ }
3000
+ }
3001
+ .dark\:text-gray-700 {
3002
+ &:where(.dark, .dark *) {
3003
+ color: var(--color-gray-700);
3004
+ }
3005
+ }
3006
+ .dark\:text-green-300 {
3007
+ &:where(.dark, .dark *) {
3008
+ color: var(--color-green-300);
3009
+ }
3010
+ }
3011
+ .dark\:text-green-400 {
3012
+ &:where(.dark, .dark *) {
3013
+ color: var(--color-green-400);
3014
+ }
3015
+ }
3016
+ .dark\:text-indigo-400 {
3017
+ &:where(.dark, .dark *) {
3018
+ color: var(--color-indigo-400);
3019
+ }
3020
+ }
3021
+ .dark\:text-indigo-500 {
3022
+ &:where(.dark, .dark *) {
3023
+ color: var(--color-indigo-500);
3024
+ }
3025
+ }
3026
+ .dark\:text-red-200 {
3027
+ &:where(.dark, .dark *) {
3028
+ color: var(--color-red-200);
3029
+ }
3030
+ }
3031
+ .dark\:text-red-300 {
3032
+ &:where(.dark, .dark *) {
3033
+ color: var(--color-red-300);
3034
+ }
3035
+ }
3036
+ .dark\:text-red-400 {
3037
+ &:where(.dark, .dark *) {
3038
+ color: var(--color-red-400);
3039
+ }
3040
+ }
3041
+ .dark\:text-white {
3042
+ &:where(.dark, .dark *) {
3043
+ color: var(--color-white);
3044
+ }
3045
+ }
3046
+ .dark\:text-yellow-300 {
3047
+ &:where(.dark, .dark *) {
3048
+ color: var(--color-yellow-300);
3049
+ }
3050
+ }
3051
+ .dark\:scheme-dark {
3052
+ &:where(.dark, .dark *) {
3053
+ color-scheme: dark;
3054
+ }
3055
+ }
3056
+ .dark\:ring-offset-gray-800 {
3057
+ &:where(.dark, .dark *) {
3058
+ --tw-ring-offset-color: var(--color-gray-800);
3059
+ }
3060
+ }
3061
+ .dark\:-outline-offset-1 {
3062
+ &:where(.dark, .dark *) {
3063
+ outline-offset: calc(1px * -1);
3064
+ }
3065
+ }
3066
+ .dark\:outline-white\/10 {
3067
+ &:where(.dark, .dark *) {
3068
+ outline-color: color-mix(in srgb, #fff 10%, transparent);
3069
+ @supports (color: color-mix(in lab, red, red)) {
3070
+ outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3071
+ }
3072
+ }
3073
+ }
3074
+ .dark\:placeholder\:text-gray-500 {
3075
+ &:where(.dark, .dark *) {
3076
+ &::placeholder {
3077
+ color: var(--color-gray-500);
3078
+ }
3079
+ }
3080
+ }
3081
+ .dark\:hover\:border-gray-600 {
3082
+ &:where(.dark, .dark *) {
3083
+ &:hover {
3084
+ @media (hover: hover) {
3085
+ border-color: var(--color-gray-600);
3086
+ }
3087
+ }
3088
+ }
3089
+ }
3090
+ .dark\:hover\:bg-blue-600 {
3091
+ &:where(.dark, .dark *) {
3092
+ &:hover {
3093
+ @media (hover: hover) {
3094
+ background-color: var(--color-blue-600);
3095
+ }
3096
+ }
3097
+ }
3098
+ }
3099
+ .dark\:hover\:bg-blue-700 {
3100
+ &:where(.dark, .dark *) {
3101
+ &:hover {
3102
+ @media (hover: hover) {
3103
+ background-color: var(--color-blue-700);
3104
+ }
3105
+ }
3106
+ }
3107
+ }
3108
+ .dark\:hover\:bg-gray-600 {
3109
+ &:where(.dark, .dark *) {
3110
+ &:hover {
3111
+ @media (hover: hover) {
3112
+ background-color: var(--color-gray-600);
3113
+ }
3114
+ }
3115
+ }
3116
+ }
3117
+ .dark\:hover\:bg-gray-700 {
3118
+ &:where(.dark, .dark *) {
3119
+ &:hover {
3120
+ @media (hover: hover) {
3121
+ background-color: var(--color-gray-700);
3122
+ }
3123
+ }
3124
+ }
3125
+ }
3126
+ .dark\:hover\:bg-gray-800 {
3127
+ &:where(.dark, .dark *) {
3128
+ &:hover {
3129
+ @media (hover: hover) {
3130
+ background-color: var(--color-gray-800);
3131
+ }
3132
+ }
3133
+ }
3134
+ }
3135
+ .dark\:hover\:bg-inherit {
3136
+ &:where(.dark, .dark *) {
3137
+ &:hover {
3138
+ @media (hover: hover) {
3139
+ background-color: inherit;
3140
+ }
3141
+ }
3142
+ }
3143
+ }
3144
+ .dark\:hover\:bg-white\/5 {
3145
+ &:where(.dark, .dark *) {
3146
+ &:hover {
3147
+ @media (hover: hover) {
3148
+ background-color: color-mix(in srgb, #fff 5%, transparent);
3149
+ @supports (color: color-mix(in lab, red, red)) {
3150
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3151
+ }
3152
+ }
3153
+ }
3154
+ }
3155
+ }
3156
+ .dark\:hover\:text-blue-500 {
3157
+ &:where(.dark, .dark *) {
3158
+ &:hover {
3159
+ @media (hover: hover) {
3160
+ color: var(--color-blue-500);
3161
+ }
3162
+ }
3163
+ }
3164
+ }
3165
+ .dark\:hover\:text-gray-100 {
3166
+ &:where(.dark, .dark *) {
3167
+ &:hover {
3168
+ @media (hover: hover) {
3169
+ color: var(--color-gray-100);
3170
+ }
3171
+ }
3172
+ }
3173
+ }
3174
+ .dark\:hover\:text-gray-200 {
3175
+ &:where(.dark, .dark *) {
3176
+ &:hover {
3177
+ @media (hover: hover) {
3178
+ color: var(--color-gray-200);
3179
+ }
3180
+ }
3181
+ }
3182
+ }
3183
+ .dark\:hover\:text-gray-300 {
3184
+ &:where(.dark, .dark *) {
3185
+ &:hover {
3186
+ @media (hover: hover) {
3187
+ color: var(--color-gray-300);
3188
+ }
3189
+ }
3190
+ }
3191
+ }
3192
+ .dark\:hover\:text-gray-400 {
3193
+ &:where(.dark, .dark *) {
3194
+ &:hover {
3195
+ @media (hover: hover) {
3196
+ color: var(--color-gray-400);
3197
+ }
3198
+ }
3199
+ }
3200
+ }
3201
+ .dark\:hover\:text-white {
3202
+ &:where(.dark, .dark *) {
3203
+ &:hover {
3204
+ @media (hover: hover) {
3205
+ color: var(--color-white);
3206
+ }
3207
+ }
3208
+ }
3209
+ }
3210
+ .dark\:focus\:border-blue-500 {
3211
+ &:where(.dark, .dark *) {
3212
+ &:focus {
3213
+ border-color: var(--color-blue-500);
3214
+ }
3215
+ }
3216
+ }
3217
+ .dark\:focus\:bg-blue-600 {
3218
+ &:where(.dark, .dark *) {
3219
+ &:focus {
3220
+ background-color: var(--color-blue-600);
3221
+ }
3222
+ }
3223
+ }
3224
+ .dark\:focus\:text-white {
3225
+ &:where(.dark, .dark *) {
3226
+ &:focus {
3227
+ color: var(--color-white);
3228
+ }
3229
+ }
3230
+ }
3231
+ .dark\:focus\:ring-blue-500 {
3232
+ &:where(.dark, .dark *) {
3233
+ &:focus {
3234
+ --tw-ring-color: var(--color-blue-500);
3235
+ }
3236
+ }
3237
+ }
3238
+ .dark\:focus\:ring-blue-600 {
3239
+ &:where(.dark, .dark *) {
3240
+ &:focus {
3241
+ --tw-ring-color: var(--color-blue-600);
3242
+ }
3243
+ }
3244
+ }
3245
+ .dark\:focus\:ring-blue-800 {
3246
+ &:where(.dark, .dark *) {
3247
+ &:focus {
3248
+ --tw-ring-color: var(--color-blue-800);
3249
+ }
3250
+ }
3251
+ }
3252
+ .dark\:focus\:ring-gray-700 {
3253
+ &:where(.dark, .dark *) {
3254
+ &:focus {
3255
+ --tw-ring-color: var(--color-gray-700);
3256
+ }
3257
+ }
3258
+ }
3259
+ .dark\:disabled\:border-gray-800 {
3260
+ &:where(.dark, .dark *) {
3261
+ &:disabled {
3262
+ border-color: var(--color-gray-800);
3263
+ }
3264
+ }
3265
+ }
3266
+ .dark\:disabled\:bg-gray-900 {
3267
+ &:where(.dark, .dark *) {
3268
+ &:disabled {
3269
+ background-color: var(--color-gray-900);
3270
+ }
3271
+ }
3272
+ }
3273
+ .dark\:disabled\:text-gray-700 {
3274
+ &:where(.dark, .dark *) {
3275
+ &:disabled {
3276
+ color: var(--color-gray-700);
3277
+ }
3278
+ }
3279
+ }
3280
+ .xl\:dark\:border-white\/10 {
3281
+ @media (width >= 80rem) {
3282
+ &:where(.dark, .dark *) {
3283
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3284
+ @supports (color: color-mix(in lab, red, red)) {
3285
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3286
+ }
3287
+ }
3288
+ }
3289
+ }
3290
+ }
3291
+ @layer base {
3292
+ [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],textarea,select {
3293
+ &:where(.dark, .dark *) {
3294
+ color-scheme: dark;
3295
+ }
3296
+ appearance: none;
3297
+ padding: 0.5rem 0.75rem;
3298
+ --tw-shadow: 0 0 #0000;
3299
+ &:focus {
3300
+ outline: 2px solid transparent;
3301
+ outline-offset: 2px;
3302
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3303
+ --tw-ring-offset-width: 0px;
3304
+ --tw-ring-offset-color: #fff;
3305
+ --tw-ring-color: oklch(54.6% 0.245 262.881);
3306
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3307
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3308
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3309
+ border-color: oklch(54.6% 0.245 262.881);
3310
+ }
3311
+ }
3312
+ ::-webkit-datetime-edit {
3313
+ display: inline-flex;
3314
+ }
3315
+ ::-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 {
3316
+ padding-bottom: 0;
3317
+ padding-top: 0;
3318
+ }
3319
+ ::-webkit-date-and-time-value {
3320
+ min-height: 1.5em;
3321
+ text-align: inherit;
3322
+ }
3323
+ select {
3324
+ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
3325
+ background-position: right 0.75rem center;
3326
+ background-repeat: no-repeat;
3327
+ background-size: 0.75em 0.75em;
3328
+ padding-inline-end: 2rem;
3329
+ print-color-adjust: exact;
3330
+ }
3331
+ :is(:where([dir=rtl]) select) {
3332
+ background-position: left 0.75rem center;
3333
+ }
3334
+ [multiple] {
3335
+ background-image: initial;
3336
+ background-position: initial;
3337
+ background-repeat: unset;
3338
+ background-size: initial;
3339
+ padding-inline-end: 0.75rem;
3340
+ print-color-adjust: unset;
3341
+ }
3342
+ [type='checkbox'],[type='radio'] {
3343
+ appearance: none;
3344
+ background-origin: border-box;
3345
+ color: oklch(54.6% 0.245 262.881);
3346
+ display: inline-block;
3347
+ flex-shrink: 0;
3348
+ print-color-adjust: exact;
3349
+ user-select: none;
3350
+ vertical-align: middle;
3351
+ --tw-shadow: 0 0 #0000;
3352
+ }
3353
+ [type='checkbox']:focus,[type='radio']:focus {
3354
+ outline: 2px solid transparent;
3355
+ outline-offset: 2px;
3356
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3357
+ --tw-ring-offset-width: 2px;
3358
+ --tw-ring-offset-color: #fff;
3359
+ --tw-ring-color: oklch(54.6% 0.245 262.881);
3360
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3361
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3362
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3363
+ }
3364
+ [type='checkbox']:checked,[type='checkbox']:indeterminate,[type='radio']:checked {
3365
+ background-color: currentColor;
3366
+ background-position: center;
3367
+ background-repeat: no-repeat;
3368
+ background-size: 100% 100%;
3369
+ border-color: transparent;
3370
+ }
3371
+ [type='checkbox']:checked {
3372
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4 8 L7 11 L12 5' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' /%3e %3c/svg%3e");
3373
+ print-color-adjust: exact;
3374
+ }
3375
+ [type='radio']:checked {
3376
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
3377
+ }
3378
+ [type='checkbox']:indeterminate {
3379
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4 8 L12 8' stroke='white' stroke-linecap='round' stroke-width='2.5' /%3e %3c/svg%3e");
3380
+ print-color-adjust: exact;
3381
+ }
3382
+ button:not(:disabled),[role='button']:not(:disabled),[type='file'] {
3383
+ cursor: pointer;
3384
+ }
3385
+ [type=file]::file-selector-button {
3386
+ background-color: oklch(96.7% 0.003 264.542);
3387
+ border: 1px solid oklch(92.8% 0.006 264.531);
3388
+ border-radius: 0.25rem;
3389
+ cursor: pointer;
3390
+ padding: 0.5rem 0.75rem;
3391
+ &:hover {
3392
+ background-color: oklch(92.8% 0.006 264.531);
3393
+ }
3394
+ }
3395
+ .dark [type=file]::file-selector-button {
3396
+ border-color: color-mix(in srgb, #fff 5%, transparent);
3397
+ @supports (color: color-mix(in lab, red, red)) {
3398
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3399
+ }
3400
+ background-color: color-mix(in srgb, #fff 5%, transparent);
3401
+ @supports (color: color-mix(in lab, red, red)) {
3402
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3403
+ }
3404
+ color: var(--color-white);
3405
+ &:hover {
3406
+ @media (hover: hover) {
3407
+ background-color: color-mix(in srgb, #fff 10%, transparent);
3408
+ @supports (color: color-mix(in lab, red, red)) {
3409
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3410
+ }
3411
+ }
3412
+ }
3413
+ }
3414
+ [type=checkbox] {
3415
+ height: calc(var(--spacing) * 4);
3416
+ width: calc(var(--spacing) * 4);
3417
+ border-radius: var(--radius-sm);
3418
+ border-style: var(--tw-border-style);
3419
+ border-width: 1px;
3420
+ border-color: var(--color-gray-300);
3421
+ background-color: var(--color-gray-100);
3422
+ &:focus {
3423
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3424
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3425
+ }
3426
+ &:focus {
3427
+ --tw-ring-color: var(--color-blue-500);
3428
+ }
3429
+ &:where(.dark, .dark *) {
3430
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3431
+ @supports (color: color-mix(in lab, red, red)) {
3432
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3433
+ }
3434
+ }
3435
+ &:where(.dark, .dark *) {
3436
+ background-color: color-mix(in srgb, #fff 5%, transparent);
3437
+ @supports (color: color-mix(in lab, red, red)) {
3438
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3439
+ }
3440
+ }
3441
+ &:where(.dark, .dark *) {
3442
+ --tw-ring-offset-color: var(--color-gray-800);
3443
+ }
3444
+ &:where(.dark, .dark *) {
3445
+ &:focus {
3446
+ --tw-ring-color: var(--color-blue-600);
3447
+ }
3448
+ }
3449
+ }
3450
+ [type=radio] {
3451
+ height: calc(var(--spacing) * 4);
3452
+ width: calc(var(--spacing) * 4);
3453
+ border-radius: calc(infinity * 1px);
3454
+ border-style: var(--tw-border-style);
3455
+ border-width: 1px;
3456
+ border-color: var(--color-gray-300);
3457
+ background-color: var(--color-gray-100);
3458
+ &:focus {
3459
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3460
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3461
+ }
3462
+ &:focus {
3463
+ --tw-ring-color: var(--color-blue-300);
3464
+ }
3465
+ &:where(.dark, .dark *) {
3466
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3467
+ @supports (color: color-mix(in lab, red, red)) {
3468
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3469
+ }
3470
+ }
3471
+ &:where(.dark, .dark *) {
3472
+ background-color: color-mix(in srgb, #fff 5%, transparent);
3473
+ @supports (color: color-mix(in lab, red, red)) {
3474
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3475
+ }
3476
+ }
3477
+ &:where(.dark, .dark *) {
3478
+ &:focus {
3479
+ background-color: var(--color-blue-600);
3480
+ }
3481
+ }
3482
+ &:where(.dark, .dark *) {
3483
+ &:focus {
3484
+ --tw-ring-color: var(--color-blue-600);
3485
+ }
3486
+ }
3487
+ }
3488
+ [type=datetime-local],[type=month],[type=week],[type=search],[type=date],[type=email],[type=number],[type=password],[type=tel],[type=text],[type=time],[type=url],select,textarea {
3489
+ width: 100%;
3490
+ border-radius: var(--radius-md);
3491
+ border-style: var(--tw-border-style);
3492
+ border-width: 1px;
3493
+ border-color: var(--color-gray-300);
3494
+ background-color: var(--color-gray-50);
3495
+ color: var(--color-gray-900);
3496
+ &::placeholder {
3497
+ color: var(--color-gray-400);
3498
+ }
3499
+ &:focus {
3500
+ border-color: var(--color-blue-500);
3501
+ }
3502
+ &:focus {
3503
+ --tw-ring-color: var(--color-blue-500);
3504
+ }
3505
+ &:where(.dark, .dark *) {
3506
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3507
+ @supports (color: color-mix(in lab, red, red)) {
3508
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3509
+ }
3510
+ }
3511
+ &:where(.dark, .dark *) {
3512
+ background-color: color-mix(in srgb, #fff 5%, transparent);
3513
+ @supports (color: color-mix(in lab, red, red)) {
3514
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3515
+ }
3516
+ }
3517
+ &:where(.dark, .dark *) {
3518
+ color: var(--color-white);
3519
+ }
3520
+ &:where(.dark, .dark *) {
3521
+ &::placeholder {
3522
+ color: var(--color-gray-500);
3523
+ }
3524
+ }
3525
+ &:where(.dark, .dark *) {
3526
+ &:focus {
3527
+ border-color: var(--color-blue-500);
3528
+ }
3529
+ }
3530
+ &:where(.dark, .dark *) {
3531
+ &:focus {
3532
+ --tw-ring-color: var(--color-blue-500);
3533
+ }
3534
+ }
3535
+ }
3536
+ :where(select:not([multiple])) {
3537
+ option, optgroup {
3538
+ &:where(.dark, .dark *) {
3539
+ background-color: var(--color-gray-800);
3540
+ }
3541
+ }
3542
+ }
3543
+ a {
3544
+ color: var(--color-blue-600);
3545
+ text-decoration-line: underline;
3546
+ text-underline-offset: .2rem;
3547
+ &:where(.dark, .dark *) {
3548
+ color: var(--color-blue-500);
3549
+ }
3550
+ }
3551
+ }
3552
+ @property --tw-border-style {
3553
+ syntax: "*";
3554
+ inherits: false;
3555
+ initial-value: solid;
3556
+ }
3557
+ @property --tw-font-weight {
3558
+ syntax: "*";
3559
+ inherits: false;
3560
+ }
3561
+ @property --tw-shadow {
3562
+ syntax: "*";
3563
+ inherits: false;
3564
+ initial-value: 0 0 #0000;
3565
+ }
3566
+ @property --tw-shadow-color {
3567
+ syntax: "*";
3568
+ inherits: false;
3569
+ }
3570
+ @property --tw-shadow-alpha {
3571
+ syntax: "<percentage>";
3572
+ inherits: false;
3573
+ initial-value: 100%;
3574
+ }
3575
+ @property --tw-inset-shadow {
3576
+ syntax: "*";
3577
+ inherits: false;
3578
+ initial-value: 0 0 #0000;
3579
+ }
3580
+ @property --tw-inset-shadow-color {
3581
+ syntax: "*";
3582
+ inherits: false;
3583
+ }
3584
+ @property --tw-inset-shadow-alpha {
3585
+ syntax: "<percentage>";
3586
+ inherits: false;
3587
+ initial-value: 100%;
3588
+ }
3589
+ @property --tw-ring-color {
3590
+ syntax: "*";
3591
+ inherits: false;
3592
+ }
3593
+ @property --tw-ring-shadow {
3594
+ syntax: "*";
3595
+ inherits: false;
3596
+ initial-value: 0 0 #0000;
3597
+ }
3598
+ @property --tw-inset-ring-color {
3599
+ syntax: "*";
3600
+ inherits: false;
3601
+ }
3602
+ @property --tw-inset-ring-shadow {
3603
+ syntax: "*";
3604
+ inherits: false;
3605
+ initial-value: 0 0 #0000;
3606
+ }
3607
+ @property --tw-ring-inset {
3608
+ syntax: "*";
3609
+ inherits: false;
3610
+ }
3611
+ @property --tw-ring-offset-width {
3612
+ syntax: "<length>";
3613
+ inherits: false;
3614
+ initial-value: 0px;
3615
+ }
3616
+ @property --tw-ring-offset-color {
3617
+ syntax: "*";
3618
+ inherits: false;
3619
+ initial-value: #fff;
3620
+ }
3621
+ @property --tw-ring-offset-shadow {
3622
+ syntax: "*";
3623
+ inherits: false;
3624
+ initial-value: 0 0 #0000;
3625
+ }
3626
+ @property --tw-space-y-reverse {
3627
+ syntax: "*";
3628
+ inherits: false;
3629
+ initial-value: 0;
3630
+ }
3631
+ @property --tw-leading {
3632
+ syntax: "*";
3633
+ inherits: false;
3634
+ }
3635
+ @property --tw-translate-x {
3636
+ syntax: "*";
3637
+ inherits: false;
3638
+ initial-value: 0;
3639
+ }
3640
+ @property --tw-translate-y {
3641
+ syntax: "*";
3642
+ inherits: false;
3643
+ initial-value: 0;
3644
+ }
3645
+ @property --tw-translate-z {
3646
+ syntax: "*";
3647
+ inherits: false;
3648
+ initial-value: 0;
3649
+ }
3650
+ @property --tw-rotate-x {
3651
+ syntax: "*";
3652
+ inherits: false;
3653
+ }
3654
+ @property --tw-rotate-y {
3655
+ syntax: "*";
3656
+ inherits: false;
3657
+ }
3658
+ @property --tw-rotate-z {
3659
+ syntax: "*";
3660
+ inherits: false;
3661
+ }
3662
+ @property --tw-skew-x {
3663
+ syntax: "*";
3664
+ inherits: false;
3665
+ }
3666
+ @property --tw-skew-y {
3667
+ syntax: "*";
3668
+ inherits: false;
3669
+ }
3670
+ @property --tw-space-x-reverse {
3671
+ syntax: "*";
3672
+ inherits: false;
3673
+ initial-value: 0;
3674
+ }
3675
+ @property --tw-outline-style {
3676
+ syntax: "*";
3677
+ inherits: false;
3678
+ initial-value: solid;
3679
+ }
3680
+ @property --tw-blur {
3681
+ syntax: "*";
3682
+ inherits: false;
3683
+ }
3684
+ @property --tw-brightness {
3685
+ syntax: "*";
3686
+ inherits: false;
3687
+ }
3688
+ @property --tw-contrast {
3689
+ syntax: "*";
3690
+ inherits: false;
3691
+ }
3692
+ @property --tw-grayscale {
3693
+ syntax: "*";
3694
+ inherits: false;
3695
+ }
3696
+ @property --tw-hue-rotate {
3697
+ syntax: "*";
3698
+ inherits: false;
3699
+ }
3700
+ @property --tw-invert {
3701
+ syntax: "*";
3702
+ inherits: false;
3703
+ }
3704
+ @property --tw-opacity {
3705
+ syntax: "*";
3706
+ inherits: false;
3707
+ }
3708
+ @property --tw-saturate {
3709
+ syntax: "*";
3710
+ inherits: false;
3711
+ }
3712
+ @property --tw-sepia {
3713
+ syntax: "*";
3714
+ inherits: false;
3715
+ }
3716
+ @property --tw-drop-shadow {
3717
+ syntax: "*";
3718
+ inherits: false;
3719
+ }
3720
+ @property --tw-drop-shadow-color {
3721
+ syntax: "*";
3722
+ inherits: false;
3723
+ }
3724
+ @property --tw-drop-shadow-alpha {
3725
+ syntax: "<percentage>";
3726
+ inherits: false;
3727
+ initial-value: 100%;
3728
+ }
3729
+ @property --tw-drop-shadow-size {
3730
+ syntax: "*";
3731
+ inherits: false;
3732
+ }
3733
+ @property --tw-backdrop-blur {
3734
+ syntax: "*";
3735
+ inherits: false;
3736
+ }
3737
+ @property --tw-backdrop-brightness {
3738
+ syntax: "*";
3739
+ inherits: false;
3740
+ }
3741
+ @property --tw-backdrop-contrast {
3742
+ syntax: "*";
3743
+ inherits: false;
3744
+ }
3745
+ @property --tw-backdrop-grayscale {
3746
+ syntax: "*";
3747
+ inherits: false;
3748
+ }
3749
+ @property --tw-backdrop-hue-rotate {
3750
+ syntax: "*";
3751
+ inherits: false;
3752
+ }
3753
+ @property --tw-backdrop-invert {
3754
+ syntax: "*";
3755
+ inherits: false;
3756
+ }
3757
+ @property --tw-backdrop-opacity {
3758
+ syntax: "*";
3759
+ inherits: false;
3760
+ }
3761
+ @property --tw-backdrop-saturate {
3762
+ syntax: "*";
3763
+ inherits: false;
3764
+ }
3765
+ @property --tw-backdrop-sepia {
3766
+ syntax: "*";
3767
+ inherits: false;
3768
+ }
3769
+ @property --tw-duration {
3770
+ syntax: "*";
3771
+ inherits: false;
3772
+ }
3773
+ @property --tw-ease {
3774
+ syntax: "*";
3775
+ inherits: false;
3776
+ }
3777
+ @property --tw-scale-x {
3778
+ syntax: "*";
3779
+ inherits: false;
3780
+ initial-value: 1;
3781
+ }
3782
+ @property --tw-scale-y {
3783
+ syntax: "*";
3784
+ inherits: false;
3785
+ initial-value: 1;
3786
+ }
3787
+ @property --tw-scale-z {
3788
+ syntax: "*";
3789
+ inherits: false;
3790
+ initial-value: 1;
3791
+ }
3792
+ @layer properties {
3793
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3794
+ *, ::before, ::after, ::backdrop {
3795
+ --tw-border-style: solid;
3796
+ --tw-font-weight: initial;
3797
+ --tw-shadow: 0 0 #0000;
3798
+ --tw-shadow-color: initial;
3799
+ --tw-shadow-alpha: 100%;
3800
+ --tw-inset-shadow: 0 0 #0000;
3801
+ --tw-inset-shadow-color: initial;
3802
+ --tw-inset-shadow-alpha: 100%;
3803
+ --tw-ring-color: initial;
3804
+ --tw-ring-shadow: 0 0 #0000;
3805
+ --tw-inset-ring-color: initial;
3806
+ --tw-inset-ring-shadow: 0 0 #0000;
3807
+ --tw-ring-inset: initial;
3808
+ --tw-ring-offset-width: 0px;
3809
+ --tw-ring-offset-color: #fff;
3810
+ --tw-ring-offset-shadow: 0 0 #0000;
3811
+ --tw-space-y-reverse: 0;
3812
+ --tw-leading: initial;
3813
+ --tw-translate-x: 0;
3814
+ --tw-translate-y: 0;
3815
+ --tw-translate-z: 0;
3816
+ --tw-rotate-x: initial;
3817
+ --tw-rotate-y: initial;
3818
+ --tw-rotate-z: initial;
3819
+ --tw-skew-x: initial;
3820
+ --tw-skew-y: initial;
3821
+ --tw-space-x-reverse: 0;
3822
+ --tw-outline-style: solid;
3823
+ --tw-blur: initial;
3824
+ --tw-brightness: initial;
3825
+ --tw-contrast: initial;
3826
+ --tw-grayscale: initial;
3827
+ --tw-hue-rotate: initial;
3828
+ --tw-invert: initial;
3829
+ --tw-opacity: initial;
3830
+ --tw-saturate: initial;
3831
+ --tw-sepia: initial;
3832
+ --tw-drop-shadow: initial;
3833
+ --tw-drop-shadow-color: initial;
3834
+ --tw-drop-shadow-alpha: 100%;
3835
+ --tw-drop-shadow-size: initial;
3836
+ --tw-backdrop-blur: initial;
3837
+ --tw-backdrop-brightness: initial;
3838
+ --tw-backdrop-contrast: initial;
3839
+ --tw-backdrop-grayscale: initial;
3840
+ --tw-backdrop-hue-rotate: initial;
3841
+ --tw-backdrop-invert: initial;
3842
+ --tw-backdrop-opacity: initial;
3843
+ --tw-backdrop-saturate: initial;
3844
+ --tw-backdrop-sepia: initial;
3845
+ --tw-duration: initial;
3846
+ --tw-ease: initial;
3847
+ --tw-scale-x: 1;
3848
+ --tw-scale-y: 1;
3849
+ --tw-scale-z: 1;
3850
+ }
3851
+ }
3852
+ }